@charset "UTF-8";
/* ====================================================
　事業案内ページ固有CSS（ファーストビュー以降）
　pageService_body.css

　【スマートフォン版の実装方針】
　Figmaのスマホアートボード幅390pxを基準比率とし、320〜430px程度の画面幅で
　常に同じデザイン比率を維持するため、font-size・余白・サイズ指定は
　vw のみで画面幅に比例して拡大縮小させる（390pxで頭打ちにしない・下限も設けない）。
　margin/paddingはem・%・vw・vhのみを使用し、pxは使用しない。
　PC版の余白計算はデザイン基準幅1500px（既存ページ estate/works と同一基準）を用いる。
==================================================== */


/* ######################################################################################

　SERVICE INTRO（事業案内リード文）

###################################################################################### */

/* ----- serviceIntro ----- */
.serviceIntro{ background: var(--color-white); }
@media print, screen and (min-width: 768px){
    /* 0.25em刻み（基準16px）：上=5.9375em／下=4.375em。PCはサイト基準幅(1500px)以上・未満とも
       デザイン値で固定し、vwで縮小しない（body min-width:1500pxで横スクロールに委ねる） */
    .serviceIntro{ padding-top: 5.9375em; padding-bottom: 4.375em; }
}
@media screen and (max-width: 767px){
    /* Figma SP：Introブロックのpy-48がそのまま上下パディング（上限なしで比例拡縮） */
    .serviceIntro{ padding-top: 12.3077vw; padding-bottom: 12.3077vw; }
}

/* serviceIntro__inner
---------------------------------------------------- */
.serviceIntro__inner{ text-align: center; }
@media print, screen and (min-width: 768px){
    /* Figma実測：リード文幅928px（.contentsの1440pxより狭い専用幅）。
       .contents由来のpadding-right/left（container-pad-pc）が928pxに
       二重加算され実質幅が狭まるため、ここで打ち消す。
       930px（+2px）としているのは、Figmaのテキスト計測とブラウザの実描画の
       サブピクセル誤差（実測0.2px超過）により本文2行目が意図せず折り返される
       ため、視覚上影響のない範囲でわずかに余裕を持たせるための調整 */
    .serviceIntro__inner{ max-width: 930px; padding-right: 0; padding-left: 0; }
}
@media screen and (max-width: 767px){
    /* Figma SPは左右24px（共通.contentsの20pxとは異なる）。
       また見出し・リード文ともFigma実測で左寄せ（PCの中央揃えを上書き） */
    .serviceIntro__inner{ padding-right: 6.1538vw; padding-left: 6.1538vw; text-align: left; }
}

/* serviceIntro__heading（共通部分は widget/sectionHeading.css の .sectionHeading）
---------------------------------------------------- */
.serviceIntro__heading{
    --sectionHeading-letterSpacing: 0.05em;
    --sectionHeading-color: #242424;
    --sectionHeading-lineHeight-pc: 1.8667;
    --sectionHeading-lineHeight-sp: 1.7273;
}
@media screen and (max-width: 767px){
    /* SPのみletter-spacingを打ち消す（PCの0.05emに対しSPは0指定） */
    .serviceIntro__heading{ letter-spacing: 0; }
}

/* serviceIntro__lead（共通部分は widget/sectionHeading.css の .sectionLead）
---------------------------------------------------- */
.serviceIntro__lead{
    --sectionLead-color: #242424;
    /* 0.25em刻み（文字サイズ15px基準）：1.2em */
    --sectionLead-marginTop-pc: 1.2em;
    --sectionLead-letterSpacing: 0.05em;
}

/* serviceIntro__lead（PC/SPで文章の並び順が異なるため出し分け）
---------------------------------------------------- */
.serviceIntro__lead.sp{ display: none; }
@media screen and (max-width: 767px){
    .serviceIntro__lead.pc{ display: none; }
    .serviceIntro__lead.sp{ display: block; }
}


/* ######################################################################################

　SERVICE SECTION（建築事業／不動産事業／土木事業　共通コンポーネント）

###################################################################################### */

/* ----- serviceSection ----- */
.serviceSection{ background: var(--color-white); }
.serviceSection--gray{ background: #eff1f4; }

@media print, screen and (min-width: 768px){
    /* 建築事業（1番目）：上部はserviceIntroのpadding-bottomで確保済みのため0 */
    .serviceSection{ padding-top: 0; padding-bottom: 5.625em; }
    /* 不動産事業（グレー背景）：帯の開始・終了位置は背景矩形の実測値に合わせる */
    .serviceSection--gray{ padding-top: 3.625em; padding-bottom: 7.375em; }
    /* 土木事業（3番目・最終）：フッター手前の余白 */
    .serviceSection:last-of-type{ padding-top: 3.75em; padding-bottom: 7.5625em; }
}
@media screen and (max-width: 767px){
    .serviceSection{ padding-top: 0; padding-bottom: 9.4872vw; }
    .serviceSection--gray{ padding-top: 11.5385vw; padding-bottom: 12.0513vw; }
    .serviceSection:last-of-type{ padding-top: 11.7949vw; padding-bottom: 21.7949vw; }
}

/* serviceSection__inner
---------------------------------------------------- */
@media print, screen and (min-width: 768px){
    /* Figma実測：3業種ブロック共通の内側幅1141px（.contentsの1440pxより狭い専用幅）。
       .contents由来のpadding-right/left（container-pad-pc）が1141pxに
       二重加算され実質幅が狭まるため、ここで打ち消す */
    .serviceSection__inner{ max-width: 1141px; padding-right: 0; padding-left: 0; }
}
@media screen and (max-width: 767px){
    /* Figma SPは左右24px（共通.contentsの20pxとは異なる） */
    .serviceSection__inner{ padding-right: 6.1538vw; padding-left: 6.1538vw; }
}

/* serviceSection__head（見出しラベル＋アクセント罫）
---------------------------------------------------- */
.serviceSection__head{ text-align: center; }

.serviceSection__label{
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #242424;
}
@media print, screen and (min-width: 768px){
    .serviceSection__label{ font-size: 3rem; line-height: 1.3333; }
}
@media screen and (max-width: 767px){
    /* Figma SPアートボード幅390px基準：22px ÷ 390 × 100。上限なし */
    .serviceSection__label{ font-size: 5.641vw; line-height: 1.4545; }
}

/* serviceSection__lineAccent（2色の罫線アクセント）
---------------------------------------------------- */
.serviceSection__lineAccent{
    display: inline-block;
    background: linear-gradient(to right, var(--color-primary) 50%, #dedede 50%);
}
@media print, screen and (min-width: 768px){
    /* 0.25em刻み（基準16px）：1.625em */
    .serviceSection__lineAccent{ margin-top: 1.625em; width: 60px; height: 4px; }
}
@media screen and (max-width: 767px){
    .serviceSection__lineAccent{ margin-top: 5.1282vw; width: 15.3846vw; height: 0.7692vw; }
}

/* serviceSection__row（PC：テキスト左／画像右の2カラム、SP：単純な縦積み）
---------------------------------------------------- */
@media print, screen and (min-width: 768px){
    /* 0.25em刻み（基準16px）：2.25em */
    .serviceSection__row{ display: flex; align-items: flex-start; justify-content: space-between; margin-top: 2.25em; }
}
@media screen and (max-width: 767px){
    .serviceSection__row{ display: flex; flex-direction: column; margin-top: 6.9231vw; }
}

/* serviceSection__text（PC：固定幅カラム／SP：display:contentsで解除しorderのみ利用）
---------------------------------------------------- */
@media print, screen and (min-width: 768px){
    .serviceSection__text{ display: flex; flex-direction: column; flex: 0 0 460px; }
}
@media screen and (max-width: 767px){
    .serviceSection__text{ display: contents; }
}

/* serviceSection__heading（h3サブ見出し）
---------------------------------------------------- */
.serviceSection__heading{
    font-family: var(--font-serif);
    font-weight: 700;
    color: #242424;
}
@media print, screen and (min-width: 768px){
    .serviceSection__heading{ font-size: 3rem; line-height: 1.6667; }
}
@media screen and (max-width: 767px){
    /* Figma SPアートボード幅390px基準：22px ÷ 390 × 100。上限なし */
    .serviceSection__heading{ order: 1; font-size: 5.641vw; line-height: 1.8182; }
}

/* serviceSection__desc
---------------------------------------------------- */
.serviceSection__desc{ color: #242424; }
@media print, screen and (min-width: 768px){
    /* Figma実測：建築/不動産/土木の3ブロック中、不動産・土木の2ブロックは
       14px・line-height 1.8571（26px÷14px）で一致。建築事業のみ15pxと
       なっているが、これはFigma側の編集し忘れによる例外と判断し、
       多数派かつ内部一貫性のある14px・1.8571を採用する */
    .serviceSection__desc{ margin-top: 2em; font-size: 1.4rem; line-height: 1.8571; }
}
@media screen and (max-width: 767px){
    /* Figma SPアートボード幅390px基準：15px ÷ 390 × 100。上限なし */
    .serviceSection__desc{ order: 2; margin-top: 4.1026vw; font-size: 3.8462vw; line-height: 1.8667; }
}

/* serviceSection__btn（アウトラインボタン）
---------------------------------------------------- */
.serviceSection__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    letter-spacing: 0.03em;
    font-weight: 700;
    line-height: 1.25;
    color: #2a4178;
    transition: opacity var(--transition);
}
.serviceSection--gray .serviceSection__btn{ background: var(--color-white); }
.serviceSection__btn:hover{ opacity: 0.7; }
@media print, screen and (min-width: 768px){
    /* 0.25em刻み（基準16px）：2.5em */
    .serviceSection__btn{
        margin-top: 2.5em;
        border: 2px solid #2a4178;
        border-radius: 3px;
        width: 280px;
        height: 56px;
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 767px){
    /* Figma SPアートボード幅390px基準：16px ÷ 390 × 100。上限なし */
    .serviceSection__btn{
        order: 4;
        margin-top: 4.1026vw;
        border: 2px solid #2a4178;
        border-radius: 3px;
        width: 100%;
        padding-top: 4.6154vw;
        padding-bottom: 4.6154vw;
        font-size: 4.1026vw;
    }
}

/* serviceSection__figure
---------------------------------------------------- */
@media print, screen and (min-width: 768px){
    .serviceSection__figure{ flex: 0 0 560px; }
}
@media screen and (max-width: 767px){
    .serviceSection__figure{ order: 3; margin-top: 6.1538vw; width: 100%; }
}

.serviceSection__figure img{
    display: block;
    width: 100%;
    height: auto;
}
@media print, screen and (min-width: 768px){
    .serviceSection__figure img{ aspect-ratio: 560 / 340; border-radius: 6px; object-fit: cover; }
}
@media screen and (max-width: 767px){
    .serviceSection__figure img{ aspect-ratio: 342 / 220; border-radius: 4px; object-fit: cover; }
}