@charset "UTF-8";
/* ====================================================
　common_body.css
　リニューアル版：共通見出し（titleSection）・partnerLogos（トップページ専用）
　（フッターは footer.css を参照）
==================================================== */

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

　共通見出し（titleSection）
　ABOUT/SERVICE/CATALOG/RECRUIT/COMPANY など、英字+グラデーション下線の見出し

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

/* 不具合修正：以前は.pageIndex（トップページ判定用class）を起点にしていたが、
   .titleSectionはABOUT/SERVICE/CATALOG/RECRUIT/COMPANYなど複数セクションで使う
   共通見出しコンポーネントであり、トップページかどうかの判定とは無関係のため、
   .titleSection自体を起点にする（他に同名classが存在しないため区別用の
   親class指定も不要） */
.titleSection{
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
    /* line-height:1適用後もフォント自体の内部リーディングがわずかに残るため、
       SERVICE実測(文字下端〜線上端21px、line-height:1適用後の実測は19px)に合わせ微調整 */
    gap:0.34em;
    font-family:"Oswald", sans-serif;
    font-weight:500;
    /* common_first.cssのbody{line-height:1.75}を継承したままだと見出し文字の下に
       大きな行間の余白が残り、下線(::after)までの間隔がFigma実測(SERVICE実測:文字下端〜
       線上端21px)より大幅に離れて見える原因になっていた。見出しは1行の短いラベルのため
       行送りは不要 */
    line-height:1;
    color:#111111;
}
.titleSection--onDark{
    color:#ffffff;
}
.titleSection--center{
    align-items:center;
}
/* 下線バーは装飾のため疑似要素で実装する（HTML側に空のspanを置かない） */
.titleSection::after{
    content:"";
    display:block;
    width:5rem;
    height:0.3rem;
    background:linear-gradient(90deg, #18639f 0%, #00a875 100%);
}

@media print, screen and (min-width:768px){
    .titleSection{
        font-size:5.2rem;
    }
}
@media screen and (max-width:767px){
    /* Figma実測：見出しサイズは帯によって異なるため、個別に上書きが無いセクション
       （現状CATALOGのみ）向けの既定値としてCATALOGの実測値(32px・下線55px)を採用する。
       ABOUT/SERVICE/RECRUIT(42px)・COMPANY(36px)は各セクション側で上書きする */
    .titleSection{
        font-size:8.2051vw;
    }
    .titleSection::after{
        width:14.1026vw;
        height:0.7692vw;
    }
}

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

　外部リンクバナー（partnerLogos）
　Footer2026.html内（<footer id="IncFooter" class="footer">配下）にトップページ限定の
　mt:If（bodyClass eq pageIndex）で出力される要素。HTML構造上はフッター内の要素のため、
　.pageIndex（トップページ判定用class）ではなく、実際の出力先であるフッターのルートclass
　.footerを起点にする（表示条件自体はMT側のmt:Ifが担っており、CSS側で
　トップページかどうかを判定する必要はない）

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

/* ----- 協力会社ロゴ ----- */

/* 外部バナー共通ルール：指示により「罫線込みで書き出す」運用は廃止し、画像は罫線を含まない
   状態で統一の書き出しサイズ(716×156px=@2x、1x換算358×78px)へ再書き出しした
   （partner_*_pc.png、3社とも同一サイズ）。罫線はCSS側で.partnerLogos内の各リンク要素
   （<li>直下の<a>、MTのLinkBannerモジュールが1件ごとに出力する共通要素）へ一律に適用する
   ため、件数が増えても個別バナーごとのCSSを追加する必要はない。
   Figma実測(node 6035:534〜536)：罫線はborder:1px solid #aeaeae、表示サイズ360×80px
   （罫線を含む）。box-sizing:border-boxにより、罫線1px分を差し引いた358×78pxの
   コンテンツ領域へ、罫線なしで再書き出しした画像をwidth:100%で敷き込む。
   Figma node 6035:526（PC）・8002:256/257（SP）参照。 */
.footer .partnerLogos{
    background:#f5f5f5;
}
.footer .partnerLogos a{
    display:block;
    overflow:hidden;
    box-sizing:border-box;
    border:1px solid #aeaeae;
}
.footer .partnerLogos img{
    display:block;
    width:100%;
    height:auto;
}

@media print, screen and (min-width:768px){
    /* 指示によりCOMPANY帯〜バナー上端・バナー下端〜Footer間の余白は、どちらもpartnerLogos側の
       padding（上下6rem）として持たせる（以前はCOMPANY帯下端側の余白をsection.company側の
       padding-bottomとして分けて持たせていたが、指示によりpartnerLogos側へ一本化した） */
    .footer .partnerLogos{
        padding:6rem 0;
    }
    /* 不具合修正：以前はnth-child(2)/(3)へのmargin-leftで3件だけを前提に間隔を作っていたため、
       MTから4件目以降が追加されるとflex(nowrap)のまま1行に圧縮・はみ出しが発生していた。
       件数に依存しない「1行3件・4件目から次行」を実現するため、3列固定のgridへ変更する
       （Figma実測の列間50px/54pxはgridの単一column-gapでは表現できないため、両者の中間で
       総幅1182px相当を維持する52pxに正規化）。行間はFigma上に4件以上の実例がないため、
       画像の縦方向余白と釣り合う値として40pxを採用する */
    .footer .partnerLogos ul{
        display:grid;
        grid-template-columns:repeat(3, auto);
        justify-content:center;
        align-items:center;
        column-gap:5.2rem;
        row-gap:4rem;
    }
    /* 罫線込みの最終表示サイズ(Figma実測360×80px)をaへ指定する。box-sizing:border-boxの
       ため罫線1px分は内側から差し引かれ、画像はその内側(358×78px)へwidth:100%で収まる */
    .footer .partnerLogos a{
        width:36rem;
        height:8rem;
    }
}
@media screen and (max-width:767px){
    /* Figma実測(node 8002:256/257)：帯全体のpaddingは60px(縦)/35px(横)、3枚の間隔は15px。
       画像は3社とも同一データ（縦横比約4.49:1）のため、幅基準（コンテンツ幅いっぱい）に
       揃えれば高さは自動的に揃う（個別の高さ調整は不要）。 */
    .footer .partnerLogos{
        padding:15.3846vw 8.9744vw;
    }
    .footer .partnerLogos ul{
        display:flex;
        flex-direction:column;
        gap:3.8462vw;
    }
    .footer .partnerLogos img{
        width:100%;
        height:auto;
    }
}