/* ===========================================================
   Me-Navi トップページ専用スタイル

   ⚠ このファイルは公開配信物です。コメントに内部情報（リポジトリのパス・
      タスク番号・レビュー指摘番号・社内資産名など）を書かないでください。

   編集時に壊しやすい点:
   - 色・余白・書体は必ずトークン（var(--*)）を参照する。ここで新しい値を作らない
   - :root をこのファイルで定義しないこと。トークンの一次ソースは別ファイルにあり、
     規約チェックが違反として検出します
   - 左右の余白は padding-left / padding-right で個別に指定すること。
     一括指定にすると狭い画面での上書きが壊れ、折返しが増えます
   - --tap-min-foot はフッターに閉じたローカル値。:root へ出さないこと
   =========================================================== */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.7;font-feature-settings:"palt";-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ===========================================================
   ページ本体
   =========================================================== */
.page{min-height:100vh;display:flex;flex-direction:column}

/* ---------- ヒーロー：ブランド＋定義＋導線 ---------- */
.hero{padding:var(--space-8) var(--space-6);display:flex;justify-content:center}
.hero__in{width:100%;max-width:560px;text-align:center}
.hero__logo{width:132px;height:auto;display:block;margin:0 auto var(--space-7)}
.hero h1{font-family:var(--font-serif);font-size:38px;font-weight:600;line-height:1.4;letter-spacing:.01em;margin:0 0 var(--space-5);text-wrap:pretty}
.hero h1 em{font-style:normal;border-bottom:3px solid var(--brand);padding-bottom:2px}
.hero__def{font-size:15px;color:var(--ink-2);margin:0 auto var(--space-5);max-width:42ch;text-align:left;text-wrap:pretty;line-break:strict}

/* ---------- 見込み客向けのテキストリンク ---------- */
.learn{margin:0 auto var(--space-7);max-width:42ch;text-align:left;font-size:15px}
.learn a{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--tap-min);color:var(--accent);font-size:var(--fs-body);font-weight:500;text-decoration:none}
.learn a .t{border-bottom:1px solid var(--accent);padding-bottom:1px}
.learn a .ext{font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:400}
.learn a:hover{color:var(--accent-hover)}
.learn a:hover .t{border-color:var(--accent-hover)}

/* ---------- 導線 ---------- */
.cta{display:flex;flex-direction:column;gap:var(--space-3);margin:0 0 var(--space-6)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:52px;padding:0 var(--space-6);border:1px solid transparent;border-radius:var(--r);font-family:var(--font-sans);font-size:16px;font-weight:600;letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn .mark{font-family:var(--font-mono);font-size:var(--fs-body);font-weight:400}
.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--paper)}
.btn--line{background:var(--paper);border-color:var(--line-2);color:var(--ink)}
.btn--line:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}

/* ---------- メンバー向け案内 ---------- */
.notice{margin:0;padding:var(--space-4) var(--space-5);background:var(--paper);border:1px solid var(--line);border-left:2px solid var(--copper);border-radius:var(--r);font-size:var(--fs-small);line-height:1.85;color:var(--ink-2);text-align:left}
.notice b{color:var(--ink);font-weight:600}

/* ---------- 組織の新規登録ブロック ----------
   このブロックは表示しない設定のとき、サーバー側で丸ごと出力されません。
   消えるとヒーローとフッターが直結しますが、`.org + .foot{border-top:0}` が効かなくなる
   代わりに .foot の border-top が復活して境界が保たれます（余白は崩れません）。 */
.org{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--space-8) var(--space-6);display:flex;justify-content:center}
.org__in{width:100%;max-width:560px;display:grid;grid-template-columns:1fr auto;gap:var(--space-2) var(--space-7);align-items:center}
.org__label{grid-column:1;font-family:var(--font-sans);font-size:var(--fs-micro);font-weight:500;letter-spacing:.12em;color:var(--copper);margin:0 0 var(--space-2)}
.org h2{grid-column:1;font-family:var(--font-serif);font-size:20px;font-weight:600;letter-spacing:.01em;margin:0}
.org__sub{grid-column:1;font-size:var(--fs-small);color:var(--ink-2);margin:var(--space-1) 0 0}
.org .btn{grid-column:2;grid-row:1 / span 3;min-width:200px}
@media(max-width:640px){.org__in{grid-template-columns:1fr}.org .btn{grid-column:1;grid-row:auto;margin-top:var(--space-5)}}

/* ---------- フッター ----------
   タップ枠はフッターのリンク 6 本のみ 36px（最小タップの下限として定めた値の範囲内）。
   pointer:coarse では 44px に復帰します。
   --tap-min-foot は .foot に閉じたローカル値＝:root へ出さないこと。 */
.foot{--tap-min-foot:36px;margin-top:auto;background:var(--paper);border-top:1px solid var(--line)}
@media (pointer:coarse){.foot{--tap-min-foot:var(--tap-min)}}
.org + .foot{border-top:0}
.foot__in{max-width:560px;margin:0 auto;padding-top:var(--space-6);padding-bottom:var(--space-6);padding-left:var(--space-6);padding-right:var(--space-6);display:flex;flex-direction:column;gap:0}
.foot__brand{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-3);font-size:var(--fs-body);font-weight:600;letter-spacing:.04em}
.foot__brand img{height:26px;width:auto;display:block}
.foot__nav{display:flex;flex-wrap:wrap;row-gap:0;column-gap:var(--space-6);margin:0;padding:0;list-style:none;font-size:var(--fs-small)}
.foot__nav a{display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--tap-min-foot);color:var(--ink-2);text-decoration:none}
.foot__nav a .t{border-bottom:1px solid var(--line-2);padding-bottom:1px}
.foot__nav a:hover{color:var(--accent)}
.foot__nav a:hover .t{border-color:var(--accent)}
.foot__nav a .ext{font-family:var(--font-mono);font-size:var(--fs-micro)}
.foot__meta{display:flex;flex-wrap:wrap;row-gap:var(--space-3);column-gap:var(--space-5);align-items:baseline;margin-top:var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--ink-3)}
.foot__meta .company{color:var(--ink-2)}
.foot__meta .copy{font-family:var(--font-mono);letter-spacing:.04em}

@media(max-width:640px){
  .hero{padding:var(--space-7) var(--space-5) var(--space-8)}
  .hero__logo{width:104px;margin-bottom:var(--space-6)}
  .hero h1{font-size:27px}
  .hero__def{font-size:var(--fs-body);margin-bottom:var(--space-7)}
  .org,.foot__in{padding-left:var(--space-5);padding-right:var(--space-5)}
}