/* 下層ページの土台（試作_v4 page.css から合流・2026-10-08）：舞台の後ろに続く章（MEMBER・PROFILE）の組み。
   白の地・金・Barlow Condensed 500 の見出し（26px／スマホ 24px・字間 .2em）・Noto Sans JP の本文は TOP と同じ言葉づかい。
   章＝一画面（.sec は 100svh）。最後の章（.sec-last＝PROFILE）だけ上から組み、フッターはその後ろに続く（PROFILE が一画面に収まる時、フッターは一画面の下＝帯の端が中途半端に覗かない）。ここからふつうの送り。
   ヘッダーの白い地（.free .hd）・フッター（.ft）・右下の案内（.cue2）は css/end.css のものをそのまま使う。 */
.sec{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;background:var(--ground);color:var(--ink);padding:calc(var(--header-h) + 8px) var(--side) 84px}
.sec-in{width:100%;max-width:1180px;margin:0 auto}
.sec-last{justify-content:flex-start}
.sec-last .sec-in{padding-top:clamp(16px,4vh,40px)}
.ft-root{padding:0 var(--side)}   /* フッター（.ft は端まで広がる負の余白を持つ）の入れ物。章と同じ左右の余白 */
.phr{display:inline-block}   /* 句のまとまりの中で折り返さない（住所の建物名・事業名の括弧） */
.sec .head{display:block;font-family:var(--disp);font-weight:500;font-size:26px;line-height:1.2;letter-spacing:.2em;color:var(--gold)}
.sec p{font-weight:400;letter-spacing:.06em;line-height:2.1;font-size:15px}
[hidden]{display:none!important}

/* 立ち上がり：章が見えたら、順に */
.rise{opacity:0;transform:translateY(16px);transition:opacity 1.1s ease,transform 1.3s var(--ease)}
.sec.in .rise{opacity:1;transform:none}
.sec.in .rise:nth-of-type(2),.sec.in .rise.d2{transition-delay:.14s}
.sec.in .rise:nth-of-type(3),.sec.in .rise.d3{transition-delay:.28s}
.sec.in .rise:nth-of-type(4),.sec.in .rise.d4{transition-delay:.42s}

/* ——— MEMBER：FV と同じ「部屋」の言葉づかい。手を置いた一人に光があたる。文字は控えめ（2026-10-08 本人）。
   一画面に収める：PC・タブレットは 5 列で、部屋（3:4）の幅を画面の高さから抑える。スマホは一列を横に送る（BUSINESS と同じ考え。縦のひと送りは邪魔しない） ——— */
.tm-intro{margin-top:14px;font-size:14px;letter-spacing:.12em;line-height:2}
.tm-intro .sub{font-size:.86em;letter-spacing:.1em;color:var(--sub);white-space:nowrap}   /* （一部抜粋）2026-10-08 本人 */
.tm-list{display:grid;grid-template-columns:repeat(5,minmax(0,calc((100svh - 540px) * .75)));gap:clamp(14px,1.6vw,24px);margin-top:clamp(26px,4.5vh,40px)}
.tm{position:relative;display:block;color:var(--ink);min-width:0}
.tm .ph{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;background:var(--tile);box-shadow:0 20px 50px -30px rgba(150,110,30,0);transition:box-shadow 1.1s ease}
.tm .ph img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;transform:scale(1);transition:transform 2s var(--ease)}
.tm .ph::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.tm .ph::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(104deg,rgba(255,244,220,0) 36%,rgba(255,240,208,.42) 50%,rgba(255,244,220,0) 64%);transform:translateX(-110%)}
.tm-list:hover .tm:not(:hover) .ph::after{opacity:.18}
.tm:hover .ph{box-shadow:0 34px 80px -34px rgba(150,110,30,.45)}
.tm:hover .ph img{transform:scale(1.075)}
.tm:hover .ph::before{animation:light-pass2 1.9s var(--ease-io) both}
@keyframes light-pass2{to{transform:translateX(110%)}}
.tm .nm{display:block;margin-top:12px;font-size:14px;font-weight:500;letter-spacing:.12em;line-height:1.5}
.tm .en{display:block;margin-top:2px;font-family:var(--disp);font-weight:500;font-size:11px;letter-spacing:.2em;color:var(--gold);line-height:1.4}
.tm .rl{display:block;margin-top:8px;font-size:11px;letter-spacing:.04em;line-height:1.7;color:var(--sub)}
.tm .rl span{display:block}
.tm .rl .phr{font-style:normal}

/* ——— PROFILE：事実だけの静かな表。行は NEWS と同じ細い線 ——— */
.pf{margin-top:22px;border-top:1px solid #E4E4E0;max-width:860px}
.pf .row{display:grid;grid-template-columns:9.5em minmax(0,1fr);column-gap:28px;padding:20px 0;border-bottom:1px solid #E4E4E0}
.pf dt{font-size:13px;letter-spacing:.14em;color:var(--sub);padding-top:.15em}
.pf dd{font-size:15px;letter-spacing:.06em;line-height:1.9}
.pf dd .en{font-family:var(--disp);font-weight:500;font-size:15px;letter-spacing:.14em}
.pf dd ul{list-style:none}
/* 取引先：群（広告媒体・事業基盤）ごとに小さな見出し。PC は 2 列、スマホは 1 列。文字だけ（ロゴは使わない） */
.pf .pf-pt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:14px}
.pf .pf-pt .grp{display:block}
.pf .pf-pt b{display:block;font-weight:500;font-size:12px;letter-spacing:.16em;color:var(--gold);margin-bottom:4px}
.pf .pf-pt .note{grid-column:1/-1;font-size:12px;letter-spacing:.1em;color:var(--sub)}

/* ——— CONTACT への導線（MESSAGE の ABOUT US と同じ形：英字・一行・流れる線＋READ MORE） ——— */
.pg-lead{margin-top:clamp(56px,9vh,96px);display:flex;justify-content:center}
.lead2{position:relative;display:inline-grid;grid-template-columns:auto auto minmax(150px,230px);align-items:baseline;column-gap:18px;padding:10px 0 0;color:var(--ink)}
.lead2 .en{font-family:var(--disp);font-weight:500;font-size:26px;line-height:1.2;letter-spacing:.2em;color:var(--gold);white-space:nowrap}
.lead2 .jp{font-size:13px;letter-spacing:.12em;white-space:nowrap}
.lead2 .go{position:relative;align-self:center;height:1px}
.lead2 .ln2{position:absolute;inset:0;overflow:hidden}
.lead2 .ln2::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(172,135,0,.3),rgba(201,162,74,.22) 60%,rgba(172,135,0,0))}
.lead2 .ln2::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(172,135,0,.95) 0 50%,rgba(172,135,0,0) 50% 100%);background-size:200% 100%;background-position:100% 0;animation:flow 2.8s var(--ease-io) 1.2s infinite}
.lead2 .more{position:absolute;right:0;top:9px;font-family:var(--disp);font-weight:500;font-size:11px;line-height:1.2;letter-spacing:.26em;color:var(--gold);white-space:nowrap}
.lead2:hover .ln2{transform:scaleX(1.12);transform-origin:left;transition:transform .9s var(--ease)}

/* 高さの低い PC（章の文字と同じ境）：MEMBER の文字を少し小さく。部屋を縮めるより、行が増えないほうが一画面に収まる */
@media (min-width:768px) and (max-height:760px){
  .tm-intro{font-size:13px;line-height:1.8}
  .tm-list{margin-top:22px;grid-template-columns:repeat(5,minmax(0,max(96px,calc((100svh - 480px) * .75))))}
  .tm .nm{font-size:13px;margin-top:10px}.tm .rl{font-size:10.5px;line-height:1.6;margin-top:6px}
}
@media (max-width:767px){
  .sec{padding:calc(var(--header-h) + 4px) var(--side) 72px}
  .sec .head{font-size:24px}
  .tm-intro{font-size:13px;line-height:1.9}
  /* 横に送る一列：部屋の幅は画面の 56%、高さは画面から抑える。端は画面の余白に揃え、送った先も同じ余白で止まる */
  .tm-list{display:flex;gap:12px;margin:18px calc(var(--side) * -1) 0;padding:0 var(--side);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:var(--side);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tm-list::-webkit-scrollbar{display:none}
  .tm{flex:0 0 min(56%, calc((100svh - 420px) * .75));scroll-snap-align:start}
  .tm .nm{font-size:13px;margin-top:8px}.tm .en{font-size:10px}.tm .rl{font-size:10.5px;margin-top:6px}
  .pf .row{grid-template-columns:1fr;row-gap:4px;padding:14px 0}
  .pf dt{font-size:11.5px}.pf dd{font-size:14px}
  .pf .pf-pt{grid-template-columns:1fr;row-gap:12px}
  .pf .sub{display:block;text-indent:-.5em}   /* 括弧の句が次の行に落ちる時、「（」をぶら下げて行頭を揃える（章の .hang と同じ） */
  .lead2{grid-template-columns:auto minmax(80px,1fr);row-gap:6px;column-gap:14px;width:100%;padding-top:4px}
  .lead2 .en{grid-column:1/-1;font-size:24px}
  .lead2 .jp{font-size:12.5px;letter-spacing:.08em}
  .pg-lead{margin-top:48px}
}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}.lead2 .ln2::after{animation:none}.tm:hover .ph::before{animation:none}}
/* /recruit/ 採用のメッセージ（2026-10-08 本人採用）：リードは 2 行、本文は段落。字の大きさは方針ページと同じ（legal.css の .lg p） */
.rc-lead{line-height:2.2}
.rc-msg{margin-top:26px}