/* INFINITY 公式サイト 全ページ共通のスタイル（TOP の見た目もここ。下層ページだけのものは about.css などに分ける）。
   配色・余白は TeaRoom、グローバルナビは wantedlyinc.com をなぞっている（docs/要件定義.md 5-5） */
/* 配色・余白・部品は TeaRoom（docs/ベンチマーク_TeaRoom.md）をベースにする。
   色相のある色は写真に任せ、地と文字はグレーの階調だけで組む */
:root{
  --ink:#000A02;      /* 文字・濃い面。真っ黒ではなく少し緑を含んだ黒 */
  --panel:#1A1A1A;    /* 大きな濃い面・フッターのカード */
  --box:#292929;      /* ボタンの矢印の箱 */
  --bg:#F0F0F0;       /* ページの地 */
  --paper:#F6F7F8;    /* 濃い面の上の明るい文字 */
  --cream:#F0F1EE;    /* 濃いボタンの文字 */
  --mute:#808080;     /* 日付・ラベル */
  --rule:#C5C5C5;     /* 明るい地の区切り線・濃い面の本文 */
  --soft:#E7E7E7;     /* 淡いボタン */
  /* 英字はすべて Jost。日本語は Jost に字形がないので Noto Sans JP で出る */
  --en:"Jost",sans-serif;
  --ja:"Jost","Noto Sans JP","Hiragino Sans",sans-serif;
  --gut:clamp(16px,3.6vw,52px);   /* 左右の余白。1440px で 52px */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ja);font-size:16px;line-height:1.8;letter-spacing:.06em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
p{margin:0}

/* ざらつき。TeaRoom は 600px のノイズ画像を敷き詰めている。ここでは SVG で生成して重ねる */
.grain{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:300px}

/* ---------- 部品 ---------- */
/* 矢印の箱つきボタン（TeaRoom：高さ52px・角丸4px・余白 4px 4px 4px 24px・箱 32×44px） */
/* 文字を選んだとき（反転）の色。モノトーンの中で目印になるよう、蛍光の黄緑に黒い文字 */
::selection{background:#C8FF00;color:var(--ink)}
/* ---------- ボタン（サイト全体で共通） ----------
   明るい地に黒い枠。右端だけを黒く塗って白い矢印を置く。
   マウスを載せると：左側は黒が左から敷かれて文字が白に、右端は白が左から敷かれて矢印が黒に（色が左右で入れ替わる）。
   矢印は横にすべって入れ替わる（今の矢印が右へ抜け、もう1本が左から入る。2本目は common.js が足す）。箱そのものは動かさない */
.btn{position:relative;isolation:isolate;display:inline-flex;text-decoration:none;align-items:center;gap:20px;height:52px;padding:0 0 0 24px;box-sizing:border-box;border:1px solid var(--ink);border-radius:4px;overflow:hidden;background:var(--paper);color:var(--ink);font-size:15px;letter-spacing:.08em;white-space:nowrap;transition:color .45s cubic-bezier(.65,0,.35,1)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.btn i{position:relative;isolation:isolate;align-self:stretch;flex:none;width:52px;overflow:hidden;background:var(--ink);color:var(--paper);font-style:normal;font-family:var(--en);font-size:15px;transition:color .45s cubic-bezier(.65,0,.35,1)}
.btn i::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.btn i span{position:absolute;inset:0;display:grid;place-items:center;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.btn i span+span{transform:translateX(-100%)}
/* カードの中のボタン（span）は、カード全体に載せたときにも同じ動きにする */
.btn:hover,a:hover .btn{color:var(--paper)}
.btn:hover::before,a:hover .btn::before{transform:none}
.btn:hover i,a:hover .btn i{color:var(--ink)}
.btn:hover i::before,a:hover .btn i::before{transform:none}
.btn:hover i span:first-child,a:hover .btn i span:first-child{transform:translateX(100%)}
.btn:hover i span+span,a:hover .btn i span+span{transform:none}
/* 濃い面の上では、枠が地に沈まないよう明るい色にする */
.panel-dark .btn,.req-b-card .btn,[data-dark] .btn{border-color:var(--paper)}
/* 戻るボタン：矢印の箱を左に置き、矢印は左向き。載せたときの矢印も左へ抜ける */
.btn.is-back{padding:0 24px 0 0}
.btn.is-back i{order:-1}
.btn.is-back i span+span{transform:translateX(100%)}
.btn.is-back:hover i span:first-child{transform:translateX(-100%)}
.btn.is-back:hover i span+span{transform:none}
.arrow{display:grid;place-items:center;width:32px;height:32px;border-radius:2px;background:var(--box);color:var(--cream);font-family:var(--en);font-size:12px}
.label{display:inline-block;font-family:var(--en);font-size:13px;letter-spacing:.02em;color:var(--paper);background:var(--ink);padding:6px 12px;border-radius:4px}
.dot{font-size:16px;color:var(--mute);letter-spacing:.04em}
.dot::before{content:"・"}

/* 写真。白黒で置き、乗せるとカラーに戻す（TeaRoom の動き） */
.ph{position:relative;overflow:hidden;border-radius:8px;background:#333}
.ph>b{position:absolute;inset:0;background-size:cover!important;background-position:center!important;filter:grayscale(1) contrast(1.05);transition:filter .6s ease, transform 1.2s cubic-bezier(.2,.7,.2,1)}
/* 色が付くのは2通り。リンクの写真はマウスを載せたとき、リンクでない写真は画面の上下中央を通るとき（common.js が .is-color を付ける）。
   リンクでない写真にもホバーで色を付けると、押せるものと見分けがつかなくなるため分けている */
a:hover .ph>b,.ph.is-color>b{filter:grayscale(0)}
/* 画面中央で付く色は、気づいたら色づいていたくらいの速さで（ホバーの .6s より長く、ゆるい立ち上がり）。
   白黒に戻るときも同じ速さにするため、見張っている写真（.is-watch）全体に付ける */
.ph.is-watch>b{transition:filter 2.8s cubic-bezier(.33,0,.2,1), transform 1.2s cubic-bezier(.2,.7,.2,1)}
a:hover .ph>b{transform:scale(1.02)}
/* スマホなど、マウスを載せる操作が無い端末では、リンクの写真も画面の上下中央に来たら色を付ける（common.js が .is-color を付ける。2026-10-11 錦見さん）。
   画面の幅ではなく「ホバーできるか」で分ける（タブレットも同じ扱いにするため） */
.ph::after{content:attr(data-note);position:absolute;right:12px;top:10px;font-family:var(--en);font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.55)}
.p1>b{background:radial-gradient(30% 35% at 30% 35%,#e9c58f,transparent 70%),radial-gradient(25% 30% at 70% 30%,#f2d9a6,transparent 70%),radial-gradient(60% 50% at 50% 100%,#2c3a52,transparent 70%),linear-gradient(180deg,#6b5236,#2a2a33 60%,#141820)}
.p2>b{background:radial-gradient(40% 40% at 65% 40%,#9fb3c9,transparent 70%),radial-gradient(35% 30% at 25% 75%,#c79a6b,transparent 70%),linear-gradient(160deg,#4a5a6e,#1d2430)}
.p3>b{background:radial-gradient(35% 40% at 40% 30%,#d8cbb1,transparent 70%),radial-gradient(30% 30% at 80% 70%,#7c8b6a,transparent 70%),linear-gradient(200deg,#5f5a4c,#22251f)}
.p4>b{background:radial-gradient(50% 50% at 50% 20%,#b9c2b8,transparent 70%),linear-gradient(180deg,#6e7a72 0%,#2b332f 55%,#0c1410 100%)}

/* ---------- ヘッダー（明るい地では明るく、濃い面に入ると濃くなる） ---------- */
/* ---------- グローバルナビ（wantedlyinc.com の作りをなぞる） ----------
   画面上部の中央に浮かぶカプセル。地は半透明＋強いぼかし。
   読み込み時に地が中央から左右へ広がり、ロゴ → ナビ項目の順に時間差で現れる。
   スクロールするとロゴは記号だけ、ナビは「● Menu」にたたむ。カーソルを乗せると戻す。
   明るい地の上では白い地、濃い面の上では黒い地に切り替える。 */
:root{
  --gn-expo-io:cubic-bezier(.87,0,.13,1);   /* ExpoEaseInOut */
  --gn-expo-o:cubic-bezier(.16,1,.3,1);     /* ExpoEaseOut */
  --gn-p2-o:cubic-bezier(.33,1,.68,1);      /* Power2EaseOut */
  --gn-p2-io:cubic-bezier(.45,0,.55,1);     /* Power2EaseInOut */
  --gn-theme:.35s cubic-bezier(.215,.61,.355,1);
}
.gn{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:center;padding-top:30px;pointer-events:none;transition:transform .75s cubic-bezier(.65,0,.35,1)}
.gn.is-hide{transform:translateY(-140%)}
.gn-inner{position:relative;display:inline-flex;align-items:center;gap:24px;padding:6px 32px 6px 6px;pointer-events:none}
.gn.is-ready .gn-inner{pointer-events:auto}
.gn-bg{position:absolute;top:0;left:50%;translate:-50% 0;width:0;height:100%;border-radius:16px;opacity:0;z-index:0;
  background:rgba(0,0,0,.56);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);box-shadow:0 0 80px rgba(0,0,0,.03);
  transition:background-color var(--gn-theme)}
.gn.-light .gn-bg{background:rgba(255,255,255,.5)}
.gn-logo{position:relative;z-index:1;display:flex;align-items:center;height:50px;padding:0 24px;opacity:0;color:var(--ink)}
.gn-logo::before{content:"";position:absolute;inset:0;background:#fff;border-radius:14px;z-index:-1}
.gn-icon{display:block;position:relative;overflow:hidden;white-space:nowrap}
.gn-icon-in{display:inline-flex;align-items:center;gap:10px}
/* 金のロゴ画像を黒にして使う（形の型にする方法は、ファイルを直接開くと読み込めないため） */
.gn-mark{display:block;width:34px;height:auto;flex:none;filter:brightness(0)}
.gn-type{font-family:var(--en);font-weight:500;font-size:16px;letter-spacing:.16em;transition:opacity .3s var(--gn-p2-io)}
.gn-cnt{position:relative;z-index:1;height:0}
.gn-nav,.gn-compact{position:absolute;top:50%;left:0;translate:0 -50%;display:flex;align-items:center;white-space:nowrap}
.gn-nav{gap:16px}
.gn-compact{opacity:0;pointer-events:none}
.gn-item,.gn-menu,.gn-list a{font-family:var(--en);font-weight:600;font-size:13px;line-height:1;color:#fff;transition:color var(--gn-theme),opacity .3s}
.gn.-light .gn-item,.gn.-light .gn-menu,.gn.-light .gn-list a{color:#292929}
/* 押せる範囲を文字の上下に広げる（帯の高さは変えない。ナビは帯の中央に置いてあるので、上下の余白は帯の内側に収まる） */
.gn-item{opacity:0;padding:18px 0}
@media (hover:hover){.gn-item.is-shown:hover{opacity:.5}}
/* 1文字ずつ下から入れ替わる（wantedly の hover-text） */
.gn-ch{position:relative;display:inline-block;overflow:hidden;vertical-align:top;white-space:pre}
.gn-ch>span{display:block}
.gn-ch>.b{position:absolute;inset:0;transform:translateY(90%);opacity:0}
/* 左に小さな3本線。ロゴの白い箱に近すぎると窮屈なので、3本線の左にも余白をとる（文字の頭はナビ項目より右にずれる） */
.gn-menu{display:flex;align-items:center;gap:10px;margin-left:-6px;padding:0 4px;background:none;border:0;cursor:pointer}
.gn-menu i{width:10px;height:7px;flex:none;
  background:linear-gradient(currentColor,currentColor) top/100% 1px no-repeat,
             linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
             linear-gradient(currentColor,currentColor) bottom/100% 1px no-repeat}
/* メニューを開いているときは、≡ を × にする */
.gn-menu i{position:relative}
.gn-menu i::before,.gn-menu i::after{content:"";position:absolute;left:-1px;right:-1px;top:50%;height:1px;background:currentColor;opacity:0;transition:transform .35s cubic-bezier(.65,0,.35,1),opacity .2s}
.gn.is-open .gn-menu i{background:none;height:10px}
.gn.is-open .gn-menu i::before{opacity:1;transform:rotate(45deg)}
.gn.is-open .gn-menu i::after{opacity:1;transform:rotate(-45deg)}
.gn-list{display:none}
/* 右上の Contact（wantedly の .l-recruit-float-button：右24px・上32px、白いカード角丸16px） */
.gn-ctas{position:fixed;top:32px;right:24px;z-index:51;display:flex;gap:8px;pointer-events:none}
.gn-contact{display:block;transform:translateY(-90px);transition:transform .75s cubic-bezier(.65,0,.35,1);pointer-events:none}
.gn-contact.is-shown{transform:none;pointer-events:auto}
.gn.is-hide~.gn-ctas .gn-contact{transform:translateY(-90px);pointer-events:none}
/* 右上の Contact。写真は外して、文字だけのボタンにする（2026-10-11 錦見さん）。高さは前と同じ 58px */
.gn-contact-card{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;height:58px;padding:0 28px;border-radius:16px;background:#fff;box-shadow:0 0 80px rgba(0,0,0,.05)}
/* 載せると、左から黒が満ちて文字が白になる（サイト共通のボタンと同じ動き） */
.gn-contact-card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.gn-contact-t span{font-family:var(--en);font-weight:600;font-size:13px;line-height:1;letter-spacing:.03em;color:#292929;transition:color .45s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.gn-contact:hover .gn-contact-card::before{transform:none}.gn-contact:hover .gn-contact-t span{color:var(--paper)}}
.gn-contact:focus-visible .gn-contact-card::before{transform:none}.gn-contact:focus-visible .gn-contact-t span{color:var(--paper)}
@media (min-width:1280px){.gn-ctas{right:32px}}
@media (max-width:1023px){.gn-ctas{display:none}}

.wrap{padding:0 var(--gut)}

/* ---------- ① ファーストビュー ---------- */
/* 下の余白は、次の濃い面との間をとるため（以前は Philosophy の余白がこの役をしていた） */
.fv{padding:120px var(--gut) 200px}
.fv .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fv .col{display:flex;flex-direction:column;gap:12px}
.big{display:block;position:relative;height:clamp(560px,56vw,811px)}
.big .ph{position:absolute;inset:0}
.big .ttl{position:absolute;left:32px;bottom:28px;font-family:var(--en);font-weight:300;font-size:clamp(44px,4.4vw,64px);line-height:1.1;letter-spacing:.04em;color:var(--bg)}
.big .arrow{position:absolute;right:20px;bottom:24px}
.pick{display:block;position:relative;height:360px}
.pick .ph{position:absolute;inset:0}
.pick .ph::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,10,2,.75),rgba(0,10,2,0) 60%)}
.pick .label{position:absolute;top:0;right:0;z-index:2;border-radius:0 8px 0 4px}
.pick .txt{position:absolute;left:26px;bottom:24px;z-index:2;color:var(--paper)}
.pick .txt b{display:block;font-weight:400;font-size:22px;line-height:1.4;letter-spacing:.12em}
.pick .txt small{display:block;margin-top:14px;font-size:13px;letter-spacing:.08em}
.tall{display:block;position:relative;height:599px}
.tall .ph{position:absolute;inset:0}
.tall .ttl{position:absolute;right:32px;top:26px;font-family:var(--en);font-weight:300;font-size:clamp(44px,4.4vw,64px);line-height:1;letter-spacing:.04em;color:var(--bg)}
/* 次回の例会（左の大きなカード）。写真の上に、日付・時間・見学のボタン。カード全体はリンクにしない（中にボタンがあるため） */
.nm .ph::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,10,2,.85),rgba(0,10,2,.2) 55%,rgba(0,10,2,0))}
.nm .label{position:absolute;top:0;left:0;z-index:2;border-radius:8px 0 4px 0}
.nm-txt{position:absolute;left:32px;right:32px;bottom:32px;z-index:2;color:var(--paper)}
.nm-date{margin:0;display:flex;align-items:baseline;font-family:var(--en);white-space:nowrap}
.nm-date b{font-weight:300;font-size:clamp(64px,7vw,112px);line-height:.9;letter-spacing:-.01em}
.nm-date span{margin:0 10px 0 6px;font-family:var(--ja);font-size:clamp(16px,1.4vw,20px);letter-spacing:.06em}
.nm-day{margin:20px 0 0;font-size:14px;letter-spacing:.08em;color:var(--rule)}
.nm-btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}
/* お問い合わせ（左の小さなカード）・よくある質問（右の縦長カード）：写真の上に文字。文字の側を暗くして読みやすく */
.nx-contact>.ph,.nx-qa>.ph{position:absolute;inset:0;z-index:0;border-radius:8px}
.nx-contact>.ph::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,10,2,.82),rgba(0,10,2,.45) 60%,rgba(0,10,2,.2))}
.nx-qa>.ph::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,10,2,.9),rgba(0,10,2,.6) 55%,rgba(0,10,2,.25))}
.nx-contact>:not(.ph),.nx-qa>:not(.ph){z-index:1}
.nx-contact>small,.nx-contact>b,.nx-contact>p{position:relative}
/* カードの文字用の .news b の指定が、写真の部品（.ph>b）に効かないように戻す */
.nx-contact .ph>b{position:absolute;max-width:none;margin:0}
.nx-contact p{margin:10px 0 0;font-size:13px;letter-spacing:.06em;color:var(--rule)}
/* よくある質問（右の縦長カード）：写真は使わず濃い面に、質問を3つ */
.nx-qa{border-radius:8px;background:var(--panel);color:var(--paper);padding:32px;overflow:hidden}
.nx-qa .ttl{z-index:1}
.nx-qa .ttl{color:var(--paper)}
.nx-qa-list{list-style:none;margin:0;padding:0;position:absolute;left:32px;right:32px;bottom:96px}
.nx-qa-list li{display:flex;gap:16px;align-items:baseline;padding:18px 0;border-top:1px solid rgba(246,247,248,.18);font-size:15px;letter-spacing:.06em}
.nx-qa-list li:last-child{border-bottom:1px solid rgba(246,247,248,.18)}
.nx-qa-list em{font-style:normal;font-family:var(--en);font-weight:300;font-size:18px;color:var(--rule)}
.nx-qa-more{position:absolute;left:32px;bottom:32px;font-size:14px;letter-spacing:.06em}
.nx-qa .arrow{position:absolute;right:20px;bottom:24px}
.nx-qa:hover .nx-qa-more{color:var(--rule)}
.news{display:block;position:relative;height:238px;border-radius:8px;background:var(--ink);color:var(--bg);padding:26px 36px;overflow:hidden}
.news small{font-family:var(--en);font-size:14px;letter-spacing:.06em;border:1px solid rgba(240,240,240,.35);border-radius:4px;padding:2px 10px}
.news b{display:block;margin-top:22px;font-weight:400;font-size:18px;line-height:1.6;letter-spacing:.08em;max-width:30em}
.news time{position:absolute;left:36px;bottom:26px;font-family:var(--en);font-weight:300;font-size:14px;color:var(--mute)}
.news .arrow{position:absolute;right:20px;bottom:20px}

/* ---------- ② Philosophy（左に見出し、右の列に段落） ---------- */
/* ---------- 数字で見るインフィニティ（数字ごとに写真のカードを4つ横一列に。FV 下の写真カードと同じ作り） ---------- */
/* ∞ の層（.stage）の中にあるので、線画より手前に出す */
.nums{position:relative;z-index:1;padding:80px var(--gut) 40px}
.nums-head .sec-h{margin-top:18px}
.nums-v{margin:0;display:flex;align-items:baseline;white-space:nowrap;font-family:var(--en);color:var(--paper)}
/* 1枚が細いので、数字は折り返さない大きさに抑える */
.nums-n{font-weight:300;font-size:clamp(56px,5.4vw,96px);line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.nums-u{margin-left:6px;font-weight:400;font-size:clamp(18px,1.8vw,28px);letter-spacing:.04em}
/* 「以上」も「名」「億円」と同じ大きさ・同じ下端にそろえる */
.nums-u small{font-size:1em;margin-left:4px;letter-spacing:.04em}
/* 「約」は「億円」と同じ大きさにし、行の並び（baseline）で下端をそろえる */
.nums-pre{margin-right:6px;font-weight:400;font-size:clamp(18px,1.8vw,28px);letter-spacing:.04em}
.nums-note{margin:18px 0 0;text-align:right;font-size:12px;letter-spacing:.06em;color:var(--mute)}
/* About の説明の下：INFINITYについて／理念について を横に並べ、左右の真ん中に（狭い画面では折り返す） */
.nums-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}
.nb-grid{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.nb-card{position:relative;height:clamp(360px,34vw,500px);border-radius:8px;overflow:hidden}
.nb-card .ph{position:absolute;inset:0;border-radius:8px}
/* 文字が読めるよう、下側を暗くする */
.nb-card .ph::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,10,2,.82) 0%,rgba(0,10,2,.35) 45%,rgba(0,10,2,.05) 100%)}
.nb-txt{position:absolute;left:26px;right:20px;bottom:26px;z-index:2;color:var(--paper)}
.nb-k{margin:14px 0 0;font-size:14px;letter-spacing:.08em;color:var(--rule)}
/* ---------- 入会条件（濃い面の横長カード：左に写真、右に文章） ---------- */
/* 下の濃い面（Activity・Message）と同じく、ダークグレーの面の上に黒いカードを載せる */
.req-b{position:relative;z-index:1;padding:140px 36px 200px}
.req-b-panel{background:var(--panel);border-radius:12px;padding:48px}
/* 写真は横長（3:2）。枠が縦長だと左右が切れて寄りの画になるので、写真の列を広くとり、高さは文章に合わせる */
/* 写真は小さな正方形にして左に置き、残りの幅をすべて文章に使う（条件の文が横に長く読めるように） */
.req-b-card{display:grid;grid-template-columns:auto 1fr;background:var(--ink);color:var(--bg);border-radius:8px;overflow:hidden}
.req-b-card .ph{border-radius:0}
/* 写真は正方形に切り出し、カードの中に余白をとって置く（文章の高さに引っぱられて縦長にならないように）。
   写真（ベンチで話す2人を上から撮ったもの）は人物が右寄りにいるので、拡大はせず人物の側へ寄せる */
.req-b-card .ph{width:clamp(240px,25vw,360px);aspect-ratio:1/1;align-self:start;margin:72px 0 72px 64px;border-radius:6px}
/* 写真の上端を「Membership」の上端にそろえるため、文章は中央寄せでなく上から置く（上の余白は写真と同じ 72px） */
.req-b-card .req-b-txt{justify-content:flex-start}
.req-b-card .ph>b{background-position:50% 50%!important}
.req-b-txt{display:flex;flex-direction:column;justify-content:center;padding:72px 72px 72px 64px}
.req-b-en{margin:0 0 24px;font-family:var(--en);font-weight:400;font-size:32px;line-height:1;letter-spacing:.04em;color:var(--bg)}
.req-b-h{margin:0;font-weight:400;font-size:clamp(28px,2.6vw,38px);line-height:1.4;letter-spacing:.1em;color:var(--bg)}
.req-b-list{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--mute)}
.req-b-list li{display:grid;grid-template-columns:60px 1fr;padding:26px 0;border-bottom:1px solid #3a3a3a}
.req-b-list em{font-style:normal;font-family:var(--en);font-weight:300;font-size:18px;color:var(--mute);padding-top:4px}
.req-b-list b{display:block;font-weight:400;font-size:22px;line-height:1.5;letter-spacing:.08em}
.req-b-list small{display:block;margin-top:10px;font-size:15px;line-height:1.9;letter-spacing:.04em;color:var(--mute)}
/* 入会条件の下のボタン：一覧の下に、上を広めにあけて左端に置く。始まりは「03」などの番号の左とそろえる（2026-10-11 錦見さん） */
.req-b-more{display:flex;justify-content:flex-start;margin-top:56px}
/* 最後の条件の下はボタンで終わるので、区切りの線は引かない */
.req-b-list li:last-child{border-bottom:0;padding-bottom:0}
.sec-h{margin:0;font-family:var(--en);font-weight:400;font-size:32px;line-height:1;letter-spacing:.04em}

/* ---------- ③ 大きな濃い面（端から36px・角丸12px） ---------- */
.panel-dark{margin:0 36px;background:var(--panel);color:var(--paper);border-radius:12px;padding:16px 16px 160px}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.strip .ph{height:clamp(420px,52vw,760px);border-radius:4px}
.act{display:grid;grid-template-columns:361px 1fr;gap:80px;padding:200px 60px 0}
.act .dot{color:var(--mute)}
.huge{display:block;margin:20px 0 0;font-family:var(--en);font-weight:300;font-size:clamp(56px,7vw,100px);line-height:1;letter-spacing:.04em;color:var(--bg)}
.act h3{margin:60px 0 0;font-weight:400;font-size:clamp(24px,2.4vw,35px);line-height:1.6;letter-spacing:.08em}
.act .lead{margin-top:70px;font-size:16px;line-height:1.7;letter-spacing:.05em;color:var(--rule)}
.act .btn{margin-top:60px}
.act .side{position:relative}
.act .side .ph{position:sticky;top:120px;height:clamp(520px,60vw,860px)}
.act .side .ph>b{opacity:.55}
.slots{display:flex;flex-direction:column;gap:18px;margin-top:110px}
.slot{display:block;background:var(--ink);border-radius:4px;padding:4px 4px 0}
.slot .ph{height:150px;border-radius:2px}
.slot .row{display:flex;align-items:center;justify-content:space-between;padding:14px 8px 14px 12px}
.slot .row span{font-size:18px;letter-spacing:.08em}
.slot .row em{font-style:normal;font-family:var(--en);font-weight:300;color:var(--mute);margin-left:12px;font-size:15px}

.msg-head{padding:220px 60px 60px;text-align:right}
.feature{display:grid;grid-template-columns:1.25fr 1fr;background:var(--ink);border-radius:8px;overflow:hidden;margin:0 33px 28px;min-height:clamp(520px,53vw,768px)}
.feature .ph{border-radius:0}
.feature .txt{display:flex;flex-direction:column;justify-content:flex-end;padding:60px 70px 64px 60px}
.feature .k{font-family:var(--en);font-size:13px;letter-spacing:.2em;color:var(--mute);margin-bottom:auto}
.feature h3{margin:0;font-weight:400;font-size:28px;line-height:1.5;letter-spacing:.08em;color:var(--bg)}
.feature .who{margin-top:24px;padding-bottom:22px;border-bottom:1px solid var(--mute);font-size:16px;letter-spacing:.08em}
.feature p{margin-top:22px;font-size:14px;line-height:1.5;letter-spacing:.05em;color:var(--mute)}
.feature .btn{margin-top:36px;align-self:flex-start}

/* ---------- ④ Members（TeaRoom の Client のロゴの横流しを、氏名で） ---------- */
.members{padding:240px 0 0}
/* 見出しと注記を左に、メンバー一覧へのボタンを右端に（狭い画面ではボタンが下に回る） */
.members-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;padding:0 var(--gut)}
.members .note{margin-top:14px;font-size:14px;color:var(--mute)}
.members .note b{font-family:var(--en);font-weight:400;font-size:18px;color:var(--ink);margin:0 2px}
/* 氏名の帯は画面の端まで流れるので、ボタンだけ左右の余白の位置にそろえる */
.marquee{overflow:hidden;margin-top:60px;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee .track{display:flex;width:max-content;animation:flow 70s linear infinite}
.marquee.rev .track{animation-direction:reverse;animation-duration:80s}
/* ロゴの帯。色はサイトのモノトーンに合わせて白黒にそろえる。白いロゴ（.is-light）は明るい地で見えないので反転する */
.marquee .logo{display:inline-flex;align-items:center;justify-content:center;height:120px;padding:0 48px}
.marquee .logo img{display:block;height:40px;width:auto;max-width:240px;object-fit:contain;filter:grayscale(1) contrast(1.1);opacity:.85}
.marquee .logo.is-sq img{height:64px}
/* 白い背景つきのロゴ（gif・jpg など）を地になじませる。流れる列（.track）は動かすために独立した層になるので、列そのものに地の色を敷いてから掛け合わせる */
.marquee:has(.logo) .track{background:var(--bg)}
.marquee .logo:not(.is-light) img{mix-blend-mode:multiply}
.marquee .logo.is-light img{filter:grayscale(1) invert(1) contrast(1.1)}
.marquee .logo.is-dummy i{display:block;width:150px;height:40px;border-radius:4px;background:var(--rule)}
/* 3段目はスマホだけ */
.marquee.m-sp{display:none}
@media (max-width:760px){
  /* スマホはロゴを小さくして3段に（1段に2つしか見えず、間延びするため） */
  .marquee.m-sp{display:block}
  .marquee{margin-top:20px}
  .marquee .logo{height:64px;padding:0 22px}
  .marquee .logo img{height:24px;max-width:140px}
  .marquee .logo.is-sq img{height:40px}
  .marquee.m-sp .track{animation-duration:75s}
}
@keyframes flow{to{transform:translateX(-50%)}}

/* ---------- ⑤ Report（TeaRoom の News） ---------- */
.report{display:grid;grid-template-columns:410px 1fr;padding:240px var(--gut) 300px}
.report ul{list-style:none;margin:0;padding:0}
.report li a{display:grid;grid-template-columns:132px 144px 1fr 32px;align-items:center;gap:0;padding:34px 0;border-bottom:1px solid var(--rule);transition:opacity .3s}
.report li:first-child a{padding-top:0}
.report li a:hover{opacity:.6}
.report .cat{font-family:var(--en);font-size:14px;letter-spacing:.04em}
.report time{font-family:var(--en);font-weight:300;font-size:16px;color:var(--mute)}
.report .t{font-size:16px;line-height:1.6;letter-spacing:.08em}
.report .more{grid-column:2;justify-self:end;margin-top:50px}

/* ---------- フッター（濃い地。右に入会案内とお問い合わせのカード） ---------- */
/* ---------- フッター（wantedlyinc.com の作り） ----------
   フッターは画面いっぱいに固定して奥に置き、本文（main と下の帯）に画面ぶんの下余白をとって手前に重ねる。
   本文を下まで送ると、本文が上へ抜けて、奥のフッターが現れる */
main,.slice-foot{position:relative;z-index:1;background:var(--bg)}
.slice-foot{margin-bottom:100svh}
.ftr{visibility:hidden;position:fixed;inset:0;z-index:0;height:100svh;padding:8px;background:var(--bg);color:var(--ink);overflow:auto}
/* 面の色は TOP の濃い面（Activity・入会条件）と同じダークグレー。文字・線・ロゴは明るい色に */
.ft-inner{display:flex;flex-direction:column;min-height:100%;box-sizing:border-box;padding:64px 64px 0;border-radius:8px;background:var(--panel);color:var(--paper)}
.ft-head{display:flex;justify-content:space-between;align-items:flex-start}
.ft-logo{display:flex;align-items:center;gap:14px;color:var(--paper)}
.ft-logo img{width:56px;height:auto;filter:brightness(0) invert(1)}
.ft-logo span{font-family:var(--en);font-weight:500;font-size:28px;letter-spacing:.16em}
/* ロゴの下に会の SLOGAN（言い換えない） */
.ft-catch{margin:28px 0 0;font-size:clamp(16px,1.5vw,20px);letter-spacing:.14em;color:var(--paper)}
.ft-crumb{margin:0;font-size:13px;color:var(--mute)}
.ft-body{flex:1;display:flex;justify-content:space-between;align-items:flex-end;gap:48px;padding:80px 0 64px}
/* 左下：Join us と Contact のカードを縦に。写真はリンクなので、載せたときに色が付く（共通ルール） */
/* PC はメニューを左、カードを右に（2026-10-11 錦見さん）。スマホの並びは変えない */
.ft-cards{order:2;display:flex;flex-direction:column;gap:16px;width:min(520px,40vw)}
.ft-card{position:relative;display:block;height:clamp(180px,26vh,260px);border-radius:8px;overflow:hidden;color:var(--paper)}
.ft-card .ph{position:absolute;inset:0}
.ft-card .ph::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,10,2,.75),rgba(0,10,2,.15))}
.ft-card-t{position:absolute;left:36px;bottom:30px;z-index:2;display:flex;flex-direction:column;gap:10px}
.ft-card-t .en{font-family:var(--en);font-weight:500;font-size:clamp(32px,3vw,44px);line-height:1;letter-spacing:.02em}
.ft-card-t .ja{font-size:15px;letter-spacing:.08em;color:var(--rule)}
.ft-card-arrow{position:absolute;right:32px;bottom:32px;z-index:2;font-family:var(--en);font-size:22px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ft-card:hover .ft-card-arrow{transform:translateX(4px)}
/* 右：メニュー。英字を大きく、日本語は右端に小さく。載せると黒い線が左から引かれる */
.ft-cnt{width:min(580px,45vw)}
/* メニュー：番号付きの2列（案E。2026-10-11 錦見さん）。英字だけを出し、日本語は title に持たせる */
.ft-nav{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;border-top:1px solid #3a3a3a}
.ft-item{position:relative;display:grid;grid-template-columns:36px 1fr auto;align-items:baseline;gap:8px;padding:18px 0;border-bottom:1px solid #3a3a3a;color:var(--paper)}
.ft-item em{font-style:normal;font-family:var(--en);font-weight:300;font-size:13px;color:var(--mute)}
.ft-item .en{font-family:var(--en);font-weight:500;font-size:24px;line-height:1;letter-spacing:.01em}
.ft-item .ar{font-family:var(--en);color:var(--mute);transition:transform .35s cubic-bezier(.2,.7,.2,1),color .35s}
.ft-item:hover .ar{transform:translateX(4px);color:var(--paper)}
.ft-line{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--paper);transform:scaleX(0);transform-origin:right center;transition:transform .6s cubic-bezier(.65,0,.35,1)}
.ft-item:hover .ft-line{transform:scaleX(1);transform-origin:left center}
.ft-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:64px}
.ft-policy{display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:.04em}
.ft-policy a{color:var(--paper)}
.ft-policy a:hover,.ft-crumb a:hover{color:var(--mute)}
.ft-copy{margin:0;font-family:var(--en);font-weight:500;font-size:11px;letter-spacing:.04em}

/* ---------- FV：∞ の線画（奥へ倒して、斜めから見た遠近感） ---------- */
.stage{position:relative}
/* ∞ の層：包み（FV〜入会条件）全体に敷いたレールの中で画面に貼り付く。
   レールの外へは出ないので、入会条件を過ぎたら一緒に抜けていく */
.orb-track{position:absolute;inset:0;z-index:0;pointer-events:none}
.orb-layer{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-items:center;perspective:1100px;perspective-origin:50% 30%;pointer-events:none}
.hero{position:relative;height:100svh;min-height:600px}
/* rotateX で奥へ倒し、rotateZ で斜めに振る。--tilt はスクロールで少し深くなる */
/* --tx・--sc はスクロールで変わる（説明のコピーに来ると右へ寄って小さくなり、図版になる） */
.orbits{position:relative;width:min(150vw,2100px);height:auto;aspect-ratio:1280/880;flex:none;
  transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) rotateX(calc(52deg + var(--tilt,0deg))) rotateZ(-14deg);
  transform-origin:50% 50%;will-change:transform}
/* 奥へ倒すと遠い側の線が細くなって途切れて見えるので、1px より少し太くしておく。
   スクロールで小さくしたときも見た目の太さが変わらないよう、縮めた割合（--sc）と、viewBox の拡大率（--k。JS が入れる）で割り戻す。
   線を描く動きは、線の実際の長さ（--len。HTML に書いてある）ぶんの破線をずらして出す。
   以前は pathLength="1" と vector-effect:non-scaling-stroke を併用していたが、この組み合わせだと破線が画面上の長さより短く計算され、
   一度に線の一部しか見えず（書き出し側が消えていく）、描き終わりに残りが一気に出てカクついて見えた */
.orb{fill:none;stroke:var(--ink);stroke-width:calc(1.4px / var(--sc,1) / var(--k,1));stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:orb-draw 2.6s cubic-bezier(.65,0,.35,1) forwards;animation-delay:var(--d)}
@keyframes orb-draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
/* 描き終えたら破線の指定を外す。残すと、立体に倒したときに線が細かく途切れて見える */
.orb.is-drawn{stroke-dasharray:none;animation:none}
/* 線と点の svg を重ねる。それぞれを別の層にして、変わったものだけ描き直させる */
.orb-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;will-change:transform}
/* 点は線を描き終えてから出す（描いている最中に重ねると、最後のほうが重くなる） */
.orb-dot{opacity:0;animation:orb-fade .8s ease 3.3s forwards}
.orb-dot circle{fill:var(--ink)}
/* ∞ の点に添える言葉。∞ は奥へ倒してあるので、線画の中に入れると文字も潰れる。外に置いて JS で点に付いていかせる */
.orb-labels{position:absolute;inset:0;pointer-events:none;opacity:var(--lab,0);transition:opacity .4s ease}
.orb-labels span{position:absolute;left:0;top:0;font-family:var(--en);font-weight:500;font-size:16px;letter-spacing:.02em;color:var(--ink);white-space:nowrap;will-change:transform}
@keyframes orb-fade{to{opacity:1}}
.hero-scroll{position:absolute;left:50%;bottom:28px;width:1px;height:56px;background:linear-gradient(var(--ink),transparent);animation:hero-drip 2.4s cubic-bezier(.65,0,.35,1) 3s infinite;opacity:.6;transform:scaleY(0)}
@keyframes hero-drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- FV の外の INFINITY（文字が上、切れ端の帯が下） ---------- */
/* 文字（viewBox の y30〜200）は FV の中の下端に、切れ端の帯（y200〜300）は FV のすぐ外に出す。
   svg の高さ＝幅（97.6vw）×0.27、文字の下端までが高さの 0.63 なので、その分だけ引き上げる */
.inf{position:relative;z-index:1;margin-top:-16.6vw;padding:0 1.2vw;overflow:hidden}
.inf-svg{display:block;width:100%;height:auto;aspect-ratio:1000/270;overflow:visible}
/* <use> で複製した文字には CSS のセレクタが届かないので、親の svg に指定して引き継がせる */
.inf-svg{font-family:var(--en);font-weight:500;font-size:230px;fill:var(--ink)}
/* 入ってくる動き：文字は少し下から浮かび、そのあと帯がばらばらの位置から滑り込む */
.inf-lo{transform:translateY(40px);opacity:0;transition:transform 1.4s cubic-bezier(.16,1,.3,1),opacity .9s ease}
.inf-band{transform:translateX(var(--dx));opacity:0;transition:transform 1.4s cubic-bezier(.16,1,.3,1),opacity .6s ease;transition-delay:calc(var(--i)*.09s + .35s)}
.inf.in .inf-band,.inf.in .inf-lo,.slice.in .inf-band,.slice.in .inf-lo{transform:none;opacity:1}
/* ---------- 切れ端の帯の部品（common.js の buildSlice が中身を作る） ---------- */
.slice{position:relative;z-index:1;padding:0 1.2vw;overflow:hidden}
/* フッターの上：帯の下端をフッターの黒に接して、文字がフッターへ流れ落ちるように見せる */
/* 本文との間はすき間（margin）ではなく内側の余白でとる。すき間だと、奥に固定したフッターが透けて見えるため。
   下にも余白をとり、帯の下端がフッターの出だしに接して途中で切れたように見えないようにする */
/* 下の大きなロゴのすぐ下からフッターが現れるよう、ロゴの下の余白はとらない（2026-10-11 錦見さん） */
.slice-foot{padding-top:40px;padding-bottom:0}
/* 下層ページの見出し：文字本来の幅で、高さを決めて左に置く */
.slice-head{padding:0;overflow:visible}
/* 下層ページの大きな英字のタイトル。PC（1440px）で約200px の高さ */
.slice-head .inf-svg{width:auto;height:clamp(64px,14vw,220px)}
.inf-drift{transform:translateX(calc(var(--drift,0) * 1px));will-change:transform}

/* ---------- 説明のコピー（行ごとに下から現れる） ---------- */
/* 説明のコピー：左半分に文章、右半分は貼り付いた ∞ が図版として入る。∞ を見せる時間をとるため高さを持たせる */
/* 本文が長くなり高さは中身で足りるので、画面1枚ぶんを最低限にし、下の余白は詰める（数字のセクションと間延びしないように） */
.intro-copy{position:relative;z-index:1;min-height:100svh;display:flex;align-items:center;padding:160px var(--gut) 40px}
.ic-inner{width:min(46vw,620px)}
.ic-label{margin:0 0 40px;font-family:var(--en);font-size:32px;letter-spacing:.04em;line-height:1}
.ic-head{margin:0;font-weight:400;font-size:clamp(30px,3.4vw,48px);line-height:1.5;letter-spacing:.08em}
.ic-body{margin-top:56px}
.ic-body p{margin:0;font-size:18px;line-height:2.2;letter-spacing:.08em}
/* 段落の切れ目。行ごとに出す作りなので、段落は余白で分ける */
.ic-body .ic-gap{margin-top:1.6em}
.ic-line{display:block;overflow:hidden}
.ic-line>span{display:inline-block;transform:translateY(105%);transition:transform 1.2s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--n,0)*.08s)}
.intro-copy.in .ic-line>span{transform:none}
/* ---------- 見出しの共通の出方（サイト全体のルール。要件定義 5-5） ----------
   見出しは最初から帯が文字を覆っていて、画面に入ると帯が右へ縮んで抜け、文字が左から見えてくる。
   帯の色は文字の色（currentColor）にする。明るい面では黒い帯、濃い面では白い帯になり、どの面でも同じ部品で済む。
   行ごとの包み（.hd-line）は common.js が見出しの <br> で区切って作る。2行目以降は少しずつ遅らせて追いかける */
.hd-line{display:block}
.hd-line>span{position:relative;display:inline-block}
.hd-line>span::after{content:"";position:absolute;left:0;right:0;
  /* 行の高さが文字より大きい見出しでは、帯が太りすぎないよう上下を詰める（行の高さが小さい見出しは詰めない） */
  top:max(0px,calc((1lh - 1.1em)/2));bottom:max(0px,calc((1lh - 1.1em)/2));
  background:currentColor;transform-origin:right center;pointer-events:none}
.hd-in .hd-line>span::after{animation:hd-out .9s cubic-bezier(.77,0,.18,1) forwards;animation-delay:calc(var(--i,0)*.18s + .25s)}
@keyframes hd-out{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.fade{opacity:0;transform:translateY(16px);transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1)}
.fade.in{opacity:1;transform:none}

/* ---------- スマホ ---------- */
@media (max-width:1024px){
  .nb-grid{grid-template-columns:1fr 1fr}
  .req-b-card{grid-template-columns:1fr}
  .req-b-card .ph{height:300px}
  /* 1列のときは写真を上に、カードの幅いっぱいの横長で敷く（正方形だと縦に長くなりすぎる） */
  .req-b-card .ph{width:auto;aspect-ratio:auto;margin:0;border-radius:0}
  .req-b-card .ph>b{background-position:50% 40%!important}
  .ic-inner{width:auto}
  .act{grid-template-columns:1fr;padding:120px 24px 0;gap:50px}
  .act .side .ph{position:relative;top:0;height:420px}
  .report{grid-template-columns:1fr;gap:40px}
  .feature{grid-template-columns:1fr;margin:0 8px 16px}
  .feature .ph{height:320px}
}
@media (max-width:760px){
  .slice-foot{margin-bottom:0}
  .ftr{visibility:visible!important;position:relative;height:auto;overflow:visible}
  .ft-inner{padding:40px 22px 0}
  .ft-logo img{width:44px}.ft-logo span{font-size:22px}
  /* スマホは横に並べると折れるので、パンくずはロゴとキャッチの下に回す */
  .ft-head{flex-direction:column;gap:24px}
  .ft-catch{margin-top:20px;font-size:14px;white-space:nowrap}
  .ft-body{flex-direction:column-reverse;align-items:stretch;padding:48px 0 40px;gap:40px}
  .ft-cards{order:0;width:auto}
  .ft-cnt{width:auto}
  .ft-nav{column-gap:20px}
  .ft-item{grid-template-columns:24px 1fr auto;gap:6px;padding:16px 0}
  .ft-item em{font-size:11px}
  .ft-item .en{font-size:18px}
  .ft-foot{margin-top:40px}
  .orbits{width:200vw}
  /* スマホは ∞ が本文の後ろに重なるので、英字のラベルは出さない（2026-10-10 錦見さん） */
  .orb-labels{display:none}
  .intro-copy{min-height:100svh;padding:120px var(--gut) 40px}
  .ic-body p{font-size:15px}
  /* スマホは1行が短く、PC の行で区切ると「ん。」のような1文字だけの行ができる。
     段落ごとに流し込み、行ごとに出す動きの代わりに本文全体をふわっと出す */
  .ic-body p{display:inline}
  .ic-body .ic-line>span{display:inline;transform:none}
  .ic-body .ic-gap::before{content:"";display:block;height:1.2em}
  /* 段落の間の改行が空白として出ないよう、包みの文字の大きさを0にする（本文は p で15px） */
  .ic-body{font-size:0;opacity:0;transition:opacity 1.2s ease .3s}
  .intro-copy.in .ic-body{opacity:1}
  .nums{padding:56px var(--gut) 20px}
  .nb-grid{margin-top:40px}
  .nb-card{height:260px}
  .nb-txt{left:22px;bottom:20px}
  .req-b{padding:100px 8px 120px}
  .req-b-panel{padding:8px}
  .req-b-txt{padding:40px 24px 44px}
  .req-b-list li{grid-template-columns:40px 1fr;padding:22px 0}
  .req-b-list b{font-size:18px}
  .req-b-list small{font-size:14px}
  .req-b-list em{font-size:15px}
  /* 「について」で折り返さないよう、字と矢印の間を詰めて1行に収める */
  .req-b-philo{gap:12px;padding-left:18px;font-size:14px;letter-spacing:.04em}
  .fv{padding-top:50px;padding-bottom:120px}
  .fv .grid{grid-template-columns:1fr}
  .intro{text-align:left;font-size:16px}
  .big{height:460px}.tall{height:380px}
  .nm-txt{left:20px;right:20px;bottom:22px}.nm-day{font-size:12px;margin-top:14px}.nm-btns{margin-top:20px}
  .nx-qa{padding:24px}.nx-qa-list{left:24px;right:24px;bottom:76px}.nx-qa-list li{font-size:14px;padding:14px 0}.nx-qa-more{left:24px;bottom:26px}
  .panel-dark{margin:0 8px;padding:8px 8px 100px}
  .strip{grid-template-columns:1fr 1fr}.strip .ph:last-child{display:none}.strip .ph{height:300px}
  .msg-head{padding:140px 24px 40px}
  .feature .txt{padding:36px 26px}
  .feature h3{font-size:22px}
  .report li a{grid-template-columns:90px 1fr 32px;row-gap:6px}
  .report li a .t{grid-column:1/3}
  .report li a .arrow{grid-row:1/3;grid-column:3}
  .report .more{grid-column:1}
}
/* スマホ：常に「● Menu」。押すとカプセルが下に伸びて項目が並ぶ */
@media (max-width:768px){
  .gn{padding-top:24px}
  .gn-inner{gap:30px;padding:8px 24px 8px 8px}
  .gn-nav{display:none}
  .gn-list{position:absolute;top:100%;left:50%;translate:-50% 0;z-index:1;width:100%;display:flex;flex-direction:column;padding:8px 20px 20px;pointer-events:none}
  /* スマホのメニュー：フッターと同じく番号付き。英字を左に、日本語を右端に小さく（2026-10-11） */
  .gn-list a{opacity:0}
  .gn-list .gn-l{display:grid;grid-template-columns:28px 1fr auto;align-items:baseline;gap:6px;padding:15px 2px;font-size:17px;font-weight:500;letter-spacing:.01em;border-bottom:1px solid rgba(255,255,255,.18)}
  .gn.-light .gn-list .gn-l{border-bottom-color:rgba(0,0,0,.12)}
  .gn-l em{font-style:normal;font-weight:300;font-size:11px;opacity:.55}
  .gn-l small{font-family:var(--ja);font-weight:400;font-size:11px;letter-spacing:.04em;opacity:.55}
  /* Join us と Contact は、いちばん下に横並びのボタン。Contact は塗りつぶし */
  .gn-l-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
  .gn-list .gn-l-btn{display:flex;align-items:center;justify-content:center;height:48px;border-radius:10px;border:1px solid currentColor;font-size:14px;font-weight:600}
  .gn-list .gn-l-btn.is-fill{background:#fff;border-color:#fff;color:#292929}
  .gn.-light .gn-list .gn-l-btn.is-fill{background:#292929;border-color:#292929;color:#fff}
  .gn.is-open .gn-list{pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .fade{opacity:1;transform:none}
  .inf-band,.inf-lo{opacity:1;transform:none}
  .orb{stroke-dashoffset:0;stroke-dasharray:none}.orb-dot{opacity:1}
  .ic-line>span{transform:none}
  .hd-line>span::after{display:none}
  .ic-body{opacity:1}
}

/* ---------- スマホの読みやすさの調整（2026-10-11。PC は変えない） ---------- */
.nw{white-space:nowrap}
/* スマホのときだけ効く改行 */
br.sp{display:none}
@media (max-width:760px){br.sp{display:inline}}
/* PC のときだけ出す言葉（スマホでは短くする） */
@media (max-width:760px){.pc-only{display:none}}
/* 社名の「株式会社」など。折り返さないためだけの囲みなので、見た目は周りと同じにする */
u.co{text-decoration:none;font:inherit;color:inherit;letter-spacing:inherit}
@media (max-width:760px){
  /* 灰色の小さな文字は、明るい地では少し濃く（コントラスト比 4.5 以上）。濃い面の上では明るめの灰色にする */
  :root{--mute:#6b6b6b}
  .ftr,[data-dark],.panel-dark,.req-b-panel,.req-b-card,.news,.slot,.feature,.ab-philo-panel,.ev-next-card,.mb-list.is-on,.ev-stage.is-dark .ev-sched{--mute:#9a9a9a}
  /* フッター：メニュー → Join us／Contact のカード → プライバシーポリシーとコピーライト の順に（ページの終わりがわかるように） */
  .ft-body{flex-direction:column}
  .ft-cnt{display:contents}
  .ft-nav{order:1}
  .ft-cards{order:2}
  .ft-foot{order:3;margin-top:0}
  /* About の下のボタン2つは、スマホでも1行に並べる（文字を少し小さく、矢印の箱を細く） */
  .nums-btns{flex-wrap:nowrap;gap:8px}
  .nums-btns .btn{flex:1 1 auto;justify-content:space-between;gap:10px;height:48px;padding-left:14px;font-size:13px;letter-spacing:.04em}
  .nums-btns .btn i{width:40px}
  /* 最初の画面：スマホは高さを7割にして、∞のすぐ下に大きな INFINITY が来るようにする（縦長の画面で間が空きすぎないように） */
  .hero{height:70svh;min-height:0}
  /* Join us／Contact のカードは、スマホでは縦を縮める（画面の高さを取りすぎないように） */
  .ft-card{height:132px}
  .ft-card-t{left:24px;bottom:20px;gap:6px}
  .ft-card-t .en{font-size:28px}
  .ft-card-t .ja{font-size:13px}
  .ft-card-arrow{right:22px;bottom:24px}
}