/* ==========================================================================
   水族館をつくろう！ LP
   計測データ(スマホ実測 375px幅)を基準にしたトークン設計。
   ブレークポイント: 〜767px = スマホ / 768px〜 = タブレット・PC共通
   ========================================================================== */

:root {
  /* --- 色 --- */
  --color-blue: #2bb1ff;
  --color-blue-dark: #159ce8;
  --color-bg-blue: #eaf7ff;
  --color-bg-blue-soft: #dcf1ff;
  --color-text: #262a2a;
  --color-text-sub: #33373a;
  --color-white: #ffffff;

  /* --- フォント --- */
  --font-display: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", "Zen Maru Gothic", sans-serif;

  /* --- レイアウト(スマホ基準 実測値) --- */
  --container-w: 375px;
  --pad-text: 40px;   /* 本文テキストの左右余白 */
  --pad-media: 30px;  /* 写真・ボタンの左右余白 */

  /* --- タイポスケール(実測px) --- */
  --fs-eyebrow: 16px;
  --fs-h1: 28px;
  --fs-h2: 26px;
  --fs-h3: 22px;
  --fs-tag: 18px;      /* 日時・会場・ラベル */
  --fs-body: 16px;
  --fs-logo: 34px;
  --fs-btn: 24px;
  --fs-btn-sm: 22px;
  --fs-copyright: 12px;

  --lh-body: 1.65;

  /* --- コンポーネント --- */
  --btn-h: 70px;
  --radius-btn: 999px;
  --radius-photo: 10px;
  --gap-section: 18px;
}

/* タブレット・PC(768px以上)は同一スケールを適用 */
@media (min-width: 768px) {
  :root {
    --container-w: 600px;
    --pad-text: 60px;
    --pad-media: 40px;

    --fs-eyebrow: 18px;
    --fs-h1: 38px;
    --fs-h2: 32px;
    --fs-h3: 25px;
    --fs-tag: 20px;
    --fs-body: 18px;
    --fs-logo: 42px;
    --fs-btn: 26px;
    --fs-btn-sm: 24px;
    --fs-copyright: 13px;

    --btn-h: 80px;
    --gap-section: 72px;
  }
}

/* ==========================================================================
   リセット・共通
   ========================================================================== */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { text-decoration: none; color: inherit; }

ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

.container-text,
.container-media {
  max-width: var(--container-w);
  margin: 0 auto;
}

.container-text { padding: 0 var(--pad-text); }
.container-media { padding: 0 var(--pad-media); }

.section { padding-bottom: var(--gap-section); }
.section--white { background: var(--color-white); }
.section--faq { background: var(--color-bg-blue); padding-top: var(--gap-section); }

/* 見出し・本文タイポグラフィ */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-align: center;
  margin: 0 0 8px;
}

.h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.3;
  margin: 0 0 20px;
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 24px;
}

.h2--center { text-align: center; }

.h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-blue);
  text-align: center;
  margin: 0 0 14px;
}

.body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
}

.body--center { text-align: center; }

.datetime,
.place {
  font-family: var(--font-display);
  font-size: var(--fs-tag);
  font-weight: 700;
  margin: 0 0 4px;
}

.place { margin-bottom: 24px; }

/* ボタン */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--btn-h);
  border-radius: var(--radius-btn);
  background: var(--color-blue);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--fs-btn);
  font-weight: 700;
  transition: background 0.2s ease, transform 0.15s ease;
}

.btn:hover { background: var(--color-blue-dark); }
.btn:active { transform: scale(0.98); }

.btn-stack { display: flex; flex-direction: column; gap: 16px; }
.btn-stack .btn { font-size: var(--fs-btn-sm); }

/* 写真 */
.photo {
  width: 100%;
  display: block;
  object-fit: cover;
}

.photo--rounded { border-radius: var(--radius-photo); }
.photo--tall { aspect-ratio: 9 / 16; } /* 実測 315:560 */

.photo-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 5px;
}

/* ==========================================================================
   仕切り線(波線) / 装飾魚アイコン
   ========================================================================== */
.divider {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 32px auto;
}

.divider--center { margin: 20px auto 32px; }

.flow-fish-wrap { position: relative; }

.deco-fish {
  position: absolute;
  width: 72px;
  height: auto;
  pointer-events: none;
}

.deco-fish--carry { bottom: -8px; left: 8px; }

.deco-fish--insta {
  position: absolute;
  bottom: -10px;
  right: 0;
  width: 56px;
}

/* ==========================================================================
   グラデーション背景 + 白カード(絵が苦手でも大丈夫 〜 こんな方におすすめ)
   ========================================================================== */
.gradient-section {
  background: linear-gradient(180deg, #ffffff 0%, #2bb1ff 49%, #95d8ff 100%);
  padding-top: 40px;
}

.white-card {
  width: 345px;       /* 指定サイズ固定(ブレークポイント問わず) */
  max-width: 100%;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: 28px;
  padding: 36px 0;
  overflow: hidden;
  box-shadow: 0 16px 32px rgba(20, 60, 90, 0.12);
}

.card-block { margin-bottom: 40px; }
.card-block:last-child { margin-bottom: 0; }

.card-text { padding: 0 30px; }
.card-media { padding: 0 20px; }

/* ==========================================================================
   ヘッダー / ヒーロー
   ========================================================================== */
.hero { padding-bottom: var(--gap-section); background: var(--color-white); }

.hero-media {
  position: relative;
  margin-bottom: 2px;
}

.hero-collage {
  width: 100%;
  aspect-ratio: 375 / 283; /* 元の高さ(377px)の約3/4 */
  object-fit: cover;
}

.hero-icon { position: absolute; }
.hero-icon--logo { top: 14px; left: 0; width: 30%; max-width: 113px; }
.hero-icon--deco {
  top: auto;
  bottom: 0;
  right: 0;
  width: 35%;
  max-width: 133px;
  transform: translateY(50%); /* 写真と白背景の境目に icon の中心を合わせる */
}

.hero-copy { text-align: left; margin-bottom: 28px; }

.hero-logo-wrap {
  display: flex;
  justify-content: center;
}

.hero-logo {
  width: 315px;
  max-width: none; /* コンテナ幅(295px)による縮小を防止 */
  flex-shrink: 0;  /* flexアイテムとしての自動縮小を防止 */
  height: auto;
  margin: 0;
}

/* ==========================================================================
   当日の流れ(グリッド)
   ========================================================================== */
.flow-grid {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  gap: 24px 16px;
  margin-bottom: 24px;
}

.flow-grid--single {
  grid-template-columns: max-content;
  justify-content: center;
}

.flow-item { text-align: center; }

.flow-photo {
  width: 152px;      /* 指定サイズ固定(ブレークポイント問わず) */
  max-width: none;   /* グリッド列幅(約149.5px)による縮小を防止 */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 12px;
}

.flow-label {
  font-family: var(--font-display);
  font-size: var(--fs-tag);
  font-weight: 700;
}

/* ==========================================================================
   こんな方におすすめ
   ========================================================================== */
.check-list { margin-bottom: 24px; }

.check-list li {
  position: relative;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  padding-left: 20px;
  margin-bottom: 8px;
}

.check-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--color-blue);
  font-weight: 700;
}

/* ==========================================================================
   nemo(講師紹介)
   ========================================================================== */
.section--nemo {
  position: relative;
  background: var(--color-white);
  overflow: hidden;
}

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

.logo-text {
  font-size: var(--fs-logo);
  text-align: center;
}

.nemo-sub-inline {
  font-size: var(--fs-tag);
  font-weight: 500;
  vertical-align: middle;
}

.nemo-role {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  text-align: center;
  margin: 4px 0 0;
}

.nemo-profiles {
  position: relative;
  text-align: center;
  margin-top: 24px;
}

.profile-row {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.profile { flex: 1; margin-bottom: 0; }

.profile-photo {
  width: 100px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 16px;
  border: 4px solid var(--color-white);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.profile-photo--top { object-position: top; }
.profile-photo--bottom { object-position: bottom; }

.profile-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  margin: 0 0 8px;
}

.insta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 700;
  margin-top: 24px;
}

.insta-icon { width: 28px; height: auto; }

/* ==========================================================================
   安心してご参加いただくために
   ========================================================================== */
.faq-block { margin-bottom: 32px; }
.faq-block:last-child { margin-bottom: 0; }

/* ==========================================================================
   参加者の声・過去の様子(スライダー)
   ========================================================================== */
.slider {
  position: relative;
  width: 100%;
}

.slider-track {
  display: flex;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
  border-radius: var(--radius-photo);
}

.slider-track-inner {
  display: flex;
  width: 100%;
  transition: transform 0.45s ease;
  will-change: transform;
}

.slider-slide {
  flex: 0 0 100%;
  width: 100%;
}

.slider-slide .photo {
  border-radius: 0; /* 角丸は track 側でまとめて処理 */
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  margin-bottom: 20px;
}

.slider-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #cfe6f7;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.slider-dots button[aria-current="true"] {
  background: var(--color-blue);
  transform: scale(1.2);
}

/* ==========================================================================
   よくある質問
   ========================================================================== */
.qa-block { margin-bottom: 32px; }
.qa-block:last-child { margin-bottom: 0; }

.q {
  font-family: var(--font-display);
  font-size: var(--fs-tag);
  font-weight: 700;
  color: var(--color-blue);
  margin: 0 0 12px;
}

/* ==========================================================================
   フッター
   ========================================================================== */
.footer {
  background: var(--color-bg-blue);
  padding: var(--gap-section) 0;
  text-align: center;
}

.footer .container-media { margin-bottom: 24px; }

.copyright {
  font-size: var(--fs-copyright);
  color: var(--color-text-sub);
  margin-top: 24px;
}

/* ==========================================================================
   アクセシビリティ
   ========================================================================== */
a:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--color-blue-dark);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}