/* =============================================================
   静大＆県短　浜松バド部！！ — style.css
   明るいけれど落ち着いたトーン。線は細く、影はやわらかく。
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* 文字・線 */
  --ink:       #33414F;   /* 線と見出しの濃いスレート */
  --text:      #4A5866;   /* 本文 */
  --muted:     #7C8B99;   /* 補足 */

  /* 背景 */
  --bg:        #FCFBF8;   /* 生成りの白 */
  --bg-alt:    #F4F7F4;   /* ほんのり緑がかった白 */
  --bg-scape:  #EFF5F8;   /* ほんのり水色 */
  --sky-top:   #DCEDF6;
  --sky-btm:   #FCFBF8;

  /* イラストの色（SVGから var() で参照しています） */
  --fuji:      #7FA6CA;
  --sky-soft:  #DCEAF3;
  --leaf:      #6FA86B;
  --leaf-lt:   #9AC888;
  --mikan:     #E8A053;
  --clay:      #D08A6A;
  --sun:       #EFC86A;
  --eel:       #9A7050;
  --eel-lt:    #B98F68;
  --dough:     #EBDCB8;
  --cork:      #E7D9BE;

  --line:      1px solid #E3E6E2;
  --shadow:    0 4px 16px rgba(51,65,79,.06);
  --shadow-lg: 0 10px 30px rgba(51,65,79,.09);
  --radius:    14px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  line-height: 1.95;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  /* 日本語を文節の切れ目で折り返す（対応ブラウザのみ） */
  word-break: auto-phrase;
}

.sprite { display: none; }
svg { display: block; }

.container { max-width: 1000px; margin: 0 auto; padding: 0 28px; }
.sp-br { display: none; }


/* =============================================================
   ヒーロー
   ============================================================= */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, #EDF5F9 52%, var(--sky-btm) 100%);
  padding: 84px 28px 0;
}

.hero-deco { position: absolute; inset: 0; pointer-events: none; }

/* 雲 */
.cloud {
  position: absolute; background: #fff; border-radius: 999px; opacity: .62;
}
.cloud::before, .cloud::after {
  content: ""; position: absolute; background: #fff; border-radius: 50%;
}
.c1 { width: 150px; height: 40px; top: 14%; left: -60px; animation: drift 90s linear infinite; }
.c1::before { width: 58px; height: 58px; top: -26px; left: 28px; }
.c1::after  { width: 40px; height: 40px; top: -16px; left: 84px; }

.c2 { width: 116px; height: 32px; top: 40%; right: -60px; opacity: .5;
      animation: drift-back 110s linear infinite; }
.c2::before { width: 46px; height: 46px; top: -20px; left: 22px; }
.c2::after  { width: 32px; height: 32px; top: -12px; left: 62px; }

@keyframes drift      { from { transform: translateX(0); } to { transform: translateX(120vw); } }
@keyframes drift-back { from { transform: translateX(0); } to { transform: translateX(-120vw); } }

/* シャトルとラケット（ごく控えめに漂わせる） */
.fly { position: absolute; opacity: .9; }
.f1 { width: 46px; top: 22%; left: 9%;   animation: float 12s ease-in-out infinite; }
.f2 { width: 54px; top: 30%; right: 10%; animation: float 15s ease-in-out infinite 1.5s; }
@keyframes float {
  0%,100% { transform: translateY(0)     rotate(-6deg); }
  50%     { transform: translateY(-14px) rotate(6deg); }
}

/* --- 中身 --- */
.hero-inner {
  position: relative; z-index: 2;
  max-width: 900px; margin: 0 auto;
  text-align: center;
  padding-bottom: 250px;
}

.hero-kicker {
  font-size: clamp(.7rem, 2vw, .8rem);
  font-weight: 500; letter-spacing: .1em;
  color: #5D7183;
  margin-bottom: 26px;
}

.hero-title { line-height: 1.16; }
/* 直下の子だけをブロックにする（内側の ＆ や ！！ まで改行させないため） */
.hero-title > span { display: block; }

.t-sub {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  font-size: clamp(1.25rem, 3.6vw, 1.85rem);
  font-weight: 600; color: #5A7186;
  letter-spacing: .14em;
  margin-bottom: .5em;
}
.t-sub .amp { color: var(--mikan); margin: 0 .18em; }

.t-main {
  font-size: clamp(2.1rem, 7.4vw, 4.1rem);
  font-weight: 700; color: var(--ink);
  letter-spacing: .03em;
}
.t-main .bang { color: var(--mikan); letter-spacing: -.05em; }

.hero-lead {
  margin-top: 30px;
  font-size: clamp(.95rem, 2.5vw, 1.12rem);
  font-weight: 500; color: #48596A;
  line-height: 2.1;
}

/* 20年ぶりの再集合 */
.hero-pill {
  display: inline-flex; align-items: baseline; gap: .38em;
  margin-top: 34px;
  padding: 11px 26px;
  background: rgba(255,255,255,.78);
  border: 1px solid #C9DCE7;
  border-radius: 999px;
  font-size: .9rem; font-weight: 500; color: #40566A;
  letter-spacing: .04em;
}
.pill-num {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.5rem; font-weight: 700; color: var(--mikan);
  line-height: 1;
}

/* 富士山 */
.hero-scape {
  position: absolute; left: 0; right: 0; bottom: -2px;
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 1;
}
.hero-scape svg { width: 330px; max-width: 40vw; margin: 0 -44px; }
/* 手前の富士山を最前面に。奥の2つの輪郭が透けて見えないように */
.hero-scape svg:nth-child(2) { position: relative; z-index: 1; }
.hero-scape svg:nth-child(1) { width: 200px; opacity: .45; }
.hero-scape svg:nth-child(3) { width: 230px; opacity: .45; }


/* =============================================================
   セクション共通
   ============================================================= */
.section { padding: 96px 0; }
.section-alt   { background: var(--bg-alt);   border-top: var(--line); border-bottom: var(--line); }
.section-scape { background: var(--bg-scape); border-bottom: var(--line); }

.head { margin-bottom: 52px; }
.head.center { text-align: center; }

.eyebrow {
  font-size: .7rem; font-weight: 700; letter-spacing: .22em;
  color: var(--mikan);
  margin-bottom: 14px;
}
.eyebrow.light { color: #9EBCCE; }

.h2 {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  font-size: clamp(1.4rem, 4vw, 2.05rem);
  font-weight: 700; color: var(--ink);
  line-height: 1.6; letter-spacing: .04em;
}
.head .lead {
  margin-top: 20px;
  font-size: clamp(.88rem, 2.3vw, .98rem);
  color: var(--muted); line-height: 2.05;
}


/* =============================================================
   3つの「また」
   ============================================================= */
.cards {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}
.card {
  background: #fff;
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 44px 28px 38px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.card-ico { width: 66px; height: 82px; margin: 0 auto 22px; }
.card h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.16rem; font-weight: 700; color: var(--ink);
  letter-spacing: .05em; margin-bottom: 16px;
}
.card p { font-size: .88rem; line-height: 2.15; color: var(--text); }

.joke {
  margin-top: 42px; text-align: center;
  font-size: .84rem; color: var(--muted);
}


/* =============================================================
   集まりやすさ
   ============================================================= */
.points {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}
.point {
  background: #fff;
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 28px 34px;
}
.point-ico { width: 74px; height: 62px; margin-bottom: 20px; }
.point h3 {
  font-size: 1rem; font-weight: 700; color: var(--ink);
  line-height: 1.7; margin-bottom: 14px;
}
.point p { font-size: .87rem; line-height: 2.1; color: var(--text); }


/* =============================================================
   仲間の住む場所（日本地図）
   ============================================================= */
.map-wrap {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
}
.jp-map { width: 100%; height: auto; }

.jp-map .land {
  fill: #E1EBE4;
  stroke: #BED0C5;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
/* 実際の位置を指す点と、丸アイコンへの引き出し線 */
.jp-map .leader { stroke: var(--mikan); stroke-width: 1.6; opacity: .55; fill: none; }
.jp-map .spot   { fill: var(--mikan); }

/* 丸アイコン */
.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  display: grid; place-items: center;
  background: #fff;
  border: 2px solid var(--mikan);
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(51,65,79,.14);
  cursor: pointer;
  font-family: inherit;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.pin-name {
  font-size: .84rem; font-weight: 700; color: var(--ink);
  letter-spacing: .02em; line-height: 1;
  transition: color .2s ease;
}
.pin:hover, .pin:focus-visible {
  background: var(--mikan);
  transform: translate(-50%, -50%) scale(1.08);
  outline: none;
}

/* 夫婦など同じ場所の2人。横並びの1組として置くことで、
   地図が縮んでも間隔がpxのまま保たれ、重なりも離れもしない */
.pin-pair {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 5px;
}
.pin-pair .pin { position: relative; transform: none; }
.pin-pair .pin:hover,
.pin-pair .pin:focus-visible { transform: scale(1.08); z-index: 1; }
.pin:hover .pin-name, .pin:focus-visible .pin-name { color: #fff; }

/* 地名の吹き出し */
.pin-tip {
  position: absolute;
  bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: var(--ink); color: #fff;
  font-size: .76rem; font-weight: 500; line-height: 1;
  padding: 8px 13px; border-radius: 6px;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events: none;
}
.pin-tip::after {
  content: ""; position: absolute;
  top: 100%; left: 50%; margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.pin:hover .pin-tip, .pin:focus-visible .pin-tip {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}


/* =============================================================
   これから
   ============================================================= */
.soon {
  background: linear-gradient(170deg, #4E6E86 0%, #3E5A70 100%);
  border-radius: 20px;
  padding: 76px 36px 72px;
  text-align: center;
  color: #fff;
}
.soon-ico { width: 54px; margin: 0 auto 26px; rotate: 30deg; }
.soon-title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1.4rem, 4.2vw, 2rem);
  font-weight: 700; line-height: 1.6; letter-spacing: .05em;
  margin-bottom: 26px;
}
.soon-text {
  font-size: clamp(.88rem, 2.3vw, .98rem);
  line-height: 2.25;
  color: rgba(255,255,255,.9);
}


/* =============================================================
   フッター
   ============================================================= */
.footer {
  background: #33414F; color: #fff;
  text-align: center;
  padding: 56px 28px;
}
.footer-ico { width: 34px; margin: 0 auto 20px; opacity: .95; rotate: 30deg; }
.footer-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.02rem; font-weight: 700; letter-spacing: .06em;
}
.footer-note {
  margin-top: 14px; font-size: .78rem;
  color: rgba(255,255,255,.58); line-height: 2;
}


/* =============================================================
   スクロールで登場（app.js が付け外しします）
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1);
}
.reveal.is-in { opacity: 1; transform: none; }


/* =============================================================
   スマホ
   ============================================================= */
@media (max-width: 760px) {
  .sp-br { display: block; }
  .pc-br { display: none; }

  .hero { padding-top: 54px; }
  .hero-inner { padding-bottom: 150px; }
  .hero-kicker { font-size: .68rem; letter-spacing: .04em; line-height: 1.8; }
  /* 3つ並べても画面幅に収まるサイズに（端で断ち切られないように） */
  .hero-scape svg { max-width: 36vw; margin: 0 -20px; }

  /* タイトルに重ならないよう、空いている部分だけに残す */
  .f1 { width: 34px; top: 60%; left: 7%; }
  .f2 { width: 40px; top: 58%; right: 7%; }

  .section { padding: 68px 0; }
  .head { margin-bottom: 38px; }

  .card  { padding: 36px 22px 30px; }
  .point { padding: 30px 22px 28px; }

  /* 地図が小さくなる分、丸アイコンも小さく */
  .pin { width: 42px; height: 42px; }
  .pin-name { font-size: .72rem; }
  .pin-tip { font-size: .7rem; padding: 7px 10px; }

  .soon { padding: 56px 24px 52px; border-radius: 16px; }
}


/* =============================================================
   動きを減らす設定の人には静止して見せる
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}