@charset "utf-8";
/* =========================================================
   フォント（納品物に同梱。外部CDNは使用しない）
   使用文字のみを抽出したサブセット。ライセンスは OFL.txt を参照。
   ========================================================= */
@font-face{
  font-family:"Inter";
  src:url("../fonts/Inter-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/Inter-ExtraBold.woff2") format("woff2");
  font-weight:800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Noto Sans JP";
  src:url("../fonts/NotoSansJP-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
/* 地域タブの非選択だけに使う Regular。
   収録は「東京」「福岡」の4文字のみ（1.4KB）。
   unicode-range で範囲を絞っているので、他の本文には影響しない。 */
@font-face{
  font-family:"Noto Sans JP";
  src:url("../fonts/NotoSansJP-Regular-tabs.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+6771,U+4EAC,U+798F,U+5CA1;
}
@font-face{
  font-family:"Noto Sans JP";
  src:url("../fonts/NotoSansJP-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
/* =========================================================
   西日本FH INNOVATION MEETUP 告知LP
   Figma「西日本FH LP」TOKYO / FUKUOKA を正として実装

   東京版 = body.tokyo（既定）／福岡版 = body.fukuoka
   ========================================================= */

:root{
  color-scheme:light only;

  --white:#FFFFFF;
  --ink:#1A1A1A;
  --sub:#585858;
  --line:#DEDEDE;
  --bg-grey:#F7F7F7;

  /* 東京版。先方指定の FHブルー RGB(0,26,112)。
     暗い紺のため、ベタ面の上は白文字（15.20:1）。 */
  --key:#001A70;
  --on-key:#FFFFFF;
  --head:#001A70;
  --card-bg:#EDEFF5;   /* キーカラーを7%で薄めたもの。白地との差1.15 */
  --btn-from:#33C9FF;
  --btn-to:#1A5BFF;
  --btn-text:#FFFFFF;

  --font-en:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-ja:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  --font-mix:"Inter","Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;

  --maxw:1200px;
  --gutter:clamp(20px,6.95vw,100px);
  /* アニメーションの長さ。
     ホバーなどの短い反応は --dur で統一する。
     ヒーローと見出しのせり上がりは、長さの差そのものが
     滑らかさを作っているため、個別の値を持つ。 */
  --header-h:80px;
  --dur:400ms;
  /* ホバーの色の変化は、上の曲線（easeOutQuint）だと
     立ち上がりが急すぎて最初の一瞬でほぼ最終色まで飛ぶ。
     操作の反応だけは、立ち上がりを抑えた曲線で短く動かす。 */
  --dur-ui:200ms;
  --ease-ui:cubic-bezier(.4,0,.2,1);
  --dur-panel:720ms;    /* ヒーローの面が開く */
  --dur-figure:900ms;   /* 図版が現れる */
  --dur-rise:620ms;     /* 面の中の文字が上がる */
  --dur-reveal:700ms;   /* セクション見出しのせり上がり */
  --ease:cubic-bezier(.22,1,.36,1);
  --sec-gap:clamp(64px,8vw,96px);
  --head-gap:clamp(24px,3vw,32px);
  --radius:8px;
  --focus:#1A1A1A;
}
body.fukuoka{
  /* 福岡版。先方指定の FHイエロー RGB(242,169,0)。
     ベタ面の上は白文字（デザイン優先の判断）。
     対比は 2.01:1 で目安を下回る。社内資料に記載済み。 */
  --key:#F2A900;
  --on-key:#FFFFFF;
  --head:#F2A900;
  --card-bg:#FDF5E0;   /* キーカラーを12%で薄めたもの。白地との差1.09 */
  --btn-from:#FFA05C;
  --btn-to:#F2A900;
  --btn-text:#FFFFFF;
}

/* --- リセット --- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;background:#FFFFFF}
body{margin:0;background:#FFFFFF;color:var(--ink);
  font-family:var(--font-ja);font-weight:500;font-size:1rem;line-height:1.9;
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,p,dl,dd,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
:lang(en){font-family:var(--font-en)}

/* アートボード1400 / コンテンツ1200 / 左右余白100。
   コンテンツ幅を1200pxそのものにするため、padding は幅の外側で確保する。 */
/* 慣性スクロール時、中身は position:fixed で浮くため、
   ルート要素の背景に頼らず、ラッパーと各セクションに実体として白を塗る。
   これがないと、ブラウザ側の自動ダークモードで背後が黒く置き換わる。 */
[data-scroll-content],
body > div[data-scroll-content]{background:#FFFFFF!important}
/* 追従ヘッダーのぶん、中身を下げる。高さは幅で変わるので変数で受ける。 */
[data-scroll-content]{padding-top:var(--head-total,80px);
  /* 器が画面より広がると、固定要素まで引きずられる。
     横だけを止める。縦を切ると要素が欠ける。 */
  max-width:100%;overflow-x:clip;overflow-y:visible}
main{background:#FFFFFF}
.hero{background:#FFFFFF}
.section,.about,.contest,.timetable,.benefits,.outline,.flow,.schedule{background:#FFFFFF}
.section{position:relative}

/* コンテンツ幅は常に --maxw を保つ。
   border-box にすると、vw基準の左右余白が増えるぶん内側が痩せ、
   画面を広げたのに行数が増える逆転が起きる。 */
.container{max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);box-sizing:content-box}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:where(a,button,[tabindex]):focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
#main:focus{outline:none}
.hero :focus-visible,.site-footer :focus-visible{outline-color:var(--on-key)}
.skip-link{position:absolute;left:12px;top:-120px;z-index:200;background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:4px;font-weight:700;text-decoration:none}
.skip-link:focus{top:12px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;
    animation-iteration-count:1!important;scroll-behavior:auto!important}
  .section__en > span,.section__ja > span{transform:none!important}
}

/* --- ボタン ---
   h48 / padding 左40 右5 / gap28 / 外周 #000 1px /
   グラデーションは変形行列 [[1,0,0],[0,.5,.25]] = 左上→右下の斜め /
   アイコンは#101010の円に線の矢印（stroke 1.84） */
/* 白地にキーカラーの線。グラデーションは使わない。
   キーカラーのベタ面に載るときは線を黒・文字を黒に切り替える。 */
/* 高さ48・アイコン40・線1px。
   上下の空き (48-40-1*2)/2 = 3px。右もこれに揃える。 */
.btn{display:inline-flex;align-items:center;gap:23px;white-space:nowrap;
  height:48px;min-height:48px;padding:0 3px 0 40px;border-radius:999px;text-decoration:none;
  background:#FFFFFF;color:var(--key);
  border:1px solid var(--key);box-sizing:border-box;
  font-family:var(--font-ja);font-weight:700;font-size:.9375rem;line-height:1.5;letter-spacing:.004em;
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:box-shadow var(--dur-ui) var(--ease-ui),
    background-color var(--dur-ui) var(--ease-ui),color var(--dur-ui) var(--ease-ui)}
/* ホバー: 色を反転する。地をキーカラー、文字を地の色にする。
   影も合わせて出す（Figma の DROP_SHADOW 0 0 blur10 #000000 10%）。
   指で触る端末では反転させない（押した状態が残って見えるため）。 */
.btn:hover,.btn:focus-visible{
  background:var(--key);
  color:var(--on-key);
  box-shadow:0 0 10px rgba(0,0,0,.1)}
.btn:hover .btn__label,
.btn:focus-visible .btn__label{color:var(--on-key)}
/* アイコンの丸は、反転時に地の色へ抜く */
.btn:hover .btn__icon,
.btn:focus-visible .btn__icon{background:var(--on-key);color:var(--key)}
/* ベタ面の上では線のみ黒。文字はキーカラーで統一する。 */
.hero .btn,.site-footer .btn{border-color:#000000}
/* 福岡のキーカラーは明るいため、白地の上でも文字が読めない（2.01:1）。
   ボタンの文字は本文色にして判読性を確保する。線はキーカラーのまま。 */
/* ボタンは白地なので、キーカラーだと読めない（2.01:1）。
   通常時の文字は本文色。反転時は --on-key が効く。 */
body.fukuoka .btn,
body.fukuoka .btn .btn__label{color:var(--ink)}
body.fukuoka .btn:hover,
body.fukuoka .btn:hover .btn__label,
body.fukuoka .btn:focus-visible,
body.fukuoka .btn:focus-visible .btn__label{color:var(--on-key)}
/* 福岡は --on-key が本文色（#1A1A1A）なので、
   反転時も自動的に読める色になる。個別の指定は要らない。 */
/* ぼかし10pxの影が欠けないようにする。
   切り抜きを外すだけでは足りない。セクションは position:relative を持つため、
   後続セクションの背景がボタンの影の上に重なって下側を覆う。
   ボタン自身を重なり順の上に出して、影が背景に隠れないようにする。 */
.about__cta,.outline__cta,.contest__cta,.contact__cta,
.site-footer__btn,.hero__cta,.site-header__inner{overflow:visible}
.btn{position:relative;z-index:1}
/* ヘッダーは重なりの文脈を作るため、その中で前面に出す。
   CTAが2段目に来る幅では、影が下へ広がるぶんの余地も要る。 */
.site-header .btn{z-index:2}
/* CTAの影（ぼかし10px）が四方に出るよう、上下に余地を残す。
   マージンで打ち消すので、見た目の高さは変わらない。
   CTAがヘッダーにある幅（1500px以上）でのみ必要。 */
.site-header__inner{position:relative;z-index:1}
@media (min-width:768px){
  .site-header__inner{padding-block:10px;margin-block:-10px}
}

.btn__label{flex:0 0 auto;white-space:nowrap}
.btn__icon{flex:0 0 40px;width:40px;height:40px;aspect-ratio:1;border-radius:50%;
  background:#101010;color:#fff;display:grid;place-items:center}
/* 外部サイトへ移動するため、右斜め上の矢印にする */
.btn__icon svg{width:13px;height:13px;fill:none;stroke:currentColor;
  stroke-width:1.84;stroke-linecap:round;stroke-linejoin:round}
.btn:active{box-shadow:0 3px 10px rgba(0,0,0,.14)}

/* --- ヘッダー --- */
/* ヘッダーの地。品のあるスチールブルーの淡色。
   ロゴの紺文字と11.79:1、黒文字と15.78:1。ロゴの見え方に影響しない濃度。
   背景はウィンドウ幅いっぱいに伸ばし、中身だけ1400pxで中央に置く。 */
/* ヘッダーは常に画面上部に留める。
   慣性スクロールでは中身が fixed の器に入るため、
   ヘッダーはその器の外に置いてある（HTMLの構造を参照）。 */
/* 慣性スクロールの器が広がると body も広がるため、
   right:0 では画面幅を超える。画面幅を直接参照する。 */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;box-sizing:border-box;
  height:80px;display:flex;align-items:center;
  width:100%;background:#F1F4F8}
.site-header__inner{max-width:1400px;margin-inline:auto;
  padding-inline:var(--gutter);box-sizing:border-box}
/* 以前はタブがヘッダーの中央にあったため3列のグリッドにしていたが、
   タブは citybar に移した。いまヘッダーに並ぶのは左のロゴと右のCTAだけで、
   3列のままだとCTAが中央の列に入り、画面の真ん中に寄ってしまう。
   両端に寄せるだけなので flex にする。
   （メニューボタンはJSが後から足すが、出る幅ではCTAが隠れるので2つのまま） */
.site-header__inner{display:flex;align-items:center;justify-content:space-between;
  gap:24px;width:100%}
.site-header__logos{display:flex;align-items:center;gap:15px;min-width:0;flex-wrap:nowrap}
.site-header__logos img{height:31.71px;width:auto;max-width:100%}
.site-header__logos .logo-partner{height:30px}
.site-header__divider{width:1px;height:28.5px;background:#000000;flex:0 0 auto}
/* 95×40 ピル / 白地 / gap39
   非選択 = ドロップシャドウ #000 10%（blur10）
   選択中 = キーカラー1px の内側線 ＋ キーカラー90%のグロー（blur10） */
.citynav ul{display:flex;align-items:center;gap:39px}
/* 座布団の見た目は 95×40。押せる領域は上下2pxを足して44pxにする。
   白い座布団は content-box にだけ描く。こうしないと上下2pxの余白まで白くなり、
   濃い面の上に載せたときに枠線の外側へ白い縁が出る。
   枠線と影は、同じ40pxの範囲に疑似要素で描く。 */
.citynav__link{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:95px;height:44px;box-sizing:border-box;padding-block:2px;
  /* 座布団の白は ::before で描く（下の「すりガラス」を参照）。 */
  background:transparent;
  border:0;border-radius:999px;
  font-family:var(--font-ja);font-weight:400;font-size:1rem;line-height:1.6;
  color:var(--ink);text-decoration:none}
/* 1.4.1（色の使用）への対応。選択中を、色と光以外でも示す。
   ・太さ  非選択 Regular(400) / 選択中 Bold(700)
   ・下線  選択中だけキーカラーで1px引く
   下線は座布団の内側に収まるので、幅も高さも変わらない。 */
.citynav__link[aria-current="page"]{font-weight:700;
  text-decoration:underline;text-decoration-color:var(--key);
  text-decoration-thickness:1.5px;text-underline-offset:4px}
/* 座布団の白と、その裏のぼかし。
   固定表示なのでスクロール中はヒーローの文字の上に乗る。
   不透明の白だと後ろの文字が縁で切られて崩れて見えるため、
   白を80%に落としたうえで、後ろをぼかして文字の形を消す。
   要素そのものに backdrop-filter を掛けると、上下2pxの余白まで
   ぼけて縁が出るので、座布団と同じ範囲の疑似要素に掛ける。
   z-index:-1 で文字の下に敷く。ぼかしに対応しない環境では、白80%だけが効く。 */
.citynav__link::before{content:"";position:absolute;inset:2px 0;border-radius:999px;
  background:color-mix(in srgb,var(--white) 80%,transparent);
  -webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);
  z-index:-1;pointer-events:none}
.citynav__link::after{content:"";position:absolute;inset:2px 0;border-radius:999px;
  border:1px solid transparent;box-shadow:0 0 10px rgba(0,0,0,.15);pointer-events:none;
  transition:border-color var(--dur-ui) var(--ease-ui),box-shadow var(--dur-ui) var(--ease-ui)}
.citynav__link:hover::after{box-shadow:0 0 10px rgba(0,0,0,.28)}
/* 濃い面の上に載ったときは印を反転させる。
   選択中の印はキーカラーの枠線とグローだが、ヒーローの面が同じ色のため
   そのままだと溶けて見分けられない。白のグローに置き換える。
   面に重なっているかは secnav.js が判定して is-on-panel を付ける。 */
.citybar.is-on-panel .citynav__link::after{box-shadow:0 0 10px rgba(0,0,0,.35)}
.citybar.is-on-panel .citynav__link[aria-current="page"]::after{
  border-color:var(--on-key);
  box-shadow:0 0 12px 2px rgba(255,255,255,.95)}
.citybar.is-on-panel .citynav__link:hover::after{box-shadow:0 0 10px rgba(0,0,0,.5)}
.citynav__link[aria-current="page"]::after{
  border-color:var(--key);
  box-shadow:0 0 10px color-mix(in srgb,var(--key) 90%,transparent)}
@supports not (color:color-mix(in srgb,red,blue)){
  .citynav__link[aria-current="page"]::after{box-shadow:0 0 10px var(--key)}
}

/* --- ヒーロー --- */
/* 青の面をウィンドウ幅いっぱいに広げる。
   左半分をキーカラーで塗り、その上に1400pxの中身を中央で重ねる。
   分割線はウィンドウのちょうど真ん中に置く。
   地域切り替えタブも真ん中に来るため、2つの中心が揃う。
   （以前は 720:680 で、分割線が中心より20px右にずれていた） */
.hero{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  max-width:1400px;margin-inline:auto;align-items:stretch}
.hero::before{
  content:"";position:absolute;top:0;bottom:0;
  right:50%;                    /* ちょうど半分の位置から左を塗る */
  left:calc(50% - 50vw);        /* ウィンドウの左端まで */
  background:var(--key);pointer-events:none;
}
.hero__panel{position:relative;z-index:1;background:var(--key);color:var(--on-key);
  display:flex;flex-direction:column;justify-content:center;
  padding:54px clamp(24px,4.45vw,64px) 58px clamp(24px,7.37vw,106px);min-height:700px;min-width:0}
.hero__eyebrow{margin:0}
.hero__eyebrow-en{display:block;font-family:var(--font-en);font-weight:700;
  font-size:clamp(1rem,1.6vw,1.3125rem);line-height:1.6}
.hero__eyebrow-ja{display:block;font-size:clamp(.875rem,1.2vw,1rem);line-height:1.4}
.hero__host{margin-top:24px;font-size:clamp(1.0625rem,1.6vw,1.3125rem);line-height:1.2;font-weight:500}
.hero__title{margin-top:8px;font-family:var(--font-en);font-weight:700;
  font-size:clamp(2.5rem,6.43vw,5.625rem);line-height:calc(80/90);letter-spacing:-.025em}
.hero__title span{display:block;white-space:nowrap}
.hero__subtitle{margin-top:22px;font-size:clamp(1.125rem,2vw,1.625rem);line-height:1.7;font-weight:500}
.hero__date{margin-top:7px;font-family:var(--font-en);font-weight:700;
  font-size:clamp(2rem,4.2vw,3.75rem);line-height:1.2;letter-spacing:-.025em}
.hero__cta{margin-top:32px}
.hero__figure{display:flex;align-items:center;justify-content:center;min-width:0;margin:0}

/* 福岡版は左右を入れ替える。右のタブを選んでいるのに情報が左のままだと、
   切り替えたのに何も動いていないように見えるため。
   2段組みのとき（1200px以上）だけ効かせる。 */
@media (min-width:768px){
  body.fukuoka .hero__panel{order:2;
    padding-right:clamp(24px,7.37vw,106px);padding-left:clamp(24px,4.45vw,64px)}
  body.fukuoka .hero__figure{order:1}
  body.fukuoka .hero::before{left:50%;right:calc(50% - 50vw)}
}
.hero__figure img{width:100%}

/* --- セクション共通 --- */
.section{padding-top:var(--sec-gap)}
/* セクション見出しは極太。Figma で Helvetica Now Display XBold が
   指定されていた意図を、Inter Extra Bold（800）で受ける。 */
.section__heading{display:flex;align-items:flex-start;flex-wrap:wrap;gap:0;line-height:1.1;
  font-family:var(--font-en);font-weight:800;
  font-size:clamp(2.5rem,5.72vw,5rem);line-height:1.1;letter-spacing:-.03em;
  color:var(--head);margin:0}

.contact .section__ja{flex-basis:auto;margin-top:0}
/* .08em はディセンダの見切れ防止。高さに出ないよう同量を打ち消す */
/* 切り抜きは使わない。
   せり上がりは transform だけで成立するため、overflow:hidden は不要。
   切り抜くと g・y・p などの下に伸びる字が欠ける。
   見出しサブとの間隔は margin で作り、箱の高さは行送りに任せる。 */
/* 切り抜きは使わないが、下に伸びる字の分だけ箱に余白を持たせて
   後続要素との間隔が縮まないようにする。切らずに空ける。 */
/* 下余白はディセンダの逃がしなので残し、和文との間隔だけ詰める。
   em 指定なので、見出しが小さくなる幅でも詰まりすぎない。 */
.section__en{display:block;padding-bottom:.14em;margin-bottom:-.08em}
.section__ja{flex-basis:100%;order:3;font-family:var(--font-ja);font-weight:700;
  font-size:1rem;line-height:1.6;color:var(--ink);
  /* 英字の g などは箱より下に出る（文字サイズの約7.5%）。
     Figma の見た目 8px を保つため、その分を足す。 */
  margin-top:8px}
.section__en > span,.section__ja > span{display:inline-block}
/* Aboutとコンテストの導入文。続く本文の見出しにあたるので h3。
   節の見出し（About / Contest）が h2 なので階層は飛ばない。
   ブラウザ既定の字の大きさと余白はここで打ち消している。 */
.lead-heading{font-size:clamp(1.125rem,1.7vw,1.3125rem);font-weight:700;line-height:1.7;margin:0}
/* 社名などの固有名詞が途中で切れないようにする。
   入りきらないときは塊ごと次の行へ送る。 */
.nobreak{display:inline-block}

/* 日本語の折り返し。
   最後の行に1文字だけ残る（ぶら下がり）と読みにくく、見た目も崩れる。
   text-wrap:pretty で行末を整え、word-break:auto-phrase で文節を優先して切る。
   対応していない環境では従来どおりの折り返しになるだけで、崩れは起きない。 */
.section__ja,.lead-heading,.lead-text,
.timetable__title,.timetable__desc,
.benefits__title,.benefits__desc,
.outline dd,.schedule__phase dd,.schedule__row dd,
.contact__body,.site-footer__lead,.hero__subtitle{
  text-wrap:pretty;word-break:auto-phrase}
.lead-text{font-size:1rem;margin:16px 0 0}

/* --- About --- */
/* Figma: イラスト510 ＋ テキスト583。Contest と同じ理由で比率にする。 */
.about{display:grid;grid-template-columns:minmax(0,510fr) minmax(0,583fr);
  gap:clamp(28px,8vw,107px);align-items:center}
.about__figure{margin:0;min-width:0}
/* 写真に差し替えたため、Contest の写真と同じ扱いにする。
   16:9で切り出し、角丸と読み込み前の地の色を合わせる。 */
.about__figure img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius);background:var(--bg-grey)}
.about__body{min-width:0}
.about__cta{margin-top:32px}

/* --- Program --- */
/* 時間軸（点と縦線）は使わない。カードをコンテンツ幅いっぱいに使う。 */
.timetable{display:flex;flex-direction:column;gap:0;position:relative}
/* 19px以上の太字は「大きい文字」として扱えるため、
   キーカラーのままで判読の基準を満たす */
.timetable__num{display:block;font-family:var(--font-en);font-weight:800;
  font-size:clamp(1.0625rem,1.5vw,1.1875rem);line-height:1.4;
  letter-spacing:-.025em;color:var(--head)}
/* Figma: バッジは見出しの右横ではなく、見出しの下に置く。
   見出しの左端に揃え、間隔は2px。 */
.timetable__head{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
/* 当日の開始・終了時刻。所要時間だけでは何時に行けばよいか分からないため。
   キーカラーだと福岡版で対比が足りなくなるので本文色で置く。 */
.timetable__time{font-family:var(--font-ja);font-weight:700;font-size:1rem;
  line-height:1.6;color:var(--ink);letter-spacing:.01em}
.timetable__title{font-size:clamp(1.125rem,1.7vw,1.3125rem);font-weight:700;line-height:1.7;margin:0}
/* Figma: 49×17。padding と行送りで寸法を合わせる */
.timetable__desc{font-size:1rem;}

/* --- Benefits --- */
.benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.benefits__item{display:flex;flex-direction:column;gap:8px;background:var(--card-bg);border-radius:var(--radius);padding:28px 20px}
.benefits__num{font-family:var(--font-en);font-weight:800;
  font-size:clamp(1.75rem,3vw,2.375rem);line-height:1.2;letter-spacing:-.025em;color:var(--head)}

.benefits__title{font-size:clamp(1.125rem,1.7vw,1.3125rem);font-weight:700;line-height:1.7}

.benefits__desc{font-size:1rem;}

/* --- Outline --- */
.outline{border-top:1px solid var(--line)}
.outline__row{display:grid;grid-template-columns:140px minmax(0,1fr);
  column-gap:clamp(24px,18vw,233px);row-gap:4px;align-items:center;
  padding:20px 12px;border-bottom:1px solid var(--line)}
.outline__row dt{font-size:.875rem;font-weight:700;line-height:1.6}
.outline__row dd{font-size:1rem;margin:0}
.outline__cta{margin-top:32px}

/* --- Flow --- */
/* Figma: カード380 × 3 ＋ すき間30 × 2 = 1200。
   すき間は「余白10 ＋ 矢印10 ＋ 余白10」で構成され、矢印はその中央に置く。 */
/* Figma: カード380 × 3 ＋ すき間30 × 2 = 1200。
   1200px 未満でも収まるよう、固定幅ではなく等分で組む。
   すき間30pxの内訳は「余白10 ＋ 矢印10 ＋ 余白10」。 */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;align-items:stretch}
.flow__item{display:flex;flex-direction:column;gap:8px;background:var(--card-bg);border-radius:var(--radius);padding:24px 28px;position:relative}
/* 矢印はすき間30pxの中央（カード左端から-15px）に、Figma実測の10×11.55で描く */
.flow__item + .flow__item::before{content:"";position:absolute;left:-15px;top:50%;
  transform:translate(-50%,-50%);width:0;height:0;border-left:10px solid var(--key);
  border-top:5.775px solid transparent;border-bottom:5.775px solid transparent}
/* STEP は18pxで「大きい文字」の基準(18.66px)に届かないため、
   キーカラーではなく本文色を使う。上のアイコンで区別できる。 */
.flow__step{display:block;font-family:var(--font-en);font-weight:800;
  font-size:1.125rem;line-height:1.2;color:var(--ink)}
.flow__item{min-height:114px}

/* 本文は20px（指示による）。
   3段組みのときカードが狭く、最後の行に1文字だけ残りやすい。
   balance は行の長さを揃えて割るので、ぶら下がりが出にくい。 */
.flow__label{font-size:1.25rem;font-weight:700;line-height:1.7;margin:0;
  text-wrap:balance;word-break:auto-phrase}

/* --- Schedule --- */
/* 日付列190 / 列間gap230 / 帯 h77 pad16,19 角丸8 / 行 h67 pad18,19
   罫線は「行の上側」に付ける（帯の直後と最終行の扱いを明示できるため） */
.schedule__phase{display:grid;grid-template-columns:190px minmax(0,1fr);
  column-gap:clamp(24px,18vw,230px);row-gap:4px;align-items:center;
  padding:16px 19px;min-height:77px;border-radius:var(--radius);
  background:var(--key);color:var(--on-key)}
.schedule__phase dt{font-family:var(--font-en);font-weight:700;font-size:.875rem;line-height:1.5}
.schedule__phase dd{margin:0;font-size:1rem;line-height:1.4}
/* 2列で組める幅でのみ、2本の帯の高さを77pxに揃える */
@media (min-width:1200px){ .schedule__phase{height:77px} }
.schedule__row{display:grid;grid-template-columns:190px minmax(0,1fr);
  column-gap:clamp(24px,18vw,230px);row-gap:4px;align-items:center;
  padding:18px 19px;border-top:1px solid var(--line)}
.schedule__row dt{font-size:.875rem;font-weight:700;line-height:1.6}
.schedule__row dd{margin:0;font-size:1rem;}
/* 帯の直後は罫線なし。最終行だけ下にも締めの線 */
.schedule__phase + .schedule__row{border-top:0}
.schedule__row:last-child{border-bottom:1px solid var(--line)}
/* 期間の省略を示す縦5点。表の横中央（1200幅の中心600px）に配置 */
.schedule__dots{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:12px 19px;border-top:1px solid var(--line)}
/* Program の節点と同じキーカラー。カード背景色だと白地でほぼ見えない。 */
.schedule__dots span{width:4px;height:4px;border-radius:50%;background:var(--key)}

/* --- Contest --- */
/* Figma: 写真448 ＋ テキスト581 = 1029。
   固定幅にすると中間幅でテキスト列だけが痩せ、折り返しが増える。
   比率で分けて、どの幅でも同じ見え方にする。 */
/* 会場写真を外したため1段組みにする。
   （NCBホールなどはコンテスト本番の会場で、MEETUPの会場と混同を招くため） */
.contest{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(28px,12vw,171px);align-items:center}
.contest__figures{display:grid;gap:45px;min-width:0}
.contest__figure{margin:0}
.contest__figure img{width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius);background:var(--bg-grey)}

.contest__figure figcaption{margin-top:8px;font-size:.9375rem;font-weight:700;line-height:1.7}
.contest__body{min-width:0}
/* Contest は写真を外して1段組みになったので、本文の行長を標準に戻す。
   和文の本文は1行40字前後が読みやすいとされる（欧文は45〜75字）。
   544px（34字）は2段組みで写真の横に置いていたときの幅だった。
   em 指定なので、字の大きさを変えても字数は保たれる。 */
.contest__body .lead-text{max-width:40em}
.contest__cta{margin-top:32px}

/* --- Contact（#E5E5E5 / pad 74,100,81,100 / gap8 / 中央揃え） --- */
/* ほかの節と同じく左揃えにする */
.contact{background:#E5E5E5;padding:74px var(--gutter) 81px;margin-top:var(--sec-gap);text-align:left}
/* ほかの節と同じく左揃え（SPまで共通） */
.contact__inner{max-width:var(--maxw);margin-inline:auto;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.contact > .container{padding-inline:0}
.contact .section__heading{justify-content:flex-start}
.contact .section__heading{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
/* 本文を「お問い合わせ」とボタンのちょうど中間に置く。
   80px / 24px では見出し側が空きすぎて、離れて見えていた。
   合計（104px）は変えずに二等分する。 */
.contact__body{margin:0;padding-top:52px;font-size:1rem;}
.contact__cta{padding-top:52px;margin:0}
/* フォームが開かないときの控え。本文より一段落とす。
   キーカラーだと福岡版で対比が足りないので本文色のまま。 */
.contact__note{margin:24px 0 0;font-size:.875rem;line-height:1.8;color:var(--ink)}
/* メールのリンクは字面だけだと高さ20pxで、指で押す領域として足りない。
   上下に余白を足して28pxにする。行の見た目は変わらない。 */
.contact__note a{color:inherit;text-underline-offset:3px;
  display:inline-block;padding-block:4px}

/* --- フッター（青面の中に 最終CTA ＋ クレジット ＋ コピーライト）
   pad 74,100,56,100 / gap40 / 中央揃え
   上段 footer-main: 横並び gap30（イラスト584 ＋ CTA544）
   下段 footer-meta: 縦 gap24（クレジット gap72 ＋ コピーライト） --- */
.site-footer{
  background:var(--key);color:var(--on-key);
  padding:74px var(--gutter) 56px;
  display:flex;flex-direction:column;align-items:center;gap:100px;
}
.site-footer__main{
  display:grid;grid-template-columns:minmax(0,584px) minmax(0,544px);
  gap:30px;align-items:center;width:100%;max-width:1200px;
}
.site-footer__art{margin:0;min-width:0}
.site-footer__cta{display:flex;flex-direction:column;gap:16px;min-width:0}
.site-footer__en{font-family:var(--font-en);font-weight:700;
  font-size:clamp(2.25rem,6.43vw,5.625rem);line-height:calc(84/90);letter-spacing:-.025em;margin:0}
/* 各行は span で明示的に分けている。意図しない折り返しを防ぐ */
.site-footer__en span{display:block;white-space:nowrap}
/* Figma: 16px / 行送り25.6px = 1.6 */
.site-footer__lead{font-size:1rem;line-height:1.6;font-weight:500;margin:0}
.site-footer__btn{margin:0}
.site-footer__meta{display:flex;flex-direction:column;align-items:center;gap:90px}
.site-footer__credits{display:flex;align-items:center;gap:72px;flex-wrap:wrap;justify-content:center}
/* 「主催：株式会社…」と一続きの文として流す。
   flex にすると入りきらないときに役割だけが1行に残るため、
   ふつうの文章と同じ扱いにして、社名の側で折り返させる。 */
.site-footer__org{display:block}
/* 狭い幅では2件を縦に並べる。
   「主催：株式会社…」で一続きなので、2列に割らずそのまま流す。 */
@media (max-width:767px){
  .site-footer__credits{display:flex;flex-direction:column;
    gap:16px;align-items:center}
  /* auto-phrase だと「主催：」の直後で切れ、役割だけが1行に残る。
     ここは社名の途中で折り返してよいので、ふつうの折り返しにする。 */
  .site-footer__org{text-align:center;word-break:normal;text-wrap:balance}
}
.site-footer__role{font-size:.875rem;font-weight:500;letter-spacing:.004em;line-height:1.7}
/* 主催・運営パートナーはロゴをやめ、社名のテキストで示す。
   ベタ面の上なので文字色は on-key。 */
/* 社名は「主催 / 運営パートナー」と同じ体裁にそろえる */
.site-footer__name{font-family:var(--font-ja);font-weight:500;font-size:.875rem;
  letter-spacing:.004em;line-height:1.7;color:var(--on-key)}
/* ロゴは白い座布団の上に置く。
   座布団 = 余白 上下10 / 左右16、角丸8（カード類と共通）
   主催 108.4×64（ロゴ76.4×44）／運営パートナー 101.3×63（ロゴ69.3×43）
   青地では白地の上に置く。 */
/* 座布団は2つとも同じ寸法にする。
   ロゴの幅（76.4 / 69.3）が違うため、padding 指定だけでは揃わない。
   広いほう（76.4 + 左右16 = 108.4）に合わせて固定する。 */
/* 座布団の寸法は保ったまま、ロゴを小さくして内側の余白を広げる。
   ロゴ 44px → 32px。上下の余白 10px → 16px、左右も広がる。 */
.site-footer__logo{display:inline-flex;align-items:center;justify-content:center;
  width:108px;height:64px;padding:16px 20px;box-sizing:border-box;
  background:#FFFFFF;border-radius:8px}
.site-footer__logo img{height:32px;width:auto;display:block}
.site-footer__logo .logo-partner{height:31px}
.site-footer__copy{font-family:var(--font-ja);font-size:.75rem;line-height:1.7;letter-spacing:.004em;margin:0}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:1199px){
  /* ヒーローの縦積みはスマホだけ。iPad の幅では横並びを保つ。
     （767px以下の指定に移した） */
  /* 1列になると左右に分ける必要がないため、背景を広げる疑似要素は使わない。
     残すと画面の左半分だけが塗られ、図版と重なって崩れる。 */
  .hero::before{display:none}
  /* 1段組みでは文字情報を先に見せる。図版は後ろに回す。
     DOM上はもともと面→図版の順なので、並べ替えをやめるだけでよい。 */

  /* About と Contest は1段組みにする。
     2段のままだと図版の列が極端に狭くなり、写真が小さくなるうえ、
     Contest のボタン（nowrap）が画面の外にはみ出して切れる。
     以前は「画面が低い端末」の条件つきで指定していたため、
     iPhone のような縦長の端末では効いていなかった。 */
  .about,.contest{grid-template-columns:minmax(0,1fr);gap:32px}
  /* Flow は本文が20pxになり、3段組みでは1024px付近でも幅が足りず
     最後の行に1文字だけ残る。1023px以下は縦積みにする。
     縦積み用の下向き矢印はすでに用意してある。 */
  /* Flow の縦積みは 1023px 以下の独立指定に持たせる（下記） */
  /* 1024〜1199px は3段組みのまま。左右の余白を詰めて字数を確保する */
  .flow__item{padding-inline:24px}
  .contest__figures{order:-1}
}
/* Flow は本文が20pxになり、3段組みでは幅が足りず最後の行に1文字だけ残る。
   1023px以下は縦積みにする。矢印は下向きにして中央へ。
   1024〜1199px は3段組みのまま、左右の余白を24pxに詰めて字数を確保する。 */
@media (max-width:1023px){
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow__item + .flow__item::before{display:block;left:50%;top:-15px;
    transform:translate(-50%,-50%) rotate(90deg)}
}
/* 画面の低い端末（iPhone SE など）では、やや詰める。 */
@media (max-width:1199px) and (max-height:700px){
  .hero__figure{padding-block:56px 16px}
  .hero__figure img{max-height:34svh}
  .hero__panel{padding-block:68px 28px}   /* 低い端末でもタブは避ける */
  .site-footer__main{grid-template-columns:minmax(0,1fr);gap:32px;justify-items:center;text-align:center}
  .site-footer__art{order:-1;max-width:420px}
  .site-footer__cta{align-items:center}
  .benefits,.flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow__item + .flow__item::before{display:none}
}
@media (max-width:767px){
  /* ヘッダーの2段組みは 1023px 以下の指定にまとめてある。
     ここでは狭い画面だけの微調整を持つ。 */
  .citynav ul{gap:12px}

  /* ヒーローの縦積みはスマホだけ。iPad の幅では横並びを保つ。 */
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero__figure{order:0}
  /* 図版は切らずに全体を見せる。
     上側はタブが重ならないよう空け、下側にも同じだけ空けて収まりをよくする。
     overflow は使わない。絵が欠けるため。 */
  .hero__figure{display:flex;align-items:center;justify-content:center;
    padding-block:64px 24px}
  .hero__figure img{max-height:46svh;width:auto;max-width:100%;
    object-fit:contain}
  /* 面は画面幅いっぱいに。高さは中身なりにする。
     上余白は地域タブの下端（面の上から56px）を避けて76px取る。
     キーカラーの面はタブの背面まで伸びるので、文字だけが下がる。 */
  .hero__panel{min-height:0;padding:76px var(--gutter) 36px;
    margin-inline:calc(50% - 50vw);padding-inline:calc(var(--gutter) + 50vw - 50%)}
  /* 文字まわりの間隔も詰める */
  .hero__host{margin-top:14px}
  .hero__title{margin-top:6px}
  .hero__subtitle{margin-top:14px}
  .hero__date{margin-top:4px}
  .hero__cta{margin-top:20px}


  /* セクション内のCTAは中央に置き、横幅を広げる */
  /* セクション内のCTAは中央に置く。幅は内容なり */
  .about__cta,.outline__cta,.contest__cta,.contact__cta,.site-footer__btn{
    display:flex;justify-content:center;width:100%}

  /* 見出しと和文サブを中央揃えに */
  .section__heading{align-items:center;text-align:center}
  .section__en{margin-inline:auto}
  .section__ja{text-align:center}
  /* Contact は PC で左揃えにするため個別指定を持っている。
     その指定の方が強く、SPでも左のままになっていた。ここで上書きする。 */
  .contact .section__heading{align-items:center;justify-content:center}
  .contact__inner{align-items:center}
  /* コンテスト名はSPでは中央に置く */
  .contest__body .lead-heading{text-align:center}
  .site-header .btn{min-height:44px;padding:0 4px 0 22px;gap:12px;font-size:.9375rem}
  .site-header .btn__icon{width:36px;height:36px}
  .benefits,.flow{grid-template-columns:minmax(0,1fr)}
  /* 1段組みではカードが縦に並ぶので、矢印も下向きにしてカードとカードの
     真ん中に置く。すき間30pxの中央が -15px。
     高さ条件つきの指定で消えることがあったので、ここで出し直す。 */
  .flow__item + .flow__item::before{display:block;left:50%;top:-15px;
    transform:translate(-50%,-50%) rotate(90deg)}
  .outline__row,.schedule__row,.schedule__phase{grid-template-columns:minmax(0,1fr);
    column-gap:0;align-items:start}
  .outline__row dt,.schedule__row dt{color:var(--head)}
  .contest__figures{gap:32px}
}
@media (max-width:400px){
  .site-header__logos{gap:10px}
  .site-header__divider{height:24px}
  .site-header__inner{gap:10px}
  .citynav__link{padding-inline:16px}
  .btn{padding-left:24px;gap:14px}
}
/* ロゴ2点が1行に収まらない極狭幅でのみ、区切り線を外す */
@media (max-width:339px){
  .site-header__divider{display:none}
}

/* =========================================================
   モーション（ヒーローの登場 ＋ 見出し罫線）
   ========================================================= */
@media (prefers-reduced-motion:no-preference){
  /* ヒーローは長さを揃えない。
     面がゆっくり開き、図版がさらに遅れて現れ、文字が短く上がる。
     この長さの差が滑らかさを作っているため、ここだけ個別に持つ。 */
  .hero__panel{animation:panel-in var(--dur-panel) var(--ease) both;transform-origin:left center}
  .hero__figure{animation:fade-in var(--dur-figure) var(--ease) .18s both}
  .hero__panel > *{animation:rise var(--dur-rise) var(--ease) both}
  .hero__eyebrow{animation-delay:.30s}
  .hero__host{animation-delay:.37s}
  .hero__title{animation-delay:.44s}
  .hero__subtitle{animation-delay:.53s}
  .hero__date{animation-delay:.60s}
  .hero__cta{animation-delay:.70s}
  @keyframes panel-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes fade-in{from{opacity:0}to{opacity:1}}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  /* 見出し: 文字が下からせり上がる。
     透明度を使わないため、文字の輪郭が最初から明瞭に出る。 */
  .reveal-ready .section__en > span,
  .reveal-ready .section__ja > span{transform:translateY(110%);
    transition:transform var(--dur-reveal) var(--ease)}
  .reveal-ready .section__heading.is-in .section__en > span{transform:none}
  .reveal-ready .section__heading.is-in .section__ja > span{transform:none;transition-delay:.12s}

}

/* =========================================================
   組版の精度を上げるための調整（v2）

   方針:
   1. 行長を日本語の適正（28〜40字）に収める
   2. 行送りを行長に連動させる（長い行は広く、短い行は狭く）
   3. セクションの区切りを、情報のまとまりの強さで変える
   4. 数字・約物の組版を整える

   装飾は足さない。余白と文字組みだけで階層を作る。
   ========================================================= */

/* ---------------------------------------------------------
   1. 行長の制御
   日本語の適正は1行28〜40字。em基準で指定し、
   文字サイズを変えても文字数が保たれるようにする。
   --------------------------------------------------------- */
:root{
  --measure:34em;        /* 本文の最大行長 ≒ 34文字 */
  --measure-narrow:26em; /* 密度の高い箇所（表組み） */
}
.lead-text,
/* 行長の上限。Program の本文は Figma で 670px まで使うため、
   ここには含めない（--measure は 544px で足りない）。 */
.contact__body{max-width:var(--measure)}
.outline__row dd,
.schedule__row dd,
.schedule__phase dd{max-width:var(--measure-narrow)}

/* ---------------------------------------------------------
   2. 行送りを行長に連動させる
   行が長いほど広く、短いほど狭く。一律1.9をやめる。
   --------------------------------------------------------- */
.lead-text{line-height:1.85}              /* 34字 */
.timetable__desc{line-height:1.85}        /* 34字 */
.benefits__desc{line-height:1.75}         /* 21字 → 詰める */
.outline__row dd,
.schedule__row dd{line-height:1.7}        /* 28字 */
.contact__body{line-height:1.85}

/* ---------------------------------------------------------
   3. セクションの区切りにリズムを与える
   すべて96pxではなく、情報のまとまりで強弱をつける。

   About〜Benefits … イベントの内容（関連が強い）→ 標準
   Outline・Flow   … 申し込みの実務（別のまとまり）→ 広い
   Schedule・Contest … 先の話（さらに別）→ 最も広い
   --------------------------------------------------------- */
:root{
  --sec-gap-tight:clamp(56px,7vw,80px);
  --sec-gap:clamp(64px,8vw,96px);
  --sec-gap-wide:clamp(80px,11vw,136px);
}
.section{padding-top:var(--sec-gap)}
#program-heading, #benefits-heading{ }
.section:has(#outline-heading){padding-top:var(--sec-gap-wide)}
.section:has(#schedule-heading){padding-top:var(--sec-gap-wide)}
.section:has(#contest-heading){padding-top:var(--sec-gap-wide)}
.section:has(#flow-heading){padding-top:var(--sec-gap-tight)}
/* :has() 非対応環境向けの近似（順序で指定） */
@supports not selector(:has(*)){
  main > .section:nth-of-type(4),
  main > .section:nth-of-type(6),
  main > .section:nth-of-type(7){padding-top:var(--sec-gap-wide)}
  main > .section:nth-of-type(5){padding-top:var(--sec-gap-tight)}
}

/* 見出しと本体の距離。関係が強いほど近く。 */
.section__body{margin-top:clamp(28px,3.4vw,40px)}

/* ---------------------------------------------------------
   4. 数字と約物の組版
   --------------------------------------------------------- */
.timetable__num,.benefits__num,.flow__step,
.hero__date,.schedule__row dt{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
/* 数字も約物も含むため、両方の指定を一つにまとめる */
.outline__row dd{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"palt" 1}
/* 和文の約物（括弧・句読点）のアキを詰める */
.lead-heading,.lead-text,.timetable__title,.timetable__desc,
.benefits__title,.benefits__desc,.flow__label,
.schedule__row dd,.contact__body{
  font-feature-settings:"palt" 1;
}
/* 見出しは字面を締める */
/* Figma: 見出しサブの字間は 0 */
.lead-heading{font-feature-settings:"palt" 1;letter-spacing:.01em}
.section__ja{font-feature-settings:"palt" 1;letter-spacing:0}

/* =========================================================
   情報設計と細部の調整（v2 後半）
   ========================================================= */

/* ---------------------------------------------------------
   Program: 時間軸を与える
   「当日のタイムテーブル」という内容に対し、
   番号の羅列ではなく時間の流れとして読める構造にする。
   縦線は装飾ではなく、順序と連続性を示す情報。
   --------------------------------------------------------- */
/* Figma: 各行を淡色のカードにする。左に時間軸、右に説明の2カラム。
   カード 1170×154 / 角丸8 / padding 22,28,24,28 / カード間20px
   時間軸（点と線）はカードの外側、左に配置する。 */
.timetable__item{
  position:relative;
  display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
  column-gap:clamp(32px,5vw,72px);
  background:var(--card-bg);border-radius:var(--radius);
  padding:23px 28px;
  margin-bottom:20px;
  border-bottom:0;
}
.timetable__item:last-child{margin-bottom:0}

.timetable__num{grid-column:1}
.timetable__head{grid-column:1;margin-top:4px}
/* 本文はカードの高さに対して中央に置く。
   カードの上下 padding は 23px で揃えてあるため、補正は要らない。 */
.timetable__desc{
  grid-column:2;
  align-self:center;color:#3D3D3D;
  /* Figma では 557〜670px で1行に収まっている。
     34em（544px）の上限では届かず、途中で折り返してしまう。
     カードの中で列いっぱいに使う。 */
  max-width:none;
}
@media (max-width:900px){
  .timetable__item{grid-template-columns:minmax(0,1fr)}
  .timetable__desc{grid-column:1;grid-row:auto;margin-top:8px}
}

/* ---------------------------------------------------------
   Benefits: カードの高さを揃える
   内容量が違っても箱の高さが揃っていないと、並びとして雑に見える。
   --------------------------------------------------------- */
.benefits{align-items:stretch}
.benefits__item{height:100%}
.benefits__desc{color:#3D3D3D}

/* ---------------------------------------------------------
   Outline: 定義リストの関係を明確に
   --------------------------------------------------------- */
.outline__row dt{color:var(--head);letter-spacing:.04em}
.outline__row dd{color:#1A1A1A}

/* ---------------------------------------------------------
   Contest: 写真ブロックとテキストの重心を揃える
   --------------------------------------------------------- */
.contest{align-items:center}
.contest__body{padding-block:8px}
/* 太さは前方の定義（700）を正とする。色だけをここで指定する。 */
.contest__figure figcaption{color:#3D3D3D}

/* ---------------------------------------------------------
   Hero: 下に続くことを示す
   700pxの面で視界が終わるため、続きがあることを小さく示す。
   --------------------------------------------------------- */
.hero__panel{position:relative}

/* ---------------------------------------------------------
   本文のコントラストを一段落とし、見出しとの差をつける
   #3D3D3D は白背景で 10.4:1
   --------------------------------------------------------- */
.contact__body{color:#000000}   /* K100 */
/* ---------------------------------------------------------
   Flow のピクトグラム
   24×24のグリッド、ストローク1.6、線端は丸。
   各ステップの行為（記入・受信・来場）を示す。装飾ではない。
   --------------------------------------------------------- */
.flow__ico{color:var(--head);margin-bottom:4px}
/* ピクトグラムの線の太さ。
   24×24 の絵を 28px・32px に拡大して使うため、stroke-width をそのまま
   指定すると拡大率のぶん太くなる（28px なら 1.167 倍）。
   non-scaling-stroke で、表示サイズに関わらず見た目を 1.5px に固定する。 */
.timetable__ico,.flow__ico,.benefits__ico{stroke-width:1.5}
.timetable__ico *,.flow__ico *,.benefits__ico *{vector-effect:non-scaling-stroke}
.flow__item{padding-top:22px}

/* ---------------------------------------------------------
   Program / Benefits のピクトグラム
   Flow と同じ規格（24×24グリッド、ストローク1.6、線端は丸）で統一。
   各項目の内容を示す記号であり、装飾ではない。
   --------------------------------------------------------- */
/* アイコンが行を増やすため、説明文の縦位置を合わせ直す */
.timetable__ico{grid-column:1;color:var(--head);margin-bottom:2px}
/* 01と02の絵柄は左の余白が広く、番号より右に寄って見える。
   絵柄ごとに余白の量が違うので、ずらす量も分けている。 */
.timetable__item:nth-child(1) .timetable__ico{transform:translateX(-3px)}
.timetable__item:nth-child(2) .timetable__ico{transform:translateX(-2px)}
.timetable__desc{grid-row:1 / span 3}
@media (max-width:900px){
  .timetable__ico{grid-column:1}
  .timetable__desc{grid-row:auto}
}

}
@media (hover:none){
  }

/* ---------------------------------------------------------
   セクション目次（右端の縦ドット）と TOPに戻るボタン
   どちらも操作の補助。内容には含めない。
   --------------------------------------------------------- */
.secnav{
  position:fixed;top:50%;right:clamp(16px,2.2vw,32px);transform:translateY(-50%);
  /* 文字の長さに関わらず点が縦一列に並ぶよう、右端ではなく点を基準にする */
  z-index:40;opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease)}
.secnav.is-shown{opacity:1;pointer-events:auto}
/* 点は縦一列に揃える。文字は常に見せ、現在地だけキーカラーにする。 */
.secnav__list{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:14px;align-items:stretch}
.secnav__item{
  /* 点の列 ＋ 文字の列。点の位置が文字の長さに影響されない。 */
  display:grid;grid-template-columns:8px 1fr;align-items:start;gap:10px;
  text-decoration:none;color:var(--sub);
  padding:4px 0;min-height:24px}
.secnav__dot{
  width:8px;height:8px;border-radius:50%;
  /* 英字の1行目の中心に合わせる */
  margin-top:3px;
  background:transparent;box-sizing:border-box;
  border:1.5px solid currentColor;
  transition:background-color var(--dur-ui) var(--ease-ui),
             border-color var(--dur-ui) var(--ease-ui)}
.secnav__text{display:block;min-width:0}
.secnav__label{
  display:block;
  font-family:var(--font-en);font-weight:700;font-size:.75rem;
  letter-spacing:.02em;white-space:nowrap;line-height:1.3}
/* 和文の補足。英字より小さく、控えめに添える。 */
.secnav__sub{
  display:block;margin-top:1px;
  /* 和文が小さすぎるとの指摘により 10px → 14px */
  font-family:var(--font-ja);font-weight:500;font-size:.875rem;
  line-height:1.4;white-space:nowrap;
  color:var(--sub);opacity:.85}
.secnav__item.is-current .secnav__sub{color:var(--key);opacity:1}
/* いま見ている節 */
.secnav__item.is-current{color:var(--key)}
.secnav__item.is-current .secnav__dot{background:var(--key);border-color:var(--key)}
/* 指し示したとき・キーボードで移動したとき */
.secnav__item:hover,.secnav__item:focus-visible{color:var(--key)}
.secnav__item:focus-visible{outline:2px solid var(--key);outline-offset:4px;border-radius:4px}

/* 上向きの矢印を丸で囲っただけ。文字は入れない。SP・PC共通。 */
.to-top{
  position:fixed;right:clamp(16px,2.2vw,32px);bottom:clamp(16px,2.2vw,32px);
  z-index:40;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  background:#FFFFFF;color:var(--key);
  border:1px solid var(--key);box-sizing:border-box;text-decoration:none;
  box-shadow:0 0 0 rgba(0,0,0,0);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease),box-shadow var(--dur-ui) var(--ease-ui)}
.to-top.is-shown{opacity:1;pointer-events:auto}
.to-top:hover{box-shadow:0 0 10px rgba(0,0,0,.1)}
.to-top:focus-visible{outline:2px solid var(--key);outline-offset:3px}

/* 目次はコンテンツの右外に置く。
   幅が足りないと本文に重なるため、重ならない幅まで出さない。
   1440px 未満ではカードや本文と接触する。 */
/* 目次はSPの境界（767px以下）まで出す。
   目次の幅ぶん、コンテンツの右に余地を作って重ならないようにする。 */
@media (max-width:767px){
  .secnav{display:none}
}
@media (min-width:768px) and (max-width:1699px){
  /* 目次（約98px）＋間隔 の余地を右に確保する */
  .container{padding-right:calc(var(--gutter) + 130px)}
}
/* 和文の補足は、目次を出す幅でのみ表示する */
@media (hover:none){
  .to-top:hover{box-shadow:0 0 0 rgba(0,0,0,0)}
}

/* ---------------------------------------------------------
   SP用のメニュー
   狭い画面では右端の目次を出さず、ヘッダーのボタンから開く。
   --------------------------------------------------------- */
.menu-btn{
  display:none;
  width:44px;height:44px;padding:0;
  background:transparent;border:0;border-radius:8px;
  color:var(--key);cursor:pointer;
  align-items:center;justify-content:center;
  /* 開いたパネルより前面に置く。でないと×が押せない。 */
  position:relative;z-index:70}
.menu-btn:focus-visible{outline:2px solid var(--key);outline-offset:2px}
.menu-btn__bars{display:block;width:20px;height:14px;position:relative}
.menu-btn__bars span{
  position:absolute;left:0;width:100%;height:2px;border-radius:1px;
  background:currentColor;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.menu-btn__bars span:nth-child(1){top:0}
.menu-btn__bars span:nth-child(2){top:6px}
.menu-btn__bars span:nth-child(3){bottom:0}
/* 開いているときは×に変わる */
.menu-btn.is-open .menu-btn__bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn.is-open .menu-btn__bars span:nth-child(2){opacity:0}
.menu-btn.is-open .menu-btn__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* 開いている間はヘッダーをパネルより前に出す。ボタンはその中にいる。 */
body.is-menu-open .site-header{z-index:70}
/* ただしロゴまで前に出ると、パネルの上に重なってしまう。
   開いている間は隠す。位置には影響しないので、閉じたときにずれない。
   ロゴはリンクではないので、キーボードの送り順も変わらない。 */
.site-header__logos{transition:opacity var(--dur-ui) var(--ease-ui),
  visibility var(--dur-ui) var(--ease-ui)}
body.is-menu-open .site-header__logos{opacity:0;visibility:hidden}
/* 地は透かし、パネルが下に続いて見えるようにする */
body.is-menu-open .site-header{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.menu-panel{
  position:fixed;inset:0;z-index:60;
  background:rgba(26,26,26,.4);
  opacity:0;transition:opacity var(--dur) var(--ease)}
.menu-panel.is-open{opacity:1}
.menu-panel__inner{
  position:absolute;top:0;right:0;bottom:0;
  width:min(320px,86vw);box-sizing:border-box;
  /* 地域切り替えタブと同じすりガラス。白80%＋背景ぼかし32px。
     ぼかしに対応しない環境では白80%だけが効く。 */
  background:color-mix(in srgb,var(--white) 80%,transparent);
  -webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);
  padding:88px 28px 40px;
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform var(--dur) var(--ease)}
.menu-panel.is-open .menu-panel__inner{transform:none}
.menu-panel__list{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:4px}
.menu-panel__item{
  display:block;padding:14px 4px;text-decoration:none;
  color:var(--ink);border-bottom:1px solid var(--line)}
.menu-panel__en{
  display:block;font-family:var(--font-en);font-weight:700;font-size:1.125rem;
  letter-spacing:-.01em;line-height:1.3}
.menu-panel__ja{
  display:block;margin-top:2px;font-size:.8125rem;line-height:1.5;color:var(--sub)}
.menu-panel__item.is-current{color:var(--key)}
.menu-panel__item.is-current .menu-panel__ja{color:var(--key)}
.menu-panel__item:focus-visible{outline:2px solid var(--key);outline-offset:-2px}

/* 1023px以下でメニューを使う。右端の目次は出さない。 */
@media (max-width:767px){
  .menu-btn{display:inline-flex}
}
/* ヘッダーの2段組みは、1段に収まらなくなる幅から。 */
/* メニューが出る幅では、1段目に「ロゴ / メニュー」、
   2段目に「地域タブ（中央）と CTA（右端）」を並べる。 */
@media (max-width:1499px){
  /* CTAが2段目に来るため、下側にも影のぼかし分（10px）の余地を残す */
  /* タブはヘッダーの外に出たので、上下の余白は同じでよい。 */
  .site-header{height:auto;padding-block:16px}
  /* 3列。左右の列を同じ幅にして、中央の列が画面中央に来るようにする。
     2段目は「左の余白 / タブ（中央）/ CTA（右端）」。 */
  /* タブはヘッダーの外に出たので1段。左にロゴ、右にメニュー。 */
  .site-header__inner{display:flex;align-items:center;justify-content:space-between;
    gap:12px}
}
/* 599px以下ではタブとCTAが1行に収まらない。
   1段目に「ロゴ / CTA / メニュー」、2段目にタブを中央で置く。 */
@media (max-width:599px){
  /* ロゴ・CTA・メニューが横に並びきらないため、それぞれ詰める。 */
  .site-header__logos{gap:8px}
  /* スマホでは2つのロゴを同じ高さに揃える（Figma の指定どおり26px）。
     .logo-partner の指定の方が強いため、両方ここで明示する。
     以前は img だけ 24px にしていたので、西日本FH側だけ小さく見えていた。 */
  .site-header__logos img{height:26px;width:auto}
  .site-header__logos .logo-partner{height:26px}
  /* 仕切りもロゴに合わせる（Figma の SP は 26px のロゴに 24px の仕切り）。
     28.5px のままだとロゴより背が高くなる。 */
  .site-header__divider{height:24px}
  .site-header .btn{padding-left:16px;gap:8px;height:44px;min-height:44px}
  .site-header__inner{gap:8px}
  .site-header .btn .btn__icon,
  .site-header .btn > span:last-child{width:36px;height:36px}
  /* 間隔は 767px 以下の 12px をそのまま使う。
     以前はここで 8px に詰めていたが、座布団同士が近すぎた。 */
  .citynav__link{width:auto;min-width:78px;padding-inline:14px}
}
@media (min-width:768px){
  .menu-panel{display:none}
}


/* ---------------------------------------------------------
   地域切り替えタブ
   ヘッダーには含めず、その下に浮かせる。
   地の色は持たず、タブだけが背景の上に載る。
   ヘッダーと同じく画面上部に留まる。
   --------------------------------------------------------- */
.citybar{
  position:fixed;left:0;right:0;z-index:49;box-sizing:border-box;
  top:var(--header-h,80px);
  display:flex;justify-content:center;
  /* 地は持たない。タブだけがヘッダーの下にぶら下がる。
     ヒーローの上に重ねるため、場所を取らせない。 */
  padding:12px 0 0;
  pointer-events:none}
.citybar .citynav{pointer-events:auto}


/* メニュー内のCTA。メニューが出る幅ではヘッダーから移す。 */
.menu-panel__cta{margin-top:28px;display:flex;justify-content:center}
.menu-panel__cta .btn{width:100%;justify-content:space-between}
/* メニューが出る幅では、ヘッダーのCTAを隠す */
@media (max-width:767px){
  /* 器ごと隠す。中身だけ隠すと高さ0の器が残り、上下の揃えが狂う。 */
  .site-header__right{display:none}
}