/* =====================================================
   mobile.css
   つながりのはな保育園 — モバイル／レスポンシブ用スタイル
   style.css の後に読み込んでください。
   ブレイクポイントは 768px の一本に統一。
===================================================== */

@media (max-width: 768px){

  /* ============ ヘッダー ============ */
  .logo img{ height: 52px; }
  .nav-toggle{ display: grid; place-items: center; }
  header{ padding: 8px 0 10px; }

  /* メニュー（閉じた基本状態：ヘッダー下に隠す） */
  .headerTop .contents{
    position: absolute;
    inset: auto 0 0 0;
    top: 100%;
    width: 100%;
    background: #ffffffF2;
    backdrop-filter: blur(3px);
    border-top: 1px solid #dfeee6;
    padding: 12px 16px 16px;
    display: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    z-index: 998;
  }

  /* 開いたメニュー：ヘッダー直下に浮かぶカード */
  .headerTop .contents.is-open{
    display: grid;
    position: absolute;
    top: 100%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 32px;
    padding: 20px 22px;
    margin-top: 10px;
    width: min(92%, 520px);
    background: #fff;
    border-radius: 14px;
    border: 1px solid #E4EDE8;
    box-shadow: 0 8px 22px rgba(0,0,0,.08);
  }

  /* メニュー項目：画像を消してテキストラベル表示 */
  .headerTop .contents.is-open a{
    display: grid; place-items: center;
    width: 100%;
    min-height: 32px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #F7FBF7;
    box-shadow: inset 0 0 0 2px #DFEEE6;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    color: #2f3b33;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .headerTop .contents.is-open a:hover{
    background: #EEFFF2;
    box-shadow: inset 0 0 0 2px #BCE6C8, 0 2px 6px rgba(0,0,0,.04);
    transform: translateY(-1px);
  }
  .headerTop .contents.is-open a img{ display: none; }
  .headerTop .contents.is-open a::after{
    content: attr(data-label);
    line-height: 1;
  }

  /* ============ FV（スライダー／ヒーロー） ============ */
  .slider{ --slider-h: clamp(240px, 48vh, 380px); }
  .slider .slick-arrow:before{ font-size: 22px !important; }

  .hero-copy span{ font-size: clamp(18px, 5vw, 24px); }
  .hero-copy::before{ inset: 0px -8px; }
  .hero-copy{ transform: translate(-50%, 112%) !important; }

  /* #haikei1 は高さ可変＆背景は下端に */
  #haikei1{
    height: auto !important;
    padding-bottom: 8px;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  /* スマホではスライダーを画面端まで広げる */
  #slider_back{ width: 100%; }
  #slider_back .slider{ top: 0; }

  /* ============ 大切にしていること ============ */
  .taisetsutext{ margin-top: 48px; margin-bottom: 28px; }
  .taisetsutext h2{ font-size: 22px; padding: 0; }
  .taisetsutext h2::before,
  .taisetsutext h2::after{ display: none; }

  /* 見出しを全体的に小さく */
  .ichinichititle h2{ font-size: 24px; }
  .more-about__title{ font-size: 24px; }
  .ennokoto{ font-size: 20px; }

  .values::before{
    background:
      radial-gradient(
        circle at 50% 60%,
        rgba(255,243,205,.40) 0%,
        rgba(255,243,205,.22) 36%,
        rgba(255,243,205,.10) 60%,
        rgba(255,243,205,0) 100%
      );
  }

  /* 横並び→縦1列 */
  .taisetsu{
    width: min(92%, 560px) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .taisetsupic{ width: auto !important; }

  .feature{
    background: #fff !important;
    border: 1px solid #E3EBE5 !important;
    border-radius: 16px !important;
    padding: 24px 20px !important;
  }
  .feature--care,
  .feature--nature,
  .feature--nutrition,
  .feature--community{ --bg: transparent !important; }

  .feature img{
    width: 72px !important;
    height: 72px !important;
    object-fit: contain;
    margin: 0 auto 6px;
  }
  .feature h3{
    font-size: 18px !important;
    line-height: 1.4 !important;
    text-align: center;
    margin: 0;
  }
  .feature p{
    font-size: 14.5px !important;
    line-height: 1.75 !important;
    color: #4C5A53 !important;
    margin: 0;
    text-align: left;
  }

  /* 仕切り線 */
  .shikirisen1{ margin-top: 48px; }
  .shikirisen2{ margin-bottom: 48px; }

  /* ============ おしらせ（news） ============ */
  .news__label{
    writing-mode: horizontal-tb;
    text-orientation: initial;
    text-align: center;
    margin: 0 auto;
    display: block;
    font-size: 20px;
  }
  .mascot-img{ display: none; }

  .news{
    grid-template-columns: 1fr;
    row-gap: 20px;
    margin: 32px auto;
    padding: 24px 0 32px;
  }
  .news__side{ position: static; justify-items: start; }
  .news__list{ grid-template-columns: 1fr; }
  .news__moreWrap{ grid-column: 1 / 2; justify-content: center; }

  /* ============ 園長メッセージ（story） ============ */
  .story{ padding-block: 40px 56px; }
  .story__inner{ grid-template-columns: 1fr; }
  .story--reverse .story__media,
  .story--reverse .story__content{ order: initial; }
  .story__title{ font-size: clamp(20px, 6vw, 28px); }
  .story--wood::before{ opacity: .28; filter: blur(.8px) brightness(1.08); }

  /* ============ 一日のスケジュール ============ */
  .ichinichi{
    width: min(94%, 640px) !important;
    margin-inline: auto;
    padding: 40px 0 88px !important;
  }
  .ichinichititle{ margin-top: 0; margin-bottom: 36px; }

  #ichinichi_box{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    width: 100%;
    margin: 0 auto;
    align-items: start;
  }
  #ichinichi_box .ichinichi_box2{
    padding: 24px 18px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,.05);
  }

  .nyuji, .youji{ justify-content: center; gap: 8px; }
  .nyuji img, .youji img{ height: 36px; }
  .subtitle{ margin-bottom: 24px; }

  .touen{ gap: 12px; margin: 18px auto 20px; padding: 14px 16px; }
  .tokei{ width: 60px; height: 60px; }
  .touen-text{ align-items: flex-start; }
  .zikan{ font-size: 18px; }
  .touen .zikan + .zikan{ font-size: 16px; font-weight: 700; }

  .hidariyose{ margin: 12px 0 24px; line-height: 1.7; }
  .img-300-round,
  .img-300-round2{ width: 100%; max-width: 420px; margin: 16px auto; }
  .photo-stack{ gap: 8px; }

  /* ============ もっと知りたい ============ */
  .more-about{ padding: 32px 0 40px; }
  .more-about-img{ margin-top: 12px; }
  .about-list{ gap: 32px; }

  /* ============ 見学バナー ============ */
  main > .contact-banner{ display: flex; justify-content: center; padding: 0; }
  .contact-banner{
    flex-direction: column;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 20px;
    column-gap: 28px;
  }
  .contact-banner.is-contained{
    width: min(680px, 94%);
    margin: 24px auto 40px;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(0,0,0,.07);
  }
  .contact-banner__btn{ width: 100%; max-width: 280px; }
  .banner-illust{ align-items: center; }
  .fukidashi.fadePop.show{ animation-duration: 3.6s; }

  /* ============ フッター ============ */
  .footer-inner{ grid-template-columns: 1fr; }
  .footer-map img,
  .footer-map iframe{ height: 220px; }
}