/* =========================================================
   僕らの学校｜イベント特設サイト  共通スタイル
   - フォント: ヒラギノ角ゴ → Yu Gothic / Meiryo フォールバック
   - レイアウト幅: --max で一元管理
   - テーマカラーは :root のCSS変数でまとめて管理
   - レスポンシブの主ブレイクポイント: 767px
   ========================================================= */

/* ------------------------------
   テーマ変数（色・半径・最大幅）
   ------------------------------ */
:root{
   --bg-sky-top:   #51cbf7;   /* 背景グラデ上部（空） */
  --bg-sky-mid:   #51cbf9;   /* グラデ中間（淡い水色） */
  --bg-sky-btm:   #d9f5ff;   /* 背景グラデ下部（白寄り） */

  --brand-orange: #f7a51e;   /* ヘッダー帯の橙 */
  --text:         #9c7538;   /* 文章色の標準 */
  --green:        #a9fd79;   /* 緑カードの地色 */
  --yellow:       #ffd977;   /* 黄カードの地色 */

  /* 日付バッジ色 */
  --pill-orange:  #f48b5a;
  --pill-green:   #51c369;
  --pill-blue:    #70b7f2;

  --radius: 18px;            /* カードの角丸 */
  --max:    800px;          /* ☆　レイアウト最大幅 */
}

#kids-title {
    /* フォント設定 */
    font-family: 'Avenir', 'Hiragino Sans', sans-serif; /* 丸みのあるフォント（適宜変更） */
    font-size: 2.2em;
    color: #5D4037; /* 濃い茶色（親しみやすい色） */
    
    /* 背景装飾（リボン風） */
    position: relative;
    display: inline-block;
    padding: 10px 20px 10px 40px; /* 左側にスペースを作る */
    background: #FFCC80; /* やさしいオレンジ */
    border-radius: 0 50px 50px 0;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    
    /* 左側の「リボンの端」部分 */
    /* 疑似要素はh2のCSSには見えませんが、これがないとリボンになりません */
    /* 実際のコードではh2に続けて記載が必要です */
}

/* 疑似要素（リボンの角）- 実際のCSSファイルに追加が必要です */
#kids-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30px; 
    height: 100%;
    background: #FFB74D; /* 背景より少し濃い色 */
    border-radius: 50px 0 0 50px;
}

/* ------------------------------
   リセット & ベース
   ------------------------------ */
* { box-sizing: border-box; }

html, body { height: 100%; }

body{
  margin: 0;
  color: var(--text);
  /* ヒラギノ優先。WindowsはYu Gothic/Meiryoにフォールバック */
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  line-height: 1.85;
  
    /* 新しい空のグラデーション */
  background: linear-gradient(
    to bottom,
    var(--bg-sky-top) 0%,
    var(--bg-sky-mid) 40%,
    var(--bg-sky-btm) 100%
  );
}

#kids-content, #adults-content {
  padding-top: 4%;
}

/*追加*/
/* ベースとなるカードの共通スタイル */
.card {
    max-width: 600px;
    margin: 40px auto;
    font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    line-height: 1.6;
    text-align: center;
}


/* タイトル (h1/h2) の共通スタイル */
.card__title {
    font-size: 1.8em;
    padding: 15px 20px;
    /* カードのパディングを無視して端まで伸ばす統一的な配置 */
    margin: -30px -30px 20px -30px; 
    text-align: center;
    border-radius: 8px; 
    letter-spacing: 0.1em;
    font-weight: 700;
    color: #fff;
}

/* 緑カードのタイトルの色 */
.card--green .card__title {
    background-color: #4CAF50; /* メインカラーの緑 */
}

/* card--greenの強調テキスト（参加無料、開催日時） */
.card--green .card__info {
    font-size: 1.4em; /* 他の情報より少し大きく */
    font-weight: bold;
    margin-bottom: 10px;
    
}
.card--green .date-pills__item {
  width: 75%;
  margin: 0 auto;
  background-color: #51c369;
}

/* 黄色カードのタイトルの色 */
.card--yellow .card__title {
    background-color: #FFC107; /* 統一感のある配置だが、色だけ変更 */
}

/* カードの説明文 */
.card__desc {
    text-align: center;
    font-style: italic;
    color: #5D4037;
    margin-top: 25px;
}



/* 画像はコンテナ幅に追従 */
img { max-width: 100%; height: auto; display: block; }

/* リンクの基本挙動 */
a { color: inherit; }
a:focus-visible{ outline: 3px solid #000; outline-offset: 2px; }

/* 汎用コンテナ：左右16pxのパディングで中央寄せ */
.container{
  width: min(100%, calc(var(--max) + 32px));
  padding-inline: 16px;
  margin-inline: auto;
}

/* ------------------------------
   ヘッダー（オレンジ帯）
   ------------------------------ */
.site-header{
  background: var(--brand-orange);
  position: sticky;          /* スクロールしても上部固定 */
  top: 0;
  z-index: 50;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 左右端寄せ */
  min-height: 64px;               /* 高さは大人ページと同じ */
  max-width: 1100px;              /* ← ★ 幅を固定して中央寄せ！ */
  margin: 0 auto;                 /* ← ★ 中央配置（大人ページと統一） */
  padding: 0 16px;                /* ← ★ 内側余白も同じ値に */
}
/* グローバルナビ */
.site-nav__list{
  list-style: none;
  display: flex;
  gap: 32px;
  padding: 0;
  margin: 0;
}
.site-nav__list a{
  text-decoration: none;
  font-weight: 700;
  color: #111;
}
.site-nav__list a:hover,
.site-nav__list a:focus-visible{
  text-decoration: underline; /* ホバー/キーボードで下線 */
}




/* =========================================================
   Hero（横幅いっぱい＋縦比率維持＋初期非表示バグ修正）
   ========================================================= */
:root{ --header-h: 64px; }

.hero{
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(#8fe0ff, #66c3f3);
}

/* コンテナ制限を解除 */
.hero .container,
.hero__inner{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- ヒーロー画像 ---- */
.hero__img{
  width: 100vw;       /* 横幅をブラウザいっぱいに */
  height: auto;       /* 縦比率を維持して自動伸縮 */
  max-width: none;
  display: block;

  /* object-fit: contain で全体表示（トリミングなし） */
  object-fit: contain;
  object-position: center;

  /* アニメーション */
  opacity: 1; /* ← これで初期状態でも表示される */
  transform: translateY(0);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}

/* JSで .is-visible が付いたらふわっと登場 */
.hero.is-visible .hero__img{
  opacity: 1;
  transform: translateY(0);
}

/* モーション削減環境への配慮 */
@media (prefers-reduced-motion: reduce){
  .hero__img{
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* 横スクロール防止 */
html, body { overflow-x: hidden; }


/* JSが有効なときだけ、いったん透明にして待機 */
.hero.is-anim .hero__img{
  opacity: 0;
  transform: translateY(12px);
}

/* 画面内に入ったらふわっと表示 */
.hero.is-visible .hero__img{
  opacity: 1;
  transform: none;
}


/* 1) 初期は少し下げて透明（既存のフェードと両立） */
.hero.is-anim .hero__img{
  opacity: 0;
  transform: translateY(12px) scale(.98);
  will-change: transform, opacity, filter;
}

/* 2) 可視化された瞬間：白フラッシュ＋ポップイン（1回だけ） */
.hero.is-visible .hero__img{
  animation:
    heroPop .6s cubic-bezier(.2,.8,.2,1) forwards,
    heroGlow .5s ease-out .05s both;
    animation-delay: 2.5s, 2.5s, 2.5s; /* ← すべて2.5秒後に発火 */
}

/* 3) 見えた後はゆるい浮遊ループ（目に優しい） */
.hero.is-visible .hero__img{
  animation:
    heroPop .6s cubic-bezier(.2,.8,.2,1) forwards,
    heroGlow .5s ease-out .05s both,
    heroFloat 6s ease-in-out .7s infinite alternate;
}

/* キーフレーム */
@keyframes heroPop{
  0%   { opacity:0; transform: translateY(12px) scale(.98); filter: saturate(.9) }
  100% { opacity:1;  transform: translateY(0)   scale(1);   filter: saturate(1) }
}
@keyframes heroGlow{
  0%   { filter: brightness(1.4) }
  100% { filter: brightness(1)   }
}
@keyframes heroFloat{
  0%   { transform: translateY(0)   scale(1)    }
  100% { transform: translateY(-10px) scale(1.01) }
}

/* モーション苦手な人に配慮 */
@media (prefers-reduced-motion: reduce){
  .hero.is-visible .hero__img{ animation: none !important; opacity:1; transform:none; filter:none; }
}



/*=============扉コード=================*/


/* ヒーローに対して絶対配置で全面を覆う扉レイヤー */
.hero{ position: relative; }
.doorfx{
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;          /* ← UIをブロックしない */
  z-index: 1300;                 /* header(2000) > nav(1500) > doorfx(1300) > balloons(1200) > hero */
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* 左右の扉パネル */
.doorfx__left,
.doorfx__right{
  position: relative;
  width: 50%;
  height: 100%;
  z-index: 1;
  background: #f5ebda;
  border: 0.5px solid #aaa;
  box-shadow: 2px 4px 6px rgba(0,0,0,.25);
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.doorfx__left { transform-origin: left; }
.doorfx__right{ transform-origin: right; }

/* ノブ（飾り・不要なら削除可） */
/*.doorfx__knob{
  position: absolute; top: 50%;
  width: 18px; height: 18px; margin-top: -9px;
  border-radius: 50%;
  right: 8px; left: auto;
  background: radial-gradient(circle at 30% 30%, #f2f0e3, #89796c 70%);
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,.4));
}
.doorfx__right .doorfx__knob{ left: 8px; right: auto; }

/* 開く状態（heroが可視になったら付与） */
.hero.is-visible .doorfx__left  { transform: rotateY(-100deg); }
.hero.is-visible .doorfx__right { transform: rotateY( 100deg); }

/* 一瞬のグロー（背景色に負けにくい実装） */
.doorfx::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at center, rgba(255,255,255,.9), rgba(255,255,255,0) 60%);
  opacity: 0; pointer-events:none;
}
.hero.is-visible .doorfx::after{
  animation: doorFlash .45s ease-out;
}
@keyframes doorFlash{
  0%{ opacity:.9; transform: scale(.98); }
  100%{ opacity:0; transform: scale(1.04); }
}

/* モバイルは控えめに（角度＆速度ダウン） */
@media (max-width: 767.98px){
  .hero.is-visible .doorfx__left  { transform: rotateY(-70deg); }
  .hero.is-visible .doorfx__right { transform: rotateY( 70deg); }
  .doorfx__left, .doorfx__right{ transition-duration: .8s; }
}

/* 動きが苦手な人への配慮 */
@media (prefers-reduced-motion: reduce){
  .doorfx__left, .doorfx__right { transition: none; }
  .hero.is-visible .doorfx__left,
  .hero.is-visible .doorfx__right { transform: none; }
  .doorfx::after{ display:none; }
}

/* いまの定義の“下”に追記して勝たせてね */

.doorfx__bg{
  opacity: 1;
  transition: opacity .7s ease .9s;  /* 扉が開き始めて少し遅れて消える */
}

/* heroが見えた＝扉オープン中。白背景をフェードアウト */
.hero.is-visible .doorfx__bg{
  opacity: 0;
}

/* 扉の開閉スピード＆カーブをゆったりに変更 */
.doorfx__left, .doorfx__right{
  transition: transform 5s cubic-bezier(.17,.84,.24,1);  /*＝＝＝＝transform 0.0s←ここでドアの開く速さ調整 ＝＝＝＝*/
}

/* 角度はそのまま。もっとゆっくりなら 2.2s くらいまで可 */
.hero.is-visible .doorfx__left  { transform: rotateY(-100deg); }
.hero.is-visible .doorfx__right { transform: rotateY( 100deg); }

/* スマホは控えめのまま（必要ならここも調整） */
@media (max-width: 767.98px){
  .doorfx__left, .doorfx__right{ transition-duration: 1.2s; } /* 0.8s → 1.2s など */
}



/* ------------------------------
   カード（緑・黄）共通
   ------------------------------ */
.card{ padding: 24px 0; }
.card__inner{
  background: #fff;                  /* デフォは白（のせ替え用） */
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,.08); /* ほんのり浮かせる */
}

/* 色違い（ラフ準拠） */
.card--green .card__inner{ background: var(--green); }
.card--yellow .card__inner{ background: var(--yellow); }

/* 見出し・テキストの整形 */
.card__title{
  margin: 0 0 .4em;
  text-align: center;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
}
.card__lead,
.card__info,
.card__note,
.card__desc,
.card__address{
  text-align: center;
  margin: .6em 0;
}

.card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.card.is-visible {
  opacity: 1;
  transform: none;
}




/*=========緑カード内部===============*/
/* 次回の開催予定タイトル */
.card__lead{
  font-size: clamp(20px, 2.4vw, 26px);  /* 元より1.2〜1.3倍にアップ */
  font-weight: 700;
  margin-bottom: 0.4em;
}

/* 日時や案内部分 */
.card__info{
  font-size: clamp(18px, 2vw, 22px);    /* 行間を詰めすぎないように少し余裕を */
  line-height: 1.7;
  font-weight: 600;
}


/* addressは斜体を解除（日本語サイトでは可読性重視） */
.card__address{ font-style: normal;
 }


/* 緑カードの注意書き（最後の2行） */
.card__note {
  font-size: clamp(17px, 2vw, 21px); /* ← 今より1.2倍くらいアップ */
  line-height: 1.8;                  /* ← 行間を少し広げて読みやすく */
  font-weight: 500;                  /* ← ほんのり太く */
}

/* ===============================
   カード：ホバー時にふわっと浮く
   =============================== */
.card__inner {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* ホバーで軽く浮く */
.card__inner:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* モバイルでは無効化して安定 */
@media (max-width: 767px){
  .card__inner:hover {
    transform: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
  }
}



/* ------------------------------
   今後の開催日：日付バッジ（丸 pill）
   ------------------------------ */
.date-pills{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 12px 0 4px;
  margin: 0 0 8px;
}

.date-pills__item{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 48px;
  padding: 0 14px ;  /*　☆なおして！！　4番目の数字をいじると文字が右に寄っていく*/
  border-radius: 9999px;
  color: #fff;
  font-weight: 700;
  /* 内側に薄い影で“押し出し感” */
  box-shadow: 0 2px 0 rgba(0,0,0,.15) inset;
}

.date-pills__item--orange{ background: var(--pill-orange); }
.date-pills__item--green { background: var(--pill-green); }
.date-pills__item--blue  { background: var(--pill-blue);  }

/* ===============================
   日付バッヂ hoverアニメーション
   =============================== */
.date-pills__item {
  display: flex;                     /* ← inline-grid から変更 */
  align-items: center;               /* 縦中央 */
  justify-content: center;           /* 横中央基準 */
  min-width: 120px;
  height: 48px;
  padding: 0 14px 0 23px;            /*☆なおして！ 左を広くして、少し右寄りに見せる */
  border-radius: 9999px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 2px 0 rgba(0,0,0,.15) inset;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* ホバー時のふんわり浮き＆外側影 */
.date-pills__item:hover {
  transform: translateY(-3px);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.25),
    0 2px 0 rgba(0,0,0,0.15) inset;
  cursor: default;
}


/* =========================================================
   フッター（砂帯 #ffdda1 / ガーランド左右 / コピー中央）
   ========================================================= */
.site-footer{
  background: #ffdda1;                 /* 砂色 */
  padding: 40px 0 30px;
  position: relative;
  border-top: 2px solid rgba(0,0,0,0.15);
  border-bottom: 2px solid rgba(0,0,0,0.25); /* 見本通りの上下ライン */
  overflow: hidden;
}

/* ガーランド左右 */
.bunting{
  position: absolute;
  bottom: -6px;                        /*  ☆ ガーランドの高さ調整　数字上げると上に寄る*/
  width: clamp(130px, 18vw, 220px);
  height: auto;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,0.25));
  pointer-events: none;
}
.bunting--left  { left: min(200px, 4vw); }/*　☆なおして！！　左右の寄りを調整…数字上げると中央に寄る*/
.bunting--right { right: min(200px, 4vw); }/*　☆なおして！！　左右の寄りを調整…数字上げると中央に寄る*/

/* コピーライト中央 */
.site-footer__copy{
  display: block;
  text-align: center;
  font-weight: 700;
  color: #2a2a2a;
  font-size: 15px;
  margin: 0;
}

/* モバイル微調整 */
@media (max-width: 767px){
  .site-footer{ padding: 36px 0 24px; }
  .bunting{ bottom: 14px; width: 140px; }
}


/* ------------------------------
   レスポンシブ（スマホ ≤ 767px）
   ------------------------------ */
@media (max-width: 767px){
  .site-nav__list{ gap: 16px; font-size: 14px; }

  .date-pills__item{
    min-width: 104px;
    height: 44px;
  }
}



/* ------------------------------
   フッターガーランド（ゆらゆら風アニメ）
   ------------------------------ */
.bunting {
  animation: swing 5s ease-in-out infinite;
  transform-origin: top center; /* 吊るされてる支点を上に設定 */
}

/* 左右で微妙にタイミングをずらして自然感UP */
.bunting--left  { animation-delay: 0s; }
.bunting--right { animation-delay: 2.5s; }

/* キーフレーム定義 */
@keyframes swing {
  0%   { transform: rotate(1deg) translateY(0); }
  25%  { transform: rotate(-1.5deg) translateY(1px); }
  50%  { transform: rotate(1.8deg) translateY(-1px); }
  75%  { transform: rotate(-1deg) translateY(1px); }
  100% { transform: rotate(1deg) translateY(0); }
}





/* =========================================
   モバイルナビ（≤ 767px）：ハンバーガー化
   ========================================= */
@media (max-width: 767.98px){
  .site-nav__toggle{ display:inline-flex !important; } /* ← ここだけで出す */
  /* 以下、ドロワーのスタイル…（既存そのまま） */
}



   .site-nav__toggle{
  display: none;            /* PCでは非表示 */
  background: transparent;
  border: 0;
  padding: 8px;
  margin-left: auto;
  cursor: pointer;
}
.site-nav__toggle-bar{
  display: block;
  width: 22px; height: 2px;
  background: #111;
  margin: 5px 0;
  border-radius: 1px;
}

/* PCは今のスタイルをそのまま使う */
@media (max-width: 767px){
  /* ボタンを表示、ロゴとボタンで左右 */
  .site-nav__toggle{ display: block; }

  /* ヘッダー内の並び：ロゴ左／ボタン右 */
  .site-header__inner{
    gap: 8px;
  }

  /* ナビ本体は最初は隠す（オーバーレイではなく“下に展開”） */
  .site-nav{
    position: absolute;
    left: 0; right: 0;
    top: 64px;                       /* ヘッダーの下から表示（--header-h に合わせてもOK） */
    background: var(--brand-orange); /* 帯色と連続させる */
    border-top: 1px solid rgba(0,0,0,.08);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
  }
  /* 開いた状態 */
  .site-nav.is-open{
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  /* リストは縦並び・タップしやすい行高に */
  .site-nav__list{
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 8px;
    margin: 0;
  }
  .site-nav__list a{
    display: block;
    padding: 12px 14px;
    font-size: 15px;                /* 少し小さめで収まり良く */
    font-weight: 700;
    text-decoration: none;
  }
  .site-nav__list li + li a{
    border-top: 1px dashed rgba(0,0,0,.15); /* 項目の区切り */
  }

  /* ヘッダー（親）を相対配置にしてナビを中で絶対配置 */
/* ヘッダーは最前面に */
.site-header {
  position: sticky; /* もしくは fixed */
  top: 0;
  z-index: 2000;
}
  .site-header__inner{ position: relative; }
}



/* ===============================
   カードの呼吸スペース調整（PC/SP両対応）
   =============================== */

/* 変数：カードの最大幅や影を一元管理 */
:root{
  --card-max-pc: 800px;                     /* PC時の最大幅（→好みで 840〜960px） */
  --card-max-sp: 92vw;                      /* SP時は画面の92%くらいに */
  --card-radius: 20px;                      /* 少し大きめの角丸でやさしく */
  --card-shadow: 0 10px 22px rgba(0,0,0,.10);/* 影をやや柔らかく */
}

/* セクション間の詰まりを解消（上下余白を少しだけ増やす） */
.card{ padding-block: clamp(16px, 3vw, 28px); }

/* カード全体の横幅を“コンテナ経由”で絞る */
.card > .container{
  width: min(100%, calc(var(--card-max-pc) + 32px)); /* 左右16pxの内側余白を考慮 */
  padding-inline: 16px;
  margin-inline: auto;
}

/* 中身のスタイルをやさしめに */
.card__inner{
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: clamp(18px, 3.6vw, 30px);        /* ほんの少しだけ余白を圧縮 */
}

/* タイトルの折り返しをバランス良く（対応ブラウザで効く） */
.card__title{ text-wrap: balance; }

/* ===== スマホ調整（≤ 767px） ===== */
@media (max-width: 767px){
  /* カードの横幅は画面の92%に（左右に呼吸スペース） */
  .card > .container{
    width: min(100%, var(--card-max-sp));
    padding-inline: 0;                      /* 余白はカード内側に寄せる */
  }
  .card__inner{
    padding: clamp(16px, 4.5vw, 24px);      /* 内側を少しだけ詰める */
    border-radius: 18px;                    /* 角丸やや大きめで窮屈感を軽減 */
    box-shadow: 0 8px 18px rgba(0,0,0,.10); /* 影も控えめに */
  }
  /* 日付バッジ行の上下余白も少し狭めるなら */
  .date-pills{ padding: 8px 0 0; }
}


/* ===============================
   タブレット幅（768〜1023px）
   =============================== */
@media (min-width: 768px) and (max-width: 1023px){
  .card > .container{
    width: min(100%, 88vw);         /* 横幅を画面の88％に制限（PCより余裕あり） */
    padding-inline: 0;
    margin-inline: auto;
  }

  .card__inner{
    padding: clamp(20px, 3.2vw, 28px);
    border-radius: 20px;            /* 少し丸み強調して可愛げ出す */
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  }

  .date-pills{
    gap: 10px;                      /* バッヂの間もほんの少し詰める */
  }
}

/* ===============================
   フッターガーランド（タブレット用の位置調整）
   =============================== */
@media (min-width: 768px) and (max-width: 1023px){
  .bunting{
    bottom: auto;        /* 下基準を解除 */
    top: -20px;            /* フッター帯の上辺に沿わせる感じに 数字を下げるとガーランドが上に寄る*/
    width: clamp(120px, 17vw, 200px);
    filter: drop-shadow(0 3px 2px rgba(0,0,0,0.25));
  }
}






/*================子ども教室のページ
==========================================================*/
/* ==========================================================
   子供向けページ（kids.html）専用セクション
   あそびからまなぶコーナー（A案：装飾＝画像／本文＝テキスト）
   ----------------------------------------------------------
   ▼以下のコメント箇所を中心に色・サイズ・間隔を調整できます。
========================================================== */

:root{
  /* === 基本カラー設定 === */
  --pl-brand-brown:#4b3a2a;     /* ←文字色のベース。より濃くしたい場合は#3a2a00などに変更 */
  --pl-card-bg:#ffe18c;         /* ←カードの背景色。画像地色と合わせて調整可 */
  --pl-shadow:0 6px 16px rgba(0,0,0,.22); /* ←カード影。明るくしたい場合はα値を0.18などに */
}

/* === セクション全体の背景や余白 === */
.playlearn{
  padding:56px 16px; 
  background:linear-gradient(#5bd313,#b9e38f); /* ←背景グラデ。上:淡緑, 下:少し濃い緑 */
}
.playlearn .pl-inner{
  max-width:1040px;
  margin:0 auto;
}

/* === セクション見出し（タイトル） === */
.playlearn .pl-title{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","Noto Sans JP",system-ui,sans-serif;
  font-weight:700;
  text-align:center;
  font-size:clamp(20px,3.2vw,28px); /* ←タイトルサイズ。小さくしたい時は下限値を16pxに */
  letter-spacing:.02em;
  color:#4a2901; /* ←見出し文字色。もっと鮮やかにしたい場合は#ff9900など */
  margin:0 0 24px;
/* タイトル文字サイズを大きくする */
  font-size: clamp(26px, 4vw, 36px); /* ←前: 20〜28px → 今: 26〜36pxでしっかり大きく */
  font-weight: 800;                  /* ←少し太くしてインパクトを出す */
  letter-spacing: 0.03em;            /* ←文字間もほんのり広げて読みやすく */
  margin-bottom: 32px;               /* ←下のカードとの距離を少し広げる（20〜32px目安） */
  
}
.playlearn .pl-title{
  font-size: clamp(22px, 3.6vw, 32px); /* ←上限を少し下げてスマホでも1行に収めやすく */
  letter-spacing: 0.02em;              /* ←文字間を少し詰める */
  word-break: keep-all;                /* ←単語（日本語）をなるべく分割しない */
  white-space: nowrap;                 /* ←強制的に改行させない（1行固定） */
}

/* ==========================================================
   子供ページ ヒーロー画像
========================================================== */
.kids-hero {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin: 0 calc(50% - 50vw)       /* 常に中央配置＋下余白 */
  aspect-ratio: 16 / 9;       /* 比率固定で綺麗に表示 */
  overflow: hidden;
}

.kids-hero img {
   width: 100%;
  height: 100%;
  object-fit: cover;        /* 画像をトリミングしてフィット */
  object-position: center;  /* 常に中央寄せ */
  display: block;
}

.kids-hero.fadein-up.show img {
  transform: scale(1.05);
  transition: transform 6s ease-out;
}


/* スマホ調整 */
@media (max-width: 599px){
  .kids-hero {
    aspect-ratio: 4 / 3;      /* ←少し縦長にして余白を埋める */
  }
}

/* ヒーロー画像の光エフェクト */
.kids-hero {
  position: relative;
  overflow: hidden;
}

.kids-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.8) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-25deg);
  opacity: 0;
}

/* ページロード時 or フェードインで一度だけ発光 */
.kids-hero.show::after {
  animation: heroShine 1.8s ease-out 1;
}

@keyframes heroShine {
  0% {
    left: -75%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    left: 125%;
    opacity: 0;
  }
}



/* ==========================================================
   タイトルをオレンジの角丸ボックスで装飾
========================================================== */
.playlearn .pl-title{
  display: inline-block;             /* ←中央寄せ時に背景が見出しの幅だけになる */
  background: #ffb84d;               /* ←オレンジ背景色。#ffa733 などにするとよりビビッド */
  color: #4b2a00;                    /* ←文字色（読みやすい濃茶） */
  padding: 10px 20px;                /* ←上下・左右の内側余白 */
  border-radius: 9999px;             /* ←完全な丸み。矩形なら20px程度でもOK */
  font-weight: 800;
  font-size: clamp(22px, 3.8vw, 34px);
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0 auto 32px;               /* ←下のカードとの距離を確保 */
  box-shadow: 0 4px 10px rgba(0,0,0,.15); /* ←ふんわり影 */
}

/* タイトル全体を中央寄せ */
.playlearn{
  text-align: center;
}

/* ==========================================================
   🔧 タイトル（オレンジ角丸）がスマホでハミ出さないパッチ
========================================================== */

/* 共通：箱の幅内に収める＆折り返し可に */
.playlearn .pl-title{
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;            /* ← 親幅を超えない */
  white-space: normal;        /* ← 折り返し許可（nowrapは外す） */
  overflow-wrap: anywhere;    /* ← 長い時も安全に改行 */
}

/* スマホでのサイズ・余白を少し控えめに */
@media (max-width: 599px){
  .playlearn .pl-title{
    font-size: clamp(16px, 3.4vw, 22px); /* ← 上限を少し下げる */
    padding: 8px 14px;                 /* ← 横パディングを狭める */
    margin: 0 auto 24px;               /* ← 下余白も少しだけ縮める */
    border-radius: 18px;               /* ← 複数行でも形が崩れにくい角丸 */
  }
}

/* もし .pl-inner の左右パディングが小さくて窮屈なら、少し広げる */
@media (max-width: 599px){
  .playlearn .pl-inner{
    padding-left: 20px;
    padding-right: 20px;
  }
}



/* === カードを並べるグリッド設定 === */
.playlearn .pl-cards{
  display:grid;
  grid-template-columns:1fr;  /* ←スマホ1列表示 */
  gap:12px;                   /* ←カード間の縦間隔 */
}
@media (min-width:600px){
  .playlearn .pl-cards{
    grid-template-columns:repeat(2,1fr); /* ←タブレット以降で2列 */
    gap:16px;
  }
}
@media (min-width:1024px){
  .playlearn .pl-cards{
    grid-template-columns:repeat(2,1fr); /* ←PCも2列固定（3列にしたい場合はrepeat(3,1fr)） */
    gap:20px; /* ←カード間の横間隔 */
  }
}

/* === 各カード本体 === */
.playlearn .pl-card{
  display:grid;
  grid-template-rows:auto 1fr;
  background:var(--pl-card-bg);
  border-radius:16px; /* ←角丸。もっと丸くしたい時は20〜24pxに */
  box-shadow:0 4px 12px rgba(0,0,0,.18); /* ←影の濃さを調整可 */
  overflow:hidden;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s cubic-bezier(.2,.8,.2,1);
}
.playlearn .pl-card:hover{
  transform:translateY(-1.5px); /* ←ホバーで少し浮かせる。不要なら削除 */
  box-shadow:0 8px 18px rgba(0,0,0,.20);
}
@media (prefers-reduced-motion:reduce){
  .playlearn .pl-card{transition:none;}
  .playlearn .pl-card:hover{transform:none;}
}

/* === 装飾画像（カード上部） === */
.playlearn .pl-deco img{
  display:block;
  width:100%;
  height:auto;
  max-height:180px; /* ←画像の最大高さ。もっと小さくしたいなら150pxなどに */
  object-fit:cover; /* ←縦横比を保ちながら収まる */
}

/* === カード内テキスト部分 === */
.playlearn .pl-body{
  padding:12px 14px 14px; /* ←内側余白。増減で詰まり具合を調整 */
}
.playlearn .pl-h3{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","Noto Sans JP",system-ui,sans-serif;
  color:var(--pl-brand-brown);
  font-weight:700;
  font-size:clamp(14px,2vw,18px); /* ←見出しサイズ。もう少し大きくしたいなら上限20pxに */
  line-height:1.3;
  margin:0 0 4px;
  color: #2e9eaf;
}
.playlearn .pl-text{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","Noto Sans JP",system-ui,sans-serif;
  color:#3a2a00;
  font-size:clamp(13px,1.8vw,15px); /* ←本文文字サイズ */
  line-height:1.5;                  /* ←行間。読みやすさで微調整 */
  margin:0;
}

/* === セクション下部の一言コメント === */
.playlearn .pl-note{
  text-align:center;
  margin: 16px 0 0;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","Noto Sans JP",system-ui,sans-serif;
  color: var(--text);
  font-size:clamp(13px,2vw,15px); /* ←注釈文字サイズ */
/* タイトル文字サイズを大きくする */
  font-size: clamp(26px, 4vw, 36px); /* ←前: 20〜28px → 今: 26〜36pxでしっかり大きく */
  font-weight: 800;                  /* ←少し太くしてインパクトを出す */
  letter-spacing: 0.03em;            /* ←文字間もほんのり広げて読みやすく */
  margin: 32px;               /* ←下のカードとの距離を少し広げる（20〜32px目安） */
}
.playlearn .pl-note{
  font-size: clamp(22px, 3.6vw, 32px); /* ←上限を少し下げてスマホでも1行に収めやすく */
  letter-spacing: 0.02em;              /* ←文字間を少し詰める */
  word-break: keep-all;                /* ←単語（日本語）をなるべく分割しない */
  white-space: nowrap;                 /* ←強制的に改行させない（1行固定） */
}
.pl-note {
  padding-top: 5%;
}
@media (max-width: 599px){
  .playlearn .pl-note{
    white-space:normal;         /* スマホは折り返しOK */
    font-size:clamp(13px, 4.2vw, 16px); /* 少し大きめにしたい場合はここでだけ上げる */
    overflow-wrap:anywhere;
  }
}


/* ==========================================================
   子供向け：カード内レイアウトを「左テキスト／右画像」にする
   - モバイル：縦積み（画像→本文）
   - 600px以上：横2カラム（左：本文 / 右：画像）
   使い方：
   1) 既存の .playlearn .pl-card / .pl-deco img / .pl-body まわりを置換
   2) 下の「画像フィット方式」を好みで切替（A=切り抜き／B=非切り抜き）
========================================================== */

/* カード本体：基本は縦積み */
.playlearn .pl-card{
  display: grid;
  grid-template-rows: auto 1fr; /* 画像 → 本文（SP） */
  background: var(--pl-card-bg);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  overflow: hidden;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1);
}

/* 600px以上で「左テキスト／右画像」にスイッチ */
@media (min-width: 600px){
  .playlearn .pl-card{
    grid-template-columns: 1.3fr 1fr; /* ←左：本文を少し広めに */
    grid-template-rows: 1fr;
  }
  .playlearn .pl-deco{ order: 2; } /* 右側へ */
  .playlearn .pl-body{ order: 1; } /* 左側へ */
}

/* 本文側 */
.playlearn .pl-body{
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;          /* ←縦センター寄せ */
  gap: 6px;
  min-height: 180px;                /* ←カード高さの目安（必要に応じて増減） */
}

/* 画像側の枠 */
.playlearn .pl-deco{
  position: relative;
  min-height: 160px;                /* ←SP縦積み時の高さ */
}
@media (min-width: 600px){
  .playlearn .pl-deco{
    min-height: 100%;               /* 横並び時はカード高に追従 */
  }
}

/* 画像フィット方式を選択 —— どちらか一方を使う */

/* === A) 画面いっぱいに見せたい（多少の切り抜きOK）=== */
/*.playlearn .pl-deco img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* ←隙間なく満たす（はみ出しトリミングあり） */
/*}*/

/* === B) 切り抜きNG（全部見せたい）==================== */
/* 使う場合は上の .pl-deco img をコメントアウトして、こちらを有効化*/
.playlearn .pl-deco img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;               /* ←全体表示（余白が出る） */
  background: var(--pl-card-bg);     /* ←余白の下地。好きな色に変更可 */
}


/* ホバー（やさしめ） */
.playlearn .pl-card:hover{
  transform: translateY(-1.5px);
  box-shadow: 0 8px 18px rgba(0,0,0,.20);
}
@media (prefers-reduced-motion: reduce){
  .playlearn .pl-card{ transition: none; }
  .playlearn .pl-card:hover{ transform: none; }
}

/* タイトル/本文のサイズ（必要に応じて微調整） */
.playlearn .pl-h3{
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.3;
  margin: 0;
}
.playlearn .pl-text{
  font-size: clamp(13px, 1.8vw, 15px);
  line-height: 1.5;
  margin: 0;
}

.pl-h3{
  white-space: nowrap;       /* ←これだけでも効く */
  font-size: clamp(18px, 2vw, 22px); /* スマホで潰れないよう可変でもOK */
}



/* ==========================================================
   🔧 追加調整：スマホ時 画像サイズUP & 外側余白拡大
   （Bパターン完成版への追加用）
========================================================== */

/* --- スマホの画像をさらに大きくする --- */
@media (max-width: 599px){
  .playlearn .pl-deco{
    min-height: 240px; /* ←200→240で少し存在感アップ */
  }
}

/* --- セクション全体の左右余白を広げる --- */
.playlearn .pl-inner{
  padding: 0 32px; /* ←既存24px→32pxに広げる。もっと広げたいなら40でもOK */
}

/* --- 各カードの左右余白をゆったり見せる（中央寄せ） --- */
@media (max-width: 599px){
  .playlearn .pl-cards{
    gap: 20px; /* ←カード間も少し広げる */
  }
  .playlearn .pl-card{
    margin: 0 8px; /* ←左右に軽い余白を追加。もっと開けたい場合は16pxでも可 */
  }
}


/* ==========================================================
   🔧 追加調整：縦長すぎ問題の解消（画像と本文の間を詰める）
========================================================== */

/* スマホ時のカード高さを調整 */
@media (max-width: 599px){
  .playlearn .pl-deco{
    min-height: 170px; /* （ほどよい高さに） */
  }
}

/* テキスト側の上下余白を詰めて縦長解消 */
.playlearn .pl-body{
  padding: 2px 14px 12px; /* ←上詰めて全体をコンパクトに */
}

/* 見出しと本文の間もさらに少し詰める */
.playlearn .pl-h3{
  margin-bottom: 2px; /* ←4px→2px */
}

/* 各カードの全体余白（外側）も微調整してよりまとまりを */
@media (max-width: 599px){
  .playlearn .pl-card{
    margin: 0 12px; /* ←8px→12px（外側は少し広げつつ縦は詰め） */
  }
}

/* 画像をボックス下に寄せて、見出しに近づける */
.playlearn .pl-deco img{
  object-position: center bottom; /* ←デフォはcenter center */
}

/* スマホ時：画像ボックスを低めにして密着感アップ */
@media (max-width: 599px){
  .playlearn .pl-deco{
    min-height: 150px;  /* ←170〜200からさらに詰める。様子見で140〜160の範囲で調整可 */
  }
  .playlearn .pl-body{
    padding-top: 0;     /* ←上パディングをゼロにして限界まで寄せる */
  }
}

/* ==========================================================
   大きな箱（ラフの“まとめ枠”）
   - 4枚のカードと注釈をひとつの箱で包む
========================================================== */
.playlearn .pl-box{
  /* ←箱の背景色：ラフ準拠の淡い黄。お好みで調整可 */
  background: #ffe6a8;
  border-radius: 24px;               /* ←大きめ角丸 */
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  padding: 18px;                      /* ←スマホの内側余白 */
  margin: 12px auto 0;                /* ←タイトルとの距離を少し開ける */
  max-width: 960px;                   /* ←箱自体の最大幅（セクションより少し狭く） */
}

@media (min-width: 600px){
  .playlearn .pl-box{
    padding: 24px;                    /* ←タブレット以降は余白増やす */
    border-radius: 28px;
  }
}
@media (min-width: 1024px){
  .playlearn .pl-box{
    padding: 28px;                    /* ←PCはさらにゆったり */
    border-radius: 32px;
  }
}

/* 箱の中のカードグリッド間隔を箱に合わせて少し広めに */
.playlearn .pl-box .pl-cards{
  gap: 14px;                          /* ←もとのgapより少し広げると“まとまり感”UP */
}
@media (min-width: 600px){
  .playlearn .pl-box .pl-cards{ gap: 20px; }
}

/* 注釈は箱内で中央寄せ＆上マージンを小さめに */
.playlearn .pl-box .pl-note{
  margin-top: 14px;                   /* ←カード群との距離 */
  text-align: center;
}



/* ==========================================================
   みんなのようす セクション（ベースレイアウト）
========================================================== */
.kids-everyone {
  background: linear-gradient(#fad384, #fff3cc); /* ←やわらかい黄系グラデ背景 */
  padding: 48px 0 64px;
}

.ke-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* タイトル部分（風船付き用の余白も確保） */
.ke-title {
  display: inline-block;
  position: relative;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 800;
  color: #d86b00;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}

/* 風船デコ（後で ::before / ::after で飾る） */

.ke-title::before { left: -1.8em; }
.ke-title::after { right: -1.8em; }

/* 横長ヒーロー写真 */
.ke-hero {
  margin-bottom: 48px;
}
.ke-hero img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* スナップ写真2枚 */
.ke-snaps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* ==========================================================
   figcaption（キャプション）をポップ系Webフォントに変更
========================================================== */
.ke-snap figcaption {
  font-family: "Yusei Magic","Kosugi Maru","Noto Sans JP",sans-serif;
  font-size: clamp(14px, 2vw, 16px);
  color: #3b2b00;
  font-weight: 600;
  text-align: center;
  padding: 12px 8px 16px;
  letter-spacing: 0.03em;
}


@media (min-width: 768px) {
  .ke-snaps {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

.ke-snap {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
}
.ke-snap:hover {
  transform: translateY(-4px);
}

.ke-snap img {
  width: 100%;
  height: auto;
  display: block;
}


/* ==========================================================
   みんなのようす：左右画像のサイズ統一
   （高さ基準でそろえる／横は自動トリミング）
========================================================== */
.ke-snaps{
  align-items: stretch; /* ←左右を同じ高さに揃える */
}

/* 画像のアスペクト比を固定して、はみ出す分は隠す */
.ke-snap img{
  width: 100%;
  height: 280px;            /* ←共通の高さに設定（調整可） */
  object-fit: cover;        /* ←はみ出し部分をトリミングして均等に */
  object-position: center;  /* ←中央寄せで切り抜く */
  border-bottom: 1px solid #eee; /* ←下に軽く区切り線（任意） */
}

/* スマホでは少し低めにして自然に */
@media (max-width: 599px){
  .ke-snap img{
    height: 220px;
  }
}




/* ==========================================================
   最下部キャッチコピー（kids-cta）
========================================================== */
.kids-cta {
  background: linear-gradient(180deg, #ffb84d 0%, #ff9f2f 100%); /* ←明るいオレンジ帯 */
  text-align: center;
  color: #fff;
  padding: 64px 16px 48px;
  position: relative;
  overflow: hidden;
}

/* 内枠 */
.kc-inner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* タイトル文字 */
.kc-title {
  font-family: "Yusei Magic", "Kosugi Maru", "Noto Sans JP", sans-serif;
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #fff;
  text-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

/* 左右の飾り旗（後で画像挿入予定） */
.kc-deco {
  position: absolute;
  width: 120px;
  height: auto;
  top: 20px;
  opacity: 0.9;
}
.kc-deco--left { left: 8%; transform: rotate(-8deg); }
.kc-deco--right { right: 8%; transform: rotate(8deg); }

/* フッター */
.kc-footer {
  margin-top: 40px;
}
.kc-copy {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.9);
}

/* スマホ時の余白＆フォントサイズ調整 */
@media (max-width: 599px){
  .kids-cta {
    padding: 48px 12px 32px;
  }
  .kc-title {
    font-size: clamp(18px, 4.2vw, 26px);
    line-height: 1.5;
  }
  .kc-deco {
    width: 90px;
    top: 12px;
  }
}


/* ==========================================================
   Footer（kids-footer）— すっきり再構成版
   - 右：テント .kc-deco--right
   - 右上：風船 .kc-deco--balloon
   - 左：旗 .kc-deco--left
========================================================== */

.kids-footer{
  position: relative;
  background:#ffdda1;               /*サンドベージュ */
  color: #2a2a2a;
  text-align:center;
  margin: 20px 0 10px; /* ←上下ゆとり */
  overflow:hidden;
}

.kf-inner{
  max-width: 900px;
  margin: 0 auto;
  padding-top: 40px;
  position: relative;
  z-index: 2;                       /* 飾りの下にならないように */
}

.kf-copy{
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  letter-spacing: .03em;
   display: block;
  text-align: center;
  font-weight: 700;
  color: #2a2a2a;
  font-size: 15px;
  margin: 14px 0 6px; /* ←余白も詰めて密度アップ */
  line-height: 1.5
}

/* フッター本体の高さは据え置き */
.kids-footer { /* 既存そのまま */ }

/* 中身を基準にするだけ（高さは変えない） */
.kf-inner{
  position: relative;
}

/* 文字だけ下にズラす（帯の高さは増えない） */
.kf-copy{
  margin: 0;                  /* マージンで高さを増やさない */
  transform: translateY(8px); /* ←下方向へ見た目だけ移動（6〜12pxで微調整） */
  display: block;
  text-align: center;
  font-weight: 700;
  color: #2a2a2a;
  font-size: 15px;
  line-height: 1.5;
}

/* 好みで微調整したいなら top でも可（どちらか一方だけ使う） */
/*
.kf-copy{ position: relative; top: 8px; }
*/


/* ---------- 飾り（共通） ---------- */
.kc-deco{
  position:absolute;
  height:auto;
  opacity:.95;
  pointer-events:none;
  z-index:1;
}

/* 左：旗 */
.kc-deco--left{
  width: clamp(68px, 9vw, 120px);
  bottom: 10px;
  left: 6%;
  transform: rotate(-4deg);
}

/* ゆらゆら（中間テンポVer.） */
.kc-deco--left {
  animation: swingGarland 6s ease-in-out infinite; /* ←8s → 6s に短縮で少しテンポUP */
  transform-origin: top center;
  transform: rotate(0deg);
}

/* アニメーション定義 */
@keyframes swingGarland {
  0%   { transform: rotate(0deg) translateY(0); }
  25%  { transform: rotate(1.5deg) translateY(0.8px); }
  50%  { transform: rotate(0deg) translateY(0); }
  75%  { transform: rotate(-1.5deg) translateY(-0.8px); }
  100% { transform: rotate(0deg) translateY(0); }
}


/* 右：テント */
.kc-deco--right{
  width: clamp(66px, 8.5vw, 110px);
  bottom: 8px;
  right: 6%;
  transform: rotate(3deg);
}

/* ===== 風船（テントより小さく・高め） ===== */
.kc-deco--balloon {
  width: clamp(18px, 2.6vw, 28px);  /* ←かなり小さめに（テントの半分以下） */
  bottom: 138px;                    /* ←高く浮かせる（上に移動） */
  right: 4%;                        /* ←テント右横キープ */
  transform-origin: bottom center;
  animation: balloonFloat 4.5s ease-in-out infinite alternate;
}

/* ふわふわアニメーション（そのまま） */
@keyframes balloonFloat {
  0%   { transform: translateY(0) rotate(2deg); }
  100% { transform: translateY(-10px) rotate(-1deg); }
}

/* スマホ対応：少し下げて見切れ防止 */
@media (max-width: 599px) {
  .kc-deco--balloon {
    width: clamp(30px, 9vw, 48px);
    bottom: 80px;
    right: 5%;
  }
}


/* --- 風船：サイズ＆位置を強制反映させるパッチ --- */
.kids-footer .kc-deco.kc-deco--balloon{
  width: 24px !important;      /* ←ここをお好みで 18～32px に */
  height: auto !important;
  max-width: none !important;   /* 念のためリセット */
  min-width: 0 !important;

  right: 8% !important;         /* テント右横 */
  bottom: 130px !important;     /* 高めに配置（数値↑でさらに上） */

  transform-origin: bottom center;
  animation: balloonFloat 4.5s ease-in-out infinite alternate;
}



/* ---------- スマホ最適化 ---------- */
@media (max-width: 599px){
  .kids-footer{ padding: 32px 0 22px; }
  .kc-deco--left{  left: 3.5%; bottom: 6px; }
  .kc-deco--right{ right: 3.5%; bottom: 4px; }
  .kc-deco--balloon{ right: 7.5%; bottom: 60px; }
}


/* ===== フッター飾りの位置・サイズをリチューン ===== */

/* 1) ガーランド：少し大きく＆帯の上端に合わせる */
/* ===== ガーランドの位置調整（より上に） ===== */
.kc-deco--left{
  width: clamp(150px, 18vw, 230px); /* ←サイズ維持（少し大きめ） */
  top: -32px;                       /* ←帯の外にはみ出すように上げる（数値で微調整） */
  left: 6%;
  transform: rotate(-4deg);
}

/* ===== テントを上に持ち上げて見せる ===== */
.kc-deco--right{
  width: clamp(110px, 13vw, 180px); /* ←さらに少し大きく見せる */
  bottom: 28px;                     /* ←前: 6px → 上に持ち上げる（数値↑でさらに上へ） */
  right: 8%;
  transform: rotate(2deg);
}


/* 3) 風船：テントの右隣に配置（テントより外寄り&やや高め） */
.kc-deco--balloon{
  width: clamp(48px, 6.8vw, 78px);
  bottom: 28px;   /* テントより少し高く */
  right: 2.5%;    /* テント(8%)よりさらに右へ＝右隣 */
  animation: balloonFloat 4.5s ease-in-out infinite alternate;
}

/* スマホ調整（はみ出し防止） */
@media (max-width: 599px){
  .kc-deco--left{
    width: clamp(88px, 24vw, 140px);
    left: 4%;
    transform: translateY(-8%) rotate(-4deg);
  }
  .kc-deco--right{
    width: clamp(84px, 22vw, 130px);
    right: 6%;
  }
  .kc-deco--balloon{
    width: clamp(40px, 12vw, 60px);
    right: 3%;
    bottom: 24px;
  }
}



/* === テントを確実に上げる＋見える余白を作る（強制パッチ） === */

/* フッター下に余白を確保（クリップ防止） */
.kids-footer{
  padding-bottom: 64px; /* 必要なら 72〜88px に増やす */
  position: relative;
  overflow: visible; /* ←これが大事！はみ出しを許可する */
  z-index: 1;
}

/* テント：他の指定を無効化して上に持ち上げる */
.kc-deco--right{
  top: auto !important;           /* 上指定が残っていても無効化 */
  bottom: 0px !important;        /* ←ここで高さを決める。数値↑でさらに上へ */
  right: 8% !important;           /* 位置も固定 */
  width: clamp(150px, 18vw, 230px); /* 大きさアップ（任意） */
  transform: rotate(2deg);
  z-index: 2;
}

/* （参考）風船はテントの右隣に固定したい場合 */
.kc-deco--balloon{
  right: 2.5% !important;   /* テント(8%)よりさらに右＝右隣 */
  bottom: 60px !important;  /* テントより少し高く */
}

/* スマホでのはみ出し防止（任意） */
@media (max-width: 599px){
  .kids-footer{ padding-bottom: 56px; }
  .kc-deco--right{ bottom: 34px !important; right: 6% !important; }
  .kc-deco--balloon{ right: 4% !important; bottom: 52px !important; }
}


/* コピーライト中央（メインページ準拠） */
.kf-copy {
  display: block;
  text-align: center;
  font-weight: 700;
  color: #2a2a2a;
  font-size: 15px;
  margin: 20px 0 10px; /* ←上下ゆとり */
  line-height: 1.6;
}

@media (max-width: 767.98px){
  /* フッターの余白少し縮める */
  .kids-footer{
    padding: 32px 16px 44px;
  }

  /* 🎉 ガーランドを下げる */
  .kc-deco--left{
    top: -25px;        /* ←下げたい分だけ数値を大きく */
    left: 10px;
    width: 180px;     /* スマホ用に少し小さく */
  }

  /* ⛺ テントを右へ・小さく */
  .kc-deco--right{
    bottom: 6px;      /* ←上下調整 */
    right: 8px;       /* ←右寄せ */
    width: 100px;     /* ←小さく */
  }

  /* 🎈 風船：位置微調整（オプション） */
  .kc-deco--balloon{
    top: 22px;
    right: 8%;
    width: 28px;
  }
}


/* 共通ふわっと登場アニメ */
.fadein-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}
.fadein-up.show {
  opacity: 1;
  transform: translateY(0);
}



/* 背景風船の共通スタイル */
.bg-balloon {
  position: fixed;
  bottom: -100px;
  z-index: 50;               /* ←背景にまわす（他要素より後ろ） */
  opacity: 0.8;
  pointer-events: none;
  animation: floatUp 16s ease-in-out forwards;
  will-change: transform;
}

/* 風船が上にふわ〜っと上がる動き */
@keyframes floatUp {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% { opacity: 1; }
  80% {
    transform: translateY(-100vh) translateX(40px) scale(1.1);
    opacity: 0.9;
  }
  100% {
    transform: translateY(-110vh) translateX(60px) scale(1);
    opacity: 0;
  }
}





/* =========================
   強制パッチ：スマホナビ復活
   クラス名：
   - ヘッダー .site-header
   - トグル  .site-nav__toggle  （ボタン）
   - ナビ本体 .site-nav
   - ナビ開閉クラス .is-open
   ========================= */

/* ヘッダーは最前面に固定 */
:root { --header-h: 56px; } /* 必要なら 60px 等に */
.site-header{
  position: sticky; top: 0;
  z-index: 1000;
  background: #ffa93a; /* 任意（透過だと背後に負けやすい） */
}

/* 背景系は必ず後ろ＆クリック透過 */
.bg-balloon { z-index: 0 !important; pointer-events: none !important; }
.kids-hero  { position: relative; z-index: 1; }

/* ハンバーガーの基本表示（常にクリック可能） */
.site-nav__toggle{
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  z-index: 1100;           /* ボタン自体を最前面に */
  cursor: pointer;
}

/* PC時は通常ナビ表示、SP時はドロワーに */
@media (min-width: 769px){
  .site-nav{
    display: block !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important; visibility: visible !important;
    height: auto !important;
  }
}

@media (max-width: 768px){
  /* ドロップダウン：ヘッダー直下に“必要分だけ”表示 */
  .site-nav{
    position: absolute;            /* ← fixed をやめる */
    left: 0; right: 0;
    top: var(--header-h);          /* ヘッダーのすぐ下から */
    background: #f7edcf;           /* 大人ページ風のベージュ等に */
    border-top: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);

    /* アニメーション（内容高さぶんだけ開く） */
    overflow: hidden;
    max-height: 0;                 /* 初期は閉じる */
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height .25s ease, opacity .2s ease, transform .25s ease;
    pointer-events: none;          /* 閉じてる間はクリック不可 */
    z-index: 1500;                 /* ヘッダーよりは下げすぎない */
  }

  .site-nav.is-open{
    max-height: 70vh;              /* 中身に応じて伸びる上限だけ設定 */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* リストの余白をスッキリ */
  .site-nav__list{
    margin: 0; padding: 8px 8px;
    display: grid; gap: 0;
  }
  .site-nav__list a{
    display: block;
    padding: 12px 14px;
    text-decoration: none;
    color: #111; font-weight: 700;
  }
  .site-nav__list li + li a{
    border-top: 1px dashed rgba(0,0,0,.15);
  }
}


/* アイコン（3本線）やSVGが見えない時の色対策 */
.site-nav__toggle svg,
.site-nav__toggle .bar,
.site-nav__toggle::before,
.site-nav__toggle::after{
  color:#2a2a2a; fill:#2a2a2a; background:#2a2a2a;
}

/* ナビが裏に潜らないように（保険） */
main, .kids-everyone, .playlearn, .kids-footer { position: relative; z-index: 1; }


/* --- ハンバーガー描画（擬似要素で3本線） --- */
.site-nav__toggle{
  position: relative;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 1100;
  cursor: pointer;
}

/* 中央の線 */
.site-nav__toggle .bar{
  position: absolute; left: 10px; right: 10px;
  height: 2px; background: #2a2a2a; content: ""; display: block;
  top: 50%; transform: translateY(-50%);
}

/* 上下の線（擬似要素） */
.site-nav__toggle::before,
.site-nav__toggle::after{
  content: ""; position: absolute; left: 10px; right: 10px;
  height: 2px; background: #2a2a2a; transition: transform .25s ease, opacity .2s;
}
.site-nav__toggle::before{ top: 12px; }
.site-nav__toggle::after { bottom: 12px; }


/* 開いた時：中央線を消す＆上下をXに */
.site-nav__toggle[aria-expanded="true"] .bar{ opacity: 0; }
.site-nav__toggle[aria-expanded="true"]::before{ transform: translateY(8px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"]::after { transform: translateY(-8px) rotate(-45deg); }


/* まず、古い疑似要素方式を無効化（保険） */
.site-nav__toggle::before,
.site-nav__toggle::after { content: none !important; }

/* 3本線のベース（HTMLの3つの <span class="site-nav__toggle-bar"> に一致） */
.site-nav__toggle{
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 44px; height: 44px;
}
.site-nav__toggle-bar{
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: #2a2a2a;
  border-radius: 1px;
  transition: transform .25s ease, opacity .2s ease, background-color .2s ease;
  transform-origin: 50% 50%;
}

/* 初期配置：上・中・下 */
.site-nav__toggle-bar:nth-child(1){ transform: translateY(-7px); }
.site-nav__toggle-bar:nth-child(2){ transform: translateY( 0 ); }
.site-nav__toggle-bar:nth-child(3){ transform: translateY( 7px); }

/* 開いた時：X化（中央＝2本目を消す） */
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(1){
  transform: translateY(0) rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2){
  opacity: 0;
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3){
  transform: translateY(0) rotate(-45deg);
}




@media (max-width: 768px){
  .site-nav{
    /* 白くならないよう差し替え */
    background: linear-gradient(#fff7d8, #ffeec0);   /* やさしい黄系 */
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }
  /* メニュー項目の区切りが薄い場合の補助 */
  .site-nav li + li{
    border-top: 1px dashed rgba(0,0,0,.08);
  }
}


@media (min-width: 769px){
  .site-nav__toggle{ display: none !important; }
}

@media (min-width: 768px){
  .site-nav__toggle{ display:none !important; }
  .site-nav{
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
  }
}

/* 背景装飾（風船など）がクリックをブロックしないようにする */
.bg-balloon,
.kids-hero::before,
.kids-hero::after {
  pointer-events: none !important;
  z-index: 0 !important;
}




/* ヘッダーを最前面に固定 */
.site-header {
  position: sticky; /* fixedでもOK */
  top: 0;
  z-index: 2000;
  background: var(--brand-orange, #ffa93a);
}

/* モバイルのナビ（開閉制御） */
@media (max-width: 767.98px){
  .site-nav {
    pointer-events: none;
  }
  .site-nav.is-open {
    pointer-events: auto;
  }
}

/* PC/タブレットでは常時表示 */
@media (min-width: 768px){
  .site-nav {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    height: auto;
    z-index: 1000;
  }
  .site-nav__toggle {
    display: none;
  }
}


/* =========================================
   PC／タブレット時のナビ色を統一
   ========================================= */
@media (min-width: 768px){
  .site-nav {
    background: transparent !important; /* ← オレンジ背景リセット */
    border-top: none !important;
  }

  .site-nav__list a {
    color: #111 !important;              /* 文字色（黒 or メインテキストカラー） */
    background: transparent !important;  /* 背景リセット */
  }

  .site-nav__list a:hover {
    color: #fff !important;              /* ホバー時：白文字 */
    background: #111 !important;         /* 背景黒（またはブランドカラー） */
    transition: all .2s ease;
  }
}

/* ================================
   タブレット以上：ナビ色を強制リセット
   （一番下に置いて“必ず勝つ”）
   ================================ */
@media (min-width: 768px){
  /* 背景や区切りが残ってる可能性のある全要素を丸ごと透明化 */
  .site-nav,
  .site-nav__list,
  .site-nav__list li,
  .site-nav__list a {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* 文字色は統一（必要なら #111 を好みの色に） */
  .site-nav__list a {
    color: #111 !important;
  }

  /* モバイル用の dashed 区切りなどを確実に無効化 */
  .site-nav__list li + li a {
    border-top: none !important;
  }

  /* PC/タブレットはハンバーガーを出さない */
  .site-nav__toggle {
    display: none !important;
  }

  /* ナビ本体は通常フローに復帰 */
  .site-nav {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    pointer-events: auto !important;
  }
}

/* モバイルのオレンジ帯は ≤767.98px のみで有効に（漏れ止め） */
@media (max-width: 767.98px){
  .site-nav {
    background: var(--brand-orange) !important;
  }
}

/* 風船を再表示（クリックは透過） */
.bg-balloon{
  position: fixed !important;       /* 画面全体でふわふわ */
  bottom: -80px !important;         /* 画面外から出現 */
  z-index: 120 !important;          /* コンテンツの上、ヘッダーより下 */
  pointer-events: none !important;  /* クリックは遮らない */
  opacity: .9;
}

/* レイヤーの基準（必要なら確認用） */
.site-header{ z-index: 2000; }  /* ヘッダー最前面 */
.site-nav{    z-index: 1500; }  /* ドロワーなど */



/* 風船用の専用レイヤー（全画面） */
#balloons-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1200;   /* 例：header=2000, nav=1500 の下に配置 */
}

/* 風船の基本（念のため !important で上書き勝ち） */
.bg-balloon{
  position: absolute !important;  /* レイヤー内で絶対配置 */
  bottom: -80px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .9;
  animation: balloonUp 18s linear infinite;
}

@keyframes balloonUp{
  from { transform: translateY(0); }
  to   { transform: translateY(-110vh); }
}

/* ※以前の「.bg-balloon{ z-index:0 !important; }」が残っててもOK。上で想定通りになる */

/* 緑カード内のアドレス＆注意書きを最優先で上書き */
.card.card--green .card__address,
.card.card--green .card__note{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;          /* 必要なら 700 でもOK */
  letter-spacing: 0.02em;
}

/* addressタグの斜体や継承の保険 */
.card.card--green .card__address{
  font-style: normal !important;
}

.card__desc {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.9;
  font-weight: 700;   /* ← ここ！しっかり太く */
  letter-spacing: 0.02em;
}


/* もしどこかで強いセレクタに負けていたら一時的に */
 /* .card.card--green .card__address,
    .card.card--green .card__note{ font-weight:600 !important; } */



/* ===== kiratto: ヒーローに走る光 ===== */
.hero__inner{ position: relative; display: inline-block; overflow: hidden; }

.hero__inner.shine::after{
  content: "";
  position: absolute;
  top: -20%;
  left: -40%;
  width: 40%;
  height: 140%;
  pointer-events: none;
  /* 白→半透明→白の帯（やや斜め） */
  background: linear-gradient(75deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.95) 48%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-120%) skewX(-18deg);
  filter: blur(2px);
  mix-blend-mode: screen;         /* 背景となじませる */
  opacity: .85;
  will-change: transform, opacity;
}

.hero__inner.is-shining::after{
  animation: kiratto 2.0s ease forwards;
}

@keyframes kiratto {
  0%   { transform: translateX(-150%) skewX(-18deg); opacity: .9; }
  70%  { opacity: .9; } /* ← この区間は明るさを保つ */
  100% { transform: translateX(350%) skewX(-18deg); opacity: 0; }
}


/* ホバーでももう一回“キラッ”できるように（PC向け） */
.hero__inner.shine:hover::after{
  animation: kiratto 1.5s ease forwards;
}

/* 動きを減らす設定の人にはアニメなしで静止 */
@media (prefers-reduced-motion: reduce){
  .hero__inner.shine::after{ animation: none !important; opacity: 0 !important; }
  .hero__inner.is-shining::after{ animation: none !important; }
}




/* ===== Sticky Header（追従ヘッダー） ===== */
:root{ --header-h: 56px; } /* 高さは実物に合わせて 56〜64px くらい */

.site-header{
  position: sticky;
  top: 0;
  z-index: 2000;                  /* 風船やドロワーより上に */
  background: rgba(255,169,58,.97); /* 子どもページのオレンジ／不透明なら #ffa93a */
  transition: box-shadow .25s ease, backdrop-filter .25s ease;
  backdrop-filter: saturate(1.05) blur(0px);
  /* iOSノッチ対策（あれば効く） */
  padding-top: env(safe-area-inset-top, 0);
}

/* ヘッダー内の高さを一定化 */
.site-header__inner{
  height: var(--header-h);
  display: flex;
  align-items: center;
}

/* スクロールしたら“浮かせる影”を出す（任意） */
.site-header.is-stuck{
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
  backdrop-filter: saturate(1.1) blur(4px);
}

/* モバイルメニュー（ドロップダウン型）をヘッダー直下から出す場合の基準 */
@media (max-width: 767.98px){
  .site-nav{
    top: var(--header-h); /* 既に指定があればそのままでOK */
  }
}

/* 風船などの背景はクリックをブロックしない＆ヘッダーより下に */
#balloons-layer{ pointer-events:none; z-index: 0; }



/* 高さを変数化して他所と同期 */
:root { --header-h: 64px; }

/* 重なり順＆演出を強化（既存より後ろに書いて勝たせる） */
.site-header{
  z-index: 2000;                          /* 50 → 2000：背景やナビより前に */
  background: var(--brand-orange);
  transition: box-shadow .25s ease, backdrop-filter .25s ease;
  backdrop-filter: saturate(1.05) blur(0px);
}

/* 中身の高さを変数基準に（既存min-heightを置き換え） */
.site-header__inner{
  min-height: var(--header-h);
}

/* スクロール後の“浮き”表現（影＋ほんのりぼかし） */
.site-header.is-stuck{
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
  backdrop-filter: saturate(1.1) blur(4px);
}

/* SPドロワーをヘッダー直下から出す（位置ズレ防止） */
@media (max-width: 767.98px){
  .site-nav{ top: var(--header-h); }
}

/* 背景デコがクリックを邪魔しない＆ヘッダーの下にいるように */
#balloons-layer{ pointer-events: none; z-index: 0; }


/* =========================================
   ヘッダー幅を大人ページ（1100px）に統一
   ========================================= */
.site-header__inner.container {
  width: 100%;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* モバイル初期：ナビはドロワー制御に任せる */
.site-nav { display: none; }  /* ベースを明示しておく */

/* タブレット以上は常時横並びで表示（ここが大事） */
@media (min-width: 768px){
  .site-nav{
    display: block !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    max-height: none !important;
    height: auto !important;
    z-index: 1500; /* 任意：ヘッダーよりは低く */
  }
  .site-nav__toggle{ display: none !important; }
  .site-nav__list{ display: flex; gap: 32px; padding: 0; margin: 0; } /* 念押し */
}


/* 画面全体にかぶせる風船専用の最上位レイヤー */
#balloons-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1200;   /* ← コンテンツより手前、ヘッダー(2000)より奥 */
}

#balloons-layer{ pointer-events:none; z-index: 0; }
#balloons-layer{ pointer-events: none; z-index: 0; }

/* === 最終決定版：風船レイヤー === */
#balloons-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1200 !important;  /* ← 常にこれが勝つように !important でも可 */
}

/* 1) ヘッダー分だけ main を押し下げる（重なり＆折り畳み回避） */
main{
  padding-top: var(--header-h);         /* 56–64px相当 */
}

/* 2) セクションは margin を使わず padding で間隔を作る */
.section{ 
  margin: 0;
  padding-block: 48px;                   /* 好きな間隔に調整 */
}

/* 3) 既存の margin を殺しつつ段差を無くす */
.section + .section{ margin-top: 0; }    /* 念押し */

/* 4) margin 折り畳みの根絶：親側で吸収（どちらかでOK） */
main{ overflow: auto; }                  /* or border-top:1px solid transparent; */

/* 5) body の背景が“見えても困らない”色に（キッズ頁の地色に合わせる） */
body{ background: #FDE7BC; }             /* 例：ベージュ寄り。実際のベース色に置換 */


/* 既存の .hero__img（ここはそのまま） */
/* ...既存コード... */

/* ===== 横スク防止・最小修正 ===== */
.hero__img{
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  display: block;
  transform: none !important;
}
html { overflow-y: auto; }
body { overflow-y: auto; }
main { overflow: visible !important; }  /* ← 以前の overflow:auto を無効化 */
/* 横はみ出しの最終ロック（対応外ブラウザは hidden に） */
html, body { overflow-x: clip; }  /* clip が効かないなら hidden でOK */

/* 風船レイヤーは中でクリップして横溢れさせない */
#balloons-layer { overflow: hidden; }


/* 1) mainの押し下げをゼロにする（以前の保険を打ち消し） */
main{ padding-top: 0 !important; }

/* 2) margin折り畳みで隙間が出ないようにする（見た目は0pxのまま） */
main{ border-top: 1px solid transparent; margin-top: -1px; }

/* 3) ヒーロー側に余白があれば消す */
.hero{ margin-top: 0 !important; padding-top: 0 !important; }

/* 4) ヘッダー下の影や境界線が常時出ている場合は無効化（スクロール後だけ出す） */
.site-header{ box-shadow: none; }
.site-header.is-stuck{ box-shadow: 0 6px 20px rgba(0,0,0,.14); }

/* 各講座のセクションの基本スタイル */
.block {
    margin: 40px auto; /* 上下の余白 */
    padding: 20px 0;
    max-width: 900px; /* カード全体の最大幅を設定 */
}

/* 2カラムレイアウトのコンテナ */
.two-col {
    display: flex; /* Flexboxで横並びを実現 */
    align-items: center; /* 垂直方向の中央揃え */
    gap: 30px; /* 画像とテキストの間にスペース */
    padding: 20px;
}

/* 画像（アイコン）のスタイル */
.two-col img {
    /* 画像の幅を固定または制限 */
    width: 150px; 
    height: auto;
    flex-shrink: 0; /* 縮小しないようにする */
    border-radius: 8px; /* 角を少し丸める */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 軽い影で浮かせる */
}

/* テキストコンテンツの領域 */
.text-col {
    flex-grow: 1; /* 残りのスペースを全て使用 */
    position: relative; /* 点線（dot-line-green）の基準にする */
    padding: 10px 0 10px 0;
}




/* ===== スマホのみ：ドロワー ===== */
@media (max-width: 767.98px){
  .site-nav__toggle{ display: inline-flex !important; }

  .site-nav{
    display: block !important;         /* ← display:none の打ち消し */
    position: absolute;
    left: 0; right: 0;
    top: var(--header-h);
    background: linear-gradient(#fff7d8, #ffeec0);
    border-top: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 1500;

    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height .25s ease, opacity .2s ease, transform .25s ease;
    pointer-events: none;
  }
  .site-nav.is-open{
    max-height: 70vh;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* ===== 768px〜：タブレット/PCは横並び ===== */
@media (min-width: 768px){
  .site-nav__toggle{ display: none !important; }

  .site-nav{
    display: block !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    pointer-events: auto !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 1500;
  }
  .site-nav__list{
    display: flex !important;
    gap: 24px;                 /* タブレットは少し狭め */
    margin: 0; padding: 0;
    align-items: center;
    flex-wrap: nowrap;
  }
  .site-nav__list a{
    display: block;
    padding: 10px 8px;         /* 収まりやすい余白に */
    white-space: nowrap;       /* 折返し防止（足りなければ gap/文字サイズ調整） */
  }

  /* ヘッダー内レイアウトを安定化（お好みで） */
  .site-header__inner.container{
    max-width: 1100px;
    padding: 0 16px;
  }
}

@media (max-width: 650px) {
    .two-col {
        flex-direction: column; /* 縦並びにする */
        text-align: center; /* テキストを中央寄せ */
        padding: 15px;
    }
    
    .two-col img {
        margin-bottom: 15px; /* 画像の下に余白 */
    }

    /* 縦並びになった際、テキストコンテンツの幅を調整 */
    .text-col {
        width: 100%;
        padding: 0;
    }

    /* タイトルとリストの調整 */
    .text-col h3 {
        margin: 10px auto;
    }
    
    .text-col .list li {
        text-align: left; /* リスト項目は左寄せに戻す */
        margin: 0 auto;
        max-width: 300px;
    }
}

/* スマートフォンなどの小さな画面 (画面幅が600px以下) */
@media (max-width: 600px) {
    #kids-title {
        /* 文字サイズを小さく調整 */
        font-size: 1.2em; 
        
        /* 幅を画面全体に広げ、上下のパディングを少し増やして強調 */
        width: 100%;
        box-sizing: border-box; /* パディングを含めて幅100%にする */
        margin: 20px 0; /* 左右の余白は0に */
        border-left: none; /* 左右の境界線を削除 */
        border-right: none;
        border-radius: 0; /* 角丸を削除し、フル幅で表示 */
    }
    #kids-content, #adults-content {
      padding-top: 10%;
    }
}