/* ============================================================
   home-v2.css
   トップページ（index.html）だけに読み込む試作用スタイル。
   style.css の土台（色・角丸・影・余白のトークン）はそのまま使い、
   「もっとデザイナーチックに」という要望に合わせて、
   ヒーローの写真の見せ方・カードの色づかい・アイコンの丸バッジ化
   など、見た目の装飾だけをこのファイルで上書きしています。

   body class="t3 home-v2" のページにしか効かないので、
   他の38ページには一切影響しません。
   ============================================================ */

body.home-v2 {
  overflow-x: hidden; /* 装飾の飛び出しで横スクロールが出ないための安全策 */
}

/* ---------- 左右の余白：画面いっぱいに文字が広がらないようにする ---------- */
/* 参考サイトのように、大きい画面では中央に幅を決めて、まわりを余白にする。
   最上部の帯・ヘッダー・フッターは、これまでどおり全幅の帯として残す
   （他の38ページと同じ見た目のまま、本文の幅だけをそろえる）。 */
body.home-v2 .wrap {
  max-width: 1180px;
  margin-inline: auto;
}

/* ---------- 差し色（カードの背景用パステル） ---------- */
body.home-v2 {
  --pastel-sky:    #EAF4FB;
  --pastel-peach:  #FDF1E7;
  --pastel-mint:   #EAF7F0;
  --pastel-lav:    #F3EEFB;
  --pastel-pink:   #FDEFF2;
  --pastel-yellow: #FFF8E5;
}

/* ---------- 見出しに二色のアンダーライン ---------- */
body.home-v2 main h2 {
  position: relative;
  display: inline-block;
  padding-bottom: var(--space-3);
}
body.home-v2 main h2::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 52px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-highlight));
}

/* ============================================================
   ヒーロー：以前のデザイン（全幅の写真に文字を重ねる）に戻した。
   見出しの二色づかいと、下の「続きを見る」の合図だけを残している。
   ============================================================ */
body.home-v2 .hero__body h1 .accent { color: var(--color-accent); }

/* ヒーローのボタン・電話番号：丸いピル型にして、アイコンをつける */
body.home-v2 .hero-v2__btn {
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: 999px;
}
body.home-v2 .hero-v2__btn svg { width: 19px; height: 19px; flex: none; }
body.home-v2 .hero-v2__tel {
  display: flex; align-items: center; gap: 8px;
}
body.home-v2 .hero-v2__tel svg { width: 17px; height: 17px; flex: none; color: var(--color-accent); }

/* ============================================================
   分からなくなったら、隣で一緒に考えます：イラストの飾り方。
   影と丸バッジのキャプションで、ただ画像を置いただけに見えないようにする。
   ============================================================ */
.manga-figure {
  position: relative;
  padding: 22px 0 26px 22px;
}
.manga-figure__dots {
  position: absolute; z-index: 0; pointer-events: none;
  left: 0; top: 0;
  width: 96px; height: 96px;
  background-image: radial-gradient(circle, var(--color-secondary) 2.2px, transparent 2.6px);
  background-size: 16px 16px;
  opacity: .35;
}
.manga-figure__img {
  position: relative; z-index: 1;
  width: 100%;
  aspect-ratio: 6 / 5;
  object-position: center 30%;
}
.manga-figure__cap {
  position: absolute; z-index: 2;
  left: 40px; bottom: 0;
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  padding: 10px 20px;
  font-family: var(--font-heading); font-weight: 700; font-size: 13.5px;
  color: var(--color-primary);
  white-space: nowrap;
}
.manga-figure__cap svg { width: 17px; height: 17px; flex: none; color: var(--color-accent); }

/* ============================================================
   スクロールで少しずつ表示される動き（.reveal）
   JavaScript（home-v2.js）が、画面に入ってきた要素に
   is-visible クラスをつける。CSS側はその前後の見た目だけを担当。
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* 「何をなさりたいですか」のカード列は、少しずつ時間差で出す */
.wrap.section.reveal.is-visible .door { animation: doorPop .5s ease backwards; }
.wrap.section.reveal.is-visible .door:nth-child(1) { animation-delay: .05s; }
.wrap.section.reveal.is-visible .door:nth-child(2) { animation-delay: .12s; }
.wrap.section.reveal.is-visible .door:nth-child(3) { animation-delay: .19s; }
.wrap.section.reveal.is-visible .door:nth-child(4) { animation-delay: .26s; }
.wrap.section.reveal.is-visible .door:nth-child(5) { animation-delay: .33s; }
.wrap.section.reveal.is-visible .door:nth-child(6) { animation-delay: .40s; }
@keyframes doorPop {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* 実績カード（AIで作られたもの）も、1枚ずつ少し遅れて出す */
.wrap.section.reveal.is-visible .grid-3 > .work { animation: doorPop .55s ease backwards; }
.wrap.section.reveal.is-visible .grid-3 > .work:nth-child(1) { animation-delay: .05s; }
.wrap.section.reveal.is-visible .grid-3 > .work:nth-child(2) { animation-delay: .16s; }
.wrap.section.reveal.is-visible .grid-3 > .work:nth-child(3) { animation-delay: .27s; }

/* 「教室について」：文章が先に、写真が少し遅れてふわっと出る。
   参考にしたサイトの、要素ごとに時間差で見せる動きに合わせている */
.about.reveal .stack {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}
.about.reveal.is-visible .stack:nth-child(1) { opacity: 1; transform: none; }
.about.reveal.is-visible .stack:nth-child(2) {
  opacity: 1; transform: none;
  transition-delay: .18s;
}

/* ヒーロー下の「下にスクロール」の合図（写真の上、下端中央に重ねる） */
.hero-v2__scrollcue {
  position: absolute; z-index: 3;
  left: 50%; bottom: var(--space-5);
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.85);
  color: var(--color-primary);
  box-shadow: var(--shadow-card);
  animation: bob 1.8s ease-in-out infinite;
}
.hero-v2__scrollcue svg { width: 20px; height: 20px; }
@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

/* 一番目立たせたい「無料で相談する」ボタンに、呼吸するような輪を添える */
body.home-v2 .hero__body .btn--cta {
  animation: ctaGlow 2.6s ease-in-out infinite;
}
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,69,59,.32); }
  50%      { box-shadow: 0 0 0 9px rgba(201,69,59,0); }
}

/* 「動きを減らす」設定のときは、装飾のアニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .wrap.section.reveal.is-visible .door { animation: none; }
  .wrap.section.reveal.is-visible .grid-3 > .work { animation: none; }
  .about.reveal .stack { opacity: 1; transform: none; transition: none; }
  .hero-v2__scrollcue,
  body.home-v2 .hero__body .btn--cta { animation: none; }
}

/* ============================================================
   何をなさりたいですか（door）：白一色のカードから、
   6枚それぞれに淡い色を敷いたカードへ。
   アイコンは丸いバッジの中に。
   ============================================================ */
body.home-v2 .door {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
body.home-v2 .door:hover { transform: translateY(-4px); }
body.home-v2 .door::after { transition: transform .18s ease; }
body.home-v2 .door:hover::after { transform: translate(3px, -3px) rotate(45deg); }
body.home-v2 .door--hi { border: 2px solid var(--color-accent); }
body.home-v2 .door:nth-of-type(1) { background: var(--pastel-sky); }
body.home-v2 .door:nth-of-type(2) { background: linear-gradient(135deg, var(--pastel-peach), var(--pastel-yellow)); }
body.home-v2 .door:nth-of-type(3) { background: var(--pastel-mint); }
body.home-v2 .door:nth-of-type(4) { background: var(--pastel-lav); }
body.home-v2 .door:nth-of-type(5) { background: var(--pastel-pink); }
body.home-v2 .door:nth-of-type(6) { background: var(--pastel-yellow); }

body.home-v2 .door__head svg {
  box-sizing: content-box;
  width: 21px; height: 21px;
  padding: 10px; border-radius: 50%;
  color: #fff;
}
body.home-v2 .door:nth-of-type(1) .door__head svg { background: #2E7FBF; }
body.home-v2 .door:nth-of-type(2) .door__head svg { background: var(--color-accent); }
body.home-v2 .door:nth-of-type(3) .door__head svg { background: #2F8F4E; }
body.home-v2 .door:nth-of-type(4) .door__head svg { background: #6B5CA5; }
body.home-v2 .door:nth-of-type(5) .door__head svg { background: #C4577F; }
body.home-v2 .door:nth-of-type(6) .door__head svg { background: #A9803A; }

/* ============================================================
   講座カルーセル：横に自動で流れるカード列。
   「講座から探す」の上に置き、講座の雰囲気を先に見せる。
   写真は使わず、下のアイコングリッドと同じアイコン・色を使い回している
   （実物の教室写真ではない画像を、教室の様子のように見せないため）。
   JavaScript（home-v2.js）が、カードを複製してすき間なくループさせ、
   ゆっくり自動で流す。マウスでドラッグ、指でスワイプもできる。
   ============================================================ */
.course-carousel-section {
  padding: var(--space-6) 0 var(--space-2);
  overflow: hidden;
}
.course-carousel__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px var(--page-gutter) 14px;
  cursor: grab;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.course-carousel__track::-webkit-scrollbar { display: none; }
.course-carousel__track.is-dragging { cursor: grabbing; }

.cc-item {
  flex: 0 0 208px;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  -webkit-user-drag: none;
  user-select: none;
}
.cc-item__stage {
  position: relative;
  flex: none;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr, #2E7FBF);
}
.cc-item__stage > svg {
  width: 42px; height: 42px;
  color: #fff; opacity: .92;
}
.cc-item__badge {
  position: absolute; left: 10px; top: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
}
.cc-item__badge svg { width: 14px; height: 14px; color: var(--clr, #2E7FBF); }
.cc-item__bar {
  /* カードの高さは、一番説明文が長いカードに合わせて揃うため、
     ここが余った高さぶん伸びて、色の帯が下まで届くようにする
     （伸ばさないと、説明文の下に白い余白が残ってしまう） */
  flex: 1 1 auto;
  padding: 12px 14px 14px;
  background: var(--clr, #2E7FBF);
  color: #fff;
}
.cc-item__t {
  display: block;
  font-family: var(--font-heading); font-weight: 700; font-size: 14.5px;
  margin-bottom: 4px;
}
.cc-item__b {
  display: block;
  font-size: 12px; line-height: 1.5; opacity: .94;
}
.cc-item--blue   { --clr: #2E7FBF; }
.cc-item--indigo { --clr: #1F4E6E; }
.cc-item--teal   { --clr: #1C8A7A; }
.cc-item--green  { --clr: #2F8F4E; }
.cc-item--violet { --clr: #6B5CA5; }
.cc-item--rose   { --clr: #C4577F; }
.cc-item--sky    { --clr: #4FA3D1; }
.cc-item--sand   { --clr: #A9803A; }

@media (max-width: 900px) {
  .course-carousel-section { padding: var(--space-5) 0 var(--space-1); }
  .cc-item { flex-basis: 168px; }
  .cc-item__stage { height: 88px; }
  .cc-item__stage > svg { width: 34px; height: 34px; }
}

/* ============================================================
   講座から探す（course）：アイコンに色つきの丸バッジ。
   ============================================================ */
body.home-v2 .course {
  border: none; border-radius: 18px;
  transition: transform .18s ease, box-shadow .18s ease;
}
body.home-v2 .course:hover { transform: translateY(-3px); }
body.home-v2 .course::after { transition: transform .18s ease; }
body.home-v2 .course:hover::after { transform: translate(3px, -3px) rotate(45deg); }
body.home-v2 .course svg {
  box-sizing: content-box;
  width: 21px; height: 21px;
  padding: 9px; border-radius: 50%;
  color: #fff;
}
body.home-v2 .course--blue   svg { background: #2E7FBF; }
body.home-v2 .course--indigo svg { background: #1F4E6E; }
body.home-v2 .course--teal   svg { background: #1C8A7A; }
body.home-v2 .course--green  svg { background: #2F8F4E; }
body.home-v2 .course--violet svg { background: #6B5CA5; }
body.home-v2 .course--rose   svg { background: #C4577F; }
body.home-v2 .course--sky    svg { background: #4FA3D1; }
body.home-v2 .course--sand   svg { background: #A9803A; }

/* ============================================================
   20年、目の前でお教えしてきました：数字アイコンも丸バッジに。
   写真＋りぼんちゃんは、パステルの台紙に乗せて「実物感」を出す。
   ============================================================ */
body.home-v2 .num__v svg {
  box-sizing: content-box;
  width: 19px; height: 19px;
  padding: 8px; border-radius: 50%;
  background: var(--color-info); color: var(--color-primary);
}
body.home-v2 .about > .stack:nth-child(2) {
  background: var(--pastel-sky);
  border-radius: 28px;
  padding: var(--space-6);
}
/* 文字を「大」にしたとき、スマホ幅で数字の単位（社以上、名以上）が
   はみ出さないよう、折り返せるようにしておく */
body.home-v2 .num__v { flex-wrap: wrap; }
body.home-v2 .num__v > span { min-width: 0; }

/* ============================================================
   受講生がAIで作ったもの：写真の角に「AIで作成」のタグ。
   ============================================================ */
body.home-v2 .work { position: relative; overflow: hidden; border-radius: var(--rounded-xl); }
body.home-v2 .work .photo { transition: transform .35s ease; }
body.home-v2 .work:hover .photo { transform: scale(1.05); }
body.home-v2 .work::before {
  content: "AIで作成";
  position: absolute; z-index: 2; top: 10px; left: 10px;
  background: var(--color-accent); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  padding: 4px 13px; border-radius: 999px;
  box-shadow: var(--shadow-card);
}

/* ============================================================
   学費サポートの帯：アイコンを白い丸バッジに。
   ============================================================ */
body.home-v2 .band-amber { border-radius: 24px; }
body.home-v2 .hojo__icon {
  box-sizing: content-box;
  width: 30px; height: 30px;
  padding: 10px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-card);
}

/* ============================================================
   最後のひと押し：角丸を大きく、右上に控えめな丸い装飾。
   ============================================================ */
body.home-v2 .band-indigo {
  border-radius: 30px;
  position: relative; overflow: hidden;
}
body.home-v2 .band-indigo::after {
  content: "";
  position: absolute; z-index: 0; right: -46px; top: -46px;
  width: 170px; height: 170px; border-radius: 50%;
  background: rgba(255,255,255,.08);
}
body.home-v2 .band-indigo > * { position: relative; z-index: 1; }

/* ============================================================
   ボタン全般：押せる感じが伝わるよう、軽く浮かせる動きをつける。
   ============================================================ */
body.home-v2 .btn {
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body.home-v2 .btn:hover { transform: translateY(-2px); }

/* ============================================================
   右下の問い合わせボタン：丸いピル型を強調。
   ============================================================ */
body.home-v2 .fab {
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(201,69,59,.32);
}
body.home-v2 .fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(201,69,59,.38);
}

/* ============================================================
   モバイル（900px以下）：ヒーローを1カラムに。
   飛び出しカードは小さめ・余白を詰めて、横スクロールを防ぐ。
   ============================================================ */
@media (max-width: 900px) {
  body.home-v2 .about > .stack:nth-child(2) { padding: var(--space-5); border-radius: 22px; }

  /* イラストの飾りは、幅に合わせて少し控えめに */
  .manga-figure { padding: 16px 0 22px 16px; }
  .manga-figure__dots { width: 70px; height: 70px; }
  .manga-figure__cap { left: 22px; padding: 8px 16px; font-size: 12.5px; }
  .manga-figure__cap svg { width: 15px; height: 15px; }

  /* ---------------------------------------------------------
     ヒーロー：写真の上に文字を重ねると、重ねの白が濃すぎて
     写真がほぼ見えなくなってしまうため、スマホでは重ねるのをやめ、
     「上に写真（カード）・下に文字とボタン」という縦並びに変える。
     --------------------------------------------------------- */
  body.home-v2 .hero--photo {
    position: relative;
    display: block;
    overflow: visible;
    min-height: 0;
    padding: var(--space-5) var(--page-gutter) var(--space-7);
    background: var(--color-info);
  }
  body.home-v2 .hero--photo::before { display: none; }
  body.home-v2 .hero--photo .hero__media {
    position: static;
    display: block;
    border-radius: var(--rounded-xl);
    overflow: hidden;
    box-shadow: var(--shadow-photo);
    aspect-ratio: 4 / 3;
    margin-bottom: var(--space-6);
  }
  body.home-v2 .hero--photo .hero__media img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 85% 40%;
  }
  body.home-v2 .hero__body {
    position: static;
    max-width: none;
    gap: var(--space-4);
  }
  body.home-v2 .hero__body h1 { font-size: 28px; }
  body.home-v2 .hero__body .lead { font-size: 15.5px; }

  /* ボタンは、目立たせつつも場所を取りすぎないよう、
     ピル型・横並びにしてコンパクトにする */
  body.home-v2 .hero__body .btn-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  body.home-v2 .hero__body .btn-row .btn {
    width: auto;
    flex: 1 1 auto;
    min-height: 46px;
    font-size: 14.5px;
    padding: 0 var(--space-4);
  }
  body.home-v2 .hero-v2__tel { font-size: 13px; }
  body.home-v2 .hero-v2__tel a { font-size: 16px; }

  .hero-v2__scrollcue {
    position: static;
    margin: var(--space-5) auto 0;
    animation-name: bobStatic;
  }
}
@keyframes bobStatic {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-v2__scrollcue { animation: none; }
}