@charset "UTF-8";
/* =========================================================
   つながり場BAR LP
   - スマホファースト（基準 390px）／ 768px以上でPCレイアウト
   - カンプ：PC 1400px幅、SP 390px幅（いずれも1.5倍書き出し）
========================================================= */

/* ---------- 変数 ---------- */
:root {
  /* カラー */
  --color-pink: #f77f7f;          /* メインピンク（日付・テキスト） */
  --color-pink-light: #f99e9e;    /* ヘッダー告知（SP） */
  --color-pink-badge: #ff9eb1;    /* 丸バッジ ピンク */
  --color-blue-badge: #7bcdee;    /* 丸バッジ ブルー */
  --color-navy: #003c54;          /* ロゴ */
  --color-text: #1a1a1a;
  --color-text-sub: #333;
  --color-text-warm: #4e4b49;     /* 悩み〜主催者紹介の本文 */
  --color-blue-text: #41aef2;     /* 吹き出し ブルーの文字 */
  --color-line: #f6c9c3;          /* 区切り線 */
  --color-yellow: #ffd56a;        /* 3色ドット イエロー */
  --color-sky: #7dcdef;           /* 見出し水色 */
  --color-bg-sky: #e6f6fd;        /* 水色パネル */
  --color-dot-pink: #ffe8ee;      /* 浮かぶ水玉 */
  --color-dot-yellow: #fff5d6;
  --color-dot-blue: #e6f6fd;
  --color-bg-cream: #fff5d6;      /* イベント詳細の背景 */
  --color-cream-dot: #ffebb6;
  --color-navy-deep: #163b52;     /* 同時開催バッジの文字 */
  --color-white: #fff;
  --color-bg-blush: #fff4f2;      /* ヘッダー(SP)・フッター背景 */
  --color-bg-beige: #fff1e6;      /* セクション帯 */

  /* グラデーション */
  --grad-cta: linear-gradient(180deg, #f78483 0%, #f8b7ad 100%);
  --grad-contact: linear-gradient(180deg, #f78080 0%, #f8b9ae 100%);

  /* フォント */
  --font-base: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-number: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-script: "Great Vibes", cursive;
  --font-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;   /* 見出し用 */
  --sp-pink: #fd5f7c;    /* 見出しのピンク */
  --sp-brown: #4b322e;
  --font-text: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;  /* 本文（読み物部分） */

  /* レイアウト */
  --header-h: 60px;
  --content-max: 1400px;
  --gutter: 20px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 768px) {
  :root {
    --header-h: 85px;
    --gutter: clamp(24px, 7.8vw, 110px);
  }
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* ---------- ベース ---------- */
html { scroll-padding-top: var(--header-h); }
body {
  font-family: var(--font-base);
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.8;
  letter-spacing: .08em;
  overflow-x: hidden;
  /* Macで文字が太く見えるのを抑える */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.is-menu-open { overflow: hidden; }

:focus-visible {
  outline: 3px solid var(--color-blue-badge);
  outline-offset: 3px;
}

/*
 * ページ内リンクの移動先にはJSで tabindex="-1" を付けてフォーカスする。
 * Safariはセクション全体にも :focus-visible の枠を描くため、移動先の枠だけ消す。
 * リンクやボタンなど操作要素のフォーカス表示はそのまま残す。
 */
main section[tabindex="-1"]:focus {
  outline: none;
}

/* ---------- ユーティリティ ---------- */
/* 黄色の蛍光マーカー（文字の下半分に線を引いたような表現）
   見出しがフェードインで表示されたあと、左から右へ引かれる */
.marker {
  padding: 0 .1em;
  background: linear-gradient(transparent 58%, rgba(255, 221, 87, .75) 58%, rgba(255, 221, 87, .75) 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* ピンク背景の上（Contact）：白文字が読めるよう、マーカーは細めで薄く */
.marker--on-pink {
  background-image: linear-gradient(transparent 70%, rgba(255, 221, 87, .7) 70%, rgba(255, 221, 87, .7) 94%, transparent 94%);
}
.js .js-fade .marker {
  background-size: 0% 100%;
  transition: background-size .9s var(--ease) .5s;
}
.js .js-fade.is-visible .marker { background-size: 100% 100%; }

/* 途中で改行させないまとまり */
.u-nowrap { display: inline-block; }

.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* 表示切り替え：.u-pc はPCのみ、.u-sp はSPのみ */
@media (max-width: 767px) { .u-pc { display: none !important; } }
@media (min-width: 768px) { .u-sp { display: none !important; } }

.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 200;
  padding: 8px 16px;
  background: var(--color-white);
  border-radius: 4px;
}
.skip-link:focus { top: 8px; }

/* ---------- ボタン ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 56px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .12em;
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* 右矢印「＞」 */
.btn::after {
  content: "";
  position: absolute;
  right: 28px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transition: right .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { right: 22px; }

.btn--primary {
  color: var(--color-white);
  background: var(--grad-cta);
}
.btn--white {
  color: var(--color-pink);
  background: var(--color-white);
  box-shadow: 0 6px 20px rgba(214, 90, 90, .18);
}
.btn--white:hover { box-shadow: 0 10px 28px rgba(214, 90, 90, .28); }

/* =========================================================
   ヘッダー
========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg-blush);
}
.site-header__inner {
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding-left: 15px;
}
.site-header__logo {
  flex-shrink: 0;
  width: 146px;
}
.site-header__notice {
  margin-left: auto;
  padding: 0 clamp(8px, 3.6vw, 14px);
  color: var(--color-pink-light);
  font-size: clamp(11px, 3.4vw, 13px);
  white-space: nowrap;   /* 狭い画面でも2行のまま */
  line-height: 1.45;
  letter-spacing: .12em;
}

/* ハンバーガー */
.menu-toggle {
  position: relative;
  flex-shrink: 0;
  width: 63px;
  height: 100%;
  border: 0;
  background: var(--grad-cta);
  cursor: pointer;
}
.menu-toggle__bar {
  position: absolute;
  left: 50%;
  width: 34px;
  height: 2px;
  margin-left: -17px;
  background: var(--color-white);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.menu-toggle__bar:nth-child(1) { top: 19px; }
.menu-toggle__bar:nth-child(2) { top: 29px; }
.menu-toggle__bar:nth-child(3) { top: 39px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* SPメニュー */
.global-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  padding: 32px 24px 48px;
  background: var(--color-bg-blush);
  overflow-y: auto;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.global-nav.is-open { opacity: 1; }
.global-nav__list {
  border-top: 1px solid rgba(247, 127, 127, .25);
}
.global-nav__list a {
  display: block;
  padding: 18px 8px;
  border-bottom: 1px solid rgba(247, 127, 127, .25);
  text-decoration: none;
  font-size: 16px;
}
.global-nav__cta {
  width: 100%;
  margin-top: 32px;
}

@media (min-width: 768px) {
  .site-header { background: var(--color-white); }
  .site-header__inner { padding-left: clamp(24px, 3.8vw, 53px); }
  .site-header__logo { width: clamp(150px, 13.6vw, 190px); }
  .site-header__notice {
    padding: 0 clamp(16px, 3vw, 54px);
    color: var(--color-pink);
    font-size: clamp(13px, 1.3vw, 18px);
    white-space: nowrap;
  }
  .site-header__cta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(220px, 23vw, 320px);
    height: 100%;
    color: var(--color-white);
    background: var(--grad-cta);
    font-size: clamp(14px, 1.35vw, 19px);
    font-weight: 700;
    letter-spacing: .12em;
    text-decoration: none;
    transition: filter .3s var(--ease);
  }
  .site-header__cta:hover { filter: brightness(1.05) saturate(1.1); }
  .global-nav { display: none; }
}
/* PCでもヘッダー告知が窮屈な幅では非表示 */
@media (min-width: 768px) and (max-width: 959px) {
  .site-header__notice { display: none; }
  .site-header__cta { margin-left: auto; }
}

/* ---------------------------------------
   ヘッダーを非表示にするテスト中（ロゴ・メニュー・ヘッダーの申し込みボタンも消える）
   元に戻すときは、この塊（.site-header と :root:root の2つ）を削除
--------------------------------------- */
.site-header { display: none; }
:root:root { --header-h: 0px; }   /* ファーストビューの高さ計算などからヘッダー分を外す */

/* =========================================================
   ファーストビュー
========================================================= */
.hero {
  position: relative;
  z-index: 1;
}
.hero__inner {
  padding: 33px 0 0;
}
.hero__title {
  width: min(92%, 360px);
  margin: 0 auto;
}
.hero__lead {
  margin-top: 16px;
  padding: 0 25px;
  font-size: clamp(15px, 4.4vw, 17px);   /* 一番長い行が1行に収まる最大サイズ */
  line-height: 1.9;
  letter-spacing: .06em;
}
.hero__photo {
  margin-top: 0;
}
.hero__photo img {
  width: 100%;
  aspect-ratio: 390 / 330;  /* 天地を詰め、上部の白い余白をさらにカット */
  object-fit: cover;
  object-position: 50% 62%; /* 顔が上寄りに来る位置 */
}

.hero__event {
  padding: 20px 30px 0;
}
.hero__date {
  color: var(--color-pink);
  font-family: var(--font-number);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
}
.hero__date time {
  font-size: clamp(84px, 27vw, 112px);
}
.hero__day {
  display: inline-grid;
  place-items: center;
  width: 1.75em;    /* 日付の約4割の大きさの丸 */
  height: 1.75em;
  margin-left: 0;
  border-radius: 50%;
  background: var(--color-pink);   /* 日付と同じピンク */
  color: var(--color-white);
  font-family: var(--font-base);
  font-size: .24em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: .35em;
}
.hero__catch {
  margin-top: 16px;
  color: var(--color-pink);
  font-size: clamp(18px, 5.2vw, 22px);
  line-height: 1.55;
  letter-spacing: .2em;
}

/* 丸バッジ：下のベージュ帯にかかる */
.hero__badges {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: clamp(14px, 6.5vw, 26px);
  margin-top: 36px;
  margin-bottom: -100px;
}
.badge {
  display: grid;
  place-items: center;
  width: clamp(130px, 40vw, 156px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--color-white);
  font-size: clamp(13px, 4vw, 15px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .1em;
  text-align: center;
}
.badge--pink { background: var(--color-pink-badge); }
.badge--blue { background: var(--color-blue-badge); }

@media (min-width: 768px) {
  .hero {
    min-height: clamp(560px, 56vw, 785px);
    overflow: visible;
  }
  .hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
      linear-gradient(90deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.45) 38%, rgba(255,255,255,0) 62%),
      url("../images/hero-main.jpg") 70% 20% / cover no-repeat;
  }
  .hero__inner {
    position: relative;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: clamp(48px, 6.8vw, 95px) var(--gutter) 120px;
  }
  .hero__title {
    width: clamp(380px, 46vw, 645px);
    margin: 0;
  }
  .hero__lead {
    margin-top: clamp(28px, 4vw, 56px);
    padding: 0 0 0 clamp(20px, 2.6vw, 37px);
    font-size: clamp(14px, 1.2vw, 17px);
    line-height: 2.2;
    letter-spacing: .14em;
  }
  .hero__event {
    padding: clamp(28px, 3.5vw, 50px) 0 0 clamp(20px, 2.6vw, 37px);
  }
  .hero__date time { font-size: clamp(88px, 9.6vw, 134px); }
  .hero__catch {
    margin-top: clamp(10px, 1vw, 14px);
    font-size: clamp(17px, 1.75vw, 25px);
    line-height: 1.4;
  }

  .hero__badges {
    position: absolute;
    right: max(var(--gutter), calc((100% - var(--content-max)) / 2 + 125px));
    bottom: -52px;
    gap: 22px;
    margin: 0;
  }
  .badge {
    width: clamp(150px, 14vw, 196px);
    font-size: clamp(14px, 1.4vw, 19px);
  }
}

/* =========================================================
   SP用ファーストビュー（〜767px）
   カンプ（1080px幅）を基準に vw で拡大縮小：カンプのpx ÷ 10.8 = vw
========================================================= */

/* ファーストビューを画面いっぱい（ヘッダーを除いた高さ）に表示。
   画面が縦長なほど写真エリアが伸びる */
.hero-sp {
  display: flex;
  flex-direction: column;
  position: relative;
  /* 画面いっぱいより少しだけ低くし、下に次のセクションの頭をのぞかせる */
  min-height: calc(100vh - var(--header-h) - 28px);
  min-height: calc(100svh - var(--header-h) - 28px);   /* iPhoneのアドレスバー分を考慮 */
}

/* 写真エリア */
.hero-sp__visual {
  position: relative;
  /* 画面の高さに合わせて写真エリアを伸ばす（下の文字ブロック分を残す）。
     伸ばしすぎると顔が拡大されすぎるので 85vw〜125vw の範囲に収める */
  flex: 1 1 auto;     /* 下の文字ブロックを除いた残りいっぱいに伸ばす */
  min-height: 72vw;
  max-height: 150vw;
  background: url("../images/hero-main.jpg") 85% 0 / cover no-repeat;
}
/* 左側は文字が読みやすいよう白く淡く、下端は白へなじませる */
.hero-sp__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0) 70%, #fff 100%),
    linear-gradient(90deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.2) 40%, rgba(255,255,255,0) 58%);
}

/* キャッチ（縦書きの手書き文字の画像）：写真の左側、上端〜タグの上 */
.hero-sp__title {
  position: absolute;
  z-index: 1;
  top: 4vw;
  bottom: 13vw;   /* 下のカードと重ならないように */
  left: 9vw;
  display: flex;
  align-items: center;
  margin: 0;
}
.hero-sp__title img {
  width: auto;
  max-width: none;
  height: 100%;
  max-height: 86vw;   /* 縦長の画面で大きくなりすぎないように */
}

/* スクロールを促す矢印：ファーストビューと次のセクションの境目の中央。
   後ろの光の輪がふわっと広がっては消え、三角もゆっくり上下にゆれる */
.hero-sp__next {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 0;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  transform: translateY(50%);
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.hero-sp__next { transition: opacity .3s var(--ease); }
.hero-sp__next.is-hidden {
  opacity: 0;
  pointer-events: none;
}
/* 光の輪（オーラ） */
.hero-sp__next::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 95, 124, .7) 0%, rgba(253, 95, 124, .3) 40%, rgba(253, 95, 124, 0) 70%);
  animation: next-aura 2.2s ease-out infinite;
}
/* 下向きの三角 */
.hero-sp__next::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: -6px 0 0 -10px;
  border-style: solid;
  border-width: 12px 10px 0;
  border-color: var(--sp-pink) transparent transparent;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9));
  animation: next-bob 2.2s ease-in-out infinite;
}
/* 矢印の上の「Scroll」 */
.hero-sp__next-label {
  position: absolute;
  bottom: calc(100% - 22px);   /* 三角のすぐ上 */
  left: 50%;
  transform: translateX(-50%);
  color: var(--sp-pink);
  font-family: var(--font-number);
  font-size: 10px;
  letter-spacing: .2em;
  line-height: 1;
  text-indent: .2em;   /* 字間の分、見た目の中心を合わせる */
  white-space: nowrap;
  animation: next-bob 2.2s ease-in-out infinite;   /* 三角と一緒に上下 */
}
@keyframes next-aura {
  0%   { transform: scale(.45); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes next-bob {
  0%, 100% { translate: 0 -2px; }
  50%      { translate: 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sp__next::before { animation: none; opacity: .8; }
  .hero-sp__next::after,
  .hero-sp__next-label   { animation: none; }
}

/* 安心ポイント：3つ横並びのカード。写真の下端にかかる */
.hero-sp__tags {
  position: absolute;
  z-index: 3;
  left: 6vw;
  right: 6vw;
  bottom: -8vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.6vw;
}
.hero-sp__tags li {
  display: grid;
  place-items: center;
  height: 18vw;
  padding: 0 1vw;
  border: 2px solid var(--sp-pink);
  border-radius: 3.2vw;
  background: rgba(255, 255, 255, .95);
  color: var(--sp-pink);
  font-size: clamp(11px, 3.4vw, 15px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
}

/* 下段：イベント情報（カードのすぐ下に詰めて配置） */
.hero-sp__info {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  z-index: 2;
  padding: 13vw 5.5vw 9.5vw;   /* 上は写真からはみ出したカードの分 */
  text-align: center;
}
.hero-sp__catch {
  color: #222;
  font-family: var(--font-mincho);
  font-size: clamp(16px, 4.6vw, 22px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
}
.hero-sp__catch small { font-size: .8em; }
.hero-sp__name {
  margin-top: .5vw;
  color: var(--sp-pink);
  font-family: var(--font-mincho);
  font-size: 12.4vw;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .12em;
}
.hero-sp__detail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5vw;
  margin-top: 2vw;
  text-align: left;
}
.hero-sp__date {
  flex-shrink: 0;
  color: var(--sp-pink);
  font-family: var(--font-mincho);
  line-height: 1;
}
.hero-sp__date time {
  display: flex;
  align-items: flex-end;
  font-size: 13.4vw;
  font-weight: 500;
  letter-spacing: -.02em;
}
.hero-sp__day {
  display: grid;
  place-items: center;
  width: 7.4vw;
  height: 7.4vw;
  margin: 0 0 .3em 1.2vw;
  border-radius: 50%;
  background: var(--sp-pink);
  color: var(--color-white);
  font-size: 4.2vw;
  letter-spacing: 0;
}
.hero-sp__time {
  color: var(--sp-pink);
  font-family: var(--font-mincho);
  font-size: 5.7vw;
  line-height: 1.2;
  letter-spacing: .04em;
  white-space: nowrap;
}
.hero-sp__time + .hero-sp__venue { margin-top: 1.4vw; }
.hero-sp__place {
  min-width: 0;
  color: #111;
  font-family: var(--font-text);
}
.hero-sp__venue {
  font-size: clamp(16px, 4.7vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
  white-space: nowrap;
}
.hero-sp__venue-sub {
  margin-top: .4em;
  font-size: clamp(9px, 2.4vw, 12px);
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
}
.hero-sp__access {
  margin-top: .7em;
  font-size: clamp(10px, 2.6vw, 12px);
  line-height: 1.6;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 767px) {
  /* 旧SP用の丸バッジがなくなった分、次のセクションの上余白を詰める */
  .worry.worry { padding-top: 40px; }
}

/* =========================================================
   悩み共感 〜 主催者紹介
========================================================= */
.worry {
  position: relative;
  isolation: isolate;   /* 背景装飾がheroの丸バッジより前に出ないように */
  overflow: hidden;
  padding: 140px 0 110px;   /* 上はheroの丸バッジ、下はコンセプト写真が重なる分を確保 */
  background: #fff1e6 url("../images/worry-bg.webp") center top / cover no-repeat;
  color: var(--color-text-warm);
}
.worry__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 23px;
}

/* セクション見出し */
.section-title {
  color: var(--sp-pink);
  font-size: clamp(24px, 6.7vw, 26px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .14em;
  text-align: center;
}
.section-sub {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .1em;
  text-align: center;
}

/* 悩み：写真＋吹き出し */
.worry__visual {
  position: relative;
  margin-top: 20px;
}
.worry__photo {
  width: min(294px, 76vw);
  margin: 0 auto;
}
.worry__photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}
.worry__list {
  position: relative;
  display: grid;
  gap: 17px;
  margin-top: -37px;   /* 写真の下端に重ねる */
}
.bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 99px;
  padding: 14px 16px;
  background: var(--color-white);
  border: 2px solid currentColor;
  border-radius: 20px;
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: .1em;
  text-align: center;
}
.bubble--pink { color: var(--sp-pink); border-color: var(--color-pink-badge); }
.bubble--blue { color: var(--color-blue-text); border-color: var(--color-blue-badge); }

/* 共感・想い */
.empathy {
  margin-top: 30px;
}
.empathy__title {
  color: var(--sp-pink);
  font-size: clamp(26px, 7.7vw, 30px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .14em;
  text-align: center;
}
.empathy__text {
  margin-top: 22px;
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 400;
  line-height: 2.13;
  letter-spacing: .08em;
}

/* 主催者紹介 */
.profile {
  margin-top: 48px;
}
.profile__photo img {
  width: 100%;
  aspect-ratio: 342 / 346;
  object-fit: cover;
  object-position: 62% 12%;   /* SP：顔が中心に来るようトリミング */
}
.profile__body {
  margin-top: 36px;
  font-family: var(--font-text);
}
.profile__org {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.profile__logo { width: 178px; }
.profile__org-text {
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .04em;
  text-align: center;
}
.profile__name {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 22px;
  margin-top: 30px;
  color: var(--sp-pink);
  font-weight: 700;
  line-height: 1.2;
  font-family: var(--font-base);
}
.profile__role {
  font-size: 15px;
  letter-spacing: .1em;
}
.profile__name-main {
  font-size: clamp(34px, 10vw, 40px);
  letter-spacing: .06em;
}
.profile__text {
  margin-top: 22px;
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .06em;
}
/* SP：資格・経歴リストは出さず、本文の下に区切り線だけ残す */
@media (max-width: 767px) {
  .profile .profile__career { display: none; }
  .profile__text {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-line);
  }
}
.profile__career {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.2em;
  margin-top: 22px;
  padding: 20px 0 20px 1em;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .06em;
}
.profile__career li { flex-basis: 100%; }
/* 1行目は2項目並べる */
.profile__career li:nth-child(-n+2) { flex-basis: auto; }
.profile__career li::before { content: "・"; }

.profile__closing {
  margin-top: 40px;
  color: var(--sp-pink);
  font-size: clamp(24px, 6.7vw, 26px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  text-align: center;
}

@media (min-width: 768px) {
  .worry { padding: 64px 0 110px; }
  .section-title { font-size: clamp(32px, 3vw, 42px); }
  .section-sub {
    margin-top: 14px;
    font-size: clamp(17px, 1.55vw, 22px);
  }

  /* 768〜1079px：写真の下に吹き出しを2列 */
  .worry__visual { margin-top: 48px; }
  .worry__photo { width: 400px; }
  .worry__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: -40px;
  }
  .bubble { font-size: 17px; }
  /* 奇数個の最後は中央寄せ */
  .bubble:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 10px);
  }

  .empathy { margin-top: 96px; }
  .empathy__title { font-size: clamp(32px, 2.8vw, 40px); line-height: 1.6; }
  .empathy__text {
    margin-top: 40px;
    font-size: clamp(15px, 1.25vw, 17px);
    line-height: 2.45;
    text-align: center;
  }

  .profile {
    display: grid;
    grid-template-columns: minmax(0, 364px) minmax(0, 460px);
    justify-content: center;
    gap: clamp(32px, 5vw, 70px);
    margin-top: 88px;
  }
  .profile__photo img {
    height: 100%;
    aspect-ratio: 364 / 510;
    object-position: 50% 30%;
  }
  .profile__body { margin-top: 0; }
  .profile__org {
    flex-direction: row;
    align-items: center;
    gap: 34px;
  }
  .profile__logo { width: 180px; }
  .profile__org-text { text-align: left; }
  .profile__name {
    justify-content: flex-start;
    gap: 28px;
    margin-top: 44px;
  }
  .profile__text {
    margin-top: 26px;
    font-size: 15px;
    letter-spacing: .08em;
  }
  .profile__career {
    margin-top: 26px;
    padding: 24px 0 30px 1.2em;
  }

  .profile__closing {
    margin-top: 56px;
    font-size: clamp(26px, 2.4vw, 34px);
  }
}

/* 1080px以上：カンプ通り、写真の左右に吹き出しを配置 */
@media (min-width: 1080px) {
  .worry__visual {
    width: 1036px;
    height: 485px;
    margin: 64px auto 0;
  }
  .worry__photo {
    position: absolute;
    top: 0;
    left: 50%;
    width: 453px;
    margin-left: -226px;
  }
  .worry__list {
    position: static;
    display: block;
    margin: 0;
  }
  .bubble {
    position: absolute;
    justify-content: flex-start;
    width: 376px;
    min-height: 123px;
    padding: 16px 30px 16px 47px;
    border-radius: 22px;
    font-size: 19px;
    line-height: 1.9;
    text-align: left;
  }
  .bubble:nth-child(1) { top: 43px;  left: 0; width: 356px; }
  .bubble:nth-child(2) { top: 315px; left: 0; width: 356px; }
  .bubble:nth-child(3) { top: 13px;  right: 0; }
  .bubble:nth-child(4) { top: 191px; right: 0; }
  .bubble:nth-child(5) { top: 362px; right: 0; }
  .bubble:last-child:nth-child(odd) { width: 376px; }

  .empathy { margin-top: 108px; }
}

/* =========================================================
   コンセプト
========================================================= */
.concept {
  position: relative;
  z-index: 1;   /* 写真を前のセクションに重ねる */
  background: var(--color-white);
  color: var(--color-text-warm);
}
.concept__inner {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}

/* 写真（共通） */
.concept__photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

/* SP：カップル写真を大きく、左右ははみ出させる */
.concept__photo--couple {
  position: relative;
  left: 50%;
  width: 510px;
  margin: -80px 0 0 -255px;
}
.concept {
  display: flow-root;   /* 写真の負マージンが親に相殺されないように */
  overflow-x: clip;
}

.concept__content {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.concept__label {
  display: inline-block;
  margin-top: 56px;
  color: var(--color-sky);
  font-family: var(--font-script);
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  transform: rotate(-15deg);
}
.concept__title {
  margin-top: 18px;
  font-size: clamp(27px, 7.8vw, 31px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .12em;
}
/* 3色のドット */
.concept__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}
.concept__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-pink-badge);
}
.concept__dots span:nth-child(2) { background: var(--color-yellow); }
.concept__dots span:nth-child(3) { background: var(--color-sky); }

.concept__text {
  margin-top: 28px;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 2.13;
  letter-spacing: .06em;
  text-align: left;
}
.concept__text p + p { margin-top: 2.13em; }

/* SP：写真2枚＋水玉 */
.concept__gallery {
  position: relative;
  max-width: 600px;
  height: 470px;
  margin: 64px auto 0;
  /* はみ出しはセクション側（overflow-x: clip）で切る */
}
.concept__photo--talk,
.concept__photo--toast { position: absolute; }
.concept__photo--talk  { top: 0;     left: -63px;  width: 282px; }
.concept__photo--toast { top: 191px; right: -54px; width: 246px; }

/* ---- ふわふわ浮かぶ水玉 ---- */
.float-dot {
  --fx: 6px;      /* 横の揺れ幅 */
  --fy: 10px;     /* 縦の揺れ幅 */
  position: absolute;
  z-index: -1;   /* 最背面：写真・文字の後ろ（セクションの白背景の上） */
  border-radius: 50%;
  pointer-events: none;
  animation: float-dot var(--dur, 7s) ease-in-out var(--delay, 0s) infinite;
  /* パララックス：揺れ(transform)とは別に translate でスクロール量を足す */
  translate: 0 var(--py, 0px);
  will-change: transform, translate;
}
.float-dot--pink   { background: var(--color-dot-pink); }
.float-dot--yellow { background: var(--color-dot-yellow); }
.float-dot--blue   { background: var(--color-dot-blue); }

@keyframes float-dot {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(var(--fx), calc(var(--fy) * -.6)); }
  50%      { transform: translate(0, calc(var(--fy) * -1.4)); }
  75%      { transform: translate(calc(var(--fx) * -1), calc(var(--fy) * -.5)); }
}

/* SPの水玉配置（6〜8個目はPCのみ） */
.concept__gallery .float-dot:nth-of-type(1) { top: 54px;  left: 67%; width: 29px; height: 29px; --dur: 7s;   --delay: -1s; }
.concept__gallery .float-dot:nth-of-type(2) { top: 70px;  left: 82%; width: 41px; height: 41px; --dur: 8.5s; --delay: -3s; --fy: 14px; }
.concept__gallery .float-dot:nth-of-type(3) { top: 402px; left: 13%; width: 32px; height: 32px; --dur: 6.5s; --delay: -2s; }
.concept__gallery .float-dot:nth-of-type(4) { top: 431px; left: 44%; width: 32px; height: 32px; --dur: 9s;   --delay: -5s; }
.concept__gallery .float-dot:nth-of-type(5) { top: 340px; left: 35%; width: 19px; height: 19px; --dur: 6s;   --delay: -4s; --fy: 8px; }
.concept__gallery .float-dot:nth-of-type(n+6) { display: none; }

/* PC（1080px以上）：中央にテキスト、左右に写真と水玉を散らす */
@media (min-width: 1080px) {
  .concept { overflow-x: visible; }
  .concept__inner {
    min-height: 740px;   /* 水玉が収まる高さ */
    padding: 82px 0 0;
  }
  .concept__photo--couple {
    position: absolute;
    top: -34px;
    left: auto;
    right: 10%;
    width: 276px;
    margin: 0;
  }
  .concept__content {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
    padding: 0;
  }
  .concept__label {
    margin-top: 0;
    font-size: 50px;
  }
  .concept__title {
    margin-top: 22px;
    font-size: clamp(38px, 3.15vw, 44px);
    line-height: 1.4;
  }
  .concept__dots { margin-top: 34px; }
  .concept__text {
    margin-top: 40px;
    font-size: 17px;
    line-height: 2.5;
    text-align: center;
  }
  .concept__text p + p { margin-top: 2.5em; }

  /* ギャラリーは枠を外し、写真と水玉を .concept__inner 基準で配置 */
  .concept__gallery {
    position: static;
    max-width: none;
    height: auto;
    margin: 0;
    overflow: visible;
  }
  .concept__photo--talk  { top: 185px; left: 8%;   width: 250px; }
  .concept__photo--toast { top: 351px; right: 7.5%; width: 216px; }

  .concept__gallery .float-dot:nth-of-type(n) { display: block; }
  .concept__gallery .float-dot:nth-of-type(1) { top: 67px;  left: 23.9%; width: 18px; height: 18px; --dur: 6.5s; --delay: -1s; }
  .concept__gallery .float-dot:nth-of-type(2) { top: 105px; left: 27.3%; width: 27px; height: 27px; --dur: 8s;   --delay: -3s; }
  .concept__gallery .float-dot:nth-of-type(3) { top: 315px; left: 75.6%; width: 28px; height: 28px; --dur: 7s;   --delay: -2s; }
  .concept__gallery .float-dot:nth-of-type(4) { top: 619px; left: 23.4%; width: 49px; height: 49px; --dur: 9s;   --delay: -5s; --fy: 14px; }
  .concept__gallery .float-dot:nth-of-type(5) { top: 681px; left: 19.7%; width: 27px; height: 27px; --dur: 6s;   --delay: -4s; }
  .concept__gallery .float-dot:nth-of-type(6) { top: 578px; left: 10.7%; width: 49px; height: 49px; --dur: 8.5s; --delay: -6s; --fy: 14px; }
  .concept__gallery .float-dot:nth-of-type(7) { top: 569px; left: 73%;   width: 32px; height: 32px; --dur: 7.5s; --delay: -2.5s; }
  .concept__gallery .float-dot:nth-of-type(8) { top: 631px; left: 78.6%; width: 42px; height: 42px; --dur: 9.5s; --delay: -1.5s; --fy: 12px; }
}

/* =========================================================
   気軽に参加できる理由
========================================================= */
.points {
  position: relative;
  z-index: 2;   /* パララックスで動いた水玉より前に */
  background: var(--color-bg-sky);   /* SPは全幅の水色 */
}
.points__panel {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  padding: 47px 19px 56px;
  text-align: center;
}
.points__title {
  color: var(--color-sky);
  font-size: clamp(27px, 7.8vw, 30px);
  font-weight: 700;
  line-height: 1.33;
  letter-spacing: .12em;
}
.points__list {
  display: grid;
  gap: 33px;
  margin-top: 35px;
}
.point {
  container-type: inline-size;   /* 見出しの文字サイズをカード幅に合わせる */
  padding: 34px 25px 30px;
  background: var(--color-white);
  border: 2px solid #a9def4;
  border-radius: 20px;
}
.point__title {
  color: var(--sp-pink);
  /* 一番長い見出し（12文字）がカード幅で必ず1行に収まるサイズ */
  font-size: min(20px, calc(100cqi / 13.6));
  white-space: nowrap;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .1em;
}
.point__text {
  margin-top: 18px;
  color: var(--color-text-warm);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 2.13;
  letter-spacing: .06em;
  text-align: left;
}
.points__closing {
  margin-top: 43px;
  color: var(--color-navy);
  font-size: clamp(24px, 7.2vw, 28px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .1em;
}
.points__logo {
  display: inline-block;
  width: auto;
  height: 1.12em;
  margin-right: .1em;
  vertical-align: -.2em;
}
.points__person {
  display: none;   /* SPでは森下さんの写真を出さない（PCのみ表示） */
}

@media (min-width: 768px) {
  .points {
    padding: 90px var(--gutter) 90px;   /* 上は人物写真がはみ出す分 */
    background: transparent;   /* 水玉はパネルの後ろだけで隠れるように */
  }
  .points__panel {
    max-width: 1061px;
    padding: 73px clamp(32px, 7.7vw, 82px) 60px;
    background: var(--color-bg-sky);
    border-radius: 36px;
  }
  .points__title {
    font-size: clamp(32px, 3vw, 40px);
    letter-spacing: .14em;
  }
  .points__list {
    gap: 32px;
    max-width: 560px;
    margin: 56px auto 0;
  }
  .point {
    padding: 48px clamp(28px, 3.4vw, 46px) 52px;
    border: 0;
    border-radius: 26px;
    text-align: left;
  }
  .point__title { font-size: min(22px, calc(100cqi / 13.6)); }
  .point__text {
    margin-top: 22px;
    font-size: 14px;
  }
  .points__closing {
    margin-top: 60px;
    font-size: clamp(24px, 2.2vw, 28px);
    line-height: 2;
  }
  .points__person {
    display: block;
    position: absolute;
    top: -38px;
    right: 4.5%;
    width: clamp(120px, 15vw, 159px);
    margin: 0;
  }
}
@media (min-width: 768px) and (max-width: 1079px) {
  /* タイトルと人物写真が重ならないよう左寄せ */
  .points__title { text-align: left; }
  .points__closing { font-size: 24px; }
}
@media (min-width: 1080px) {
  .points { padding-top: 50px; }
  /* カードは2列 */
  .points__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 52px 45px;
    max-width: none;
    margin-top: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .float-dot { animation: none; }
}

/* =========================================================
   会場（コココリン）
========================================================= */
.place {
  position: relative;
  z-index: 0;   /* 水玉（z-index:-1）をこのセクションの中で最背面に */
  padding-top: 80px;
  /* 夜のコココリン：夜空の背景は下の .night-sky 共通スタイルで固定表示 */
  background: #0b1a33;
  color: var(--color-white);
}
/* 夜空の上で読みやすく */
.place .place__title,
.place .place__label { text-shadow: 0 0 18px rgba(11, 26, 51, .6); }
.place .place__text { color: rgba(255, 255, 255, .92); }
/* 水玉は夜空ではふんわり光る玉ボケにする */
.place .float-dot {
  background: radial-gradient(circle, rgba(255, 244, 214, .55) 0%, rgba(255, 244, 214, .18) 45%, rgba(255, 244, 214, 0) 70%);
}
.place__content {
  position: relative;
  z-index: 1;   /* 写真の透過部分の上に文字を重ねる */
  padding: 0 20px;
  text-align: center;
}
.place__label {
  display: inline-block;
  color: var(--color-pink);
  font-family: var(--font-script);
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  transform: rotate(-15deg);
}
.place__title {
  margin-top: 22px;
  color: var(--color-white);
  font-size: clamp(27px, 8vw, 31px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .1em;
}
.place__logo {
  width: min(325px, 84vw);
  margin: 28px auto 0;
}
.place__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}
.place__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-pink-badge);
}
.place__dots span:nth-child(2) { background: var(--color-yellow); }
.place__dots span:nth-child(3) { background: var(--color-sky); }

.place__text {
  margin-top: 40px;
  font-family: var(--font-text);   /* ゴシック体 */
  font-weight: 400;
  font-size: clamp(14px, 3.85vw, 15px);
  line-height: 2.4;
  letter-spacing: .1em;   /* 一番長い行が375px幅でも1行に収まる字間 */
}
.place__text p + p { margin-top: 2.4em; }
/* SPは最初の2段落を続けて表示 */
.place__text p:nth-child(2) { margin-top: 0; }

/* 写真：上の透過部分に文字が重なる */
.place__photo {
  position: relative;
  margin-top: -46px;
}
.place__photo img {
  width: 100%;
  aspect-ratio: 390 / 280;
  object-fit: cover;
  object-position: 50% 100%;
}

/* 地図 */


/* 水玉はPCのみ */
.place__dots-bg { display: none; }

@media (min-width: 768px) {
  .place { padding-top: 58px; }
  .place__label {
    color: var(--color-pink);
    font-size: 48px;
  }
  .place__title {
    margin-top: 26px;
    color: var(--color-white);
    font-size: clamp(32px, 2.8vw, 38px);
    line-height: 1.6;
  }
  .place__logo {
    width: clamp(380px, 36vw, 502px);
    margin-top: 36px;
  }
  .place__dots { margin-top: 44px; }
  .place__text {
    margin-top: 52px;
    font-size: 16px;
    line-height: 2.5;
    letter-spacing: .25em;
  }
  .place__text p + p,
  .place__text p:nth-child(2) { margin-top: 2.5em; }

  .place__photo { margin-top: clamp(-320px, -22vw, -180px); }
  .place__photo img { aspect-ratio: 1400 / 847; }

  .place__dots-bg {
    display: block;
    position: absolute;
    inset: 0 0 auto;
    height: 700px;
    max-width: 1400px;
    margin: 0 auto;
    pointer-events: none;
  }
  .place__dots-bg .float-dot:nth-of-type(1) { top: 182px; left: 8.8%;  width: 97px; height: 97px; --dur: 9s;   --delay: -2s; --fy: 14px; }
  .place__dots-bg .float-dot:nth-of-type(2) { top: 77px;  left: 78.2%; width: 72px; height: 72px; --dur: 8s;   --delay: -4s; --fy: 12px; }
  .place__dots-bg .float-dot:nth-of-type(3) { top: 186px; left: 74%;   width: 39px; height: 39px; --dur: 6.5s; --delay: -1s; }
  .place__dots-bg .float-dot:nth-of-type(4) { top: 408px; left: 80.8%; width: 72px; height: 72px; --dur: 8.5s; --delay: -5s; --fy: 12px; }
  .place__dots-bg .float-dot:nth-of-type(5) { top: 496px; left: 12%;   width: 46px; height: 46px; --dur: 7s;   --delay: -3s; }
  .place__dots-bg .float-dot:nth-of-type(6) { top: 579px; left: 19.8%; width: 64px; height: 64px; --dur: 9.5s; --delay: -6s; --fy: 14px; }
}

/* =========================================================
   イベント詳細
========================================================= */
.info {
  padding: 50px 0 56px;
  /* 夜空の背景（コココリン紹介と同じ）。
     元のクリーム地に戻す場合は下の2行に差し替え：
     background: radial-gradient(circle, var(--color-cream-dot) 2.5px, transparent 3px) 0 0 / 28px 28px, var(--color-bg-cream);
     color: var(--color-text-warm); */
  background: #0b1a33;   /* 夜空は下の .night-sky 共通スタイルで固定表示 */
  color: var(--color-white);
}

/* ---------------------------------------
   夜空の背景（Place・イベント詳細 共通）
   スクロールしても夜空が動かないよう固定。
   iPhoneは background-attachment: fixed が効かないため、
   固定配置の疑似要素をセクションの形で切り抜いて表示する
--------------------------------------- */
.place,
.info {
  position: relative;
  isolation: isolate;
  clip-path: inset(0);
}
.place::before,
.info::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;   /* 水玉（-1）よりさらに後ろ */
  background: #0b1a33 url("../images/place-night.webp") center / cover no-repeat;
  pointer-events: none;
}

/*
 * 「気軽に参加できる理由」の水色から夜空へ、境界をやわらかくつなぐ。
 * レイアウトの高さは増やさず、夜空の上に短いグラデーションだけを重ねる。
 */
@media (max-width: 767px) {
  .place::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 96px;
    z-index: 0;
    background:
      radial-gradient(
        ellipse 78% 85% at 50% 0%,
        rgba(222, 246, 255, .52) 0%,
        rgba(222, 246, 255, 0) 72%
      ),
      linear-gradient(
        to bottom,
        var(--color-bg-sky) 0%,
        rgba(123, 161, 188, .58) 32%,
        rgba(11, 26, 51, 0) 100%
      );
    pointer-events: none;
  }
}

/* 流れ星（スクロールに合わせてJSで生成。夜空の上・文字や写真の後ろ） */
.shooting-star {
  position: fixed;
  z-index: -1;
  width: 140px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9));
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9));
  transform-origin: right center;
  transform: rotate(var(--angle, 155deg));
  pointer-events: none;
  animation: shooting-star var(--dur, .9s) cubic-bezier(.3, .1, .4, 1) forwards;
}
/* 先端の光る点 */
.shooting-star::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, .8);
}
@keyframes shooting-star {
  0%   { opacity: 0; translate: 0 0; scale: .3 1; }
  15%  { opacity: 1; scale: 1 1; }
  100% { opacity: 0; translate: var(--dx, -260px) var(--dy, 120px); scale: .6 1; }
}
.info .info__table { color: var(--color-text-warm); }   /* 白いカードの中は今までどおりの文字色 */
.info__inner {
  max-width: 812px;
  margin: 0 auto;
  padding: 0 21px;
  text-align: center;
}
.info__label {
  display: inline-block;
  color: var(--color-sky);
  font-family: var(--font-script);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  transform: rotate(-15deg);
}
.info__title {
  margin-top: 16px;
  font-size: clamp(28px, 8.2vw, 32px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
}
.info__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.info__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-pink-badge);
}
.info__dots span:nth-child(2) { background: var(--color-yellow); }
.info__dots span:nth-child(3) { background: var(--color-sky); }

/* 詳細テーブル */
.info__table {
  margin: 36px 0 0;
  padding: 6px 14px 26px;
  background: var(--color-white);
  border-radius: 24px;
}
.info__row {
  padding: 20px 0 22px;
  border-bottom: 1px dashed #b2b2b2;
}
.info__row:last-child { border-bottom: 0; }
.info__key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 38px;
  margin: 0 auto;
  border-radius: 999px;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
}
.info__key--pink { background: var(--color-pink-badge); }
.info__key--blue { background: var(--color-sky); }
/* 「対　象」などの字間 */
.info__key-gap { display: inline-block; width: 1.4em; }
.info__value {
  margin: 14px 0 0;
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .12em;
}
.info__map-btn {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  margin-top: .6em;
  padding: .35em 1.1em .35em .9em;
  border: 1.5px solid var(--sp-pink);
  border-radius: 999px;
  color: var(--sp-pink);
  font-size: .9em;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.info__map-btn:hover { background: var(--sp-pink); color: var(--color-white); }
.info__map-icon { width: 1.2em; height: 1.2em; flex-shrink: 0; }
.info__link {
  color: var(--color-pink);
  text-decoration: none;
  transition: opacity .3s var(--ease);
}
.info__link:hover { opacity: .7; text-decoration: underline; }

/* 同時開催バナー */
.sub-event {
  position: relative;
  margin-top: 46px;
}
.sub-event__link {
  position: relative;
  display: block;
  border-radius: 20px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sub-event__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(22, 59, 82, .18);
}
.sub-event__img {
  width: 100%;
  border-radius: 20px;
}
.sub-event__text {
  display: block;
  position: absolute;
  left: 4%;
  bottom: 5%;
  color: var(--color-white);
  font-family: var(--font-text);
  font-size: clamp(7px, 2.05vw, 8px);   /* SPは「同時開催」バッジに重ならない大きさ */
  line-height: 1.75;
  letter-spacing: 0;
  text-align: left;
}
.sub-event__badge {
  position: absolute;
  z-index: 1;
  right: 4%;
  bottom: -17px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(112px, 35.6vw, 139px);
  height: 42px;
  border-radius: 999px;
  background: var(--color-yellow);
  color: var(--color-navy-deep);
  font-size: clamp(16px, 4.6vw, 18px);
  font-weight: 700;
  letter-spacing: .08em;
}

@media (min-width: 768px) {
  .info { padding: 96px 0 78px; }
  .info__label { font-size: 48px; }
  .info__title {
    margin-top: 22px;
    font-size: clamp(36px, 3.2vw, 44px);
  }
  .info__dots { margin-top: 38px; }

  .info__table {
    margin-top: 72px;
    padding: 40px 54px 52px;
    border-radius: 36px;
  }
  .info__row {
    display: flex;
    align-items: flex-start;
    gap: 49px;
    padding: 19px 18px 24px;
  }
  .info__key {
    flex-shrink: 0;
    width: 129px;
    height: 37px;
    margin: 0;
    font-size: 16px;
  }
  .info__value {
    margin: 0;
    padding-top: 1px;
    font-size: 17px;
    line-height: 1.85;
    text-align: left;
  }

  .sub-event {
    width: min(688px, 85%);
    margin: 92px auto 0;
  }
  .sub-event__img,
  .sub-event__link { border-radius: 30px; }
  .sub-event__text {
    left: 3.2%;
    bottom: 6%;
    font-size: 12px;
    line-height: 1.9;
    letter-spacing: .04em;
  }
  .sub-event__badge {
    top: -19px;
    right: 7%;
    bottom: auto;
    width: 156px;
    height: 45px;
    font-size: 20px;
  }
}

/* =========================================================
   共通：セクション見出しセット（英字ラベル＋見出し＋3色ドット＋リード）
========================================================= */
.sec-label {
  display: inline-block;
  font-family: var(--font-script);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  transform: rotate(-15deg);
}
.sec-label--sky  { color: var(--color-sky); }
.sec-label--pink { color: var(--color-pink); }
.sec-title {
  margin-top: 18px;
  font-size: clamp(27px, 7.9vw, 31px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .12em;
}
.sec-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.sec-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-pink-badge);
}
.sec-dots span:nth-child(2) { background: var(--color-yellow); }
.sec-dots span:nth-child(3) { background: var(--color-sky); }
.sec-lead {
  margin-top: 26px;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .06em;
  text-align: left;
}

/* 共通：ふわふわ水玉のレイヤー（位置は各水玉の style で --x / --y / --s を指定） */
.dots-layer {
  position: absolute;
  inset: 0;
  max-width: 1400px;
  margin: 0 auto;
  pointer-events: none;
}
.dots-layer .float-dot {
  z-index: 0;   /* セクション背景の上・本文(z-index:1)の下 */
  top: var(--y);
  left: var(--x);
  width: var(--s);
  height: var(--s);
}
.dots-layer .float-dot:nth-child(3n+1) { --dur: 8s;   --delay: -2s; --fy: 12px; }
.dots-layer .float-dot:nth-child(3n+2) { --dur: 6.5s; --delay: -4s; }
.dots-layer .float-dot:nth-child(3n)   { --dur: 9s;   --delay: -1s; --fy: 14px; }

@media (min-width: 768px) {
  .sec-label { font-size: 48px; }
  .sec-title {
    margin-top: 24px;
    font-size: clamp(34px, 3vw, 41px);
    line-height: 1.4;
  }
  .sec-dots { margin-top: 38px; }
  .sec-lead {
    margin-top: 44px;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 2.5;
    text-align: center;
  }
}

/* =========================================================
   当日のコンテンツ
========================================================= */
.contents[hidden] { display: none; }
.contents,
.schedule {
  position: relative;   /* z-index は付けない（本文を水玉より前に出すため） */
  overflow: clip;       /* パララックスで動いた水玉を自分のセクション内で切り、隣のセクションに出さない */
  background: var(--color-white);
  color: var(--color-text-warm);
}
.contents { padding: 50px 0 20px; }
.contents__inner {
  position: relative;
  z-index: 1;   /* どのセクションの水玉よりも前に */
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 21px;
  text-align: center;
}
.contents__list {
  display: grid;
  gap: 40px;
  margin-top: 32px;
  text-align: left;
}
.content-card__img {
  width: 100%;
  aspect-ratio: 348 / 220;
  object-fit: cover;
}
.content-card__img--photo { border-radius: 16px; }
.content-card__title {
  margin-top: 30px;
  color: var(--sp-pink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .1em;
}
.content-card__text {
  margin-top: 16px;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 2.13;
  letter-spacing: .06em;
}

@media (min-width: 768px) {
  .contents { padding: 126px 0 40px; }
  .contents__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 54px;
    margin-top: 70px;
  }
  .content-card__img { aspect-ratio: 292 / 196; }
  .content-card__title {
    margin-top: 32px;
    font-size: clamp(18px, 1.6vw, 22px);
  }
  .content-card__text {
    margin-top: 20px;
    font-size: 14px;
    line-height: 2.3;
  }
}
@media (min-width: 768px) and (max-width: 1079px) {
  .contents__list { gap: 28px; }
}

/* =========================================================
   当日の流れ
========================================================= */
.schedule { padding: 50px 0 0; }
.schedule__inner {
  position: relative;
  z-index: 1;   /* どのセクションの水玉よりも前に */
  max-width: 954px;
  margin: 0 auto;
  padding: 0 21px;
  text-align: center;
}
.schedule__box {
  position: relative;
  margin-top: 40px;
  text-align: left;
}

/* タイムライン */
.timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  min-height: 98px;
}
.timeline__item + .timeline__item { margin-top: 79px; }
/* 丸同士をつなぐ縦線 */
.timeline__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 48px;
  top: 98px;
  bottom: -79px;   /* 項目の高さに関係なく、次の丸まで届く（-79px = 項目間の余白） */
  width: 2px;
  background: var(--color-pink-badge);
}
.timeline__time {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 98px;
  height: 98px;
  border-radius: 50%;
  background: var(--color-pink-badge);
  color: var(--color-white);
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .06em;
}
.timeline__body { padding-top: 8px; }
.timeline__title {
  color: var(--sp-pink);   /* ほかのカード見出しと同じピンク */
  font-size: clamp(16px, 4.9vw, 21px);   /* SPで「マシュマロチャレンジ」が1行に収まるサイズ */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .06em;
  font-family: var(--font-text);
}
.timeline__text {
  margin-top: 10px;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: .06em;
}

/* 主催者のひとこと */
.schedule__person {
  width: 190px;
  margin: 56px auto 0;
  text-align: center;
}
.schedule__voice {
  width: 262px;
  max-width: none;
  margin: 0 auto;
}
.schedule__person img { margin-top: 14px; }

@media (min-width: 768px) {
  .schedule { padding-top: 90px; }
  .schedule__box {
    max-width: 910px;
    margin: 56px auto 0;
    padding: 104px clamp(24px, 6%, 60px) 104px clamp(32px, 15.7%, 143px);
    background: var(--color-white);
    border: 2px solid #f8baaf;
    border-radius: 40px;
  }
  .timeline__item { gap: 53px; min-height: 96px; }
  .timeline__item + .timeline__item { margin-top: 51px; }
  .timeline__item:not(:last-child)::after {
    left: 47px;
    top: 96px;
    bottom: -51px;
  }
  .timeline__time {
    width: 96px;
    height: 96px;
    font-size: 17px;
  }
  .timeline__body { padding-top: 14px; }
  .timeline__title { font-size: 21px; letter-spacing: .12em; }
  .timeline__text { margin-top: 8px; font-size: 16px; }

  /* 枠の右下からはみ出す人物写真 */
  .schedule__person {
    position: absolute;
    right: 7%;
    bottom: -114px;
    width: clamp(120px, 12vw, 158px);   /* 縦長の写真なので幅を絞って高さを抑える */
    margin: 0;
  }
  .schedule__voice {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 224px;
    margin: 0 0 18px -112px;
    transform: rotate(8deg);
  }
  .schedule__person img { margin-top: 0; }
  .schedule { padding-bottom: 114px; }
}

/* =========================================================
   よくあるご質問
========================================================= */
.faq {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 53px 0 66px;
  background: #ffe8ed url("../images/faq-bg.webp") center top / cover no-repeat;
  color: var(--color-text-warm);
}
.faq__inner {
  max-width: 912px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
.faq .sec-title { color: var(--color-text-warm); }
.faq__list {
  display: grid;
  gap: 11px;
  margin-top: 30px;
  text-align: left;
}

.faq__item {
  background: var(--color-white);
  border: 2px solid #f8baaf;
  border-radius: 18px;
  overflow: hidden;
}
/* 質問（クリックで開閉） */
.faq__q {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 88px;
  padding: 14px 44px 14px 15px;
  position: relative;
  cursor: pointer;
  list-style: none;
  transition: background-color .3s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: #fff7f8; }
.faq__q-text {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .04em;
}
.faq__mark {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--color-white);
  font-family: var(--font-number);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.faq__mark--q { background: var(--color-pink-badge); }
.faq__mark--a { background: var(--color-sky); }

/* 開閉アイコン：＋ → − */
.faq__icon {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: #fff0f3;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  margin: -1px 0 0 -5px;
  border-radius: 2px;
  background: var(--color-pink);
  transition: transform .35s var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__item.is-closing .faq__icon::after { transform: rotate(90deg); }

/* 回答 */
.faq__a { overflow: hidden; }
.faq__a-inner {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 0 15px;
  padding: 18px 0 22px;
  border-top: 1px dashed #f8baaf;
}
.faq__a-text {
  padding-top: 4px;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .06em;
}

@media (min-width: 768px) {
  .faq { padding: 114px var(--gutter) 143px; }
  .faq__list {
    gap: 31px;
    margin-top: 72px;
  }
  .faq__item { border-radius: 34px; }
  .faq__q {
    gap: 33px;
    min-height: 109px;
    padding: 16px 96px 16px 48px;
  }
  .faq__q-text {
    font-size: clamp(18px, 1.6vw, 22px);
    letter-spacing: .08em;
  }
  .faq__mark {
    width: 57px;
    height: 57px;
    font-size: 24px;
  }
  .faq__icon {
    right: 44px;
    width: 32px;
    height: 32px;
    margin-top: -16px;
  }
  .faq__icon::before,
  .faq__icon::after {
    width: 14px;
    margin-left: -7px;
  }
  .faq__a-inner {
    gap: 33px;
    margin: 0 48px;
    padding: 26px 48px 32px 0;
  }
  .faq__a-text {
    padding-top: 12px;
    font-size: 16px;
  }
}

/* =========================================================
   最終CTA（Contact）
========================================================= */
.contact__visual {
  position: relative;
  aspect-ratio: 390 / 440;
  /* SP：笑顔の女性が中心に来るトリミング */
  background: url("../images/contact-photo.webp") 58% 30% / cover no-repeat;
}
/* 「出会うって楽しいかも！」は画像の左下 */
.contact__copy {
  position: absolute;
  left: 4%;
  bottom: 5%;
  width: 56%;
  filter: drop-shadow(0 1px 6px rgba(60, 40, 40, .35));   /* 白い服の上でも読めるように */
}

.contact__body {
  padding: 60px 20px 68px;
  background: rgb(242, 121, 136);   /* 画面下の申し込みバナー（rgba(240,106,122,.86)）を白地に重ねたときと同じ色 */
  color: var(--color-white);
  text-align: center;
}
.contact__label {
  display: inline-block;
  font-family: var(--font-script);
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  transform: rotate(-15deg);
  transform-origin: center;
}
.contact__title {
  margin-top: 36px;
  font-size: clamp(28px, 8.8vw, 36px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .14em;
}
.contact__text {
  margin-top: 18px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: .16em;
}
.contact__btn {
  width: min(100%, 308px);
  min-height: 76px;
  margin-top: 40px;
  padding: 0 44px 0 36px;
  font-size: 15px;
  letter-spacing: .1em;
}

@media (min-width: 768px) {
  .contact__visual {
    aspect-ratio: 1400 / 525;
    /* PC：2人が向かい合う横長トリミング */
    background-position: 50% 30%;
    background-size: cover;
  }
  .contact__copy {
    top: auto;
    left: 6%;
    bottom: 8%;
    width: 26%;
  }
  .contact__body {
    padding: clamp(60px, 6vw, 82px) var(--gutter) clamp(64px, 6.2vw, 88px);
  }
  .contact__label { font-size: clamp(48px, 4.6vw, 64px); }
  .contact__title {
    margin-top: clamp(24px, 2.4vw, 34px);
    font-size: clamp(32px, 3.3vw, 46px);
    letter-spacing: .16em;
  }
  .contact__text {
    margin-top: clamp(16px, 1.6vw, 22px);
    font-size: clamp(17px, 1.75vw, 25px);
    letter-spacing: .2em;
  }
  .contact__btn {
    width: clamp(300px, 35.4vw, 495px);
    min-height: clamp(70px, 6.8vw, 95px);
    margin-top: clamp(32px, 3.4vw, 48px);
    font-size: clamp(16px, 1.6vw, 22px);
  }
  .contact__btn { padding: 0 56px; letter-spacing: .12em; }
  .contact__btn::after { right: clamp(36px, 4.3vw, 60px); width: 14px; height: 14px; }
  .contact__btn:hover::after { right: clamp(30px, 3.9vw, 54px); }
}

/* =========================================================
   フッター
========================================================= */
.site-footer {
  background: var(--color-bg-blush);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 20px 18px;
}
.site-footer__logo { width: 184px; }
.site-footer__org {
  color: var(--color-text-sub);
  font-size: 13px;
  letter-spacing: .06em;
}
.site-footer__org a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
  transition: color .3s var(--ease);
}
.site-footer__org a:hover { color: var(--color-pink); }

@media (min-width: 768px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: center;
    gap: clamp(24px, 3.5vw, 50px);
    padding: 40px var(--gutter) 38px;
  }
  .site-footer__logo { width: clamp(200px, 18vw, 254px); }
  .site-footer__org { font-size: clamp(13px, 1.1vw, 16px); }
}

/* =========================================================
   SP：画面下に固定の申し込みバナー
   （ファーストビューを過ぎたら下からスッと出て、最後の申し込みエリアでは隠れる）
========================================================= */
.fixed-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;   /* ヘッダー(100)・SPメニューより下 */
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
  background: rgba(240, 106, 122, .86);   /* ピンク＋少し透明 */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -4px 16px rgba(214, 90, 90, .18);
  text-align: center;
  translate: 0 110%;
  transition: translate .45s var(--ease);
}
.fixed-cta.is-shown { translate: none; }

.fixed-cta__label {
  color: var(--color-white);
  font-size: clamp(13px, 3.8vw, 15px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
}
.fixed-cta__label::before { content: "＼"; margin-right: .5em; }
.fixed-cta__label::after  { content: "／"; margin-left: .5em; }

.fixed-cta__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6px;
  padding: 9px 52px 10px 22px;
  border-radius: 999px;
  background: linear-gradient(110deg, #fffaf0 0%, #fff4e0 55%, #ffe9c4 56%, #fff3dc 100%);
  box-shadow: 0 3px 0 rgba(176, 60, 76, .35);
  color: #e0526a;
  text-decoration: none;
  transition: translate .15s var(--ease), box-shadow .15s var(--ease);
}
.fixed-cta__btn:active {
  translate: 0 2px;
  box-shadow: 0 1px 0 rgba(176, 60, 76, .35);
}
.fixed-cta__sub {
  font-size: clamp(12px, 3.5vw, 14px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
}
.fixed-cta__main {
  font-size: clamp(22px, 6.6vw, 27px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .1em;
}
/* 右端の ▶ */
.fixed-cta__arrow {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  background: #e0526a;
}
.fixed-cta__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -3px;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--color-white);
}

/* PCでは表示しない */
@media (min-width: 768px) {
  .fixed-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fixed-cta { transition: none; }
}

/* =========================================================
   スクロールアニメーション（JS有効時のみ）
========================================================= */
/* transform ではなく translate を使い、要素自身の transform（回転など）と干渉しないようにする */
.js .js-fade {
  opacity: 0;
  translate: 0 16px;
  transition: opacity .9s var(--ease), translate .9s var(--ease);
}
.js .js-fade.is-visible {
  opacity: 1;
  translate: none;
}

/* .point：軽く「ポンッ」と弾むように表示（scale で少し小さい状態から、ちょっと行き過ぎて戻る） */
.js .point.js-fade {
  scale: .82;
  translate: 0 10px;
  transition:
    opacity .45s var(--ease),
    translate .45s var(--ease),
    scale .6s cubic-bezier(.34, 1.7, .64, 1);
}
.js .point.js-fade.is-visible {
  scale: 1;
  translate: none;
}
/* heroの丸バッジ：.point と同じく「ポンッ」と表示（表示の時間差はJSで設定） */
.js .badge.js-fade {
  scale: .6;
  translate: none;
  transition:
    opacity .4s var(--ease),
    scale .65s cubic-bezier(.34, 1.8, .64, 1);
}
.js .badge.js-fade.is-visible { scale: 1; }

/* 悩みの吹き出し：「ポンッ」と1つずつ順番に表示 */
.js .bubble.js-fade {
  scale: .7;
  translate: none;
  transition:
    opacity .4s var(--ease),
    scale .6s cubic-bezier(.34, 1.7, .64, 1);
}
.js .bubble.js-fade.is-visible { scale: 1; }
.js .bubble.js-fade:nth-child(2) { transition-delay: .15s; }
.js .bubble.js-fade:nth-child(3) { transition-delay: .3s; }
.js .bubble.js-fade:nth-child(4) { transition-delay: .45s; }
.js .bubble.js-fade:nth-child(5) { transition-delay: .6s; }


/* 順番に少しずつずらして表示 */
.js .point.js-fade:nth-child(2) { transition-delay: .1s; }
.js .point.js-fade:nth-child(3) { transition-delay: .2s; }
.js .point.js-fade:nth-child(4) { transition-delay: .3s; }

/* ファーストビューのキャッチ「出会うことからはじめよう。」だけ、少し遅れて下からふわっと表示
   （ページを開いたときの1回だけ。ほかの要素は最初から表示） */
.hero-sp__title img,
.hero__title img {
  animation: hero-title-in 1s cubic-bezier(.22, 1, .36, 1) .3s both;
}
@keyframes hero-title-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-sp__title img,
  .hero__title img { animation: none; }
  .js .point.js-fade,
  .js .badge.js-fade,
  .js .bubble.js-fade { scale: 1; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .js-fade { opacity: 1; translate: none; }
}

/* Contactのボタン：画面下の申し込みバナーと同じデザイン */
.contact__cta {
  width: min(100%, 340px);
  margin: 40px auto 0;
}
@media (min-width: 768px) {
  .contact__cta {
    width: 420px;
    margin-top: 48px;
  }
  .contact__cta.contact__cta { display: flex; }
  .contact__cta .fixed-cta__sub.fixed-cta__sub  { font-size: 16px; }
  .contact__cta .fixed-cta__main.fixed-cta__main { font-size: 30px; }
  .contact__cta { padding-top: 14px; padding-bottom: 14px; }
}