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

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

　【PC版の実装方針】
　このページのFigmaフレームは1920px幅で作成されているが、実測した文字サイズ・
　余白の数値は他ページ（1500px基準で実装済み）と共通の値のため、他ページと同じ
　1500px基準（cap px ÷ 1500 × 100 = vw）でclamp()を算出し、サイト全体で
　縮小率を統一する。
==================================================== */


/* コンテナ左右padding（SP）
---------------------------------------------------- */
/* サイト共通の --container-pad-sp は20pxだが、このページの各セクション
   （PresidentMessage/CompanyOverview/CompanyHistory）はFigma実測で
   一貫して24pxが使われている。共通変数を変えると他ページにも影響するため
   変更せず、このページの .contents 系ラッパーだけページ内で24pxに上書きする */
@media screen and (max-width: 767px){
    .presidentMessage__inner.contents,
    .companyOverview__inner.contents,
    .companyHistory__inner.contents{
        padding-right: 6.1538vw;
        padding-left: 6.1538vw;
    }
}


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

　共通：セクション見出し（MESSAGE/ごあいさつ・COMPANY INFO/会社概要・HISTORY/沿革）

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

.presidentMessage__heading,
.companyOverview__heading,
.companyHistory__heading{
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.433; /* Figma実測：43px高さ ÷ 30px文字 */
    letter-spacing: 0.0667em;
    color: #242424; /* Figma実測（--color-textとは別値） */
    text-align: center;
}
@media print, screen and (min-width: 768px){
    .presidentMessage__heading,
    .companyOverview__heading,
    .companyHistory__heading{ font-size: 3rem; }
}
@media screen and (max-width: 767px){
    /* Figma SPアートボード幅390px基準：26px ÷ 390 × 100。上限なし */
    .presidentMessage__heading,
    .companyOverview__heading,
    .companyHistory__heading{ font-size: 6.6667vw; }
}

/* eyebrowLabel（MESSAGE/COMPANY INFO/HISTORY）
---------------------------------------------------- */
/* 右側の罫線色がサイト共通のeyebrowLabel初期値（白）と異なりFigmaは#dedede */
.presidentMessage__heading .eyebrowLabel::after,
.companyOverview__heading .eyebrowLabel::after,
.companyHistory__heading .eyebrowLabel::after{ border-right-color: #dedede; }

@media screen and (max-width: 767px){
    /* eyebrowLabel（widget/eyebrowLabel.css）はサイト共通でPC基準のclampのため、
       PC側の挙動・共通CSS自体は変更せず、max-width:767pxにスコープして
       このページの見出し3つだけFigma実測（13px）基準で上書きする */
    .presidentMessage__heading .eyebrowLabel,
    .companyOverview__heading .eyebrowLabel,
    .companyHistory__heading .eyebrowLabel{ font-size: 3.3333vw; line-height: 1.467; }

    .presidentMessage__heading .eyebrowLabel::after,
    .companyOverview__heading .eyebrowLabel::after,
    .companyHistory__heading .eyebrowLabel::after{
        border-right-width: max(16.41px, 5.1282vw);
        border-left-width: max(16.41px, 5.1282vw);
    }
}


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

　PRESIDENT MESSAGE（ごあいさつ）

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

/* ----- presidentMessage ----- */
.presidentMessage{ background: #f7f7f7; }
@media print, screen and (min-width: 768px){
    /* Figma実測：帯上端(401)〜MESSAGEラベル(500)＝99px／署名下端(1135)〜帯下端(1212)＝77px */
    .presidentMessage{ padding-top: 6.1875em; padding-bottom: 4.8125em; }
}
@media screen and (max-width: 767px){
    /* Figma SP実測：帯上端〜ラベル＝46px／本文下端〜帯下端＝38px */
    .presidentMessage{ padding-top: 11.7949vw; padding-bottom: 9.7436vw; }
}

/* presidentMessage__body（大見出し＋リード文＋写真＋本文＋署名）
---------------------------------------------------- */
@media print, screen and (min-width: 768px){
    /* Figma実測：見出し下端(582)〜本文(643)＝61px
       PCは写真をfloatさせ、大見出し・リード文・本文が写真の横から始まり、
       写真の高さを超えた分はそのまま写真の下へ回り込む（Figma実測）。
       本文列全体はCompanyOverview/CompanyHistoryと同じ900px幅カラム（Figma実測） */
    .presidentMessage__body{
        margin-top: 3.8125em;
        margin-right: auto;
        margin-left: auto;
        width: 900px;
    }
}
@media screen and (max-width: 767px){
    /* SPはFigma上に大見出し行が存在しないため非表示。
       photo＋nameを1行目、lead・textをその下に全幅で配置するGrid */
    .presidentMessage__catch{ display: none; }
    .presidentMessage__body{
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "photo name"
            "lead  lead"
            "text  text";
        column-gap: 6.1538vw; /* Figma実測24px（写真右端226-写真幅202=24px） */
        row-gap: 6.1538vw;
        margin-top: 6.4103vw;
    }
}

/* presidentMessage__catch（写真横の大見出し行。PCのみ・Figma実測） */
.presidentMessage__catch{
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: 1.433;
    color: #242424;
}
@media print, screen and (min-width: 768px){
    .presidentMessage__catch{ font-size: 3rem; }
}

/* presidentMessage__lead / __text（本文）
---------------------------------------------------- */
.presidentMessage__lead,
.presidentMessage__text{ color: #242424; }
.presidentMessage__text p + p{ margin-top: 1.5em; }
@media print, screen and (min-width: 768px){
    /* Figma実測：leading-32px ÷ 15px文字 */
    .presidentMessage__lead,
    .presidentMessage__text{ line-height: 2.1333; font-size: 1.5rem; }
    .presidentMessage__lead{ margin-top: 2em; }
}
@media screen and (max-width: 767px){
    /* Figma SP実測：leading-28px ÷ 14px文字 */
    .presidentMessage__lead,
    .presidentMessage__text{ line-height: 2; font-size: 3.5897vw; }
    .presidentMessage__lead{ grid-area: lead; }
}

.presidentMessage__text{ }
@media print, screen and (min-width: 768px){
    .presidentMessage__text{ margin-top: 2em; }
}
@media screen and (max-width: 767px){
    .presidentMessage__text{ grid-area: text; }
}

/* presidentMessage__figure（写真。PCはfloatで本文を回り込ませる）
---------------------------------------------------- */
@media print, screen and (min-width: 768px){
    .presidentMessage__figure{ float: right; margin-left: 5em; }
}
@media screen and (max-width: 767px){
    .presidentMessage__figure{ grid-area: photo; }
}

.presidentMessage__photo{
    display: block;
}
@media print, screen and (min-width: 768px){
    .presidentMessage__photo{ width: 260px; height: auto; aspect-ratio: 1/1; border-radius: 6px; }
}
@media screen and (max-width: 767px){
    .presidentMessage__photo{ width: 45.641vw; height: auto; aspect-ratio: 178/176; border-radius: 1.0256vw; }
}

/* presidentMessage__nameBlock（肩書き＋氏名）
---------------------------------------------------- */
.presidentMessage__role{
    font-family: var(--font-serif-work);
    font-weight: 400;
    color: #242424;
}
.presidentMessage__name{
    font-family: var(--font-serif-work);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #242424;
}
@media print, screen and (min-width: 768px){
    /* PC：本文の後ろ（写真のfloatをclearした全幅）に右揃えの署名として配置（Figma実測） */
    .presidentMessage__nameBlock{ display: flex; align-items: baseline; justify-content: flex-end; clear: both; gap: 1.5625em; margin-top: 2.8125em; }
    .presidentMessage__role{ line-height: 1.857; font-size: 1.4rem; } /* leading-26px ÷ 14px */
    .presidentMessage__name{ font-size: 3rem; }
}
@media screen and (max-width: 767px){
    /* SP：写真の隣に肩書き→氏名を縦並び（Figma実測） */
    .presidentMessage__nameBlock{ display: flex; flex-direction: column; grid-area: name; align-self: center; gap: 1.0256vw; }
    .presidentMessage__role{ line-height: 1.714; font-size: 3.5897vw; } /* leading-24px ÷ 14px */
    .presidentMessage__name{ line-height: 1.192; font-size: 6.6667vw; }
}


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

　COMPANY OVERVIEW（会社概要）

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

/* ----- companyOverview ----- */
.companyOverview{ background: var(--color-white); }
@media print, screen and (min-width: 768px){
    /* Figma実測：前セクション下端〜見出し＝87px／表下端〜次セクション見出しの
       半分程度（46px）を本セクションのpadding-bottomとして確保 */
    .companyOverview{ padding-top: 5.4375em; padding-bottom: 2.875em; }
}
@media screen and (max-width: 767px){
    .companyOverview{ padding-top: 7.9487vw; padding-bottom: 14.8718vw; }
}

/* companyOverview__table
---------------------------------------------------- */
@media print, screen and (min-width: 768px){
    .companyOverview__table{
        margin-top: 2.1563em;
        margin-right: auto;
        margin-left: auto;
        width: 900px;
    }
}
@media screen and (max-width: 767px){
    .companyOverview__table{
        margin-top: 6.9231vw;
        border: 1px solid #e0e0e0;
        border-radius: 2.0513vw;
        padding-right: 5.1282vw;
        padding-left: 5.1282vw;
        background: var(--color-white);
    }
}

/* companyOverview__row
---------------------------------------------------- */
.companyOverview__row{ border-bottom: 1px solid var(--color-border); }
@media print, screen and (min-width: 768px){
    .companyOverview__row{
        display: flex;
        align-items: baseline;
        padding-top: 0.75em;
        padding-bottom: 0.75em;
    }
}
@media screen and (max-width: 767px){
    .companyOverview__row{
        display: flex;
        flex-direction: column;
        gap: 1.5385vw;
        padding-top: 5.1282vw;
        padding-bottom: 5.1282vw;
        border-bottom-color: #e0e0e0;
    }
    .companyOverview__row--last{ border-bottom: none; }
}

.companyOverview__label,
.companyOverview__value{ color: #242424; }
@media print, screen and (min-width: 768px){
    .companyOverview__label{ flex: 0 0 140px; font-weight: 400; font-size: 1.5rem; }
    .companyOverview__value{ flex: 1; min-width: 0; font-weight: 400; font-size: 1.5rem; }
}
@media screen and (max-width: 767px){
    /* Figma SP実測：ラベルは太字プライマリカラー14px、値は16px・leading26px */
    /* Figma実測：leading-17px ÷ 14px文字 */
    .companyOverview__label{ font-weight: 700; line-height: 1.214; color: var(--color-primary); font-size: 3.5897vw; }
    .companyOverview__value{ font-weight: 400; line-height: 1.625; font-size: 4.1026vw; }
}

/* companyOverview__row--map（本社所在地：住所＋地図＋案内文）
---------------------------------------------------- */
@media print, screen and (min-width: 768px){
    .companyOverview__row--map .companyOverview__value{ display: flex; flex-direction: column; }
}
@media screen and (max-width: 767px){
    .companyOverview__row--map .companyOverview__value{ display: flex; flex-direction: column; gap: 1.5385vw; }
}

.companyOverview__map{
    border-radius: 4px;
    overflow: hidden;
}
@media print, screen and (min-width: 768px){
    .companyOverview__map{ margin-top: 1.4375em; width: 632px; }
}
@media screen and (max-width: 767px){
    .companyOverview__map{ width: 100%; border-radius: 1.0256vw; }
}
.companyOverview__map img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 632/344;
}

/* companyOverview__mapRow（キャプションとGoogle Mapsリンクを横並びにする行。PCのみ）
---------------------------------------------------- */
@media print, screen and (min-width: 768px){
    /* Figma実測：地図下端から19px。幅は地図画像と同じにし、
       justify-content:space-betweenでリンクを地図右端に自然に揃える
       （リンクだけ独自のleft/transform等で位置調整しない） */
    .companyOverview__mapRow{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1em;
        margin-top: 1.4375em;
        width: 632px;
    }
}

.companyOverview__mapCaption{ color: #242424; }
@media print, screen and (min-width: 768px){
    .companyOverview__mapCaption{ line-height: 1.867; font-size: 1.5rem; }
}
@media screen and (max-width: 767px){
    /* margin-topは元々未指定（0のまま）。今回はPC対象の修正のためSPは変更しない */
    .companyOverview__mapCaption{ line-height: 1.75; font-size: 4.1026vw; }
}

.companyOverview__mapLink{
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity var(--transition);
}
.companyOverview__mapLink:hover{ opacity: 0.7; }
@media print, screen and (min-width: 768px){
    .companyOverview__mapLink{ display: inline-block; margin-top: 0.5em; font-size: 1.5rem; }
}
@media screen and (max-width: 767px){
    .companyOverview__mapLink{ display: none; }
}


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

　COMPANY HISTORY（沿革）

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

/* ----- companyHistory ----- */
.companyHistory{ background: var(--color-white); }
@media print, screen and (min-width: 768px){
    /* Figma実測：前セクション下端〜見出し＝92.5pxのうち半分をpadding-topへ／
       本セクション下端〜マップバナー＝121px */
    .companyHistory{ padding-top: 2.875em; padding-bottom: 7.5625em; }
}
@media screen and (max-width: 767px){
    /* Figma実測：SPのみ背景が#f7f7f7（PCは白のまま） */
    .companyHistory{ background: #f7f7f7; padding-top: 8.7179vw; padding-bottom: 10.2564vw; }
}

/* companyHistory__list
---------------------------------------------------- */
.companyHistory__list{ display: flex; flex-direction: column; }
@media print, screen and (min-width: 768px){
    /* PC：日付リストは1列だが、写真ありの行だけ右側に写真をposition:absoluteで
       重ねて表示する（Figmaは左の年表テキストと右の写真が独立した2カラムで、
       写真は複数行にまたがって配置されるため、行ごとの厳密な高さ計算ではなく
       各写真を対応する行の右肩に揃える簡易的な実装とする） */
    /* 一覧の列幅はCompanyOverviewのテーブルと同じ900px幅カラム（Figma実測） */
    .companyHistory__list{ margin-top: 4.5em; gap: 2.3125em; margin-right: auto; margin-left: auto; width: 900px; }
}
@media screen and (max-width: 767px){
    .companyHistory__list{
        margin-top: 6.9231vw;
        border-top: 1px solid #dedede;
    }
}

.companyHistory__row{ }
@media print, screen and (min-width: 768px){
    .companyHistory__row{ display: flex; }
    .companyHistory__row--photo{ position: relative; }
}
@media screen and (max-width: 767px){
    .companyHistory__row{
        display: flex;
        flex-direction: column;
        gap: 1.5385vw;
        padding-top: 5.1282vw;
        padding-bottom: 5.1282vw;
        border-bottom: 1px solid #dedede;
    }
}

.companyHistory__date{
    font-weight: 700;
    color: var(--color-primary);
}
.companyHistory__event{
    font-weight: 400;
    color: #242424;
}
@media print, screen and (min-width: 768px){
    .companyHistory__date{ flex: 0 0 140px; font-size: 1.5rem; }
    .companyHistory__event{ flex: 1; min-width: 0; line-height: 2.1333; font-size: 1.5rem; } /* leading-28px ÷ 15px */
    /* 写真がある行はテキストが写真に接触しないよう右側に余白を確保
       （写真幅はcompanyHistory__photoと同じclamp値を使う。230px＝Figma実測） */
    .companyHistory__row--photo .companyHistory__event{ max-width: calc(100% - 230px - 1.5em); }
}
@media screen and (max-width: 767px){
    /* Figma実測：leading-17px ÷ 14px文字 */
    .companyHistory__date{ line-height: 1.214; font-size: 3.5897vw; }
    .companyHistory__event{ line-height: 1.625; font-size: 4.1026vw; }
}

/* companyHistory__photo
---------------------------------------------------- */
@media print, screen and (min-width: 768px){
    /* PC：対応する行の右肩に揃えて配置 */
    .companyHistory__photo{
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 230px;
    }
}
@media screen and (max-width: 767px){
    .companyHistory__photo{
        display: block;
        width: 51.2821vw;
        border-radius: 1.0256vw;
        overflow: hidden;
    }
}
.companyHistory__photo img{
    display: block;
    width: 100%;
    height: auto;
}
@media print, screen and (min-width: 768px){
    .companyHistory__row--photo:not(.companyHistory__row--photoSquare) .companyHistory__photo img{ aspect-ratio: 230/150; }
    .companyHistory__row--photoSquare .companyHistory__photo img{ aspect-ratio: 1/1; }
}
@media screen and (max-width: 767px){
    .companyHistory__row--photo:not(.companyHistory__row--photoSquare) .companyHistory__photo img{ aspect-ratio: 200/131; }
    .companyHistory__row--photoSquare .companyHistory__photo img{ aspect-ratio: 1/1; }
}


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

　MAP BANNER（フッター前・アクセスマップ帯）

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

.companyMapBanner{ overflow: hidden; }
@media print, screen and (min-width: 768px){
    .companyMapBanner{ height: 498px; }
}
@media screen and (max-width: 767px){
    .companyMapBanner{ height: 64.1026vw; }
}
.companyMapBanner__map{
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}