/* OASIS TERRACE 案4（チラシ準拠・強め）：公開サイト共通（index.php ほか子ページ）で style.css の上に重ねる差分レイヤー。
   比較案のスタイルを土台に、チラシ6種（オープン告知・コーヒーチケット・貸切プラン・OASISチケット・求人）の
   構成そのものをページに持ち込む。
   - ヒーロー：中央ロゴ → ピンクのリボン → 白フチの太い見出し → 木の日付板 → 写真（チラシ上段の縦組み）
   - オープン案内：白パネル2枚（ブルー／ピンクの丸見出し・営業時間・チェックリスト）
   - コーヒーチケット：クリーム地の二重枠パネル・大きな価格
   - 貸し切りプラン：白フチ見出し・木の板・シーン4枚（ピンクのリボン）・ハイビスカスの箇条書き
   - 子ども食堂：OASISチケットチラシの黄緑トーン
   - お問い合わせ：公式LINEの緑ブロック
   前半は比較案から引き継いだ共通スタイル。案4固有の指定はファイル末尾の「案4」ブロックにまとめる。 */
:root {
  --hw-sky: #C9E7F7;
  --hw-sky-light: #EAF5FB;
  --hw-ocean: #1A73AE;      /* 白文字との比率 5.1:1（ボタン・バッジの地色に使える） */
  --hw-ocean-dk: #145F94;   /* 白文字との比率 6.3:1 */
  --hw-lagoon: #3AA7C7;     /* 飾り専用（白文字は載せない） */
  --hw-lagoon-text: #1F7F9B;/* 白文字との比率 4.6:1。ラグーン色の丸バッジ用 */
  --hw-pink: #D22A6A;       /* 白文字との比率 4.9:1 */
  --hw-pink-dk: #C7255F;    /* 白文字との比率 5.5:1 */
  --hw-pink-deco: #E63C7C;  /* 飾り（ハイビスカス）専用の明るいピンク */
  --hw-coral: #E4553C;
  --hw-sun: #F7C842;
  --hw-palm: #35793F;       /* 白文字との比率 5.3:1 */
  --hw-palm-deco: #3E8B49;  /* 飾り（葉）専用の明るい緑 */
  --hw-palm-dk: #2E6D39;    /* 白文字との比率 6.0:1 */
  --hw-wood: #8A5A2B;
  --hw-wood-dk: #4A2E12;
  --hw-sand: #F7EBD4;
  --hw-cream: #FDF8EC;
  --hw-paper: #FBF4E4;
  --hw-shadow: 0 10px 28px rgba(20, 95, 148, .12);
  /* 木看板の質感（グラデーションのみで表現） */
  --hw-wood-grain:
    repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 3px, rgba(0,0,0,.05) 3px 6px),
    linear-gradient(180deg, #A46A34 0%, #8A5527 55%, #7A4820 100%);
  /* 差分レイヤーで使う本来の変数も上書き（style.css の部品が自然に馴染むように） */
  --color-bg: var(--hw-paper);
  --color-bg-alt: var(--hw-sand);
  --color-cream: #F4E6C8;
  --color-line: #E7D9BF;
  --color-teal: var(--hw-ocean);
  --color-teal-dk: var(--hw-ocean-dk);
  --color-news: var(--hw-ocean-dk);
  --color-green: var(--hw-palm);
  --color-green-dk: var(--hw-palm-dk);
  --color-terracotta: var(--hw-pink-dk);
}

/* ---------- 文字 ---------- */
h1, h2, .menu-card h3, .four-grid h3, .recruit-banner strong {
  font-family: var(--font-base);
  font-weight: 900;
}
h2 {
  color: var(--hw-wood-dk);
  letter-spacing: .04em;
  line-height: 1.5;
}
.ac-green { color: var(--hw-palm-dk); }
.ac-teal { color: var(--hw-ocean-dk); }
.ac-terra { color: var(--hw-pink-dk); }
/* セクション冒頭の筆記体ラベル（チラシの "Fill Your Day with Aloha" の位置づけ） */
.hawaii-label {
  display: block;
  margin-bottom: 6px;
  color: var(--hw-ocean);
  font-family: "Pacifico", cursive;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: .02em;
}
.hawaii-label::before {
  content: "✦ ";
  color: var(--hw-sun);
  font-family: var(--font-base);
  font-size: .8em;
}
/* ACCESS のラベルは地図の上に食い込ませる（style.css と同値だが、上の margin-bottom より後ろに置く必要がある） */
.hawaii-label.section-label { margin-bottom: 0; }
/* ピンクのリボン（帯）。チラシの「プレオープン期間限定」「おすすめメニュー」に相当 */
.ribbon {
  display: inline-block;
  padding: 6px 26px;
  border-radius: 999px;
  background: var(--hw-pink);
  color: #fff;
  font-weight: 900;
  font-size: .92rem;
  letter-spacing: .12em;
  line-height: 1.6;
  box-shadow: 0 4px 0 var(--hw-pink-dk), 0 8px 18px rgba(230,60,124,.25);
}
.ribbon.ocean {
  background: var(--hw-ocean);
  box-shadow: 0 4px 0 var(--hw-ocean-dk), 0 8px 18px rgba(29,134,196,.25);
}
.ribbon.palm {
  background: var(--hw-palm);
  box-shadow: 0 4px 0 var(--hw-palm-dk), 0 8px 18px rgba(62,139,73,.25);
}
/* 木の看板。英字のモットーを載せる小さな板 */
.wood-sign {
  display: inline-block;
  padding: 10px 18px;
  border: 2px solid #5E3B18;
  border-radius: 8px;
  background: var(--hw-wood-grain);
  color: #FFF6E6;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .18em;
  line-height: 1.7;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  box-shadow: 0 6px 14px rgba(74,46,18,.35), inset 0 0 0 1px rgba(255,255,255,.12);
  transform: rotate(-4deg);
}
.wood-sign::before, .wood-sign::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3A2410;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.wood-sign { position: relative; }
.wood-sign::before { left: 6px; }
.wood-sign::after { right: 6px; }

/* ---------- 飾り（SVGシンボル） ---------- */
.deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.deco-hibiscus { color: var(--hw-pink-deco); }
.deco-monstera { color: var(--hw-palm-deco); }
.deco-palm { color: var(--hw-palm-dk); }
.deco-sparkle { color: var(--hw-sun); }
.hibiscus {
  width: 34px;
  height: 34px;
  color: var(--hw-pink-deco);
}

/* ---------- ヘッダー ---------- */
.site-header {
  border-bottom: 0;
  background: rgba(251,244,228,.96);
  box-shadow: 0 2px 12px rgba(20,95,148,.08);
}
.brand > span { display: grid; line-height: 1.15; }
.brand b, .brand em { color: var(--hw-ocean-dk); font-weight: 900; }
.brand small {
  display: block;
  color: var(--hw-wood);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.brand .brand-line { display: block; white-space: nowrap; }
.global-nav a { font-weight: 700; }
.global-nav a.is-current {
  color: var(--hw-ocean-dk);
  text-decoration-color: var(--hw-pink);
}
.global-nav .nav-contact,
.global-nav .nav-contact.is-current {
  background: var(--hw-pink);
  color: #fff;
  text-decoration: none;
}
.global-nav .nav-contact:hover { background: var(--hw-pink-dk); }
.preparation-bar { background: var(--hw-pink-dk); }
/* ヘッダーはスクロール開始で一旦上へ隠れ、少し進んだら上から滑り出す（js/main.js の is-peek / is-hidden） */
.site-header { transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .3s; will-change: transform; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-peek { transform: translateY(0); box-shadow: 0 6px 18px rgba(20,95,148,.14); }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }

/* ---------- ボタン ---------- */
.button:not(.outline),
.tel-button {
  border-color: var(--hw-pink);
  background: var(--hw-pink);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 0 var(--hw-pink-dk);
}
.button:not(.outline):hover,
.tel-button:hover {
  border-color: var(--hw-pink-dk);
  background: var(--hw-pink-dk);
  color: #fff;
}
.button.outline {
  border: 2px solid var(--hw-ocean);
  background: #fff;
  color: var(--hw-ocean-dk);
  font-weight: 700;
}
.button.outline:hover {
  background: var(--hw-ocean);
  color: #fff;
}
.button.ocean {
  border-color: var(--hw-ocean);
  background: var(--hw-ocean);
  box-shadow: 0 4px 0 var(--hw-ocean-dk);
}
.button.ocean:hover {
  border-color: var(--hw-ocean-dk);
  background: var(--hw-ocean-dk);
}

/* ---------- ヒーロー ---------- */
.hero {
  min-height: 0;
  padding: 56px 0 70px;
  background:
    radial-gradient(circle at 82% 12%, rgba(247,200,66,.55) 0, rgba(247,200,66,0) 22%),
    linear-gradient(180deg, #BFE1F5 0%, #DDEFF9 42%, #F4EEDD 82%, var(--hw-paper) 100%);
}
.hero::after { display: none; }
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 34px;
  align-items: center;
}
.hero-copy { padding-top: 0; }
.hero-copy > p.hero-script {
  margin: 0 0 6px;
  color: var(--hw-ocean);
  font-family: "Pacifico", cursive;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  line-height: 1.3;
}
.hero h1 {
  color: var(--hw-wood-dk);
  font-weight: 900;
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  letter-spacing: .06em;
  line-height: 1.35;
  text-shadow: 0 2px 0 #fff, 0 0 14px rgba(255,255,255,.9);
}
.hero h1 em { color: var(--hw-ocean-dk); font-style: normal; }
.hero-word {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 14px 0 6px;
  font-family: var(--font-base);
  font-weight: 900;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  letter-spacing: .06em;
}
.hero-word b, .hero-word em { color: var(--hw-ocean-dk); font-style: normal; }
.hero-word small {
  color: var(--hw-wood);
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.hero-copy > p:not(.hero-word):not(.hero-script) {
  font-family: var(--font-base);
  font-size: .95rem;
  font-weight: 500;
}
.hero-badge { margin: 12px 0 0; }
.hero-badge .ribbon { font-size: .86rem; }
.hero .button-row { margin-top: 24px; }
.hero-photo {
  position: relative;
  margin: 0;
}
.hero-photo picture, .hero-photo img {
  display: block;
  width: 100%;
}
.hero-photo img {
  aspect-ratio: 1.6;
  object-fit: cover;
  object-position: 55% center;
  border: 8px solid #fff;
  border-radius: 26px;
  box-shadow: var(--hw-shadow), 0 0 0 1px rgba(138,90,43,.12);
  transform: rotate(2deg);
}
.hero-photo .wood-sign {
  position: absolute;
  top: -18px;
  left: -10px;
  z-index: 2;
  transform: rotate(-6deg);
}
.hero-photo .deco-hibiscus {
  right: -22px;
  bottom: -26px;
  width: 96px;
  height: 96px;
  z-index: 2;
  transform: rotate(-12deg);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.18));
}
/* 四隅の植物。パームは根元を上の角に置き、葉先が中へ垂れる向きに回す */
.hero .deco-palm { width: min(30vw, 300px); height: min(30vw, 300px); opacity: .85; }
.hero .palm-l { top: -70px; left: -120px; transform: rotate(96deg); }
.hero .palm-r { top: -70px; right: -120px; transform: scaleX(-1) rotate(96deg); }
.hero .deco-monstera { width: min(24vw, 220px); height: min(24vw, 220px); }
.hero .monstera-l { right: -20px; bottom: 6px; transform: rotate(-28deg); opacity: .9; }
.hero .deco-sparkle { width: 26px; height: 26px; }
.hero .sparkle-1 { top: 18%; left: 44%; }
.hero .sparkle-2 { top: 66%; left: 40%; width: 18px; height: 18px; }
.hero .sparkle-3 { top: 12%; right: 30%; width: 20px; height: 20px; }

/* ---------- 波の区切り（基本は style.css。ここではフッター前の波の色だけ） ---------- */
.wave-footer path { fill: var(--hw-ocean); }
/* NEWSバーはヒーロー直下：波をヒーローに食い込ませる */
.wave-hero { z-index: 3; }
.wave-hero svg { height: 64px; }
/* ヒーロー左側（水色部分）の波の演出。白の細い線をゆっくり左右に揺らす */
.hero-waves { position: absolute; z-index: 0; left: -6%; bottom: 0; width: 62%; height: 46%; fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2.5; stroke-linecap: round; pointer-events: none; }
.hero-waves path:nth-child(2) { stroke: rgba(255,255,255,.4); stroke-width: 2; }
.hero-waves path:nth-child(3) { stroke: rgba(255,255,255,.3); stroke-width: 1.6; }
@keyframes hero-wave-drift { from { transform: translateX(0); } to { transform: translateX(-60px); } }
.hero-waves path { animation: hero-wave-drift 9s ease-in-out infinite alternate; }
.hero-waves path:nth-child(2) { animation-duration: 12s; animation-direction: alternate-reverse; }
.hero-waves path:nth-child(3) { animation-duration: 15s; }
/* ヒーロー左上のヤシの木。角から扇状に広がる葉を、根元を軸にゆっくり揺らす */
.hero-palm { position: absolute; z-index: 0; top: -30px; left: -40px; width: min(34vw, 440px); height: min(34vw, 440px); pointer-events: none; }
.hero-palm .frond { transform-box: view-box; transform-origin: 30px 30px; color: var(--hw-palm-dk); animation: frond-sway 6s ease-in-out infinite alternate; }
.hero-palm .frond-2, .hero-palm .frond-4 { color: var(--hw-palm-deco); }
.hero-palm .frond-1 { opacity: .85; animation-duration: 7s; }
.hero-palm .frond-2 { opacity: .9; animation-duration: 5.5s; animation-delay: -2s; }
.hero-palm .frond-3 { opacity: .95; animation-duration: 6.5s; animation-delay: -1s; }
.hero-palm .frond-4 { opacity: .9; animation-duration: 5s; animation-delay: -3s; }
.hero-palm .frond-5 { opacity: .8; animation-duration: 7.5s; animation-delay: -4s; }
@keyframes frond-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@media (prefers-reduced-motion: reduce) { .hero-waves path, .hero-palm .frond { animation: none; } }
@media (max-width: 767px) { .hero-palm { width: 200px; height: 200px; top: -20px; left: -50px; opacity: .8; } }
/* こども食堂・KIDS は自分自身の上端を波形にマスクして前のセクションに食い込ませる（.moments と同じ方式。背景のグラデーションが波まで続く） */
#kodomo, #kids {
  position: relative;
  margin-top: -60px;
  padding-top: 144px; /* 波60px + 84px */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 26c240 34 480-24 720-2s480 36 720 2v34H0Z' fill='black'/%3E%3C/svg%3E"), linear-gradient(black, black);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 26c240 34 480-24 720-2s480 36 720 2v34H0Z' fill='black'/%3E%3C/svg%3E"), linear-gradient(black, black);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: top, bottom;
  mask-position: top, bottom;
  -webkit-mask-size: 100% 60px, 100% calc(100% - 60px);
  mask-size: 100% 60px, 100% calc(100% - 60px);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
/* NEWSバー：ヒーロー直下。波（.wave-hero）と同じクリーム色で、手前に出す */
.news-bar { position: relative; z-index: 3; padding: 16px 0 18px; border-bottom: 0; }
.news-bar b {
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--hw-pink);
  color: #fff;
  font-size: .76rem;
}

/* ---------- 交互背景 + ハワイアン柄（柄の仕組み・波形マスクは style.css。ここでは色だけ） ---------- */
.section.alt, .moments { background: var(--hw-sand); }
#space, #contact { background: var(--hw-sky-light); }
.moments { --pattern-color: var(--hw-palm); }
#space { --pattern-color: var(--hw-ocean); }
#information { --pattern-color: var(--hw-coral); --pattern-opacity-multiplier: .85; }
#contact { --pattern-color: var(--hw-lagoon); }

/* ---------- コンセプト ---------- */
.concept { position: relative; }
.concept .organic picture, .feature figure picture { display: block; }
.concept .organic {
  position: relative;
  border: 7px solid #fff;
  box-shadow: var(--hw-shadow);
}
.concept .wood-sign {
  position: absolute;
  right: 8px;
  bottom: -14px;
  z-index: 2;
  transform: rotate(5deg);
}
.concept-figure { position: relative; }
.concept-figure .deco-monstera {
  top: -48px;
  left: -46px;
  width: 150px;
  height: 150px;
  z-index: 2;
  transform: rotate(-30deg);
  opacity: .95;
}

/* ---------- ある時間（4枚） ---------- */
.ornament-title { gap: 14px; }
.ornament-title h2 { color: var(--hw-ocean-dk); }
.ornament-title svg.hibiscus { width: 40px; height: 40px; opacity: 1; }
.ornament-title svg:last-child { transform: scaleX(-1); }
.drop-line::after { background: var(--hw-ocean); }
.four-grid { gap: 22px; }
.four-grid article {
  padding: 30px 20px 26px;
  border: 3px solid #fff;
  border-radius: 22px;
  background: var(--hw-cream);
  box-shadow: var(--hw-shadow), 0 0 0 1px rgba(138,90,43,.12);
}
.four-grid article + article { border-left: 3px solid #fff; }
.four-grid h3 {
  min-height: 0;
  margin: 0 0 8px;
  color: var(--hw-wood-dk);
  font-size: 1.02rem;
  letter-spacing: .03em;
}
.four-grid p { font-family: var(--font-base); }
/* 求人チラシの丸バッジのように、色付きの円にアイコンを載せる */
.line-icon {
  display: grid;
  width: 88px;
  height: 88px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--badge, var(--hw-palm));
  color: #fff;
  place-content: center;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.5), 0 6px 14px rgba(0,0,0,.14);
}
.line-icon svg { width: 50px; height: 50px; stroke-width: 2; }
.four-grid article:nth-child(1) .line-icon { --badge: var(--hw-palm); }
.four-grid article:nth-child(2) .line-icon { --badge: var(--hw-ocean); }
.four-grid article:nth-child(3) .line-icon { --badge: var(--hw-wood); }
.four-grid article:nth-child(4) .line-icon { --badge: var(--hw-lagoon-text); }

/* ---------- メニュー ---------- */
/* 導入ブロック（写真なし）：中央寄せの見出しを、モンステラ・ハイビスカス・キラキラで囲む。
   飾りは他セクション（.ticket-panel / .hero）と同じ SVG シンボルと色変数を使う */
.menu-intro {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 16px 0;
  text-align: center;
}
.menu-intro > :not(.deco) { position: relative; z-index: 1; }
.menu-intro .deco-monstera { width: 150px; height: 150px; opacity: .5; }
.menu-intro .mi-monstera-l { top: -34px; left: -170px; transform: rotate(-32deg); }
.menu-intro .mi-monstera-r { right: -170px; bottom: -6px; transform: scaleX(-1) rotate(-32deg); }
.menu-intro .deco-sparkle { width: 22px; height: 22px; }
.menu-intro .mi-sparkle-1 { top: 4px; left: 9%; }
.menu-intro .mi-sparkle-2 { top: 42%; right: 3%; width: 16px; height: 16px; }
.menu-intro .mi-sparkle-3 { bottom: 14px; left: 15%; width: 14px; height: 14px; }
.menu-intro .hawaii-label { margin-bottom: 4px; }
/* 見出しの両脇にハイビスカス（右は左右反転） */
.menu-intro-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 16px;
}
.menu-intro-title h2 { margin: 0; }
.menu-intro-title .hibiscus {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.12));
}
.menu-intro-title .hibiscus:last-child { transform: scaleX(-1); }
.menu-intro-lead {
  margin: 0;
  color: var(--hw-wood-dk);
  font-size: 1rem;
  line-height: 2;
}
/* カテゴリの丸チップ（.pill-count と同じ白地×木色の枠）。提供メニューの各見出しへ飛ぶ */
.menu-intro-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.menu-intro-tags a {
  display: inline-block;
  padding: 4px 18px;
  border: 2px solid var(--hw-wood);
  border-radius: 999px;
  background: #fff;
  color: var(--hw-wood-dk);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.menu-intro-tags a:hover { border-color: var(--hw-pink); background: var(--hw-pink); color: #fff; }
.menu-intro .drop-line { margin: 22px auto 0; }
@media (max-width: 767px) {
  .menu-intro { padding: 0; }
  /* SP は葉を小さくして左右の端に少しだけ覗かせる */
  .menu-intro .deco-monstera { width: 96px; height: 96px; opacity: .4; }
  .menu-intro .mi-monstera-l { top: -30px; left: -40px; }
  .menu-intro .mi-monstera-r { right: -52px; bottom: -44px; }
  .menu-intro .mi-sparkle-1 { top: -6px; left: 4%; }
  .menu-intro .mi-sparkle-2 { top: 30%; right: 2%; }
  .menu-intro .mi-sparkle-3 { display: none; }
  .menu-intro-title { gap: 8px; margin-bottom: 12px; }
  .menu-intro-title .hibiscus { width: 30px; height: 30px; }
  .menu-intro-title h2 { font-size: 1.55rem; line-height: 1.45; }
  .menu-intro-lead { font-size: .875rem; line-height: 1.9; }
  .menu-intro-tags { gap: 6px 8px; margin-top: 14px; }
  .menu-intro-tags a { padding: 3px 12px; font-size: .74rem; }
  .menu-intro .drop-line { margin-top: 16px; }
}
.menu-ribbon-row {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.menu-grid { margin-top: 26px; }
/* #menu は .moments の背景・波を引き継ぐが、文字は本文書体のまま（.moments h3/p の手書き書体を打ち消す） */
#menu.moments .menu-body h3, #menu.moments .menu-body p, #menu.moments .copy p { font-family: var(--font-base); }
.menu-card {
  border: 3px solid #fff;
  border-radius: 20px;
  background: var(--hw-cream);
  box-shadow: var(--hw-shadow), 0 0 0 1px rgba(138,90,43,.12);
}
.menu-body h3 { color: var(--hw-wood-dk); font-size: 1.08rem; }
.menu-body strong {
  color: var(--hw-coral);
  font-size: 1.35rem;
  font-weight: 900;
}
.limited { background: var(--hw-pink); font-weight: 700; }
.tags li {
  border-color: rgba(62,139,73,.35);
  background: #fff;
  color: var(--hw-palm-dk);
  font-weight: 700;
}
.tags li::before { content: "🌿"; margin-right: 4px; font-size: .8em; }

/* SP のみ表示するランチ共通案内（メニュー説明を隠す代わり） */
.sp-only-block { display: none; margin: 18px 0 0; padding: 14px 16px; border: 3px solid #fff; border-radius: 16px; background: var(--hw-cream); box-shadow: var(--hw-shadow), 0 0 0 1px rgba(138,90,43,.12); }
.sp-only-block > b { display: inline-block; margin-bottom: 4px; padding: 2px 12px; border-radius: 999px; background: var(--hw-palm); color: #fff; font-size: .78rem; font-weight: 900; }
.sp-only-block p { margin: 0; font-size: .84rem; }
.sp-only-block p b { color: #A93418; }
/* ご利用案内の下：こども食堂への導線 1 行 */
.child-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 22px 0 0; padding: 14px 20px; border: 3px solid #fff; border-radius: 16px; background: var(--hw-kids); color: var(--hw-wood-dk); font-weight: 700; box-shadow: var(--hw-shadow); }
.child-link-row .hibiscus { width: 26px; height: 26px; }
.child-link-row .child-link { margin-left: auto; white-space: nowrap; }
/* ---------- ローカル ---------- */
.local-gallery { gap: 12px; }
/* ---------- キッズスペース（旧LOCALの枠。お子さま連れ向け設備を押し出す） ---------- */
.ok-badges.kids-badges { justify-content: flex-start; margin: 18px 0 0; }
.ok-badges.kids-badges li { width: 92px; height: 92px; font-size: .74rem; }
.kids .split { gap: 28px 75px; }
.ok-badges.kids-badges li:nth-child(1) { --badge: var(--hw-pink); }
.ok-badges.kids-badges li:nth-child(2) { --badge: var(--hw-ocean); }
.ok-badges.kids-badges li:nth-child(3) { --badge: var(--hw-palm); }
.ok-badges.kids-badges li:nth-child(4) { --badge: var(--hw-lagoon-text); }
.kids-menu { display: grid; gap: 8px; justify-items: start; margin: 22px 0 18px; }
.kids-menu .ribbon { font-size: .82rem; }
.kids-menu-lines { color: var(--hw-wood-dk); font-size: .95rem; font-weight: 700; }
.kids-menu-lines b { color: #A93418; }
.kids-figure { position: relative; margin: 0; padding-bottom: 58px; }
.kids-space-photo picture, .kids-lunch-card picture { display: block; }
.kids-space-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 68%;
  border: 7px solid #fff;
  border-radius: 24px;
  box-shadow: var(--hw-shadow);
  transform: rotate(2deg);
}
.kids-lunch-card {
  position: absolute;
  z-index: 1;
  left: -6%;
  bottom: 6px;
  width: 42%;
  transform: rotate(-4deg);
}
.kids-lunch-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 5px solid #fff;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(83, 55, 26, .24);
}
.kids-lunch-card figcaption {
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: max-content;
  transform: translateX(-50%);
}
@media (max-width: 767px) {
  .kids-badges li { width: 78px; height: 78px; font-size: .66rem; }
  .kids-figure { margin-top: 10px; padding-bottom: 66px; }
  .kids-lunch-card { left: 2%; bottom: 8px; width: 48%; }
  .kids-lunch-card figcaption { bottom: -14px; }
  .kids-lunch-card .ribbon { padding-inline: 14px; font-size: .72rem; }
}
.local-gallery img {
  border: 5px solid #fff;
  border-radius: 16px;
  box-shadow: var(--hw-shadow);
}
/* 写真は<picture>で出力し、picture 側は表示アニメーション（reveal）用に空けておく。傾き等の装飾は中の img に付ける */
.local-gallery picture { display: block; }
.local-gallery > :nth-child(1) img { transform: rotate(-3deg); }
.local-gallery > :nth-child(2) img { transform: translateY(14px); }
.local-gallery > :nth-child(3) img { transform: rotate(3deg); }

/* ---------- ご利用案内 ---------- */
.info-list {
  margin-top: 26px;
  padding: 8px 30px;
  border: 3px solid #fff;
  border-top: 3px solid #fff;
  border-radius: 22px;
  background: var(--hw-cream);
  box-shadow: var(--hw-shadow), 0 0 0 1px rgba(138,90,43,.12);
}
.info-list > div { border-bottom: 1px dashed rgba(138,90,43,.3); }
.info-list > div:last-child { border-bottom: 0; }
.info-list dt {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--hw-ocean-dk);
  font-weight: 900;
}
.info-list dt::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233E8B49' d='M3 21C3 9 10 3 21 3c0 11-6 18-18 18Zm2-2c8-1 12-6 13-13-7 1-12 5-13 13Z'/%3E%3Cpath fill='%233E8B49' d='M5 19l9-9' stroke='%233E8B49' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.child-cafe {
  position: relative;
  padding: 26px 26px 26px 30px;
  border: 3px solid #fff;
  border-left: 8px solid var(--hw-pink);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--hw-shadow);
}
.child-cafe strong { color: var(--hw-pink-dk); font-size: 1.05rem; }
.child-cafe .deco-hibiscus {
  top: -18px;
  right: 14px;
  width: 44px;
  height: 44px;
  transform: rotate(15deg);
}

/* ---------- アクセス・お問い合わせ ---------- */
.access iframe {
  border: 7px solid #fff;
  border-radius: 24px;
  box-shadow: var(--hw-shadow);
}
.access address { font-weight: 700; }
/* 地図は右カラム（住所〜写真〜ボタン）と同じ高さに伸ばす。ボタンは中央 */
.access.split { align-items: stretch; }
.access .copy { display: flex; flex-direction: column; }
.access-cta { grid-column: 1 / -1; margin: 0; text-align: center; }
.access.split { gap: 28px 75px; }
.access-photo { margin-bottom: 0; }
@media (min-width: 1024px) { .access iframe { height: auto; min-height: 390px; align-self: stretch; } }
/* アクセス：目印になる店舗外観写真 */
.access-photo { margin: 18px 0 22px; }
.access-photo picture { display: block; }
.access-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1.6;
  object-fit: cover;
  border: 6px solid #fff;
  border-radius: 20px;
  box-shadow: var(--hw-shadow);
}
.access-photo figcaption {
  margin-top: 8px;
  text-align: center;
  font-size: .86rem;
  font-weight: 700;
  color: var(--hw-wood);
}
.contact-grid > div:first-child { display: flex; flex-direction: column; align-items: stretch; }
.contact-grid > div:first-child .line-block { flex: 1; }
.tel-button { width: 100%; }
.tel-button small { font-weight: 700; }
.reserve-link { display: inline-flex; margin-top: 16px; }
.form-placeholder {
  border: 3px dashed rgba(29,134,196,.45);
  border-radius: 22px;
  background: #fff;
}
.form-placeholder strong { color: var(--hw-ocean-dk); }
/* CONTACT に埋め込む予約フォーム（送信先は reserve.php。管理画面の予約一覧に入る） */
.reserve-form { display: grid; gap: 12px; padding: 22px 22px 24px; border: 3px solid #fff; border-radius: 22px; background: var(--hw-cream); box-shadow: var(--hw-shadow), 0 0 0 1px rgba(20,95,148,.1); text-align: left; }
.reserve-form h3 { margin: 0 0 2px; color: var(--hw-ocean-dk); font-size: 1.15rem; font-weight: 900; }
.reserve-form .note { margin: 0; }
.reserve-form label { display: grid; gap: 4px; color: var(--hw-wood-dk); font-size: .86rem; font-weight: 700; }
.reserve-form label span { justify-self: start; display: inline-block; width: max-content; margin: -2px 0 0; padding: 0 8px; border-radius: 999px; background: var(--hw-pink); color: #fff; font-size: .66rem; font-weight: 900; line-height: 1.6; }
.reserve-form input, .reserve-form select, .reserve-form textarea { width: 100%; padding: 10px 12px; border: 1px solid rgba(138,90,43,.35); border-radius: 10px; background: #fff; color: var(--color-ink); font: inherit; font-size: 16px; font-weight: 500; }
.reserve-form input:focus, .reserve-form select:focus, .reserve-form textarea:focus { outline: 3px solid rgba(26,115,174,.35); border-color: var(--hw-ocean); }
.reserve-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reserve-form .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reserve-hint { margin: 0; color: var(--hw-wood); font-size: .78rem; font-weight: 700; line-height: 1.7; }
.reserve-hint a { color: var(--hw-ocean-dk); }
.reserve-form .button { justify-self: start; }
.contact-grid > div:last-child { display: flex; flex-direction: column; gap: 0; }
#contact .line-block { margin: 0; }
.contact-lead { margin: 0 0 14px; font-size: 1.05rem; font-weight: 700; color: var(--hw-wood-dk); }
/* 右の電話カラム：左と同じ位置に見出し行、その下をLINEブロックと同じ見た目のパネルに */
.contact-grid { align-items: stretch; }
.contact-tel { display: flex; flex-direction: column; }
.contact-tel .tel-panel { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 22px 20px 24px; border: 3px solid #fff; border-radius: 22px; background: var(--hw-cream); text-align: center; box-shadow: var(--hw-shadow), 0 0 0 1px rgba(20,95,148,.1); }
.contact-tel .tel-panel .note { margin: 0; }
.contact-tel .tel-button { max-width: 100%; }
.contact-lead b { color: var(--hw-line-dk); font-size: 1.2rem; font-weight: 900; }
.line-block-main { text-align: center; }
.line-steps { display: grid; gap: 8px; width: 100%; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px dashed rgba(11,122,58,.3); list-style: none; text-align: left; }
.line-steps li { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 700; color: var(--hw-wood-dk); }
.line-steps b { display: grid; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--hw-line-dk); color: #fff; font-size: .82rem; place-content: center; }
.line-block .note { margin: 12px 0 0; }
@media (min-width: 768px) { .line-steps { grid-template-columns: repeat(3, 1fr); } }
.form-placeholder .button { justify-self: center; margin-top: 10px; }
@media (max-width: 480px) { .reserve-form .two { grid-template-columns: 1fr; } .reserve-form .button { width: 100%; } }

/* ---------- 採用バナー（求人チラシ風） ---------- */
.recruit-banner {
  position: relative;
  gap: 8px;
  padding: 40px 24px 36px;
  border: 3px solid #fff;
  border-radius: 26px;
  background:
    radial-gradient(circle at 8% 18%, rgba(62,139,73,.16) 0, rgba(62,139,73,0) 28%),
    radial-gradient(circle at 92% 82%, rgba(62,139,73,.16) 0, rgba(62,139,73,0) 28%),
    #EEF5E6;
  box-shadow: var(--hw-shadow), 0 0 0 1px rgba(62,139,73,.25);
  overflow: hidden;
}
.recruit-banner > span.ribbon {
  justify-self: center;
  color: #fff;
  font-size: .92rem;
  letter-spacing: .12em;
}
.recruit-banner strong {
  color: var(--hw-palm-dk);
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  letter-spacing: .06em;
  line-height: 1.3;
  text-shadow: 0 2px 0 #fff;
}
.recruit-banner small {
  color: var(--hw-wood-dk);
  font-size: .92rem;
  font-weight: 700;
}
.ok-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.ok-badges li {
  display: grid;
  width: 102px;
  height: 102px;
  border-radius: 50%;
  background: var(--badge, var(--hw-palm));
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  line-height: 1.25;
  place-content: center;
  text-align: center;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.45), 0 6px 14px rgba(0,0,0,.14);
}
.ok-badges li b { display: block; font-size: 1.35rem; letter-spacing: .05em; }
.ok-badges li:nth-child(1) { --badge: var(--hw-palm); }
.ok-badges li:nth-child(2) { --badge: var(--hw-ocean); }
.ok-badges li:nth-child(3) { --badge: var(--hw-wood); }
.ok-badges li:nth-child(4) { --badge: var(--hw-palm-dk); }
.recruit-banner .more {
  margin-top: 14px;
  color: var(--hw-ocean-dk);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .3em;
}
.recruit-banner .deco-monstera {
  right: -40px;
  bottom: -50px;
  width: 170px;
  height: 170px;
  transform: rotate(-20deg);
  opacity: .35;
}
.recruit-banner .deco-hibiscus {
  top: 14px;
  left: 18px;
  width: 54px;
  height: 54px;
  transform: rotate(-15deg);
  opacity: .9;
}

/* ---------- フッター（海のブルー） ---------- */
.site-footer {
  padding-top: 40px;
  background: linear-gradient(180deg, var(--hw-ocean) 0%, #166CA6 55%, #11507F 100%);
}
.footer-greeting {
  position: relative;
  margin-bottom: 34px;
  text-align: center;
}
.footer-aloha {
  margin: 0;
  font-family: "Pacifico", cursive;
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  line-height: 1.2;
  text-shadow: 0 3px 0 rgba(0,0,0,.18);
}
.footer-greeting p:not(.footer-aloha) {
  margin: 4px 0 0;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.footer-greeting .deco-hibiscus {
  color: #fff;
  opacity: .9;
  width: 48px;
  height: 48px;
}
.footer-greeting .hib-l { top: -6px; left: 8%; transform: rotate(-20deg); }
.footer-greeting .hib-r { top: 10px; right: 8%; transform: rotate(18deg); }
.footer-brand > strong {
  font-family: var(--font-base);
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: .1em;
}
.footer-logo-lockup .hibiscus { width: 32px; height: 32px; color: #fff; }
.footer-contact > div {
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 16px;
  background: rgba(255,255,255,.1);
}
.footer-contact > a { font-weight: 700; }
.footer-contact > a:hover { background: rgba(255,255,255,.15); }
.page-top { color: var(--hw-ocean-dk); font-weight: 900; }
.copyright { opacity: .9; }

/* ---------- SP下部バー ---------- */
.mobile-actions { border-top: 0; background: #fff; box-shadow: 0 -4px 14px rgba(20,95,148,.12); }
.mobile-actions a { color: var(--hw-ocean-dk); }
.mobile-actions a + a { border-left: 0; }

/* ---------- レスポンシブ ---------- */
@media (min-width: 768px) {
  .hero { padding: 64px 0 90px; }
}
@media (min-width: 1024px) {
  .hero-inner { grid-template-columns: 1.05fr .95fr; gap: 56px; }
  .hero { padding: 72px 0 100px; }
  .four-grid { gap: 20px; }
}
@media (max-width: 1023px) {
  .hero .palm-l { top: -30px; left: -90px; }
  .hero .palm-r { top: -30px; right: -90px; }
  .hero .monstera-l { display: none; }
}
@media (max-width: 767px) {
  .hero { padding: 40px 0 60px; }
  /* SPは本文に被らないよう角へ寄せて薄くする */
  .hero .deco-palm { width: 180px; height: 180px; opacity: .7; }
  .hero .palm-l { top: -56px; left: -84px; }
  .hero .palm-r { top: -56px; right: -84px; }
  .hawaii-label.section-label { margin-bottom: 0; }
  .concept-figure .deco-monstera { width: 110px; height: 110px; top: -34px; left: -26px; }
  .concept .wood-sign { font-size: .64rem; padding: 8px 12px; }
  .info-list { padding: 4px 18px; }
  .info-list > div.one-line { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0; }
  .info-list > div.one-line dt { flex-shrink: 0; }
  .info-list > div.one-line dd { flex: 1 1 0; min-width: 0; margin: 0; }
  .info-list > div.one-line dd::before { content: "："; }
  .ok-badges li { width: 88px; height: 88px; font-size: .7rem; }
  .ok-badges li b { font-size: 1.15rem; }
  .footer-greeting .deco-hibiscus { width: 34px; height: 34px; }
  .footer-greeting .hib-l { left: 2%; }
  .footer-greeting .hib-r { right: 2%; }
}

@media print {
  .js-enabled .reveal { opacity: 1; transform: none; transition: none; }
  #kodomo, #kids { margin-top: 0; padding-top: 35px; -webkit-mask-image: none; mask-image: none; }
  .deco, .hawaii-label, .wave-divider, .footer-logo-lockup .hibiscus { display: none; }
  .hero { background: none; }
  .section.alt, .moments, #space, #information, #contact { background: white; }
  .four-grid article, .menu-card, .info-list, .child-cafe, .recruit-banner { box-shadow: none; }
}

/* ======================================================================
   案4：チラシ寄せの固有指定（ここから下が比較案のスタイルとの差分）
   ====================================================================== */
:root {
  --hw-wood-dark-grain:
    repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 3px, rgba(0,0,0,.08) 3px 6px),
    linear-gradient(180deg, #5E3A1A 0%, #47290F 60%, #3A2110 100%);
  --hw-line-dk: #0B7A3A;   /* LINEの文字色・濃い影 */
  --hw-line: #06C755;      /* LINE ブランドカラー。LINE 関連のボタン・アイコンはこの色で統一 */
  --hw-kids: #FFF4C2;      /* OASISチケットチラシの黄色地 */
}
/* SPだけで改行させる<br>（PCでは1行） */
.sp-only { display: none; }

/* ---------- 白フチの太い見出し（チラシの主見出し） ---------- */
.outline-text {
  paint-order: stroke fill;
  -webkit-text-stroke: 5px #fff;
  text-shadow: 0 3px 0 rgba(74,46,18,.16), 0 10px 22px rgba(20,95,148,.16);
}
.outline-text em { font-style: normal; }

/* ---------- 白い丸見出し（チラシの「プレオープン期間について」） ---------- */
.pill-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 8px 22px;
  border-radius: 999px;
  background: #fff;
  color: var(--hw-ocean-dk);
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .04em;
  box-shadow: 0 4px 14px rgba(20,95,148,.12), 0 0 0 1px rgba(20,95,148,.08);
}
.pill-title.small { padding: 5px 16px; font-size: .96rem; }
.pill-title.pink { color: var(--hw-pink-dk); box-shadow: 0 4px 14px rgba(210,42,106,.14), 0 0 0 1px rgba(210,42,106,.1); }
.pill-title.palm { color: var(--hw-palm-dk); box-shadow: 0 4px 14px rgba(53,121,63,.14), 0 0 0 1px rgba(53,121,63,.1); }
.pill-title .pill-icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--hw-sun); }
.pill-title.pink .pill-icon { color: var(--hw-pink-deco); }
.pill-title .hibiscus { width: 26px; height: 26px; }

/* ---------- ヒーロー（チラシ上段の縦組み） ---------- */
.hero {
  z-index: 2; /* 直後のオープン案内が上に食い込むので、写真を手前に保つ */
  position: relative;
  overflow: hidden;
  padding: 44px 0 0;
  text-align: center;
  /* 下端はイラストの地色（#F2ECDB）に揃えて、空→紙色→イラストへ自然につなぐ */
  background:
    linear-gradient(90deg, #A8D6F0 0%, #BFE0F4 40%, #D6E7EC 62%, #EAEBDF 80%, #F2ECDB 92%, #F2ECDB 100%);
}
/* 店舗外観のイラスト。文字群の下に大きく見せ、上端だけ空へ溶かす */
.hero-illust {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 54%;
  pointer-events: none;
}
.hero-illust img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 88%;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 22%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 22%);
}
.hero-inner { position: relative; z-index: 1; display: block; max-width: 980px; padding-bottom: 470px; }
.hero-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 20px;
}
.hero-lockup img {
  width: 116px;
  height: 116px;
  filter: drop-shadow(0 8px 12px rgba(20,95,148,.22));
}
.hero-lockup .lockup-name { display: grid; line-height: 1.15; }
.hero-lockup b {
  color: var(--hw-ocean-dk);
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 900;
  letter-spacing: .1em;
  text-shadow: 0 2px 0 #fff;
}
.hero-lockup small {
  color: var(--hw-wood);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .36em;
  text-transform: uppercase;
}
.hero-lockup small::before, .hero-lockup small::after { content: "•"; margin: 0 8px; color: var(--hw-ocean); }
.hero-badge { margin: 0 0 14px; }
.hero-badge .ribbon { font-size: .92rem; }
.hero h1 {
  margin: 0;
  color: var(--hw-wood-dk);
  font-size: clamp(2rem, 5.6vw, 3.9rem);
  letter-spacing: .06em;
  line-height: 1.4;
}
.hero h1 em { color: var(--hw-pink); }
.hero-lead {
  margin: 18px auto 0;
  max-width: 34em;
  font-size: .98rem;
  font-weight: 700;
  color: var(--hw-wood-dk);
  text-shadow: 0 1px 0 #fff, 0 0 12px rgba(255,255,255,.9);
}
/* チラシの日付板（濃い木目に白文字） */
.date-boards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.date-boards li {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px 10px 22px;
  border: 2px solid #2E1A08;
  border-radius: 10px;
  background: var(--hw-wood-dark-grain);
  color: #FFF6E6;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 6px 14px rgba(58,33,16,.3), inset 0 0 0 1px rgba(255,255,255,.14);
  transform: rotate(-1.2deg);
}
.date-boards li:nth-child(2) { transform: rotate(1.2deg); }
.date-boards span { font-size: 1.02rem; }
.date-boards b {
  padding-left: 14px;
  border-left: 2px solid rgba(255,255,255,.4);
  font-size: 1.22rem;
  color: #FFE27A;
}
.hero .button-row { justify-content: center; gap: 12px; width: fit-content; margin: 26px auto 0; padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
/* 手書きのひとこと（左右の角） */
.hero-script {
  position: absolute;
  z-index: 2;
  margin: 0;
  line-height: 1.35;
}
.hero-script.hs-left {
  top: 8px;
  left: 0;
  color: var(--hw-wood-dk);
  font-family: var(--font-hand);
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  font-weight: 700;
  text-align: left;
  transform: rotate(-9deg);
  text-shadow: 0 1px 0 #fff, 0 0 8px #fff;
}
.hero-script.hs-right {
  top: 12px;
  right: 0;
  color: var(--hw-pink-dk);
  font-family: "Pacifico", cursive;
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  text-align: right;
  transform: rotate(9deg);
  text-shadow: 0 1px 0 #fff;
}
.hero .wood-sign { position: absolute; z-index: 2; font-size: .66rem; }
.hero .ws-left { top: 120px; left: -10px; transform: rotate(-7deg); }
.hero .ws-right { top: 128px; right: -10px; transform: rotate(6deg); }
.hero .deco-palm { opacity: .9; }
.hero .palm-l { top: -60px; left: -140px; }
.hero .palm-r { top: -60px; right: -140px; }
.hero .monstera-l, .hero .monstera-r { width: min(16vw, 150px); height: min(16vw, 150px); opacity: .6; }
.hero .monstera-l { left: -20px; right: auto; bottom: 90px; transform: rotate(28deg); }
.hero .monstera-r { right: -20px; bottom: 90px; transform: scaleX(-1) rotate(28deg); }
.hero .deco-hibiscus.hib-1 { top: 36%; left: 2%; width: 84px; height: 84px; transform: rotate(-16deg); filter: drop-shadow(0 4px 6px rgba(0,0,0,.16)); }
.hero .deco-hibiscus.hib-2 { top: 30%; right: 5%; width: 64px; height: 64px; transform: rotate(18deg); filter: drop-shadow(0 4px 6px rgba(0,0,0,.16)); }
/* 追加の花：ボタン脇とイラストの手前の角に散らす */
.hero .deco-hibiscus.hib-3 { top: 52%; left: 12%; width: 54px; height: 54px; transform: rotate(24deg); filter: drop-shadow(0 4px 6px rgba(0,0,0,.16)); }
.hero .deco-hibiscus.hib-4 { top: 49%; right: 13%; width: 46px; height: 46px; transform: rotate(-22deg); filter: drop-shadow(0 4px 6px rgba(0,0,0,.16)); }
.hero .deco-hibiscus.hib-5 { bottom: 26px; left: 4%; width: 96px; height: 96px; z-index: 1; transform: rotate(-12deg); filter: drop-shadow(0 6px 8px rgba(0,0,0,.2)); }
.hero .deco-hibiscus.hib-6 { bottom: 40px; right: 5%; width: 72px; height: 72px; z-index: 1; transform: rotate(16deg); filter: drop-shadow(0 6px 8px rgba(0,0,0,.2)); }
.hero .sparkle-1 { top: 22%; left: 24%; }
.hero .sparkle-2 { top: 52%; left: 18%; }
.hero .sparkle-3 { top: 18%; right: 24%; }

/* ---------- オープン案内（チラシ下段：白パネル2枚） ---------- */
.open-info {
  position: relative;
  z-index: 0;
  margin-top: 0; /* NEWSバーがヒーロー直下に入ったので重ねない */
  padding: 70px 0 70px;
  background: var(--hw-sand);
}
.center-message {
  margin: 0 0 30px;
  color: var(--hw-wood-dk);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.7;
  text-align: center;
}
.center-message::before, .center-message::after {
  content: "";
  display: inline-block;
  width: 34px;
  height: 2px;
  margin: 0 14px;
  vertical-align: middle;
  background: var(--hw-ocean);
}
.open-panels { display: grid; gap: 22px; align-items: start; max-width: 880px; margin-inline: auto; } /* 内容に対して右側が空きすぎないよう幅を絞る */
.open-panel {
  padding: 28px 28px 26px;
  border: 3px solid #fff;
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  box-shadow: var(--hw-shadow), 0 0 0 1px rgba(138,90,43,.1);
}
.open-panel.ocean { background: rgba(234,245,251,.85); }
.open-panel.pink { background: rgba(255,240,245,.85); }
.open-panel p { margin: 0; font-size: .92rem; }
.open-panel .hours-note br { display: none; }
@media (min-width: 768px) { .open-panel .hours-note br { display: inline; } }
.open-panel .pill-title.small { margin-top: 18px; }
.open-panel .hours {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 8px 0;
  line-height: 1;
}
/* 見出しラベルは同じ幅にして、時刻の開始位置と全体の中央を揃える */
.hours span {
  display: inline-flex;
  align-items: center;
  align-self: center;
  transform: translateY(2px); /* 数字のインクの中心（実測）に合わせる */
  line-height: 1.5;
  min-width: 7.2em;
  justify-content: center;
  text-align: center;
  padding: 4px 12px 0; /* 文字はボックス内で上寄りに描かれるので、上に余白を寄せて見た目の中央に */
  border-radius: 999px;
  background: var(--hw-ocean-dk);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
}
.open-panel.pink .hours span { background: var(--hw-pink-dk); }
.hours b {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: var(--hw-wood-dk);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 900;
  letter-spacing: .04em;
}
.hours-note { color: var(--hw-wood-dk); font-weight: 700; }
/* チラシの緑チェックリスト（おすすめメニュー） */
.check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
  color: var(--hw-wood-dk);
}
.check-list li { display: flex; align-items: center; gap: 8px; }
.check-list li::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--hw-palm) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.open-footnote {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 28px;
  margin: 26px 0 0;
  color: var(--hw-wood-dk);
  font-size: .88rem;
  font-weight: 700;
}

/* ---------- コーヒーチケット（クリーム地の二重枠パネル） ---------- */
.ticket { padding-top: 56px; padding-bottom: 64px; background: var(--hw-paper); }
#concept { background: var(--hw-sky-light); }
.ticket-panel {
  position: relative;
  max-width: 760px;
  margin: 18px auto 0;
  padding: 40px 28px 34px;
  border: 3px solid var(--hw-wood);
  border-radius: 22px;
  background: var(--hw-cream);
  text-align: center;
  box-shadow: var(--hw-shadow), inset 0 0 0 6px #fff, inset 0 0 0 8px rgba(138,90,43,.35);
}
.ticket-panel > :not(.deco) { position: relative; z-index: 1; }
.ticket-panel .deco-monstera { z-index: 0; width: 130px; height: 130px; opacity: .55; }
.ticket-panel .tk-l { top: -30px; left: -34px; transform: rotate(-40deg); }
.ticket-panel .tk-r { right: -34px; bottom: -30px; transform: scaleX(-1) rotate(-40deg); }
.ticket-kicker { margin: 0 0 10px; }
.ticket-panel h2 {
  margin: 0;
  color: var(--hw-wood-dk);
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  line-height: 1.3;
  letter-spacing: .04em;
}
.ticket-sub { margin-left: .2em; font-size: .62em; color: var(--hw-ocean-dk); }
.ticket-count { margin: 12px 0 4px; }
.pill-count {
  display: inline-block;
  padding: 4px 22px;
  border-radius: 999px;
  border: 2px solid var(--hw-wood);
  background: #fff;
  color: var(--hw-wood-dk);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: .06em;
}
.ticket-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 12px;
  margin: 6px 0 12px;
  color: var(--hw-wood-dk);
  font-weight: 900;
  line-height: 1;
}
.ticket-price s { font-size: 1.05rem; color: #6C5A4A; text-decoration-thickness: 2px; text-decoration-color: var(--hw-pink); }
.ticket-price .arrow { color: var(--hw-pink); font-size: 1.4rem; }
.ticket-price b {
  color: var(--hw-pink);
  font-size: clamp(3rem, 9vw, 5.2rem);
  letter-spacing: .02em;
  paint-order: stroke fill;
  -webkit-text-stroke: 6px #fff;
  text-shadow: 0 4px 0 rgba(74,46,18,.14);
}
.ticket-price small { font-size: 1.3rem; }
.ticket-price .tax { font-size: .7em; font-weight: 700; }
.ticket-line {
  margin: 0 auto 16px;
  padding: 10px 0;
  max-width: 420px;
  border-top: 2px dashed rgba(138,90,43,.4);
  border-bottom: 2px dashed rgba(138,90,43,.4);
  color: var(--hw-wood-dk);
  font-size: 1.05rem;
  font-weight: 700;
}
.ticket-line b { font-size: 1.5rem; font-weight: 900; }
.ticket-target { margin: 0 0 10px; }
.ticket-note { margin: 0; color: var(--hw-wood-dk); font-size: .92rem; line-height: 1.7; }
.ticket-note b { display: block; font-size: 1.02rem; }
.ticket-note small { display: block; margin-top: 4px; font-size: .8rem; color: var(--color-ink-light); }

/* ---------- 貸し切りプラン（貸切チラシ） ---------- */
.rental {
  position: relative;
  background:
    radial-gradient(circle at 0% 0%, rgba(62,139,73,.18) 0, rgba(62,139,73,0) 34%),
    radial-gradient(circle at 100% 100%, rgba(62,139,73,.18) 0, rgba(62,139,73,0) 34%),
    var(--hw-sky-light);
  text-align: center;
}
.rental-title {
  margin: 0 0 12px;
  color: var(--hw-pink);
  font-size: clamp(2.1rem, 6vw, 4rem);
  line-height: 1.25;
  letter-spacing: .04em;
}
/* チラシは黄色文字だが、淡い背景では読めない（白フチとの比 1.6:1）ため海のブルーにする */
.rental-title em { color: var(--hw-ocean-dk); }
.rental .center-message { margin-bottom: 24px; }
/* 木の板（店内大型スクリーン…） */
.wood-board {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 32px;
  border: 2px solid #2E1A08;
  border-radius: 12px;
  background: var(--hw-wood-dark-grain);
  color: #FFF6E6;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 8px 18px rgba(58,33,16,.3), inset 0 0 0 1px rgba(255,255,255,.14);
}
.wood-board svg { flex-shrink: 0; width: 44px; height: 38px; fill: none; stroke: #FFE27A; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.scene-lead {
  margin: 30px 0 18px;
  color: var(--hw-wood-dk);
  font-size: 1.1rem;
  font-weight: 900;
}
.scene-lead span { display: inline-block; position: relative; padding: 0 18px; }
.scene-lead span::before, .scene-lead span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 60px;
  height: 2px;
  background: var(--hw-wood-dk);
}
.scene-lead span::before { right: 100%; transform: rotate(18deg); }
.scene-lead span::after { left: 100%; transform: rotate(-18deg); }
.scene-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.scene-cards li { display: grid; justify-items: center; }
.scene-tile {
  display: grid;
  width: 100%;
  aspect-ratio: 1.15;
  border: 5px solid #fff;
  border-radius: 20px;
  background: var(--tile, var(--hw-ocean));
  color: #fff;
  place-content: center;
  box-shadow: var(--hw-shadow);
}
.scene-tile svg { width: 54%; height: auto; max-width: 110px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.scene-tile[data-scene="wedding"] { --tile: linear-gradient(160deg, #F39DBE, #D22A6A); }
.scene-tile[data-scene="club"] { --tile: linear-gradient(160deg, #F7C842, #E4553C); }
.scene-tile[data-scene="group"] { --tile: linear-gradient(160deg, #5FC0DC, #1A73AE); }
.scene-tile[data-scene="sports"] { --tile: linear-gradient(160deg, #8FCB6A, #35793F); }
.scene-cards .ribbon { position: relative; z-index: 1; margin-top: -18px; font-size: .86rem; padding: 5px 18px; }
/* シーン写真（イラスト）版。タイルの枠・角丸はそのまま、写真で埋める */
.scene-tile.scene-photo { position: relative; overflow: hidden; place-content: stretch; background: var(--tile); }
.scene-tile.scene-photo picture, .scene-tile.scene-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.scene-tile.scene-photo::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.22)); pointer-events: none; }
/* ハイビスカスの箇条書き */
.hibiscus-list {
  display: inline-grid;
  gap: 8px;
  margin: 30px auto 0;
  padding: 18px 26px;
  border-radius: 18px;
  background: rgba(255,255,255,.75);
  list-style: none;
  text-align: left;
  color: var(--hw-wood-dk);
  font-size: .96rem;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(20,95,148,.08);
}
.hibiscus-list li { display: flex; align-items: center; gap: 10px; }
.hibiscus-list li::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='%23E63C7C'%3E%3Ccircle cx='10' cy='4.5' r='3.6'/%3E%3Ccircle cx='15.2' cy='8.3' r='3.6'/%3E%3Ccircle cx='13.3' cy='14.6' r='3.6'/%3E%3Ccircle cx='6.7' cy='14.6' r='3.6'/%3E%3Ccircle cx='4.8' cy='8.3' r='3.6'/%3E%3C/g%3E%3Ccircle cx='10' cy='10' r='2.4' fill='%23FFF3B0'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rental-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 26px 0 0; }

/* ---------- 子ども食堂（OASISチケットチラシの黄緑トーン） ---------- */
.child-cafe {
  padding: 30px 28px 26px;
  border: 3px solid #fff;
  border-left: 3px solid #fff;
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(123,192,67,.28) 0, rgba(123,192,67,0) 36%),
    radial-gradient(circle at 0% 100%, rgba(247,200,66,.4) 0, rgba(247,200,66,0) 36%),
    var(--hw-kids);
  text-align: center;
}
.child-kicker {
  margin: 0 0 2px;
  color: var(--hw-palm-dk);
  font-family: var(--font-hand);
  font-size: 1.02rem;
  font-weight: 600;
}
.child-cafe > strong {
  display: block;
  margin-bottom: 8px;
  color: var(--hw-pink);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .04em;
}
.child-cafe > strong em { color: var(--hw-ocean); }
.child-cafe > p { color: var(--hw-wood-dk); font-weight: 700; }
.child-grid {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  text-align: left;
}
.child-grid > div {
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(255,255,255,.8);
}
.child-grid p { margin: 0; font-size: .9rem; }
.child-grid p b { color: var(--hw-pink-dk); }
.child-grid .note { margin-top: 8px; }
.child-cafe .deco-hibiscus { top: -20px; right: 18px; width: 52px; height: 52px; }

/* ---------- 公式LINE（貸切・求人チラシの緑ブロック） ---------- */
.line-block {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-top: 18px;
  padding: 22px 20px 24px;
  border: 3px solid #fff;
  border-radius: 22px;
  background: linear-gradient(180deg, #ECF9EF, #DDF3E3);
  text-align: center;
  box-shadow: var(--hw-shadow), 0 0 0 1px rgba(11,122,58,.18);
}
.line-block small {
  color: var(--hw-line-dk);
  font-family: var(--font-hand);
  font-size: .92rem;
  font-weight: 600;
}
.line-block strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--hw-line-dk);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 900;
  letter-spacing: .06em;
}
.line-block strong svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.line-id {
  padding: 3px 18px;
  border-radius: 999px;
  background: var(--hw-line-dk);
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .06em;
}
/* .button:not(.outline) より後ろに書き、同じ詳細度で上書きする */
.button.line-button {
  gap: 8px;
  border-color: var(--hw-line);
  background: var(--hw-line);
  color: #fff;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 6px rgba(0,0,0,.35); /* LINE ブランド緑は白文字とのコントラストが低いため影で補う */
  box-shadow: 0 4px 0 var(--hw-line-dk);
}
.button.line-button:hover { border-color: var(--hw-line-dk); background: var(--hw-line-dk); color: #fff; }
/* アイコンは文字の高さの中央に合わせる（inline-flex の align-items で揃え、行ボックスのズレを打ち消す） */
.ln-icon { width: 1.2em; height: 1.2em; flex-shrink: 0; display: block; transform: translateY(.06em); }
.ig-icon { width: 1.1em; height: 1.1em; flex-shrink: 0; display: block; margin-right: 6px; transform: translateY(.04em); }
.button, .mobile-actions a { line-height: 1; }
.button > .ig-text, .button > span:not(.sr-only) { line-height: 1.2; }
/* LINEブロック内だけ上に余白（他の並びでは他のボタンと高さを揃える） */
.line-block .button.line-button { margin-top: 12px; }
.mn-actions, .kd-cta, .rental-cta { align-items: center; }
.insta-button { position: relative; border-color: #DD2A7B; color: #C13584; }
.insta-button .ig-icon { color: #DD2A7B; }
.insta-button span.ig-text { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.insta-button:hover { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); border-color: transparent; color: #fff; }
.insta-button:hover .ig-icon { color: #fff; }
.insta-button:hover span.ig-text { background: none; -webkit-background-clip: initial; background-clip: initial; color: #fff; }
.pc-only-flex { display: inline-flex; }
/* SP 下部バー：4項目。LINE は LINE 色、Instagram はグラデ */
.mobile-actions { grid-template-columns: repeat(4, 1fr); }
.mobile-actions a { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 7px 2px 6px; font-size: .68rem; line-height: 1.1; }
.mobile-actions .ma-icon { width: 26px; height: 26px; }
/* LINE / Instagram：白背景＋ブランド色の文字・アイコン（文字は白地で4.5:1以上になるよう濃いめ）。上端3pxのブランド色ラインで白4項目の中でも識別できるように */
.mobile-actions a.ma-line { background: linear-gradient(var(--hw-line), var(--hw-line)) top / 100% 3px no-repeat, #fff; color: #0B7A3A; }
.mobile-actions a.ma-line .ma-icon { color: var(--hw-line); }
.mobile-actions a.ma-insta { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF) top / 100% 3px no-repeat, #fff; color: #B4236E; }
.mobile-actions a.ma-insta .ma-icon { color: #DD2A7B; }
/* こども食堂：協賛募集ボタン（2行） */
.kd-sponsor { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 22px; text-align: left; line-height: 1.3; }
.kd-sponsor span { display: grid; }
.kd-sponsor small { font-size: .72rem; font-weight: 700; opacity: .92; }
/* メニュー：提供メニューへの導線 */
.menu-all-cta { margin: 18px 0 0; text-align: center; }
/* オープン案内：プレオープン期間の強調 */
.preopen-em { margin: 0 0 24px; }
.preopen-em .ribbon { font-size: .88rem; letter-spacing: .04em; }
.preopen-em .ribbon b { color: #FFE27A; font-size: 1.05em; }
.preopen-badge { margin-top: 0; }
.preopen-badge b { color: #FFE27A; }
.hero-badge { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 8px; }
.hero-badge .ribbon { display: inline-flex; align-items: center; line-height: 1.4; }
.hero-badge .ribbon b { margin-left: .35em; }
.ticket-days { display: block; margin-top: 8px; color: var(--hw-pink-dk); font-size: 1.02rem; font-weight: 900; letter-spacing: .04em; }
/* 木の板：3D で裏返って入れ替わる（表：モーニング／ランチ、裏：営業時間／定休日） */
.preopen-note { margin: 8px 0 0; color: var(--hw-wood-dk); font-size: .78rem; font-weight: 700; text-align: center; text-shadow: 0 1px 0 #fff; }
.flip-boards { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.flip-boards li.flip { position: relative; padding: 0; background: none; border: 0; box-shadow: none; perspective: 700px; }
.flip-inner { position: relative; display: block; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.4,0,.2,1); }
.flip-boards li.is-flipped .flip-inner { transform: rotateX(180deg); }
.flip-boards .face { display: inline-flex; align-items: center; gap: 14px; padding: 10px 24px 10px 22px; border: 2px solid #2E1A08; border-radius: 10px; background: var(--hw-wood-dark-grain); color: #FFF6E6; font-weight: 900; letter-spacing: .04em; box-shadow: 0 6px 14px rgba(58,33,16,.3), inset 0 0 0 1px rgba(255,255,255,.14); backface-visibility: hidden; -webkit-backface-visibility: hidden; white-space: nowrap; }
.flip-boards .face.back { position: absolute; inset: 0; justify-content: center; transform: rotateX(180deg); }
.flip-boards .face span { font-size: 1.02rem; }
.flip-boards .face b { padding-left: 14px; border-left: 2px solid rgba(255,255,255,.4); font-size: 1.22rem; color: #FFE27A; }
@media (prefers-reduced-motion: reduce) { .flip-inner { transition: none; } }
.button.line-button.is-disabled { opacity: .75; cursor: default; }

/* ---------- レスポンシブ（案4） ---------- */
@media (min-width: 768px) {
  .hero { padding: 52px 0 0; }
  .open-panels { grid-template-columns: 1fr 1fr; }
  .scene-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .child-grid { grid-template-columns: 1.2fr 1fr; }
}
@media (min-width: 1024px) {
  /* 準備中バー(30px)＋ヘッダー(76px)を除いた高さに収める。文字は左半分、イラストは右半分 */
  .hero { display: grid; grid-template-columns: 1fr; align-items: center; min-height: calc(100svh - 106px); padding: 20px 0 24px; }
  /* 文字列は左半分（コンテナ左端〜中央）。%はヒーロー幅基準なので margin で位置を決める */
  /* 文字群はヒーロー全体の中央からやや左。背景に白いもやを敷いて読みやすくする */
  .hero-inner { grid-column: 1; justify-self: center; display: block; width: min(900px, 62%); max-width: none; margin: 0 0 0 -8%; padding: 0; }
  .hero-inner::before { content: ""; position: absolute; z-index: -1; inset: -40px -60px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,255,255,.82) 0%, rgba(255,255,255,.6) 45%, rgba(255,255,255,0) 72%); pointer-events: none; }
  /* イラストは右半分に全体が収まるように（contain・右下寄せ）。地色が同じなので縁は出ない */
  /* イラストはヒーローの高さいっぱい（建物がほぼ9割）。幅は比率から決め、左側は中央付近まで長くぼかして境界を消す */
  .hero-illust { top: auto; right: -5.5%; bottom: -6%; left: auto; width: auto; height: 109%; aspect-ratio: 1224 / 847; max-width: min(74%, 100% - 660px); padding: 0; }  /* 狭い画面では左の街並み側を切って文字群と重ねない */
  .hero-illust img {
    object-fit: cover;
    object-position: right bottom;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.2) 32%, rgba(0,0,0,.7) 58%, #000 76%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.2) 32%, rgba(0,0,0,.7) 58%, #000 76%);
  }
  .hero-lockup { margin-bottom: clamp(8px, 1.4vh, 16px); }
  .hero-lockup img { width: clamp(76px, 13vh, 126px); height: clamp(76px, 13vh, 126px); }
  .hero-lockup b { font-size: clamp(1.8rem, 4.2vh, 3.3rem); }
  .hero-badge { margin-bottom: clamp(6px, 1.2vh, 14px); }
  .hero-badge .ribbon { font-size: clamp(.9rem, 1.8vh, 1.12rem); }
  .hero h1 { font-size: clamp(1.9rem, 4.8vh, 3.8rem); letter-spacing: .03em; line-height: 1.35; }
  .hero-lead { margin-top: clamp(8px, 1.4vh, 16px); font-size: clamp(.95rem, 2.2vh, 1.3rem); line-height: 1.8; }
  .date-boards { flex-wrap: nowrap; gap: 10px; margin-top: clamp(10px, 1.8vh, 20px); }
  .flip-boards .face { gap: 10px; padding: clamp(6px, 1vh, 10px) 16px clamp(6px, 1vh, 10px) 14px; }
  .flip-boards .face span { font-size: clamp(.9rem, 1.8vh, 1.15rem); }
  .flip-boards .face b { padding-left: 10px; font-size: clamp(1.05rem, 2.1vh, 1.4rem); }
  .hero .button-row { margin-top: clamp(10px, 1.8vh, 20px); }
  .hero .button { min-width: 0; min-height: clamp(44px, 6.5vh, 56px); padding: 6px 26px; font-size: clamp(.86rem, 1.7vh, 1rem); }
  /* 1画面レイアウトでは木看板と右側の飾りを省き、左半分の飾りだけ残す */
  .hero .ws-left, .hero .ws-right, .hero .palm-r, .hero .monstera-r, .hero .monstera-l { display: none; }
  /* 手書き文言はロゴの左右外側に */
  .hero .hs-left { top: 14px; left: -24px; }
  .hero .hs-right { top: 8px; right: -10px; }
  .hero .palm-l { top: -70px; left: -110px; width: 240px; height: 240px; opacity: .7; }
  .hero .deco-hibiscus.hib-1 { top: 44%; left: 1%; width: 64px; height: 64px; }
  .hero .deco-hibiscus.hib-2 { right: 34%; top: 62%; width: 52px; height: 52px; }
  .hero .deco-hibiscus.hib-5 { left: auto; right: 22%; top: 4%; bottom: auto; width: 72px; height: 72px; transform: rotate(18deg); }
  .hero .sparkle-1 { top: 12%; left: 22%; }
}
@media (max-width: 1023px) {
  /* ナビ項目が9つに増えたので、低い画面でも末尾まで届くよう内部スクロールにする */
  .global-nav { max-height: calc(100dvh - 76px); overflow-y: auto; }
  .hero .monstera-l, .hero .monstera-r { display: none; }
  .hero .ws-right { display: none; }
  .hero .ws-left { top: 96px; left: 0; }
}
@media (max-width: 767px) {
  .sp-only { display: inline; }
  .hero { display: grid; align-content: start; min-height: calc(100svh - 106px); padding: 16px 0 0; }
  .hero .deco-hibiscus.hib-3, .hero .deco-hibiscus.hib-4 { display: none; }
  .hero .deco-hibiscus.hib-5 { width: 64px; height: 64px; left: 2%; bottom: 14px; }
  .hero .deco-hibiscus.hib-6 { width: 50px; height: 50px; right: 3%; bottom: 20px; }
  /* SPは角の飾りを畳み、手書き文言はロゴの上に静的に置く */
  .hero .ws-left, .hero .ws-right, .hero .deco-hibiscus.hib-1, .hero .deco-hibiscus.hib-2 { display: none; }
  .hero-script { position: static; transform: none; text-align: center; }
  .hero-script.hs-right { display: none; }
  .hero-script.hs-left { margin-bottom: 10px; text-align: center; transform: none; }
  .hero-script.hs-left br { display: none; }
  .hero-lockup img { width: 78px; height: 78px; }
  .outline-text { -webkit-text-stroke: 4px #fff; }
  #kodomo, #kids { margin-top: -42px; padding-top: 98px; -webkit-mask-size: 100% 42px, 100% calc(100% - 42px); mask-size: 100% 42px, 100% calc(100% - 42px); }
  /* 「通常5,000円」を1行目、「4,000円（税込）」を1行に */
  .ticket-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 6px; }
  .ticket-price s { flex-basis: 100%; text-align: center; }
  .ticket-price .arrow { display: none; }
  .ticket-price b { font-size: 2.6rem; }
  .ticket-price small { white-space: nowrap; }
  .ok-badges, .kids-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; justify-items: stretch; }
  .kids-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 220px; margin-inline: auto; }
  .kids-badges li { font-size: .72rem; }
  .kids .copy { text-align: center; }
  .kids-menu { justify-items: center; }
  .kids .copy .button { align-self: center; }
  .split > *, .feature > *, .contact-grid > * { min-width: 0; }
  main { overflow-x: clip; }
  .ticket, .section:has(> .container > .recruit-banner) { overflow: hidden; }
  .kids-figure img { max-width: 100%; }
  .ok-badges li, .kids-badges li { width: auto; height: auto; aspect-ratio: 1; font-size: .64rem; }
  .ok-badges li b { font-size: 1rem; }
  .pill-title { padding: 8px 14px; font-size: .98rem; }
  .pc-only { display: none; }
  .hero .deco-palm { display: none; }
  .hero-waves { display: none; }
  .hero { background: linear-gradient(180deg, #A8D6F0 0%, #C6E4F5 28%, #E6EEE6 60%, #F2ECDB 100%); }
  .hero-inner { padding-bottom: 0; }
  .hero { align-content: center; padding: 0 0 18px; }
  /* イラストは下半分に。上端は空へ溶かし、文字群の背後まで少し重ねる */
  /* ベンチが画面右寄り（元の扉の位置）に来るよう、イラストを大きくして右へ流す（左端は画面左端に合わせる） */
  .hero-illust { top: auto; right: auto; bottom: 0; left: -26%; width: 180%; max-width: none; height: 74%; }
  /* 上端は空へ、左端は背景へ溶かす（右へずらした分、左に地色が見えるため） */
  .hero-illust img { object-fit: cover; object-position: left bottom; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 30%, #000 52%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 30%, #000 52%); }
  /* 白いもや：上下とも縁まで届く前に透明にして、境界線が出ないようにする */
  .hero-inner::before { content: ""; position: absolute; z-index: -1; inset: -30px 0 -30px; border-radius: 0; background: radial-gradient(ellipse 54% 54% at 50% 52%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.72) 40%, rgba(255,255,255,.35) 68%, rgba(255,255,255,.1) 86%, rgba(255,255,255,0) 100%); pointer-events: none; }
  .hero-script.hs-left { display: none; }
  .hero-lockup { margin-bottom: 8px; }
  .hero-lockup img { width: 58px; height: 58px; }
  .hero-lockup b { font-size: 1.5rem; }
  .hero-badge { margin-bottom: 6px; }
  .hero h1 { font-size: 1.45rem; line-height: 1.4; }
  .hero-lead { margin-top: 8px; font-size: .84rem; line-height: 1.7; }
  .date-boards { flex-wrap: nowrap; justify-content: center; gap: 6px; margin-top: 10px; }
  .flip-boards .face { gap: 6px; padding: 5px 10px 5px 9px; }
  .flip-boards .face span { font-size: .74rem; }
  .flip-boards .face b { padding-left: 6px; font-size: .86rem; }
  .pc-only-flex { display: none; }
  .kd-sponsor { width: 100%; }
  .hero .button-row { gap: 6px; margin-top: 10px; padding: 6px; }
  .preopen-note { margin-top: 4px; font-size: .7rem; }
  /* SP：パネル内の他の要素と同じく左揃え。バッジは文字幅に、時刻は一回り小さく */
  .open-panel .hours { justify-content: flex-start; gap: 6px 10px; margin: 10px 0 6px; }
  .open-panel .hours span { min-width: 0; padding: 3px 12px; font-size: .78rem; }
  .open-panel .hours b { font-size: 1.5rem; }
  .ticket-note b { font-size: .86rem; }
  .hero .button { min-width: 0; min-height: 40px; padding: 6px 12px; font-size: .76rem; }
  .hero .button.line-button { gap: 5px; padding: 6px 12px; }
  .hero-badge { gap: 6px; }
  .preopen-badge { margin-top: 0; }
  .hero-badge .ribbon { padding: 4px 12px; font-size: .74rem; }
  .hero .deco-hibiscus.hib-5 { display: none; }
  .hero .button-row { width: 100%; padding: 10px; }
  .access iframe { height: 240px; }
  .menu-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .menu-image img { aspect-ratio: 1; }
  .menu-body { padding: 12px; }
  .menu-body { padding: 10px 10px 12px; }
  .menu-body h3 { font-size: .8rem; letter-spacing: 0; line-height: 1.35; overflow-wrap: anywhere; }
  .menu-body strong { font-size: 1.1rem; }
  .menu-grid { gap: 10px; }
  .menu-body p { display: none; }
  .sp-only-block { display: block; }
  .hero-badge .ribbon { padding: 5px 16px; font-size: .78rem; letter-spacing: .06em; }
  .hero h1 { font-size: clamp(1.5rem, 6.2vw, 2.2rem); }
  .center-message { font-size: 1rem; letter-spacing: .02em; }
  /* 2行になる丸見出しは左揃えにし、アイコンを1行目に合わせる */
  .pill-title { align-items: flex-start; text-align: left; font-size: 1.02rem; }
  .pill-title .pill-icon, .pill-title .hibiscus { margin-top: 2px; }
  .hero-lead { font-size: .9rem; }
  .hero-photo { margin-top: 30px; }
  .hero-photo img { aspect-ratio: 1.5; border-width: 6px; border-radius: 22px; }
  .hero-photo .deco-hibiscus { left: -6px; width: 64px; height: 64px; }
  .open-info { margin-top: -50px; padding: 90px 0 56px; }
  .center-message::before, .center-message::after { display: none; }
  .open-panel { padding: 22px 18px 20px; }
  .check-list { grid-template-columns: 1fr; }
  .ticket-panel { padding: 30px 16px 26px; }
  .ticket-panel .deco-monstera { width: 90px; height: 90px; }
  .ticket-price b { -webkit-text-stroke: 4px #fff; }
  .wood-board { padding: 12px 18px; font-size: 1rem; text-align: left; }
  .scene-lead span::before, .scene-lead span::after { width: 34px; }
  .scene-cards { gap: 22px 12px; }
  .scene-cards .ribbon { font-size: .74rem; padding: 4px 12px; letter-spacing: .04em; }
  .hibiscus-list { padding: 12px 14px; font-size: .8rem; gap: 6px; }
  .kd-bubble { padding: 12px 14px; font-size: .84rem; line-height: 1.6; }
  .kd-heart { width: 24px; height: 24px; }
  .child-cafe { padding: 26px 18px 20px; }
}

@media print {
  .hero-script, .date-boards li { transform: none; }
  .open-info, .ticket, .rental, .child-cafe, .line-block { background: white; box-shadow: none; }
  .scene-tile { background: #ddd; }
  .outline-text, .ticket-price b { -webkit-text-stroke: 0; text-shadow: none; }
}

/* ---------- こども食堂・OASISチケット（支援者向けチラシの黄色×緑×ピンク） ---------- */
/* トップの #kodomo セクションと kodomo.php で共用。部品は parts/kodomo-supporters.php */
.kodomo {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(123,192,67,.22) 0, rgba(123,192,67,0) 32%),
    radial-gradient(circle at 100% 100%, rgba(247,200,66,.45) 0, rgba(247,200,66,0) 34%),
    linear-gradient(180deg, #FFFBEA 0%, var(--hw-kids) 100%);
  text-align: center;
}
.kd-title {
  margin: 0 0 14px;
  color: var(--hw-wood-dk);
  font-size: clamp(1.7rem, 4.4vw, 2.6rem);
  line-height: 1.45;
  letter-spacing: .04em;
}
.kd-ocean { color: var(--hw-ocean); }
.kd-pink { color: var(--hw-pink); }
.kd-leaf {
  display: inline-block;
  width: 26px;
  height: 26px;
  vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2335793F' d='M3 21C3 9 10 3 21 3c0 11-6 18-18 18Zm2-2c8-1 12-6 13-13-7 1-12 5-13 13Z'/%3E%3Cpath stroke='%2335793F' stroke-width='1.4' d='M5 19l9-9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kd-leaf.flip { transform: scaleX(-1); }
.kd-leaf.small { width: 20px; height: 20px; }
.kd-intro {
  display: grid;
  gap: 28px;
  margin-top: 10px;
  text-align: left;
}
.kd-copy p { margin: 0 0 12px; font-size: .98rem; font-weight: 500; color: var(--hw-wood-dk); }
.kd-bubble {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px !important;
  padding: 16px 20px;
  color: var(--hw-wood-dk);
  font-weight: 700;
  line-height: 1.7;
}
/* 黄色の丸は縁をぼかした楕円として背後に敷く（文字はぼかさない） */
.kd-bubble::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10px -18px;
  border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%;
  background: #FFF0B3;
  filter: blur(10px);
  pointer-events: none;
}
.kd-heart { flex-shrink: 0; width: 30px; height: 30px; fill: var(--hw-pink-deco); }
/* チケットの見本 */
.kd-ticket-col { display: grid; justify-items: center; gap: 12px; }
.kd-ticket {
  width: min(100%, 420px);
  padding: 18px 22px 20px;
  border: 3px dashed rgba(138,90,43,.35);
  border-radius: 12px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0 2px, rgba(255,255,255,0) 2px 5px),
    linear-gradient(180deg, #FFF7DD, #F6E8C4);
  box-shadow: 0 10px 24px rgba(74,46,18,.16);
  text-align: left;
}
.kd-ticket-head { display: flex; align-items: center; gap: 14px; }
.kd-ticket-head img { width: 52px; height: 52px; }
.kd-ticket-head b { display: block; color: var(--hw-ocean); font-size: 1.5rem; font-weight: 900; letter-spacing: .06em; line-height: 1.1; }
.kd-ticket-head span { display: block; color: var(--hw-wood-dk); font-size: 1.05rem; font-weight: 900; }
.kd-ticket-head small { display: block; color: var(--hw-wood); font-size: .72rem; font-weight: 700; }
.kd-ticket-lines { display: grid; gap: 8px; margin: 14px 0 0; }
.kd-ticket-lines div { display: grid; grid-template-columns: 8.5em 1fr; align-items: center; gap: 10px; }
.kd-ticket-lines dt { color: var(--hw-wood); font-size: .72rem; font-weight: 700; }
.kd-ticket-lines dd { display: grid; align-items: center; height: 28px; margin: 0; padding: 0 10px; border-radius: 6px; background: rgba(255,255,255,.85); color: rgba(138,90,43,.6); font-size: .68rem; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(138,90,43,.2); }
.kd-price {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 8px 26px;
  border-radius: 999px;
  background: #FFE29A;
  color: var(--hw-wood-dk);
  font-weight: 900;
}
.kd-price b { color: #A93418; font-size: 2.2rem; line-height: 1; letter-spacing: .02em; }
.kd-price small { font-size: 1rem; }
/* 仕組み 3ステップ */
.kd-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 54px 0 22px;
  color: var(--hw-wood-dk);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 900;
  letter-spacing: .06em;
}
.kd-steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kd-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-areas: "num title" "num sub" "icon icon" "text text";
  gap: 2px 12px;
  padding: 22px 22px 20px;
  border: 3px solid #fff;
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  text-align: left;
  box-shadow: var(--hw-shadow);
}
.kd-num {
  grid-area: num;
  display: grid;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 900;
  place-content: center;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.5);
}
.kd-num.ocean { background: var(--hw-ocean); }
.kd-num.palm { background: var(--hw-palm); }
.kd-num.coral { background: var(--hw-coral); }
.kd-steps h4, .kd-steps h3 { grid-area: title; margin: 0; color: var(--hw-wood-dk); font-size: 1.15rem; font-weight: 900; line-height: 1.4; }
.kd-steps small { grid-area: sub; min-height: 2.6em; color: var(--hw-wood); font-size: .8rem; font-weight: 700; }
.kd-icon { grid-area: icon; display: grid; height: 76px; margin: 12px 0 6px; place-content: center; }
.kd-icon svg { width: 72px; height: 72px; fill: none; stroke: var(--hw-palm); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kd-steps p { grid-area: text; margin: 0; font-size: .9rem; }
/* トップ用の簡略3ステップ（横1行） */
.kd-steps-mini { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.kd-steps-mini li { display: grid; grid-template-columns: 46px 1fr; grid-template-areas: "num title" "num sub"; column-gap: 12px; align-items: center; padding: 14px 18px; border: 3px solid #fff; border-radius: 999px; background: rgba(255,255,255,.75); text-align: left; box-shadow: var(--hw-shadow); }
.kd-steps-mini .kd-num { grid-area: num; }
.kd-steps-mini b { grid-area: title; color: var(--hw-wood-dk); font-size: 1.02rem; line-height: 1.3; }
.kd-steps-mini small { grid-area: sub; color: var(--hw-wood); font-size: .76rem; font-weight: 700; }
/* メリット／方法 */
.kd-grid { display: grid; gap: 18px; margin-top: 26px; text-align: left; align-items: start; }
.kd-panel { padding: 22px 24px 24px; border: 3px solid #fff; border-radius: 20px; box-shadow: var(--hw-shadow); }
.kd-panel.pink { background: #FFF0F4; }
.kd-panel.palm { background: #F1F8EA; }
.kd-check, .kd-how { margin: 0; padding: 0; list-style: none; }
.kd-check li { position: relative; padding: 6px 0 6px 30px; font-size: .95rem; font-weight: 700; color: var(--hw-wood-dk); }
.kd-check li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--hw-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 10.5l3.2 3L15 7'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.kd-how { counter-reset: how; }
.kd-how li { position: relative; padding: 8px 0 8px 40px; counter-increment: how; }
.kd-how li::before {
  content: counter(how);
  position: absolute;
  top: 10px;
  left: 0;
  display: grid;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--hw-palm);
  color: #fff;
  font-size: .95rem;
  font-weight: 900;
  place-content: center;
}
.kd-how b { display: block; color: var(--hw-palm-dk); font-size: .98rem; }
.kd-how span { display: block; font-size: .86rem; }
/* 締めの言葉 */
.kd-closing { max-width: 760px; margin: 36px auto 0; }
.kd-quote { margin: 0 0 10px; color: #A93418; font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 900; letter-spacing: .04em; }
.kd-closing > p:not(.kd-quote):not(.kd-cta) { margin: 0; font-size: .95rem; font-weight: 500; color: var(--hw-wood-dk); }
.kd-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 22px 0 0; }
.child-link { display: inline-block; margin-left: 6px; color: var(--hw-ocean-dk); font-weight: 900; text-underline-offset: .25em; }

/* ---------- kodomo.php（子ページ） ---------- */
.kd-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 8vw, 90px) 0 clamp(32px, 5vw, 48px);
  background:
    radial-gradient(circle at 12% 20%, rgba(247,200,66,.5) 0, rgba(247,200,66,0) 30%),
    radial-gradient(circle at 90% 80%, rgba(123,192,67,.3) 0, rgba(123,192,67,0) 32%),
    linear-gradient(180deg, #FFFDF3 0%, #FFF4C2 100%);
  text-align: center;
}
.kd-hero-title {
  margin: 0 0 16px;
  color: var(--hw-wood-dk);
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  line-height: 1.35;
  letter-spacing: .04em;
}
.kd-hero-title em { color: var(--hw-pink); font-style: normal; }
.kd-hero-lead { max-width: 640px; margin: 0 auto; font-size: 1rem; font-weight: 500; color: var(--hw-wood-dk); }
.kd-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.kd-jump a { display: inline-block; padding: 8px 20px; border: 2px solid var(--hw-ocean); border-radius: 999px; background: #fff; color: var(--hw-ocean-dk); font-size: .88rem; font-weight: 900; text-decoration: none; }
.kd-jump a:hover { background: var(--hw-ocean); color: #fff; }
.kd-hero .deco-hibiscus { width: 70px; height: 70px; }
.kd-hero .hib-l { top: 30px; left: 4%; transform: rotate(-16deg); }
.kd-hero .hib-r { right: 5%; bottom: 26px; transform: rotate(14deg); }
/* 子どもたちへ（OASISチケット使い方チラシ） */
.kd-kids {
  background:
    radial-gradient(circle at 100% 0%, rgba(123,192,67,.28) 0, rgba(123,192,67,0) 36%),
    radial-gradient(circle at 0% 100%, rgba(247,200,66,.4) 0, rgba(247,200,66,0) 36%),
    #F5FAEC;
  text-align: center;
}
.kd-kids-title { margin: 0 0 8px; color: var(--hw-pink); font-size: clamp(1.7rem, 4.4vw, 2.6rem); line-height: 1.35; letter-spacing: .04em; }
.kd-kids-title em { color: var(--hw-ocean); font-style: normal; }
.kd-menu-board {
  display: inline-grid;
  gap: 2px;
  margin: 8px 0 26px;
  padding: 14px 30px;
  border-radius: 14px;
  background: #fff;
  color: var(--hw-wood-dk);
  font-weight: 900;
  box-shadow: var(--hw-shadow), 0 0 0 1px rgba(138,90,43,.14);
  transform: rotate(-2deg);
}
.kd-menu-board b { color: var(--hw-coral); font-size: 1.6rem; }
.kd-rules { display: grid; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; text-align: left; }
.kd-rules li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; padding: 18px 20px; border: 3px solid #fff; border-radius: 18px; background: rgba(255,255,255,.85); box-shadow: var(--hw-shadow); font-size: .92rem; font-weight: 500; }
.kd-rules li b { color: var(--hw-pink-dk); }
/* .kd-num の grid-area: num は 3ステップ専用。約束リストでは通常配置に戻す */
.kd-rules .kd-num { grid-area: auto; width: 44px; height: 44px; font-size: 1.3rem; }
.kd-rules li p { margin: 0; }
.kd-rules li:nth-child(odd) .kd-num { background: var(--hw-ocean); }
.kd-rules li:nth-child(even) .kd-num { background: var(--hw-palm); }
.kd-kids .child-grid { margin-top: 26px; }
.kd-card {
  display: inline-grid;
  gap: 4px;
  margin-top: 16px;
  padding: 14px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, #FFF8D6, #C9E7F7);
  color: var(--hw-ocean-dk);
  font-weight: 900;
  box-shadow: var(--hw-shadow), 0 0 0 1px rgba(20,95,148,.12);
}
.kd-card small { color: var(--hw-wood-dk); font-size: .78rem; font-weight: 700; }
/* よくあるご質問 */
.kd-faq { text-align: left; }
.kd-faq details { margin-top: 10px; border: 3px solid #fff; border-radius: 16px; background: var(--hw-cream); box-shadow: var(--hw-shadow), 0 0 0 1px rgba(138,90,43,.12); }
.kd-faq summary { padding: 16px 20px 16px 52px; position: relative; cursor: pointer; font-weight: 900; color: var(--hw-wood-dk); list-style: none; }
.kd-faq summary::-webkit-details-marker { display: none; }
.kd-faq summary::before { content: "Q"; position: absolute; top: 14px; left: 16px; display: grid; width: 26px; height: 26px; border-radius: 50%; background: var(--hw-ocean); color: #fff; font-size: .9rem; place-content: center; }
.kd-faq details p { margin: 0; padding: 0 20px 18px 52px; font-size: .92rem; }
@media (min-width: 768px) {
  .kd-intro { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 44px; }
  .kd-steps { grid-template-columns: repeat(3, 1fr); }
  .kd-steps-mini { grid-template-columns: repeat(3, 1fr); }
  .kd-grid { grid-template-columns: 1fr 1fr; }
  .kd-rules { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .kd-rules { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .kd-ticket { padding: 14px 16px 16px; }
  .kd-ticket-lines div { grid-template-columns: 7.5em 1fr; }
  .kd-steps li { padding: 18px 16px 16px; }
  .kd-cta .button { width: 100%; }
}
@media print {
  .kodomo, .kd-hero, .kd-kids { background: white; }
  .kd-steps li, .kd-panel, .kd-rules li, .kd-faq details { box-shadow: none; }
}

/* ---------- party.php（貸し切りプランの子ページ） ---------- */
.pt-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 8vw, 90px) 0 clamp(40px, 6vw, 64px);
  background:
    radial-gradient(circle at 0% 100%, rgba(62,139,73,.2) 0, rgba(62,139,73,0) 34%),
    radial-gradient(circle at 100% 0%, rgba(58,167,199,.3) 0, rgba(58,167,199,0) 34%),
    linear-gradient(180deg, #BFE1F5 0%, #E4F1F8 60%, var(--hw-sky-light) 100%);
  text-align: center;
}
.pt-hero .container { position: relative; }
.pt-hero .rental-title { font-size: clamp(2.3rem, 7vw, 4.6rem); }
.pt-hero .deco-palm { width: min(30vw, 300px); height: min(30vw, 300px); opacity: .8; }
.pt-hero .palm-l { top: -70px; left: -120px; transform: rotate(96deg); }
.pt-hero .palm-r { top: -70px; right: -120px; transform: scaleX(-1) rotate(96deg); }
.pt-hero .deco-hibiscus { width: 72px; height: 72px; }
.pt-hero .hib-l { left: 6%; bottom: 40px; transform: rotate(-16deg); }
.pt-hero .hib-r { right: 7%; top: 44%; transform: rotate(14deg); }
.pt-sign-l { position: absolute; top: -10px; left: 0; z-index: 2; font-size: .68rem; transform: rotate(-7deg); }
.pt-script { position: absolute; top: -6px; right: 0; z-index: 2; margin: 0; color: var(--hw-pink-dk); font-family: "Pacifico", cursive; font-size: clamp(1rem, 1.8vw, 1.35rem); line-height: 1.35; text-align: right; transform: rotate(8deg); text-shadow: 0 1px 0 #fff; }
.pt-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.pt-jump a { display: inline-block; padding: 8px 18px; border: 2px solid var(--hw-ocean); border-radius: 999px; background: #fff; color: var(--hw-ocean-dk); font-size: .86rem; font-weight: 900; text-decoration: none; }
.pt-jump a:hover { background: var(--hw-ocean); color: #fff; }
.pt-h2 { margin: 0 0 26px; color: var(--hw-wood-dk); text-align: center; }
.pt-scenes { padding-top: 40px; }
.pt-scenes .scene-lead { margin-top: 0; }
.pt-scene-note { margin: 22px 0 0; color: var(--hw-wood-dk); font-size: .92rem; font-weight: 700; }
.pt-features { background: var(--hw-paper); }
.pt-feature-grid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; text-align: left; }
.pt-feature-grid li { display: grid; grid-template-columns: 46px 1fr; grid-template-areas: "num title" "text text"; gap: 6px 14px; align-items: center; padding: 22px 24px; border: 3px solid #fff; border-radius: 20px; background: var(--hw-cream); box-shadow: var(--hw-shadow), 0 0 0 1px rgba(138,90,43,.12); }
.pt-feature-grid .kd-num { grid-area: num; }
.pt-feature-grid h3 { grid-area: title; margin: 0; color: var(--hw-wood-dk); font-size: 1.08rem; font-weight: 900; line-height: 1.4; }
.pt-feature-grid p { grid-area: text; margin: 0; font-size: .9rem; }
.pt-info { margin-top: 26px; }
.pt-flow { background: var(--hw-sky-light); }
.pt-faq { background: var(--hw-paper); }
.pt-faq details { max-width: 860px; margin-inline: auto; }
.pt-tagline { margin: 34px 0 0; color: var(--hw-ocean); font-family: "Pacifico", cursive; font-size: clamp(1.05rem, 2vw, 1.4rem); text-align: center; }
#pt-contact .line-block { margin: 0; }
@media (min-width: 768px) {
  .pt-feature-grid { grid-template-columns: 1fr 1fr; }
  .pt-scenes .scene-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .pt-sign-l, .pt-script { display: none; }
  .pt-hero .deco-palm { display: none; }
  .pt-hero .deco-hibiscus { width: 48px; height: 48px; }
}

/* ---------- recruit.php（スタッフ募集。求人チラシ準拠） ---------- */
.rc-hero { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 80px) 0 clamp(36px, 6vw, 64px); background: radial-gradient(circle at 0% 100%, rgba(62,139,73,.22) 0, rgba(62,139,73,0) 36%), radial-gradient(circle at 100% 0%, rgba(62,139,73,.18) 0, rgba(62,139,73,0) 36%), linear-gradient(180deg, #F6FBF2 0%, #EEF5E6 100%); text-align: center; }
.rc-hero .deco-monstera { width: min(28vw, 240px); height: min(28vw, 240px); opacity: .5; }
.rc-hero .rc-mon-l { left: -60px; bottom: -40px; transform: rotate(24deg); }
.rc-hero .rc-mon-r { right: -60px; top: -40px; transform: scaleX(-1) rotate(24deg); }
.rc-hero .container { position: relative; }
.rc-lockup { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--hw-ocean-dk); font-size: 1.05rem; font-weight: 900; letter-spacing: .12em; }
.rc-lockup img { width: 56px; height: 56px; }
.rc-title { margin: 0 0 12px; color: var(--hw-palm-dk); font-size: clamp(2.6rem, 8vw, 4.8rem); line-height: 1.15; letter-spacing: .06em; }
.rc-sub { margin: 0 0 22px; }
.rc-sub .ribbon { font-size: 1.05rem; }
.rc-sub .ribbon b { color: #FFE27A; }
.rc-badges { justify-content: center; margin: 0; }
.rc-badges li:nth-child(1) { --badge: var(--hw-palm); }
.rc-badges li:nth-child(2) { --badge: var(--hw-ocean); }
.rc-badges li:nth-child(3) { --badge: var(--hw-wood); }
.rc-badges li:nth-child(4) { --badge: var(--hw-palm-dk); }
.rc-msg { margin: 26px 0 0; }
.rc-detail { background: var(--hw-paper); }
.rc-table { margin-top: 0; }
.rc-table dt { color: var(--hw-palm-dk); }
.rc-table dd { font-weight: 500; }
.rc-table dd small { display: block; color: var(--hw-wood); font-size: .82rem; font-weight: 700; }
.rc-table dd em { color: #A93418; font-style: normal; font-weight: 900; }
.rc-wage { display: inline-block; margin-right: 10px; color: var(--hw-wood-dk); font-size: 1.35rem; font-weight: 900; }
.rc-tags { margin-top: 20px; text-align: center; }
.rc-apply .line-block { max-width: 720px; margin: 0 auto; padding: 30px 24px 28px; }
.rc-apply-title { margin: 2px 0 6px; color: var(--hw-line-dk); font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 900; letter-spacing: .04em; }
.rc-apply-title span { color: var(--hw-line); font-size: 1.15em; }
.rc-apply-lead { margin: 0 0 12px; color: var(--hw-wood-dk); font-weight: 700; }
.rc-line-btn { font-size: 1.05rem; min-height: 56px; padding: 8px 30px; }
.rc-apply .note { margin-top: 12px; }
.rc-apply .note a { color: var(--hw-wood-dk); font-weight: 900; }
@media (max-width: 767px) {
  .rc-hero .deco-monstera { display: none; }
  .rc-badges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rc-wage { font-size: 1.15rem; }
}

/* ---------- menu.php（提供メニュー） ---------- */
/* CONTACT と同じ柄を固定し、長いページでも途切れずメニュー領域だけに表示する */
.mn-page { position: relative; isolation: isolate; clip-path: inset(0); padding: 40px 32px; background: var(--hw-sky-light); --pattern-color: var(--hw-lagoon); --pattern-angle: 25deg; }
.mn-page::before { content: ""; position: fixed; z-index: -1; top: calc(50% - 100vmax); left: calc(50% - 100vmax); width: 200vmax; height: 200vmax; background-color: var(--pattern-color); -webkit-mask-image: url("../images/hawaii/pattern-tile.svg"); mask-image: url("../images/hawaii/pattern-tile.svg"); -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-size: 300px 300px; mask-size: 300px 300px; transform: rotate(var(--pattern-angle)); pointer-events: none; }
/* 生成りの紙に、控えめな横の織り目を重ねる */
.mn-sheet { position: relative; isolation: isolate; overflow: hidden; max-width: 1200px; margin-inline: auto; border-radius: 20px; background-color: #faf6ec; background-image: repeating-linear-gradient(0deg, rgba(133, 111, 77, .03) 0 1px, transparent 1px 4px); box-shadow: 0 12px 36px rgba(37, 88, 92, .16), 0 2px 6px rgba(94, 77, 49, .08); }
.mn-sheet > .deco-palm { z-index: -1; width: clamp(100px, 20vw, 260px); height: clamp(100px, 20vw, 260px); color: var(--hw-palm); opacity: .8; pointer-events: none; }
.mn-palm-tl { top: -28px; left: -28px; transform: rotate(90deg); }
.mn-palm-tr { top: -28px; right: -28px; transform: rotate(180deg); }
.mn-palm-bl { bottom: -28px; left: -28px; }
.mn-palm-br { bottom: -28px; right: -28px; transform: rotate(-90deg); }
@media (min-width: 768px) {
  /* 上部の葉はヘッダーの下・本文の外側に固定する */
  .mn-sheet > .mn-palm-tl, .mn-sheet > .mn-palm-tr { position: fixed; top: 84px; width: clamp(100px, 12vw, 180px); height: clamp(100px, 12vw, 180px); }
  .mn-palm-tl { left: -80px; }
  .mn-palm-tr { right: -80px; }
}
@media (max-width: 767px) {
  .mn-page { padding: 20px 12px; }
  .mn-page::before { -webkit-mask-size: 280px 280px; mask-size: 280px 280px; }
  .mn-sheet { border-radius: 14px; }
}
/* 動く装飾は使わず、印刷時は紙と背景を白に戻す */
@media print {
  .mn-page { padding: 0; clip-path: none; background: #fff; }
  .mn-page::before, .mn-sheet > .deco-palm { display: none; }
  .mn-sheet { max-width: none; overflow: visible; border-radius: 0; background: #fff; box-shadow: none; }
}
.mn-hero { padding-block: clamp(24px, 4vw, 48px) 12px; text-align: center; }
.mn-logo { width: 84px; height: 84px; margin-inline: auto; object-fit: contain; }
.mn-hero h1 { margin: 4px 0 10px; color: var(--hw-wood-dk); font-family: "Pacifico", cursive; font-size: clamp(3.8rem, 9vw, 6rem); font-weight: 400; line-height: 1.15; }
/* カテゴリ案内はスマートフォンで横スクロールできるチップにする。 */
.mn-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 4px; list-style: none; }
.mn-jump a { display: inline-block; padding: 8px 18px; border: 2px solid var(--hw-ocean); border-radius: 999px; background: #fff; color: var(--hw-ocean-dk); font-size: .86rem; font-weight: 900; text-decoration: none; }
.mn-jump a:hover { background: var(--hw-ocean); color: #fff; }
.mn-jump a:focus-visible { outline: 2px solid var(--hw-ocean-dk); outline-offset: 2px; }
@media (max-width: 767px) {
  .mn-jump { flex-wrap: nowrap; justify-content: flex-start; gap: 8px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .mn-jump::-webkit-scrollbar { display: none; }
  .mn-jump li { flex: 0 0 auto; }
  .mn-jump a { padding: 6px 12px; font-size: .8rem; }
}
.mn-note { margin: 0 0 8px; font-size: .85rem; color: var(--hw-wood-dk); }
.mn-content, .mn-items > *, .mn-item > *, .mn-item-heading > * { min-width: 0; }
.mn-category { padding-block: 36px 44px; }
.mn-category + .mn-category { border-top: 2px dotted rgba(72,49,27,.22); }
/* 共通の scroll-padding-top（76px）に、ヘッダー直下の余白だけを加えます。準備中バーは通常フローでスクロールします。 */
.mn-category .pt-h2 { margin-bottom: 32px; scroll-margin-top: 20px; }
.mn-category-script { display: block; margin-bottom: 10px; color: var(--hw-palm-dk); font-family: "Pacifico", cursive; font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 400; letter-spacing: 0; line-height: 1.5; }
.mn-category-ja { font-size: 1.1rem; }
.mn-hours { display: inline-block; margin-left: 12px; color: var(--hw-ocean-dk); font-size: .9rem; }
.mn-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 36px; align-items: start; }
.mn-item { overflow-wrap: anywhere; }
.mn-item-photo { display: grid; grid-template-columns: 225px minmax(0, 1fr); gap: 12px; }
.mn-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid #a8c398; border-radius: 18px; box-shadow: var(--hw-shadow); }
.mn-item h3 { margin: 0; color: var(--hw-wood-dk); font-size: 1.1rem; font-weight: 900; line-height: 1.6; }
.mn-description { margin: 10px 0 0; font-size: .88rem; white-space: pre-line; }
.mn-price { margin: 0; color: var(--hw-wood-dk); font-size: 1.25rem; font-weight: 900; text-align: right; white-space: nowrap; }
.mn-item-text { padding-block: 12px; }
.mn-item-heading { display: flex; align-items: center; gap: 10px; }
.mn-item-heading h3 { flex: 0 1 auto; }
.mn-leader { flex: 1 0 24px; min-width: 24px; border-bottom: 2px dotted var(--hw-sand); }
.mn-item-heading .mn-price { flex: 0 0 auto; margin: 0; }
.mn-item-photo .mn-item-heading { gap: 6px; }
.mn-item-photo h3 { font-size: 1rem; }
.mn-item-photo .mn-leader { flex-basis: 16px; min-width: 16px; }
.mn-allergy { display: block; margin-top: 8px; color: var(--hw-wood-dk); font-size: .75rem; }
.mn-group-note { margin-top: 30px; padding: 22px 24px; border-radius: 20px; background: var(--hw-cream); box-shadow: var(--hw-shadow); text-align: center; }
.mn-group-note-intro { margin: 0 0 30px; padding: 16px 20px; }
/* ランチに付くスープ・サラダの案内（SET DRINK の上に1行で強調） */
.mn-group-note.mn-group-note-intro .mn-lunch-includes { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px dotted rgba(72, 49, 27, .18); font-weight: 700; font-size: 1rem; color: var(--hw-palm-dk); }
/* SET DRINK：左にバッジ、右に案内文＋料金表。バッジは右側全体の高さの中央に揃える */
.mn-set-drink { display: flex; align-items: center; justify-content: center; gap: 12px 28px; text-align: left; }
.mn-set-drink .ribbon { flex-shrink: 0; }
.mn-set-drink-body { display: grid; gap: 8px; }
.mn-group-note .mn-set-drink-lead { margin: 0; font-weight: 700; color: var(--hw-wood-dk); }
.mn-set-drink-options { display: grid; gap: 4px; margin: 0; font-size: .9rem; line-height: 1.7; }
.mn-set-drink-options > div { display: grid; grid-template-columns: 5em 1fr; align-items: baseline; column-gap: 10px; }
.mn-set-drink-options dt { color: var(--hw-pink); font-weight: 900; font-size: 1.02rem; white-space: nowrap; }
.mn-set-drink-options dd { margin: 0; }
.mn-group-note p { margin: 12px 0 0; font-size: .9rem; }
.mn-group-note p:first-child { margin: 0; }
.mn-empty { padding: 50px 16px; border-radius: 20px; background: var(--hw-cream); text-align: center; }
.mn-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding-block: 36px 72px; }
.mn-actions .button { max-width: 100%; text-align: center; }
@media (max-width: 767px) {
  .mn-items { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .mn-item-photo { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 14px; }
  .mn-item h3 { font-size: 1rem; }
  .mn-description { font-size: .88rem; line-height: 1.75; }
  .mn-group-note { padding: 20px 16px; }
  .mn-logo { width: 60px; height: 60px; }
  .mn-group-note-intro { padding: 14px 16px; }
  .mn-group-note-intro p { text-align: left; line-height: 1.75; }
  .mn-category { padding-block: 28px 36px; }
  .mn-category .pt-h2 { scroll-margin-top: 16px; }
  .mn-group-note-intro { text-align: left; }
  /* SET DRINK：SP はバッジを上に置いて縦積み。案内文と料金表は左揃えのまま中央にまとめる */
  .mn-set-drink { flex-direction: column; align-items: center; gap: 10px; }
  .mn-set-drink-body { width: 100%; max-width: 20em; gap: 6px; }
  .mn-set-drink-options dt { font-size: 1rem; }
}

/* ---------- レイアウトレビュー反映（余白・揃え） ---------- */
/* こども食堂 子ページ：締めの一文は横線を flex で両端に付け、下余白を持たない */
.kd-kids .center-message { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 0; }
.kd-kids .center-message::before, .kd-kids .center-message::after { margin: 0; flex-shrink: 0; }
.kd-faq .contact-grid > div:last-child { align-self: center; }
.kd-faq .contact-grid { gap: 24px 35px; }
.kd-faq .contact-grid p { margin: 0 0 10px; }
/* 求人：LINEカード内はボタン→ID の順なので ID 側に間隔を持たせる */
.rc-apply .line-id { margin-top: 12px; }
/* 提供メニュー：写真付き品目も商品名の横に価格を揃え、行ピッチを詰める */
.mn-items { gap: 16px 36px; }
.mn-item-text { padding-block: 6px; }
.mn-description { margin-top: 6px; }
.mn-item-photo .mn-item-body { display: flex; flex-direction: column; min-height: 100%; }
.mn-category-script { line-height: 1.2; }
.mn-actions { padding-block: 36px 120px; }
@media (max-width: 767px) {
  .open-info { padding: 72px 0 48px; }
  .menu-ribbon-row { margin-top: 32px; }
  .hero .button { min-height: 44px; padding: 6px 10px; }
  .kids .split { gap: 28px; }
  .access.split { gap: 24px; }
  .ticket-panel .tk-l { top: -40px; left: -40px; width: 70px; height: 70px; }
  .kd-hero .hib-r { width: 44px; height: 44px; bottom: 12px; right: 3%; }
  .kd-kids .center-message { font-size: .92rem; letter-spacing: 0; }
  .rc-sub .ribbon { font-size: .86rem; padding: 6px 16px; letter-spacing: .05em; }
  .rc-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 220px; margin-inline: auto; }
  .mn-items { gap: 12px; }
  .mn-item-text { padding-block: 4px; }
  .mn-item-photo { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mn-photo { aspect-ratio: 4 / 3; }
  .mn-featured-single .mn-item-photo { grid-template-columns: minmax(0, 1fr); }
}

/* ご利用案内の設備タグ：2段目（お子さま向け） */
.info-list .tags-row2 { margin-top: 8px; }

/* CONTACT の電話ボタン：左に受話器アイコン、右にラベルと番号を左揃えで。幅は内容に合わせる */
.tel-button-icon { flex-direction: row; justify-content: center; align-items: center; gap: 14px; width: auto; max-width: none; padding: 16px 34px 16px 28px; }
.tel-button-icon > span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.tel-button-icon > span small { font-size: .74rem; letter-spacing: .06em; opacity: .95; }
.tel-button-icon > span strong { font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: .06em; }
.tel-button-icon .tel-icon { flex-shrink: 0; width: 36px; height: 36px; }
.contact-tel .tel-panel { gap: 12px; }
@media (max-width: 480px) { .tel-button-icon .tel-icon { width: 32px; height: 32px; } .tel-button-icon { gap: 10px; } }

/* ==========================================================
   オープン案内（.open-info）レイアウト調整 — Fable レビュー反映
   ========================================================== */
/* 2枚を等高にし、パネル内の縦リズムを1ステップ≒14pxに統一（.preopen-em の margin は .open-panel p{margin:0} に負けていたので詳細度を上げる） */
.open-panels { align-items: stretch; gap: 24px; }
.open-panel  { padding: 28px; }
.open-panel .pill-title  { margin: 0 0 14px; }
.open-panel .preopen-em  { margin: 0 0 14px; }
.open-panel .hours       { margin: 0; }
.open-panel .hours-note  { margin: 12px 0 0; }
/* PC：バッジ幅を「通常営業時間」が収まる幅に揃え、時刻の開始位置を左右で一致させる */
@media (min-width: 768px) {
  .open-panel .hours span { min-width: 8em; }
}
/* SP：NEWSバーへの潜り込みをやめて上余白を確保、リボンを360px幅でも1行に収める */
@media (max-width: 767px) {
  .open-info { margin-top: 0; padding: 48px 0; }
  .open-panels { gap: 20px; }
  .open-panel  { padding: 22px 18px; }
  .open-panel .hours { margin: 0; }
  .open-panel .hours-note { margin: 10px 0 0; }
  .open-panel .preopen-em .ribbon { padding: 6px 16px; font-size: .82rem; letter-spacing: .02em; line-height: 1.5; }
}

/* ==========================================================
   SP（767px以下）レビュー反映 — 2026-09-21
   PC（768px以上）には影響させない。すべて SP メディアクエリ内。
   ========================================================== */
@media (max-width: 767px) {
  /* --- オープン案内（.open-panels）：2枚のパネルで丸見出し・リボンの幅と揃えを統一 ---
     ・丸見出しはパネル内側いっぱいの幅にし、アイコン＋文字を「枠全体の高さの中央」に揃える
       （1612〜1613行の flex-start / margin-top:2px を .open-panel 配下だけ上書き）
     ・赤パネルのリボン（6日間限定！）も同じ幅・中央寄せにして、青パネルの丸見出しと見た目を揃える */
  .open-panel .pill-title { display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: center; text-align: center; }
  .open-panel .pill-title .pill-icon, .open-panel .pill-title .hibiscus { margin-top: 0; }
  .open-panel .preopen-em .ribbon { display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: center; text-align: center; }


  /* --- トップ MENU：カードが奇数枚のとき最後の1枚が半分幅で左に取り残されるので、横長カード（写真左・名前と価格右）で全幅に --- */
  .menu-grid > .menu-card:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: 40% minmax(0, 1fr); align-items: stretch; }
  .menu-grid > .menu-card:last-child:nth-child(odd) .menu-image img { height: 100%; }
  .menu-grid > .menu-card:last-child:nth-child(odd) .menu-body { justify-content: center; padding: 12px 14px; }
  .menu-grid > .menu-card:last-child:nth-child(odd) .menu-body strong { margin-top: 6px; }

  /* --- トップ・こども食堂 協賛ボタン：2行ラベル（本文＋「公式LINEへ」）をアイコン横で中央揃えに --- */
  .kd-sponsor { justify-content: center; }
  .kd-sponsor span { justify-items: center; text-align: center; }

  /* --- こども食堂：締めの引用文（20文字）が「る」」だけ2行目に落ちないよう1行に収める --- */
  .kd-quote { font-size: 1.02rem; letter-spacing: .02em; }

  /* --- 貸し切り：特徴カードの見出し「大型スクリーン＆プロジェクター」（15文字）が「ター」だけ折り返さないよう、番号の右に収める --- */
  .pt-feature-grid li { padding: 18px 18px 20px; gap: 6px 12px; }
  .pt-feature-grid h3 { font-size: 1rem; letter-spacing: 0; }

  /* --- 求人：時給欄「土日や時間帯によって時給UP」が「時／給UP」で割れるので、金額の下に1行で置く --- */
  .rc-wage + em { display: block; margin-top: 2px; }
  .rc-wage { margin-right: 0; }

  /* --- こども食堂・貸し切りの電話ボタン：縦に間延びしていた丸ボタンをトップの電話ボタンと近い高さに --- */
  .tel-button:not(.tel-button-icon) { padding: 12px 18px; }
}

/* --- 追加調整（2026-09-21 追記分）--- */
@media (max-width: 767px) {

  /* CONCEPT 本文：SP用改行を入れた3段落目の最終行（約367px）が本文幅350pxに収まるよう、文字サイズを一段落とす */
  .concept .copy p { font-size: .875rem; line-height: 1.9; }

  /* MENU「ランチ共通」：2・3行目（約314px）が段落幅312pxに確実に収まるよう、文字を少しだけ小さく */
  .sp-only-block p { font-size: .82rem; }

  /* --- 上部ヘッダー：SPでは初期表示から常に画面上端に固定 ---
     共通ヘッダーの高さは style.css の76px。本文の上余白で先頭コンテンツとの重なりを防ぐ。
     スクロールで is-hidden / is-peek が付いても、SPでは表示位置と影を変えない。
     body を付けて、後から読み込む menu.css の sticky 指定より優先する。 */
  body { padding-top: 76px; }
  body .site-header,
  body .site-header.is-hidden,
  body .site-header.is-peek {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    transform: none;
    transition: none;
    will-change: auto;
    box-shadow: 0 2px 12px rgba(20,95,148,.08);
  }
  .hero { min-height: calc(100svh - 76px); }
}

/* --- KIDS 追加調整（見出し2行目を360px幅でも1行に／丸バッジを中央寄せ） --- */
@media (max-width: 767px) {
  /* 実測（Zen Maru Gothic）では13文字幅 ≒ 1.1 × font-size × 13。本文幅320px（360px端末）に収まる上限は約22px なので幅連動にする */
  /* 1行目「キッズスペース完備。」は元のサイズのまま、2行目だけ縮小（ユーザー指示） */
  #kids h2 .kids-sub { display: block; font-size: min(1.45rem, 5.9vw); letter-spacing: .02em; }
  /* 500行の .ok-badges.kids-badges { margin: 18px 0 0 } と同じ詳細度で上書きし、中央揃えの本文に合わせる */
  .ok-badges.kids-badges { justify-content: center; margin: 18px auto 0; }  /* 本文：SP用改行の4行目「ベビーカーでのご来店やバリアフリーにも対応。」が360px幅でも1行に収まるよう、CONCEPT本文と同じサイズに */
  #kids .copy p { font-size: .875rem; line-height: 1.9; }
}

/* KIDS の見出し：2行目「お子さま連れも、ゆっくりと。」が1行に収まるサイズに */
#kids-title { font-size: clamp(1.5rem, 2.5vw, 1.9rem); letter-spacing: .03em; line-height: 1.5; }
@media (max-width: 767px) { #kids-title { font-size: 1.35rem; } }