/*---------------------------
下層ページ共通パーツ
.lower_page 配下で使う想定
---------------------------*/

/*左固定テキスト＋右スクロール画像で文章と画像を一緒に切り替える
PC（min-width:1025px）では .scrollfix_text を position:sticky で固定し、
画像（.scrollfix_image）は通常のフローで縦に並べてスクロールさせる。
js/scrollfix.js が、今画面に来ている画像に対応するテキストブロックへ
クロスフェードで切り替える。それ未満の画面幅では通常の縦積み表示にする。

.scrollfix_wrapにis-stackを付けると別の動きになる：文章と画像を1ブロックの
かたまりにして、固定(sticky)はせず普通にページと一緒にスクロールする
（JSのクロスフェードは使わない）。*/


body { font-size:14px; line-height:1.78em; }
footer { margin-top:80px; }
@media screen and (min-width:768px){
    footer { margin-top:160px; }
}
.lower_page .wrapper.narrow { max-width:1280px; }
.scrollfix_block h2 { position:relative; display:inline-block; white-space:nowrap; padding-bottom:16px; margin-bottom:20px; }
.scrollfix_block h2::after { content:''; position:absolute; left:0; bottom:0; width:40px; height:2px; background:#000; }
/*写真を共有するため同じブロックにまとめた、本来は独立した見出し（例：福利厚生ページの「従業員持株会」など）*/
.scrollfix_caption h2 { margin-top:32px; }
.scrollfix_heading_sub { display:inline-block; margin-left:16px; font-size:13px; font-weight:normal; color:#707070; }
/*スマホ用：ブロック内で2枚目以降の画像に個別のキャプションがある場合に、写真ごとに文章を出す（PCではJSがscrollfix_captionを切り替えるので不要）*/
.scrollfix_caption_extra { display:none; }
/*is-stack版（下記）でだけ文章側をまとめるための入れ物。通常版ではdisplay:contentsで透過させ、
中のh2/scrollfix_captionを従来通り.scrollfix_blockの直接の子として扱わせる（既存のorder指定を壊さない）*/
.scrollfix_block_text { display:contents; }

.scrollfix_block_img { margin-top:20px; }
/*写真の行が連続する場合は、行間もペア写真同士の隙間(6px)と揃える
.scrollfix_blockのgap:20pxと合算されるため、6pxにするにはmargin-top:-14px(20-14=6)にする*/
.scrollfix_block_img + .scrollfix_block_img { margin-top:-14px; }
.scrollfix_block_img img { width:100%; display:block; }
/*ブロック内に縦型画像が1点だけ（2枚組にならない）の場合は、横幅を50%にする*/
.scrollfix_block_img.is-solo-portrait { width:50%; }
/*縦型画像が2枚組の場合は横並びにする（PCの.scrollfix_image_item.is-pairと同じ考え方）*/
.scrollfix_block_img.is-pair { display:flex; gap:6px; }
.scrollfix_block_img.is-pair img { width:auto; flex:1 1 0; min-width:0; }
/*写真未定の仮画像（白画像）はSPで写真1枚分の空白になるため非表示。写真が決まったらこのクラスをHTML側から外す*/
.scrollfix_block_img.is-placeholder { display:none; }

/*1枚全幅＋2枚横並び（290:518）を1つの単位にまとめた固定構成。画面幅に関わらず常に横並び・間隔6px*/
.scrollfix_block_img.is-photo-set,
.scrollfix_image_item.is-photo-set { display:flex; flex-direction:column; gap:6px; }
.is-pair-custom { display:flex; align-items:flex-start; gap:6px; }
/*幅が異なる画像同士でも高さを揃えるため、高さを固定してobject-fit:coverでトリミングする*/
.is-pair-custom img { width:auto; min-width:0; height:50vw; object-fit:cover; }
.is-pair-custom img:first-child { flex:290 1 0; }
.is-pair-custom img:last-child { flex:518 1 0; }
/*3枚を均等な幅・同じ間隔で横並びにする場合はis-pair-customに追加するクラス*/
.is-pair-custom.is-trio-custom img { flex:1 1 0; }
/*3枚のうち1枚目だけ少し大きめにしたい場合*/
.is-pair-custom.is-trio-custom img:first-child { flex:1.3 1 0; }
/*2枚を均等な幅・同じ間隔（6px）で横並びにする場合はis-pair-customに追加するクラス*/
.is-pair-custom.is-even-custom img:first-child,
.is-pair-custom.is-even-custom img:last-child { flex:1 1 0; }
/*幅均等ペア(is-even-custom)は、スマホでは通常のis-pair-customより少し高さを出す*/
.is-pair-custom.is-even-custom img { height:55vw; }
@media screen and (min-width:769px){
    .is-pair-custom img { height:21.93vw; }
    /*幅均等ペア(is-even-custom)は、iPad幅(769〜1024px)では通常のペアより少し高さを出す（比率はスマホと同じ55/50=1.1倍）*/
    .is-pair-custom.is-even-custom img { height:24.12vw; }
}
/*PC(1025px以上)は画面幅に応じて高さが同じ比率で縮小・拡大するようvw指定（1400px時点でちょうど530pxになる値。1400pxで区切らず1025px以上に統一し、境目での急な変化をなくす）*/
@media screen and (min-width:1025px){
    .is-pair-custom.is-even-custom img { height:37.86vw; }
}
/*高さを固定せず、画像をトリミングせず自然な縦横比のまま100%幅で見せたいペア用*/
.is-pair-custom.is-natural img { height:auto; object-fit:initial; }
/*is-even-customは高さをvw/px固定にしているため、カラム幅が狭いページ（business9.phpなど）だと
縦長になりすぎることがある。カラム幅によらず横長のバランスを保ちたい場合はこちらを追加する*/
.is-pair-custom.is-even-custom.is-compact img { height:auto; aspect-ratio:3/2; object-fit:cover; }

.scrollfix_image { display:none; }
.scrollfix_text p { text-align:justify; line-height:2em; letter-spacing:0.05em; }
@media screen and (max-width:768px){
    .scrollfix_block { margin-bottom:80px; display:flex; flex-direction:column; gap:20px; }
    .scrollfix_block h2 { margin-bottom:0; }
    /*1枚目の写真だけ本文より上に出す。2枚目・3枚目（is-pair-custom）は本文の下のまま*/
    .scrollfix_block_img.is-photo-set { display:contents; }
    .scrollfix_block_img.is-photo-set > img:first-child { order:1; }
    /*is-pair-customで囲まれていない2枚目以降の画像も、本文の下に出す*/
    .scrollfix_block_img.is-photo-set > img:not(:first-child) { order:3; }
    /*is-photo-set内の補足キャプション（例：レモネードスタンド活動の<small>）は、
    img/is-pair-customのどちらのルールにも当てはまらず初期値のorder:0のままだと
    一番上（本文より前）に出てしまうため、写真グループと同じ本文の下（一番最後）に揃える。
    直前の写真との間隔も、.scrollfix_blockのgap:20pxのままだと開きすぎるため10pxに詰める(20-10=10)*/
    .scrollfix_block_img.is-photo-set > small { order:3; margin-top:-10px; }
    /*.is-lead-secondを付けた場合は、スマホだけ1枚目と2枚目の表示順を入れ替える
    （例：csr/index.phpのシェアハウス紹介＝sharehouse_2→本文→sharehouse_1の順にしたいケース）。
    PC側はscrollfix.jsがHTMLの並び順をそのまま複製するため、HTML自体の順番は変えずCSSのorderだけ入れ替える。
    上の2つのorderルールと同じ詳細度になるため、.is-lead-secondを足して確実に上書きする*/
    .scrollfix_block_img.is-photo-set.is-lead-second > img:first-child { order:3; }
    .scrollfix_block_img.is-photo-set.is-lead-second > img:not(:first-child) { order:1; }
    /*is-photo-setを使わない複数行構成（offices/index.phpなど）も、1行目だけ本文より上・
    2行目以降は本文の下に出す（is-photo-setの1枚目/2枚目以降ルールと同じ考え方）。
    間に見出しやキャプションなど別要素が挟まっても数えられるよう、一般兄弟結合子(~)で
    「自分より前に同じクラスの兄弟がいる＝2番目以降」を判定する*/
    .scrollfix_block_img:not(.is-photo-set) { order:1; }
    .scrollfix_block_img:not(.is-photo-set) ~ .scrollfix_block_img:not(.is-photo-set) { order:3; }
    .scrollfix_caption { order:2; }
    /*関連リンクは本文の直後・写真より上（business2.phpなどdetail_row由来のlink_wrapをscrollfixブロックに移した場合用）*/
    .scrollfix_block .link_wrap { order:2; }
    /*従業員持株会ブロックのように.scrollfix_caption内にh2が入れ子になっている場合、
    入れ子のh2は.scrollfix_caption内の通常の要素として直後のpと余白が重なり合うため、
    margin-bottom:20pxを指定していても実際の余白がそれより詰まって見えることがある。
    直後のpのmargin-topを0にして重なり分をなくし、指定通りの20pxになるようにする*/
    .scrollfix_caption h2 { margin-bottom:20px; }
    .scrollfix_caption h2 + p { margin-top:0; }
    /*1ブロックにキャプションが2つ以上ある場合は、上の共通キャプション欄は使わず、画像ごとの文章に置き換える*/
    .scrollfix_block.has-multi-caption .scrollfix_caption { display:none; }
    .scrollfix_caption_extra { display:block; order:1; margin-top:20px; }
    .is-pair-custom { order:3; }
    /*is-pair-customはデフォルトで本文の下(order:3)。is-leadを付けたものだけ、
    1枚目の画像(order:1)と同様に本文より上に出す（例：csr/index.phpの介助犬支援ブロック）*/
    .is-pair-custom.is-lead { order:1; }
    /*is-photo-set内で本文の下側(order:3)の写真グループが複数連続する場合
    （2枚並び＋全幅＋2枚並び＋全幅など、business2.phpのように1ブロックに写真セットが2組ある場合）、
    グループ間の間隔を.scrollfix_blockのgap:20pxから写真同士のタイトな間隔(6px)に詰める(20-14=6)。
    最初のorder:3要素（本文からの間隔=20pxのまま）には付けず、2つ目以降にis-tight-topを付けて使う*/
    .scrollfix_block_img.is-photo-set > .is-tight-top { margin-top:-14px; }
}
@media screen and (min-width:769px){
    body { line-height:2em; }
    .scrollfix_wrap { position:relative; margin-bottom:40px; }
    .scrollfix_stage { display:flex; align-items:flex-start; justify-content:space-between; gap:80px; }

    .scrollfix_text { position:sticky; top:120px; width:24vw; height:70vh; }
    /*クロスフェードが不要な単一ブロックのページ用：高さ70vhの固定ウィンドウをやめて
    本文の実際の高さに合わせる（画面幅を縮めて折り返しが増えても、下の要素とあふれて重ならないように）*/
    .scrollfix_wrap.is-single-block .scrollfix_text { height:auto; }
    .scrollfix_wrap.is-single-block .scrollfix_block { position:static; opacity:1; visibility:visible; }
    .scrollfix_block { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-start; opacity:0; visibility:hidden; }
    .scrollfix_block.is-active { opacity:1; visibility:visible; }
    .scrollfix_image { display:flex; flex-direction:column; gap:10px; width:58%; padding-bottom:120px; }
    .scrollfix_image_item img { width:100%; display:block; }
    .scrollfix_image_item.is-block-start { margin-top:80px; }
    .scrollfix_image_item.is-pair { display:flex; gap:10px; }
    .scrollfix_image_item.is-pair img { width:auto; flex:1 1 0; min-width:0; }
    .scrollfix_image_item.is-solo-portrait { width:50%; }

    .scrollfix_block_img { display:none; }
    .scrollfix_block_img.is-photo-set { display:none; }
    .scrollfix_block_img.is-pair { display:none; }

    /*汎用パーツ：文章と画像を1ブロックの塊にして、固定(sticky)はせず普通にページと一緒にスクロールする版。
    js/scrollfix.jsのクロスフェード処理は使わない（.scrollfix_wrapにis-stackを付けて使用）*/
    .scrollfix_wrap.is-stack .scrollfix_stage { display:block; }
    .scrollfix_wrap.is-stack .scrollfix_text { position:static; width:auto; height:auto; }
    .scrollfix_wrap.is-stack .scrollfix_image { display:none; }
    .scrollfix_wrap.is-stack .scrollfix_block {
        position:static; inset:auto;
        display:grid; grid-template-columns:24vw 58%; justify-content:space-between; gap:80px; align-items:start;
        opacity:1; visibility:visible;
    }
    .scrollfix_wrap.is-stack .scrollfix_block + .scrollfix_block { margin-top:300px; }
    .scrollfix_wrap.is-stack .scrollfix_block_text { display:block; grid-column:1; }
    .scrollfix_wrap.is-stack .scrollfix_block_img,
    .scrollfix_wrap.is-stack .scrollfix_block_img.is-photo-set,
    .scrollfix_wrap.is-stack .scrollfix_block_img.is-pair { display:flex; grid-column:2; margin-top:0; }
    /*写真未定の仮画像（is-placeholder）は、is-stack版でも他ページ同様に非表示のまま*/
    .scrollfix_wrap.is-stack .scrollfix_block_img.is-placeholder { display:none; }
}

/*汎用パーツ：写真1枚全幅＋2枚横並び（固定表示。スクロールでは切り替わらない）*/
.photo_group_full img { width:100%; display:block; }
.photo_group_row { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.photo_group_portrait { flex:290 1 0; min-width:0; overflow:hidden; aspect-ratio:290/400; }
.photo_group_landscape { flex:518 1 0; min-width:0; overflow:hidden; aspect-ratio:518/400; }
.photo_group_portrait img,
.photo_group_landscape img { width:100%; height:100%; object-fit:cover; display:block; }
/*row内に3枚目として全幅画像を追加する場合用（縦長・横長2枚の下に折り返して全幅表示）*/
.photo_group_row .photo_group_full { width:100%; }
/*2枚並び(row)の後に、独立した全幅画像を続けて追加する場合の間隔*/
.photo_group_row + .photo_group_full { margin-top:6px; }
/*全幅画像(full)の後に2枚並び(row)が続く場合の間隔（.photo_group_rest内限定。
スマホ用の.photo_group_row{margin-top:0}はこのセレクタより詳細度が低いため、
.photo_group_rest内でネストされたrowでも常に6pxが優先される。
.photo_group_rest外（先頭の全幅写真→1組目の2枚並びなど、.detail_rowの
32pxのflex gapがそのまま隙間になるべき箇所）には影響しないよう.photo_group_restでスコープする*/
.photo_group_rest .photo_group_full + .photo_group_row { margin-top:6px; }
/*.photo_group_rest内で2枚並び(row)の後に全幅画像(full)が続く場合の間隔。
スマホ用の.photo_group_row + .photo_group_full{margin-top:-26px}は、
.detail_rowの32pxのflex gapを打ち消して6pxに合わせるための計算だが、
.photo_group_rest内はそのflex gapがかからないため-26pxがそのまま隙間になってしまう。
詳細度を上げて6pxに戻す*/
.photo_group_rest .photo_group_row + .photo_group_full { margin-top:6px; }
/*.photo_group_rest内で2枚並び(row)が2つ連続する場合の間隔（business7.phpのrow-row-fullなど）。
.photo_group_rest外（.photo_group直下でrowが2つ続くbusiness2.phpのパターン）は
.detail_rowの32pxのflex gapがかかるため、下のmax-width:768px側の
-26pxルール（32-26=6px）で合わせる。こちらは.photo_group_rest内でflex gapがかからない
ケース専用で、詳細度を上げてスマホ用.photo_group_row{margin-top:0}と↓の-26pxの両方に勝つ*/
.photo_group_rest .photo_group_row + .photo_group_row { margin-top:6px; }
@media screen and (min-width:769px){
    .photo_group { width:58%; }
    /*全幅画像(full)が連続する場合の間隔（PC限定。.photo_groupがdisplay:contentsになる
    スマホでは1枚目・2枚目は並び替えで隣り合わないため対象外）*/
    .photo_group_full + .photo_group_full { margin-top:6px; }
}

/*写真ブロック(.photo_group＝全幅1枚+2枚並び)を1つの単位として、
複数個(3枚パターンを2セットなど)まとめて縦に並べたい場合の外側の入れ物。
.detail_row直下に.photo_groupを複数並べると横並びになってしまうため、
必ずこの.photo_group_stackで1つにまとめてから.detail_rowに入れる*/
.photo_group + .photo_group { margin-top:6px; }
@media screen and (min-width:769px){
    .photo_group_stack { width:58%; }
    .photo_group_stack .photo_group { width:100%; }
}
@media screen and (max-width:768px){
    /*スタック内では上の「見出し→全幅写真→本文→2枚並び」の入れ替えは行わず、
    1〜6枚目が入力順のまま並ぶようにする*/
    .photo_group_stack { order:4; }
    .photo_group_stack .photo_group { display:block; }
}

/*.photo_group_stackの中に「1枚目の全幅写真だけ他ページ同様に本文の上に出し、
残り(2枚並び+2枚並び+全幅など)はひとまとまりで本文の後ろに順番通り並べたい」場合。
.photo_group_restで2つ目以降をまとめておく（内部の並び順はそのまま維持される）*/
@media screen and (max-width:768px){
    .photo_group_stack.is-lead-first { display:contents; }
    .photo_group_stack.is-lead-first .photo_group_rest { order:4; }
}

/*汎用パーツ：見出し＋本文＋写真の横並び静的レイアウト（スクロール連動なし。詳細ページの単体コンテンツ用）*/
.detail_row { display:flex; flex-direction:column; gap:32px; }
.detail_row + .detail_row { margin-top:56px; }
.detail_row_text h2 { position:relative; display:inline-block; white-space:nowrap; padding-bottom:16px; margin-bottom:20px; }
.detail_row_text h2::after { content:''; position:absolute; left:0; bottom:0; width:40px; height:2px; background:#000; }
/*見出しの下に複数の小見出し＋本文をまとめて並べたい場合の単位（例：研修制度ページの「一年目社員」内の複数研修）*/
.detail_row_subitem + .detail_row_subitem { margin-top:24px; }
.detail_row_subitem h3 { font-size:16px; font-weight:bold; margin-bottom:12px; }
.detail_row_subitem h3.underline { position:relative; display:inline-block; padding-bottom:8px; }
.detail_row_subitem h3.underline::after { content:''; position:absolute; left:0; bottom:0; width:40px; height:1px; background:#000; }
@media screen and (min-width:769px){
    .detail_row { flex-direction:row; align-items:flex-start; justify-content:space-between; gap:80px; }
    .detail_row_text { width:35%; }
    .detail_row + .detail_row { margin-top:96px; }
}
@media screen and (min-width:1025px){
    .detail_row_text { width:24vw; }
}
/*スマホのみ：見出し→写真(全幅1枚)→本文→写真(2枚並び)の順に並び替える。
親(.detail_row_text/.photo_group)をdisplay:contentsで透過させ、中の要素を
.detail_rowの直接のflex itemにしてorderで並べ替える（769px以上では対象外）*/
@media screen and (max-width:768px){
    .detail_row_text,
    .photo_group { display:contents; }
    .detail_row_text h2 { order:1; }
    .photo_group_full:first-child { order:2; }
    .detail_row_text p,
    .detail_row_subitem,
    .link_wrap { order:3; }
    /*2枚並びの後にさらに全幅写真がある場合（例：business3.phpの4.jpg）は、本文の下・2枚並びの後に出す*/
    .photo_group_row,
    .photo_group_full:not(:first-child) { order:4; }
    /*本文→2枚並びの間は.detail_rowのgap:32pxに揃えるため打ち消す*/
    .photo_group_row { margin-top:0; }
    /*2枚並び→続く全幅写真の間だけは写真同士のタイトな間隔(6px)にしたいので、
    gap:32pxの分を差し引いたマイナスマージンで6pxに合わせる*/
    .photo_group_row + .photo_group_full { margin-top:-26px; }
    /*2枚並び→続く2枚並び（例：business2.phpの5.jpg行）も同様に、
    gap:32pxの分を差し引いたマイナスマージンで6pxに合わせる*/
    .photo_group_row + .photo_group_row { margin-top:-26px; }
}

/*汎用パーツ：番号＋見出し＋右端に英語名（例:「01 環境 ... SAMPLE」）*/
.page_heading { width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.page_heading_left { display:flex; align-items:center; gap:28px; flex-grow:1; }
.page_heading_left .h1 { width:100%; }
.page_heading_no { font-size:14px; color:#000; font-weight:bold; letter-spacing:0.05em; }
.page_heading_en { font-size:15px; font-weight:bold; color:#707070; letter-spacing:0.1em; }

.office_meta { margin-top:16px; font-size:13px; line-height:1.43; color:#666; }
@media screen and (min-width:769px){
    .office_meta { display:flex; align-items:baseline; gap:1em; }
}

.h1_copy.underline { border-bottom:1px solid #e3e3e3; padding-bottom:56px; margin-bottom:56px; }
@media screen and (min-width:769px){
    .h1_copy.underline { padding-bottom:32px; margin-bottom:116px; }
    .h1_copy { margin-bottom:40px; }
}

/*事業ページ(business1〜11.php)用：見出しブロックの下に線を引く*/
.h1_wrappers.underline { border-bottom:1px solid #e3e3e3; padding-bottom:24px; margin-bottom:24px; }
@media screen and (min-width:769px){
    .h1_wrappers.underline { padding-bottom:32px; margin-bottom:96px; }
}

.h1_text { margin-bottom:65px; text-align: justify;}
.h1_text.underline { border-bottom:1px solid #E3E3E3; padding-bottom:30px; margin-bottom:30px; }
.h1_text p { margin:0; line-height:2em; letter-spacing:0.05em; text-align:justify;}
.h1_text p + p { margin-top:1.5em; }
@media screen and (min-width:769px){

    .h1_text.underline { padding-bottom:65px; margin-bottom:65px; }/*260801 白幡修正*/
    .h1_text.is-pc-flush { margin-bottom:0; }/*business/index.phpのみ、PC時に下マージンなし*/
}

.contents { width:100%; }
.contents.is-narrow { max-width:1280px; margin:0 auto 80px auto; }
@media screen and (min-width:769px){
    .contents.is-narrow { margin-bottom:160px; }
}

/*改行*/
.inline_sp { display:block; }
.inline_pc { display:none; }
@media screen and (min-width:769px){
    .inline_sp { display:none; }
    .inline_pc { display:block; }
}


/*汎用パーツ：グループ見出し付きカードリスト（圏ごとの見出し＋グリッド）※店舗一覧以外のページでも使う想定*/
.card_list_group { width:100%; }
.card_list_group + .card_list_group { margin-top:56px; }
.card_list_group_heading { width:100%; font-size:24px; font-weight:bold; padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid #e3e3e3; }
.card_list_subgroup + .card_list_subgroup { margin-top:32px; }
.card_list_subgroup_heading { width:100%; font-size:24px; font-weight:bold; margin-bottom:16px; }
.card_list { display:grid; grid-template-columns:repeat(1, 1fr); gap:40px 16px; }
.card_list_link { display:block; }
.card_list_img { display:block; margin-bottom:12px; aspect-ratio:430/280; overflow:hidden; }
.card_list_img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease; }
.card_list_link:hover .card_list_img img { transform:scale(1.08); }
.card_list_university { position:relative; display:block; margin-bottom:4px; font-size:13px; padding-bottom:6px; }
.card_list_university::after { content:''; position:absolute; left:0; bottom:0; width:40px; height:1px; background:#000; }
.card_list_name { position:relative; display:inline-block; font-size:16px; font-weight:700; padding-bottom:16px; letter-spacing:0.08em; }
.card_list_name::after { content:''; position:absolute; left:0; bottom:0; width:40px; height:1px; background:#000; }
.card_list_part { width:100%; display:inline-block; }
/*2カラム版（見出しなしでカードを並べるページ用）*/
.card_list.cols-2 { grid-template-columns:repeat(2, 1fr); gap:56px 16px; }
.card_list.cols-2 .card_list_img { aspect-ratio:3/2; }
/*4カラム版（5列表示・画像は常に正方形）*/
.card_list.cols-4 { margin-top:0; }
.card_list.cols-4 .card_list_img { aspect-ratio:1/1; }
@media screen and (min-width:769px){
    .card_list_group + .card_list_group { margin-top:96px; }
    .card_list_group_heading { font-size:35px; padding-bottom:32px; margin-bottom:40px; }
    .card_list { margin-top:80px; grid-template-columns:repeat(3, 1fr); gap:100px 32px; }
    .card_list.cols-4 { grid-template-columns:repeat(5, 1fr); width:90%; margin-left:auto; margin-right:auto; }
    .card_list_img { margin-bottom:16px; }
    .card_list_name { font-size:20px; }
    .card_list.cols-2 { gap:56px 32px; }
    .card_list_university { font-size:15px;}
}

/*詳細ページ下部：営業所一覧リンク*/
.list_link_section { position:relative; padding:20px 5%; background-color:#F7F7F7; }

.list_link_section.is-list { margin-bottom:80px; }
.list_link_section.is-list.is-detail { margin-bottom:0; }
/*people/index.phpなど、同じLISTセクションをページ下部にもう一度読み込む場合の上余白*/
.list_link_section.is-top-spaced { margin-top:80px; }
.list_link_top { display:flex; align-items:baseline; gap:24px; padding-bottom:24px; margin-bottom:24px; }
.list_link_heading { margin:0 0 30px 0; font-size:24px; line-height:1.2; font-weight:bold; }
.list_link_list { font-size:15px; line-height:1.2; font-weight:bold; color:#707070; }
.list_link_areas { display:flex; flex-direction:column; gap:40px; }
.list_link_area_pair { display:flex; flex-direction:column; gap:40px; }
.list_link_area { padding:0; }
.list_link_area_heading { font-size:15px; font-weight:bold; padding-bottom:16px; margin-bottom:24px; border-bottom:1px solid #000; }
.list_link_items_cols { display:flex; gap:5%; }
.list_link_sub_heading { font-size:13px; font-weight:bold; margin-bottom:16px; }
/*.list_link_items li { margin-bottom:8px; }*/
.list_link_items a { font-size:13px; line-height:1.2; position:relative; display:inline-flex; align-items:center; gap:5px; }
.list_link_items a img { width:4px; flex-shrink:0; }
@media screen and (max-width:1024px){
    /*圏ブロックを分割せずに2カラムへ自動で振り分ける（新聞組み）*/
    .list_link_areas { display:grid; grid-template-columns:repeat(2, 1fr); column-gap:5%; row-gap:24px; }
    .list_link_area { break-inside:auto; margin-bottom:0; }
    .list_link_items_cols { display:block; gap:40px; }
}
@media screen and (min-width:1025px){
    .list_link_section { padding:56px; }
    .list_link_section.is-list { margin-bottom:160px; }
    .list_link_top { padding-bottom:32px; margin-bottom:40px; }
    .list_link_heading { font-size:35px; }
    .list_link_areas { flex-direction:row; align-items:flex-start; justify-content:flex-start; gap:3.143vw; }
    .list_link_area_pair { display:flex; flex-direction:row; gap:5%; }
    .list_link_area { width:auto; min-width:17.857vw; padding:0; border-top:none; flex-shrink:0; }
    .list_link_area_heading { font-size:18px; padding-bottom:20px; margin-bottom:32px; }
    .list_link_sub_heading { font-size:14px; }
    .list_link_items_cols { width:max-content; gap:24px; }
    .list_link_col { flex-shrink:0; }
    .list_link_items { min-width:150px; white-space:nowrap; }
    .list_link_section.is-list .list_link_items { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px 16px; }
    .list_link_section.is-list .list_link_items li { margin-bottom:0; }
    .list_link_items a::after { content:''; width:100%; height:1px; display:block; background:currentColor; position:absolute; left:0; bottom:-2px; transform:scaleX(0); transform-origin:left; transition:transform 0.3s ease; }
    .list_link_items a:hover::after { transform:scaleX(1); }
}
@media screen and (min-width:1400px){
    .list_link_areas { gap:44px; }
    .list_link_area { min-width:250px; }
    .list_link_section.is-list .list_link_items { min-width:240px; }
}

/*詳細ページ下部：前後ページリンク（店舗以外の詳細ページでも使う汎用パーツ）*/
.page_link_nav { display:flex; flex-direction:row; justify-content:space-between; gap:16px; align-items:center; text-align:center; margin-bottom:120px; }
.page_link_nav a { font-size:13px; line-height:1.2; position:relative; }
.page_link_nav a::after { content:''; width:100%; height:1px; display:block; background:currentColor; position:absolute; left:0; bottom:-2px; transform:scaleX(0); transform-origin:left; transition:transform 0.3s ease; }
.page_link_nav a:hover::after { transform:scaleX(1); }
.page_link_nav .is-disabled { font-size:13px; color:#808080; }
.page_link_prev, .page_link_next { display:inline-flex; align-items:center; gap:13px; }
.page_link_prev img, .page_link_next img { width:13px; height:13px; }
.page_link_nav.is-top-spaced { margin-top:80px; }
@media screen and (min-width:769px){
    .page_link_nav.is-top-spaced { margin-top:240px; }
}
/*scrollfix_wrap側で既に余白があるページ用に、is-top-spacedより控えめな上余白*/
.page_link_nav.is-top-spaced-sm { margin-top:40px; }
@media screen and (min-width:769px){
    .page_link_nav.is-top-spaced-sm { margin-top:80px; }
}

/*事業ページ下部の前後リンク専用：背景の帯＋縦区切り線で3列（前ページ／一覧／次ページ）にする見た目違い。
　.page_link_nav本体は店舗ページなど他でも使う汎用パーツなので、この見た目はis-bandedを付けたときだけ適用する*/
.page_link_nav.is-banded { display:grid; grid-template-columns:repeat(3, 1fr); gap:0; background:#f5f5f5; margin-bottom:0; justify-items:center; }
.page_link_nav.is-banded a { display:flex; align-items:center; justify-content:center; gap:8px; padding:20px 12px; text-align:center; line-height:1; }
/*上下の余白(padding)ぶん下線が文字から離れて見えるので、文字のすぐ下に来る位置まで引き上げる*/
.page_link_nav.is-banded a::after { bottom:17px; }
.page_link_nav.is-banded .page_link_prev,
.page_link_nav.is-banded .page_link_next { gap:8px; }


/*---------------------------
共通パーツ：見出し＋dt/dd仕様リスト
（会社概要・募集要項など、複数ページで使用）
---------------------------*/

.spec_row { border-bottom:1px solid #808080; }
.spec_label { font-size:14px; font-weight:bold; line-height:2; padding:16px 0 4px; }
.spec_row:first-child .spec_label { padding-top:0; }
.spec_value { font-size:14px; line-height:2; letter-spacing:0.05; padding:4px 0 16px 0; }

@media screen and (min-width:769px){
    .spec_row { display:flex; align-items:stretch; padding:0 20px; border-bottom:none; }
    .spec_label { width:30%; flex:0 0 auto; border-top:1px solid #000000; padding:30px 0; }
    .spec_value { flex:1; border-top:1px solid #D1D1D1; padding:30px 0; }
    .spec_row:first-child .spec_label { padding-top:30px; }
    .spec_row:last-child .spec_label { border-bottom:1px solid #000000; }
    .spec_row:last-child .spec_value { border-bottom:1px solid #D1D1D1; }
}
@media screen and (min-width:1025px){
    .spec_label { width:24%; }
}
@media screen and (min-width:1400px){
    .spec_label { width:19.76%; }
}

/*左に見出し、右に内容（表など）を並べるレイアウト（会社概要ページなどで使用）*/
.info_section { display:flex; flex-direction:column; gap:20px; }
.info_section_title { font-size:28px; font-weight:normal; letter-spacing:0.08em; margin:0; }
.info_section_subtitle { font-size:14px; color:#707070; }
.info_section_body { font-size:20px; flex:1; }

@media screen and (min-width:769px){
    .info_section { flex-direction:row; align-items:flex-start; justify-content:space-between; gap:80px;  margin:0 auto; }
    .info_section_heading { flex:0 0 240px; }
    .info_section_title { font-size:30px; }
    .info_section_body { flex:1; min-width:0; max-width:100%; }
}
@media screen and (min-width:1025px){
    .info_section_body { width:82.86vw;max-width:53.57vw; }
}

/*関連リンク*/
.link_wrap { width:100%; margin-top:30px; }
.link_wrap strong { width:100%; font-size:15px; display:inline-block; }
.link_wrap a { font-size:13px; display:inline-flex; align-items:center; position:relative; }
.link_wrap a img.img_link { width:12px; margin-left:5px; }
.link_wrap a::after { content:''; width:100%; height:1px; display:block; background:currentColor; position:absolute; left:0; bottom:-2px; transform:scaleX(0); transform-origin:left; transition:transform 0.3s ease; }
.link_wrap a:hover::after { transform:scaleX(1); }
@media screen and (min-width:769px){
    .link_wrap { margin-top:60px; }
}

/*募集要項*/
.info_section.recruit { margin-bottom:40px; }
@media screen and (min-width:769px){
    .info_section.recruit { margin-bottom:120px; }
}