/* リセットCSS */
*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
img{
    display: block;
}
a{
    text-decoration: none;
}


/* ヘッダー */

html {
  scroll-behavior: smooth;
}

:root{
  /* layout */
  --container: min(1100px, 92%);

  /* brand core */
  --ink: #2f3b33;
  --muted: #55635a;
  --accent: #6CCF8D;
  --accent-d: #53BA77;
  --accent-strong: #5ABF83;

  /* banner / pattern */
  --banner-bg: #f3fbf6;
  --dot-1: #c9efd9;
  --dot-2: #e6f7ed;
  --border: #dfeee6;

  /* news tokens */
  --news-accent: #C94B43;
  --news-dot:    #C94B43;
  --news-line:   #C94B43;
  --ink-strong:  #3a3a3a;
  --ink-weak:    #737373;

  /* chips */
  --chip-bg:  #F7EED9;
  --chip-ink: #6C5A3E;
}


header {
   position: relative;
  z-index: 999;
  top: 0;
  width: 100%;
  height: 130px;
  padding-bottom: 30px;       /* ← margin ではなく padding にする */
}

.headerTop {
margin-left: auto;
margin-right: auto;
overflow: hidden;
display: flex;
  justify-content: space-between;
  width: 80%;
}


header .contents img{
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp .75s ease both;
}

/* それぞれに順番で遅延をつける */
header .contents img:nth-of-type(1){ animation-delay: .15s; }
header .contents img:nth-of-type(2){ animation-delay: .30s; }
header .contents img:nth-of-type(3){ animation-delay: .45s; }
header .contents img:nth-of-type(4){ animation-delay: .60s; }
header .contents img:nth-of-type(5){ animation-delay: .75s; }

@keyframes fadeUp{
  0%{ opacity:0; transform: translateY(16px); }
  100%{ opacity:1; transform: translateY(0); }
}
/* アクセシビリティ */
.sr-only{position:absolute!important;left:-9999px!important;}

/* ヘッダーの土台は高さ可変に */
header{
  position: sticky; top: 0; /* 好み：固定したくなければ消してOK */
  height: auto;             /* 固定130px → 可変へ */
  padding: 10px 0 16px;     /* 下余白は軽め */
background-color: #f5f8e7;
}

.headerTop{
  width: min(1100px, 92%);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* PCデフォ（大きめ） */
.logo img{
  height: 90px;   /* ← お好みで 72〜90px */
  width: auto;
}


  /* ホバー（指で触れたとき） */
  .headerTop .contents.is-open a:active,
  .headerTop .contents.is-open a:hover{
    background: #EFFFF2;
    border-color: #B7E4C1;
    transform: translateY(-1px);
  }


/* さらに狭い端末 */

/* さらに狭い端末は1列に（重なり感ゼロに） */


/* ハンバーガー（PCでは非表示） */
.nav-toggle{
  display: none; /* SPのみ表示 */
  width: 44px; height: 44px;
  border-radius: 8px;
  border: 2px solid #9CCFB1;
  background: #fff;
  position: relative;
}
.nav-toggle span{
  position: absolute; left: 10px; right: 10px; height: 2px; background: #6AAE7F;
  transform-origin: center;
  transition: transform .25s ease, top .25s ease, opacity .2s ease;
}
.nav-toggle span:nth-child(1){ top: 14px; }
.nav-toggle span:nth-child(2){ top: 21px; }
.nav-toggle span:nth-child(3){ top: 28px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ top: 21px; transform: rotate(-45deg); }

/* PC：従来どおり横並び */
.headerTop .contents{
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
}

/* 画像のアニメはそのまま活かす */
header .contents img{ max-width: 100%; height: auto; }

/* ----------------------------
   スマホレイアウト（～900px）
-----------------------------*/

/* さらに狭い端末（～480px）は2列に */


/*メイン*/
main {
/* width:  1000px; */
margin-left: auto;
margin-right: auto;
text-align: center;
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
  font-style: normal;
  clear: both;
background-image: url(images/haikeizentai.png);
}

#haikei1 {background-image: url(images/backslide3-100.jpg);

background-size:auto 100%; /*背景画像のサイズ指定*/
height: auto;}

/* 固定幅→可変幅（今: #slider_back { width:1000px; } を上書き） */
#slider_back{
  position: relative;   /* ::before / ::after を自身基準に */
  width: min(1100px, 92%);
  margin: 0 auto;
  padding-top: 25px;    /* ← 帯の厚み分をここで確保（高さに含める） */
}
/* 背景（帯＋飾り）を “元サイズのまま” 背面に表示 */
#slider_back::before{
  content:"";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 1000px;         /* 画像の実サイズに合わせる */
  height: 500px;         /* 画像の実サイズに合わせる */
  /* background: url("images/slider_bg_1000x500.png") no-repeat center top;
  background-size: auto; ←縮尺変更しない（元サイズのまま） */
  z-index: 0;            /* 背面 */
  pointer-events: none;
}

/* スライダー本体を前面に（下げる役目は親の padding-top が担当） */
#slider_back .slider{
  position: relative;
  z-index: 1;
  top: 0;
}

#slider_back::after{
  content:"";
  position:absolute; inset:0;
  z-index:2;                 /* 画像より前、文字より後ろ */
  pointer-events:none;
  background: radial-gradient(circle at 50% 55%, rgba(0,0,0,.08), transparent 55%);
}

.hero-copy{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  margin: 0;
  text-align: center;
  line-height: 1.45;
  font-family: "Sawarabi Mincho", serif;  /* ← Mincho へ変更 */
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.06em;
  pointer-events: none;

  /* Minchoは影強すぎると汚く見えるので控えめ */
  text-shadow: 0 2px 8px rgba(0,0,0,.22);
      opacity: 0;
  transform: translate(-50%, 130%); /* 位置は少し下めから */
}

/* 2行 */
.hero-copy span{
  display: block;
  font-size: clamp(20px, 3.1vw, 38px);  /* Minchoは少し小さめのほうが上品 */
  white-space: nowrap; /* 各スパン内で途中改行させない */
}

/* 表示トリガーが付いたらふわっと */
.hero-copy.is-show{
  animation: heroFloatIn .9s ease-out .15s both; /* 0.15s遅延で上品に */
}

@keyframes heroFloatIn{
  0%{
    opacity: 0;
    transform: translate(-50%, 130%) scale(.995);
    filter: saturate(0.98);
  }
  60%{
    opacity: 1;
    transform: translate(-50%, 120%) scale(1.005);
  }
  100%{
    opacity: 1;
    transform: translate(-50%, 120%) scale(1);
    filter: none;
  }
}


/* スライダーの基準高さ（PCでは大きめ、SPは短め） */
.slider{
  --slider-h: clamp(320px, 62vh, 540px);
}

/* 既存の 450px 固定を上書きして可変に */
.slider .slick-slide{
  height: var(--slider-h) !important;
}

/* 画像は中身でフィット */
.slider img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 端末幅で高さを微調整 */


/* 矢印とドットのサイズ＆配置（スマホで邪魔にならない） */
.slider .slick-arrow{ z-index: 3 !important; }
.slider .slick-arrow:before{ font-size: 26px !important; }

/* ドットを少し大きく & 余白を確保（指でも押しやすい） */
.slider .slick-dots{
  bottom: 12px;
}
.slider .slick-dots li{ margin: 0 6px; }
.slider .slick-dots li button:before{
  font-size: 10px;
  opacity: .45;
}
.slider .slick-dots li.slick-active button:before{
  opacity: .95;
}

/* ========== ヒーローテキスト（重なり＆読みやすさ） ========== */

/* 影の濃さを少し上げて視認性UP */
.hero-copy{
  line-height: 1.45;
  text-shadow: 0 2px 10px rgba(0,0,0,.28);
}

/* モーションが苦手な人の環境ではアニメ無効＆即表示 */
@media (prefers-reduced-motion: reduce){
  .hero-copy{ opacity:1; transform: translate(-50%, -42%); animation:none!important; }
}
/* うすい帯（透明感を残す濃さに調整） */
.hero-copy::before{
  content: "";
  position: absolute;
  inset: 10px 10px;
  border-radius: 14px;
  background: rgba(0,0,0,.14);   /* Notoより薄め */
  filter: blur(25px);
  z-index: -1;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* ブラー対応ブラウザではさらに自然に */
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)){
  .hero-copy::before{
    background: rgba(0,0,0,.09);
    backdrop-filter: blur(2px) saturate(1.05);
    -webkit-backdrop-filter: blur(2px) saturate(1.05);
  }
}

/* PC表示微調整（胸〜顔の間くらいのベストポジ） */
@media (min-width: 960px){
  .hero-copy{ transform: translate(-50%, 120%); }
}

/* SP時はやや小さく */

.shikirisen1 {
  margin: auto;
  display: block;
  margin-top: 200px;
}

.shikirisen2{
  margin: auto;
  display: block;
  margin-bottom: 200px;
}

h1{
  font-size: 24px;
}

h2{
  font-size: 32px;
}

.taisetsutext h2 {
  position: relative;
  display: inline-block;
  padding: 0 40px; /* 文字と飾りの距離を確保（好みで調整OK） */
}

/* 左の飾り */
.taisetsutext h2::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  background: url("images/ohana1.png") no-repeat center/contain;
}

/* 右の飾り */
.taisetsutext h2::after {
  content: "";
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  background: url("images/ohana2.png") no-repeat center/contain;
}

/* スマホでは飾りを消す（窮屈防止） */
/* 光を敷くセクション */
.values{
  position: relative;
  isolation: isolate;
  /* ← ★ここでは padding を増やさない！元のままにする */
}

/* ふんわり中央に光 */
.values::before{
  content:"";
  position: absolute;
  inset: 0;             /* 余白は増やさない */
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 55%,
      rgba(255,243,205,.50) 0%,
      rgba(255,243,205,.30) 34%,
      rgba(255,243,205,.14) 58%,
      rgba(255,243,205,0) 100%
    );
  filter: saturate(1.04) contrast(1.02);
}

/* スマホ微調整（濃さだけ下げる） */


.taisetsutext {
  line-height: 2;
  margin-top: 120px;
  margin-bottom: 40px;
    opacity: 0;                     /* 初期は見えない */
  transform: translateY(20px);    /* ちょい下から */
  transition: all .8s ease-out;   /* ふわっと */
}
.taisetsutext.show {
  opacity: 1;
  transform: translateY(0);
}


.taisetsu {
  display: flex;
  gap: 65px;
  line-height: 2;
  margin-top: 16px;
  margin-bottom: 8px;

  /* ↓ ここだけ変更！ */
  max-width: 1100px;   /* 固定幅 → 上限幅に変更 */
  width: 92%;          /* %で可変 */
  margin-inline: auto; /* 左右中央寄せの最短記法 */
}

.taisetsupic {
  width: calc((100% - 40px) / 4);
  opacity: 0;
  transform: scale(1);      /* 小さくして非表示スタート */
  transition: opacity 0.6s ease;
}

.taisetsupic.show {
  opacity: 1;
 animation: bounceInScale 0.8s ease;
}


.taisetsu p {
    font-size: 14px;
  line-height: 20px;
}
.feature{
  border-radius: 16px;
  padding: 24px;
  border: 1.5px solid var(--accent);
  background: var(--bg);
}

.feature h3{ color: var(--head); }

/* 個別テーマ */
.feature--care     { --bg:#FFE8EE; --head:#C9466B; --accent:#FFB3C2; 
line-height: 1.5;}
.feature--nature   { --bg:#E6F5E8; --head:#2F8F68; --accent:#9ED8B3; }
.feature--nutrition{ --bg:#FFF4D6; --head:#B86B00; --accent:#FFD286; }
.feature--community{ --bg:#EAF2FF; --head:#315CA8; --accent:#AFC8FF; }


/* ===== layout ===== */
.news{
  max-width: 1100px;
  margin: 90px auto;
  display: grid;
  grid-template-columns: 160px 1fr; /* 左に縦見出し、右にカード群 */
  align-items: start;
  position: relative;
}

.news__side{
  position: sticky; top: 24px; /* スクロールしても見出しが残る */
  display: grid;
  justify-items: start;
  row-gap: 16px;
}

#newsjump {
  scroll-margin-top: 280px; /* ← ヘッダーの高さに合わせる */
}

.news__label{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ink-strong);
  margin-left: 30px;
}


.news__sub{
  transform: rotate(90deg);
  color: var(--ink-weak);
  font-size: 12px;
  letter-spacing: .25em;
  margin-left:80px;
}

/* 左上の「NEWS PAGE →」チップ */
.news__all{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.news__all:hover{ transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.08); }

/* ===== cards ===== */
.news__list{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.newsCard{
  position: relative;
    height: 100%;
}
/* もっと見るを右下に吸着 */
.news__moreWrap {
  grid-column: 4 / 5;      /* → 4列目に配置 */
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 5px;
}

/* ボタンデザイン（既存のまま流用OK） */
.news__moreBtn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: #F7EED9;
  color: #6C5A3E;
  text-decoration: none;
  font-weight: 700;
}
/* 左の余白に固定配置（位置は微調整OK） */
.mascot-img{
  position: absolute;
  left: -20px;       /* 右へ寄せるなら 0〜24px などに */
  bottom: -28px;    /* 花の罫線に触れない高さに調整 */
  width: 220px;     /* 画像の見え幅。好みで変更OK */
  pointer-events: none;
  user-select: none;
}

/* 画像はCSSだけで“とことこ＋ふわっと” */
.mascot-img img{
  display: block;
  width: 120px;
  animation:
    walkX 6s ease-in-out infinite alternate,
    bobY  2.4s ease-in-out infinite;
  transform-origin: 50% 90%;
  position: static;
}

/* 横に少しだけ往復 */
@keyframes walkX {
  0%   { transform: translateX(0); }
  100% { transform: translateX(36px); }
}

/* ほんのり上下ゆれ */
@keyframes bobY {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}

/* スマホでは非表示（必要なら消してOK） */

/* モーション苦手な方向け */
@media (prefers-reduced-motion: reduce){
  .mascot-img img{ animation: none !important; }
}

/* スマホ対応：1列になったら中央へ */

.newsCard::before,
.newsCard::after{
  content:"";
  position: absolute;
  left: 14px;
}
.newsCard::before{ /* 丸いピン */
  top: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
}
.newsCard::after{  /* 縦ライン */
  top: 10px; 
  width: 3px;
  border-radius: 3px;
}

/* クリック領域 */
.newsCard__link{
  display: flex;           /* ← block を flex に変更 */
  flex-direction: column;  /* ← 縦に並べる */
  height: 100%;            /* ← カードの高さを揃える */
  
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 14px;
  padding: 12px 12px; 
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.newsCard__link:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.1);
}

/* 画像：上辺だけ大きめRでやわらかく */
.newsCard__media{
  border-radius: 12px 12px 8px 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;       /* 比率を統一 */
  margin-bottom: 10px;
  flex-shrink: 0;
}
.newsCard__media img{ width:100%; height:100%; object-fit: cover; display:block; }

/* メタ＆タイトル */
.newsCard__meta{
  color: var(--ink-weak);
  font-size: 12px;
  margin: 4px 0 6px;
}
.newsCard__title{
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin: 0;
    margin-bottom: auto;
}

/* ===== responsive ===== */
.story{
  --bg:#FFFDF7;           /* 背景色：白に近い生成り */
  --ink:#45413d;          /* 文字色 */
  --muted:#7a736b;        /* 補助文字色 */
  --card:#ffffff;         /* 手紙カード背景 */
  --line:#f1ece4;         /* 枠線 */
  background: var(--bg);
  padding-block: clamp(56px, 8vw, 112px);
    opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s ease-out, transform .9s ease-out;
}

.story.show {
  opacity: 1;
  transform: translateY(0);
}

/* 中央寄せ幅 */
.story__inner{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  /* 画像 : 本文 = 0.9 : 1.2 に調整（画像やや小さめ／本文やや広め） */
  grid-template-columns: 0.9fr 1.2fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

/* 画像スタイル */
.story__media img{
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 3;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* タイポ */
.story__content{ text-align:center; }        /* ← 見出し系は中央揃えに */
.story__eyebrow{
  font-size: 14px;
  letter-spacing: .25em;
  color: var(--muted);
  margin: 0 0 12px;
  text-align: center;                         /* ← 中央 */
}
.story__title{
  font-size: 30px;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 20px;
  padding-bottom: 0;                          /* ← 下ライン用の余白を削除 */
  position: static;                           /* ← 下ラインを使わない */
}
/* タイトル下のラインは消す */
.story__title::after{ content: none; }

/* 手紙カード（本文は左揃えのまま可読性キープ） */
.story__letter{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(16px, 2.6vw, 28px);
  box-shadow: 0 2px 0 rgba(0,0,0,.03);
  line-height: 1.7;        /* 行間やや詰め（好みで 1.65〜1.75） */
  color: var(--ink);
  text-align: left;        /* ← 本文は左揃え */
}
.story__letter p{ margin: 0 0 12px; }
.story__letter p:last-child{ margin-bottom: 0; }
.story__sign{
  text-align: right;
  color: var(--muted);
  margin-top: 10px;
  font-weight: 600;
}

/* 反転レイアウト（PC） */
.story--reverse .story__inner{
  grid-template-columns: 1.2fr 0.9fr;  /* ← 反転時も比率を反転 */
}
.story--reverse .story__media{ order: 2; }
.story--reverse .story__content{ order: 1; }

/* レスポンシブ：縦並びへ */

.ichinichi{
  margin: auto;
}

#ichinichijump {
  scroll-margin-top: 180px; /* ← ヘッダーの高さに合わせる */
}

.nyuji, .youji{
  display: flex;
  align-items: center;
  gap: 8px;

  /* 追加 ↓ */
  justify-content: center;   /* 中央に寄せる本命 */
}

.subtitle {margin-bottom: 48px;}
.nyuji img, .youji img{
  height: 46px;
  width: auto;
  /* 任意：ほんの少しだけ下げたい時 */
  /* transform: translateY(1px); */
}

.ichinichititle {  margin-top: 60px;
  margin-bottom: 100px; }

/* 2カラム */
#ichinichi_box{
  display: flex;
  gap: 160px;
  width: 90%;
  margin: 0 auto;
  align-items: flex-start;
  flex-wrap: wrap;
}

.ichinichi_box2{
  flex: 1 1 420px;
  text-align: left;
}

#ichinichi_box .ichinichi_box2{
  opacity: 0;
  transform: scale(.88);
}
/* 左→右の順に遅延 */
#ichinichi_box .ichinichi_box2:nth-of-type(1){ --d: 0ms; }
#ichinichi_box .ichinichi_box2:nth-of-type(2){ --d: 220ms; }

/* 控えめバウンス（オーバーシュート小さめ） */
@keyframes boing{
  0%   { opacity:0; transform: scale(.995); }
  60%  { opacity:1; transform: scale(1.03); }
  80%  { transform: scale(.99); }
  100% { transform: scale(.995); }
}

/* 見えたら：終点をクラスで固定しておく（←ココ大事） */
#ichinichi_box .ichinichi_box2.reveal{
  opacity: 1;
  transform: scale(1);
  animation: boing .75s ease-out both var(--d, 0ms);
}

/* 見出しだけ中央寄せ（子セレクタで） */
.ichinichi_box2 > h2,
.ichinichi_box2 > p:first-of-type {
  text-align: center;
}


/* 時計＋テキストのスケジュールカード */
.touen {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 30px auto 40px auto;                     /* スケジュール同士の間隔 */
  padding: 18px 20px;                 /* 内側余白 */
  background: #f3f9f4;                /* 優しい淡いグリーン背景 */
  border: 1px solid #d8e5da;          /* 薄いグリーンの枠線 */
  border-radius: 12px;                /* 丸みをつけて柔らかい印象 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* ふんわり影 */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ホバー時にふんわり浮く */
.touen:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* 時計画像 */
.tokei {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

/* 時間とタイトル */
.touen-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.zikan {
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-weight: bold;
  color: #2d4a34;                     /* 深めグリーンで強調 */
}

/* 説明テキスト */
.hidariyose {
  text-align: left;
  margin: 20px 0 40px;                /* 下マージン広めでゆったり */
  padding: 0;
  color: #333;
  line-height: 1.6;
}

.img-300-round {
  width: 300px;        /* 横幅だけ指定 */
  max-width: 100%;     /* 親より大きくならないよう保険 */
  height: auto;        /* 縦は自動で比率維持 */
  border-radius: 16px; /* 角丸。8〜24pxで好みに調整 */
  display: block;      /* 余白調整しやすく */
  box-shadow: 0 8px 16px rgba(0,0,0,.08); /* お好み（影） */
  margin: 30px auto;
}


.img-300-round2 {
  width: 300px;        /* 横幅だけ指定 */
  max-width: 100%;     /* 親より大きくならないよう保険 */
  height: auto;        /* 縦は自動で比率維持 */
  border-radius: 16px; /* 角丸。8〜24pxで好みに調整 */
  display: block;      /* 余白調整しやすく */
  box-shadow: 0 8px 16px rgba(0,0,0,.08); /* お好み（影） */
  margin: auto;
}

.photo-stack{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;        /* ← 間隔はここで一発管理 */
}

.photo-stack img{ margin: 0; }  /* 各画像の既存marginは打ち消す */


/* 一日の流れセクション：ローカル色トークンを再定義 */
.ichinichi{
  /* 一日専用の配色（:rootが変わってもここは守る） */
  --sun-cream-0: #FBF4DF;
  --sun-cream-1: #F3E6BF;
  --accent-honey: #E7B574;

  --leaf-0: #EAF7E6;
  --leaf-1: #D7EED2;
  --accent-leaf: #7BBE7C;

  --sun-dapple: rgba(255, 238, 170, .18);
}

/* 共通：ふわっと面を作る。角丸は控えめ、影も最小限 */
#ichinichi_box .ichinichi_box2{
  position: relative;
  padding: 48px 36px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0,0,0,.05); /* ← 影を少し淡く */
  border: 1px solid rgba(0,0,0,.03);      /* ← 線もほんのり */

  /* ライン色の既定を currentColor にしておく（後で上書き可） */
  --line-color: currentColor;
}

/* 乳児（左） */
#ichinichi_box .ichinichi_box2:nth-of-type(1){
  /* 変数が万一未定義でも安全に見えるようフォールバック付きに */
  background:
    radial-gradient(600px 280px at 18% 0%, var(--sun-dapple, rgba(255,238,170,.18)) 0%, transparent 60%),
    radial-gradient(420px 220px at 85% 10%, rgba(255,255,255,.35) 0%, transparent 70%),
    linear-gradient(180deg, var(--sun-cream-0, #FBF4DF) 0%, var(--sun-cream-1, #F3E6BF) 100%);
  color: var(--accent-honey);       /* ← これがライン色のベースになる */
  --line-color: var(--accent-honey);/* ← 明示的にライン色にも割り当て */
}

/* 幼児（右） */
#ichinichi_box .ichinichi_box2:nth-of-type(2){
  background:
    radial-gradient(600px 280px at 82% 2%, rgba(255,255,255,.4) 0%, transparent 65%),
    radial-gradient(520px 260px at 10% 12%, rgba(224,246,214,.28) 0%, transparent 60%),
    linear-gradient(180deg, var(--leaf-0, #EAF7E6) 0%, var(--leaf-1, #D7EED2) 100%);
  color: var(--accent-leaf);
  --line-color: var(--accent-leaf);
}

/* アクセントライン：端フェード */
#ichinichi_box .ichinichi_box2::before{
  content:"";
  position:absolute; left:0; top:0; right:0; height:8px;
  background: linear-gradient(90deg, transparent 0%,
                              var(--line-color) 12%, var(--line-color) 88%,
                              transparent 100%);
  opacity:.95;
}

/* 乳児=はちみつ色、幼児=若葉色 */
#ichinichi_box .ichinichi_box2:nth-of-type(1){ color: var(--accent-honey); }
#ichinichi_box .ichinichi_box2:nth-of-type(2){ color: var(--accent-leaf); }


/* 乳児の一日 見出しの文字色を少し濃くする */
.ichinichi_box2:nth-of-type(1) .nyuji {
  color: #6C5A3E; /* ほんのりミルクブラウン（柔らかいのに見やすい） */
}

/* (0・1・2歳児) の説明文字も揃える */
.ichinichi_box2:nth-of-type(1) > p:first-of-type {
  color: #6C5A3E;
}

.more-about {
  text-align: center;
  padding: 80px 0;
}

/* 画像：登場前 */
.more-about-img{
  margin: auto;
  margin-top: 60px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s ease;
}

/* タイトル：登場前（←クラスを __ に統一） */
.more-about__title {
  font-size: 32px;
  margin-bottom: 60px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s ease;
}

/* 表示時（両方とも .show で上書き） */
.more-about__title.show,
.more-about-img.show {
  opacity: 1;
  transform: translateY(0);
}

.about-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 100px;
  flex-wrap: wrap;
}

.fade-item {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease, transform .8s ease;
}

.fade-item.show {
  opacity: 1;
  transform: translateY(0);
}

/* ぽん・ぽん・ぽん の遅延 */
.fade-item:nth-child(1) {
  transition-delay: .0s;
}
.fade-item:nth-child(2) {
  transition-delay: .15s;
}
.fade-item:nth-child(3) {
  transition-delay: .30s;
}

.ennokoto{
  font-size: 28px;
}


.about-list li a {
  display: block;
  width: 280px;
  text-decoration: none;
  color: #333;
  text-align: center;
  transition: transform .35s ease;
  outline: none;
  border: none;
  box-shadow: none;
}

.about-list li a img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .35s ease, filter .35s ease;
  border: none;
  box-shadow: none;
}

.about-list li a:hover {
  transform: translateY(-10px);
}

.about-list li a:hover img {
  transform: scale(1.04);
  filter: brightness(1.04);       /* 枠ではなく光の演出 */
}

.about-list li a:focus,
.about-list li a:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}


/* ===== セクション本体 ===== */
.contact-banner{
  position: relative;
  padding: clamp(24px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 32px);
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);}

/* カード化：幅を絞って中央に。下に少しだけ余白 */
.contact-banner.is-contained{
  width: min(1100px, 92%);
  /* 上  中央  下 */
  margin: clamp(80px, 5vw, 98px) auto 80px;  /* ← 下を 20px に */
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}


/* モバイルは自然に広めに見せる（ほぼ全幅） */

/* 小ドットのパステル緑背景（目立つけど上品） */
.contact-banner.is-green-dots{
  background:
    radial-gradient(circle at 0 0,      var(--dot-2) 2px, transparent 3px) 0 0/22px 22px,
    radial-gradient(circle at 11px 11px,var(--dot-1) 2px, transparent 3px) 0 0/22px 22px,
    var(--banner-bg);
}

/* ===== テキストブロック（中央寄せ） ===== */
.contact-banner__inner{
  display: grid;
  justify-items: center;      /* コンテンツ位置を中央に */
  text-align: center;         /* テキスト中央寄せ（PC/スマホ共通） */
  gap: 8px;
  max-width: 760px;
  margin-inline: auto;
}

.contact-banner__title{
  margin: 0;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  letter-spacing: .02em;
}

.contact-banner__text{
  margin: 0;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.7;
  color: var(--muted);
}

/* ===== ボタン ===== */
.contact-banner__btn{
  display: inline-block;
  background: var(--accent-strong); /* ← ここ変更 */
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  padding: 14px 28px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,.08); /* ← 影を少し柔らかく */
  transform: translateZ(0);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.contact-banner__btn:hover{
  background: var(--accent-d); /* ← キレ良い */
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10); /* ← ふわっと */
}

.contact-banner__btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.9),
    0 0 0 6px rgba(90, 191, 131, 0.55); /* ← color-mix の代わり */
}


/* ===== レスポンシブ ===== */

/* 動きを苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .contact-banner__btn{ transition: none; }
}
/* バナー直下のイラスト：右寄せ・縦に2つ */
.banner-illust{
  text-align: center;
  /* margin-top: 16px;          バナーとの距離 少なめ */
  display: flex;
  flex-direction: column;    /* 縦に2つ */
  align-items: center;       /* ← 中央寄せ */
  gap: 6px;
}

.banner-illust img{
  display: block;
  height: auto;
}

/* 合計 ≒ 200px になるように配分（必要に応じて微調整OK） */
.banner-illust .fukidashi{ max-height: 105px; }
.banner-illust .kids{      max-height: 105px; }

/* スマホは中央寄せに戻すと可愛い */

/* 初期状態 */
.fadePop {
  opacity: 0;
  transform: translateY(24px) scale(.92);
  transition: .8s cubic-bezier(.25, .9, .35, 1.4);
}

/* 表示時 */
.fadePop.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}


/* ---- Footer base ---- */
.site-footer{
  background: var(--mint);
  color: var(--ink);
  margin-top: 0;
  position: relative;
  overflow: hidden;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  box-shadow: 0 -8px 24px rgba(0,0,0,.06);
  color: #4A3A32;   /* 落ち着いた茶色 */
}

/* テキストリンク（ボタン以外）だけ色を整える */
.site-footer a:not(.btn){
  color: #416b25;   /* 既存の青系に合わせる */
}

/* 著作・規約リンクの薄さはそのままに */
.site-footer .footer-bottom .legal a{
  color: #4A3A32;
  opacity: .8;
}

/* 上飾り（横リピートの花罫線画像を置いてね） */
.footer-deco{
  height: 32px;
  background:
    #F7FFE8 url("images/footerline.png") repeat-x center;
  background-size: auto 32px;
}


.btn{
  display:inline-block; padding:10px 18px; border-radius:999px;
  font-weight:700; text-decoration:none; transition:.15s;
}
.btn-primary{ background: var(--blue); color:#fff; }
.btn-primary:hover{ filter: brightness(1.05); }
.btn-outline{
  border:2px solid var(--blue); color: var(--blue); background:#fff;
}
.btn-outline:hover{ background: #EEF4FF; }

/* 3カラム */
.footer-inner{
  width: var(--container);
  margin: 16px auto 8px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap: 24px;
  padding: 8px 12px 0;
}
.footer-col h3{
  font-size: 18px; margin: 6px 0 8px; font-weight: 800;
}

/* 地図カード */
.footer-map{
  margin-top: 12px;
  background: #ffffff;
  padding: 4px 6px;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  border: 1px solid #dfeee6;
}

.footer-map iframe{
  display: block;
  width: 100%;
  height: 260px;              /* PCの見やすい高さ */
  border: 0;
  border-radius: 10px;
}

/* ボタン */
.map-actions{
  text-align: right;
  margin-top: 6px;
}
.map-btn{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: #F7EED9;
  color: #6C5A3E;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.04);
}
.map-btn:hover{ filter: brightness(1.03); }


/* ① 園紹介 */
.footer-logo img{ height: 65px; margin: auto;}
.footer-copy{ line-height: 1.8; margin: 8px 0 10px; }
.footer-sns{ list-style: none; display:flex; gap:14px; padding:0; margin:0; }
.footer-sns a{ color: var(--green); text-decoration: none; }
.footer-sns a:hover{ text-decoration: underline; }

/* ② リンク */
.footer-links{ list-style: none; padding:0; margin:0; }
.footer-links li{ margin: 6px 0; position: relative; padding-left: 18px; }
.footer-links li::before{
  content:""; position:absolute; left:0; top:.45em;
  width:12px; height:12px;
  background: url("images/footerline.png") center/contain no-repeat;
  opacity:.9;
}
.footer-links a{ color: var(--blue); text-decoration:none; }
.footer-links a:hover{ text-decoration:underline; }

/* ③ 連絡先 */
.footer-address{ font-style: normal; line-height:1.8; }
.footer-hours{ display:grid; grid-template-columns: 60px 1fr; gap:4px 10px; margin:6px 0; }


/* ボトムバー */
.footer-bottom{
  width: var(--container);
  margin: 8px auto 0;
  display:flex; align-items:center; gap:12px; justify-content: space-between;
  padding: 10px 4px 18px;
  border-top: 1px dashed #CFE8D3;
}
.footer-bottom .legal{ list-style:none; padding:0; margin:0; display:flex; gap:16px; }
.footer-bottom .legal a{ color: var(--ink); text-decoration:none; opacity:.8; }
.footer-bottom .legal a:hover{ text-decoration:underline; opacity:1; }
.to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffffff 0%, #f3fff7 100%);
  border: 2px solid #9CCFB1;
  color: #6AAE7F;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease, box-shadow .2s ease, background .3s ease;
}

/* 🌼 ここがお花（❁）がちょこん */
.to-top::before {
  content: '❁';
  position: absolute;
  top: -6px;
  right: -4px;
  font-size: 18px;
  color: #DFA8B9; /* 木漏れ日ピンク */
  opacity: .95;
}

/* 表示状態 */
.to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* hover ふんわり影 */
.to-top:hover {
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
  background: linear-gradient(135deg, #ffffff 0%, #ebfff3 100%);
}

/* レスポンシブ */

.story-pink {
  position: relative;
  isolation: isolate;
}

.story-pink::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    #fce3e8 0%,   /* ← ほんのり桃ピンク */
    #fff 100%     /* 下に向かって自然に溶ける */
  );
  pointer-events: none;
}

/* =========================
   木漏れ日（超ライト・汎用）
========================= */
.komorebi{
  position: relative;
  background: linear-gradient(#fffef9 0%, #faf6ec 100%);
  isolation: isolate;
}
.komorebi::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(60rem 28rem at 12% 18%, rgba(255,250,220,.32) 0%, transparent 60%),
    radial-gradient(38rem 22rem at 82% 10%, rgba(255,248,240,.26) 0%, transparent 65%),
    radial-gradient(42rem 24rem at 40% 80%, rgba(255,255,240,.22) 0%, transparent 60%);
  opacity:.38;        /* ← 濃さはここ */
  transition: opacity .3s ease;
}

/* 濃さプリセット */
.komorebi.is-soft::before { opacity:.18; }
.komorebi.is-mid::before  { opacity:.38; }
.komorebi.is-strong::before{ opacity:.52; }

/* ============================
   values > 大切にしていること（SP化の幅を広げる）
   ※ いちばん最後に追記
============================ */

/* さらに狭い端末は幅を少しだけ絞る（視線が中央に集まる） */

/* =========================================
   一日のスケジュール：モバイル最適化
   PCは既存のまま／～900pxで切替
========================================= */

/* さらに小さい端末での微調整 */

/* モバイル：スライダー下の余白を詰めて、お花ラインを下端に */

/* === セクション背景で流れをつくる === */


/* 一日の流れ → あったかいミルクティー */
.ichinichi {
  background: #FFF9EF; /* 淡いクリームベージュ */
  border-radius: 12px;
}

/* 園のこと → 既存の雰囲気に“木漏れ日”を追加 */
.more-about {
  position: relative;
  isolation: isolate;
background-image: url(images/morehaikei2.png);
  padding-top: 80px;
  padding-bottom: 120px;
}

.more-about::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(60rem 28rem at 12% 18%, rgba(255,250,220,.35) 0%, transparent 60%),
    radial-gradient(50rem 24rem at 82% 32%, rgba(200,255,220,.25) 0%, transparent 65%);
  opacity: .45; /* ← 濃すぎたら .25 くらいへ */
}

/* 背景だけ全幅に広げる共通ヘルパー */
.section-band{
  position: relative;
  isolation: isolate;
  margin: 0;               /* 余白は padding で */
}
.section-band::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;   /* 画面端まで伸ばす */
  background: var(--band-bg, #fff);
  box-shadow: 0 0 0 100vmax var(--band-bg, #fff);
  clip-path: inset(-100vmax);              /* 影のはみ出し防止 */
}

.ichinichi.section-band{
  --band-bg:
    radial-gradient(60rem 28rem at 12% 18%, rgba(255,250,220,.35) 0%, transparent 60%),
    radial-gradient(42rem 24rem at 78% 20%, rgba(200,255,220,.20) 0%, transparent 65%),
    #FFF9EF;
}
.more-about.section-band{
  --band-bg:
    radial-gradient(60rem 28rem at 12% 18%, rgba(255,250,220,.35) 0%, transparent 60%),
    radial-gradient(50rem 24rem at 82% 32%, rgba(200,255,220,.25) 0%, transparent 65%),
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(0,0,0,.02) 6px 7px),
    #F7FFF5;
  background-blend-mode: normal, normal, multiply, normal;
}

/* スマホの上下余白は少し詰める（任意） */

/* 一日のスケジュール：やわらかピンク帯（全幅バンド） */
.section--ichinichi-pink {
  /* まずは安全な単色でフォールバック */
  background: #FFF7F2;

  /* なめらかグラデ（縦） */
  background: linear-gradient(
    to bottom,
    #FFF7F2 0%,
    #FFF1EB 48%,
    #FFEDE6 100%
  );

  /* ふわっと感：ごく薄い“空気感”を足す（任意） */
  background-blend-mode: normal;

  /* セクションの上下余白（お好みで微調整） */
  padding: 100px 0 120px;
  border-radius: 12px; /* 中央カード感を少しだけ */
}

/* 下の“園のこと”との切り替えを上品に（任意） */
.section--ichinichi-pink + .more-about {
  margin-top: 0;
}

.section--ichinichi-pink{
  background-image:
    linear-gradient(to bottom, #FFF7F2 0%, #FFF1EB 48%, #FFEDE6 100%),
    url("images/noise-pink-4x4.png");
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
  background-position: center, top left;
}

.section--ichinichi-pink{
  /* 2本のグラデを重ねるテク */
  background-image:
    linear-gradient(to bottom, rgba(255,247,242,1) 0%, rgba(255,247,242,0.94) 6%, rgba(255,241,235,1) 50%, rgba(255,237,230,0.96) 94%, rgba(255,237,230,1) 100%),
    url("images/noise-pink-4x4.png");
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
}

/* ====== 「園の想い」：木のやわらか背景 ====== */
.story--wood{
  position: relative;
  isolation: isolate;         /* オーバーレイのにじみを閉じ込める */
  overflow: hidden;           /* 角丸や影があればはみ出し防止（任意） */
  background: none;           /* 既存のkomorebi背景をリセット */
}

/* 木テクスチャ（ぼかし＋明るめ＋低不透明） */
.story--wood::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background-image: url("images/wood-soft.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* 木目の主張をやわらげる */
  filter: blur(0.4px) saturate(.95) brightness(1.03);
  opacity: .48;                 /* ← 木目の強さ（.28〜.45の間で微調整） */
}

/* クリーム色の“和紙フィルム”を重ねて、より柔らかく */
.story--wood::after{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  /* 上:ほんのりピンククリーム → 下:ペールミント。超淡色 */
  background:
    linear-gradient(
      180deg,
      rgba(255,248,238,.72) 0%,
      rgba(253,252,246,.65) 40%,
      rgba(244,255,242,.65) 100%
    );
  mix-blend-mode: soft-light;   /* 木目と優しくなじませる */
  pointer-events:none;
}

/* 本文カードは読みやすさ最優先で従来どおり */
.story__letter{
  background: #ffffff;
  border: 1px solid #eee6d8;   /* ほんのりクリームの縁 */
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* モバイルは木目さらに弱め（情報量削減） */
/* ===== Ichinichi 最終調整（レイアウトと背景を分離）================ */

/* 1) レイアウト（幅・余白・角丸）だけ残して、背景はリセット */
.ichinichi{
  padding: 120px 0 120px !important;
  border-radius: 12px;
  position: relative;
  isolation: isolate;
background-image: url(images/haikeiichinichi5.png);
}


/* 5) スマホの余白だけ軽く */

/* 揺れの支点を下辺寄りに（しっぽが付いてる想定） */
.fukidashi { 
  transform-origin: 50% 90%;
  will-change: transform;
}

/* 表示されたら揺れアニメを開始（fadePopの上に重ねるだけ） */
.fukidashi.fadePop.show {
  /* 既存のフェードイン後の状態と同じ値を起点にする */
  transform: translateY(0) scale(1);
  animation: wobbleFloat 4s ease-in-out .2s infinite;
}

/* ずっと小さくゆらゆら */
@keyframes wobbleFloat {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  20%      { transform: translateY(-1.5px) scale(1.005) rotate(1.2deg); }
  50%      { transform: translateY(0.5px)  scale(0.998) rotate(-1.0deg); }
  80%      { transform: translateY(-1px)   scale(1.003) rotate(0.8deg); }
}

/* モバイルは振れ幅を少しだけ控えめに */

/* 動きが苦手な人向けの配慮（OS設定に追従） */
@media (prefers-reduced-motion: reduce){
  .fukidashi.fadePop.show { animation: none; }
}

/* =====================================================
   スマホ表示の調整（②③④⑤）
===================================================== */