/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&family=Nunito:wght@400;600;700;800;900&family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  color: #2d3a35;
  background: #fafaf7;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }

/* ---------- オリジナル追加 ---------- */
.annot {
    text-align: right;
    font-size: 12px;
}


/* ---------- カラー変数 ---------- */
:root {
  --mint:      #6BCFB0;
  --mint-lt:   #B8F0E0;
  --mint-bg:   #E8F8F2;
  --lav:       #A890D8;
  --lav-lt:    #D4B8F0;
  --lav-bg:    #EEE8FF;
  --coral:     #E890A8;
  --coral-lt:  #F0B8C8;
  --coral-bg:  #FFF0F5;
  --gold:      #E8C870;
  --gold-lt:   #F0E0B8;
  --gold-bg:   #FFFAE8;
  --sky:       #70A8D8;
  --sky-bg:    #E8F5FF;
  --green:     #70C870;
  --green-bg:  #F0FFF0;
  --text:      #2d3a35;
  --text-md:   #4a6a60;
  --text-lt:   #7a9a90;
  --radius:    1.25rem;
  --shadow:    0 4px 20px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.13);
}

/* ---------- レイアウトユーティリティ ---------- */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
}
@media (min-width: 768px) { .container { padding: 0 2rem; } }

.section       { padding: 5rem 0; }
.text-center   { text-align: center; }
.mb-14         { margin-bottom: 3.5rem; }
.mb-16         { margin-bottom: 4rem; }

/* ---------- バッジ ---------- */
.badge {
  display: inline-block;
  font-size: .8rem; font-weight: 700;
  padding: .3rem 1rem; border-radius: 9999px;
  margin-bottom: 1rem;
}
.badge-mint  { background: var(--mint-bg);  color: #2d6a55; }
.badge-lav   { background: var(--lav-bg);   color: #4a3580; }
.badge-coral { background: var(--coral-bg); color: #803050; }
.badge-gold  { background: var(--gold-bg);  color: #806030; }
.badge-sky   { background: var(--sky-bg);   color: #204870; }
.badge-green { background: var(--green-bg); color: #2a5a2a; }

/* ---------- セクションタイトル ---------- */
.section-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900; line-height: 1.2;
  margin-bottom: .75rem; color: var(--text);
}
.section-title .accent-mint  { color: var(--mint); }
.section-title .accent-lav   { color: var(--lav); }
.section-title .accent-coral { color: var(--coral); }
.section-title .accent-gold  { color: var(--gold); }
.section-desc {
  color: var(--text-md); font-size: 1rem;
  max-width: 600px; margin: 0 auto;
}

/* ---------- カード ---------- */
.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* ---------- ボタン ---------- */
.btn-primary {
  display: inline-block;
  background: linear-gradient(135deg, #6BCFB0, #4ABFA0);
  color: #fff; font-weight: 700; font-size: 1rem;
  padding: .9rem 2.2rem; border-radius: 9999px;
  box-shadow: 0 6px 20px rgba(107,207,176,.4);
  transition: transform .25s, box-shadow .25s;
  cursor: pointer;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(107,207,176,.5); }

.btn-outline {
  display: inline-block;
  background: transparent; color: #7B6BA8;
  font-weight: 700; font-size: 1rem;
  padding: .85rem 2rem; border-radius: 9999px;
  border: 2.5px solid #C4B0E8;
  transition: all .25s;
  cursor: pointer;
}
.btn-outline:hover { background: #F5F0FF; transform: translateY(-2px); }

/* ---------- グリッド ---------- */
.grid-2 { display: grid; gap: 2rem; }
.grid-3 { display: grid; gap: 1.5rem; }
@media (min-width: 640px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- スクロールリビール ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }
.reveal-d4 { transition-delay: .4s; }

/* ---------- アニメーション ---------- */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes shimmer {
  0%, 100% { opacity: .7; }
  50%       { opacity: 1; }
}
@keyframes bounce-line {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(.6); }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-float   { animation: float-gentle 4s ease-in-out infinite; }
.anim-shimmer { animation: shimmer 2.5s ease-in-out infinite; }

/* =====================================================
   ナビゲーション
   ===================================================== */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    /* background: rgba(255,255,255,.88); */
    /* backdrop-filter: blur(10px); */
    -webkit-backdrop-filter: blur(10px);
    transition: box-shadow .3s, background .3s;
}
#navbar.scrolled {
  background: rgba(255,255,255,.97);
  box-shadow: 0 2px 16px rgba(107,207,176,.2);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
@media (min-width: 768px) { .nav-inner { height: 72px; } }

.nav-logo {
  display: flex; align-items: center; gap: .625rem;
  cursor: pointer; background: none; border: none;
}
.nav-logo-icon {
  width: 42px; height: 42px; border-radius: 14px;
  background: linear-gradient(135deg, var(--mint-lt), var(--mint));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(107,207,176,.35);
  font-size: 1.25rem; font-weight: 900; color: #fff;
  transition: transform .2s;
  font-family: 'Zen Maru Gothic', sans-serif;
}
.nav-logo:hover .nav-logo-icon { transform: scale(1.08); }
.nav-logo-text { line-height: 1.25; text-align: left; }
.nav-logo-text strong {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    color: #c1c1c1;
    font-family: 'Zen Maru Gothic', sans-serif;
}
.nav-logo-text span {
  font-size: .75rem; color: var(--mint);
  font-family: 'Nunito', sans-serif; font-weight: 600;
}

.hamburger {
  padding: .5rem; border-radius: .75rem;
  color: #555; transition: background .2s;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
}
.hamburger:hover {
    /* background: #f0f0f0; */
}
.hamburger svg {
    width: 26px;
    height: 26px;
    stroke: #c1c1c1;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
}
.hamburger .icon-close { display: none; }
.hamburger.open .icon-menu  { display: none; }
.hamburger.open .icon-close { display: block; }

.nav-drawer {
    background: #fff;
    /* border-top: 1px solid var(--mint-bg); */
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}
.nav-drawer.open { max-height: 500px; }
.nav-drawer ul { padding: 1rem 0; }
.nav-drawer li button {
  display: block; width: 100%; text-align: left;
  padding: .75rem 1.5rem; border-radius: .75rem;
  font-size: .95rem; font-weight: 500; color: var(--text);
  transition: background .2s, color .2s;
  background: none; border: none; cursor: pointer;
  font-family: 'Zen Maru Gothic', sans-serif;
}
.nav-drawer li button:hover { background: var(--mint-bg); color: #2d6a55; }

/* =====================================================
   ヒーロー
   ===================================================== */
#hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding-top: 64px;
}
.hero-bg {
  position: absolute; inset: 0;
  background: url('images/img_022.jpg') center/cover no-repeat;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(26,61,48,.75), rgba(45,74,96,.6), rgba(61,42,80,.65));
}
.hero-pattern {
    position: absolute;
    inset: 0;
    opacity: .06;
    /* background: url('https://d2xsxph8kpxj0f.cloudfront.net/310519663591694001/TQgFTCmgXfkFrKcoXeFEUk/pattern-bg-Akc5RCdJpKcffzbuuHe8SW.webp') repeat; */
    background-size: 320px;
}
.hero-content {
  position: relative; z-index: 2;
  text-align: center; color: #fff;
  padding: 2rem 1.25rem;
  animation: fade-in-up .8s ease both;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #FFF0D4; color: #B07A30;
  font-size: .85rem; font-weight: 700;
  padding: .45rem 1.25rem; border-radius: 9999px;
  border: 1px solid #F0D4A0; box-shadow: 0 2px 8px rgba(0,0,0,.1);
  margin-bottom: 1.5rem;
}
.hero-title {
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  font-weight: 900; line-height: 1.4;
  margin-bottom: 1.5rem; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
  font-family: 'Zen Maru Gothic', sans-serif;
}
.hero-title .underline-accent {
  position: relative; display: inline-block;
}
.hero-title .underline-accent::after {
  content: ''; position: absolute; bottom: 2px; left: 0; right: 0;
  height: 10px; background: var(--mint-lt); border-radius: 9999px;
  opacity: .6; z-index: -1;
}
.hero-sub {
  font-family: 'Nunito', sans-serif; font-weight: 700;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  color: #A0EDD8; margin-bottom: 1.25rem; letter-spacing: .05em;
}
.hero-desc {
  font-size: clamp(.9rem, 2vw, 1.1rem);
  color: rgba(255,255,255,.9); max-width: 600px;
  margin: 0 auto 2rem; line-height: 1.85;
}
.hero-btns {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: center; margin-bottom: 2.5rem;
}
.hero-grades {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center; align-items: center;
}
.hero-grade-badge {
  background: rgba(255,255,255,.2); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.4); color: #fff;
  font-size: .85rem; font-weight: 700;
  padding: .25rem .75rem; border-radius: 9999px;
}
.hero-grade-label { color: rgba(255,255,255,.7); font-size: .85rem; }
.hero-scroll {
    position: absolute;
    bottom: 0rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    color: rgba(255,255,255,.6);
    font-size: .75rem;
}
.hero-scroll-line {
    width: 2px;
    height: 80px;
    background: linear-gradient(to bottom, var(--mint-lt), transparent);
    animation: bounce-line 2s ease-in-out infinite;
    transform-origin: top;
}

/* =====================================================
   About
   ===================================================== */
#about { background: #fff; }
.about-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 768px) { .about-grid { grid-template-columns: 1fr 1fr; } }

.about-img-wrap { position: relative; }
.about-img-wrap img {
  width: 100%; height: 320px; object-fit: cover;
  border-radius: 2rem; box-shadow: var(--shadow-lg);
  border: 4px solid var(--mint-bg);
}
@media (min-width: 768px) { .about-img-wrap img { height: 400px; } }

.about-float-badge {
  position: absolute; font-size: .85rem; font-weight: 700;
  padding: .5rem 1rem; border-radius: 1rem; box-shadow: var(--shadow);
  font-family: 'Zen Maru Gothic', sans-serif;
}
.about-float-badge.top    { top: -1rem; right: -1rem; background: #FFF0D4; border: 2px solid #F0D4A0; color: #B07A30; }
.about-float-badge.bottom { bottom: -1rem; left: -1rem; background: var(--lav-bg); border: 2px solid var(--lav-lt); color: #4A3580; }

.about-item { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.75rem; }
.about-icon {
  width: 48px; height: 48px; border-radius: 1rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.about-icon svg { width: 22px; height: 22px; }
.about-item h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .25rem; }
.about-item p  { font-size: .9rem; color: var(--text-md); line-height: 1.75; }

.immersion-box {
  background: linear-gradient(135deg, var(--mint-bg), var(--lav-bg));
  border: 2px solid #D0EEE5; border-radius: 2rem;
  padding: 2rem 2.5rem; display: flex; gap: 1.5rem; align-items: flex-start;
  margin-top: 2.5rem;
}
.immersion-icon { font-size: 3rem; flex-shrink: 0; }
.immersion-box h3 { font-size: 1.15rem; font-weight: 900; color: #2D6A55; margin-bottom: .5rem; }
.immersion-box p  { font-size: .9rem; color: var(--text-md); line-height: 1.8; }

/* =====================================================
   Features
   ===================================================== */
#features { background: #F8FDFB; }

.feature-card {
  padding: 1.75rem; border-radius: 1.75rem; border: 2px solid transparent;
  transition: transform .3s ease, box-shadow .3s ease;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.feature-card-icon {
  width: 56px; height: 56px; border-radius: 1rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem; box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.feature-card-icon svg { width: 26px; height: 26px; }
.feature-card .badge { margin-bottom: .75rem; font-size: .75rem; }
.feature-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.feature-card p  { font-size: .875rem; color: var(--text-md); line-height: 1.75; }

.fc-mint  { background: var(--mint-bg);  border-color: var(--mint-lt); }
.fc-lav   { background: var(--lav-bg);   border-color: var(--lav-lt); }
.fc-coral { background: var(--coral-bg); border-color: var(--coral-lt); }
.fc-gold  { background: var(--gold-bg);  border-color: var(--gold-lt); }
.fc-sky   { background: var(--sky-bg);   border-color: #B8D8F0; }
.fc-green { background: var(--green-bg); border-color: #B8E8B8; }

.fi-mint  { background: var(--mint); }
.fi-lav   { background: var(--lav); }
.fi-coral { background: var(--coral); }
.fi-gold  { background: var(--gold); }
.fi-sky   { background: var(--sky); }
.fi-green { background: var(--green); }

/* フォトグリッド */
.photo-grid-section {
  padding: 3rem 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* =====================================================
   グリッドコンテナ
   ===================================================== */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 250px;
  gap: 20px;
}

/* =====================================================
   各アイテム共通
   ===================================================== */
.pg-item {
  overflow: hidden;
  border-radius: 1rem;
  position: relative;
  background: #e0e0e0; /* 画像読み込み前のプレースホルダー色 */
}

.pg-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.pg-item:hover img {
  transform: scale(1.06);
}

/* =====================================================
   グリッド配置（PC：3列）

   レイアウトイメージ（参考画像に準拠）：

   行1: [A:1列]  [B:1列・2行] [C:1列]
   行2: [D:1列]  [B続き]      [E:1列]
   行3: [F:1列]  [G:2列]
   行4: [H:2列]               [I:1列]
   行5: [J:3列・全幅]
   ===================================================== */

/* A: 行1・列1 — 通常 */
.pg-a {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

/* B: 行1〜2・列2 — 縦長（2行分） */
.pg-b {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

/* C: 行1・列3 — 通常 */
.pg-c {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

/* D: 行2・列1 — 通常 */
.pg-d {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

/* E: 行2・列3 — 通常 */
.pg-e {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

/* F: 行3・列1 — 通常 */
.pg-f {
  grid-column: 1 / 2;
  grid-row: 2 / 4;
}

/* G: 行3・列2〜3 — 横長（2列分） */
.pg-g {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
}

/* H: 行4・列1〜2 — 横長（2列分） */
.pg-h {
  grid-column: 1 / 3;
  grid-row: 4 / 5;
}

/* I: 行4・列3 — 通常 */
.pg-i {
  grid-column: 3 / 4;
  grid-row: 4 / 5;
}

/* J: 行5・全幅（3列分） */
.pg-j {
  grid-column: 1 / 4;
  grid-row: 5 / 6;
}

/* =====================================================
   タブレット（768px 以下）：2列に変更
   ===================================================== */
@media (max-width: 768px) {
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
  }

  /* 2列レイアウト用に配置を再定義 */

  /* A: 行1・列1 */
  .pg-a { grid-column: 1 / 2; grid-row: 1 / 2; }

  /* B: 行1〜2・列2（縦長） */
  .pg-b { grid-column: 2 / 3; grid-row: 1 / 3; }

  /* C: 行2・列1 */
  .pg-c { grid-column: 1 / 2; grid-row: 2 / 3; }

  /* D: 行3・列1〜2（横長） */
  .pg-d { grid-column: 1 / 3; grid-row: 3 / 4; }

  /* E: 行4・列1 */
  .pg-e { grid-column: 1 / 2; grid-row: 4 / 5; }

  /* F: 行4・列2 */
  .pg-f { grid-column: 2 / 3; grid-row: 4 / 5; }

  /* G: 行5・列1〜2（横長） */
  .pg-g { grid-column: 1 / 3; grid-row: 5 / 6; }

  /* H: 行6・列1 */
  .pg-h { grid-column: 1 / 2; grid-row: 6 / 7; }

  /* I: 行6・列2 */
  .pg-i { grid-column: 2 / 3; grid-row: 6 / 7; }

  /* J: 行7・全幅 */
  .pg-j { grid-column: 1 / 3; grid-row: 7 / 8; }
}

/* =====================================================
   スマホ（480px 以下）：1列に変更
   ===================================================== */
@media (max-width: 480px) {
  .photo-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
    gap: 8px;
  }

  /* 1列では全アイテムを通常配置（span リセット） */
  .pg-a, .pg-b, .pg-c, .pg-d, .pg-e,
  .pg-f, .pg-g, .pg-h, .pg-i, .pg-j {
    grid-column: 1 / 2;
    grid-row: auto;
  }
}

/* =====================================================
   Schedule
   ===================================================== */
#schedule { background: #fff; }

.timeline { max-width: 680px; margin: 0 auto; }
.timeline-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.timeline-left  { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.timeline-dot {
  width: 56px; height: 56px; border-radius: 1rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.1); flex-shrink: 0;
}
.timeline-dot svg { width: 24px; height: 24px; }
.timeline-line {
  width: 2px; flex: 1;
  background: linear-gradient(to bottom, #ddd, transparent);
  margin-top: .5rem;
}
.timeline-card {
  flex: 1; background: #fff;
  border: 2px solid #f0f0f0; border-radius: 1.25rem;
  padding: 1rem 1.25rem; box-shadow: var(--shadow);
  transition: transform .3s, box-shadow .3s;
}
.timeline-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.timeline-time {
  font-family: 'Nunito', sans-serif; font-weight: 800;
  font-size: 1.1rem; margin-right: .75rem;
}
.timeline-card h3 { font-size: .95rem; font-weight: 700; display: inline; }
.timeline-card p  { font-size: .85rem; color: var(--text-md); margin-top: .25rem; }

.td-mint  { background: var(--mint-bg); }  .tt-mint  { color: #2D6A55; }
.td-gold  { background: var(--gold-bg); }  .tt-gold  { color: #806030; }
.td-lav   { background: var(--lav-bg); }   .tt-lav   { color: #4A3580; }
.td-sky   { background: var(--sky-bg); }   .tt-sky   { color: #204870; }
.td-coral { background: var(--coral-bg); } .tt-coral { color: #803050; }
.td-green { background: var(--green-bg); } .tt-green { color: #2A5A2A; }

.info-box {
  border-radius: 2rem; padding: 2rem; margin-top: 1.5rem;
}
.info-box h3 {
  font-size: 1.1rem; font-weight: 900; margin-bottom: .75rem;
  display: flex; align-items: center; gap: .5rem;
}
.info-box h3 svg { width: 22px; height: 22px; flex-shrink: 0; }
.info-box p  { font-size: .9rem; color: var(--text-md); line-height: 1.75; }
.info-box .note { font-size: .8rem; margin-top: .75rem; }

.vacation-box { background: var(--gold-bg); border: 2px solid var(--gold-lt); }
.vacation-box h3 { color: #806030; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.chip {
  background: #fff; border-radius: .75rem;
  padding: .35rem 1rem; font-size: .85rem;
}
.chip strong { font-family: 'Nunito', sans-serif; margin-right: .4rem; }
.vacation-box .chip strong { color: #B07A30; }

.school-box { background: var(--mint-bg); border: 2px solid var(--mint-lt); }
.school-box h3 { color: #2D6A55; }
.school-chip {
  background: #fff; border: 1px solid var(--mint-lt);
  border-radius: 9999px; padding: .35rem 1rem;
  font-size: .85rem; color: #2D6A55; font-weight: 700;
}

/* =====================================================
   Pricing
   ===================================================== */
#pricing { background: #F8FDFB; }

.pricing-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }

.pricing-card {
  border-radius: 2rem; padding: 2rem; text-align: center; border: 2px solid;
  transition: transform .3s, box-shadow .3s;
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pricing-card.highlight {
    background: linear-gradient(135deg, var(--mint), #4ABFA0);
    border-color: #4ABFA0;
    box-shadow: 0 8px 32px rgba(107,207,176,.3);
    /* transform: scale(1.04); */
}
highlight:hover { transform: scale(1.04) translateY(-6px); }

.pc-mint { background: var(--mint-bg); border-color: var(--mint-lt); }
.pc-lav  { background: var(--lav-bg);  border-color: var(--lav-lt); }

.pricing-card .icon-wrap { margin-bottom: .75rem; }
.pricing-card .icon-wrap svg { width: 40px; height: 40px; margin: 0 auto; }
.pricing-card .label  { font-size: .85rem; font-weight: 700; margin-bottom: .5rem; }
.pricing-card .amount { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 2.2rem; }
.pricing-card .unit   { font-size: .9rem; font-weight: 600; margin-left: .25rem; }
.pricing-card .note   { font-size: .75rem; margin-top: .25rem; }
.pricing-card .sub-badge {
  display: inline-block; background: #FFF0D4; color: #B07A30;
  font-size: .75rem; font-weight: 700;
  padding: .25rem .75rem; border-radius: 9999px; margin-bottom: .75rem;
}

.color-mint   { color: #2D6A55; }
.color-lav    { color: #4A3580; }
.color-muted  { color: var(--text-md); }
.color-white  { color: #fff; }
.color-white70{ color: rgba(255,255,255,.75); }

.included-box {
  background: #fff; border: 2px solid #D0EEE5;
  border-radius: 2rem; padding: 2rem; margin-top: 1.5rem;
}
.included-box h3 { font-size: 1.05rem; font-weight: 700; color: #2D6A55; margin-bottom: 1.25rem; }
.included-box h3 svg { width: 20px; height: 20px; display: inline; vertical-align: middle; margin-right: .4rem; }
.included-grid { display: grid; gap: .75rem; }
@media (min-width: 640px)  { .included-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .included-grid { grid-template-columns: repeat(4, 1fr); } }
.included-item {
  display: flex; align-items: center; gap: .5rem;
  background: var(--mint-bg); border-radius: .75rem;
  padding: .65rem 1rem; font-size: .875rem;
}
.included-item svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--mint); }

.options-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .options-grid { grid-template-columns: repeat(3, 1fr); } }
.option-card {
  background: #fff; border: 2px solid #f0f0f0; border-radius: 1.25rem;
  padding: 1.25rem; display: flex; gap: 1rem; align-items: flex-start;
  transition: transform .3s, box-shadow .3s;
}
.option-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.option-icon {
  width: 44px; height: 44px; border-radius: .875rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.option-icon svg { width: 22px; height: 22px; }
.option-label  { font-weight: 700; font-size: .9rem; margin-bottom: .25rem; }
.option-amount { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--mint); }
.option-note   { font-size: .75rem; color: var(--text-lt); margin-top: .15rem; }

.tax-note {
  background: #f8f8f8; border-radius: 1rem;
  padding: 1rem; text-align: center;
  font-size: .85rem; color: var(--text-md); margin-top: 1.25rem;
}

/* =====================================================
   Access
   ===================================================== */
#access { background: #fff; }

.access-grid { display: grid; gap: 2rem; }
@media (min-width: 768px) { .access-grid { grid-template-columns: 1fr 1fr; } }

.info-card {
  border-radius: 1.25rem; padding: 1.25rem;
  display: flex; gap: 1rem; align-items: flex-start;
  transition: transform .3s, box-shadow .3s; margin-bottom: 1rem;
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.info-card-icon {
  width: 44px; height: 44px; background: #fff; border-radius: .875rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.info-card-icon svg { width: 20px; height: 20px; }
.info-card-label { font-weight: 700; font-size: .875rem; margin-bottom: .25rem; color: var(--text); }
.info-card-body  { font-size: .875rem; color: var(--text-md); white-space: pre-line; line-height: 1.75; }
.info-card-body strong { font-size: 1.4rem; font-family: 'Nunito', sans-serif; color: var(--lav); }

.map-wrap {
  border-radius: 2rem; overflow: hidden;
  box-shadow: var(--shadow-lg); border: 2px solid var(--mint-bg);
  height: 100%; min-height: 320px;
}
.map-wrap iframe { width: 100%; height: 100%; min-height: 320px; border: none; display: block; }

/* =====================================================
   Contact
   ===================================================== */
#contact {
  position: relative; padding: 5rem 0; overflow: hidden;
  background: linear-gradient(135deg, #D0F0E8, #E8F8F2, #EEE8FF);
}
.contact-pattern {
  position: absolute; inset: 0; opacity: .07;
  background: url('images/img_001.jpg') repeat;
  background-size: 500px; pointer-events: none;
}
.contact-inner { position: relative; z-index: 2; }

.form-card {
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 2rem; padding: 2.5rem;
  max-width: 680px; margin: 0 auto;
  box-shadow: 0 12px 40px rgba(0,0,0,.1); border: 1px solid #D0EEE5;
}
.form-row { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.form-row.two { }
@media (min-width: 640px) { .form-row.two { grid-template-columns: 1fr 1fr; } }
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group label { font-size: .85rem; font-weight: 700; color: var(--text); }
.form-group label .req { color: #e05; margin-left: .25rem; }
.form-group input,
.form-group select,
.form-group textarea {
  border: 2px solid #e8e8e8; border-radius: 1rem;
  padding: .75rem 1rem; font-size: .9rem;
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  transition: border-color .2s; outline: none; width: 100%; background: #fff;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--mint); }
.form-group textarea { resize: none; }

.btn-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--mint), #4ABFA0);
  color: #fff; font-weight: 700; font-size: 1.05rem;
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  padding: 1rem; border-radius: 9999px; border: none; cursor: pointer;
  box-shadow: 0 6px 20px rgba(107,207,176,.4);
  transition: transform .25s, box-shadow .25s; margin-top: .5rem;
}
.btn-submit:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(107,207,176,.5); }
.btn-submit:disabled { opacity: .7; cursor: not-allowed; transform: none; }
.form-privacy { font-size: .75rem; color: var(--text-lt); text-align: center; margin-top: .75rem; }

.success-msg {
  display: none;
  background: var(--mint-bg); border: 2px solid var(--mint-lt);
  border-radius: 1rem; padding: 1.25rem 1.5rem; text-align: center;
  font-weight: 700; color: #2D6A55; margin-top: 1rem; font-size: 1rem;
}
.success-msg.show { display: block; }

/* =====================================================
   Footer
   ===================================================== */
footer { background: #2D4A40; color: #fff; }
.footer-top { height: 6px; background: linear-gradient(to right, var(--mint-lt), var(--lav-lt), var(--coral-lt), var(--gold-lt)); }
.footer-body { padding: 3rem 0 2rem; }
.footer-grid { display: grid; gap: 2.5rem; margin-bottom: 2.5rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }

.footer-logo { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.footer-logo-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, var(--mint-lt), var(--mint));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 900; color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.2);
  font-family: 'Zen Maru Gothic', sans-serif;
}
.footer-logo-text strong { display: block; font-size: 1.05rem; font-weight: 700; }
.footer-logo-text span   { font-size: .8rem; color: var(--mint-lt); font-family: 'Nunito', sans-serif; }
.footer-desc { font-size: .875rem; color: rgba(255,255,255,.65); line-height: 1.75; margin-bottom: 1rem; }
.footer-open-badge {
  display: inline-block;
  background: rgba(184,240,224,.15); border: 1px solid rgba(184,240,224,.25);
  color: var(--mint-lt); font-size: .8rem; font-weight: 700;
  padding: .4rem 1rem; border-radius: 9999px;
}
.footer-section h3 { font-size: .95rem; font-weight: 700; margin-bottom: 1rem; }
.footer-info-item {
  display: flex; gap: .5rem; align-items: flex-start;
  margin-bottom: .75rem; font-size: .85rem; color: rgba(255,255,255,.65);
}
.footer-info-item svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: .2rem; opacity: .7; }
.footer-links { display: flex; flex-direction: column; gap: .5rem; }
.footer-links button {
  font-size: .875rem; color: rgba(255,255,255,.6);
  text-align: left; transition: color .2s;
  background: none; border: none; cursor: pointer;
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
}
.footer-links button:hover { color: var(--mint-lt); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.footer-copy { font-size: .75rem; color: rgba(255,255,255,.4); }

/* =====================================================
   フローティングCTA
   ===================================================== */
#floating-cta {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 90;
  opacity: 0; pointer-events: none;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s;
}
#floating-cta.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
#floating-cta button {
  background: linear-gradient(135deg, var(--mint), #4ABFA0);
  color: #fff; font-weight: 700; font-size: .9rem;
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  padding: .8rem 1.75rem; border-radius: 9999px; border: none;
  box-shadow: 0 6px 24px rgba(107,207,176,.5); cursor: pointer;
  transition: transform .25s, box-shadow .25s;
  animation: shimmer 2.5s ease-in-out infinite;
}
#floating-cta button:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(107,207,176,.6); }