@charset "utf-8";
/* ============================================================
   cochi 採用ハブ（cochi.mykino.jp トップ）— hub.css
   2026-08-20

   役割：「どの働き方が合うか」をAIと話しながら決めてもらい、
        3職種のLPへ送り出す1枚。応募フォームは置かない（各LPが受ける）。

   ★配色・書体は現行LPの tokens.css をそのまま使う（値を作らない）。
   ★3職種のボタンは常時見えていること。これが最優先の要件。
     v8で「CTA表示100%・クリック0」になった原因の1つが、チャットのFABが
     CTAを覆っていたこと。今回は覆わない構造にする。
   ============================================================ */

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
html,body{ height:100%; }
body{
  background:var(--bg,#fffdf7);
  color:var(--ink,#2b2620);
  font-family:var(--ff,'Noto Sans JP',system-ui,sans-serif);
  font-size:15px;
  line-height:1.9;
  /* 日本語は語の途中で割らない。
     overflow-wrap:anywhere は「どこでも折る」指定で禁則（line-break:strict）を
     打ち消してしまうので置かない。長いURL等は個別に対処する。 */
  word-break:normal;
  line-break:strict;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* ============================================================
   3職種LPの額縁（.col-l / .col-r / .fbtn 等）の基本ルール
   components.css / pages.css から**額縁に関わる分だけ**抜き出したもの。
   丸ごと読み込むとLPのブロック用スタイル（b / small / li 等）が
   ハブのマークアップに当たって崩れる（実測：職種ボタンが白い箱に割れた）。
   ============================================================ */
charset "utf-8";
/* ============================================================
   cochi 採用LP v11 — pages（骨格・FV・3ゾーン）

   ★中身は現行本番 cochi.mykino.jp のCSSをそのまま引き継いだもの。
     岩田さん指示「デザインは現行LPのまま」（2026-08-19）。
     LIM標準の素CSS4分割に合わせて切り分けただけで、値は書き換えていない。
   ============================================================ */

/* ===== 骨格：スマホ＝1カラム ===== */
.stage{display:block;}
.col-c{padding-bottom:var(--bar);}
/* ヘッダー（スマホ＝コンパクト固定） */
.col-l{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px var(--pad);background:rgba(255,253,247,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);}
/* ヘッダーロゴ：現行サイトと同じ明朝ワードマーク（枠線なし・2行／RECRUITは金色） */
.logo{font-family:"Hiragino Mincho ProN","Yu Mincho",var(--fs),serif;font-size:13px;font-weight:400;
  letter-spacing:.2em;line-height:1.5;color:#3a2e26;text-decoration:none;cursor:pointer;}
.logo span{display:block;font-size:9.5px;letter-spacing:.24em;color:#8a6a3c;margin-top:1px;}
/* ヘッダー左：ワードマークと職種バッジを横並びにする。
   align-items:stretch なので、四角の高さはロゴの高さにそのまま揃う（2026-08-20）。 */
.hd-left{display:flex;align-items:stretch;gap:10px;min-width:0;}
.jobtag{display:inline-flex;align-items:center;flex:none;
  padding:0 9px;border:1px solid #8a6a3c;border-radius:2px;
  font-family:var(--ff);font-size:11px;font-weight:500;letter-spacing:.06em;
  line-height:1;color:#8a6a3c;white-space:nowrap;}
.l-mid,.l-foot{display:none;}
/* PCのみ表示 */
.col-l .pill{display:none;}
/* スマホは下部固定バーのCTAに一本化 */
/* Instagram：スマホ＝ヘッダー右上のアイコン（円なし・アイコンのみ） */
/* Instagram はアイコンのみ。タップ領域を44px以上にする（2026-08-19） */
.ig-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  color:var(--sage);text-decoration:none;}
.ig-btn svg{width:26px;height:26px;}
/* Instagram：PC用ボタンはデフォルト非表示 */
.ig-fixed{display:none;}
/* 下部固定バー（スマホ＝インデックス＋CTA） */
.col-r{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px var(--pad) calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,253,247,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);}
/* 2026-08-02 追加：応募のハードルを外す一行。PERSONA.md の3ペルソナ共通の壁
   「見学＝面接だと思っている」「今の職場にバレたくない」を、CTAに触れる直前で解除する。
   flex-wrap + order:-1 でボタン行の上に1行だけ載せる（バーの高さは約20px増える）。 */
.fnote{flex:1 0 100%;order:-1;margin:0 0 6px;text-align:center;font-family:var(--fs);
  font-size:11.5px;line-height:1.5;color:var(--ink-mute);letter-spacing:.02em;}
/* 下部固定バーの3ボタン（応募／見学／LINE質問） */
.fbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  font-family:var(--ff);font-weight:700;font-size:12.5px;letter-spacing:.01em;line-height:1.2;
  min-height:46px;border-radius:100px;text-align:center;padding:6px 4px;transition:.2s;}
.fbtn.apply{background:var(--cta);color:#fff;border:1px solid var(--cta);}
.fbtn.apply:active{background:var(--cta-d);}
.fbtn.visit{background:transparent;color:var(--sage);border:1px solid var(--sage);}
.fbtn.visit:active{background:var(--sage-pale);}
.fbtn.line{background:var(--line-g);color:#fff;border:0;}
.fbtn.line:active{background:var(--line-g-d);}
.fbtn svg{width:1.25em;height:1.25em;flex:none;fill:currentColor;}
.fbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.l-visual{display:contents;}
/* スマホ：ロゴだけをヘッダー直下に置く */
.l-img{display:none;}
/* ============================================================
   PC左パネル＝FVの動画（2026-08-19 岩田さん訂正・3職種とも）

   もともとは写真（.l-img の背景画像）。FVが焼き込み画像になったので、
   動画はこちらへ移した。スマホでは左パネル自体を出さないので、
   動画も作らない（JS側で幅901px以上のときだけ生成している）。
   文字の可読性を確保するスクリム（.l-visual::after）はそのまま効く。
   ============================================================ */
.l-vidhost{ display:none; }


/* ── スマホ（〜900px）──────────────────────────────────────
   3職種LPの額縁（.col-l / .col-r）はスマホでは使わない。
   画面いっぱいを縦3段（ヘッダー／職種ボタン／チャット）にして、
   **チャットの高さを最大化する**（岩田さん指示 2026-08-20）。
   ★必ず max-width で囲む。囲まないと .stage の grid（1fr 392px 1fr）を
     PCでも殺してしまい、左パネルが細くなる（実測：517px → 278px）。 */
@media(max-width:900px){
  body.t-hub .col-l,
  body.t-hub .col-r{ display:none; }
  body.t-hub .stage{ display:block; grid-template-columns:none; max-width:none; }
  body.t-hub .col-c{
    display:flex;
    flex-direction:column;
    height:100dvh;
    max-width:560px;
    margin-inline:auto;
    padding:0;
    background:var(--bg,#fffdf7);
    border-inline:1px solid var(--line,#e2dbcb);
  }
}
@supports not (height:100dvh){
  @media(max-width:900px){ body.t-hub .col-c{ height:100vh; } }
}

/* ── ヘッダー（3職種LPと同じワードマーク）────────────────── */
.hd{
  flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px var(--pad,20px);
  background:rgba(255,253,247,.96);
  border-bottom:1px solid var(--line,#e2dbcb);
}
.logo{
  /* タップ領域を44px確保する。見た目は変えず padding だけで足す
     （自走QAで 35px と出た。3職種LPから引き継いだ寸法をそのまま使っていたため） */
  display:inline-flex; flex-direction:column; justify-content:center;
  min-height:44px; padding:4px 2px;
  font-family:"Hiragino Mincho ProN","Yu Mincho",var(--fs,'Noto Serif JP',serif),serif;
  font-size:13px; font-weight:400; letter-spacing:.2em;
  line-height:1.5; color:#3a2e26; text-decoration:none;
}
.logo span{
  display:block; font-size:9.5px; letter-spacing:.24em;
  color:#8a6a3c; margin-top:1px;
}
.ig{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none;
  color:var(--sage,#5b6b52); text-decoration:none;
}
.ig svg{ width:26px; height:26px; }

/* ── 職種ボタン（常時表示・ここが最優先）──────────────────── */
.jobs{
  flex:none;
  padding:14px var(--pad,20px) 12px;
  background:var(--sage-pale,#e8ece2);
  border-bottom:1px solid var(--line,#e2dbcb);
}
.jobs > p{
  font-size:12px; line-height:1.8; color:var(--ink-soft,#5d5548);
  text-align:center; margin-bottom:10px;
}
.jobs ul{ list-style:none; display:grid; gap:8px; }
/* ★塗りにする理由（2026-08-20 実測）
   当初は「白カード＋セージの細枠」だったが、面（セージ淡 #e8ece2）と白カードの
   コントラストが 1.20 しかなく、押せるものに見えなかった。
   セージ濃で塗ると 面との差 4.78／白文字 7.35 になり、ボタンとして立つ。 */
.jobs a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:56px; padding:11px 14px;
  background:#4c5a45; border:1px solid #3f4a3c;
  border-radius:3px; text-decoration:none;
  box-shadow:0 1px 0 rgba(0,0,0,.10);
  transition:background .2s;
}
.jobs a:hover{ background:#3f4a3c; }
.jobs a:focus-visible{ outline:3px solid var(--cta,#8a4b2a); outline-offset:2px; }
.jobs b{
  font-family:var(--fs,'Noto Serif JP',serif); font-weight:600; font-size:16px;
  letter-spacing:.06em; line-height:1.5; color:#fff;
  flex:none;
}
.jobs small{
  font-size:11.5px; line-height:1.65; color:#e3e8df;
  letter-spacing:.02em; text-align:right;
}
/* 押せることを形でも示す（色だけに頼らない） */
.jobs a::after{
  content:""; flex:none; width:7px; height:7px;
  border-top:2px solid #cfd8c9; border-right:2px solid #cfd8c9;
  transform:rotate(45deg); margin-left:2px;
}

/* ── チャット（埋め込み・常に開いている）───────────────────── */
.chat{
  flex:1 1 auto;
  display:flex; flex-direction:column;
  min-height:0;                      /* これが無いと子のスクロールが効かない */
}
.chat__head{
  flex:none;
  display:flex; align-items:center; gap:8px;
  padding:9px var(--pad,20px);
  border-bottom:1px solid var(--line,#e2dbcb);
  background:var(--bg,#fffdf7);
}
.chat__head .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--line-g,#3b7a52); flex:none;
}
.chat__head .nm{
  font-family:var(--fs,'Noto Serif JP',serif); font-size:13.5px; font-weight:600; letter-spacing:.06em;
}
.chat__head .nm small{
  font-family:var(--fe,'EB Garamond',serif); font-style:italic; font-size:11px;
  color:var(--ink-mute,#6b6252); margin-left:6px; letter-spacing:.04em;
}
.chat__head .tag{
  margin-left:auto; font-size:11px; letter-spacing:.12em;
  color:var(--sage,#5b6b52); border:1px solid var(--sage,#5b6b52);
  border-radius:2px; padding:2px 7px; line-height:1.6;
}

.chat__body{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:16px var(--pad,20px) 6px;
  display:flex; flex-direction:column; gap:10px;
  /* 会話アプリと同じで、下から積む。上詰めにすると最初の挨拶1件だけのとき
     下に大きな空白ができ、壊れているように見える（実測で290px空いた）。 */
  justify-content:flex-end;
  scroll-behavior:smooth;
}
.msg{
  max-width:86%;
  padding:11px 14px;
  border-radius:3px;
  font-size:14px; line-height:1.95;
}
.msg.bot{ align-self:flex-start; background:#fff; border:1px solid var(--line,#e2dbcb); }
.msg.me{ align-self:flex-end; background:var(--sage,#5b6b52); color:#fff; }
.msg strong{ font-weight:700; }
.msg a{ color:var(--sage,#5b6b52); text-underline-offset:3px; }
.msg.me a{ color:#fff; }

/* 返答の中のリンクはボタンに昇格させる（cochi-chat.js と同じ作法） */
.cta-row{ display:grid; gap:8px; margin-top:10px; }
.cbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:11px 16px;
  border-radius:3px; text-decoration:none;
  font-size:14px; font-weight:700; letter-spacing:.04em;
}
/* ★文字色は .msg a より詳細度を上げて指定する（2026-08-20 実測で事故）
   `.msg a{color:var(--sage,#5b6b52)}` は詳細度(0,1,1)で、`.cbtn-apply{color:#fff}`(0,1,0)に勝つ。
   その結果、茶色の応募ボタンにセージ緑の文字が乗って読めなくなっていた。
   ボタンは本文リンクとは別物なので、.msg 配下でも必ず白で塗り切る。 */
.msg a.cbtn,
.cbtn{ color:#fff; text-decoration:none; }
.msg a.cbtn-line,
.cbtn-line{ background:var(--line-g,#3b7a52); color:#fff; border:1px solid var(--line-edge,#05943f); }
.cbtn-line:hover{ background:var(--line-g-d,#316b46); }
.cbtn-line svg{ width:18px; height:18px; fill:currentColor; flex:none; }
.msg a.cbtn-apply,
.cbtn-apply{ background:var(--cta,#8a4b2a); color:#fff; }
.cbtn-apply:hover{ background:var(--cta-d,#733c20); }

.typing{
  align-self:flex-start;
  display:inline-flex; gap:4px; align-items:center;
  padding:13px 15px; background:#fff; border:1px solid var(--line,#e2dbcb); border-radius:3px;
}
.typing span{
  width:6px; height:6px; border-radius:50%; background:var(--ink-mute,#6b6252);
  animation:blink 1.2s infinite;
}
.typing span:nth-child(2){ animation-delay:.2s; }
.typing span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,80%,100%{opacity:.25} 40%{opacity:1} }
@media(prefers-reduced-motion:reduce){
  .typing span{ animation:none; opacity:.55; }
  .chat__body{ scroll-behavior:auto; }
}

/* 質問の候補 */
.sugg{
  flex:none;
  display:flex; gap:7px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:8px var(--pad,20px);
  scrollbar-width:none;
}
.sugg::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; min-height:38px;
  padding:7px 13px;
  background:#fff; border:1px solid var(--line,#e2dbcb); border-radius:999px;
  font-family:var(--ff,'Noto Sans JP',system-ui,sans-serif); font-size:12.5px; line-height:1.7; color:var(--ink-soft,#5d5548);
  white-space:nowrap; cursor:pointer;
}
.chip:hover,.chip:focus-visible{ border-color:var(--sage,#5b6b52); color:var(--ink,#2b2620); }

/* 入力欄 */
.form{
  flex:none;
  padding:8px var(--pad,20px) calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line,#e2dbcb);
  background:var(--bg,#fffdf7);
}
.irow{ display:flex; gap:8px; align-items:center; }
.inp{
  flex:1 1 auto; min-width:0; min-height:48px;
  padding:11px 14px;
  background:#fff; border:1px solid var(--line,#e2dbcb); border-radius:3px;
  font-family:var(--ff,'Noto Sans JP',system-ui,sans-serif); font-size:16px;   /* 16px未満だとiOSが拡大する */
  line-height:1.6; color:var(--ink,#2b2620);
}
.inp:focus-visible{ outline:2px solid var(--sage,#5b6b52); outline-offset:1px; }
.ibtn{
  /* button は既定で font-family を継承しない。指定しないとUA既定の欧文書体になる（実測） */
  font-family:inherit;
  flex:none; width:48px; height:48px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line,#e2dbcb); border-radius:3px;
  background:#fff; color:var(--ink-soft,#5d5548); cursor:pointer;
}
.ibtn:hover,.ibtn:focus-visible{ border-color:var(--sage,#5b6b52); color:var(--sage,#5b6b52); }
.ibtn.is-rec{ background:var(--sage,#5b6b52); color:#fff; border-color:var(--sage,#5b6b52); }
.send{
  font-family:inherit;
  flex:none; width:48px; height:48px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:3px;
  background:var(--sage,#5b6b52); color:#fff; cursor:pointer;
}
.send:hover{ background:#4c5a45; }
.send:disabled{ opacity:.5; cursor:default; }
.send svg,.ibtn svg{ width:20px; height:20px; }

/* 「中川駅 徒歩2分」のような塊を語の途中で折らない（実測で「徒歩2／分」に割れた） */
.nw{ display:inline-block; white-space:nowrap; }

.visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}


/* ── PC（901px〜）─────────────────────────────────────────
   左パネルは3職種LPと**完全に共通**（FV動画＋ワードマーク＋One at a Time.）。
   右レールは**LINEへの誘導のみ**（岩田さん指示 2026-08-20）。
   応募・見学は各職種LPが受けるので、ここには置かない。

   ★ここは components.css から「額縁に関わる規則だけ」を抜き出したもの。
     components.css を丸ごと読み込むと、LPのブロック用スタイル（b / small / li 等）が
     ハブのマークアップに当たって崩れる（実測：職種ボタンが白い箱に割れた）。
   ============================================================ */
@media(min-width:901px){
.stage{display:grid;grid-template-columns:1fr 392px 1fr;max-width:1440px;margin:0 auto;align-items:start;}
.col-c{padding-bottom:0;border-left:1px solid var(--line);border-right:1px solid var(--line);}
/* 左：固定列。画面いっぱいの写真の上に、ロゴ・タグライン・所在地を重ねる */
  .col-l{position:sticky;top:0;height:100vh;flex-direction:column;justify-content:center;align-items:stretch;
    padding:26px 0 34px;background:transparent;backdrop-filter:none;border-bottom:none;overflow:hidden;}
/* 写真は列全体に敷く。素材が縦位置（1080×1920）で列の縦横比とほぼ一致するため、
     中央基準のまま二人が収まる */
  .l-visual{display:block;position:absolute;inset:0;z-index:0;}
.l-img{display:block;width:100%;height:100%;border:0;
    background-image:url("/_lp2026/img/staff-portrait.jpg");
    background-size:cover;background-position:50% 42%;background-repeat:no-repeat;background-color:#3f4a3c;}
/* 文字の可読性を確保するスクリム（上下を締め、中央は写真を見せる） */
  .l-visual::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(26,30,24,.52) 0%,rgba(26,30,24,.30) 26%,rgba(26,30,24,.58) 62%,rgba(26,30,24,.86) 100%);}
/* PCは映像の上に載るため白に。枠線なし。
     RECRUIT も白（2026-08-19）。左パネルが FV.mp4 になり、この位置が明るいフレームでは
     金色（rgb 138,106,60）とのコントラストが 1.5:1 まで落ちて読めなくなるため。
     スマホ側は背景がクリームなので金色のまま。 */
  /* 位置決めは箱（.hd-left）側に移す。ロゴ単体を絶対配置すると
     職種バッジと高さを揃えられないため（2026-08-20）。 */
  .hd-left{position:absolute;top:26px;left:26px;z-index:2;align-items:stretch;gap:12px;}
.logo{position:static;padding:0;color:#fff;background:none;
    text-shadow:0 1px 10px rgba(0,0,0,.55);}
.logo span{color:#fff;}
/* 映像の上に載るので、枠と文字を白に */
  .jobtag{border-color:rgba(255,255,255,.8);color:#fff;font-size:11.5px;padding:0 11px;
    text-shadow:0 1px 10px rgba(0,0,0,.55);}
.l-mid{position:relative;z-index:2;display:flex;flex:1;min-height:0;flex-direction:column;
    align-items:center;justify-content:flex-end;gap:16px;text-align:center;padding:24px 34px 8px;margin-bottom:100px;}
.l-title{font-family:var(--fc);font-style:normal;font-size:clamp(44px,4.6vw,62px);line-height:1.08;letter-spacing:.01em;
    color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.6);}
.l-sub{font-family:var(--fe);font-style:italic;font-size:14px;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.65);}
.l-sub b{font-family:var(--ff);font-style:normal;font-weight:700;font-size:13px;letter-spacing:.06em;
    color:#fff;display:block;margin-top:6px;line-height:1.95;text-shadow:0 1px 12px rgba(0,0,0,.75);}
.l-foot{position:relative;z-index:2;display:block;padding:0 34px;font-size:10.5px;color:#fff;
    letter-spacing:.06em;line-height:2;text-align:center;text-shadow:0 1px 10px rgba(0,0,0,.8);}
.col-l .pill{display:none;}
/* Instagram：PCは左パネル（col-l）の右上に配置（ロゴと左右対称） */
  .ig-btn{display:none;}
/* Instagram はアイコンのみ。文字ラベルも●枠も置かない（2026-08-19 岩田さん指示）。
     枠が無くなる分、動画の上でも見えるよう drop-shadow で輪郭を作る。
     見た目は素のアイコンだが、タップ領域は44px角のまま確保する。 */
  .ig-fixed{display:inline-flex;align-items:center;justify-content:center;
    position:absolute;top:26px;right:26px;z-index:3;
    width:44px;height:44px;padding:0;
    border:0;background:none;border-radius:0;
    color:#fff;text-decoration:none;
    filter:drop-shadow(0 1px 6px rgba(0,0,0,.55));transition:opacity .25s;}
.ig-fixed svg{width:24px;height:24px;flex:none;}
.ig-fixed:hover{opacity:.72;}
/* 右：固定インデックス列 */
  .col-r{position:sticky;top:0;left:auto;right:auto;bottom:auto;height:100vh;flex-direction:column;flex-wrap:nowrap;
    align-items:center;justify-content:center;gap:12px;padding:44px 34px;background:transparent;backdrop-filter:none;border-top:none;}
.fbtn{flex:none;width:min(190px,100%);min-height:50px;font-size:14px;padding:12px 16px;}
/* 2026-08-02 .fnote はモバイルで flex:1 0 100% にしているが、PCは縦組みの列なので
     そのままだと列幅が100%に膨らみボタンが画面外へ押し出される（実測で確認）。ここで打ち消す。 */
  .fnote{flex:none;width:min(190px,100%);margin:0 0 2px;font-size:11px;text-align:center;}
.l-vidhost{
    display:block; position:absolute; inset:0; z-index:0;
    background:#3f4a3c;
  }
.l-vid{
    display:block; width:100%; height:100%;
    object-fit:cover; object-position:50% 42%;
  }
}

/* 額縁を出す／中央列をハブ用に戻す */
@media(min-width:901px){
  body.t-hub .col-l,
  body.t-hub .col-r{ display:flex; }
  /* LPの .stage は align-items:start（ブロックが上から流れる前提）。
     ハブの中央列はチャットで画面を埋めるので stretch に戻す。 */
  body.t-hub .stage{ align-items:stretch; min-height:100dvh; }
  body.t-hub .col-c{
    display:flex; flex-direction:column;
    height:100dvh; max-width:none; margin-inline:0;
    padding:0; border-inline:1px solid var(--line,#e2dbcb);
    overflow:hidden;
  }
  /* 中央列のヘッダーは出さない（ワードマークは左パネルにある） */
  body.t-hub .hd{ display:none; }
  /* 右レールはLINE1本だけなので、上下中央に置く */
  body.t-hub .col-r{ justify-content:center; gap:14px; }
}