/* トップページ専用の見た目
   ⚠ 共通の style.css に .hero / .catch / .tools / .soon が既にあって、
     中身がちがう（座席表のページで使っている）。ぶつからないように、
     トップ側のクラスには t- を付けてある。
   🔴 2026-08-29 決定＝ベースは薄いグレー、左＝学校（桜色）／右＝仕事（緑）。
     色は「面で塗らない」。枠の上の線だけを色にする。 */

:root{
  --midori:#3f7a68;        /* 右＝仕事 */
  --midori-pale:#eef4f2;   /* 薄いほうのボタン（完成サンプルを見る） */
  --pink-deep:#a84a72;     /* ⚠薄いピンクの上に --pink をのせると薄すぎる（読みやすさ 3.2 → 4.9） */
}
/* ⚠ トップだけ薄くしていたが、2026-08-30 に全ページへ広げた（本人の希望）。
   いまは共通の style.css で #f8f9fa。ここでの上書きは不要 */

/* ---- 上のあいさつ ---- */
/* ⚠ ヘッダーとの間が空きすぎていた（本人の指摘）。44px → 24px */
.t-hero{padding:24px 0 8px}
.t-eyebrow{
  font-size:.74rem;letter-spacing:.18em;color:var(--ink-soft);margin:0 0 14px;
}
/* ⚠ スマホでも1行に収める。画面幅から逆算した大きさにする */
.t-hero h1{
  font-size:clamp(12px,4vw,22px);font-weight:700;margin:0 0 18px;
  line-height:1.5;white-space:nowrap;color:var(--ink-soft);
}
.t-catch{
  font-size:clamp(1.5rem,4vw,2.2rem);font-weight:700;line-height:1.45;
  margin:0 0 18px;letter-spacing:-.01em;
}
/* ⚠ 直下の span だけブロックにする。中に入れた span まで改行させないため */
.t-catch > span{display:block}
.t-hero .lead{font-size:.88rem;margin:0 0 30px;max-width:44em}
.t-hero .more{color:var(--midori);text-decoration:none;white-space:nowrap;margin-left:4px}
.t-hero .more:hover{text-decoration:underline}

/* ⚠ ここには「名簿の送信なし／登録不要／インストール不要／すべて無料」の行があったが、
   2026-08-30 に消した。理由＝**ほとんどが上のリード文と重複していた**（本人の指摘）。
   新しかったのは「すべて無料」だけなので、それをリード文に入れた。
   そのぶん上が短くなって、2枠が上がった */

/* ---- 2枠：左＝学校、右＝仕事 ---- */
.t-two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:48px}
.t-col{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px 22px;
}
.t-col.l{border-top:3px solid var(--pink)}
.t-col.r{border-top:3px solid var(--midori)}
.t-col h2{
  font-size:.88rem;letter-spacing:.06em;margin:0 0 4px;font-weight:700;
  padding-left:0;
}
/* ⚠ 共通CSSの h2 には縦棒が付く。トップの見出しは文字に色を付ける作りなので、
   縦棒は消す（付いたままだと文字と重なるうえ、右側までピンクになる） */
.t-col h2::before,.t-about h2::before{content:none}
.t-col.l h2{color:var(--pink)}
.t-col.r h2{color:var(--midori)}
.t-col .who{font-size:.8rem;color:var(--ink-soft);margin:0 0 22px}

/* ⚠ ここはもうリンクではない（入口は絵とボタンの2つに分かれた）。
   見出しと説明は押しても飛ばない＝そのぶん、動く場所と押す場所が一致する */
.t-tool{display:block;color:var(--ink);margin-bottom:20px}
.t-tool a{
  text-decoration:none;color:inherit;
  /* ⚠ スマホで長押しすると、リンクのウィンドウ（コンテキストメニュー）が出てしまう。
     絵を触って確かめたい人の邪魔になるので止める（2026-09-03 本人） */
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
.t-shot-link{display:block}
.t-tool img{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
/* 🔴 カードの中の完成画像（2026-09-01）。
   ⚠2枚の縦横比が少し違う（座席表1.293／席次表1.320）ので、枠を1.3:1に固定して中に収める。
     こうすると、あとで撮り直しても2つのカードは同じ形のまま
   ⚠height:auto が要る。<img height="758"> の属性が高さを決めてしまい、
     これが無いと aspect-ratio が効かない（2026-09-01 実測） */
.t-shot{
  display:block;width:100%;height:auto;aspect-ratio:1.3 / 1;
  object-fit:contain;background:#fff;
  border:0;border-radius:10px;margin:0 0 14px;
  /* 🔴 スマホには「マウスを乗せる」が無い＝触った時点でもう押した後（2026-09-03 本人）。
     だから**触る前から押せる板に見せる**。常に影を敷いて浮かせておく。
     ⚠ 線は付けない（本人「ピンクの線（緑の線）はなしにしてみて」）。
       輪郭は影だけで出す＝そのぶん影は強めにする */
  box-shadow:0 5px 16px rgba(0,0,0,.17), 0 1px 3px rgba(0,0,0,.10);
}
.t-tool .nm{font-size:1.08rem;font-weight:700;display:block;margin-bottom:5px}
.t-tool .ds{font-size:.86rem;color:var(--ink-soft);display:block;line-height:1.7}



/* 「使ってみる →」のボタン。太字は 2026-08-30 に本人の希望で追加 */
.t-tool .go{
  display:inline-block;margin-top:11px;font-size:.85rem;padding:8px 18px;
  text-decoration:none;
  border-radius:999px;color:#fff;font-weight:700;
  /* 🔴 絵と同じで、押せる板に見せる（2026-09-03 本人）。影はグレー */
  box-shadow:0 3px 10px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.10);
  transition:box-shadow .16s ease, transform .16s ease, filter .16s ease;
}
.t-col.l .t-tool .go{background:var(--pink)}
.t-col.r .t-tool .go{background:var(--midori)}
.t-tool:hover .go{opacity:.88}

/* 🔴 絵を押せることが分かるようにする（2026-09-03 本人）。
   本人「絵をタップしたら動くっていうイメージがないんじゃないかな。
        マウスポインタを置くと影とか光るとか、そういう仕組みにして」
   ⚠ hover:hover ＝マウスがある機器だけ。付けないと、スマホで触ったあと色が残り続ける */
.t-shot{transition:box-shadow .18s ease, filter .18s ease, transform .18s ease}
/* 🔴 絵とボタンは**別々に**反応する（2026-09-03 本人「個別に4つの入り口にして」）。
   ⚠乗せたほうだけが動く。もう片方は動かない。
   ⚠乗せただけで暗くしない。暗くするのは「押した」の合図 */
@media (hover:hover){
  .t-shot-link:hover .t-shot{
    box-shadow:0 14px 30px rgba(0,0,0,.22), 0 2px 5px rgba(0,0,0,.12);
    filter:brightness(1.02);
    transform:translateY(-3px);
  }
  .t-tool .go:hover{
    opacity:1;filter:brightness(1.04);
    box-shadow:0 8px 18px rgba(0,0,0,.24), 0 1px 3px rgba(0,0,0,.10);
    transform:translateY(-2px);
  }
}
/* 🔴 指で使う機器では影を強くする（2026-09-03 本人・「席替えする」と同じ考え方） */
@media (hover:none){
  .t-tool .go{box-shadow:0 6px 18px rgba(0,0,0,.28), 0 2px 4px rgba(0,0,0,.12)}
}
/* ⭐ 押した瞬間は沈ませる（指の人には、これが「押せた」の合図になる）。
   ⚠押したほうだけが沈む */
.t-shot-link:active .t-shot{box-shadow:0 1px 4px rgba(0,0,0,.16);transform:translateY(1px) scale(.995)}
.t-tool .go:active{box-shadow:0 1px 3px rgba(0,0,0,.16);transform:translateY(2px);filter:brightness(.9)}

/* じゅんび中は、枠を作らず文字だけ。できているものと見分けがつくように */
.t-soon{border-top:1px solid var(--line);margin-top:22px;padding-top:16px}
.t-soon p{margin:0 0 6px;font-size:.83rem;color:var(--ink-soft)}
.t-soon .lbl{
  font-size:.72rem;letter-spacing:.1em;color:var(--ink-soft);
  opacity:.75;margin-bottom:9px;
}

/* ---- 読み物 ---- */
.t-about{max-width:44em;margin-bottom:32px}
.t-about h2{font-size:1rem;margin:0 0 10px;padding-left:0}
.t-about p{color:var(--ink-soft);font-size:.9rem;margin:0}

@media(max-width:720px){
  /* 🔴 スマホだけ「だから安心」を次の行に落とす。読点も消す */
  .t-catch .cm{display:none}
  .t-catch .nl{display:block}
  .t-two{grid-template-columns:1fr}
  .t-hero{padding:18px 0 4px}
  .t-col{padding:22px 18px 18px}
}