@charset "UTF-8";
/* ====================================================
　pageIndex_body.css
　リニューアル版：トップページ本文（ファーストビュー以降）専用スタイル
==================================================== */

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

　ABOUT

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

.pageIndex .about{
    background:#ffffff;
}
.pageIndex .about__inner{
    max-width:100rem;
    margin:0 auto;
}
.pageIndex .about__text{
    text-align:center;
}

@media print, screen and (min-width:768px){
    .pageIndex .about__inner{
        padding:8rem 2rem;
        text-align:center;
    }
    .pageIndex .about__inner .titleSection{
        align-items:center;
    }
    .pageIndex .about__text{
        max-width:76rem;
        margin:2.4rem auto 0;
        font-size:1.5rem;
        line-height:2;
    }
}
@media screen and (max-width:767px){
    /* Figma実測(node 6123:45)：SP版もPC版と同じ白背景・中央揃えの見出し＋本文1段落のみ。
       以前のグラデーション背景・強みカード（strengthsCard）はFigma上に存在しないため廃止する。 */
    .pageIndex .about__inner{
        display:flex;
        flex-direction:column;
        align-items:center;
        /* 不具合修正：Figma実測(node 6123:45)は見出しブロックと本文の間隔が30px(7.6923vw)。
           以前は12px(3.0769vw)しか無く、Figmaより狭かった */
        gap:7.6923vw;
        padding:12.8205vw 5.1282vw;
        text-align:center;
    }
    .pageIndex .about__inner .titleSection{
        align-items:center;
        font-size:10.7692vw; /* Figma SP：ABOUT見出しは42px相当 */
    }
    .pageIndex .about__inner .titleSection::after{
        width:14.1026vw; /* Figma SP：下線は55px相当 */
    }
    /* 不具合修正：.about__innerのtext-align:centerを本文が継承し中央揃えになっていたが、
       Figma実測(node 6123:50)では本文にtext-centerの指定は無く左揃え。見出しは
       現状の中央揃えを維持し、本文だけ明示的に左揃えへ戻す */
    .pageIndex .about__text{
        text-align:left;
        font-size:3.8462vw;
        line-height:1.867;
    }
}

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

　SERVICE

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

.pageIndex .service{
    position:relative;
}
.pageIndex .service__inner{
    max-width:100rem;
    margin:0 auto;
}
.pageIndex .service__buttons{
    display:flex;
    flex-wrap:wrap;
}

@media print, screen and (min-width:768px){
    /* サイト共通ルール：PC基準コンテンツ幅は1500px（--pc-content-width、common_first.css参照）。
       パネル自体に角丸は無い。
       以前は.serviceの左右paddingを固定値にしただけだったため、基準幅より広い画面では
       padding分を差し引いた残り＝パネル幅（width:100%）が伸び続けてしまっていた。
       .service__panel自体を固定幅(1500px)+margin:0 autoにし、.serviceの左右paddingは持たない
       （中央配置の起点をpaddingではなくパネル自身の固定幅に一本化）。
       html側のmin-width（--pc-site-width=1500px、common_first.css参照）と合わせて、
       基準幅未満では画面全体の横スクロールで、基準幅以上では中央配置で見た目を維持する。
       背景写真(service_bg.jpg)はFigma実寸(1520px基準)で書き出し済みの画像を、表示幅だけ
       サイト共通ルールの1500pxに合わせて表示する（height:autoにより縦横比は保たれる。
       1520→1500pxは誤差1.3%程度でCSS側のcoverトリミングは行わない）。
       オーバーレイは長方形490(SVG)の実測グラデーション(#001C4C、fill-opacity 0.5と
       ストップのopacityの掛け合わせ)をそのまま再現する。
       Figma実寸(node 6079:40)：SERVICEパネル下端とCATALOGパネル上端の間隔は90px。
       CATALOG側はガター以外の余白を持たない設計のため、この90pxはSERVICE側のpadding-bottomとして確保する。 */
    .pageIndex .service{
        background:#f8f9fa;
        min-width:var(--pc-site-width);
        padding-bottom:9rem;
        /* 不具合修正：下記.service__panelを画面幅1500px未満で1500px固定のまま中央基準に
           はみ出させる方式に変更したため、そのはみ出し分を外側（.service自身）で
           クリップする必要がある。SP版（max-width:767px側）は元々overflow:hiddenを
           持っており、PC側にも同様に追加する */
        overflow:hidden;
    }
    /* 不具合修正（旧方式・不採用）：一時的にwidth:100%+max-widthで画面幅へ追従して縮める
       方式にしていたが、指示によりSERVICEは「1500px時点の要素サイズ・配置関係を縮小せず、
       画面幅1500〜1200pxでは画面中央基準で左右へ均等にはみ出させる」動きが正しい仕様と
       確認されたため、幅は常にvar(--pc-content-width)固定に戻す。
       margin:0 autoは、幅が親要素（.service、画面実幅）より広い場合はブラウザの挙動として
       左右均等ではなく右側だけがマイナスマージンを受け持つ（実機確認：1200px幅で
       marginLeft:0px/marginRight:-300pxとなり、パネルが左端固定・右側だけ見切れる状態に
       なっていた）。position:relativeと組み合わせたleft:calc(50% - var(--pc-content-width) / 2)
       に置き換えることで、1500px以上（プラス値、常に画面中央）・1500px未満（マイナス値、
       中央基準で左右均等にはみ出す）のどちらでも数式どおり正しく中央基準になる。 */
    .pageIndex .service__panel{
        position:relative;
        overflow:hidden;
        width:var(--pc-content-width);
        left:calc(50% - var(--pc-content-width) / 2);
    }
    /* グローバルの img{max-width:100%;height:auto} が背景写真にも掛かってしまうため、
       width/min-widthを固定値にしたうえでmax-width:noneで明示的に打ち消す。
       height:autoは維持してよい（widthが固定である以上、画像自身の縦横比から
       導かれる高さも一意に固定されるため、画面幅に応じて変化することはない） */
    .pageIndex .service__bg{
        display:block;
        width:var(--pc-content-width);
        min-width:var(--pc-content-width);
        max-width:none;
        height:auto;
    }
    /* ::afterは.service__panelの実際の最後の子（.service__innerより後）として描画されるため、
       z-indexを指定しないと本文・ボタンより手前に重なってしまう。これが
       「グレーのオーバーレイが乗って見える」「白文字がグレーに見える」「ボタンが押せない」
       の共通原因だった。装飾用のオーバーレイなのでpointer-eventsも明示的に外す */
    .pageIndex .service__panel::after{
        content:"";
        position:absolute;
        inset:0;
        z-index:1;
        background:linear-gradient(90deg, rgba(0,28,76,0.4) 0%, rgba(0,28,76,0.4) 36.5%, rgba(0,28,76,0.15) 80.8%, rgba(0,28,76,0.15) 100%);
        pointer-events:none;
    }
    /* キャプチャとFigmaの実測比較で発見：ベース（無条件）ルールの
       .service__inner{max-width:100rem;margin:0 auto}（本文向けの狭い読み物用カラム目的で
       別途定義されていたもの）がこのPC用position:absolute;inset:0にも適用され続けており、
       1500pxパネルの中に1000px幅の本文ボックスが二重に中央寄せされる形になっていた。
       実際のボタン左端はFigma実測166pxに対しキャプチャ実測410pxとなり、約244pxのズレが
       発生していたため、ここでmax-width/marginを明示的に解除する */
    .pageIndex .service__inner{
        position:absolute;
        z-index:2;
        inset:0;
        max-width:none;
        margin:0;
        /* 左paddingはネイティブ解像度のFigmaキャプチャでボタン左端を実測し166pxへ修正
           （旧16rem=160pxは、ボタンのぼかし縁取り込みのグループ座標を誤って採用していたため
           実際のボタン面より6px内側にずれていた）。上/右/下は実測差2px以内で許容範囲のため維持 */
        padding:7.6rem 4rem 7.6rem 16.6rem;
    }
    .pageIndex .service__inner .titleSection{
        color:#ffffff;
    }
    .pageIndex .service__title{
        margin-top:2rem;
        font-weight:900;
        font-size:2.2rem;
        color:#ffffff;
    }
    .pageIndex .service__text{
        max-width:60rem;
        /* Figma実寸(node 6035:424→6035:413間)：文字の可視下端〜次要素上端で41px。
           line-height:2による行送りで実測約18px相当がすでに見た目の余白として生じているため、
           残りをmargin-topで補い(41-18=23px)実測41pxに合わせる。他の余白を削っての帳尻合わせはしない */
        margin-top:2.3rem;
        font-weight:bold;
        font-size:1.5rem;
        line-height:2;
        color:#ffffff;
    }
    .pageIndex .service__buttons{
        gap:2.2rem;
        /* Figma実寸(node 6035:413→6035:504間)：文字可視下端〜ボタン外枠上端で44px。
           本文のline-height:2による行送り分(実測約9px)を差し引いた残りをここで補う */
        margin-top:3.5rem;
    }

    /* ----- SERVICE専用ボタン -----
       共通.buttonコンポーネント（角丸・padding・justify-content:center・gap・
       ::afterの矢印文字等）を流用した近似実装を3回指摘されたため、共通.buttonへの依存をやめ、
       Figma実測(node 6035:504/505/506/507/508、6035:510/511/512/513/514)のみを根拠に
       SERVICE専用の構造・数値で作り直す。
       外側244×74＝半透明のぼかし縁取り（Figmaに実在するが従来未実装だった）、
       内側230×60＝実際に押せる面。オフセットは上下左右とも実測7pxで固定。 */
    .pageIndex .service__button{
        position:relative;
        isolation:isolate;
        display:block;
        width:24.4rem;
        height:7.4rem;
        text-decoration:none;
        transition:opacity 0.2s;
    }
    .pageIndex .service__button:hover{
        opacity:0.85;
    }
    .pageIndex .service__button::before{
        content:"";
        position:absolute;
        inset:0;
        z-index:-1;
        pointer-events:none;
        background:linear-gradient(108.435deg, rgba(196,220,240,0.2) 5.211%, rgba(245,245,245,0.4) 90.819%);
    }
    .pageIndex .service__buttonFace{
        position:absolute;
        inset:0.7rem;
        display:flex;
        align-items:center;
        padding:0 3rem;
        border:1px solid rgba(255,255,255,0.3);
    }
    /* 矢印は装飾のため空のspanを置かず、表示面(buttonFace)の疑似要素として実装する。
       Figma実測(node 6035:508)：矢印表示サイズ12.196×9px。以前はico-arrow.svgを
       transform:rotate(90deg)で回転させていたが、CSSのtransformは疑似要素の背景画像を
       一度ラスタライズしてから回転させるため輪郭がぼやける原因になっていた。
       回転をSVGファイル自体に焼き込み(ico-arrow.svgを右向きへ再書き出し)、
       CSS側のtransformを撤廃することでネイティブ解像度のまま鮮明に表示する */
    .pageIndex .service__buttonFace::after{
        content:"";
        position:absolute;
        /* face高さ60px・アイコン高さ9pxの中央は本来25.5pxだが、top:50%+負のmarginで
           半端座標を作らないよう、整数の26pxへ丸めて固定指定する(0.5px以内の誤差は視認できない) */
        top:2.6rem;
        right:3rem;
        width:1.22rem;
        height:0.9rem;
        background-color:currentColor;
        mask:url("/common2026/img/icon/ico-arrow.svg") center / contain no-repeat;
        -webkit-mask:url("/common2026/img/icon/ico-arrow.svg") center / contain no-repeat;
        pointer-events:none;
    }
    .pageIndex .service__button--primary .service__buttonFace{
        background:linear-gradient(105.205deg, rgba(0,91,172,0.85) 12.546%, rgba(19,129,214,0.85) 97.564%);
        box-shadow:0 1px 0 #001c4c;
        color:#ffffff;
    }
    .pageIndex .service__button--light .service__buttonFace{
        background:linear-gradient(-72.508deg, rgba(229,229,229,0.8) 4.629%, rgba(255,255,255,0.8) 77.502%);
        box-shadow:0 1px 0 #707070;
        color:#111111;
    }
    .pageIndex .service__buttonLabel{
        /* Figma実測：ボタン内文字はNoto Sans JPではなくYu Gothic Bold指定のため、
           サイト共通のfont-family(Noto Sans JPを先頭に追加済み)を明示的に上書きする */
        font-family:"游ゴシック体","Yu Gothic Medium","Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
        font-weight:bold;
        font-size:1.5rem;
    }
}
@media screen and (max-width:767px){
    /* Figma実測(node 8002:29/57)：SP版もPC版と同じ「写真フル背景＋グラデーション＋
       白文字」の構成。.service自体をoverflow:hiddenの位置指定コンテナにし、
       写真(.service__bg.sp)はz-index:-1で最背面に敷く（hero/serviceの他ボタン等と同じ
       「装飾用の絶対配置背景」パターン）。 */
    .pageIndex .service{
        position:relative;
        overflow:hidden;
    }
    .pageIndex .service__bg{
        position:absolute;
        inset:0;
        z-index:-1;
        width:100%;
        height:100%;
        object-fit:cover;
    }
    /* Figma実測(node 8002:57)：グラデーション(rgba(0,28,76,0.4)→0.15)は写真の上に重なる
       コンテンツ側の背景として持たせる（PC版.service__panel::afterと同じ役割を、
       SPではオーバーレイ疑似要素ではなくinner自身のbackgroundとして再現する） */
    .pageIndex .service__inner{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:5.1282vw;
        padding:11.5385vw 6.4103vw;
        background:linear-gradient(90.2deg, rgba(0,28,76,0.4) 37.21%, rgba(0,28,76,0.15) 80.805%);
        text-align:left;
    }
    /* 指示によりSERVICE見出し(h2)と本文(service__title/text/buttons)を別々に
       アニメーションさせるため、本文側を新規のservice__bodyで包んだ。SPは.service__inner
       自身のgapで各要素間隔を確保していたため、service__bodyを同じdisplay:flex/gapで
       入れ子にし、見出し〜本文間・本文内各要素間の間隔を変更前と同一に保つ */
    .pageIndex .service__body{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:5.1282vw;
        width:100%;
    }
    /* 指示によりSERVICEタイトルのみ他SPセクションと同じ中心軸で中央揃えにする
       （Figma実測(node 8002:29)では左揃えだが、明示指示を優先する）。
       align-selfでタイトルという要素自身のみを.service__inner内で中央寄せし、
       align-itemsでタイトル文字＋下線を同じ中心軸に揃える。本文(.service__text)・
       ボタン(.service__buttons)は.service__inner{align-items:flex-start}のまま
       個別に影響を受けないため、中央揃えが波及しない */
    .pageIndex .service__inner .titleSection{
        align-self:center;
        align-items:center;
        color:#ffffff;
        font-size:10.7692vw; /* Figma SP：SERVICE見出しは42px相当 */
    }
    .pageIndex .service__inner .titleSection::after{
        width:14.1026vw; /* Figma SP：下線は55px相当 */
    }
    .pageIndex .service__title{
        font-weight:900;
        font-size:5.641vw;
        line-height:1.4;
        color:#ffffff;
    }
    .pageIndex .service__text{
        font-size:3.8462vw;
        line-height:1.867;
        font-weight:bold;
        color:#ffffff;
    }
    .pageIndex .service__buttons{
        flex-direction:column;
        align-items:flex-start;
        gap:2.5641vw;
        width:100%;
    }

    /* ----- SERVICE専用ボタン（SP） -----
       Figma実測(node 8002:50〜54、8002:43〜48)：外側340×74・内側326×60(左右とも7pxオフセット)。
       内側paddingは左右とも実測30px(=7pxオフセット+23pxの余白)で、これはPC版の
       内側paddingと同じ比率のため、PC版(.service__button等、min-width:768px側で定義)と
       同じ構造をSP用の数値で再定義する（rem固定のPC用ルールをSPでは参照できないため）。 */
    .pageIndex .service__button{
        position:relative;
        isolation:isolate;
        display:block;
        width:100%;
        height:18.9744vw;
        text-decoration:none;
    }
    .pageIndex .service__button::before{
        content:"";
        position:absolute;
        inset:0;
        z-index:-1;
        pointer-events:none;
        background:linear-gradient(108.435deg, rgba(196,220,240,0.2) 5.211%, rgba(245,245,245,0.4) 90.819%);
    }
    .pageIndex .service__buttonFace{
        position:absolute;
        inset:1.7949vw;
        display:flex;
        align-items:center;
        padding:0 7.6923vw;
        border:1px solid rgba(255,255,255,0.3);
    }
    .pageIndex .service__buttonFace::after{
        content:"";
        position:absolute;
        top:6.6667vw;
        right:7.6923vw;
        width:3.1269vw;
        height:2.3077vw;
        background-color:currentColor;
        mask:url("/common2026/img/icon/ico-arrow.svg") center / contain no-repeat;
        -webkit-mask:url("/common2026/img/icon/ico-arrow.svg") center / contain no-repeat;
        pointer-events:none;
    }
    .pageIndex .service__button--primary .service__buttonFace{
        background:linear-gradient(105.205deg, rgba(0,91,172,0.85) 12.546%, rgba(19,129,214,0.85) 97.564%);
        box-shadow:0 1px 0 #001c4c;
        color:#ffffff;
    }
    .pageIndex .service__button--light .service__buttonFace{
        background:linear-gradient(-72.508deg, rgba(229,229,229,0.8) 4.629%, rgba(255,255,255,0.8) 77.502%);
        box-shadow:0 1px 0 #707070;
        color:#111111;
    }
    .pageIndex .service__buttonLabel{
        font-family:"游ゴシック体","Yu Gothic Medium","Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
        font-weight:bold;
        font-size:3.8462vw;
    }
}

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

　CATALOG

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

/* サイト共通ルール：CATALOGはSERVICEと同じPC基準コンテンツ幅1500px（--pc-content-width）の
   濃紺(#001C4C)パネル。SERVICEと異なりオーバーレイ・写真は無いフラットな塗り。
   角丸は無い。パネル内は「見出し＋説明文＋CTA」の左カラムと、カタログ3点のスライダーの右カラムを
   横並びに配置する構成(catalog__head + catalogSlider)。
   不具合修正：CATALOGはメインイメージ／SERVICEとは異なり指示の対象外（今回の中央基準は
   み出し方式にはしない）。カード（catalogSlider、実描画幅75rem固定・3枚表示・Slick）の
   デザイン・枚数・矢印は一切変更せず、画面幅1500px未満でも本来の横並びを維持したまま
   1200px幅まで収める必要があるため、.catalog__innerはSERVICEと違い画面幅へ追従して
   縮む（width:100%+max-width）。ただし見出し列(flex:none)・gap(12.7rem固定)・
   スライダー(75rem固定)の合計はFigma実測どおり1500px基準ぴったりの設計値のため、
   そのままでは1500px未満で1行に収まりきらず、.catalogSlider側が段落ちしていた
   （詳しくは下の各プロパティ側コメント参照）。 */
.pageIndex .catalog{
    background:#ffffff;
}
.pageIndex .catalog__inner{
    text-align:left;
}

@media print, screen and (min-width:768px){
    /* Figma実寸：CATALOGパネル下端〜SOLAR PRODUCTバナー上端の間隔は90px。
       SERVICE→CATALOGと同じ「間隔は前のセクションのpadding-bottomとして確保する」設計に揃える */
    .pageIndex .catalog{
        min-width:var(--pc-site-width);
        padding-bottom:9rem;
    }
    /* Figma実測(node 6079:39)：見出し列は左端159px開始、スライダーは661px開始・幅750px・
       右端が1411px(＝右余白109px)。以前はjustify-content:space-betweenで2要素を
       両端揃えしていたため、gap:4remの指定値を無視して余白が(1500-159-109-355-750)=約127px
       ではなく実測315pxまで広がり、スライダー全体がFigmaより右へずれていた。
       space-betweenをやめてflex-start+固定gapにし、左右paddingもFigma実測値に修正する。
       上下paddingはslide_catalogフレーム自体(高さ302px)を基準に、フレーム全体480pxから
       均等に振り分けた値（(480-302)/2≒89px）を採用する。 */
    /* 不具合修正（試行1・不採用）：flex-wrap:wrapで見出し列とスライダーを縦2段に折り返す
       方式を試したが、実際にスライダー本体（.catalogSlider.slick-initialized.slick-slider）
       が本来の横並びから段落ちする表示になってしまい、指示に反する。
       不具合修正（試行2・不採用）：SERVICEと同じ「1500px固定のまま画面中央基準ではみ出させ、
       外側でクリップする」方式も試したが、1500px未満でスライダー右端のslick-next矢印ボタンが
       画面外へ完全に押し出され、非表示・操作不可になってしまう（実機確認：1200px幅で
       slick-nextのleft/right座標がどちらも画面幅を超えていた）。矢印まで切り落とすのは
       共通条件「メニュー、矢印、影など必要な表示まで切り落とさない」に反するため不採用。
       採用した方法：.catalog__inner自体は画面幅へ追従して縮む（width:100%+max-width）。
       中身のうち動かせないのはスライダー本体（.catalogSlider、flex:none・実描画幅75rem固定・
       3枚表示・矢印位置とも一切変更しない）のみで、見出し列(.catalog__head)は本文がFigma実測の
       35.5rem(355px)を上限に折り返せる幅であり、Slickのようにインライン幅を固定JSで
       持っているわけではないため、flex-basis:0 + flex-grow:1で「残りスペースまで伸びつつ
       355pxで頭打ち」にできる（本文の折り返し行数が画面幅に応じて増えるだけで、文字サイズ・
       ボタンサイズは変更しない）。
       それでも見出し列を最小(ボタン幅29.4rem=294px)まで縮めた合計（294+gap+750+左右padding）は
       1200pxちょうどには収まらないため、gap・左右paddingは画面幅1500〜1200pxの範囲でのみ
       vwベースの線形計算で少しずつ詰める（1500px以上は元の値のまま、1200px未満はhtml自体が
       1200px未満にならないため以降変化しない）。詰めるのはあくまで余白（gap／padding）のみで、
       スライダー・カード・見出しの文字サイズ自体は縮小しない。 */
    .pageIndex .catalog__inner{
        display:flex;
        align-items:center;
        justify-content:flex-start;
        gap:clamp(5rem, calc(12.7rem - (150rem - 100vw) * 0.2567), 12.7rem);
        width:100%;
        max-width:var(--pc-content-width);
        margin:0 auto;
        background:#001c4c;
        padding-top:8.9rem;
        padding-bottom:8.9rem;
        padding-right:clamp(4rem, calc(10.9rem - (150rem - 100vw) * 0.23), 10.9rem);
        padding-left:clamp(6rem, calc(15.9rem - (150rem - 100vw) * 0.33), 15.9rem);
    }
    .pageIndex .catalog__head{
        flex:1 1 0;
        max-width:35.5rem;
    }
    .pageIndex .catalog__text{
        max-width:40rem;
        margin-top:1.6rem;
        font-weight:bold;
        font-size:1.5rem;
        /* Figma実測(node 6035:432)：line-height:15px(フォントサイズと同値=1)、letter-spacing:-0.15px(-0.01em)。
           指定が無いと.pageIndexのline-height:1.75を継承し行間が広く見えていた */
        line-height:1;
        letter-spacing:-0.01em;
        color:#ffffff;
    }
    .pageIndex .catalogSlider{
        flex:none;
        width:75rem;
        margin:0;
    }
    .pageIndex .catalog__cta{
        margin-top:4rem;
    }
}
@media screen and (max-width:767px){
    /* Figma実測(node 8002:58/60)：パネル背景#001c4cが抜けており白背景のまま表示されていた
       不具合を修正。上下paddingは非対称(上40px・下53px)のため個別に指定する */
    .pageIndex .catalog__inner{
        display:block;
        padding-top:10.2564vw;
        padding-right:5.1282vw;
        padding-bottom:13.5897vw;
        padding-left:5.1282vw;
        background:#001c4c;
    }
    /* 指示によりCATALOGタイトル・本文を中央揃えにする。.catalog__head内のみに
       text-align:centerを閉じ、キャプション(.catalogSlider)・CTAボタン(.catalog__cta)は
       別要素のため影響しない */
    .pageIndex .catalog__head{
        text-align:center;
    }
    .pageIndex .catalog__head .titleSection{
        align-items:center;
    }
    .pageIndex .catalog__text{
        margin-top:5.3846vw;
        font-size:3.8462vw;
        line-height:1.867;
        color:#ffffff;
    }
    .pageIndex .catalogSlider{
        margin-top:10.5128vw;
    }
    .pageIndex .catalog__cta{
        margin-top:9.7436vw;
    }
}

/* ----- カタログスライダー ----- */

.pageIndex .catalogSlider li{
    text-align:center;
}
/* 指示によりカード全体（画像＋キャプション）を1つのaでまとめる。aは既定でinlineのため、
   liの子であった頃と同じ横幅・中央寄せの挙動をimg/pにそのまま持たせるためblock化する */
.pageIndex .catalogSlider a{
    display:block;
    transition:opacity 0.2s;
}
.pageIndex .catalogSlider a:hover,
.pageIndex .catalogSlider a:focus-visible{
    opacity:0.8;
}
.pageIndex .catalogSlider img{
    display:block;
    margin:0 auto;
}
.pageIndex .catalogSlider p{
    color:#ffffff;
    font-weight:bold;
}
.pageIndex .catalogSlider p::before{
    content:"›";
    margin-right:0.4em;
}

@media print, screen and (min-width:768px){
    /* Figma実寸(node 6035:441)：カタログ画像は幅180px・高さ270px固定(object-fit:coverで統一)、
       隣接する画像との間隔は50px(li片側25px)。3点が同時に表示される(slidesToShow:3、top.js参照)。
       キャプションはFigma実測で画像と同じ左端から開始する左揃えのため、画像と同じ固定幅+margin:auto
       で中央寄せしたうえで、その内側をtext-align:leftにする（liごと中央寄せにすると画像とキャプションの
       左端がズレるため） */
    .pageIndex .catalogSlider li{
        padding:0 2.5rem;
        text-align:left;
    }
    .pageIndex .catalogSlider img{
        width:18rem;
        height:27rem;
        object-fit:cover;
    }
    .pageIndex .catalogSlider p{
        width:18rem;
        margin:1.6rem auto 0;
        font-size:1.3rem;
        /* Figma実測(node 6035:445等)：line-height:15px(=1.1538)、letter-spacing:-0.13px(-0.01em) */
        line-height:1.1538;
        letter-spacing:-0.01em;
    }
    .pageIndex .catalogSlider.slick-slider{
        position:relative;
    }
    .pageIndex .catalogSlider.slick-slider .slick-track{
        display:flex;
        align-items:flex-start;
    }
    /* Figma実測(node 6035:450/451)：矢印自体は15×26pxの塗り矢印(white, fill-opacity 0.4)で、
       ボタン面や円形の背景は存在しない。slick標準の20×20px・transform:translate(0,-50%)による
       中央揃えを明示的に打ち消し(top指定+transform:noneに一本化)、実測のY中心(スライダー上端から
       136.5px、矢印自身の高さ26pxの半分=13pxを引いた123.5px)を直接指定する */
    .pageIndex .catalogSlider.slick-slider .slick-arrow{
        position:absolute;
        top:12.35rem;
        transform:none;
        z-index:1;
        width:1.5rem;
        height:2.6rem;
    }
    .pageIndex .catalogSlider.slick-slider .slick-prev{
        left:-2rem;
    }
    .pageIndex .catalogSlider.slick-slider .slick-next{
        right:-2rem;
    }
}
@media screen and (max-width:767px){
    /* Figma実測(node 8002:58)：中央の1枚(180×270px)を全面表示し、隣接カットを55px覗かせる
       centerMode構成(top.js参照)。liの左右paddingはslick側のcenterPaddingが担うため0にする
       （paddingを残すと覗き幅がFigma実測の55pxからずれる） */
    /* 不具合修正：ベース規則.catalogSlider li{text-align:center}をPC側は上書きしているが
       SP側は未上書きのままだったため、キャプションが中央揃えになっていた。CATALOGタイトル・
       本文の中央揃え化(.catalog__head側)とは無関係に、カードのキャプションは画像左端に
       揃えた左揃えのまま固定する */
    .pageIndex .catalogSlider li{
        padding:0;
        text-align:left;
    }
    .pageIndex .catalogSlider img{
        width:46.1538vw;
        height:69.2308vw;
        object-fit:cover;
    }
    /* 不具合修正：liはtext-align:leftのみでwidth指定が無いため、キャプション<p>は
       liいっぱいの幅で描画され、その左端（liの左端）から文字が始まっていた。
       画像はwidth:46.1538vw＋margin:0 auto（ベース規則）でliの中央に配置されている
       ため、liの左端と画像の左端は一致しない。キャプションにも画像と同じ幅＋
       margin:autoを与え、画像と同じ基準で中央寄せしたうえで、その内側をtext-align:left
       にする（liごと中央寄せにすると画像とキャプションの左端がズレるため、PC版
       (li{text-align:left}+img/p共通width+margin:auto)と同じ考え方をSPにも適用する） */
    .pageIndex .catalogSlider p{
        width:46.1538vw;
        margin:4.1026vw auto 0;
        font-size:3.3333vw;
    }
    /* Figma実測：矢印自体は15×26pxでPC版と共通。位置は覗き見え幅(55px)の中央付近、
       画像の縦方向中央に揃える */
    .pageIndex .catalogSlider.slick-slider .slick-arrow{
        top:34.6154vw;
        transform:translateY(-50%);
        width:3.8462vw;
        height:6.6667vw;
    }
    .pageIndex .catalogSlider.slick-slider .slick-prev{
        left:2.5641vw;
        z-index:1;
    }
    .pageIndex .catalogSlider.slick-slider .slick-next{
        right:2.5641vw;
        z-index:1;
    }
}

/* slick-theme.min.cssのデフォルト矢印アイコン(フォントアイコン「←/→」、20px、opacity:.75)を
   打ち消し、Figma実測のSVG矢印(15×26px、white fill-opacity 0.4の塗り形状)に置き換える。
   以前はprev用SVGをtransform:rotate(180deg)でnext用に流用していたが、CSSのtransformは
   疑似要素の背景画像を一度ラスタライズしてから回転させるため輪郭がぼやける原因になっていた。
   回転をSVGファイル自体に焼き込んだ別ファイル(ico-slider-arrow-next.svg)を用意し、
   CSS側のtransformを廃止することでネイティブ解像度のまま鮮明に表示する。
   矢印自体がFigma上ですでに40%透明のため、::beforeのopacityは1のまま(重ねて薄くしない)。
   装飾用のためpointer-eventsはnoneにし、クリックは親のbutton要素(.slick-prev/.slick-next)が
   担う（slickが自動生成するbuttonは元から画面全体が押せる領域になっている）。 */
.pageIndex .catalogSlider.slick-slider .slick-prev,
.pageIndex .catalogSlider.slick-slider .slick-next{
    background:transparent;
    border:0;
    box-shadow:none;
    border-radius:0;
    padding:0;
    /* 保険：top.js側でPrevious/Nextの文字を持たないボタンHTMLへ変更済みだが、
       .pageIndex button{font:inherit}がslick-theme.min.cssのfont-size:0より詳細度で勝り
       文字が見える不具合の再発を防ぐため、CSS側でも視覚的に隠す。矢印自体は
       background-imageで別途表示するためcolor:transparentの影響を受けない */
    font-size:0;
    color:transparent;
}
.pageIndex .catalogSlider.slick-slider .slick-prev::before,
.pageIndex .catalogSlider.slick-slider .slick-next::before{
    content:"";
    display:block;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    font-size:0;
    opacity:1;
    pointer-events:none;
}
.pageIndex .catalogSlider.slick-slider .slick-prev::before{
    background-image:url("/common2026/img/icon/ico-slider-arrow-prev.svg");
}
.pageIndex .catalogSlider.slick-slider .slick-next::before{
    background-image:url("/common2026/img/icon/ico-slider-arrow-next.svg");
}
.pageIndex .catalogSlider.slick-slider .slick-disabled::before{
    opacity:0.3;
}

/* ----- CATALOG専用ボタン -----
   SERVICEの.service__buttonと同じ考え方（外側＝半透明のぼかし縁取り／内側＝実際に押せる面）だが、
   数値はCATALOG用にFigma実測(node 6079:32〜6079:37)し直したもので、SERVICEのCSSは流用しない。 */
.pageIndex .catalog__button{
    position:relative;
    isolation:isolate;
    display:block;
    text-decoration:none;
}
.pageIndex .catalog__button:hover{
    opacity:0.85;
}
.pageIndex .catalog__buttonFace{
    position:absolute;
    display:flex;
    align-items:center;
    border:1px solid rgba(255,255,255,0.3);
    background:linear-gradient(108.308deg, rgba(0,91,172,0.85) 12.546%, rgba(19,129,214,0.85) 97.564%);
    box-shadow:0 1px 0 #001c4c;
    color:#ffffff;
}
.pageIndex .catalog__buttonLabel{
    font-family:"游ゴシック体","Yu Gothic Medium","Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
    font-weight:bold;
}
/* 矢印は装飾のため空のspanを置かず表示面の疑似要素として実装する。SERVICEと同じ理由で
   transform:rotate(90deg)は使わず、右向きに焼き込み済みのico-arrow.svgをそのまま使用する。
   face高さ60pxに対しアイコン高さ9pxの中央(25.5px)は半端座標になるため26pxへ丸める */
.pageIndex .catalog__buttonFace::after{
    content:"";
    position:absolute;
    background-color:currentColor;
    mask:url("/common2026/img/icon/ico-arrow.svg") center / contain no-repeat;
    -webkit-mask:url("/common2026/img/icon/ico-arrow.svg") center / contain no-repeat;
    pointer-events:none;
}

@media print, screen and (min-width:768px){
    /* Figma実寸(node 6079:33/34)：外側294×74、内側280×60(上下左右とも7pxオフセット)。
       文字左端は内側から30px、アイコンは右揃え(space-between)。SERVICEと同じ設計思想だが、
       ラベル文字列が長いため外側・内側幅がSERVICEの244/230pxとは異なる */
    .pageIndex .catalog__button{
        width:29.4rem;
        height:7.4rem;
    }
    .pageIndex .catalog__button::before{
        content:"";
        position:absolute;
        inset:0;
        z-index:-1;
        pointer-events:none;
        background:linear-gradient(111.882deg, rgba(196,220,240,0.2) 5.211%, rgba(245,245,245,0.4) 90.819%);
    }
    .pageIndex .catalog__buttonFace{
        inset:0.7rem;
        padding:0 3rem;
    }
    .pageIndex .catalog__buttonLabel{
        font-size:1.5rem;
    }
    .pageIndex .catalog__buttonFace::after{
        top:2.6rem;
        right:3rem;
        width:1.22rem;
        height:0.9rem;
    }
}
@media screen and (max-width:767px){
    /* Figma実測(node 8002:86〜90)：SP版もPC版と同じ外側＝ぼかし縁取り／内側＝実際に押せる面の
       構成。内側paddingはSERVICE/RECRUITのSPボタンと共通の実測値(左右30px)を踏襲する。 */
    .pageIndex .catalog__button{
        width:100%;
        height:18.9744vw;
    }
    .pageIndex .catalog__button::before{
        content:"";
        position:absolute;
        inset:0;
        z-index:-1;
        pointer-events:none;
        background:linear-gradient(111.882deg, rgba(196,220,240,0.2) 5.211%, rgba(245,245,245,0.4) 90.819%);
    }
    .pageIndex .catalog__buttonFace{
        inset:1.7949vw;
        padding:0 7.6923vw;
    }
    .pageIndex .catalog__buttonLabel{
        font-size:3.8462vw;
    }
    .pageIndex .catalog__buttonFace::after{
        top:6.6667vw;
        right:7.6923vw;
        width:3.1269vw;
        height:2.3077vw;
    }
}

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

　SOLAR PRODUCT

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

.pageIndex .solar{
    background:#ffffff;
}

@media print, screen and (min-width:768px){
    /* Figma実寸：SOLAR PRODUCTバナー下端〜RECRUIT背景上端の間隔は90px。
       バナー画像自体ではなく.solarのpadding-bottomとして確保する（CATALOGと同じ設計） */
    .pageIndex .solar{
        padding-bottom:9rem;
    }
    /* Figma実寸(node 6035:453)：900×220pxの単一バナー。以前は背景色＋白枠ラベル＋写真＋
       テキストオーバーレイ＋MOREボタンをCSSの%値で個別に再現していたが、指示によりFigmaから
       書き出した完成画像(solar_banner.jpg、文字・ラベル・ボタンすべて画像内に含む)を
       そのまま表示するだけの構成に変更した。PC基準幅1500pxに対し固定90rem(900px)で
       画面幅に応じて伸縮させない。 */
    .pageIndex .solar__banner{
        display:block;
        width:90rem;
        margin:0 auto;
    }
    .pageIndex .solar__banner img{
        display:block;
        width:100%;
        height:auto;
    }
}
@media screen and (max-width:767px){
    /* 不具合修正：SP用の完成画像バナーが存在しなかったため、PC版のバナー(横長900×220)を
       そのまま流用していたが、Figma上のSPデザイン(node 8002:117、縦長360×415の
       完成画像)とは縦横比が異なり誤りだった。SP専用に書き出したsolar_banner_sp.jpgを
       .sp、PC版をそのまま.pcとして出し分ける（画像自体のCSSトリミングは行わず、
       height:autoで各画像本来の縦横比のまま表示する）。上下のpaddingはCATALOG
       (padding-top:10.2564vw/padding-bottom:13.5897vw)・RECRUIT(padding:12.8205vw)と
       並ぶ帯として12.8205vwの均等値を踏襲する */
    .pageIndex .solar{
        padding:12.8205vw 0;
    }
    .pageIndex .solar__banner{
        display:block;
        width:92.3077vw;
        margin:0 auto;
    }
    .pageIndex .solar__banner img{
        display:block;
        width:100%;
        height:auto;
    }
}

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

　RECRUIT

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

/* section.recruit（gnav-mega-wrappのrecruit修飾クラスと同名衝突を避けるため、
   タグ名section込みで限定している） */
.pageIndex section.recruit{
    position:relative;
}

@media print, screen and (min-width:768px){
    /* 不具合修正：section.recruitの高さは、以前は下記.recruit__bg（幅100%・height:autoで
       画面実幅に比例して縦横比のまま伸縮するimg）が通常フローに残る唯一の子要素として
       高さを決めており（.recruit__innerはposition:absolute;inset:0のため高さに寄与しない）、
       画面幅が変わるたびに帯の高さも比例して変わってしまっていた（実測：1920px→500.7px、
       1500px→391.2px、1440px→375.5px、1366px→356.2px、1200px→312.9px、いずれも
       画像のFigma比率1066:278どおりに画面幅へ比例）。
       指示により1500px時点の高さ(391.2px=39.12rem)をPC基準値として固定する。section.recruit
       自体に固定heightを持たせ、.recruit__bgは通常フローの高さ決定要素ではなく
       position:absolute;inset:0の背景層（object-fit:coverで縦横比を保ったまま必要な
       部分だけトリミング）に変更する。これによりタイトル・本文・ボタンを含む.recruit__inner
       （position:absolute;inset:0で天地中央寄せ）は常に同じ高さの箱の中で位置が決まるため、
       上下位置も画面幅に関わらず変わらない。SP側（.recruit__bg.sp、max-width:767px側）は
       元々position:absolute+object-fit:coverの実装のため変更不要。 */
    .pageIndex section.recruit{
        overflow:hidden;
        min-width:var(--pc-site-width);
        height:39.12rem;
    }
    /* Figma実寸(node 6079:42/6079:62、get_design_context実測)：背景写真はFigma実寸
       (1920:500)にあらかじめトリミング済みの画像(recruit_bg.jpg)。以前はheight:autoで
       画像の縦横比のまま自然表示していたが、section.recruit側の高さを固定したことに伴い、
       object-fit:coverで固定された帯の高さいっぱいに縦横比を保ったまま必要な部分だけ
       トリミング表示する（position:absolute;inset:0でSP版のrecruit__bg.spと同じ手法に揃える）。 */
    .pageIndex .recruit__bg{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
    }
    /* Figma実寸(node 6079:65、get_design_context実測)：テキスト列とボタン列は横並びの2カラム構成。
       ボタン2つは横並びではなく縦に積む(採用情報サイトが上、協力会社求人情報が下)。
       背景写真(.recruit__bg)はFigma上も画面幅いっぱいの全面写真のためwidth:100%のままでよいが、
       文字・ボタンの内容側は基準幅より広い画面で伸び続けないよう、SERVICE/CATALOGと同じく
       固定のコンテンツ幅を中央配置する（padding-left/rightではなくwidth固定+margin:0 auto）。 */
    .pageIndex .recruit__inner{
        position:absolute;
        inset:0;
        display:flex;
        align-items:center;
        /* Figma実寸(node 6079:62、長方形492)：グラデーションは基準幅1920px全体に敷かれた
           オーバーレイのため、コンテンツ側(--pc-content-width)ではなくこの全幅要素に持たせる */
        background:linear-gradient(90deg, rgba(0,28,76,0.3) 0%, rgba(0,28,76,0.15) 40.4%, rgba(0,28,76,0) 80.8%);
    }
    /* Figma実寸(node 6079:65、6079:42/6079:62)：コンテンツ列(Group 104)はページ全幅1920pxの
       フレーム基準で左端363px。1500pxコンテンツ幅は(1920-1500)/2=210pxのガター込みで
       中央寄せされるため、1500pxの箱自身の左端からの内側オフセットは363-210=153px。
       前回はこのオフセットを反映しておらず、コンテンツ列が箱の左端(0px)にそのまま
       接していたため、帯全体の中で文字・ボタンの位置がFigmaより左寄りになっていた。
       ボタン列(Group 103)の左端は文字列の起点から959px。文字ブロック(recruit__body)は
       flex:1で強制的に残りスペース全体まで広げられていたため、文字自体はmax-width:64rem
       (640px)で折り返していても、実際のボタンとの間隔がgap:3.2rem(32px)ではなく
       実質564pxになっていた。flex:1を外しflex-startに変更、gapを実測(959-640=319px)に合わせる */
    /* 不具合修正（過去に試して不採用にした方式）：
       (1) width:100%+max-widthで画面幅へ追従して縮める方式
       (2) flex-wrap:wrapで本文の下にボタン列を折り返す方式
       (3) recruit__bodyをflex:1 1 0（min-width:0+max-width:64rem）にして「本文の折り返し幅
           だけ」を画面幅に応じて変える方式（前回採用していた方式）
       (3)は幅は収まるが、gap(31.9rem固定)・padding-left(15.3rem固定)・recruit__buttons
       (29.4rem固定)は一切変わらないため、画面が狭まってもタイトル・本文の左端（padding-left
       起点）はほぼ動かず、本文の折り返し幅（recruit__bodyの右端〜gapの手前まで）だけが
       狭くなる見た目になっていた（指摘の「左余白がほぼ変わらず、テキストエリアだけが
       狭くなる」不具合の原因）。SERVICE/CATALOGと同じ「画面が狭まるほど左右均等に見切れ、
       文字サイズ・改行位置は変えない」動きにするには、本文だけを個別に縮めるのではなく、
       タイトル・本文・gap・ボタン列を含むrecruit__innerContent全体を1500px固定のまま
       画面中央基準で配置する必要がある。
       採用した方法（1回目）：SERVICEの.service__panelと同じくposition:relative +
       left:calc(50% - var(--pc-content-width) / 2)で中央基準にし、widthは常に
       var(--pc-content-width)固定（縮めない）。recruit__innerContentは
       .recruit__inner（display:flex）の唯一のフレックスアイテムのため、既定の
       flex-shrink:1のままだと画面実幅が1500px未満になった時にブラウザがこの固定幅を
       縮めようとしてしまう（html自体の実装min-widthが1500pxだった旧実装ではこの縮小が
       発生する場面が無かったため気付かれていなかった）。flex-shrink:0を明示し、常に
       var(--pc-content-width)固定のまま中央基準ではみ出すようにする。見切れ処理は
       RECRUITの外側（section.recruit、既存のoverflow:hidden）で行うため、ページ全体の
       横スクロール領域は広がらない。
       不具合修正（2回目）：上記left:calc(50% - var(--pc-content-width) / 2)は、
       recruit__innerContentという「箱」自体の中心を画面中央に合わせているだけで、
       箱の中の実際の表示内容（padding-left:15.3rem起点のタイトル・本文〜gap:31.9rem〜
       ボタン列29.4rem）の中心とは一致していなかった。実測：内容の左端は箱の左端から153px、
       右端（ボタン列右端）は箱の左端から1406px、内容自体の中心は箱の左端から779.5px＝
       箱自体の中心750pxより29.5px右寄り。つまり内容は箱の中で右に29.5pxズレて配置されて
       いるため、箱を中央基準にそろえても内容までは中央基準にならず、右余白（1500-1406=94px）
       が左余白（153px）より最初から59px少ない。この状態で箱を左右均等にクリップすると、
       余白が少ない右側（ボタン）が先に0を切ってしまう（実機確認：1200px幅でボタン外枠が
       右へ56pxはみ出し矢印が隠れる一方、左側はタイトル余白がまだ3px残っていた）。
       修正：中央基準の対象を「箱（1500px）」ではなく「実際の表示内容（153px〜1406px、
       中心779.5px＝77.95rem）」に変更する。ただし1500px以上はFigma実測(node 6079:65、
       1920px基準で内容列の左端363px)どおり「箱を中央基準にする」現行仕様のままで良く
       （このズレは1500px以上では余白に余裕がありクリップされないため問題にならない）、
       1500px以上の表示を変更しないよう、後続の1500px以上専用ルールで
       left:calc(50% - var(--pc-content-width) / 2)へ戻す（下記参照）。 */
    .pageIndex .recruit__innerContent{
        position:relative;
        display:flex;
        flex-shrink:0;
        align-items:center;
        justify-content:flex-start;
        gap:31.9rem;
        width:var(--pc-content-width);
        left:calc(50% - 77.95rem);
        padding-left:15.3rem;
    }
    /* recruit__body・recruit__buttonsは元のflex:noneに戻す（本文だけを個別に縮める処理は
       行わない）。本文の幅・改行位置はrecruit__text側のmax-width:64rem（下記）のみで決まり、
       画面幅には一切連動しない */
    .pageIndex .recruit__body{
        flex:none;
    }
    .pageIndex .recruit__title{
        margin-top:1.6rem;
        font-weight:900;
        font-size:2.2rem;
        color:#ffffff;
    }
    .pageIndex .recruit__text{
        max-width:64rem;
        margin-top:1.6rem;
        font-weight:bold;
        font-size:1.5rem;
        line-height:2;
        color:#ffffff;
    }
    .pageIndex .recruit__buttons{
        display:flex;
        flex:none;
        flex-direction:column;
        gap:1.7rem;
    }

    /* ----- RECRUIT専用ボタン -----
       SERVICE/CATALOGと同じ構造（外側＝半透明のぼかし縁取り／内側＝実際に押せる面）だが、
       数値・配色はRECRUIT用にFigma実測(node 6079:49〜53、6079:55〜60)し直したもので、
       他セクションのCSSは流用しない。1点目のbox-shadowのみ他と異なりぼかし半径1pxが
       付く(rgba(0,28,76,0.9)、他は半径0)ため、その差もそのまま再現する。 */
    .pageIndex .recruit__button{
        position:relative;
        isolation:isolate;
        display:block;
        width:29.4rem;
        height:7.4rem;
        text-decoration:none;
        transition:opacity 0.2s;
    }
    .pageIndex .recruit__button:hover{
        opacity:0.85;
    }
    .pageIndex .recruit__button::before{
        content:"";
        position:absolute;
        inset:0;
        z-index:-1;
        pointer-events:none;
        background:linear-gradient(111.882deg, rgba(196,220,240,0.2) 5.211%, rgba(245,245,245,0.4) 90.819%);
    }
    /* Figma実測(node 6079:49〜53)：内側左右paddingは左右対称ではない。文字開始位置は
       内側面左端から30px、矢印は内側面右端から実測21px(ピクセル計測、6079:53のx座標を
       単純に左と同じ30pxで流用すると実測より9px広く、ラベル文字列が長い場合に
       矢印と接触・折り返す原因になっていたため、左右で別の値を指定する) */
    .pageIndex .recruit__buttonFace{
        position:absolute;
        inset:0.7rem;
        display:flex;
        align-items:center;
        padding:0 2.1rem 0 3rem;
        border:1px solid rgba(255,255,255,0.3);
    }
    /* 矢印は装飾のため空のspanを置かず表示面の疑似要素として実装する。他ボタンと同じ理由で
       transform:rotate(90deg)は使わず右向き済みのico-arrow.svgをそのまま使用し、
       face高さ60pxの中央(25.5px)は半端座標を避け26pxへ丸める */
    .pageIndex .recruit__buttonFace::after{
        content:"";
        position:absolute;
        top:2.6rem;
        right:2.1rem;
        width:1.22rem;
        height:0.9rem;
        background-color:currentColor;
        mask:url("/common2026/img/icon/ico-arrow.svg") center / contain no-repeat;
        -webkit-mask:url("/common2026/img/icon/ico-arrow.svg") center / contain no-repeat;
        pointer-events:none;
    }
    .pageIndex .recruit__button--primary .recruit__buttonFace{
        background:linear-gradient(108.308deg, rgba(0,91,172,0.85) 12.546%, rgba(19,129,214,0.85) 97.564%);
        box-shadow:0 1px 1px 0 rgba(0,28,76,0.9);
        color:#ffffff;
    }
    .pageIndex .recruit__button--gray .recruit__buttonFace{
        background:linear-gradient(-69.01deg, rgba(180,180,180,0.85) 4.629%, rgba(96,96,96,0.85) 77.502%);
        box-shadow:0 1px 0 #707070;
        color:#ffffff;
    }
    .pageIndex .recruit__buttonLabel{
        font-family:"游ゴシック体","Yu Gothic Medium","Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
        font-weight:bold;
        font-size:1.5rem;
        /* 実測の余白(30px/21px)自体で1行に収まるが、フォント環境差での折り返しを防ぐため
           明示的にnowrap化する（ボタン幅・内側余白を実測値以上に広げてはいない） */
        white-space:nowrap;
        flex-shrink:0;
    }
}
/* 不具合修正：1500px以上ではFigma実測(node 6079:65、1920px基準で内容列の左端363px＝
   箱を中央基準にしたときの値と一致)どおり「箱（recruit__innerContent）自体を中央基準にする」
   現行仕様を変えないため、上のleft:calc(50% - 77.95rem)（内容の実際の表示範囲を中央基準にする
   1500px未満専用の値）を1500px以上でだけ元の箱基準の値に上書きする */
@media print, screen and (min-width:1500px){
    .pageIndex .recruit__innerContent{
        left:calc(50% - var(--pc-content-width) / 2);
    }
}
@media screen and (max-width:767px){
    /* Figma実測(node 6123:95)：SP版もPC版と同じ「写真フル背景＋グラデーション＋白文字」の
       構成（SERVICEと同じパターン）。以前の.recruit__head（フラット背景の見出し単体）と
       .recruitCards（カード2枚）はFigma上に存在しないため廃止し、PC版と共通のマークアップ
       （recruit__inner > recruit__innerContent > recruit__body + recruit__buttons）へ統一する。 */
    .pageIndex section.recruit{
        overflow:hidden;
    }
    .pageIndex .recruit__bg.sp{
        position:absolute;
        inset:0;
        z-index:-1;
        width:100%;
        height:100%;
        object-fit:cover;
    }
    .pageIndex .recruit__inner{
        display:block;
        padding:12.8205vw 6.4103vw;
        background:linear-gradient(90.2deg, rgba(0,28,76,0.3) 1.2%, rgba(0,28,76,0.15) 41%, rgba(0,28,76,0) 80.8%);
    }
    .pageIndex .recruit__innerContent{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:6.1538vw;
    }
    .pageIndex .recruit__body{
        display:flex;
        flex-direction:column;
        gap:5.1282vw;
    }
    /* Figma実測(node 6123:95)：見出し(section-header)のみitems-centerで中央揃え、
       本文・ボタンはitems-startのまま。.recruit__bodyは(align-items未指定＝既定のstretch)で
       titleSectionを全幅に広げているため、titleSection自身のalign-itemsをcenterにすれば
       その全幅の中でタイトル文字＋下線が中央揃えになる（親のalign-itemsは変更しないため
       本文・ボタンには影響しない） */
    .pageIndex .recruit__body .titleSection{
        align-items:center;
        font-size:10.7692vw; /* Figma SP：RECRUIT見出しは42px相当 */
    }
    .pageIndex .recruit__body .titleSection::after{
        width:14.1026vw; /* Figma SP：下線は55px相当 */
    }
    /* 不具合修正：リード文「社会インフラを支える、その最前線へ。」の最後の1文字だけが
       次行へ折り返していた。文字サイズを縮小したり負のletter-spacingで詰めたりせず、
       プロポーショナルメトリクス(font-feature-settings:"palt")で字間だけを詰めて
       1行に収める。本文(.recruit__text)・ボタン・見出しには適用しない */
    .pageIndex .recruit__title{
        font-weight:900;
        font-size:5.1282vw;
        color:#ffffff;
        font-feature-settings:"palt";
    }
    .pageIndex .recruit__text{
        font-size:3.8462vw;
        line-height:1.867;
        font-weight:bold;
        color:#ffffff;
        opacity:0.9;
    }
    .pageIndex .recruit__buttons{
        display:flex;
        flex-direction:column;
        gap:2.5641vw;
        width:100%;
    }

    /* ----- RECRUIT専用ボタン（SP） -----
       SERVICEと同じ理由・同じ寸法(外側340×74・内側326×60)でPC用ルール(min-width:768px側)を
       SP用の数値で再定義する。配色・box-shadowはPC版の実測値をそのまま踏襲する。 */
    .pageIndex .recruit__button{
        position:relative;
        isolation:isolate;
        display:block;
        width:100%;
        height:18.9744vw;
        text-decoration:none;
    }
    .pageIndex .recruit__button::before{
        content:"";
        position:absolute;
        inset:0;
        z-index:-1;
        pointer-events:none;
        background:linear-gradient(111.882deg, rgba(196,220,240,0.2) 5.211%, rgba(245,245,245,0.4) 90.819%);
    }
    .pageIndex .recruit__buttonFace{
        position:absolute;
        inset:1.7949vw;
        display:flex;
        align-items:center;
        padding:0 5.3846vw 0 7.6923vw;
        border:1px solid rgba(255,255,255,0.3);
    }
    .pageIndex .recruit__buttonFace::after{
        content:"";
        position:absolute;
        top:6.6667vw;
        right:5.3846vw;
        width:3.1269vw;
        height:2.3077vw;
        background-color:currentColor;
        mask:url("/common2026/img/icon/ico-arrow.svg") center / contain no-repeat;
        -webkit-mask:url("/common2026/img/icon/ico-arrow.svg") center / contain no-repeat;
        pointer-events:none;
    }
    .pageIndex .recruit__button--primary .recruit__buttonFace{
        background:linear-gradient(108.308deg, rgba(0,91,172,0.85) 12.546%, rgba(19,129,214,0.85) 97.564%);
        box-shadow:0 1px 1px 0 rgba(0,28,76,0.9);
        color:#ffffff;
    }
    .pageIndex .recruit__button--gray .recruit__buttonFace{
        background:linear-gradient(-69.01deg, rgba(180,180,180,0.85) 4.629%, rgba(96,96,96,0.85) 77.502%);
        box-shadow:0 1px 0 #707070;
        color:#ffffff;
    }
    .pageIndex .recruit__buttonLabel{
        font-family:"游ゴシック体","Yu Gothic Medium","Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
        font-weight:bold;
        font-size:3.8462vw;
        white-space:nowrap;
        flex-shrink:0;
    }
}

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

　COMPANY

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

/* 指示によりCOMPANY背景はimg/picture/疑似要素ではなく、section.company自体の
   background-imageとして設定する（PC・SPとも同じcompany_bg.jpgを使用、パスの複製・
   変更はしない）。PC実寸(node 6080:125)：company_bg.jpgは帯高さ400px相当。
   帯の高さは.company__inner（通常フローのflex、詳細は下のPCメディアクエリ内コメント参照）の
   コンテンツから自然に決まり、background-size:coverで敷き詰める。COMPANY帯〜外部バナー
   (partnerLogos)間の余白は、section.company側ではなくpartnerLogos側のpadding-topとして
   持たせる（指示により移設、詳細はcommon_body.cssのpartnerLogos側コメント参照）。
   CTAボタンはサイト共通ボタンと異なり角丸を持たない単一の矩形(shadow-[0_1px_0_#001c4c]のみ)。 */
/* 不具合修正：SPドロワー内の会社情報(<dl class="company">京都本社/東京支店)が同じ
   クラス名".company"を共有しているため、汎用クラスセレクタのままだと本セクションの
   background-image/background-colorがdl側にも漏れて住所テキストの背後に写真・灰色背景が
   写り込んでしまっていた（text-align等は既に.mean-nav側で個別上書き済みだったが、
   backgroundは上書きがなく漏れたまま）。要素をsection.companyへタグ限定し、
   衝突そのものを断つ（.mean-nav側の個別上書きを積み増さない） */
.pageIndex section.company{
    position:relative;
    overflow:hidden;
    text-align:center;
    /* background-colorはbackground-image読み込み前・cover計算前の一瞬のフォールバックとして維持する
       （Figma実測でもcompany帯の直後はpartnerLogosと同じ#f5f5f5の単色）。
       帯〜外部バナー間の余白はpartnerLogos側のpadding-topへ移設したため、
       section.company自体はもうこの余白分の高さを持たない（後述） */
    background-color:#f5f5f5;
    background-image:url("/common2026/img/contents/top/company_bg.jpg");
    background-repeat:no-repeat;
}
.pageIndex .company__inner .titleSection{
    align-items:center;
    /* Figma実測(node 6123:112等)：COMPANY見出しのみ#001C4C（他セクションの黒#111とは別色） */
    color:#001c4c;
}

@media print, screen and (min-width:768px){
    /* 再修正：.company__innerをposition:absolute;inset:0で通常フローから外していたため、
       section.company自身の高さの基準（コンテンツの実高さ）が失われ、それを補うために
       min-heightで帯の高さを数値指定していた（そもそもabsoluteにする理由が無かった）。
       .company__innerを通常フローのdisplay:flex（column）へ戻すと、section.companyの
       高さはコンテンツから自然に決まるようになるため、min-heightは不要になる。
       padding-top(7.3rem)/padding-bottom(7.1rem)は元々「帯上端から見出しまで73px」
       「ボタン下端から帯下端まで71px」という実測値そのものなので、通常フローに戻しても
       見出し・本文・ボタンの位置は変わらない。
       指示によりCOMPANY帯〜外部バナー間の余白はsection.company側のpadding-bottomを廃止し、
       partnerLogos側のpadding-topとして持たせる（common_body.css参照）。
       background-size:coverのまま、帯の高さがコンテンツに応じて自然に決まっても
       画像が常に隙間なく覆う */
    .pageIndex section.company{
        background-size:cover;
        background-position:top center;
    }
    .pageIndex .company__inner{
        display:flex;
        flex-direction:column;
        align-items:center;
        max-width:100rem;
        margin:0 auto;
        padding:7.3rem 2rem 7.1rem;
    }
    /* Figma実測(node 6079:66)：本文はYu Gothic Medium・15px・line-height:30px(=2)。
       font-weightを指定しないと通常の游ゴシック(400)で描画され、Medium(500)にならない。
       見出し下端〜本文上端は実測37px、本文下端〜ボタン上端は実測33px */
    .pageIndex .company__text{
        margin-top:3.7rem;
        font-weight:500;
        font-size:1.5rem;
        line-height:2;
    }
    .pageIndex .company__cta{
        margin-top:3.3rem;
    }

    /* ----- COMPANY専用ボタン -----
       Figma実測(node 6079:71〜77)：他セクションと異なり半透明の外側レイヤーや枠線を持たない
       単一の矩形(340×70)。文字は中央揃えの塊ではなく左端から実測114px、矢印は右端から
       実測102pxの固定位置(114+ラベル幅80+隙間31.66+矢印幅12.36+102=340で一致確認済み)。
       共通.buttonのborder/padding/font-size:15px/::afterの矢印文字は使わず専用クラスで
       作り直す。矢印は装飾のため空のspanを置かず疑似要素で実装し、ボタン高さ70px(偶数)の
       中央=35pxはちょうど整数になるため50%中央揃えでも半端座標にならない */
    .pageIndex .company__button{
        position:relative;
        display:flex;
        align-items:center;
        padding-left:11.4rem;
        width:34rem;
        height:7rem;
        text-decoration:none;
        background:linear-gradient(106.182deg, rgba(19,129,214,0.9) 24.548%, rgba(0,91,172,0.9) 91.951%);
        box-shadow:0 1px 0 #001c4c;
        color:#ffffff;
        transition:opacity 0.2s;
    }
    .pageIndex .company__button::after{
        content:"";
        position:absolute;
        top:50%;
        right:10.2rem;
        width:1.236rem;
        height:0.912rem;
        transform:translateY(-50%);
        background-color:currentColor;
        mask:url("/common2026/img/icon/ico-arrow.svg") center / contain no-repeat;
        -webkit-mask:url("/common2026/img/icon/ico-arrow.svg") center / contain no-repeat;
        pointer-events:none;
    }
    .pageIndex .company__button:hover{
        opacity:0.85;
    }
    .pageIndex .company__buttonLabel{
        font-family:"游ゴシック体","Yu Gothic Medium","Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
        font-weight:bold;
        font-size:2rem;
        white-space:nowrap;
    }
}
@media screen and (max-width:767px){
    /* Figma実測(node 6123:110)：SP版もPC版と同じ背景写真(company_bg.jpg)を不透明度50%で
       敷き、ボタンもPC版と同一サイズ(340×70)の単一矩形(company__button)を使用する。
       不具合修正：以前は<img>要素(z-index:-1)で背景を敷いており、.company自体が
       独自の重ね合わせコンテキストを作らないため、この負のz-indexがページ全体の
       重ね合わせに漏れ出し、hero__video（position:fixedで全ページ背後に常時再生され
       続ける動画）がCOMPANYの半透明背景から透けて見えていた。background-imageは
       要素自身の描画レイヤーであり、他要素とz-indexを取り合わないため、この種の
       漏れが構造的に起こらない。
       不透明度50%はopacity（文字・ボタンも含めて薄くなってしまう）や疑似要素ではなく、
       background-image自体を2枚重ね（半透明の白レイヤー＋写真）にして表現する。
       文字色から実測(#ffffff 50%)した値を使用 */
    /* 不具合修正：section.company自体のpadding-bottomが0のままだった。PC同様、COMPANY帯
       下端〜外部バナー上端の間隔をCOMPANY自身のpadding-bottomとして持たせる。SP版のFigma
       (node 6123:110)はこの区間が空フレームで実測値が無いため、同セクション内の
       company__inner{padding:12.8205vw ...}と同じ間隔リズムを踏襲する。overflow:hiddenの
       ままbackground-size:coverのため、増えた分だけ同じ写真がそのまま下に伸びて表示され、
       外部バナー側(partnerLogos)へcompany背景が食い込むことはない */
    .pageIndex section.company{
        position:relative;
        overflow:hidden;
        background-image:linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("/common2026/img/contents/top/company_bg.jpg");
        background-position:center;
        background-size:cover;
        padding-bottom:12.8205vw;
    }
    .pageIndex .company__inner{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:6.1538vw;
        padding:12.8205vw 6.4103vw;
    }
    .pageIndex .company__inner .titleSection{
        font-size:9.2308vw; /* Figma SP：COMPANY見出しは36px相当 */
    }
    .pageIndex .company__inner .titleSection::after{
        width:10.2564vw; /* Figma SP：下線は40px相当 */
    }
    .pageIndex .company__text{
        font-size:3.8462vw;
        line-height:1.867;
    }
    .pageIndex .company__cta{
        width:100%;
    }

    /* ----- COMPANY専用ボタン（SP） -----
       Figma実測(node 8002:187〜192)：PC版と同じ340×70px(=画面幅390pxからpx-25の左右余白50pxを
       引いた残り幅ぴったり)のため、width:100%で親のコンテンツ幅にそのまま合わせる。
       文字左端114px・矢印右端102pxもPC版と共通の実測値。 */
    .pageIndex .company__button{
        position:relative;
        display:flex;
        align-items:center;
        width:100%;
        height:17.9487vw;
        padding-left:29.2308vw;
        background:linear-gradient(106.182deg, rgba(19,129,214,0.9) 24.548%, rgba(0,91,172,0.9) 91.951%);
        box-shadow:0 1px 0 #001c4c;
        color:#ffffff;
    }
    .pageIndex .company__button::after{
        content:"";
        position:absolute;
        top:50%;
        right:26.1538vw;
        width:3.169vw;
        height:2.339vw;
        transform:translateY(-50%);
        background-color:currentColor;
        mask:url("/common2026/img/icon/ico-arrow.svg") center / contain no-repeat;
        -webkit-mask:url("/common2026/img/icon/ico-arrow.svg") center / contain no-repeat;
        pointer-events:none;
    }
    .pageIndex .company__buttonLabel{
        font-family:"游ゴシック体","Yu Gothic Medium","Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
        font-weight:bold;
        font-size:5.1282vw;
        white-space:nowrap;
    }
}