@charset "UTF-8";

/* ==========================================================
   FUJII DENTAL KIDS PARK - Top Page (Full)
   ========================================================== */

/* ---------- リセット & ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Zen Kaku Gothic Antique', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  color: #2D3142;
  background: #FFFFFF;
  line-height: 1.7;
  font-size: 16px;          /* ベース最小サイズ */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; height: auto; display: block; }

/* カラー変数（彩度高めでメリハリのある配色） */
:root {
  --c-pink:       #e85a64;   /* メインピンク（鮮やかコーラル） */
  --c-pink-l:     #f5aeae;   /* ライトピンク */
  --c-turq:       #4ea8b5;   /* ティール（深め） */
  --c-blue:       #5fb1d8;   /* スカイブルー（鮮やか） */
  --c-yellow:     #f5c441;   /* マスタード（鮮やか） */
  --c-cream:      #f5d99a;   /* クリーム */
  --c-coral:      #f5aeae;   /* 淡コーラル */
  --c-green:      #8ec486;   /* セージグリーン（深め） */
  --c-navy:       #2e2d66;   /* ネイビー */
  --c-skin:       #e6bfab;   /* 肌色 */
  --c-text:       #2d1a0a;   /* ダークブラウン（テキスト・濃く） */
  --c-text-sub:   #6a3906;   /* サブテキスト */
  --c-bg-soft:    #fdf6ea;   /* ソフトクリーム背景 */
  --c-bg-cream:   #fbf2dd;   /* やや濃いクリーム */
  --c-line:       #c36767;   /* アクセントライン */
}

/* 共通コンテナ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* SP only / PC only */
.sp-only { display: none; }
@media (max-width: 768px) {
  .sp-only { display: inline; }
}

/* 共通セクション見出し */
.sec-head {
  text-align: center;
  margin-bottom: 56px;
  position: relative;
}
.sec-head__en {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.25em;
  color: var(--c-pink);
  margin: 0 0 6px;
}
.sec-head__ja {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.4;
}
.sec-head__ja .accent,
.sec-head__ja .accent .char {
  background: linear-gradient(120deg, var(--c-pink), var(--c-coral));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.sec-head__lead {
  font-size: 17px;
  color: #666;
  margin: 0;
}
.sec-head__deco {
  display: inline-block;
  width: 60px; height: 6px;
  background: var(--c-yellow);
  border-radius: 999px;
  margin-top: 16px;
  position: relative;
}
.sec-head__deco::before,
.sec-head__deco::after {
  content: '';
  position: absolute;
  top: 0;
  width: 16px; height: 6px;
  border-radius: 999px;
}
.sec-head__deco::before { left: -22px; background: var(--c-turq); }
.sec-head__deco::after  { right: -22px; background: var(--c-pink); }
.sec-head--white .sec-head__en { color: #fff; }
.sec-head--white .sec-head__ja { color: #fff; }
.sec-head--white .sec-head__lead { color: rgba(255,255,255,0.92); }

/* 共通ボタン */
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  background: #fff;
  border: 2px solid var(--c-pink);
  color: var(--c-pink);
  font-weight: 700;
  font-size: 16px;
  border-radius: 999px;
  transition: all 0.25s ease;
}
.btn-line:hover {
  background: var(--c-pink);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(255,107,157,0.3);
}

.sec-more { text-align: center; margin-top: 40px; }


/* ==========================================================
   ヘッダー
   ========================================================== */
.header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(255, 107, 157, 0.08);
  z-index: 100;
}
.header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.header__logo-icon {
  width: 48px; height: 48px;
  display: inline-block;
  animation: logo-bounce 2.4s ease-in-out infinite;
}
.header__logo-icon svg { width: 100%; height: 100%; }
.header__logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.header__logo-en {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--c-text);
  letter-spacing: 0.04em;
}
.header__logo-sub {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--c-pink);
  letter-spacing: 0.08em;
}

.gnav__list {
  display: flex;
  gap: 4px;
  align-items: center;
}
.gnav__list > li > a {
  display: inline-block;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  border-radius: 999px;
  transition: all 0.25s ease;
}
.gnav__list > li > a:hover {
  background: var(--c-bg-soft);
  color: var(--c-pink);
  transform: translateY(-2px);
}
.gnav__list .arrow {
  font-size: 9px;
  margin-left: 4px;
  color: var(--c-pink);
}

.hamburger {
  display: none;
  width: 44px; height: 44px;
  background: var(--c-pink);
  border: none;
  border-radius: 50%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.hamburger span {
  width: 20px; height: 2px;
  background: #fff;
  border-radius: 2px;
}


/* ==========================================================
   1. ファーストビュー
   ========================================================== */
.fv {
  position: relative;
  min-height: 100vh;
  padding: 100px 24px 80px;
  background:
    radial-gradient(circle at 20% 20%, #fce9e6 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, #e3edf2 0%, transparent 40%),
    radial-gradient(circle at 50% 90%, #fbf2dd 0%, transparent 35%),
    #fffaf2;
  overflow: hidden;
}
.fv__inner {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;     /* ビジュアル側を少し広く */
  gap: 50px;
  align-items: center;
}
.fv__text { animation: fade-up 0.9s ease-out 0.2s backwards; }
.fv__sub { margin: 0 0 16px; }
.fv__tag {
  display: inline-block;
  padding: 8px 20px;
  background: var(--c-turq);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-radius: 999px;
  position: relative;
}
.fv__tag::before {
  content: '';
  position: absolute;
  left: 20px; bottom: -6px;
  border: 6px solid transparent;
  border-top-color: var(--c-turq);
  border-bottom: 0;
}
.fv__catch {
  margin: 0 0 24px;
  font-size: clamp(32px, 4.2vw, 58px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.fv__catch .line {
  display: block;
  position: relative;
  white-space: nowrap; /* 文字途中での折り返しを禁止 */
}

.fv__catch .line--1 { color: var(--c-text); }
.fv__catch .line--2,
.fv__catch .line--2 .char {
  background: linear-gradient(120deg, var(--c-pink), var(--c-coral));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.fv__catch .line--2::after {
  content: '✦';
  position: absolute;
  right: -30px; top: -10px;
  font-size: 26px;
  color: var(--c-yellow);
  animation: spin 4s linear infinite;
  -webkit-text-fill-color: var(--c-yellow);
}
.fv__lead {
  margin: 0 0 28px;
  font-size: 17px;
  color: #555;
  font-weight: 500;
}
.fv__points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 32px;
}
.fv__points li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #fff;
  border: 2px solid var(--c-yellow);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 4px 0 rgba(255, 217, 61, 0.4);
  color: var(--c-text);
}
.fv__points .ico { width: 20px; height: 20px; color: var(--c-pink); }
.fv__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* 共通CTAボタン */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 800;
  position: relative;
  transition: transform 0.25s ease;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.08);
}
.btn:hover { transform: translateY(-3px); }
.btn__icon { width: 22px; height: 22px; flex-shrink: 0; }
.btn--web .btn__icon, .btn--insta .btn__icon { color: #fff; }
.btn--tel .btn__icon { color: var(--c-turq); }
.btn__main { font-size: 17px; display: block; line-height: 1.2; }
.btn__sub  { font-size: 13px; opacity: 0.85; display: block; line-height: 1.2; }
.btn > span:not(.btn__icon) { display: flex; flex-direction: column; }
.btn--web {
  background: linear-gradient(135deg, var(--c-pink), var(--c-coral));
  color: #fff;
  animation: btn-pulse 2.4s ease-in-out infinite;
}
.btn--tel {
  background: #fff;
  color: var(--c-text);
  border: 3px solid var(--c-turq);
}
.btn--tel .btn__main { color: var(--c-turq); }
.btn--insta {
  background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF);
  color: #fff;
}

/* ビジュアル */
.fv__visual { animation: fade-up 0.9s ease-out 0.5s backwards; }
.fv__visual-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 920px;
  margin: 0 auto;
}
.fv__photo {
  position: absolute;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(255, 107, 157, 0.18);
}
.fv__photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #FFE5EE, #FFF0D9);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #B07A8A;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.05em;
  text-align: center;
}
.placeholder small { font-size: 12px; opacity: 0.7; margin-top: 4px; }
.placeholder--sub {
  background: linear-gradient(135deg, #DFF5F2, #E8F0FF);
  color: #5A8B85;
  font-size: 14px;
}
.fv__photo--main {
  width: 84%; height: 92%;
  top: 4%; right: -4%;
  transform: rotate(2deg);
  animation: photo-float 5s ease-in-out infinite, organic-morph 9s ease-in-out infinite;
}
.fv__photo--sub1 {
  width: 42%; height: 42%;
  bottom: -4%; left: -6%;
  transform: rotate(-9deg);
  animation: photo-float 6s ease-in-out infinite 1s, organic-morph 10s ease-in-out infinite -2s;
  border: 8px solid #fff;
  z-index: 2;
}
.fv__photo--sub2 {
  width: 34%; height: 34%;
  top: -4%; left: 4%;
  transform: rotate(12deg);
  animation: photo-float 5.5s ease-in-out infinite 0.5s, organic-morph 11s ease-in-out infinite -4s;
  border: 8px solid #fff;
  z-index: 2;
}
.badge {
  position: absolute;
  width: 96px; height: 96px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  line-height: 1.25;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  z-index: 3;
}
.badge--1 {
  background: var(--c-yellow);
  color: var(--c-text);
  top: -10px; right: -10px;
  animation: badge-rotate 6s linear infinite;
}
.badge--2 {
  background: var(--c-green);
  width: 86px; height: 86px;
  bottom: 10%; right: -16px;
  font-size: 12px;
  animation: badge-bob 3s ease-in-out infinite;
}

/* 装飾イラスト */
.fv__decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.cloud { position: absolute; opacity: 0.9; }
.cloud svg { width: 100%; height: auto; }
.cloud--1 { width: 180px; top: 12%; left: -180px; animation: cloud-move-1 28s linear infinite; }
.cloud--2 { width: 140px; top: 30%; left: -140px; animation: cloud-move-2 36s linear infinite; }
.cloud--3 { width: 200px; top: 60%; left: -200px; animation: cloud-move-3 42s linear infinite; }

.star { position: absolute; }
.star svg { width: 100%; height: 100%; }
.star--1 { width: 32px; height: 32px; top: 18%; left: 8%;  animation: twinkle 2.5s ease-in-out infinite; }
.star--2 { width: 24px; height: 24px; top: 38%; left: 44%; animation: twinkle 3s   ease-in-out infinite 0.5s; }
.star--3 { width: 28px; height: 28px; top: 70%; left: 14%; animation: twinkle 2.8s ease-in-out infinite 1s; }
.star--4 { width: 36px; height: 36px; top: 22%; right: 6%; animation: twinkle 2.6s ease-in-out infinite 0.8s; }

.brush {
  position: absolute;
  bottom: 8%; right: 4%;
  width: 60px;
  transform-origin: bottom center;
  animation: brush-swing 3.5s ease-in-out infinite;
  z-index: 1;
}
.brush svg { width: 100%; height: auto; }

.mascot {
  position: absolute;
  bottom: 4%; left: 4%;
  width: 80px;          /* マスコット = ベビーなので小さめ */
  animation: mascot-walk 6s ease-in-out infinite;
  z-index: 3;
}
.mascot svg,
.mascot img { width: 100%; height: auto; display: block; }

.bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,107,157,0.15));
  border: 2px solid rgba(255, 107, 157, 0.2);
}
.bubble--1 { width: 16px; height: 16px; top: 50%; left: 38%; animation: bubble-up 4s ease-in infinite; }
.bubble--2 { width: 22px; height: 22px; top: 75%; left: 30%; animation: bubble-up 5s ease-in infinite 1s; }
.bubble--3 { width: 12px; height: 12px; top: 60%; left: 22%; animation: bubble-up 3.5s ease-in infinite 0.5s; }

.fv__wave {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  line-height: 0;
  z-index: 2;
}
.fv__wave svg { width: 100%; height: 80px; display: block; }


/* ==========================================================
   2. お知らせ
   ========================================================== */
.news {
  padding: 100px 0;
  background: var(--c-bg-soft);
}
/* 2カラム：左に見出し、右にお知らせ一覧 */
.news__wrap {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
  align-items: start;
}
.news__head {
  margin-bottom: 0;
  position: sticky;
  top: 100px;
}
.sec-head--left {
  text-align: left;
  margin-bottom: 0;
}
.sec-head--left .sec-head__deco { margin-left: 0; margin-right: auto; display: block; width: 60px; }
.sec-head--left .sec-head__deco::before { left: 70px; background: var(--c-turq); }
.sec-head--left .sec-head__deco::after  { left: 92px; right: auto; background: var(--c-pink); }
.news__more {
  margin-top: 32px;
  align-self: flex-start;
}
.news__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  max-width: none;
}
.news__item a {
  display: grid;
  grid-template-columns: 110px 100px 1fr;
  gap: 20px;
  align-items: center;
  padding: 22px 28px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(255, 107, 157, 0.08);
  transition: all 0.25s ease;
}
.news__item a:hover {
  transform: translateX(8px);
  box-shadow: 0 8px 24px rgba(255, 107, 157, 0.16);
}
.news__item time {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--c-pink);
}
.news__tag {
  display: inline-block;
  text-align: center;
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  border-radius: 999px;
}
.news__tag--info   { background: var(--c-turq); }
.news__tag--event  { background: var(--c-coral); }
.news__tag--clinic { background: var(--c-green); }
.news__title {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
}


/* ==========================================================
   3. 当院が選ばれる理由
   ========================================================== */
.reason {
  position: relative;
  padding: 120px 0;
  background: #fff;
  overflow: hidden;
}
.reason__bg-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.dot {
  position: absolute;
  border-radius: 50%;
  opacity: 0.4;
}
.dot--y { width: 120px; height: 120px; background: #FFFBEA; top: 10%; left: 5%; animation: float-y 6s ease-in-out infinite; }
.dot--p { width: 80px; height: 80px; background: #FFF0F5; top: 60%; right: 8%; animation: float-y 7s ease-in-out infinite 1s; }
.dot--t { width: 160px; height: 160px; background: #E8F7F5; bottom: 5%; left: 30%; animation: float-y 8s ease-in-out infinite 0.5s; }

.reason__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.reason__item {
  position: relative;
  padding: 40px 24px 32px;
  background: #fff;
  border-radius: 32px;
  border: 3px solid;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 6px 18px rgba(64, 34, 15, 0.06);
}
.reason__item:hover {
  transform: translateY(-8px) rotate(-1deg);
  box-shadow: 0 14px 28px rgba(64, 34, 15, 0.12);
}
.reason__item--01 { border-color: var(--c-yellow); }
.reason__item--02 { border-color: var(--c-turq); }
.reason__item--03 { border-color: var(--c-pink); }
.reason__item--04 { border-color: var(--c-green); }

.reason__num {
  position: absolute;
  top: -22px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 60px;
  background: var(--c-yellow);
  color: var(--c-text);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 19px;
  border: 3px solid #fff;
  box-shadow: 0 6px 14px rgba(64, 34, 15, 0.22);
}
.reason__item:nth-child(2) .reason__num { background: var(--c-turq); color: #fff; }
.reason__item:nth-child(3) .reason__num { background: var(--c-pink); color: #fff; }
.reason__item:nth-child(4) .reason__num { background: var(--c-green); color: #fff; }

.reason__icon {
  width: 100px; height: 100px;
  margin: 16px auto 16px;
}
.reason__item:hover .reason__icon { animation: wiggle 0.6s ease-in-out; }
.reason__icon svg { width: 100%; height: 100%; }

/* 写真エリア（アイコンの代替） */
.reason__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 16px 0 20px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.reason__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.reason__item:hover .reason__photo img { transform: scale(1.05); }
.reason__photo-label {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  text-align: center;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.reason__photo-label small {
  display: inline-block;
  font-size: 11px;
  margin-top: 8px;
  padding: 3px 12px;
  background: rgba(255,255,255,0.35);
  border-radius: 999px;
  font-weight: 700;
}
/* 画像未配置時は項目別の色背景＋ラベル表示 */
.reason__photo.is-empty .reason__photo-label { display: flex; }
.reason__item--01 .reason__photo.is-empty { background: var(--c-pink-l); }
.reason__item--02 .reason__photo.is-empty { background: var(--c-blue); }
.reason__item--03 .reason__photo.is-empty { background: var(--c-yellow); }
.reason__item--04 .reason__photo.is-empty { background: var(--c-green); }

.reason__title {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 800;
  color: var(--c-text);
}
.reason__text {
  margin: 0;
  font-size: 16px;
  color: #555;
  line-height: 1.8;
}


/* ==========================================================
   4. 年齢別ケア
   ========================================================== */
.age {
  padding: 120px 0;
  background:
    radial-gradient(circle at 0% 50%, #fce9e6 0%, transparent 30%),
    radial-gradient(circle at 100% 50%, #e3edf2 0%, transparent 30%),
    #fffaf2;
}
/* ---------- 年齢別ケア：カード式グリッドレイアウト ---------- */
.age__wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0 40px;
}

.age__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* 各カード：均一サイズの整然グリッド */
.age__card {
  background: #fff;
  border-radius: 22px;
  overflow: visible;
  box-shadow: 0 8px 24px rgba(64, 34, 15, 0.10);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}
.age__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 36px rgba(64, 34, 15, 0.16);
  z-index: 5;
}
.age__card:hover .age__card-badge {
  transform: rotate(8deg) scale(1.12);
}

.age__card-link {
  display: block;
  border-radius: 22px;
  overflow: hidden;
}

/* Family カードは下段で 2 カラム分の横長フィーチャー */
.age__card--family {
  grid-column: span 2;
  background: linear-gradient(135deg, #fef0e6, #fbe5d8);
  border: 3px solid var(--c);
}
/* 縦積み（写真上・本文下）で他カードと同じ構造に */
.age__card--family .age__card-link {
  display: flex;
  flex-direction: column;
  background: transparent;
}
/* ---------- Family カード 専用上書き ---------- */
/* 写真エリア：1枚絵の親子イラストを中央に大きく */
.age__card--family .age__card-photo--family {
  aspect-ratio: 2 / 1;       /* 横長：高さは regular カード photo と同じ */
  height: auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 24px 0;
  background: transparent;
  overflow: hidden;
}
.age__card--family .age__card-photo::before,
.age__card--family .age__card-photo::after { display: none; }

/* 親子の1枚絵（写真エリア内に程よく収まるサイズ） */
/* 詳細度を上げて .age__card-illust の後段ルールに勝つ */
.age__card--family .age__card-illust--family {
  width: auto;
  height: 92%;
  max-width: 68%;        /* 気持ち小さめ */
  max-height: 95%;
  object-fit: contain;
  object-position: bottom;
}
/* 本文部分：通常カードと同じ横並びレイアウト */
.age__card--family .age__card-body {
  background: rgba(255, 255, 255, 0.65);
  border-radius: 0 0 22px 22px;
  padding: 18px 22px;
}
.age__card--family .age__card-info {
  display: block;
}
.age__card--family .age__card-en { font-size: 26px; margin-bottom: 6px; }
.age__card--family .age__card-ja { font-size: 15px; line-height: 1.7; }
.age__card--family .age__card-arrow { font-size: 30px; }

/* バッジ位置を Family 写真の右上に再配置 */
.age__card--family .age__card-badge {
  top: 12px;
  right: 12px;
  z-index: 4;
}

/* ---------- 写真（イラスト）エリア ---------- */
.age__card-photo {
  position: relative;
  aspect-ratio: 4 / 4.2;
  overflow: hidden;
  background: var(--c2);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px 18px 0;
}
/* ベース装飾：奥に大きな円 */
.age__card-photo::before {
  content: '';
  position: absolute;
  width: 130%;
  aspect-ratio: 1;
  background: var(--c);
  border-radius: 50%;
  bottom: -65%;
  left: -15%;
  opacity: 0.7;
}
/* 装飾：上部に弧 */
.age__card-photo::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  background: var(--c);
  border-radius: 50% 60% 70% 40% / 50% 50% 60% 40%;
  opacity: 0.45;
  animation: blob-morph 8s ease-in-out infinite;
}
/* イラスト本体 */
.age__card-illust {
  position: relative;
  z-index: 2;
  width: 70%;
  max-width: 160px;
  height: 90%;
  object-fit: contain;
  object-position: bottom;
  transition: transform 0.4s ease;
}
.age__card:hover .age__card-illust {
  transform: translateY(-6px) scale(1.04);
}

/* 年齢別のイラスト比率調整（ベビーが一番小さく、年齢が上がるにつれて徐々に大きく） */
.age__card--p1 .age__card-illust { height: 86%; max-width: 138px; } /* -1歳 Maternity（おかあさん想定）*/
.age__card--p2 .age__card-illust { height: 48%; max-width: 110px; } /* 0歳 Baby（一番小さい）*/
.age__card--p3 .age__card-illust { height: 58%; max-width: 122px; } /* 1〜2歳 Toddler */
.age__card--p4 .age__card-illust { height: 72%; max-width: 138px; } /* 3〜6歳 Child */
.age__card--p5 .age__card-illust { height: 82%; max-width: 150px; } /* 7〜9歳 Kids */
.age__card--p6 .age__card-illust { height: 82%; max-width: 140px; } /* 10〜12歳 Tween（badgeに被らないよう抑えめ）*/

/* Family は複数イラストを横並びに */
.age__card-photo--family {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding: 18px 12px 0;
}
.age__card-illust--multi {
  width: auto;
  max-width: 24%;
  height: 92%;
  flex-shrink: 0;
}
.age__card-illust--center {
  z-index: 3;
  transform: translateY(-4px);
}

/* ---------- 年齢バッジ（写真右上に大きく） ---------- */
.age__card-badge {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  min-width: 78px;
  min-height: 78px;
  padding: 8px 6px;
  background: var(--c);
  color: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), inset 0 -3px 0 rgba(0,0,0,0.08);
  border: 3px solid #fff;
  font-family: 'Outfit', sans-serif;
  transform: rotate(-6deg);
  transition: transform 0.3s ease;
}
.age__card-badge .num {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.age__card-badge .num small {
  font-size: 14px;
  font-weight: 600;
  margin: 0 1px;
  opacity: 0.85;
}
.age__card-badge .unit {
  display: block;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 700;
  font-size: 11px;
  margin-top: 3px;
  opacity: 0.95;
}
/* Familyだけ縦書きじゃなく大きめ和文 */
.age__card-badge--family {
  transform: rotate(-4deg);
}
.age__card-badge--family .num {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-size: 18px;
  font-weight: 800;
}
.age__card-badge--family .unit {
  font-size: 10px;
}
/* 黄色など淡い背景バッジ用：文字を濃いブラウンに */
.age__card-badge--dark {
  color: var(--c-text);
  text-shadow: none;
}

.age__card:hover .age__card-badge {
  transform: rotate(0deg) scale(1.08);
}

/* プレースホルダーラベル */
.age__card-photo-label {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  text-align: center;
  line-height: 1.5;
  background: linear-gradient(135deg, var(--c), var(--c2));
}
.age__card-photo-label small {
  display: inline-block;
  font-size: 10px;
  margin-top: 6px;
  padding: 3px 10px;
  background: rgba(255,255,255,0.35);
  border-radius: 999px;
  font-weight: 700;
}
.age__card-photo.is-empty .age__card-photo-label { display: flex; }

/* ---------- 下部情報エリア ---------- */
.age__card-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  background: #fff;
}
.age__card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.age__card-icon svg {
  width: 28px;
  height: 28px;
}
.age__card:hover .age__card-icon { transform: rotate(-12deg) scale(1.1); }

.age__card-info {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
/* 年齢表示は写真上バッジに集約したので、body内では非表示 */
.age__card-age { display: none; }
.age__card-en {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--c-text);
  line-height: 1.2;
}
.age__card-ja {
  margin: 4px 0 0;
  font-size: 14px;
  color: #888;
  font-weight: 600;
}
.age__card-arrow {
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 400;
  color: #BBB;
  transition: all 0.25s ease;
  padding-right: 4px;
}
.age__card:hover .age__card-arrow {
  color: var(--c);
  transform: translateX(4px);
}

@keyframes blob-morph {
  0%, 100% { border-radius: 50% 60% 70% 40% / 50% 50% 60% 40%; transform: rotate(0); }
  33%      { border-radius: 60% 40% 50% 70% / 60% 50% 40% 50%; transform: rotate(8deg); }
  66%      { border-radius: 40% 70% 60% 50% / 50% 70% 50% 40%; transform: rotate(-6deg); }
}


/* ==========================================================
   5. お悩みから探す
   ========================================================== */
.worry {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
}
.worry__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--c-pink) 0%, var(--c-coral) 50%, #FFB997 100%);
  z-index: 0;
}
.worry__bg::before,
.worry__bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.worry__bg::before { width: 300px; height: 300px; top: -100px; left: -100px; }
.worry__bg::after  { width: 400px; height: 400px; bottom: -150px; right: -150px; }
.worry .container { position: relative; z-index: 1; }
.worry__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.worry__list li a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  background: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  color: var(--c-text);
  box-shadow: 0 6px 0 rgba(0,0,0,0.08);
  transition: all 0.25s ease;
  position: relative;
}
.worry__list li a::after {
  content: '→';
  margin-left: auto;
  color: var(--c-pink);
  font-weight: 800;
  transition: transform 0.25s ease;
}
.worry__list li a:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 rgba(0,0,0,0.08);
}
.worry__list li a:hover::after { transform: translateX(6px); }
.worry__emoji {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: var(--c-bg-soft);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-pink);
}
.worry__emoji .hi { width: 24px; height: 24px; }
.worry__list li:hover .worry__emoji { animation: wiggle 0.5s ease; }


/* ==========================================================
   6. 定期管理型予防プログラム
   ========================================================== */
.program {
  padding: 120px 0;
  background: #fff;
}
.program__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.program__panel {
  position: relative;
  padding: 40px 32px 36px;
  border-radius: 36px;
  text-align: center;
  overflow: hidden;
}
.program__panel--kohcp {
  background: linear-gradient(135deg, #FFF0F5, #FFE5EE);
  border: 3px solid var(--c-pink);
}
.program__panel--ohcp {
  background: linear-gradient(135deg, #E8F7F5, #DFF5F2);
  border: 3px solid var(--c-turq);
}
.program__panel-tag {
  display: inline-block;
  padding: 6px 18px;
  background: #fff;
  border-radius: 999px;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}
.program__panel--kohcp .program__panel-tag { color: var(--c-pink); }
.program__panel--ohcp .program__panel-tag { color: var(--c-turq); }

/* 日本語タイトル（メインで一番目立つ） */
.program__panel-name {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 12px;
  color: var(--c-text);
}

/* 英略称 + フルネーム */
.program__panel-code {
  font-family: 'Outfit', sans-serif;
  margin: 0 0 24px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.program__panel-code span {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.program__panel-code small {
  font-size: 12px;
  color: #888;
  letter-spacing: 0.05em;
}
.program__panel--kohcp .program__panel-code span { color: var(--c-pink); }
.program__panel--ohcp  .program__panel-code span { color: var(--c-turq); }
.program__panel-illust {
  width: 220px;
  height: 240px;
  margin: 0 auto 20px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.program__panel-illust svg,
.program__panel-illust img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom;
}
/* 子供と大人のサイズを揃えるための個別調整 */
.program__panel--kohcp .program__panel-illust img {
  transform: scale(0.85);
  transform-origin: bottom center;
}
.program__panel--ohcp .program__panel-illust img {
  transform: scale(0.95);
  transform-origin: bottom center;
}
.program__panel-text {
  font-size: 16px;
  color: #555;
  margin: 0 0 20px;
  text-align: left;
  background: rgba(255,255,255,0.7);
  padding: 18px;
  border-radius: 16px;
  line-height: 1.8;
}
.program__panel-text strong {
  color: var(--c-text);
  font-weight: 800;
}
.program__panel-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 24px;
  text-align: left;
}
.program__panel-features li {
  padding: 10px 18px 10px 40px;
  background: #fff;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  position: relative;
}
.program__panel-features li::before {
  content: '✓';
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  background: var(--c-yellow);
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.program__panel--ohcp .btn-line {
  border-color: var(--c-turq);
  color: var(--c-turq);
}
.program__panel--ohcp .btn-line:hover {
  background: var(--c-turq);
  color: #fff;
  box-shadow: 0 6px 14px rgba(78,205,196,0.3);
}
/* ボタン2つ並びレイアウト */
.program__panel-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.program__panel-btns .btn-line { width: 90%; max-width: 280px; justify-content: center; }
.btn-line--alt {
  background: transparent;
}
.program__panel--ohcp .btn-line--alt {
  border-color: var(--c-text);
  color: var(--c-text);
}
.program__panel--ohcp .btn-line--alt:hover {
  background: var(--c-text);
  color: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}


/* ==========================================================
   7. 矯正治療
   ========================================================== */
.ortho {
  padding: 120px 0;
  background: var(--c-bg-soft);
}
.ortho__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.ortho__card {
  background: #fff;
  border-radius: 32px;
  padding: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transition: transform 0.25s ease;
}
.ortho__card:hover { transform: translateY(-6px); }
/* ボタンを中央寄せ */
.ortho__card > .btn-line {
  display: flex;
  width: fit-content;
  margin: 0 auto;
  justify-content: center;
}
.ortho__card-head { margin-bottom: 20px; }
.ortho__tag {
  display: inline-block;
  padding: 5px 16px;
  background: var(--c-pink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 10px;
}
.ortho__tag--adult { background: var(--c-turq); }
.ortho__card-head h3 {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--c-text);
}
.ortho__card-head h3 small {
  display: block;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-size: 15px;
  color: #888;
  font-weight: 500;
  margin-top: 2px;
}
.ortho__card-photo {
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
  background: #f3f3f3;
}
.ortho__card-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ortho__card-text {
  font-size: 16px;
  color: #555;
  margin: 0 0 20px;
  line-height: 1.8;
}
.ortho__card-text strong {
  color: var(--c-text);
  font-weight: 800;
}
.ortho__card-spec {
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ortho__card-spec > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 12px 16px;
  background: var(--c-bg-soft);
  border-radius: 12px;
  font-size: 15px;
}
.ortho__card-spec dt { font-weight: 700; color: var(--c-pink); margin: 0; }
.ortho__card-spec dd { margin: 0; font-weight: 600; }


/* ==========================================================
   8. 院内紹介
   ========================================================== */
.clinic {
  padding: 120px 0;
  background: #fff;
}
.clinic__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 220px);
  gap: 16px;
}
.clinic__photo {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}
.clinic__photo .placeholder {
  height: 100%;
}
.clinic__photo:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}
.clinic__photo--01 { grid-column: span 2; grid-row: span 1; }
.clinic__caption {
  position: absolute;
  bottom: 12px; left: 12px;
  background: rgba(255,255,255,0.92);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text);
  margin: 0;
}


/* ==========================================================
   9. アクセス・診療時間
   ========================================================== */
.access {
  padding: 120px 0;
  background: #fff;
}
.access__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.access__map {
  border-radius: 24px;
  overflow: hidden;
  min-height: 400px;
  background: #fff;
}
.access__info {
  background: #fff;
  border-radius: 24px;
  padding: 32px;
}
.access__info-list {
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.access__info-list > div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px dashed #E5E5E5;
}
.access__info-list dt {
  margin: 0;
  font-weight: 700;
  color: var(--c-pink);
  font-size: 16px;
}
.access__info-list dd {
  margin: 0;
  font-size: 16px;
}
.access__info-list a { color: var(--c-pink); font-weight: 700; }

.access__hours-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
}
.access__hours {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  font-size: 15px;
}
.access__hours th,
.access__hours td {
  padding: 12px 4px;
  text-align: center;
  border-radius: 8px;
}
.access__hours thead th {
  background: var(--c-pink);
  color: #fff;
  font-weight: 700;
}
.access__hours thead th:first-child {
  background: transparent;
}
.access__hours tbody th {
  background: var(--c-bg-soft);
  color: var(--c-pink);
  text-align: left;
  padding-left: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.access__hours tbody td {
  background: #fff;
  border: 1px solid #FFE5EE;
  font-weight: 700;
  color: var(--c-turq);
}
.access__hours-note {
  margin: 14px 0 0;
  font-size: 14px;
  color: #888;
}


/* ==========================================================
   10. CTA
   ========================================================== */
.cta {
  position: relative;
  padding: 100px 0;
  background: linear-gradient(135deg, var(--c-pink), var(--c-coral));
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.cta__deco { position: absolute; inset: 0; pointer-events: none; }
.cta__star { position: absolute; opacity: 0.7; }
.cta__star svg { width: 100%; height: 100%; }
.cta__star--1 { width: 60px; height: 60px; top: 20%; left: 8%; animation: twinkle 3s ease-in-out infinite; }
.cta__star--2 { width: 40px; height: 40px; top: 60%; right: 12%; animation: twinkle 2.5s ease-in-out infinite 0.5s; }
.cta__star--3 { width: 50px; height: 50px; bottom: 15%; left: 30%; animation: twinkle 2.8s ease-in-out infinite 1s; }

.cta__title {
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 800;
  margin: 0 0 16px;
  line-height: 1.5;
  position: relative;
}
.cta__lead {
  margin: 0 0 32px;
  font-size: 17px;
  opacity: 0.95;
}
.cta__btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.cta .btn--web {
  background: #fff;
  color: var(--c-pink);
  animation: btn-pulse-white 2.4s ease-in-out infinite;
}
.cta .btn--web .btn__main { color: var(--c-pink); }
.cta .btn--web .btn__icon { color: var(--c-pink); } /* 白背景ボタンなのでアイコンもピンク */
.cta .btn--tel {
  background: var(--c-text);
  color: #fff;
  border-color: var(--c-text);
}
.cta .btn--tel .btn__main { color: #fff; }


/* ==========================================================
   フッター
   ========================================================== */
.footer {
  background: #fff;
  color: var(--c-text);
  padding: 60px 0 24px;
}
.footer__wrap {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer__brand .header__logo-en {
  color: var(--c-text);
}
.footer__brand .header__logo-sub {
  color: var(--c-pink);
}
.footer__addr {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.8;
  opacity: 0.85;
}
.footer__addr a { color: var(--c-pink); font-weight: 700; }
.footer__nav ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.footer__nav a {
  font-size: 15px;
  opacity: 0.85;
  transition: opacity 0.2s ease;
  padding: 4px 0;
  display: inline-block;
  color: var(--c-text);
}
.footer__nav a:hover { opacity: 1; color: var(--c-pink); }
.footer__copy {
  text-align: center;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(64,34,15,0.15);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  opacity: 0.65;
  letter-spacing: 0.1em;
}


/* ==========================================================
   固定CTA（SP用）
   ========================================================== */
.fixed-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  z-index: 90;
  background: #fff;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.1);
}
.fixed-cta__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.fixed-cta__item > span:first-child { font-size: 22px; }
.fixed-cta__item .hi { width: 22px; height: 22px; color: #fff; margin-bottom: 2px; }
.fixed-cta__item--tel { background: var(--c-turq); }
.fixed-cta__item--web { background: var(--c-pink); }

@media (max-width: 900px) {
  .fixed-cta { display: flex; }
}


/* ==========================================================
   アニメーション定義
   ========================================================== */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes logo-bounce {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-4px) rotate(-6deg); }
}
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 6px 0 rgba(0,0,0,0.08), 0 0 0 0 rgba(255,107,157,0.5); }
  50%      { box-shadow: 0 6px 0 rgba(0,0,0,0.08), 0 0 0 14px rgba(255,107,157,0); }
}
@keyframes btn-pulse-white {
  0%, 100% { box-shadow: 0 6px 0 rgba(0,0,0,0.08), 0 0 0 0 rgba(255,255,255,0.6); }
  50%      { box-shadow: 0 6px 0 rgba(0,0,0,0.08), 0 0 0 14px rgba(255,255,255,0); }
}
@keyframes photo-float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-12px) rotate(var(--r, 0deg)); }
}
.fv__photo--sub1 { --r: -6deg; }
.fv__photo--sub2 { --r: 8deg; }
@keyframes badge-rotate {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
@keyframes badge-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
@keyframes cloud-move-1 { to { transform: translateX(calc(100vw + 200px)); } }
@keyframes cloud-move-2 { to { transform: translateX(calc(100vw + 200px)); } }
@keyframes cloud-move-3 { to { transform: translateX(calc(100vw + 200px)); } }
@keyframes twinkle {
  0%, 100% { opacity: 0.4; transform: scale(0.8) rotate(0); }
  50%      { opacity: 1;   transform: scale(1.15) rotate(20deg); }
}
@keyframes brush-swing {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(12deg); }
}
@keyframes mascot-walk {
  0%   { transform: translateX(0) translateY(0) rotate(-4deg); }
  25%  { transform: translateX(20px) translateY(-10px) rotate(6deg); }
  50%  { transform: translateX(40px) translateY(0) rotate(-4deg); }
  75%  { transform: translateX(20px) translateY(-10px) rotate(6deg); }
  100% { transform: translateX(0) translateY(0) rotate(-4deg); }
}
@keyframes bubble-up {
  0%   { transform: translateY(0) scale(0.8); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-200px) scale(1.2); opacity: 0; }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-30px); }
}
@keyframes gentle-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-10px) rotate(3deg); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-10deg); }
  75%      { transform: rotate(10deg); }
}


/* ==========================================================
   レスポンシブ
   ========================================================== */
@media (max-width: 1100px) {
  .gnav__list > li > a { padding: 8px 10px; font-size: 13px; }
  .reason__list { grid-template-columns: repeat(2, 1fr); }
  /* タブレット：3カラム、Familyは全幅 */
  .age__list { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .age__card--family { grid-column: 1 / -1; }
  .age__card--family .age__card-link { grid-template-columns: 1fr 1fr; }
  .worry__list  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .gnav { display: none; }
  .hamburger { display: flex; }
  /* お知らせ2カラムは縦並びへ */
  .news__wrap { grid-template-columns: 1fr; gap: 32px; }
  .news__head { position: static; }
  .sec-head--left { text-align: center; }
  .sec-head--left .sec-head__deco { margin: 16px auto 0; }
  .sec-head--left .sec-head__deco::before { left: -22px; }
  .sec-head--left .sec-head__deco::after  { left: auto; right: -22px; }
  .news__more { display: inline-flex; margin: 24px auto 0; }

  .fv { padding: 90px 20px 60px; }
  .fv__inner { grid-template-columns: 1fr; gap: 40px; }
  .fv__catch { text-align: center; }
  .fv__catch .line--2::after { right: 10%; }
  .fv__sub, .fv__lead { text-align: center; }
  .fv__points { justify-content: center; }
  .fv__cta { justify-content: center; }

  .program__panels { grid-template-columns: 1fr; }
  .ortho__cards    { grid-template-columns: 1fr; }
  .access__wrap    { grid-template-columns: 1fr; }
  .access__map     { min-height: 280px; }
  .clinic__gallery { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .clinic__photo--01 { grid-column: span 2; }
  .footer__wrap    { grid-template-columns: 1fr; }
  .footer__nav ul  { grid-template-columns: repeat(2, 1fr); }

  body { padding-bottom: 64px; }
}

@media (max-width: 600px) {
  .header__inner { padding: 10px 16px; }
  .header__logo-icon { width: 40px; height: 40px; }
  .header__logo-en { font-size: 14px; }
  .header__logo-sub { font-size: 10px; }

  .fv__visual-wrap { max-width: 340px; }
  .badge--1 { width: 76px; height: 76px; font-size: 11px; }
  .badge--2 { width: 68px; height: 68px; font-size: 10px; }

  .btn { padding: 12px 18px; }
  .btn__main { font-size: 14px; }
  .btn__icon { font-size: 18px; }

  .mascot { width: 70px; }
  .brush { width: 44px; }

  .news, .reason, .age, .worry, .program, .ortho, .clinic, .access, .cta {
    padding-top: 80px; padding-bottom: 80px;
  }
  .news__item a {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 20px;
  }
  .reason__list { grid-template-columns: 1fr; }
  /* スマホ：年齢別カードの調整 */
  .age__list { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  /* バッジを小さく */
  .age__card-badge {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    top: 8px;
    right: 8px;
    padding: 5px 4px;
    border-width: 2px;
  }
  .age__card-badge .num { font-size: 19px; }
  .age__card-badge .num small { font-size: 11px; }
  .age__card-badge .unit { font-size: 9px; margin-top: 2px; }
  .age__card-badge--family .num { font-size: 14px; }
  .age__card-badge--family .unit { font-size: 8px; }

  /* 写真エリアのパディング縮小 */
  .age__card-photo { padding: 14px 14px 0; }

  /* 本文の見直し */
  .age__card-body { padding: 12px 12px; gap: 8px; }
  .age__card-en { font-size: 17px; }
  .age__card-ja { font-size: 12px; }
  .age__card-arrow { font-size: 20px; }

  /* Familyは全幅で縦並び（写真上・本文下） */
  .age__card--family { grid-column: 1 / -1; }
  .age__card--family .age__card-link { grid-template-columns: 1fr; }
  .age__card--family .age__card-photo--family {
    aspect-ratio: 16 / 9;
    min-height: 0;
    height: auto;
    padding: 16px 16px 0;
  }
  .age__card--family .age__card-illust--family {
    height: 110%;
    max-width: 60%;
    max-height: 115%;
  }
  .age__card--family .age__card-body {
    border-radius: 0 0 22px 22px;
    padding: 20px;
  }
  .age__card--family .age__card-en { font-size: 22px; }
  .age__card--family .age__card-ja { font-size: 13px; }

  .worry__list  { grid-template-columns: 1fr; }
  .clinic__gallery { grid-template-columns: 1fr; }
  .clinic__photo--01 { grid-column: span 1; }
}

/* ==========================================================
   各セクションの装飾イラスト
   ========================================================== */

/* スマホでは装飾を一部非表示にして詰まりを回避 */
@media (max-width: 768px) {
  .fv__deco-illust--2 { display: none; }
  .news__deco--2 { display: none; }
  .reason__deco { width: 60px; }
  .worry__deco { width: 60px; }
  .worry__deco--2 { display: none; }
  .cta__kid { width: 80px; }
  .program__deco { display: none; }
  .age__bg-illust { width: 60px; opacity: 0.4; }
}

/* ==========================================================
   スクロール連動アニメーション（data-reveal）
   ========================================================== */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
[data-reveal="up"]     { transform: translateY(40px); }
[data-reveal="left"]   { transform: translateX(-40px); }
[data-reveal="right"]  { transform: translateX(40px); }
[data-reveal="zoom"]   { transform: scale(0.85); }
[data-reveal="rotate"] { transform: rotate(-8deg) scale(0.9); }
[data-reveal="paint"]  { transform: scale(0); }
[data-reveal].is-in    { opacity: 1; transform: none; }

/* delay バリエーション */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }
[data-delay="800"] { transition-delay: 0.8s; }

/* ==========================================================
   1文字ずつアニメ（.char）
   ========================================================== */
.char {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) rotate(-12deg);
}
/* FV のキャッチコピーは即時アニメ */
.fv__catch .char {
  animation: char-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(0.05s * var(--i, 0) + 0.3s);
}
/* それ以外（セクション見出しなど）はスクロール到達時にアニメ発火 */
[data-reveal].is-in .char {
  animation: char-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(0.04s * var(--i, 0) + 0.1s);
}
@keyframes char-in {
  0%   { opacity: 0; transform: translateY(40px) rotate(-12deg); }
  60%  { opacity: 1; transform: translateY(-4px) rotate(3deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}

/* ==========================================================
   Health Icons 汎用アイコン
   使い方: <i class="hi hi--tooth"></i>
   サイズは width/height で指定。色は currentColor 経由で親から継承。
   ========================================================== */
.hi {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  flex-shrink: 0;
}
.hi--tooth      { -webkit-mask-image: url(../img/icons/tooth.svg);      mask-image: url(../img/icons/tooth.svg); }
.hi--mouth      { -webkit-mask-image: url(../img/icons/mouth.svg);      mask-image: url(../img/icons/mouth.svg); }
.hi--calendar   { -webkit-mask-image: url(../img/icons/calendar.svg);   mask-image: url(../img/icons/calendar.svg); }
.hi--phone      { -webkit-mask-image: url(../img/icons/phone.svg);      mask-image: url(../img/icons/phone.svg); }
.hi--car        { -webkit-mask-image: url(../img/icons/car.svg);        mask-image: url(../img/icons/car.svg); }
.hi--mobile     { -webkit-mask-image: url(../img/icons/mobile.svg);     mask-image: url(../img/icons/mobile.svg); }
.hi--toothbrush { -webkit-mask-image: url(../img/icons/toothbrush.svg); mask-image: url(../img/icons/toothbrush.svg); }
.hi--drop       { -webkit-mask-image: url(../img/icons/drop.svg);       mask-image: url(../img/icons/drop.svg); }
.hi--sad        { -webkit-mask-image: url(../img/icons/sad.svg);        mask-image: url(../img/icons/sad.svg); }
.hi--happy      { -webkit-mask-image: url(../img/icons/happy.svg);      mask-image: url(../img/icons/happy.svg); }
.hi--sweets     { -webkit-mask-image: url(../img/icons/sweets.svg);     mask-image: url(../img/icons/sweets.svg); }
.hi--bottle     { -webkit-mask-image: url(../img/icons/bottle.svg);     mask-image: url(../img/icons/bottle.svg); }
.hi--instagram  { -webkit-mask-image: url(../img/icons/instagram.svg);  mask-image: url(../img/icons/instagram.svg); }

/* ==========================================================
   ブラシストロークの装飾（散らばる手描き図形）
   CSS mask で形状指定 + background-color で色付け
   ========================================================== */
.brush {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  background-color: var(--brush-c, #ef858c);
  -webkit-mask-image: var(--shape, url('../img/brush-1.svg'));
          mask-image: var(--shape, url('../img/brush-1.svg'));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transform: rotate(var(--rand-rotate, 0deg)) scale(var(--bs, 1));
  animation: brush-float var(--bdur, 5s) ease-in-out infinite;
  animation-delay: var(--bd, 0s);
  opacity: var(--op, 0.85);
}
.brush img { display: none; } /* 旧実装のimg は非表示 */

@keyframes brush-float {
  0%, 100% { transform: rotate(var(--rand-rotate, 0deg)) scale(var(--bs, 1)) translate(0, 0); }
  50%      { transform: rotate(calc(var(--rand-rotate, 0deg) + 6deg)) scale(var(--bs, 1)) translate(0, -10px); }
}

/* 色違いのバリエーション（彩度高め・はっきり配色） */
.brush--pink   { --brush-c: #e85a64; --op: 0.95; }
.brush--coral  { --brush-c: #f5aeae; --op: 1; }
.brush--yellow { --brush-c: #f5c441; --op: 1; }
.brush--cream  { --brush-c: #f5d99a; --op: 1; }
.brush--blue   { --brush-c: #5fb1d8; --op: 0.95; }
.brush--teal   { --brush-c: #4ea8b5; --op: 0.9; }
.brush--navy   { --brush-c: #b189ce; --op: 0.85; }
.brush--brown  { --brush-c: #d8a26b; --op: 0.95; }
.brush--green  { --brush-c: #8ec486; --op: 0.95; }
.brush--peach  { --brush-c: #ff9d72; --op: 0.95; }
.brush--mauve  { --brush-c: #c98ab5; --op: 0.9; }

/* ==========================================================
   写真をオーガニックな形にクリップ
   ========================================================== */
.organic {
  border-radius: 60% 40% 60% 40% / 50% 60% 40% 50%;
  animation: organic-morph 8s ease-in-out infinite;
}
.organic--2 { border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%; animation-delay: -2s; }
.organic--3 { border-radius: 55% 45% 35% 65% / 45% 55% 45% 55%; animation-delay: -4s; }
@keyframes organic-morph {
  0%, 100% { border-radius: 60% 40% 60% 40% / 50% 60% 40% 50%; }
  33%      { border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%; }
  66%      { border-radius: 55% 45% 35% 65% / 45% 55% 45% 55%; }
}

/* ==========================================================
   横ループ画像ストリップ（cLoopImage 風）
   ========================================================== */
.marquee {
  overflow: hidden;
  position: relative;
  padding: 24px 0;
}
.marquee__track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: marquee-loop 30s linear infinite;
}
.marquee__item {
  flex: 0 0 auto;
  width: 220px;
  height: 220px;
  border-radius: 60% 40% 60% 40% / 50% 60% 40% 50%;
  overflow: hidden;
  background: #f0f0f0;
  position: relative;
  animation: organic-morph 8s ease-in-out infinite;
}
/* 大きめサイズ（1段マーキー用）：個別にサイズ感を変える */
.marquee--lg {
  overflow: visible;        /* シェイプがはみ出せるよう */
  overflow-x: clip;          /* 横はみ出しのみ抑える */
  margin: 60px 0 0;          /* 上の余白のみ。下は次セクションの padding に任せる */
}
.marquee--lg .marquee__track {
  gap: 30px;                 /* 写真を詰めて配置 */
  align-items: center;
  padding: 80px 0 40px;      /* 下側パディングを抑える */
}

/* 写真本体（imgに border-radius を移して、親はオーバーフロー可視に） */
.marquee--lg .marquee__item {
  overflow: visible;         /* シェイプがはみ出せる */
  background: transparent;
  position: relative;
  border-radius: 0;          /* 親の border-radius は不要 */
}
.marquee--lg .marquee__item img {
  border-radius: inherit;    /* fallback */
  position: relative;
  z-index: 2;                /* シェイプより前 */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 個別の有機形は img 側に直接かける */
.marquee--lg .marquee__item:nth-child(7n+1) img { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
.marquee--lg .marquee__item:nth-child(7n+2) img { border-radius: 50% 50% 45% 55% / 60% 40% 60% 40%; }
.marquee--lg .marquee__item:nth-child(7n+3) img { border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%; }
.marquee--lg .marquee__item:nth-child(7n+4) img { border-radius: 65% 35% 50% 50% / 55% 50% 50% 45%; }
.marquee--lg .marquee__item:nth-child(7n+5) img { border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%; }
.marquee--lg .marquee__item:nth-child(7n+6) img { border-radius: 50% 60% 40% 60% / 55% 45% 55% 45%; }
.marquee--lg .marquee__item:nth-child(7n+7) img { border-radius: 60% 40% 45% 55% / 40% 60% 50% 60%; }

/* ---------- 裏に大きく重なる手描き風シェイプ（::before / ::after） ---------- */
.marquee--lg .marquee__item::before,
.marquee--lg .marquee__item::after {
  content: '';
  position: absolute;
  z-index: 1;                /* 写真より奥 */
  background-color: var(--shape-c);
  -webkit-mask: var(--shape-img) no-repeat center / contain;
          mask: var(--shape-img) no-repeat center / contain;
  pointer-events: none;
  animation: brush-float 9s ease-in-out infinite;
}

/* ::before = 大きめのメインシェイプ（裏に大きくはみ出す） */
.marquee--lg .marquee__item::before {
  width: 140%;
  height: 130%;
  top: -15%;
  left: -50%;
  opacity: 1;
}
/* ::after = 小ぶりのサブシェイプ（反対側にちょこんと） */
.marquee--lg .marquee__item::after {
  width: 60%;
  height: 60%;
  top: 50%;
  right: -45%;
  opacity: 0.9;
  animation-delay: 1.5s;
}

/* 各写真ごとに違う色と形を割り当て（7枚で循環）／彩度高めパレット */
.marquee--lg .marquee__item:nth-child(7n+1)::before { --shape-c: #5fb1d8; --shape-img: url(../img/brush-4.svg); transform: rotate(-8deg); }
.marquee--lg .marquee__item:nth-child(7n+1)::after  { --shape-c: #f5c441; --shape-img: url(../img/brush-3.svg); right: auto; left: -25%; top: 60%; transform: rotate(12deg); }

.marquee--lg .marquee__item:nth-child(7n+2)::before { --shape-c: #f5c441; --shape-img: url(../img/brush-1.svg); transform: rotate(6deg); left: auto; right: -50%; }
.marquee--lg .marquee__item:nth-child(7n+2)::after  { --shape-c: #5fb1d8; --shape-img: url(../img/brush-5.svg); left: -25%; right: auto; top: 10%; transform: rotate(-14deg); }

.marquee--lg .marquee__item:nth-child(7n+3)::before { --shape-c: #4ea8b5; --shape-img: url(../img/brush-2.svg); transform: rotate(-12deg); top: -20%; left: -30%; width: 130%; height: 120%; }
.marquee--lg .marquee__item:nth-child(7n+3)::after  { --shape-c: #f5c441; --shape-img: url(../img/brush-6.svg); right: -30%; top: 40%; transform: rotate(10deg); }

.marquee--lg .marquee__item:nth-child(7n+4)::before { --shape-c: #f5aeae; --shape-img: url(../img/brush-1.svg); transform: rotate(10deg); right: -50%; left: auto; opacity: 0.95; }
.marquee--lg .marquee__item:nth-child(7n+4)::after  { --shape-c: #5fb1d8; --shape-img: url(../img/brush-3.svg); left: -30%; right: auto; top: 0; transform: rotate(-8deg); }

.marquee--lg .marquee__item:nth-child(7n+5)::before { --shape-c: #e85a64; --shape-img: url(../img/brush-4.svg); transform: rotate(-6deg); opacity: 0.75; }
.marquee--lg .marquee__item:nth-child(7n+5)::after  { --shape-c: #f5c441; --shape-img: url(../img/brush-2.svg); right: -40%; top: 20%; transform: rotate(6deg); }

.marquee--lg .marquee__item:nth-child(7n+6)::before { --shape-c: #8ec486; --shape-img: url(../img/brush-2.svg); transform: rotate(8deg); left: auto; right: -45%; }
.marquee--lg .marquee__item:nth-child(7n+6)::after  { --shape-c: #e85a64; --shape-img: url(../img/brush-3.svg); left: -25%; right: auto; top: 50%; transform: rotate(-12deg); opacity: 0.75; }

.marquee--lg .marquee__item:nth-child(7n+7)::before { --shape-c: #f5c441; --shape-img: url(../img/brush-6.svg); transform: rotate(-10deg); }
.marquee--lg .marquee__item:nth-child(7n+7)::after  { --shape-c: #5fb1d8; --shape-img: url(../img/brush-1.svg); right: -30%; top: 50%; transform: rotate(8deg); }
.marquee--lg .marquee__item {
  position: relative;
  isolation: isolate;
  animation: none;         /* 個別アニメは下で nth-child ごとに */
}

/* 各カードのサイズと有機形をバラバラに */
.marquee--lg .marquee__item:nth-child(7n+1) { width: 380px; height: 380px; border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
.marquee--lg .marquee__item:nth-child(7n+2) { width: 320px; height: 420px; border-radius: 50% 50% 45% 55% / 60% 40% 60% 40%; }
.marquee--lg .marquee__item:nth-child(7n+3) { width: 440px; height: 320px; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%; }
.marquee--lg .marquee__item:nth-child(7n+4) { width: 340px; height: 360px; border-radius: 65% 35% 50% 50% / 55% 50% 50% 45%; }
.marquee--lg .marquee__item:nth-child(7n+5) { width: 400px; height: 400px; border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%; }
.marquee--lg .marquee__item:nth-child(7n+6) { width: 360px; height: 440px; border-radius: 50% 60% 40% 60% / 55% 45% 55% 45%; }
.marquee--lg .marquee__item:nth-child(7n+7) { width: 420px; height: 340px; border-radius: 60% 40% 45% 55% / 40% 60% 50% 60%; }

/* 背景シェイプ（同じ有機形を半透明で奥に配置） */
.marquee--lg .marquee__item::before {
  content: '';
  position: absolute;
  inset: -28px;
  z-index: -1;
  border-radius: inherit;
  background: var(--shape-c, #fde6e6);
  transform: rotate(var(--shape-rot, 6deg)) translate(var(--shape-x, 18px), var(--shape-y, 14px));
  opacity: 0.7;
  animation: organic-morph 12s ease-in-out infinite;
}
.marquee--lg .marquee__item:nth-child(7n+1)::before { --shape-c: #fde6e6; --shape-rot: -8deg; --shape-x: -20px; --shape-y: 18px; } /* coral pink */
.marquee--lg .marquee__item:nth-child(7n+2)::before { --shape-c: #f7e4b9; --shape-rot:  6deg; --shape-x:  18px; --shape-y: 22px; } /* cream */
.marquee--lg .marquee__item:nth-child(7n+3)::before { --shape-c: #e3edf2; --shape-rot: -5deg; --shape-x: -22px; --shape-y: 14px; } /* light blue */
.marquee--lg .marquee__item:nth-child(7n+4)::before { --shape-c: #eaf3e8; --shape-rot:  8deg; --shape-x:  18px; --shape-y: 18px; } /* sage green */
.marquee--lg .marquee__item:nth-child(7n+5)::before { --shape-c: #f8c9c5; --shape-rot: -7deg; --shape-x: -18px; --shape-y: 22px; } /* pink */
.marquee--lg .marquee__item:nth-child(7n+6)::before { --shape-c: #f7d37a; --shape-rot:  5deg; --shape-x:  20px; --shape-y: 14px; } /* yellow */
.marquee--lg .marquee__item:nth-child(7n+7)::before { --shape-c: #91c2dd; --shape-rot: -6deg; --shape-x: -20px; --shape-y: 18px; } /* blue */
.marquee__item:nth-child(2n) { animation-delay: -3s; }
.marquee__item:nth-child(3n) { animation-delay: -5s; }
.marquee__item img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom;
  background: var(--bg, #f7e4b9);
  padding: 16px 12px 0;
}
/* 実写真用マーキー（パディングなし、cover で全面表示） */
.marquee__item--photo img {
  object-fit: cover;
  object-position: center;
  background: transparent;
  padding: 0;
}
.marquee__cap {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.92);
  color: var(--c-text);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
@keyframes marquee-loop {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* マウスオーバーで止まる挙動は無効化 */

/* リバース方向 */
.marquee--reverse .marquee__track {
  animation-direction: reverse;
  animation-duration: 36s;
}

/* ==========================================================
   ブランド名 流れるテキスト（シンプル版）
   ========================================================== */
.brand-marquee {
  overflow: hidden;
  background: transparent;
  padding: 24px 0;
  position: relative;
}
.brand-marquee__track {
  display: flex;
  align-items: center;
  gap: 36px;
  width: max-content;
  animation: brand-marquee-loop 50s linear infinite;
}
.brand-marquee__track > span {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: clamp(36px, 5.5vw, 80px);
  color: var(--c-pink);
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1;
}
.brand-marquee__dot {
  font-size: clamp(20px, 3vw, 36px) !important;
  color: var(--c-yellow) !important;
  display: inline-block;
}
@keyframes brand-marquee-loop {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .brand-marquee { padding: 20px 0; }
}

/* ==========================================================
   各セクションの装飾イラスト
   ========================================================== */

/* ----------------------------------------------------------
   汎用ブラシシェイプ装飾（各セクションにランダム配置できる）
   使い方: <div class="shape shape--blue shape--brush4" style="width:180px;height:160px;top:40px;left:6%;--rot:-12deg;"></div>
   ---------------------------------------------------------- */
.shape {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-color: var(--shape-bg, #5fb1d8);
  -webkit-mask: var(--shape-img, url(../img/brush-1.svg)) no-repeat center / contain;
          mask: var(--shape-img, url(../img/brush-1.svg)) no-repeat center / contain;
  transform: rotate(var(--rot, 0deg));
  opacity: var(--shape-op, 0.8);
  animation: brush-float 10s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
/* 色バリエーション */
.shape--pink   { --shape-bg: #ef858c; }
.shape--coral  { --shape-bg: #f8c9c5; }
.shape--yellow { --shape-bg: #f7d37a; }
.shape--cream  { --shape-bg: #f7e4b9; }
.shape--blue   { --shape-bg: #91c2dd; }
.shape--teal   { --shape-bg: #79b4bc; }
.shape--green  { --shape-bg: #b5d6b0; }
.shape--mauve  { --shape-bg: #d4a5c9; }
/* 形バリエーション */
.shape--brush1 { --shape-img: url(../img/brush-1.svg); }
.shape--brush2 { --shape-img: url(../img/brush-2.svg); }
.shape--brush3 { --shape-img: url(../img/brush-3.svg); }
.shape--brush4 { --shape-img: url(../img/brush-4.svg); }
.shape--brush5 { --shape-img: url(../img/brush-5.svg); }
.shape--brush6 { --shape-img: url(../img/brush-6.svg); }

/* セクション内に配置するときに overflow を抑える */
.news, .reason, .age, .program, .ortho, .access, .cta, .footer {
  position: relative;
}
.news, .reason, .age, .program, .ortho, .access {
  overflow: hidden;
}

/* セクション内の主要コンテンツ（.container 等）はシェイプより前面に */
.news .container,
.reason .container,
.age .container,
.age__wrap,
.program .container,
.ortho .container,
.access .container,
.cta .container,
.worry .container {
  position: relative;
  z-index: 2;
}
.sec-more { position: relative; z-index: 2; }

/* ----------------------------------------------------------
   装飾イラスト：使用キャラの年齢に合わせて体格を調整
   ---------------------------------------------------------- */

/* FV 装飾 */
.fv__deco-illust {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  animation: gentle-float 4s ease-in-out infinite;
}
.fv__deco-illust--1 { /* girl-overall（5〜7歳）*/
  top: 18%; right: 18%;
  width: 90px;
  opacity: 0.85;
  transform: rotate(8deg);
  animation-delay: 0.4s;
}
.fv__deco-illust--2 { /* boy-school（8〜10歳）= 大きめ */
  bottom: 8%; left: 38%;
  width: 110px;
  opacity: 1;
  transform: rotate(-6deg);
  animation-delay: 1.2s;
}

/* News 装飾 */
.news { position: relative; overflow: hidden; }
.news__deco {
  position: absolute;
  opacity: 0.75;
  z-index: 0;
  animation: gentle-float 4s ease-in-out infinite;
}
.news__deco--1 { top: 80px;    left: 20%; width: 75px;  transform: rotate(-6deg); } /* girl-bag（7〜9歳）*/
.news__deco--2 { bottom: 80px; right: 22%; width: 90px; transform: rotate(8deg); animation-delay: 1s; } /* boy-uniform（9〜12歳）*/

/* Reasons 装飾 */
.reason__deco {
  position: absolute;
  opacity: 1;
  z-index: 0;
  animation: gentle-float 5s ease-in-out infinite;
}
.reason__deco--l { top: 70px;  left: 16%; width: 75px;  transform: rotate(-8deg); } /* girl-pink（4〜6歳）= 小さめ */
.reason__deco--r { top: 100px; right: 16%; width: 95px; transform: rotate(6deg); animation-delay: 1.5s; } /* boy-cap（5〜8歳）*/

/* Worries 装飾 */
.worry__deco {
  position: absolute;
  opacity: 0.9;
  z-index: 2;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
  animation: gentle-float 4s ease-in-out infinite;
}
.worry__deco--1 { top: 40px; left: 14%;  width: 130px; transform: rotate(-8deg); } /* worries-01（困った男の子）*/
.worry__deco--3 { top: 40px; right: 14%; width: 130px; transform: rotate(8deg);  animation-delay: 1.4s; } /* worries-02（困った女の子）*/

/* CTA 装飾 */
.cta { overflow: hidden; }
.cta__kid {
  position: absolute;
  bottom: -10px;
  opacity: 0.95;
  z-index: 1;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.2));
  animation: gentle-float 3s ease-in-out infinite;
}
.cta__kid--l { left: 14%;  width: 105px; transform: rotate(-6deg); } /* girl-overall（5〜7歳）*/
.cta__kid--r { right: 14%; width: 130px; transform: rotate(6deg); animation-delay: 0.6s; } /* boy-school（8〜10歳）= 大きめ */
.cta .container { position: relative; z-index: 2; }

/* Program 装飾 */
.program { position: relative; overflow: hidden; }
.program__deco {
  position: absolute;
  opacity: 0.6;
  z-index: 0;
  animation: gentle-float 5s ease-in-out infinite;
}
.program__deco--l { top: 30%; left: 14%;  width: 80px;  transform: rotate(-10deg); } /* girl-apron（5〜7歳）*/
.program__deco--r { top: 35%; right: 14%; width: 100px; transform: rotate(8deg); animation-delay: 1s; } /* boy-uniform（9〜12歳）= 大きめ */

/* スマホでは装飾を一部非表示にして詰まりを回避 */
@media (max-width: 768px) {
  .fv__deco-illust--2 { display: none; }
  .news__deco--2 { display: none; }
  .reason__deco { width: 60px !important; opacity: 0.5; }
  .worry__deco { width: 90px !important; }
  .cta__kid { width: 90px !important; }
  .cta__kid--r { width: 105px !important; }
  .program__deco { display: none; }
  .age__bg-illust { width: 60px; opacity: 0.4; }
  .brush { transform: scale(0.7); }
  .marquee__item { width: 160px; height: 160px; }
  /* スマホでもサイズ感のバリエーションを残す */
  .marquee--lg .marquee__item:nth-child(7n+1) { width: 240px; height: 240px; }
  .marquee--lg .marquee__item:nth-child(7n+2) { width: 200px; height: 260px; }
  .marquee--lg .marquee__item:nth-child(7n+3) { width: 280px; height: 200px; }
  .marquee--lg .marquee__item:nth-child(7n+4) { width: 220px; height: 230px; }
  .marquee--lg .marquee__item:nth-child(7n+5) { width: 250px; height: 250px; }
  .marquee--lg .marquee__item:nth-child(7n+6) { width: 220px; height: 270px; }
  .marquee--lg .marquee__item:nth-child(7n+7) { width: 260px; height: 210px; }
  .marquee--lg .marquee__track { gap: 18px; padding: 50px 0; }
  /* スマホでもシェイプ表示。サイズが小さい分は ::before / ::after の比率で対応 */
}

/* 動きを抑えたいユーザーへの配慮 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .char { opacity: 1 !important; transform: none !important; animation: none !important; }
}