@charset "UTF-8";
/* ==========================================================
   ウォーターボーイズ2027
   共通部分に影響しないよう、すべて #fp-wrap .wb 配下に限定
   SP：@media screen and (max-width: 768px)
   数値はXD（PC 1280px／SP 390px）の座標から算出
   ========================================================== */

#fp-wrap .wb {
  --wb-navy: #092373;
  --wb-curve: 127px; /* セクション下端カーブの深さ（左右端〜中央） */
  position: relative;
  overflow: hidden;
  color: #000;
  /* Mac：Hiragino Sans は W0〜W9 を font-weight で出し分けられる（StdN は W8 のみなので使わない）
     Windows：游ゴシック（太さは Bold まで）。Windowsに入っていることがある ProN（太字なし）より先に指定 */
  font-family: "Hiragino Sans", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 18px;
  line-height: 31px;
  text-align: center;
  -webkit-text-size-adjust: 100%;
}
#fp-wrap .wb *,
#fp-wrap .wb *::before,
#fp-wrap .wb *::after { box-sizing: border-box; }
/* リセットは :where() で詳細度を下げ、個別指定を優先させる */
#fp-wrap .wb :where(p, ul, dl, dt, dd, h1, h2, h3) { margin: 0; padding: 0; }
#fp-wrap .wb :where(ul) { list-style: none; }
#fp-wrap .wb :where(img) { max-width: 100%; height: auto; vertical-align: top; }
#fp-wrap .wb :where(a) { transition: opacity .2s; }
#fp-wrap .wb :where(a):hover { opacity: .75; }
#fp-wrap .wb .wb-sp { display: none; }
#fp-wrap .wb [hidden] { display: none !important; }

/* 共通JSがSPでアンカー先の直前に挿入する .cx_anchor_link（ヘッダー分の高さ）が
   セクションの重なりを崩さないよう、レイアウトから外す（ずらし分は main.js で処理） */
#fp-wrap .wb > .cx_anchor_link {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
}

/* ---------- スクロールで下からふわっと表示（main.js が .is-fade／.wb-fade／.is-in を付ける） ----------
   JSが動かない環境ではクラスが付かないので、最初から表示される */
#fp-wrap .wb.is-fade .wb-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
#fp-wrap .wb.is-fade .wb-fade.is-in { opacity: 1; transform: none; }

/* ---------- カーブ（下端を放物線で切り抜き、次のセクションに重ねる） ----------
   ボックスの下端＝カーブ中央。左右端はそこから --wb-curve 上がる */
#fp-wrap .wb-curve {
  position: relative;
  margin-bottom: calc(var(--wb-curve) * -1);
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% calc(100% - var(--wb-curve) + 1px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100Q50 200 0 0Z'/%3E%3C/svg%3E") bottom / 100% var(--wb-curve) no-repeat;
          mask:
    linear-gradient(#000, #000) top / 100% calc(100% - var(--wb-curve) + 1px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100Q50 200 0 0Z'/%3E%3C/svg%3E") bottom / 100% var(--wb-curve) no-repeat;
}
/* 先に書いたセクションほど手前に */
#fp-wrap .wb-links      { z-index: 7; }
#fp-wrap #introduction  { z-index: 6; }
#fp-wrap #about         { z-index: 5; }
#fp-wrap #project       { z-index: 4; }
#fp-wrap #comment       { z-index: 3; }
#fp-wrap #staff         { z-index: 2; }
#fp-wrap #sns           { z-index: 1; }

/* ---------- セクション共通 ---------- */
#fp-wrap .wb-sec {
  position: relative;
  background: center top / cover no-repeat;
}
#fp-wrap .wb-sec--navy  { color: #fff; background-image: url(../images/bg_navy.webp); background-color: #0c2464; }
#fp-wrap .wb-sec--deep  { color: #fff; background-image: url(../images/bg_deep.webp); background-color: #060f44; }
#fp-wrap .wb-sec--light { background-image: url(../images/bg_light.webp); background-color: #e9efff; }
#fp-wrap .wb-sec__inner { width: 1071px; max-width: 100%; margin: 0 auto; }

/* 上下の余白（上：前セクションのカーブ深さ＋カーブ中央から見出しまで／下：最終要素からカーブ中央まで） */
/* 見出しの上（カーブの一番下から約80px）と、エリアの下が釣り合うように調整 */
#fp-wrap #introduction { padding: calc(var(--wb-curve) + 82px) 0 119px; }
#fp-wrap #about        { padding: calc(var(--wb-curve) + 78px) 0 84px; }
#fp-wrap #project      { padding: calc(var(--wb-curve) + 79px) 0 117px; }
#fp-wrap #comment      { padding: calc(var(--wb-curve) + 84px) 0 127px; }
#fp-wrap #staff        { padding: calc(var(--wb-curve) + 84px) 0 150px; }
#fp-wrap #sns          { padding: calc(var(--wb-curve) + 67px) 0 0; }

/* 見出し：英字画像／日本語ラベル／罫線 */
#fp-wrap .wb-ttl {
  padding-bottom: 10px;
  border-bottom: 1px solid #000;
  font-size: 22px;
  font-weight: 800; /* W8（イントロ・コメントは W9） */
  line-height: 34px;
}
#fp-wrap .wb-ttl img { display: block; margin: 0 auto 14px; }
#fp-wrap .wb-ttl > span { display: block; }
#fp-wrap #introduction .wb-ttl img { width: 401px; }
#fp-wrap #about        .wb-ttl img { width: 184px; }
#fp-wrap #project      .wb-ttl img { width: 229px; }
#fp-wrap #comment      .wb-ttl img { width: 269px; }
#fp-wrap #staff        .wb-ttl img { width: 156px; margin-bottom: 24px; }
#fp-wrap #staff        .wb-ttl     { padding-bottom: 0; }
#fp-wrap #sns          .wb-ttl img { width: 345px; }
#fp-wrap .wb-sec--navy .wb-ttl,
#fp-wrap .wb-sec--deep .wb-ttl { border-color: #fff; color: #d4e0fd; }
#fp-wrap #introduction .wb-ttl { color: #e3ecfe; font-weight: 900; }
#fp-wrap #comment      .wb-ttl { font-weight: 900; }

/* 本文（左揃えの段落） */
#fp-wrap .wb-text { width: 705px; max-width: 100%; margin: 39px auto 0; text-align: left; }
#fp-wrap .wb-text p + p { margin-top: 31px; }

/* ---------- メインビジュアル ---------- */
#fp-wrap .wb-hero {
  position: relative;
  padding: 45px 20px 61px;
  background: #fff url(../images/main.webp) center top / cover no-repeat;
}
#fp-wrap .wb-hero__logo { width: 550px; margin: 0 auto; }
#fp-wrap .wb-hero__onair {
  width: 466px;
  margin: 32px auto 0;
  padding: 9px 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  color: var(--wb-navy);
  font-size: 34px;
  font-weight: 900; /* W9 */
  line-height: 58px;
  letter-spacing: -.075em;
  text-shadow: 0 0 2px #fff, 0 0 6px #fff, 0 0 12px rgba(255, 255, 255, .9), 0 0 20px rgba(255, 255, 255, .7); /* リード文と同じ白い光彩 */
}
#fp-wrap .wb-hero__num { font-size: 42px; line-height: 1; letter-spacing: -.03em; }
#fp-wrap .wb-hero__dash { margin-left: .3em; } /* 「る」と線がくっ付かないように */
#fp-wrap .wb-intro__dash { margin-left: .3em; } /* 「年」と線の間（半角スペースの代わり） */
#fp-wrap .wb-hero__lead {
  margin-top: 41px;
  font-size: 24px;
  font-weight: 700; /* W7 */
  line-height: 41px;
  letter-spacing: -.075em;
  /* 背景のプールが濃いので、白い光彩で文字を浮かせる（XDのドロップシャドウ白50%より強め） */
  text-shadow: 0 0 2px #fff, 0 0 6px #fff, 0 0 12px rgba(255, 255, 255, .9), 0 0 20px rgba(255, 255, 255, .7);
}

/* ---------- メニューボタン：波線3本＋「MENU」（丸なし）。画面の右上に固定 ---------- */
/* 上端の位置（--wb-btnTop）は、共通ヘッダーと重ならないようJSで設定 */
#fp-wrap .wb {
  --wb-btnTop: 40px;
  --wb-btnRight: 104px;
}
#fp-wrap .wb-menuBtn {
  position: fixed;
  top: var(--wb-btnTop);
  right: var(--wb-btnRight);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: #2c6abe; /* 線と文字の色。紺のセクションの上では白に（JSで .is-onDark） */
  cursor: pointer;
  transition: color .3s;
}
#fp-wrap .wb-menuBtn.is-onDark { color: #fff; }
#fp-wrap .wb-menuBtn__lines { display: block; }
/* マウスオーバーで、波線と「MENU」がいっしょに少し浮く */
#fp-wrap .wb-menuBtn__lines,
#fp-wrap .wb-menuBtn__label { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
#fp-wrap .wb-menuBtn:hover .wb-menuBtn__lines,
#fp-wrap .wb-menuBtn:hover .wb-menuBtn__label { transform: translateY(-3px); }
/* 3本の間隔がちょうど整数pxになる大きさにして、3本とも同じ太さで描かれるようにする。
   PCは間隔12px（Windowsの表示拡大125%・150%でも整数の画素になる）、SPは10px */
#fp-wrap .wb-menuBtn__lines svg {
  display: block;
  width: 48px;
  height: 35.29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.56; /* 約2.2px */
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* マウス・タップで押したときはフォーカス枠を出さない（キーボード操作では表示） */
#fp-wrap .wb-menuBtn:focus:not(:focus-visible),
#fp-wrap .wb-nav__close:focus:not(:focus-visible) { outline: none; }
#fp-wrap .wb-menuBtn__label {
  padding-left: .2em;
  font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .2em;
}

/* ---------- メニュー：ボタンの位置から波紋のように画面全体へ広がる ---------- */
/* 共通ヘッダーや「このページのトップへ」より手前に出す */
#fp-wrap .wb-nav {
  --wb-navR: 720px; /* 紺の4分の1円の半径 */
  position: fixed;
  top: var(--wb-navTop, 0px); /* PCは共通ヘッダーが見えている間はその下から（JSで設定） */
  left: 0;
  z-index: 100001;
  width: 100%;
  height: var(--wb-navH, calc(100% - var(--wb-navTop, 0px) - var(--wb-navBottom, 0px))); /* SPは共通の下のバーの上まで。実際に見えている高さをJSで設定 */
  visibility: hidden;
  text-align: left;
  /* 閉じた状態：ボタンの位置の小さな円（JSで --cx/--cy/--rMax を設定） */
  clip-path: circle(24px at var(--cx, 100%) var(--cy, 0));
  transition: clip-path .5s cubic-bezier(.55, 0, .45, 1) .08s, visibility 0s .6s;
}
#fp-wrap .wb-nav.is-open {
  visibility: visible;
  clip-path: circle(var(--rMax, 150vmax) at var(--cx, 100%) var(--cy, 0));
  transition: clip-path .75s cubic-bezier(.25, .8, .3, 1), visibility 0s;
}
/* 紺の4分の1円（右上が中心） */
#fp-wrap .wb-nav__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--wb-navy);
  clip-path: circle(var(--wb-navR) at 100% 0);
}
#fp-wrap .wb-nav__visual { display: none; }
#fp-wrap .wb-nav__body { position: absolute; top: 0; right: var(--wb-btnRight); padding-top: calc(var(--wb-btnTopIn, var(--wb-btnTop)) + 72px); }
/* 開くときに広がる輪（水の波紋）。メニューと同じ範囲で切り取り、共通ヘッダーや下のバーには重ねない */
#fp-wrap .wb-navRings {
  position: fixed;
  top: var(--wb-navTop, 0px);
  left: 0;
  z-index: 100002;
  width: 100%;
  height: var(--wb-navH, calc(100% - var(--wb-navTop, 0px) - var(--wb-navBottom, 0px)));
  overflow: hidden;
  pointer-events: none;
}
#fp-wrap .wb-navRings i {
  position: absolute;
  top: var(--ry, 0px); /* 輪の中心（メニュー基準。JSで設定） */
  left: var(--rx, 0px);
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border: 1px solid rgba(190, 218, 255, .7);
  border-radius: 50%;
  opacity: 0;
}
#fp-wrap .wb-navRings.is-go i { animation: wb-ring 1.4s cubic-bezier(.25, .6, .35, 1) forwards; }
#fp-wrap .wb-navRings.is-go i:nth-child(2) { animation-delay: .22s; border-color: rgba(255, 255, 255, .55); }
@keyframes wb-ring {
  0%   { opacity: .7; transform: scale(1); }
  100% { opacity: 0; transform: scale(4.5); }
}
/* 中身：閉じるときはすぐ沈み、開くときは広がってから1つずつ浮かぶ */
#fp-wrap .wb-nav__visual img,
#fp-wrap .wb-nav__close,
#fp-wrap .wb-nav__list li,
#fp-wrap .wb-nav .wb-snsIcons--nav li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .2s ease, transform .2s ease;
}
#fp-wrap .wb-nav.is-open .wb-nav__visual img,
#fp-wrap .wb-nav.is-open .wb-nav__close,
#fp-wrap .wb-nav.is-open .wb-nav__list li,
#fp-wrap .wb-nav.is-open .wb-snsIcons--nav li {
  opacity: 1;
  transform: none;
  transition: opacity .4s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
/* 開いてすぐ押せるよう、円が広がり始めてすぐ順番に出す（全部そろうまで約1秒） */
#fp-wrap .wb-nav.is-open .wb-nav__visual img { transition-delay: .15s; }
/* ロゴ：押すとページの一番上へ。マウスを乗せると少し大きくなる */
#fp-wrap .wb-nav__home { cursor: pointer; }
#fp-wrap .wb-nav.is-open .wb-nav__home:hover { transform: scale(1.05); transition-delay: 0s; }
#fp-wrap .wb-nav__home:focus:not(:focus-visible) { outline: none; }
#fp-wrap .wb-nav.is-open .wb-nav__close { transition-delay: .15s; }
#fp-wrap .wb-nav.is-open .wb-nav__list li:nth-child(1) { transition-delay: .19s; }
#fp-wrap .wb-nav.is-open .wb-nav__list li:nth-child(2) { transition-delay: .23s; }
#fp-wrap .wb-nav.is-open .wb-nav__list li:nth-child(3) { transition-delay: .27s; }
#fp-wrap .wb-nav.is-open .wb-nav__list li:nth-child(4) { transition-delay: .31s; }
#fp-wrap .wb-nav.is-open .wb-nav__list li:nth-child(5) { transition-delay: .35s; }
#fp-wrap .wb-nav.is-open .wb-nav__list li:nth-child(6) { transition-delay: .39s; }
#fp-wrap .wb-nav.is-open .wb-snsIcons--nav li:nth-child(1) { transition-delay: .39s; }
#fp-wrap .wb-nav.is-open .wb-snsIcons--nav li:nth-child(2) { transition-delay: .43s; }
#fp-wrap .wb-nav.is-open .wb-snsIcons--nav li:nth-child(3) { transition-delay: .47s; }
@media (prefers-reduced-motion: reduce) {
  #fp-wrap .wb-nav, #fp-wrap .wb-nav * { transition: none !important; }
  #fp-wrap .wb-navRings { display: none; }
}
/* ×：メニューボタンと同じ位置 */
#fp-wrap .wb-nav__close {
  position: absolute;
  top: calc(var(--wb-btnTopIn, var(--wb-btnTop)) - 4px);
  right: var(--wb-btnRight);
  z-index: 2; /* 項目リンクより手前に（押し間違い防止） */
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
#fp-wrap .wb-nav__close::before,
#fp-wrap .wb-nav__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  right: 4px;
  height: 2px;
  margin-top: -1px;
  background: #fff;
  transform: rotate(45deg);
}
#fp-wrap .wb-nav__close::after { transform: rotate(-45deg); }
#fp-wrap .wb-nav__list a {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: #fff;
  font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  font-size: 28px;
  line-height: 34px;
  text-decoration: none;
}
#fp-wrap .wb-nav__list a::before { content: ""; width: 22px; height: 2px; background: #fff; }
#fp-wrap .wb-nav .wb-snsIcons--nav { gap: 18px; margin: 30px 0 0; }
#fp-wrap .wb-nav .wb-snsIcons--nav a { width: 64px; height: 64px; }
#fp-wrap .wb-nav .wb-snsIcons--nav svg { width: 34px; height: 34px; }

/* PC：4分の1円の外側はプールの写真＋ロゴ（元のデザインと同様）。
   項目は3列（2行）にして高さを抑え、広告枠が入る低い画面でもSNSまで収まるように */
@media screen and (min-width: 769px) {
  #fp-wrap .wb-nav { background: #fff url(../images/main.webp) center bottom / cover no-repeat; }
  #fp-wrap .wb-nav__visual {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - var(--wb-navR) + 80px);
    height: 100%;
  }
  #fp-wrap .wb-nav__visual img { display: block; width: 280px; max-width: 80%; height: auto; }
  #fp-wrap .wb-nav__list {
    display: grid;
    grid-template-columns: repeat(3, max-content); /* 横に3つずつ（左上からページの順番どおりに読める） */
    column-gap: 56px;
    row-gap: 18px;
  }
  #fp-wrap .wb-nav .wb-snsIcons--nav { justify-content: center; } /* 項目の幅に対して中央 */
}

/* ---------- 動画 ---------- */
#fp-wrap .wb-movie {
  padding: 60px 20px 75px;
  background: #e9efff url(../images/bg_light.webp) center / cover no-repeat;
}
/* 動画に添えるラベル（見出しではなく、何の動画かを示す） */
#fp-wrap .wb-movie__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 14px;
  color: var(--wb-navy);
  font-size: 26px;
  font-weight: 800; /* W8 */
  line-height: 1.4;
  letter-spacing: .12em;
}
#fp-wrap .wb-movie__label::before,
#fp-wrap .wb-movie__label::after { content: ""; width: 24px; height: 2px; background: currentColor; }
#fp-wrap .wb-movie__player { width: 700px; max-width: 100%; margin: 0 auto; }
#fp-wrap .wb-movie__player iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* ---------- 配信・SNSリンク ---------- */
#fp-wrap .wb-links {
  padding: 47px 20px 44px; /* SNSアイコンを下端のカーブから少し離す */
  background: #bedaff;
}
#fp-wrap .wb-links__vod { display: flex; justify-content: center; gap: 25px; }
#fp-wrap .wb-links__vod img { width: 202px; box-shadow: 0 4px 10px rgba(9, 35, 115, .3); } /* SNSアイコンと同じ影 */
#fp-wrap .wb-snsIcons { display: flex; justify-content: center; gap: 22px; margin-top: 41px; }
#fp-wrap .wb-snsIcons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(9, 35, 115, .3); /* 白い輪＋うっすら影で背景から浮かせる */
  background: #000;
}
#fp-wrap .wb-snsIcons__ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%) !important; }
#fp-wrap .wb-snsIcons svg { width: 44px; height: 44px; fill: #fff; }

/* 公式ハッシュタグ：SNSアイコンの上（アイコンの見出しのように置く） */
#fp-wrap .wb-hashtag { margin-top: 42px; color: var(--wb-navy); }
#fp-wrap .wb-hashtag + .wb-snsIcons { margin-top: 14px; }
#fp-wrap .wb-hashtag__name { font-size: 17px; font-weight: 700; /* W7 */ line-height: 1.4; }
/* ハッシュタグはロゴの光る波のような鮮やかな青のグラデーション＋白い光彩で、背景の水色から浮かせる */
#fp-wrap .wb-hashtag__name span {
  display: inline-block;
  margin-left: .3em;
  color: #0a4fe0; /* グラデーション非対応のブラウザ用 */
  font-size: 32px;
  font-weight: 900; /* W9 */
  letter-spacing: -.02em;
  background: linear-gradient(90deg, #0033d6, #0a6cff 50%, #12a6ff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9)) drop-shadow(0 0 10px rgba(255, 255, 255, .6));
}

/* ---------- INTRODUCTION ---------- */
#fp-wrap .wb-intro { margin-top: 45px; font-size: 20px; line-height: 30px; letter-spacing: -.025em; }
#fp-wrap .wb-intro__stage { line-height: 34px; }
#fp-wrap .wb-intro .wb-intro__stage + p { margin-top: 16px; }
#fp-wrap .wb-intro__strong { margin-top: 37px; font-size: 22px; font-weight: 800; line-height: 37px; letter-spacing: 0; }
#fp-wrap .wb-intro .wb-intro__strong + .wb-intro__strong { margin-top: 35px; }
/* 太字ブロックは見出し画像と同じく、文字の中に水面の模様を入れる（非対応ブラウザは単色） */
#fp-wrap .wb-intro__strong {
  color: #e3ecfe;
  background: url(../images/tx_intro.webp) center / 400px auto repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
#fp-wrap .wb-intro .wb-intro__last { margin-top: 55px; font-size: 22px; line-height: 37px; letter-spacing: .025em; }

/* ---------- PROJECT ---------- */
/* 対応ブラウザでは、最後の行に1〜2文字だけ残らないように改行を整える */
#fp-wrap .wb-intro p, #fp-wrap .wb-project__catch, #fp-wrap .wb-project__text { text-wrap: pretty; }
#fp-wrap .wb-project__catch { margin-top: 44px; font-size: 22px; font-weight: 800; line-height: 37px; }
#fp-wrap .wb-project__text { width: 705px; max-width: 100%; margin: 33px auto 0; line-height: 32px; }

/* ---------- COMMENT ---------- */
#fp-wrap .wb .wb-comment__name { margin-top: 31px; /* 段落間と同じ */ text-align: right; } /* 本文と同じ18px */
#fp-wrap .wb-comment__name small { font-size: 14px; }

/* ---------- STAFF ---------- */
#fp-wrap .wb-staff { margin-top: 59px; }
#fp-wrap .wb-staff dt {
  margin-top: 25px;
  color: var(--wb-navy);
  font-size: 21px;
  font-weight: 800; /* W8 */
  line-height: 36px;
}
#fp-wrap .wb-staff dt:first-child { margin-top: 0; }
#fp-wrap .wb-staff dd { margin-top: 4px; }
#fp-wrap .wb-staff small { font-size: 14px; }

/* ---------- OFFICIAL SNS（一旦非表示） ---------- */
#fp-wrap .wb-sns {
  background: linear-gradient(#bedaff 0, #e8f2ff 1500px, #fff 1800px);
}
#fp-wrap .wb-sns .wb-sec__inner { padding-bottom: 60px; }
#fp-wrap .wb-sns__xBtn a {
  position: relative;
  display: block;
  width: 640px;
  max-width: 100%;
  margin: 40px auto 0;
  border-radius: 10px;
  background: var(--wb-navy);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 65px;
  letter-spacing: -.075em;
  text-decoration: none;
}
#fp-wrap .wb-sns__xBtn a::after { content: "＞"; position: absolute; right: 22px; font-size: 16px; }
#fp-wrap .wb-sns__ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 60px 0 18px;
  font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  font-size: 32px;
  font-weight: normal;
  line-height: 39px;
}
#fp-wrap .wb-sns__ttl::before,
#fp-wrap .wb-sns__ttl::after { content: ""; width: 72px; height: 1px; background: #000; }
/* 仮枠：Instagram・TikTok埋め込みに差し替えるまで */
#fp-wrap .wb-sns__insta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 710px;
  max-width: 100%;
  margin: 0 auto;
}
#fp-wrap .wb-sns__insta li,
#fp-wrap .wb-sns__tiktok { border: 1px solid #707070; background: #eaeaea; }
#fp-wrap .wb-sns__insta li { aspect-ratio: 227 / 246; }
#fp-wrap .wb-sns__tiktok { width: 710px; max-width: 100%; height: 507px; margin: 0 auto; }

/* 注意書き（STAFFのカーブを受ける） */
#fp-wrap .wb-note {
  padding: calc(var(--wb-curve) + 60px) 20px 80px;
  background: linear-gradient(#e9efff, #fff);
  color: #333;
  font-size: 16px;
  line-height: 27px;
}

/* ==========================================================
   SP（幅768px以下）
   ========================================================== */
@media screen and (max-width: 768px) {
  /* SPの文字サイズは本文16px基準（XDの18pxから一段階小さく）。行間は約1.75倍 */
  #fp-wrap .wb { --wb-curve: 34px; font-size: 16px; line-height: 28px; }
  #fp-wrap .wb small { font-size: 13px; }
  #fp-wrap .wb .wb-pc { display: none; }
  #fp-wrap .wb .wb-sp { display: inline; }

  #fp-wrap #introduction { padding: calc(var(--wb-curve) + 50px) 15px 53px; }
  #fp-wrap #about        { padding: calc(var(--wb-curve) + 50px) 15px 68px; }
  #fp-wrap #project      { padding: calc(var(--wb-curve) + 50px) 15px 47px; }
  #fp-wrap #comment      { padding: calc(var(--wb-curve) + 50px) 15px 59px; }
  #fp-wrap #staff        { padding: calc(var(--wb-curve) + 50px) 15px 67px; }
  #fp-wrap #sns          { padding: calc(var(--wb-curve) + 40px) 15px 0; }

  #fp-wrap .wb-ttl { padding-bottom: 21px; font-size: 17px; line-height: 28px; }
  #fp-wrap .wb-ttl img { margin-bottom: 9px; }
  #fp-wrap #introduction .wb-ttl img { width: 323px; }
  #fp-wrap #about        .wb-ttl img { width: 153px; }
  #fp-wrap #project      .wb-ttl img { width: 193px; }
  #fp-wrap #comment      .wb-ttl img { width: 230px; }
  #fp-wrap #staff        .wb-ttl img { width: 136px; margin-bottom: 9px; }
  #fp-wrap #staff        .wb-ttl     { padding-bottom: 23px; }
  #fp-wrap #sns          .wb-ttl img { width: 305px; }
  #fp-wrap .wb-text { width: auto; margin-top: 29px; padding: 0 15px; }
  #fp-wrap .wb-text p + p { margin-top: 28px; }

  /* メインビジュアル */
  #fp-wrap .wb-hero { padding: 93px 15px 33px; background-position: center bottom; background-size: 1280px auto; }
  #fp-wrap .wb-hero__logo { width: 348px; max-width: 100%; }
  #fp-wrap .wb-hero__onair { width: 320px; max-width: 100%; margin-top: 37px; padding: 1px 0; font-size: 24px; line-height: 48px; }
  #fp-wrap .wb-hero__num { font-size: 30px; }
  #fp-wrap .wb-hero__lead { margin-top: 30px; font-size: 18px; line-height: 31px; letter-spacing: -.025em; }

  /* メニューボタン（上端の位置はJSで共通ヘッダーの出し入れに合わせる） */
  #fp-wrap .wb { --wb-btnTop: 30px; --wb-btnRight: 18px; }
  #fp-wrap .wb-menuBtn { gap: 3px; transition: color .3s, top .5s; }
  #fp-wrap .wb-menuBtn__lines svg { width: 40px; height: 29.41px; stroke-width: 1.7; } /* 線は約2px */
  #fp-wrap .wb-menuBtn__label { font-size: 10px; }

  /* メニュー：画面幅より大きい4分の1円にして、左下が丸く欠けるようにする。
     外側（下）はPCと同様にプールの写真＋ロゴ */
  #fp-wrap .wb-nav { --wb-navR: 105vw; background: #fff url(../images/main.webp) center bottom / cover no-repeat; text-align: right; }
  #fp-wrap .wb-nav__visual {
    position: absolute;
    top: var(--wb-visTop, 140vw); /* 4分の1円の弧（画面中央での高さ）より下の部分。JSで設定 */
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  #fp-wrap .wb-nav.is-noLogo .wb-nav__visual img { display: none; }
  #fp-wrap .wb-nav__visual img { display: block; width: auto; height: auto; max-width: 180px; max-height: 70%; }
  /* 項目・SNSを詰めて紺の円を小さくし、下にロゴを置ける高さを確保する */
  #fp-wrap .wb-nav__body { right: 24px; padding-top: calc(var(--wb-btnTopIn, var(--wb-btnTop)) + 51px); }
  #fp-wrap .wb-nav__close { top: calc(var(--wb-btnTopIn, var(--wb-btnTop)) - 4px); right: 14px; width: 50px; height: 50px; }
  /* 指で押しやすいよう、各項目の押せる範囲を高さ44pxに（文字30px＋上下7px）。1行分の間隔は48px */
  #fp-wrap .wb-nav__list li + li { margin-top: 4px; }
  #fp-wrap .wb-nav__list a { padding: 7px 0; font-size: 24px; line-height: 30px; }
  #fp-wrap .wb-nav .wb-snsIcons--nav { justify-content: flex-end; gap: 14px; margin-top: 15px; }
  #fp-wrap .wb-nav .wb-snsIcons--nav a { width: 52px; height: 52px; border-width: 3px; }
  #fp-wrap .wb-nav .wb-snsIcons--nav svg { width: 28px; height: 28px; }

  /* 動画 */
  #fp-wrap .wb-movie { padding: 31px 15px 35px; } /* 上（＋「特報」の行間）と下が同じくらいになるように */
  #fp-wrap .wb-movie__label { gap: 10px; margin-bottom: 10px; font-size: 21px; }
  #fp-wrap .wb-movie__label::before,
  #fp-wrap .wb-movie__label::after { width: 18px; }

  /* 配信・SNSリンク */
  #fp-wrap .wb-links { padding: 41px 15px 70px; }
  #fp-wrap .wb-links__vod { gap: 16px; }
  #fp-wrap .wb-links__vod li { flex: 1; max-width: 172px; }
  #fp-wrap .wb-links__vod img { width: 100%; }
  #fp-wrap .wb-snsIcons { margin-top: 18px; }
  #fp-wrap .wb-hashtag { margin-top: 28px; }
  #fp-wrap .wb-hashtag + .wb-snsIcons { margin-top: 10px; }
  #fp-wrap .wb-hashtag__name { font-size: 14px; }
  #fp-wrap .wb-hashtag__name span { display: table; margin: 4px auto 0; font-size: 26px; } /* 改行して中央に */

  /* INTRODUCTION */
  #fp-wrap .wb-intro { margin-top: 23px; font-size: 16px; line-height: 28px; }
  #fp-wrap .wb-intro__stage { line-height: 28px; }
  #fp-wrap .wb-intro .wb-intro__stage + p { margin-top: 23px; }
  #fp-wrap .wb-intro__strong { margin-top: 19px; font-size: 17px; line-height: 31px; }
  #fp-wrap .wb-intro .wb-intro__strong + .wb-intro__strong { margin-top: 15px; }
  #fp-wrap .wb-intro .wb-intro__last { margin-top: 12px; font-size: 16px; line-height: 28px; }

  /* PROJECT */
  #fp-wrap .wb-project__catch { margin-top: 22px; font-size: 17px; line-height: 29px; }
  #fp-wrap .wb-project__text { width: auto; margin-top: 23px; padding: 0; line-height: 28px; }
  /* センター寄せの文章は、罫線より左右3pxずつ広げて画面端から12pxに（幅の狭い端末で1〜2文字だけ落ちないように） */
  #fp-wrap .wb-intro, #fp-wrap .wb-project__catch, #fp-wrap .wb-project__text { margin-left: -3px; margin-right: -3px; }

  /* COMMENT（XDでは署名の右端が本文より内側） */
  #fp-wrap .wb .wb-comment__name { margin-top: 28px; padding-right: 19px; }

  /* STAFF */
  #fp-wrap .wb-staff { margin-top: 29px; } /* 他のセクションの見出し下と揃える */
  #fp-wrap .wb-staff dt { margin-top: 20px; font-size: 17px; line-height: 29px; } /* 役職ごとの間 */
  #fp-wrap .wb-staff small { font-size: 13px; }
  #fp-wrap .wb-staff dd { margin-top: 2px; }

  /* OFFICIAL SNS */
  #fp-wrap .wb-sns__xBtn a { margin-top: 29px; }
  #fp-wrap .wb-sns__ttl { margin-top: 40px; font-size: 20px; line-height: 24px; }
  #fp-wrap .wb-sns__insta { gap: 7px; }
  #fp-wrap .wb-sns__tiktok { height: auto; aspect-ratio: 360 / 344; }
  #fp-wrap .wb-note { padding: calc(var(--wb-curve) + 40px) 30px 50px; font-size: 13px; line-height: 22px; text-align: left; }
}