@charset "UTF-8";
/* ######################################################################################

　セクション見出し＋リード文　sectionHeading / sectionLead
　concept/service/recruit/estate/works/privacy/partner の7ページで共通の
　「大見出し＋リード文」パターン。既存のページ固有BEMクラス（例：
　.conceptFeature__heading）に併記して使い、フォントファミリー・PC文字サイズなど
　共通部分のみここで担う。ページごとの差異（色・行間・字間・文字揃え・
　SP文字サイズ等）はCSS変数で吸収し、各ページのpageXXX_body.css側で
　BEMクラスに対してオーバーライドする。

　使い方：
　<h2 class="sectionHeading conceptFeature__heading">見出し</h2>
　<p class="sectionLead conceptFeature__lead">リード文</p>

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

/* ====================================================
　sectionHeading
==================================================== */
.sectionHeading{
    font-family: var(--sectionHeading-fontFamily, var(--font-serif));
    font-weight: 700;
    letter-spacing: var(--sectionHeading-letterSpacing, 0.01em);
    /* text-alignは既定でinherit（多くのページは親要素のtext-align:centerに
       依存しているため、ここでleftを既定にすると継承が壊れる） */
    text-align: var(--sectionHeading-textAlign, inherit);
    color: var(--sectionHeading-color, var(--color-text));
}
@media print, screen and (min-width: 768px){
    /* サイト基準幅(1500px)未満でも縮小しない（vwを使わず固定rem）。
       .mddocs/coding/coding_base.md「レスポンシブ実装ルール」参照 */
    .sectionHeading{
        font-size: var(--sectionHeading-fontSize-pc, 3rem);
        line-height: var(--sectionHeading-lineHeight-pc, 1.5);
    }
}
@media screen and (max-width: 767px){
    .sectionHeading{
        font-size: var(--sectionHeading-fontSize-sp, 5.641vw);
        line-height: var(--sectionHeading-lineHeight-sp, 1.6);
    }
}

/* ====================================================
　sectionEyebrow（見出し上部の英字ラベル）
　.sectionHeadingの直前に置く単独ブロック要素。recruitOverview__eyebrow・
　partnerFormat__labelなど、ページごとに同じデザイン（英字ラベル→見出しの
　間隔）が重複実装され、間隔の値が食い違っていた（8px相当／6.5px相当）ため
　共通化する。色・サイズの差異はCSS変数で吸収する
==================================================== */
.sectionEyebrow{
    display: block;
    /* Figma実測：ラベル→見出しgap=8px。自身のfont-size基準の比率（8÷13）で
       統一すれば、PC(rem)・SP(vw)いずれもfont-sizeと連動して同じ比率で
       拡縮するため、間隔だけを別途メディアクエリで上書きする必要はない */
    margin-bottom: 0.6154em;
    font-weight: var(--sectionEyebrow-fontWeight, 700);
    color: var(--sectionEyebrow-color, var(--color-primary));
}
@media print, screen and (min-width: 768px){
    .sectionEyebrow{ font-size: var(--sectionEyebrow-fontSize-pc, 1.3rem); }
}
@media screen and (max-width: 767px){
    .sectionEyebrow{ font-size: var(--sectionEyebrow-fontSize-sp, 3.3333vw); }
}

/* ====================================================
　sectionLead
==================================================== */
.sectionLead{
    line-height: var(--sectionLead-lineHeight-pc, 2);
    letter-spacing: var(--sectionLead-letterSpacing, 0);
    /* text-alignは既定でinherit（理由は.sectionHeadingと同様） */
    text-align: var(--sectionLead-textAlign-pc, inherit);
    color: var(--sectionLead-color, var(--color-text));
}
@media print, screen and (min-width: 768px){
    .sectionLead{
        margin-top: var(--sectionLead-marginTop-pc, 1.5em);
        font-size: var(--sectionLead-fontSize-pc, 1.5rem);
    }
}
@media screen and (max-width: 767px){
    .sectionLead{
        margin-top: var(--sectionLead-marginTop-sp, 5.1282vw);
        font-size: var(--sectionLead-fontSize-sp, 3.8462vw);
        line-height: var(--sectionLead-lineHeight-sp, 1.8667);
        text-align: var(--sectionLead-textAlign-sp, inherit);
    }
}