@charset "UTF-8";

/* ============================================================
   ステラテラス 共通スタイル

   ・白を基調に、余白を大きく（運営会社 NiLOOP のサイトに合わせています）
   ・見出しは太ゴシック＋緑（NiLOOP と同じ見せ方）。明朝はヒーローの1行だけ
   ・色はこの :root だけを直せば全ページに反映されます
   ============================================================ */

:root {
  /* --------------------------------------------------------
     クリームを地に、緑・オレンジ・黄色でメリハリをつける。
     文字は冷たい紺ではなく温かい焦茶。丸ゴシックで柔らかさを出す。
     -------------------------------------------------------- */

  /* ---- 下地 ---- */
  --bg: #fffef8;           /* クリーム。ページ全体の地 */
  --bg-soft: #fff8d9;      /* 少し濃いクリーム */
  --bg-tint: #e9f3e3;      /* 薄い緑。黄色→白→緑と並べたとき、緑とわかる濃さにしてある */
  --bg-blush: #fffbe4;     /* 薄いオレンジ */
  --surface: #ffffff;      /* カードの白 */

  /* 彩度の高い緑の面（白文字をのせる） */
  --field: #ffe45c;
  --forest: #3f5c46;      /* 深緑。写真のエプロンや壁の色 */
  --forest-deep: #2c4231;
  --field-soft: #fff4b8;

  /* ---- 文字と罫線 ---- */
  --ink: #362d26;          /* 温かい焦茶 */
  --ink-soft: #6b5e50;
  --ink-faint: #7a6d5e;
  --line: #ece3d5;
  --line-soft: #f4ede1;

  /* ---- みどり（メイン） ---- */
  --green: #86a984;
  --green-dark: #3f5c46;   /* 文字・ボタン */
  --green-soft: #f2f8f0;

  /* ---- オレンジ ---- */
  --orange: #ef8b2c;
  --orange-dark: #a24f0c;  /* 文字 */
  --orange-soft: #ffeadb;

  /* ---- 黄色 ---- */
  --yellow: #ffe100;
  --yellow-dark: #6f5600;  /* 文字 */
  --yellow-soft: #fffbe4;

  /* 旧名の互換（管理画面などで使用） */
  --block: var(--field);
  --accent: var(--green);
  --accent-dark: var(--green-dark);
  --accent-soft: var(--green-soft);
  --green-bright: #7fb06c;
  --gold: var(--yellow);
  --gold-dark: var(--yellow-dark);
  --gold-soft: var(--yellow-soft);
  --star: var(--yellow);
  --star-dark: var(--yellow-dark);
  --star-soft: var(--yellow-soft);
  --blush: var(--orange);
  --blush-dark: var(--orange-dark);
  --blush-soft: var(--orange-soft);
  --berry: var(--orange);
  --berry-soft: var(--orange-soft);
  --niloop: #54b2a5;
  --niloop-soft: #e8f4f2;
  --leaf: var(--green);
  --leaf-soft: var(--green-soft);
  --sky: var(--green);
  --sky-soft: var(--green-soft);
  --bg-alt: var(--bg-soft);
  --line-strong: #ded3c2;

  /* ---- かたち（まるく） ---- */
  --r-xs: 8px;
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 30px;
  --r-xl: 44px;
  --r-full: 999px;
  --shadow-sm: 0 1px 3px rgba(74, 63, 54, .05);
  --shadow-md: 0 2px 10px rgba(74, 63, 54, .06), 0 14px 34px rgba(74, 63, 54, .07);
  --shadow-lift: 0 4px 14px rgba(74, 63, 54, .08), 0 22px 48px rgba(74, 63, 54, .09);

  /* ---- 文字（丸ゴシックを優先。無い環境では通常のゴシックになる） ---- */
  --font: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic Pro",
          "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic",
          "Meiryo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP",
                "Times New Roman", serif;
  --font-en: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-num: "Segoe UI", system-ui, -apple-system, sans-serif;

  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }

/* hidden が付いたものは必ず隠す。
   display を指定した部品（.btn・.map-grid など）は、これが無いと hidden を付けても消えない。
   「パスワードが初期設定のまま」の帯や、外部主催の欄が出たままになっていた */
[hidden] { display: none !important; }

/* 簡易版（イベント機能なし）のとき、管理画面のイベント関係のメニュー・画面・欄を隠す。
   body の is-lite は admin.js が /api/admin/me を見て付ける */
.is-lite [data-events-only] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.55; font-weight: 700; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--green-dark); text-underline-offset: 4px; text-decoration-thickness: 1px; }
img { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* 線アイコン共通 */
.ico { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none;
       stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------
   ヘッダー
------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header__inner { display: flex; align-items: center; gap: 24px; min-height: 76px; }

.brand {
  display: flex; align-items: center; gap: 11px;
  flex: none; white-space: nowrap;
  color: var(--ink); text-decoration: none;
}
.brand__mark { width: 26px; height: 26px; flex: none; color: var(--gold); }
.brand__name { font-size: 1.24rem; font-weight: 700; letter-spacing: .12em; }
.brand__sub {
  display: block; margin-top: -2px;
  font-family: var(--font-en); font-size: .62rem; font-weight: 500;
  letter-spacing: .3em; color: var(--ink-faint);
}

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.site-nav a {
  position: relative; padding: 8px 15px;
  font-size: .88rem; font-weight: 500; letter-spacing: .08em;
  color: var(--ink-soft); text-decoration: none;
  transition: color .2s;
}
.site-nav a::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 2px;
  height: 1px; background: var(--green); transform: scaleX(0);
  transition: transform .25s ease;
}
.site-nav a:hover { color: var(--green-dark); }
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a.is-cta {
  margin-left: 10px; padding: 11px 24px; border-radius: var(--r-full);
  background: var(--green-dark); color: #fff; font-weight: 700;
  transition: background .2s;
}
.site-nav a.is-cta::after { display: none; }
.site-nav a.is-cta:hover { background: var(--green-dark); color: #fff; }

/* ------------------------------------------------------------
   ボタン
------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 32px; border: 1px solid transparent; border-radius: var(--r-full);
  font-family: inherit; font-size: .95rem; font-weight: 600; line-height: 1.5;
  letter-spacing: .08em; text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--primary { background: var(--green-dark); color: #fff; }
.btn--primary:hover:not(:disabled) { background: #16624f; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover:not(:disabled) { border-color: var(--green); color: var(--green-dark); }
.btn--quiet { background: transparent; color: var(--ink-soft); padding: 9px 16px; font-size: .85rem; }
.btn--quiet:hover:not(:disabled) { background: var(--bg-soft); }
.btn--danger { background: transparent; color: #a4564e; border-color: #e8cdc9; }
.btn--danger:hover:not(:disabled) { background: #fbf1ef; }
.btn--sm { padding: 9px 20px; font-size: .84rem; }
.btn--lg { padding: 19px 44px; font-size: 1rem; }
.btn--block { width: 100%; }

/* 矢印つきのテキストリンク */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .86rem; font-weight: 600; letter-spacing: .1em;
  color: var(--green-dark); text-decoration: none;
}
.link-arrow .ico { width: 16px; height: 16px; transition: transform .25s ease; }
a:hover .link-arrow .ico, .link-arrow:hover .ico { transform: translateX(4px); }

/* ------------------------------------------------------------
   セクションの共通パーツ
------------------------------------------------------------ */
.section { padding: clamp(64px, 10vw, 120px) 0; }

/* 画面上部に固定ヘッダーがあるので、リンクで飛んだときに見出しが隠れないようにする */
section[id], [id].section { scroll-margin-top: 96px; }
@media (max-width: 900px) { section[id], [id].section { scroll-margin-top: 140px; } }

/* ---- 背景の柄 ----
   柄はセクションの「境目」に帯として置く。本文の裏に敷き詰めると
   水玉が変な位置に来て読みづらくなるため、必ず上端の余白部分だけに出すこと */

.section--tint { background-color: var(--bg-tint); background-image: none; }
.section--soft { background-color: var(--bg-soft); background-image: none; }
.section--blush { background-color: var(--bg-blush); background-image: none; }

/* 彩度の高いミントの帯。NiLOOP が大きな面で使っている見せ方で、
   ここだけ色を強くして「どこが何の情報か」を一目でわからせる */
.section--block { background-color: var(--field); }
.section--block .section__title { color: var(--ink); }
.section--block .section__lead { color: #54452a; }
.section--block .section__label { color: var(--orange-dark); }


/* 白いセクションは、右上のやわらかい丸だけで軽く飾る */
.section--deco { position: relative; overflow: hidden; }
.section--deco::before { content: none; }
.section--deco > .wrap { position: relative; z-index: 1; }

.section__head { max-width: 720px; margin-bottom: clamp(40px, 5.5vw, 68px); }
/* 中央揃えは素人っぽく見えやすいので、原則ここでは効かせない */
.section__head--center { margin-inline: 0; text-align: left; }
.section__label {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-family: var(--font-en); font-size: .74rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: var(--orange-dark);
}
/* 見出しの上にのせる、色つきの小さなピル */
.section__pill {
  display: inline-block; margin-bottom: 16px; padding: 9px 24px;
  border-radius: var(--r-full); background: var(--orange); color: #fff;
  font-size: .92rem; font-weight: 700; letter-spacing: .06em;
}
.section__pill--green { background: var(--green); }
.section__pill--yellow { background: var(--yellow); color: #6b4c08; }
.section__pill--white { background: #fff; color: var(--orange-dark); }
/* 日本語のラベルを置いたときは、英字ラベルを重ねて出さない */
.section__pill + .section__label { display: none; }
.section__label::before {
  content: ""; width: 30px; height: 7px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='7' viewBox='0 0 30 7'%3E%3Cpath d='M1 4c2-3 4.5-3 6.5 0S14 7 16 4s4.5-3 6.5 0 6.5 3 6.5 0' fill='none' stroke='%233f5c46' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.section__label::after {
  content: ""; width: 30px; height: 7px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='7' viewBox='0 0 30 7'%3E%3Cpath d='M1 4c2-3 4.5-3 6.5 0S14 7 16 4s4.5-3 6.5 0 6.5 3 6.5 0' fill='none' stroke='%233f5c46' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.section__title {
  font-size: clamp(1.7rem, 4.4vw, 2.6rem); font-weight: 700;
  letter-spacing: .02em; line-height: 1.5; margin-bottom: 22px;
  color: var(--ink);
}
.section__title em {
  font-style: normal; color: var(--green-dark);
  background: linear-gradient(transparent 62%, var(--yellow-soft) 62%);
}
.section__title--ink { color: var(--ink); }
.section__lead { color: var(--ink-soft); font-size: .95rem; max-width: 46em; }

/* ------------------------------------------------------------
   ヒーロー
------------------------------------------------------------ */
.hero { position: relative; overflow: hidden; padding: clamp(64px, 11vw, 132px) 0 clamp(72px, 12vw, 140px); }
.hero__decor { position: absolute; inset: 0; pointer-events: none; }
.hero__inner { position: relative; z-index: 1; max-width: 660px; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px;
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; color: var(--ink-soft);
}
.hero__eyebrow .ico { width: 15px; height: 15px; color: var(--gold); }

.hero__en {
  display: block; margin-bottom: 20px;
  font-family: var(--font-en); font-size: .76rem; font-weight: 700;
  letter-spacing: .4em; color: var(--green-dark);
}
.hero__title {
  font-size: clamp(1.7rem, 5.8vw, 3.4rem); font-weight: 700;
  letter-spacing: .03em; line-height: 1.55; margin-bottom: 28px;
}
.hero__lead { font-size: 1rem; color: var(--ink-soft); margin-bottom: 40px; max-width: 34em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ------------------------------------------------------------
   ①②③ の入口カード
------------------------------------------------------------ */
.pillars { padding: 0 0 clamp(64px, 10vw, 120px); }
.pillar-grid { display: grid; gap: clamp(16px, 2.4vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.pillar {
  position: relative; display: flex; flex-direction: column;
  padding: 34px 30px 30px; background: var(--surface);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pillar__num {
  width: 46px; height: 46px; margin-bottom: 18px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--green); color: #fff;
  font-family: var(--font-num); font-size: 1.05rem; font-weight: 700; line-height: 1;
}
.pillar:nth-child(2) .pillar__num { background: var(--orange); }
.pillar:nth-child(3) .pillar__num { background: var(--yellow); color: #6b4c08; }
.pillar__title {
  font-size: 1.2rem; font-weight: 700;
  letter-spacing: .01em; margin-bottom: 12px; color: var(--ink);
}
.pillar__text { font-size: .9rem; color: var(--ink-soft); margin-bottom: 26px; flex: 1; }
.pillar__badge {
  position: absolute; top: -14px; right: -8px; z-index: 2;
  width: 64px; height: 64px; display: grid; place-items: center;
  border-radius: 50%; background: var(--orange); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 1.25; letter-spacing: .02em;
  text-align: center; transform: rotate(-8deg);
  box-shadow: 0 4px 12px rgba(74, 63, 54, .16);
}
.pillar:nth-child(3) .pillar__badge { background: var(--yellow); color: #6b4c08; transform: rotate(7deg); }

/* ------------------------------------------------------------
   5つの事業
------------------------------------------------------------ */
.service-grid { display: grid; gap: clamp(16px, 2.2vw, 24px); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.service {
  display: flex; flex-direction: column;
  padding: clamp(28px, 3.2vw, 38px) clamp(24px, 2.6vw, 34px);
  background: var(--surface); border-radius: var(--r-md);
}

.service__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.service__icon {
  width: 62px; height: 62px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--green); color: #fff;
}
.service__icon .ico { width: 28px; height: 28px; stroke-width: 1.7; }
.service--event .service__icon { background: var(--yellow); color: #6b4c08; }
.service--cafe  .service__icon { background: var(--orange); color: #fff; }
.service--photo .service__icon { background: var(--field); color: #fff; }
.service--deli  .service__icon { background: var(--yellow); color: #6b4c08; }
.service--shop  .service__icon { background: var(--orange); color: #fff; }
.service__no {
  display: block; margin-bottom: 3px;
  font-family: var(--font-num); font-size: .74rem; font-weight: 700;
  letter-spacing: .18em; color: var(--orange-dark);
}
.service__title { font-size: 1.24rem; font-weight: 700; letter-spacing: .01em; color: var(--ink); }
.service__text { font-size: .9rem; color: var(--ink-soft); margin-bottom: 22px; flex: 1; }
.service__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.service__points li {
  position: relative; padding-left: 20px;
  font-size: .85rem; line-height: 1.85; color: var(--ink-soft);
}
.service__points li::before {
  content: ""; position: absolute; left: 1px; top: .66em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--yellow);
}
.service__points strong { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------
   今月のイベント
------------------------------------------------------------ */
.event-grid { display: grid; gap: clamp(16px, 2.2vw, 24px); grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.event-card {
  display: flex; flex-direction: column;
  padding: 28px 26px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color .25s;
}
.event-card:hover { border-color: var(--green); }
.event-card__top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.event-card__date {
  font-family: var(--font-num); font-size: .82rem; font-weight: 600;
  letter-spacing: .06em; color: var(--ink-soft);
}
.event-card__host {
  padding: 3px 12px; border-radius: var(--r-full);
  font-size: .66rem; font-weight: 600; letter-spacing: .1em; white-space: nowrap;
  background: var(--green-soft); color: var(--green-dark);
}
.event-card--external .event-card__host { background: var(--gold-soft); color: var(--gold-dark); }
.event-card__title {
  font-size: 1.12rem; font-weight: 700;
  letter-spacing: .04em; margin-bottom: 12px;
}
.event-card__text { font-size: .88rem; color: var(--ink-soft); margin-bottom: 22px; flex: 1; }
.event-card__by { font-size: .8rem; color: var(--ink-faint); margin-bottom: 18px; }
.event-empty {
  padding: 56px 28px; text-align: center; color: var(--ink-soft);
  background: var(--bg-soft); border-radius: var(--r-lg);
}

/* お知らせカード（イベントカレンダーの案内など） */
.notice {
  display: flex; gap: 22px; align-items: flex-start;
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(26px, 3.6vw, 36px);
  background: var(--gold-soft); border-radius: var(--r-lg);
}
.notice__icon {
  width: 50px; height: 50px; flex: none;
  display: grid; place-items: center; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .7); color: var(--gold-dark);
}
.notice__icon .ico { width: 24px; height: 24px; }
.notice__title {
  font-size: 1.08rem; font-weight: 700;
  letter-spacing: .04em; margin-bottom: 10px; color: var(--gold-dark);
}
.notice__text { font-size: .89rem; color: var(--ink-soft); margin-bottom: 20px; }
.notice__text strong { color: var(--gold-dark); font-weight: 600; }
.notice__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.notice__actions .btn[hidden] { display: none; }

@media (max-width: 560px) {
  .notice { flex-direction: column; gap: 16px; }
}

/* ------------------------------------------------------------
   ご利用の流れ（3パターン）
------------------------------------------------------------ */
.usecase-grid { display: grid; gap: clamp(18px, 2.6vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: start; }
.usecase { padding: clamp(28px, 3.2vw, 38px); background: var(--surface); border-radius: var(--r-md); }
.usecase__label {
  display: inline-block; padding: 5px 16px; margin-bottom: 18px;
  border-radius: var(--r-full);
  font-family: var(--font-en); font-size: .66rem; font-weight: 600; letter-spacing: .22em;
  background: var(--bg-soft); color: var(--ink-soft);
}
.usecase--event .usecase__label { background: var(--gold-soft); color: var(--gold-dark); }
.usecase--cafe  .usecase__label { background: var(--blush-soft); color: var(--blush-dark); }
.usecase--drop  .usecase__label { background: var(--green-soft); color: var(--green-dark); }
.usecase__title { font-size: 1.18rem; font-weight: 700; letter-spacing: .04em; margin-bottom: 12px; }
.usecase__lead { font-size: .9rem; color: var(--ink-soft); margin-bottom: 24px; }
.usecase__lead strong { color: var(--ink); font-weight: 600; }
.usecase__steps { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: ustep; display: grid; gap: 20px; }
.usecase__steps li {
  position: relative; padding-left: 38px;
  font-size: .87rem; line-height: 1.9; color: var(--ink-soft);
}
.usecase__steps li::before {
  counter-increment: ustep; content: counter(ustep, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-en); font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; color: var(--gold);
}
.usecase__steps strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.usecase__note {
  padding: 20px 22px; border-radius: var(--r-md);
  background: var(--bg-soft); font-size: .84rem; line-height: 1.9; color: var(--ink-soft);
}
.usecase__note strong { color: var(--ink); font-weight: 600; }

/* 営業時間 */
.hours { display: grid; gap: 16px; margin-bottom: 24px; }
.hours__row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.hours__row:last-child { border-bottom: 0; padding-bottom: 0; }
.hours__label { min-width: 5em; font-size: .82rem; font-weight: 600; letter-spacing: .1em; color: var(--ink-soft); }
.hours__value { font-family: var(--font-num); font-size: 1.12rem; font-weight: 600; letter-spacing: .04em; }
.hours__note { font-size: .8rem; color: var(--ink-faint); }

/* ------------------------------------------------------------
   施設情報・アクセス
------------------------------------------------------------ */
.info-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.info-table th, .info-table td {
  padding: 22px 4px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
.info-table th {
  width: 9em; font-size: .82rem; font-weight: 600;
  letter-spacing: .12em; color: var(--ink-faint); white-space: nowrap;
}
.info-table tr:first-child th, .info-table tr:first-child td { border-top: 1px solid var(--line-soft); }

.access-grid { display: grid; gap: clamp(16px, 2.4vw, 26px); grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.access { padding: 30px 26px; background: var(--surface); border-radius: var(--r-md); }
.access__icon { width: 40px; height: 40px; margin-bottom: 16px; display: grid; place-items: center; color: var(--green); }
.access__icon .ico { width: 26px; height: 26px; }
.access__title { font-size: .95rem; font-weight: 600; letter-spacing: .08em; margin-bottom: 8px; }
.access__text { font-size: .86rem; color: var(--ink-soft); margin: 0; }
.access__text strong { color: var(--ink); font-weight: 600; }

/* Google マップの埋め込み */
.map-embed {
  margin-top: clamp(28px, 4vw, 40px);
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-soft);
  aspect-ratio: 16 / 9;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 640px) { .map-embed { aspect-ratio: 4 / 3; } }

/* 汎用の小さなカード（管理画面のアクセス欄などでも使用） */
.feature-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.feature { padding: 28px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.feature__icon { width: 44px; height: 44px; margin-bottom: 14px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--green-soft); color: var(--green-dark); }
.feature__title { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
.feature__text { font-size: .88rem; color: var(--ink-soft); margin: 0; }

/* 旧・単一パターンの流れ */
.steps { display: grid; gap: 14px; counter-reset: step; }
.step { display: grid; grid-template-columns: 40px 1fr; gap: 18px; align-items: start; padding: 24px 26px; background: var(--surface); border-radius: var(--r-md); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-en); font-weight: 600; color: var(--gold);
}
.step__title { font-size: 1rem; margin-bottom: 4px; }
.step__text { font-size: .88rem; color: var(--ink-soft); margin: 0; }

/* ------------------------------------------------------------
   よくある質問
------------------------------------------------------------ */
.faq { border-bottom: 1px solid var(--line-soft); }
.faq:first-of-type { border-top: 1px solid var(--line-soft); }
.faq summary {
  padding: 26px 44px 26px 34px; cursor: pointer; list-style: none;
  position: relative; font-size: .96rem; font-weight: 600; letter-spacing: .06em;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--green-dark); }
.faq summary::before {
  content: "Q"; position: absolute; left: 2px; top: 26px;
  font-family: var(--font-en); font-size: .9rem; font-weight: 600; color: var(--gold);
}
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 11px; height: 11px; margin-top: -6px;
  border-right: 1px solid var(--ink-faint); border-bottom: 1px solid var(--ink-faint);
  transform: rotate(45deg); transition: transform .3s;
}
.faq[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__body { padding: 0 34px 30px; font-size: .89rem; line-height: 1.95; color: var(--ink-soft); }

/* ------------------------------------------------------------
   CTA
------------------------------------------------------------ */
.cta-band {
  position: relative; overflow: hidden;
  padding: clamp(52px, 8vw, 84px) clamp(28px, 6vw, 64px);
  border-radius: var(--r-xl); text-align: center;
  background-color: var(--yellow-soft);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 600; letter-spacing: .1em; margin-bottom: 16px;
}
.cta-band p { color: var(--ink-soft); font-size: .92rem; margin-bottom: 34px; }
.cta-band .btn--ghost { background: #fff; border-color: #fff; }
.cta-band .btn--ghost:hover { border-color: var(--green); }

/* ------------------------------------------------------------
   フッター
------------------------------------------------------------ */
.site-footer { padding: clamp(48px, 7vw, 76px) 0 44px; background: var(--bg-soft); color: var(--ink-soft); }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--green-dark); }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: 36px; justify-content: space-between; }
.site-footer__brand { font-size: 1.08rem; font-weight: 700; letter-spacing: .12em; color: var(--ink); margin-bottom: 14px; }
.site-footer__note { font-size: .82rem; line-height: 2; margin: 0; }
.site-footer__parent { margin: 18px 0 0; font-size: .82rem; letter-spacing: .06em; }
.site-footer__parent a {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 8px;
  padding-bottom: 2px; border-bottom: 1px solid var(--line-strong);
  color: var(--ink); font-weight: 600;
}
.site-footer__parent a:hover { color: var(--niloop); border-color: var(--niloop); }
.site-footer__parent .ico { width: 14px; height: 14px; }
.site-footer__nav { display: grid; gap: 12px; font-size: .84rem; letter-spacing: .06em; }
.site-footer__copy {
  margin: 44px 0 0; padding-top: 26px; border-top: 1px solid var(--line);
  font-family: var(--font-en); font-size: .68rem; letter-spacing: .2em; color: var(--ink-faint);
}

/* ------------------------------------------------------------
   フォーム
------------------------------------------------------------ */
.form-page { padding: clamp(40px, 6vw, 72px) 0 clamp(64px, 9vw, 104px); }
.form-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: clamp(26px, 4.5vw, 48px);
  max-width: 720px; margin-inline: auto;
}
.form-card__head { margin-bottom: 34px; padding-bottom: 28px; border-bottom: 1px solid var(--line-soft); }
.form-card__title { font-size: 1.42rem; font-weight: 700; letter-spacing: .04em; margin-bottom: 14px; color: var(--green-dark); }
.form-card__lead { font-size: .9rem; color: var(--ink-soft); margin: 0; }

.field { margin-bottom: 32px; }
.field__label { display: flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 600; letter-spacing: .06em; margin-bottom: 12px; }
.field__hint { font-size: .82rem; color: var(--ink-faint); margin: -6px 0 12px; }
.req, .opt {
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: .64rem; font-weight: 600; letter-spacing: .1em;
}
.req { background: var(--blush-soft); color: var(--blush-dark); }
.opt { background: var(--bg-soft); color: var(--ink-faint); }

input[type="text"], input[type="number"], input[type="password"], input[type="date"],
input[type="month"], input[type="url"], input[type="search"], input[type="email"], input[type="tel"],
select, textarea {
  width: 100%; padding: 14px 16px;
  font-family: inherit; font-size: .95rem; letter-spacing: .04em; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); transition: border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color: #c2c8ce; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft);
}
textarea { min-height: 100px; resize: vertical; line-height: 1.85; }
select {
  appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: right 19px center, right 13px center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}

/* 大きな選択ボタン */
.choice-list { display: grid; gap: 10px; }
.choice-list--cols { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.choice {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 17px 20px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); font-size: .92rem; font-weight: 500;
  transition: border-color .2s, background .2s;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__dot {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface);
  display: grid; place-items: center; transition: border-color .2s;
}
.choice__dot::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--green); transform: scale(0); transition: transform .2s;
}
.choice:hover { border-color: var(--green); }
.choice:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.choice:has(input:checked) .choice__dot { border-color: var(--green); }
.choice:has(input:checked) .choice__dot::after { transform: scale(1); }
.choice:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.choice__body { display: flex; flex-direction: column; gap: 3px; }
.choice__note { font-size: .78rem; font-weight: 400; color: var(--ink-soft); }
.choice__badge {
  flex: none; margin-left: auto; padding: 3px 12px; border-radius: var(--r-full);
  white-space: nowrap; font-size: .66rem; font-weight: 600; letter-spacing: .08em;
  background: var(--gold-soft); color: var(--gold-dark);
}

.count-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.count-picker .choice { padding: 14px 0; justify-content: center; min-width: 66px; }
.count-picker .choice__dot { display: none; }

/* お子さまカード */
.child-card { padding: 24px; margin-bottom: 12px; background: var(--bg-soft); border-radius: var(--r-md); }
.child-card__head { display: flex; align-items: center; margin-bottom: 16px; }
.child-card__title { font-size: .84rem; font-weight: 600; letter-spacing: .12em; color: var(--green-dark); }
.child-card__grid { display: grid; grid-template-columns: 1fr 140px; gap: 14px; }
/* 0歳・1歳を選ぶと「何か月」の欄が増える。空の列にも gap が出るので、
   出ていないときは列そのものを作らない（列の指定を差し替える） */
.child-card__grid.has-months { grid-template-columns: 1fr 120px 130px; }
.child-card__months[hidden] { display: none; }
.child-card__remove { margin-left: auto; }

.form-actions { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line-soft); }

/* お知らせ */
.alert { padding: 16px 20px; border-radius: var(--r-sm); font-size: .88rem; line-height: 1.85; white-space: pre-wrap; }
.alert--error { background: #fbf1ef; color: #92483f; }
.alert--info { background: var(--niloop-soft); color: #276b62; }
.alert--ok { background: var(--green-soft); color: var(--green-dark); }
.alert[hidden] { display: none; }

/* 送信完了 */
.done { max-width: 620px; margin-inline: auto; text-align: center; }
.done__mark { width: 76px; height: 76px; margin: 0 auto 28px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); }
.done__mark .ico { width: 34px; height: 34px; stroke-width: 1.3; }
.done__title { font-size: 1.45rem; font-weight: 700; letter-spacing: .04em; margin-bottom: 14px; color: var(--green-dark); }
.done__summary {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin: 34px 0; padding: 30px 20px; background: var(--bg-soft); border-radius: var(--r-md);
}
.done__stat { min-width: 100px; }
.done__stat dt { font-size: .74rem; letter-spacing: .14em; color: var(--ink-faint); margin-bottom: 6px; }
.done__stat dd { margin: 0; font-family: var(--font-num); font-size: 1.9rem; font-weight: 600; color: var(--green-dark); }

/* ------------------------------------------------------------
   リンク集（/links）
------------------------------------------------------------ */
.linkhub { padding: clamp(40px, 7vw, 76px) 0 clamp(56px, 9vw, 96px); }
.linkhub__inner { width: min(100% - 40px, 560px); margin-inline: auto; }
.linkhub__head { text-align: center; margin-bottom: clamp(32px, 5vw, 48px); }
.linkhub__mark { width: 34px; height: 34px; margin: 0 auto 20px; color: var(--gold); }
.linkhub__title {
  font-size: clamp(1.3rem, 4.2vw, 1.6rem); color: var(--green-dark);
  font-weight: 600; letter-spacing: .1em; margin-bottom: 14px;
}
.linkhub__lead { font-size: .89rem; color: var(--ink-soft); }

.linkhub__group { margin-bottom: 40px; }
.linkhub__group:last-child { margin-bottom: 0; }
.linkhub__label {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  font-family: var(--font-en); font-size: .68rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; color: var(--gold-dark);
}
.linkhub__label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.link-list { display: grid; gap: 12px; }
.link-item {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 22px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  text-decoration: none; color: inherit;
  transition: border-color .25s, background .25s;
}
.link-item:hover { border-color: var(--green); background: #fcfefd; }
.link-item__body { min-width: 0; flex: 1; }
.link-item__meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px;
}
.link-item__date { font-family: var(--font-num); font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.link-item__badge {
  padding: 3px 11px; border-radius: var(--r-full);
  font-size: .64rem; font-weight: 600; letter-spacing: .1em; white-space: nowrap;
  background: var(--gold-soft); color: var(--gold-dark);
}
.link-item__title { font-size: .98rem; font-weight: 600; letter-spacing: .04em; margin-bottom: 4px; }
.link-item__desc { font-size: .82rem; color: var(--ink-soft); margin: 0; }
.link-item__by { font-size: .78rem; color: var(--ink-faint); margin: 6px 0 0; }
.link-item__go { flex: none; color: var(--green); }
.link-item__go .ico { width: 20px; height: 20px; transition: transform .25s ease; }
.link-item:hover .link-item__go .ico { transform: translateX(4px); }

.linkhub__empty {
  padding: 40px 24px; text-align: center; font-size: .86rem; color: var(--ink-soft);
  background: var(--bg-soft); border-radius: var(--r-md);
}

/* ------------------------------------------------------------
   ログイン
------------------------------------------------------------ */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; background: var(--bg-soft); }
.login-card { width: min(100%, 420px); padding: 48px 40px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-md); text-align: center; }
.login-card__mark { width: 30px; height: 30px; margin: 0 auto 22px; color: var(--gold); }
.login-card h1 { font-size: 1.18rem; font-weight: 700; letter-spacing: .06em; margin-bottom: 8px; }
.login-card__sub { font-size: .82rem; color: var(--ink-faint); margin-bottom: 32px; }
.login-card form { text-align: left; }
.login-card__back { margin-top: 28px; font-size: .82rem; }

/* ------------------------------------------------------------
   管理画面
------------------------------------------------------------ */
.admin { display: grid; grid-template-columns: 246px 1fr; min-height: 100vh; }

.admin-side {
  background: #26313d; color: #c8d0d8; padding: 26px 16px;
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-side__brand {
  display: flex; align-items: center; gap: 11px;
  padding: 0 10px 24px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: #fff; text-decoration: none;
}
.admin-side__brand .brand__mark { color: var(--gold); }
.admin-side__brand strong { font-size: .98rem; font-weight: 600; letter-spacing: .12em; }
.admin-side__brand small { display: block; font-size: .66rem; font-weight: 500; letter-spacing: .18em; color: #8d99a6; }

.admin-nav-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: #c8d0d8; cursor: pointer;
  font-family: inherit; font-size: .89rem; font-weight: 500; letter-spacing: .06em;
  text-align: left; width: 100%; transition: background .2s, color .2s;
}
.admin-nav-btn:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.admin-nav-btn.is-active { background: var(--green); color: #fff; }
.admin-nav-btn .ico { width: 18px; height: 18px; }

.admin-side__foot { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: 2px; }
.admin-side__foot a, .admin-side__foot button {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: #8d99a6; text-decoration: none; cursor: pointer;
  font-family: inherit; font-size: .82rem; text-align: left; width: 100%;
}
.admin-side__foot a:hover, .admin-side__foot button:hover { background: rgba(255,255,255,.07); color: #fff; }

.admin-main { padding: 34px 40px 80px; min-width: 0; background: var(--bg-soft); }
.admin-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 28px; }
.admin-head__title { font-size: 1.4rem; font-weight: 600; letter-spacing: .08em; }
.admin-head__sub { font-size: .86rem; color: var(--ink-soft); margin: 6px 0 0; }
.admin-head__actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }

.panel[hidden] { display: none; }

.card { background: var(--surface); border-radius: var(--r-md); padding: 28px; box-shadow: var(--shadow-sm); }
.card + .card { margin-top: 20px; }
.card__title { font-size: 1.02rem; font-weight: 600; letter-spacing: .06em; margin-bottom: 6px; }
.card__sub { font-size: .84rem; color: var(--ink-soft); margin: 0 0 20px; }

/* 数字タイル */
.kpi-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); margin-bottom: 20px; }
.kpi { position: relative; padding: 24px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line-strong); }
.kpi--adult::before { background: var(--niloop); }
.kpi--child::before { background: var(--gold); }
.kpi--total::before { background: var(--green); }
.kpi--sales::before { background: var(--leaf); }
.kpi--avg::before   { background: var(--blush); }
.kpi__label { font-size: .76rem; font-weight: 600; letter-spacing: .12em; color: var(--ink-faint); margin-bottom: 8px; }
.kpi__value { font-family: var(--font-num); font-size: 1.9rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.kpi__unit { font-size: .5em; font-weight: 600; color: var(--ink-soft); margin-left: 4px; }
.kpi__note { font-size: .74rem; color: var(--ink-faint); margin: 8px 0 0; }

/* フィルタ */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 20px; }
.filters .field { margin: 0; }
.filters label { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: 6px; }
.filters input, .filters select { padding: 10px 13px; font-size: .88rem; }
.filters__spacer { margin-left: auto; }
.quick-range { display: flex; gap: 6px; flex-wrap: wrap; }
.quick-range button {
  padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-full);
  background: var(--surface); color: var(--ink-soft);
  font-family: inherit; font-size: .82rem; font-weight: 500; letter-spacing: .06em; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.quick-range button:hover { border-color: var(--green); color: var(--green-dark); }
.quick-range button.is-active { background: var(--green); border-color: var(--green); color: #fff; }

/* 表 */
.table-scroll { overflow-x: auto; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm); }
table.data { width: 100%; border-collapse: collapse; font-size: .87rem; min-width: 620px; }
table.data th, table.data td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
table.data thead th {
  position: sticky; top: 0; z-index: 1; background: var(--bg-soft);
  font-size: .73rem; font-weight: 600; letter-spacing: .1em; color: var(--ink-faint);
}
table.data tbody tr:hover { background: var(--bg-soft); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tfoot td { background: var(--bg-soft); font-weight: 600; border-top: 1px solid var(--line); }
.num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.col-wide { white-space: normal; min-width: 200px; }
.muted { color: var(--ink-faint); }

.tag { display: inline-block; padding: 3px 11px; border-radius: var(--r-full); font-size: .7rem; font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
.tag--ok { background: var(--green-soft); color: var(--green-dark); }
.tag--partial { background: var(--gold-soft); color: var(--gold-dark); }
.tag--ng { background: var(--blush-soft); color: var(--blush-dark); }
.tag--event { background: var(--niloop-soft); color: #276b62; }

.empty { padding: 60px 20px; text-align: center; color: var(--ink-faint); font-size: .88rem; }
.empty__mark { display: grid; place-items: center; margin-bottom: 14px; color: var(--line-strong); }
.empty__mark .ico { width: 34px; height: 34px; }

/* グラフ（viewBox の比率どおりに幅いっぱいで描く） */
.chart { display: block; width: 100%; height: auto; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; font-size: .8rem; color: var(--ink-soft); }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* 取込 */
.dropzone {
  padding: 48px 26px; text-align: center; cursor: pointer;
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  background: var(--bg-soft); transition: border-color .2s, background .2s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--green); background: var(--green-soft); }
.dropzone__mark { display: grid; place-items: center; margin-bottom: 14px; color: var(--green); }
.dropzone__mark .ico { width: 32px; height: 32px; }
.dropzone__title { font-weight: 600; letter-spacing: .06em; margin-bottom: 6px; }
.dropzone__note { font-size: .82rem; color: var(--ink-soft); margin: 0; }

.map-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); margin-bottom: 20px; }
.map-grid label { display: block; font-size: .76rem; font-weight: 600; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: 7px; }

.photo-thumb { width: 56px; height: 40px; object-fit: cover; border-radius: var(--r-xs); border: 1px solid var(--line); cursor: zoom-in; }

.row-actions { display: flex; gap: 6px; }
.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-xs);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.icon-btn .ico { width: 16px; height: 16px; }
.icon-btn:hover { border-color: var(--green); color: var(--green-dark); background: var(--green-soft); }
.icon-btn--danger:hover { border-color: #e0b8b3; color: #a4564e; background: var(--blush-soft); }

/* モーダル */
dialog.modal { width: min(100% - 32px, 640px); padding: 0; border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-lift); color: var(--ink); background: var(--surface); }
dialog.modal::backdrop { background: rgba(38, 49, 61, .45); backdrop-filter: blur(3px); }
.modal__head { padding: 24px 28px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: 12px; }
.modal__title { font-size: 1.05rem; font-weight: 600; letter-spacing: .06em; }
.modal__body { padding: 28px; max-height: 62vh; overflow-y: auto; }
.modal__foot { padding: 20px 28px; border-top: 1px solid var(--line-soft); display: flex; gap: 10px; justify-content: flex-end; background: var(--bg-soft); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.modal__close { margin-left: auto; }

/* トースト */
.toast-area { position: fixed; right: 24px; bottom: 24px; z-index: 200; display: grid; gap: 10px; }
.toast {
  padding: 15px 22px; border-radius: var(--r-sm); background: #26313d; color: #fff;
  font-size: .87rem; font-weight: 500; letter-spacing: .04em; box-shadow: var(--shadow-md);
  animation: toast-in .25s cubic-bezier(.2,.7,.3,1);
}
.toast--error { background: #92483f; }
.toast--ok { background: var(--green-dark); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* パスワード警告 */
.warn-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 22px; margin-bottom: 22px;
  background: var(--gold-soft); border-radius: var(--r-md);
  font-size: .86rem; font-weight: 500; color: var(--gold-dark);
}
.warn-banner[hidden] { display: none; }
.warn-banner .ico { width: 18px; height: 18px; }
.warn-banner .btn { margin-left: auto; }

/* ------------------------------------------------------------
   画面が狭いとき
------------------------------------------------------------ */
@media (max-width: 900px) {
  .admin { grid-template-columns: 1fr; }
  .admin-side {
    position: static; height: auto;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 6px 10px; padding: 12px 16px;
  }
  .admin-side__brand { padding: 0; margin: 0; border: 0; }
  .admin-side__brand small { display: none; }
  /* メニューは横1列にして、入りきらなければ横スクロール */
  .admin-side > nav {
    order: 3; flex: 1 0 100%;
    display: flex; gap: 4px;
    overflow-x: auto; scrollbar-width: none;
  }
  .admin-side > nav::-webkit-scrollbar { display: none; }
  .admin-nav-btn { width: auto; flex: none; padding: 9px 13px; font-size: .82rem; white-space: nowrap; }
  .admin-side__foot { margin: 0 0 0 auto; padding: 0; border: 0; display: flex; gap: 4px; }
  .admin-side__foot a, .admin-side__foot button { width: auto; white-space: nowrap; padding: 8px 12px; }
  .admin-main { padding: 24px 20px 64px; }
}

/* ヘッダー：施設名を1行に保ち、メニューは下段で横スクロール */
@media (max-width: 900px) {
  .site-header__inner { flex-wrap: wrap; gap: 4px 14px; padding-block: 12px; min-height: 0; }
  .site-nav {
    margin-left: 0; width: 100%; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: none; }
  .site-nav a.is-cta { margin-left: 4px; padding: 9px 18px; }
}

@media (max-width: 640px) {
  body { font-size: 15px; line-height: 1.9; }
  .hero__title { font-size: clamp(1.38rem, 6.4vw, 2rem); letter-spacing: .06em; }
  .hero__eyebrow { padding: 7px 15px; font-size: .72rem; letter-spacing: .06em; }
  .pillar, .service, .usecase, .event-card { padding: 28px 24px; }
  .child-card__grid,
  .child-card__grid.has-months { grid-template-columns: 1fr; }
  .info-table th { width: 6.5em; font-size: .76rem; }
  .info-table th, .info-table td { padding: 16px 2px; }
  .faq summary { padding: 22px 36px 22px 28px; font-size: .9rem; }
  .faq summary::before { top: 22px; }
  .faq__body { padding: 0 28px 24px; }
  .toast-area { left: 16px; right: 16px; }
  .done__summary { padding: 24px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .site-header, .site-footer, .admin-side, .admin-head__actions, .filters, .toast-area { display: none !important; }
  body { background: #fff; }
  .card, .kpi, .table-scroll { box-shadow: none; break-inside: avoid; }
}

/* 申し込み状況のボタン（管理画面） */
.apply-event {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline;
  width: 100%; padding: 16px 20px; cursor: pointer; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: inherit; font-size: .9rem; color: var(--ink);
  transition: border-color .2s, background .2s;
}
.apply-event:hover { border-color: var(--green); }
.apply-event.is-active { border-color: var(--green); background: var(--green-soft); }
.apply-event__name { font-weight: 700; }
.apply-event__nums { margin-left: auto; display: flex; flex-wrap: wrap; gap: 14px; font-size: .84rem; }
.apply-event__nums strong { font-family: var(--font-num); }

/* ------------------------------------------------------------
   お知らせ（ブログ投稿のような並び）
------------------------------------------------------------ */
.news-list { border-top: 1px solid var(--line); }
.news-item {
  display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap;
  padding: 24px 4px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background .2s, padding-left .2s;
}
a.news-item:hover { background: var(--bg-tint); padding-left: 14px; }
.news-item__date {
  flex: none; width: 7.5em;
  font-family: var(--font-num); font-size: .82rem; font-weight: 600;
  letter-spacing: .06em; color: var(--gold-dark);
}
.news-item__body { flex: 1; min-width: 220px; }
.news-item__title { font-size: 1.02rem; font-weight: 700; letter-spacing: .01em; }
.news-item__summary { margin: 6px 0 0; font-size: .86rem; color: var(--ink-soft); }
.news-item__go { flex: none; color: var(--green-dark); }
.news-item__go .ico { width: 18px; height: 18px; }
.news-empty { padding: 40px 4px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .9rem; }

/* ------------------------------------------------------------
   イベントのお申し込み（主催べつの2枚）
------------------------------------------------------------ */
.entry-grid { display: grid; gap: clamp(18px, 2.6vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: start; }
.entry { padding: clamp(28px, 3.4vw, 40px); background: var(--surface); border-radius: var(--r-md); }
.entry--self { border-top: 4px solid var(--green-dark); }
.entry--external { border-top: 4px solid var(--gold); }
.entry__label {
  display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: var(--r-full);
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
}
.entry--self .entry__label { background: var(--green-soft); color: var(--green-dark); }
.entry--external .entry__label { background: var(--gold-soft); color: var(--gold-dark); }
.entry__title { font-size: 1.2rem; font-weight: 700; letter-spacing: .01em; margin-bottom: 10px; }
.entry__text { font-size: .89rem; color: var(--ink-soft); margin-bottom: 22px; }

/* 外部主催イベントの一覧 */
.ext-list { display: grid; gap: 8px; }
.ext-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm);
  text-decoration: none; color: inherit; transition: border-color .2s, background .2s;
}
.ext-item:hover { border-color: var(--gold); background: var(--gold-soft); }
.ext-item__body { flex: 1; min-width: 0; }
.ext-item__name { font-size: .92rem; font-weight: 700; }
.ext-item__meta { display: block; margin-top: 3px; font-size: .78rem; color: var(--ink-soft); }
.ext-item__go { flex: none; color: var(--gold-dark); }
.ext-item__go .ico { width: 16px; height: 16px; }
.ext-empty { font-size: .86rem; color: var(--ink-soft); }

/* ------------------------------------------------------------
   セクションの境目に置く波形（参考：有明保育園）
------------------------------------------------------------ */
/* 上のセクションの色を背景に、下のセクションの色で波を描く。
   使うときに style="--from:…; --to:…" で2色を渡す */
.wave {
  display: block; width: 100%; height: clamp(26px, 3.4vw, 54px);
  margin: 0; line-height: 0;
  background: var(--from, var(--bg));
}
.wave svg { display: block; width: 100%; height: 100%; fill: var(--to, var(--field)); }

/* 数字タイル・タグもまるく */
.tag { border-radius: var(--r-full); }

/* ------------------------------------------------------------
   飛び出す丸バッジ（参考：有明保育園のポップな見せ方）
   要素の角から少しはみ出して、傾けて置く
------------------------------------------------------------ */
.pop {
  position: absolute; z-index: 2;
  width: 62px; height: 62px; display: grid; place-items: center;
  border-radius: 50%; background: var(--green); color: #fff;
  font-size: .7rem; font-weight: 700; line-height: 1.25; letter-spacing: .02em;
  text-align: center; transform: rotate(-8deg);
  box-shadow: 0 4px 12px rgba(74, 63, 54, .16);
}
.pop--orange { background: var(--orange); }
.pop--yellow { background: var(--yellow); color: #6b4c08; }
.pop--tr { top: -14px; right: -10px; }
.pop--tl { top: -14px; left: -10px; transform: rotate(7deg); }
.pop--lg { width: 74px; height: 74px; font-size: .76rem; }

/* バッジを置くカードは、はみ出しを隠さない */
.service, .pillar, .entry, .notice { position: relative; overflow: visible; }

/* ------------------------------------------------------------
   まわりの小さな飾り（丸と星をぽつぽつ）
------------------------------------------------------------ */
.deco-dots { position: relative; }
.deco-dots::before,
.deco-dots::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.deco-dots::before { width: 12px; height: 12px; background: var(--yellow); top: -6px; left: -22px; }
.deco-dots::after  { width: 8px;  height: 8px;  background: var(--orange); bottom: 4px; left: -34px; }

/* 見出しの下に引く、手描き風のライン */
.section__title--underline {
  display: inline-block; padding-bottom: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'%3E%3Cpath d='M2 5c10-4 20-4 30 0s20 4 30 0 20-4 30 0 20 4 26 0' fill='none' stroke='%23edb93f' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") left bottom repeat-x;
  background-size: 120px 8px;
}

/* ------------------------------------------------------------
   ヒーローに置くカラフルなタイル（参考サイトの文字タイルのアレンジ）
------------------------------------------------------------ */
.hero__tiles { display: flex; gap: 7px; margin-bottom: 24px; }
.hero__tiles span {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; color: #fff;
  font-size: .95rem; font-weight: 700; line-height: 1;
}
.hero__tiles span:nth-child(1) { background: var(--green); transform: rotate(-6deg); }
.hero__tiles span:nth-child(2) { background: var(--orange); transform: rotate(4deg); }
.hero__tiles span:nth-child(3) { background: var(--yellow); color: #6b4c08; transform: rotate(-3deg); }
.hero__tiles span:nth-child(4) { background: var(--field); transform: rotate(6deg); }

@media (max-width: 640px) {
  .pop, .pillar__badge { width: 54px; height: 54px; font-size: .64rem; }
  .pop--lg { width: 62px; height: 62px; font-size: .68rem; }
  .deco-dots::before, .deco-dots::after { display: none; }
}

/* ------------------------------------------------------------
   にぎやかにするための飾り
------------------------------------------------------------ */
/* セクションの角にちらす、丸と星 */
.section--confetti { position: relative; overflow: hidden; }
.section--confetti > .wrap { position: relative; z-index: 1; }
.section--confetti::before,
.section--confetti::after {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  background-repeat: no-repeat;
}
.section--confetti::before {
  top: 4%; right: 2%; width: 190px; height: 190px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cg opacity='.5'%3E%3Ccircle cx='150' cy='26' r='11' fill='%23f7c433'/%3E%3Ccircle cx='108' cy='70' r='7' fill='%233f5c46'/%3E%3Ccircle cx='172' cy='96' r='8' fill='%236cb04a'/%3E%3Cpath d='M120 128l3.4 7 7.7 1.1-5.6 5.4 1.3 7.6-6.8-3.6-6.9 3.6 1.3-7.6-5.5-5.4 7.6-1.1z' fill='%23f7c433'/%3E%3C/g%3E%3C/svg%3E");
}
.section--confetti::after {
  bottom: 5%; left: 1%; width: 160px; height: 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg opacity='.45'%3E%3Ccircle cx='26' cy='120' r='9' fill='%236cb04a'/%3E%3Ccircle cx='70' cy='142' r='6' fill='%233f5c46'/%3E%3Cpath d='M34 44l3 6.2 6.8 1-5 4.8 1.2 6.8-6-3.2-6.1 3.2 1.2-6.8-5-4.8 6.9-1z' fill='%23f7c433'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 700px) {
  .section--confetti::before { width: 110px; height: 110px; background-size: contain; }
  .section--confetti::after { width: 90px; height: 90px; background-size: contain; }
}

/* ヒーローのタイルを増やす */
.hero__tiles span:nth-child(5) { background: var(--orange); transform: rotate(-5deg); }
.hero__tiles span:nth-child(6) { background: var(--green); transform: rotate(3deg); }
.hero__tiles span:nth-child(7) { background: var(--yellow); color: #6b4c08; transform: rotate(-7deg); }

/* メニューに色を差す */
.site-nav a:nth-of-type(1):hover { color: var(--green-dark); }
.site-nav a:nth-of-type(2):hover { color: var(--orange-dark); }
.site-nav a:nth-of-type(3):hover { color: var(--yellow-dark); }
.site-nav a::after { height: 3px; border-radius: 2px; bottom: 0; }
.site-nav a:nth-of-type(2)::after { background: var(--orange); }
.site-nav a:nth-of-type(3)::after { background: var(--yellow); }

/* カードの見出しに色マーカー */
.service__title { position: relative; display: inline-block; }
.service--care  .service__title { background: linear-gradient(transparent 66%, #dcf2cd 66%); }
.service--event .service__title { background: linear-gradient(transparent 66%, #fff6d9 66%); }
.service--cafe  .service__title { background: linear-gradient(transparent 66%, #ffeeda 66%); }
.service--photo .service__title { background: linear-gradient(transparent 66%, #dcf2cd 66%); }
.service--deli  .service__title { background: linear-gradient(transparent 66%, #fff6d9 66%); }
.service--shop  .service__title { background: linear-gradient(transparent 66%, #ffeeda 66%); }

/* ボタンをもっとぷっくり */
.btn--primary { box-shadow: 0 4px 0 #2c5c1e; }
.btn--primary:hover:not(:disabled) { background: #357024; }
.btn--primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #2c5c1e; }

/* ------------------------------------------------------------
   写真のヒーロー
------------------------------------------------------------ */
.hero--photo { padding: 0; overflow: hidden; }
/* 写真を置いていないときは、深緑の面だけで成立するようにしておく */
.hero--photo .hero__media { position: absolute; inset: 0; z-index: 0; background: var(--bg-soft); }
.hero--photo .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero--photo .hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(255, 253, 246, .97) 0%,
    rgba(255, 253, 246, .93) 34%,
    rgba(255, 248, 231, .70) 60%,
    rgba(255, 248, 231, .18) 100%);
}
.hero--photo .hero__inner {
  position: relative; z-index: 1;
  padding: clamp(56px, 9vw, 120px) 0 clamp(64px, 10vw, 132px);
  max-width: 640px;
}
.hero--photo .hero__title { color: var(--ink); }
.hero--photo .hero__lead { color: var(--ink-soft); }
.hero--photo .hero__eyebrow { color: var(--orange-dark); }
.hero--photo .hero__eyebrow .ico { color: var(--orange); }
.hero--photo .hero__en { color: var(--orange-dark); }
.hero--photo .btn--ghost { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.hero--photo .btn--ghost:hover { background: #fff; color: var(--green-dark); border-color: var(--green-dark); }
/* ヒーローの下に波を重ねる */
.hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; line-height: 0; }
.hero__wave svg { display: block; width: 100%; height: clamp(28px, 4vw, 60px); fill: var(--bg); }
.hero--photo .hero__inner { padding-bottom: clamp(84px, 12vw, 160px); }

@media (max-width: 760px) {
  .hero--photo .hero__media::after {
    background: linear-gradient(180deg, rgba(255,253,246,.95) 0%, rgba(255,253,246,.92) 62%, rgba(255,248,231,.88) 100%);
  }
}

/* ------------------------------------------------------------
   カードの写真
------------------------------------------------------------ */
.service__photo {
  margin: calc(clamp(28px, 3.2vw, 38px) * -1) calc(clamp(24px, 2.6vw, 34px) * -1) 22px;
  border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--bg-soft);
}
.service__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.service:hover .service__photo img { transform: scale(1.04); }

/* ご利用の流れに添える写真 */
.flow-photo {
  border-radius: var(--r-md); overflow: hidden; margin-bottom: clamp(24px, 3vw, 36px);
  aspect-ratio: 21 / 9; box-shadow: 0 10px 30px rgba(47, 64, 43, .22);
}
.flow-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------
   写真をならべる（ギャラリー）
------------------------------------------------------------ */
.gallery {
  display: grid; gap: clamp(10px, 1.6vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 45%), 1fr));
}
.gallery figure {
  margin: 0; border-radius: var(--r-sm); overflow: hidden;
  aspect-ratio: 1; background: var(--bg-soft);
  box-shadow: 0 4px 14px rgba(74, 63, 54, .1);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.gallery figure img { width: 100%; height: 100%; object-fit: cover; }
.gallery figure:nth-child(odd)  { transform: rotate(-1.6deg); }
.gallery figure:nth-child(even) { transform: rotate(1.6deg); }
.gallery figure:hover { transform: rotate(0) scale(1.04); }

/* スタッフの写真（丸くきりぬく） */
.staff-photo {
  width: 128px; height: 128px; flex: none; border-radius: 50%; overflow: hidden;
  border: 5px solid #fff; box-shadow: 0 6px 18px rgba(74, 63, 54, .16);
}
.staff-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------
   フッターを深緑に
------------------------------------------------------------ */
.site-footer { background: var(--bg-soft); color: var(--ink); }
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--orange-dark); }
.site-footer__brand { color: var(--ink); }
.site-footer__note { color: var(--ink); font-size: .88rem; line-height: 2.1; }
.site-footer__nav { font-size: .9rem; font-weight: 600; }
.site-footer__parent a { color: var(--ink); border-color: var(--line-strong); }
.site-footer__parent a:hover { color: var(--green-dark); border-color: var(--green-dark); }
.site-footer__copy { border-top-color: var(--line-strong); color: var(--ink-soft); }
/* 住所や電話は一段はっきり見せる */
.site-footer__logo { max-width: 190px; margin-bottom: 18px; }
.site-footer__info {
  display: grid; gap: 8px; margin: 0 0 18px;
  font-size: .9rem; line-height: 1.9;
}
.site-footer__logo { display: none; }
.site-footer__logo.is-ready { display: block; }
.site-footer__logo img { max-width: 190px; height: auto; margin-bottom: 16px; }
.site-footer__brand { font-size: 1.05rem; }
.site-footer__info dt {
  display: inline-block; min-width: 4.5em; margin-right: 10px; padding: 2px 10px;
  border-radius: var(--r-full); background: var(--yellow); color: #6b4c08;
  font-size: .72rem; font-weight: 700; text-align: center;
}
.site-footer__info dd { display: inline; margin: 0; font-weight: 600; }
.site-footer__info div { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }

/* 写真の枠。images/ にファイルを置いて読み込めたものだけ表示する */
[data-slot] { display: none; }
[data-slot].is-ready { display: block; }
.gallery figure[data-slot].is-ready { display: block; }

/* 外観の写真（アクセス欄） */
.access-photo { position: relative; margin-bottom: clamp(24px, 3vw, 34px); border-radius: var(--r-md); overflow: hidden; }
.access-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.access-photo__note {
  position: absolute; left: 16px; bottom: 16px; margin: 0;
  padding: 8px 18px; border-radius: var(--r-full);
  background: rgba(47, 64, 43, .88); color: #fff;
  font-size: .82rem; font-weight: 700; letter-spacing: .06em;
}

/* ロゴ画像を置いたら、星アイコンと文字の代わりに使う */
.brand__logo { display: none; }
.brand__logo.is-ready { display: block; }
.brand__logo img { height: 82px; width: auto; }
.brand:has(.brand__logo.is-ready) .brand__mark,
.brand:has(.brand__logo.is-ready) .brand__text { display: none; }
@media (max-width: 640px) { .brand__logo img { height: 62px; } }

/* 強調したい語に敷く黄色のマーカー（斜体にはしない） */
.section__title em,
.hero__title em {
  font-style: normal;
  background: linear-gradient(transparent 58%, var(--yellow) 58%);
  padding: 0 .12em;
}

/* ------------------------------------------------------------
   読みやすさの調整
   明るい黄色・オレンジのうえは「濃い茶色の文字」、
   深緑のうえは「白文字」。白文字を明るい色にのせない
------------------------------------------------------------ */
.section__pill { background: var(--yellow); color: #5a4110; }
.section__pill--green { background: var(--green-dark); color: #fff; }
.section__pill--yellow { background: var(--orange-dark); color: #fff; }
.section__pill--white { background: #fff; color: var(--orange-dark); }

.pop { background: var(--green-dark); color: #fff; }
.pop--orange { background: var(--orange-dark); color: #fff; }
.pop--yellow { background: var(--yellow); color: #5a4110; }

.pillar__badge { background: var(--orange-dark); color: #fff; }
.pillar:nth-child(3) .pillar__badge { background: var(--yellow); color: #5a4110; }

.pillar__num { background: var(--green-dark); color: #fff; }
.pillar:nth-child(2) .pillar__num { background: var(--orange-dark); }
.pillar:nth-child(3) .pillar__num { background: var(--yellow); color: #5a4110; }

.service__icon { background: var(--green-dark); color: #fff; }
.service--event .service__icon { background: var(--yellow); color: #5a4110; }
.service--cafe  .service__icon { background: var(--orange-dark); color: #fff; }
.service--photo .service__icon { background: var(--green-dark); color: #fff; }
.service--deli  .service__icon { background: var(--yellow); color: #5a4110; }
.service--shop  .service__icon { background: var(--orange-dark); color: #fff; }

/* ヒーローの文字タイル */
.hero__tiles span:nth-child(1) { background: var(--green-dark); color: #fff; }
.hero__tiles span:nth-child(2) { background: var(--orange-dark); color: #fff; }
.hero__tiles span:nth-child(3) { background: var(--yellow); color: #5a4110; }
.hero__tiles span:nth-child(4) { background: var(--green-dark); color: #fff; }
.hero__tiles span:nth-child(5) { background: var(--orange-dark); color: #fff; }
.hero__tiles span:nth-child(6) { background: var(--yellow); color: #5a4110; }
.hero__tiles span:nth-child(7) { background: var(--green-dark); color: #fff; }

/* 申し込みカードの上の線 */
.entry--self { border-top-color: var(--green-dark); }
.entry--external { border-top-color: var(--orange-dark); }
.entry--self .entry__label { background: var(--green-dark); color: #fff; }
.entry--external .entry__label { background: var(--yellow); color: #5a4110; }

/* 外部主催のタグ */
.event-card__host { background: var(--green-dark); color: #fff; }
.event-card--external .event-card__host { background: var(--yellow); color: #5a4110; }
.usecase--event .usecase__label { background: var(--yellow); color: #5a4110; }
.usecase--cafe  .usecase__label { background: var(--orange-dark); color: #fff; }
.usecase--drop  .usecase__label { background: var(--green-dark); color: #fff; }

/* ------------------------------------------------------------
   ロゴの2色（深緑 #3f5c46 ／ 黄色 #ffe100）を主役にした割り当て
   オレンジは差し色として少しだけ
------------------------------------------------------------ */

/* 大きな面 */
.section--block { background-color: var(--forest); }
.section--block .section__title { color: #fff; }
.section--block .section__lead { color: #dfe9dd; }
.section--block .section__pill { background: var(--yellow); color: #4a3a00; }

.cta-band { background-color: var(--yellow-soft); }

/* 見出しのラベル：緑と黄色を交互に */
.section__pill { background: var(--forest); color: #fff; }
.section__pill--green { background: var(--yellow); color: #4a3a00; }
.section__pill--yellow { background: var(--forest); color: #fff; }
.section__pill--white { background: #fff; color: var(--forest); }
.section__label { color: var(--forest); }

/* 見出しの黄色マーカー */
.section__title em, .hero__title em {
  background: linear-gradient(transparent 56%, var(--yellow) 56%);
}

/* 丸バッジ・アイコン：緑と黄色を基本に、オレンジは1か所だけ */
.pop { background: var(--forest); color: #fff; }
.pop--yellow { background: var(--yellow); color: #4a3a00; }
.pop--orange { background: var(--orange-dark); color: #fff; }

.pillar__num { background: var(--forest); color: #fff; }
.pillar:nth-child(2) .pillar__num { background: var(--yellow); color: #4a3a00; }
.pillar:nth-child(3) .pillar__num { background: var(--forest); color: #fff; }
.pillar__badge { background: var(--yellow); color: #4a3a00; }
.pillar:nth-child(3) .pillar__badge { background: var(--orange-dark); color: #fff; }

.service__icon { background: var(--forest); color: #fff; }
.service--event .service__icon { background: var(--yellow); color: #4a3a00; }
.service--cafe  .service__icon { background: var(--forest); color: #fff; }
.service--photo .service__icon { background: var(--yellow); color: #4a3a00; }
.service--deli  .service__icon { background: var(--forest); color: #fff; }
.service--shop  .service__icon { background: var(--yellow); color: #4a3a00; }

/* カード見出しのマーカーも緑と黄色で */
.service--care  .service__title { background: linear-gradient(transparent 66%, #e4eee0 66%); }
.service--event .service__title { background: linear-gradient(transparent 66%, #fff5a8 66%); }
.service--cafe  .service__title { background: linear-gradient(transparent 66%, #e4eee0 66%); }
.service--photo .service__title { background: linear-gradient(transparent 66%, #fff5a8 66%); }
.service--deli  .service__title { background: linear-gradient(transparent 66%, #e4eee0 66%); }
.service--shop  .service__title { background: linear-gradient(transparent 66%, #fff5a8 66%); }

/* ヒーローの文字タイル：緑・黄・緑…（オレンジは星の1枚だけ） */
.hero__tiles span:nth-child(1) { background: var(--forest); color: #fff; }
.hero__tiles span:nth-child(2) { background: var(--yellow); color: #4a3a00; }
.hero__tiles span:nth-child(3) { background: var(--forest); color: #fff; }
.hero__tiles span:nth-child(4) { background: var(--yellow); color: #4a3a00; }
.hero__tiles span:nth-child(5) { background: var(--forest); color: #fff; }
.hero__tiles span:nth-child(6) { background: var(--yellow); color: #4a3a00; }
.hero__tiles span:nth-child(7) { background: var(--orange-dark); color: #fff; }

/* 申し込みカード */
.entry--self { border-top-color: var(--forest); }
.entry--external { border-top-color: var(--yellow); }
.entry--self .entry__label { background: var(--forest); color: #fff; }
.entry--external .entry__label { background: var(--yellow); color: #4a3a00; }

.event-card__host { background: var(--forest); color: #fff; }
.event-card--external .event-card__host { background: var(--yellow); color: #4a3a00; }
.usecase--event .usecase__label { background: var(--yellow); color: #4a3a00; }
.usecase--cafe  .usecase__label { background: var(--forest); color: #fff; }
.usecase--drop  .usecase__label { background: var(--yellow); color: #4a3a00; }

/* 事業の箇条書きの点も緑に */
.service__points li::before { background: var(--forest); }

/* フッターの項目ラベル */
.site-footer__info dt { background: var(--forest); color: #fff; }
.site-footer { background: var(--bg-soft); }

/* ヘッダーのロゴを大きく */
.brand__logo img { height: 92px; }
@media (max-width: 640px) { .brand__logo img { height: 74px; } }

/* ------------------------------------------------------------
   黄色を主役に、深緑は薄め、オレンジはポイント
------------------------------------------------------------ */

/* ヘッダーのブランド：マークは中くらい、施設名を大きく緑で */
.brand { gap: 14px; align-items: center; }
.brand__logo img { height: 64px; width: auto; }
.brand:has(.brand__logo.is-ready) .brand__mark { display: none; }
.brand:has(.brand__logo.is-ready) .brand__text { display: block; }
.brand__name {
  display: block; font-size: 1.8rem; font-weight: 700;
  letter-spacing: .1em; line-height: 1.2; color: var(--forest);
}
.brand__sub {
  display: block; margin-top: 4px;
  font-family: var(--font-en); font-size: .64rem; font-weight: 700;
  letter-spacing: .28em; color: var(--yellow-dark);
}
@media (max-width: 640px) {
  .brand__logo img { height: 50px; }
  .brand__name { font-size: 1.45rem; }
}

/* 大きな面は黄色。文字は濃い茶 */
.section--block { background-color: var(--field); }
.section--block .section__title { color: var(--ink); }
.section--block .section__lead { color: #5c4a12; }
.section--block .section__pill { background: var(--forest); color: #fff; }
.section--block .usecase { background: #fff; }

/* 見出しラベルは黄色を基本に、緑は控えめ */
.section__pill { background: var(--yellow); color: #4a3a00; }
.section__pill--green { background: var(--forest); color: #fff; }
.section__pill--yellow { background: var(--yellow); color: #4a3a00; }
.section__pill--white { background: #fff; color: var(--forest); }

/* 丸バッジ：黄色を多めに */
.pop { background: var(--yellow); color: #4a3a00; }
.pop--yellow { background: var(--yellow); color: #4a3a00; }
.pop--orange { background: var(--orange-dark); color: #fff; }
.pillar__badge { background: var(--yellow); color: #4a3a00; }
.pillar:nth-child(3) .pillar__badge { background: var(--forest); color: #fff; }
.pillar__num { background: var(--yellow); color: #4a3a00; }
.pillar:nth-child(2) .pillar__num { background: var(--forest); color: #fff; }
.pillar:nth-child(3) .pillar__num { background: var(--yellow); color: #4a3a00; }

/* 事業アイコン：黄色4・緑2 */
.service__icon { background: var(--yellow); color: #4a3a00; }
.service--event .service__icon { background: var(--forest); color: #fff; }
.service--photo .service__icon { background: var(--forest); color: #fff; }

/* ヒーローの文字タイル：黄色を主役に、緑は2枚、星はオレンジ */
.hero__tiles span:nth-child(1) { background: var(--yellow); color: #4a3a00; }
.hero__tiles span:nth-child(2) { background: var(--forest); color: #fff; }
.hero__tiles span:nth-child(3) { background: var(--yellow); color: #4a3a00; }
.hero__tiles span:nth-child(4) { background: var(--yellow); color: #4a3a00; }
.hero__tiles span:nth-child(5) { background: var(--forest); color: #fff; }
.hero__tiles span:nth-child(6) { background: var(--yellow); color: #4a3a00; }
.hero__tiles span:nth-child(7) { background: var(--orange-dark); color: #fff; }

/* ボタンは深緑のまま（押す場所をはっきりさせるため） */
.btn--primary { background: var(--forest); box-shadow: 0 4px 0 #2c4231; }
.btn--primary:hover:not(:disabled) { background: #35503c; }
.btn--primary:active { box-shadow: 0 1px 0 #2c4231; }

/* CTA帯も黄色 */
.cta-band { background-color: var(--field); }

/* 波の飾りの色を黄色に */
.section__label::before, .section__label::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='7' viewBox='0 0 30 7'%3E%3Cpath d='M1 4c2-3 4.5-3 6.5 0S14 7 16 4s4.5-3 6.5 0 6.5 3 6.5 0' fill='none' stroke='%23d9a800' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.section--block .section__label { color: #5c4a12; }

/* ============================================================
   仕上げの調整
   ============================================================ */

/* --- ヘッダーは常に1行。メニューは仕切り線つきで横スクロール --- */
.site-header__inner { flex-wrap: nowrap !important; gap: 16px; padding-block: 10px; min-height: 0; }
.site-nav {
  margin-left: auto; width: auto; flex: 1 1 auto; min-width: 0;
  justify-content: flex-end; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; gap: 0;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { flex: none; padding: 8px 16px; white-space: nowrap; font-size: .86rem; font-weight: 600; }
/* 項目のあいだに仕切りを入れる */
.site-nav a + a:not(.is-cta)::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 15px; background: var(--line-strong);
}
.site-nav a.is-cta { margin-left: 12px; padding: 10px 20px; }

/* --- ヘッダーの施設名を読みやすく --- */
.brand__name {
  font-size: 1.5rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ink); line-height: 1.15;
}
.brand__sub {
  margin-top: 2px; font-size: .58rem; letter-spacing: .24em; color: var(--yellow-dark);
}
.brand__logo img { height: 52px; }
@media (max-width: 860px) {
  .brand__name { font-size: 1.15rem; }
  .brand__sub { display: none; }
  .brand__logo img { height: 40px; }
  .site-nav a { padding: 8px 11px; font-size: .8rem; }
  .site-nav a.is-cta { padding: 9px 15px; }
}

/* --- ヒーローの膜を白から黄色へ（文字が読みやすくなる） --- */
.hero--photo .hero__media::after {
  background: linear-gradient(100deg,
    rgba(255, 235, 140, .96) 0%,
    rgba(255, 235, 140, .90) 36%,
    rgba(255, 240, 170, .62) 64%,
    rgba(255, 245, 200, .10) 100%);
}
@media (max-width: 760px) {
  .hero--photo .hero__media::after {
    background: linear-gradient(180deg, rgba(255,235,140,.95) 0%, rgba(255,238,155,.92) 62%, rgba(255,242,175,.90) 100%);
  }
}
.hero--photo .hero__eyebrow { color: #6b4f00; border-color: rgba(107,79,0,.28); }
.hero--photo .hero__en { color: #6b4f00; }
.hero--photo .btn--ghost { background: #fff; border-color: #fff; }

/* --- ①②③ のカードを背景から浮かせる --- */
.pillars { background: var(--bg-soft); padding-top: clamp(40px, 6vw, 72px); }
.pillar { border: 2px solid var(--line-strong); box-shadow: none; background: #fff; }
.pillar:hover { border-color: var(--forest); transform: translateY(-4px); }

/* --- 見出しは全部同じ色。下線だけ色を変える --- */
.section__title { color: var(--ink); }
.section__title em, .hero__title em {
  color: inherit;
  background: linear-gradient(transparent 60%, var(--yellow) 60%);
}

/* --- アクセスの写真を小さく --- */
.access-photo { max-width: 560px; margin-inline: auto; }
.access-photo img { aspect-ratio: 3 / 2; }
.access-photo__note { left: 12px; bottom: 12px; padding: 6px 14px; font-size: .78rem; }

/* --- フッターのロゴを小さく --- */
.site-footer__logo img { max-width: 96px; margin-bottom: 12px; }

/* --- 字間と余白を詰める --- */
body { letter-spacing: .02em; }
.section__title { letter-spacing: .01em; }
.section__label { letter-spacing: .18em; }
.brand__name { letter-spacing: .04em; }
.btn { letter-spacing: .04em; }
.service { padding: clamp(24px, 2.6vw, 32px) clamp(20px, 2.2vw, 28px); }
.service__text { margin-bottom: 18px; }
.section__head { margin-bottom: clamp(28px, 3.6vw, 44px); }
.section { padding: clamp(52px, 7vw, 92px) 0; }
.hero--photo .hero__inner { padding-bottom: clamp(72px, 10vw, 130px); }

/* --- ①②③ のカードの枠をはっきりさせる --- */
.pillars { background: var(--bg-soft); }
.pillar {
  background: #fff;
  border: 2px solid #cbdcc6;          /* 薄い黄色の背景から浮かせる緑の線 */
  box-shadow: 0 6px 0 rgba(63, 92, 70, .10);
}
.pillar:hover { border-color: var(--forest); box-shadow: 0 6px 0 rgba(63, 92, 70, .22); }

/* --- 「ステラテラスについて」の中の about は重複なので控えめに --- */
.section__title em { background-size: 100% 100%; }

/* --- 写真がまだ無いカードの下に空白ができないように、高さを揃えない --- */
.service-grid { align-items: start; }
.service__text { margin-bottom: 16px; }
.service__points { margin-bottom: 0; }
.service__photo img { aspect-ratio: 4 / 3; object-fit: cover; }

/* --- セクションのあいだの波は控えめに --- */
.wave { height: 28px; }

/* --- メニューが画面に収まらないとき、左端が見切れて触れなくなるのを防ぐ ---
   justify-content: flex-end のままだと、あふれた分が左にはみ出して
   横スクロールで戻れなくなる。1つ目に margin-left:auto を付けると、
   余裕があるときは右寄せ、あふれたときは左寄せ＋スクロールになる。 */
.site-nav { justify-content: flex-start; }
.site-nav > :first-child { margin-left: auto; }

@media (max-width: 520px) {
  .site-header__inner { gap: 8px; }
  .brand__name { font-size: 1.02rem; }
  .brand__logo img { height: 34px; }
  .site-nav a { padding: 7px 9px; font-size: .76rem; }
  .site-nav a.is-cta { margin-left: 8px; padding: 8px 12px; }
}

/* ============================================================
   ヒーロー：深緑の膜＋白文字
   黄色の膜は「微妙」と差し戻された。写真の上は深緑をかぶせて
   白文字をのせるのがいちばんきれい、という依頼者の判断。
   緑の上にのる要素はすべて色を組み替える（緑どうしで沈むため）。
   ============================================================ */

.hero--photo .hero__media::after {
  background: linear-gradient(100deg,
    rgba(45, 66, 50, .93) 0%,
    rgba(48, 70, 54, .90) 45%,
    rgba(56, 82, 62, .70) 70%,
    rgba(63, 92, 70, .22) 100%);
}
@media (max-width: 760px) {
  .hero--photo .hero__media::after {
    background: linear-gradient(180deg,
      rgba(45, 66, 50, .90) 0%,
      rgba(50, 73, 56, .88) 55%,
      rgba(45, 66, 50, .93) 100%);
  }
}

/* 文字は白。強調したい語だけ黄色（色を変えるのは1か所だけ） */
.hero--photo .hero__title { color: #fff; }
.hero--photo .hero__title em { color: var(--yellow); background: none; padding: 0; }
.hero--photo .hero__lead { color: rgba(255, 255, 255, .93); }
.hero--photo .hero__eyebrow { color: #fff; border-color: rgba(255, 255, 255, .45); }
.hero--photo .hero__eyebrow .ico { color: var(--yellow); }
.hero--photo .hero__en { color: var(--yellow); }

/* ボタン：緑の上では緑のボタンが沈むので、黄色と白にする */
.hero--photo .btn--primary {
  background: var(--yellow); color: #4a3a00; box-shadow: 0 4px 0 #c9ae00;
}
.hero--photo .btn--primary:hover:not(:disabled) { background: #ffe94d; color: #4a3a00; }
.hero--photo .btn--primary:active { box-shadow: 0 1px 0 #c9ae00; }
.hero--photo .btn--ghost { background: #fff; color: var(--forest); border-color: #fff; }
.hero--photo .btn--ghost:hover { background: #fff; color: var(--forest); border-color: #fff; }

/* 文字タイル「ステラテラス」：黄色と白を交互に、★だけオレンジ */
.hero--photo .hero__tiles span:nth-child(1) { background: var(--yellow); color: #4a3a00; }
.hero--photo .hero__tiles span:nth-child(2) { background: #fff; color: var(--forest); }
.hero--photo .hero__tiles span:nth-child(3) { background: var(--yellow); color: #4a3a00; }
.hero--photo .hero__tiles span:nth-child(4) { background: #fff; color: var(--forest); }
.hero--photo .hero__tiles span:nth-child(5) { background: var(--yellow); color: #4a3a00; }
.hero--photo .hero__tiles span:nth-child(6) { background: #fff; color: var(--forest); }
.hero--photo .hero__tiles span:nth-child(7) { background: var(--orange); color: #4a2a00; }

/* ============================================================
   ヒーロー：少し暗めの黄色（山吹色）の膜＋濃い茶の文字
   これまで 白い膜（沈む）→ 明るい黄色（微妙）→ 深緑（違う）と
   差し戻されている。明るい黄色だと色が薄く飛んでしまうのが原因なので、
   同じ黄色でも彩度と濃さを上げた山吹色にして、文字は濃い茶にする。
   （黄色の面には濃い茶、という配色表の決まりどおり）
   ============================================================ */

.hero--photo .hero__media::after {
  background: linear-gradient(100deg,
    rgba(240, 184, 16, .95) 0%,
    rgba(242, 190, 22, .94) 50%,
    rgba(248, 208, 58, .84) 75%,
    rgba(255, 233, 140, .28) 100%);
}
@media (max-width: 760px) {
  .hero--photo .hero__media::after {
    background: linear-gradient(180deg,
      rgba(240, 184, 16, .93) 0%,
      rgba(244, 195, 30, .92) 55%,
      rgba(240, 184, 16, .95) 100%);
  }
}

/* 文字は濃い茶。強調したい語だけロゴの深緑にする（下線は敷かない） */
.hero--photo .hero__title { color: #3d2f00; }
.hero--photo .hero__title em { color: #24361c; background: none; padding: 0; }
.hero--photo .hero__lead { color: #45360a; }
.hero--photo .hero__eyebrow { color: #3d2f00; border-color: rgba(61, 47, 0, .3); }
.hero--photo .hero__eyebrow .ico { color: var(--forest); }
.hero--photo .hero__en { color: #24361c; }

/* ボタン：山吹の上では深緑＋白がいちばん目立つ */
.hero--photo .btn--primary {
  background: var(--forest); color: #fff; box-shadow: 0 4px 0 #2c4231;
}
.hero--photo .btn--primary:hover:not(:disabled) { background: #35503c; color: #fff; }
.hero--photo .btn--primary:active { box-shadow: 0 1px 0 #2c4231; }
.hero--photo .btn--ghost { background: #fff; color: var(--forest); border-color: #fff; }
.hero--photo .btn--ghost:hover { background: #fff; color: var(--forest); border-color: #fff; }

/* 文字タイル「ステラテラス」：深緑と白を交互に、★だけオレンジ */
.hero--photo .hero__tiles span:nth-child(1) { background: var(--forest); color: #fff; }
.hero--photo .hero__tiles span:nth-child(2) { background: #fff; color: var(--forest); }
.hero--photo .hero__tiles span:nth-child(3) { background: var(--forest); color: #fff; }
.hero--photo .hero__tiles span:nth-child(4) { background: #fff; color: var(--forest); }
.hero--photo .hero__tiles span:nth-child(5) { background: var(--forest); color: #fff; }
.hero--photo .hero__tiles span:nth-child(6) { background: #fff; color: var(--forest); }
.hero--photo .hero__tiles span:nth-child(7) { background: var(--orange-dark); color: #fff; }

/* ============================================================
   ヒーローの作り直し（写真に色の膜をかけるのをやめた）

   白い膜・黄色い膜・深緑の膜と3回差し戻されている。
   原因は「写真の上に文字を置くこと」そのものなので、
   文字はクリーム地の上に置き、写真は横に並べる形に変えた。
   にぎやかさは、参考サイト（ariakehoiku）と同じように
   丸・輪・波線などの飾りを散らして出す。
   ※ 敷き詰める柄ではない。散らした飾りなので3回目の差し戻しとは別物。
   ============================================================ */

.hero--split {
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
  padding: clamp(36px, 5.5vw, 76px) 0 clamp(56px, 8vw, 104px);
}
.hero--split .hero__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.hero--split .hero__inner { max-width: none; padding: 0; }
.hero--split .hero__title { color: var(--ink); }
.hero--split .hero__lead { color: var(--ink-soft); }
.hero--split .hero__eyebrow {
  color: var(--forest);
  background: #fff;
  border: 2px solid var(--forest);
  border-radius: 999px;
  padding: 7px 16px;
}
.hero--split .hero__eyebrow .ico { color: var(--orange); }
.hero--split .hero__en { color: var(--yellow-dark); }

/* 写真は角をまるく、少しだけ浮かせる */
.hero__figure {
  position: relative;
  border-radius: var(--r);
  overflow: visible;
  box-shadow: 0 14px 34px rgba(74, 63, 54, .16);
}
.hero__figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r);
}
.hero__figure .pop { z-index: 2; }

/* 文字タイルは通常の配色（クリーム地の上なので沈まない） */
.hero--split .hero__tiles span:nth-child(1) { background: var(--forest); color: #fff; }
.hero--split .hero__tiles span:nth-child(2) { background: var(--yellow); color: #4a3a00; }
.hero--split .hero__tiles span:nth-child(3) { background: var(--forest); color: #fff; }
.hero--split .hero__tiles span:nth-child(4) { background: var(--yellow); color: #4a3a00; }
.hero--split .hero__tiles span:nth-child(5) { background: var(--forest); color: #fff; }
.hero--split .hero__tiles span:nth-child(6) { background: var(--yellow); color: #4a3a00; }
.hero--split .hero__tiles span:nth-child(7) { background: var(--orange-dark); color: #fff; }

@media (max-width: 860px) {
  .hero--split .hero__grid { grid-template-columns: 1fr; }
  .hero__figure { order: -1; }
  .hero__figure img { aspect-ratio: 16 / 10; }
}

/* ------------------------------------------------------------
   散らす飾り
   参考サイトの「きらきら・葉っぱ・鳥」にあたるもの。
   面の区別は今までどおり色でつけ、これは余白のにぎやかしだけに使う。
------------------------------------------------------------ */
.deco { position: absolute; z-index: 0; pointer-events: none; }

/* 丸を散らしたかたまり */
.deco--dots {
  width: 104px; height: 76px;
  background-image: radial-gradient(circle, var(--forest) 30%, transparent 32%);
  background-size: 19px 19px;
  opacity: .2;
}
/* 輪 */
.deco--ring {
  width: 116px; height: 116px; border-radius: 50%;
  border: 10px solid var(--yellow);
  opacity: .6;
}
/* まるいかたまり */
.deco--blob {
  width: 154px; height: 148px;
  background: var(--green-soft);
  border-radius: 46% 54% 58% 42% / 52% 46% 54% 48%;
  opacity: .85;
}
/* 波線 */
.deco--wave {
  width: 148px; height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cpath d='M2 8c3-6 8-6 11 0s8 6 11 0 8-6 11 0 8 6 11 0' fill='none' stroke='%23ef8b2c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center/60px 12px;
  opacity: .5;
}
/* きらきら */
.deco--star {
  width: 44px; height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6c.7 5.2 2.5 7 7.7 7.7-5.2.7-7 2.5-7.7 7.7-.7-5.2-2.5-7-7.7-7.7 5.2-.7 7-2.5 7.7-7.7z' fill='%23ffe100'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ヒーローの中での置き場所 */
.deco--h1 { top: 8%;  left: -22px; }
.deco--h2 { top: 52%; left: -58px; }
.deco--h3 { top: 4%;  right: 46%; }
.deco--h4 { bottom: 16%; left: 30%; }
.deco--h5 { top: -46px; right: -52px; }
.deco--h6 { bottom: 6%; right: 3%; }
@media (max-width: 860px) {
  .deco--h3, .deco--h4 { display: none; }
  .deco--h2 { top: auto; bottom: 8%; }
}

/* ------------------------------------------------------------
   ページの見出し（お知らせ・フォトスタジオ）
------------------------------------------------------------ */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--bg-soft);
  padding: clamp(40px, 6vw, 84px) 0 clamp(36px, 5vw, 64px);
}
.page-hero__inner { position: relative; z-index: 1; max-width: 780px; }
.page-hero__title {
  font-size: clamp(1.6rem, 4.4vw, 2.5rem); font-weight: 700;
  color: var(--ink); line-height: 1.5; margin: 6px 0 16px;
}
.page-hero__title em {
  font-style: normal;
  background: linear-gradient(transparent 60%, var(--yellow) 60%);
}
.page-hero__lead { color: var(--ink-soft); max-width: 40em; }
.deco--a { top: 14%; right: 6%; }
.deco--b { bottom: -34px; left: -34px; }
.deco--c { top: -52px; right: -46px; }

/* ------------------------------------------------------------
   フォトギャラリーのカルーセル
------------------------------------------------------------ */
.carousel { position: relative; --per: 4; --gap: clamp(10px, 1.6vw, 18px); }
.carousel__window { overflow: hidden; padding: 6px 2px 10px; }
.carousel__track {
  display: flex !important;
  gap: var(--gap);
  transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}
.carousel__track > figure {
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  transform: none !important;      /* カルーセルの中では傾けない */
}
.carousel__track > figure:hover { transform: scale(1.03) !important; }

.carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--forest);
  border: 2px solid var(--forest); cursor: pointer;
  box-shadow: 0 4px 12px rgba(74, 63, 54, .14);
  transition: background .2s ease, color .2s ease;
}
.carousel__nav:hover { background: var(--forest); color: #fff; }
.carousel__nav .ico { width: 20px; height: 20px; }
.carousel__nav--prev { left: -8px; }
.carousel__nav--prev .ico { transform: rotate(180deg); }
.carousel__nav--next { right: -8px; }

.carousel__dots { display: flex; justify-content: center; gap: 9px; margin-top: 16px; }
.carousel__dot {
  width: 11px; height: 11px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--line-strong); border: none;
  transition: background .2s ease, transform .2s ease;
}
.carousel__dot.is-on { background: var(--forest); transform: scale(1.25); }

@media (max-width: 860px) {
  .carousel__nav { width: 38px; height: 38px; }
  .carousel__nav--prev { left: -4px; }
  .carousel__nav--next { right: -4px; }
}

/* ------------------------------------------------------------
   もっと見る（セクションの下・カードの下）
------------------------------------------------------------ */
.section__more { margin-top: clamp(26px, 3.4vw, 40px); }
.service__more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: .9rem; font-weight: 700; color: var(--forest);
  text-decoration: none;
  border-bottom: 2px solid var(--yellow); padding-bottom: 3px;
}
.service__more:hover { color: var(--green-dark); border-bottom-color: var(--forest); }
.service__more .ico { width: 16px; height: 16px; }

/* ------------------------------------------------------------
   フォトスタジオのページ
------------------------------------------------------------ */
.studio-photo { max-width: 720px; margin-inline: auto; }
.studio-photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r);
  box-shadow: 0 12px 30px rgba(74, 63, 54, .14);
}

.plan-grid {
  display: grid; gap: clamp(16px, 2.4vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  align-items: start;
}
.plan {
  position: relative;
  background: #fff; border: 2px solid var(--line-strong);
  border-radius: var(--r); padding: clamp(24px, 3vw, 32px) clamp(20px, 2.4vw, 28px) clamp(26px, 3vw, 32px);
}
.plan--pick {
  border-color: var(--orange); border-width: 3px;
  padding-top: clamp(36px, 4vw, 44px);
  box-shadow: 0 10px 0 rgba(239, 139, 44, .16);
}
.plan__ribbon {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  background: var(--orange-dark); color: #fff;
  font-size: .82rem; font-weight: 700; letter-spacing: .06em;
  padding: 7px 22px; border-radius: 999px; white-space: nowrap;
}
.plan__icon {
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 16px;
}
.plan__icon .ico { width: 28px; height: 28px; }
.plan__icon--orange { background: var(--orange); color: #fff; }
.plan__icon--yellow { background: var(--yellow); color: #4a3a00; }
.plan__icon--green  { background: var(--forest); color: #fff; }
.plan__title { font-size: 1.22rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.plan__for { font-size: .88rem; color: var(--ink-soft); margin-bottom: 18px; }

.plan__spec { margin: 0 0 18px; display: grid; gap: 8px; }
.plan__spec > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  background: var(--bg-blush); border-radius: var(--r-sm); padding: 10px 14px;
}
.plan__spec dt { margin: 0; font-size: .84rem; color: var(--ink-soft); font-weight: 500; }
.plan__spec dd { margin: 0; font-size: 1.06rem; font-weight: 700; color: var(--ink); }

.plan__price { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
.plan__num { font-size: 2.1rem; letter-spacing: .01em; }
.plan__price small { font-size: .82rem; font-weight: 500; color: var(--ink-soft); }

.plan__prices { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.plan__prices li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 1px dashed var(--line-strong); padding-bottom: 9px;
}
.plan__prices span { font-size: .9rem; color: var(--ink-soft); }
.plan__prices strong { font-size: 1.35rem; color: var(--orange-dark); }

.plan__note {
  font-size: .84rem; color: var(--ink-soft); line-height: 1.8;
  background: var(--bg-soft); border-radius: var(--r-sm); padding: 12px 14px;
}

.detail-grid {
  display: grid; gap: clamp(16px, 2.4vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  align-items: start;
}
.detail-card { background: #fff; border-radius: var(--r); padding: clamp(22px, 2.8vw, 30px); }
.detail-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.detail-card__icon {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--yellow); color: #4a3a00;
}
.detail-card__icon--green { background: var(--forest); color: #fff; }
.detail-card__icon .ico { width: 23px; height: 23px; }
.detail-card__title { font-size: 1.12rem; font-weight: 700; color: var(--ink); }
.detail-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.detail-card__list li {
  position: relative; padding-left: 20px;
  font-size: .93rem; color: var(--ink-soft); line-height: 1.9;
}
.detail-card__list li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--forest);
}

/* ------------------------------------------------------------
   お知らせ（ブログ）
------------------------------------------------------------ */
.post-list {
  display: grid; gap: clamp(14px, 2vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  align-items: start;
}
.post-card {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 2px solid var(--line-strong);
  border-radius: var(--r); padding: clamp(20px, 2.6vw, 28px);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.post-card:hover { border-color: var(--forest); transform: translateY(-3px); }
.post-card__date {
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  color: var(--yellow-dark);
}
.post-card__title { font-size: 1.1rem; font-weight: 700; color: var(--ink); line-height: 1.65; }
.post-card__summary { font-size: .9rem; color: var(--ink-soft); line-height: 1.9; }
.post-card__more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
  font-size: .86rem; font-weight: 700; color: var(--forest);
}
.post-card__more .ico { width: 15px; height: 15px; }

.post { max-width: 760px; }
.post__crumb {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: .84rem; color: var(--ink-soft); margin-bottom: 22px;
}
.post__crumb a { color: var(--forest); }
.post__head { border-bottom: 2px solid var(--line-strong); padding-bottom: 22px; margin-bottom: 28px; }
.post__date {
  display: block; font-size: .86rem; font-weight: 700;
  letter-spacing: .04em; color: var(--yellow-dark); margin-bottom: 10px;
}
.post__title {
  font-size: clamp(1.4rem, 3.4vw, 2rem); font-weight: 700;
  color: var(--ink); line-height: 1.6; margin-bottom: 12px;
}
.post__summary { color: var(--ink-soft); line-height: 1.95; }
.post__body { color: var(--ink); line-height: 2.05; }
.post__body p { margin-bottom: 1.4em; }
.post__body p:last-child { margin-bottom: 0; }
.post__link { margin-top: clamp(28px, 4vw, 40px); }

/* ============================================================
   ヒーロー：全面の写真＋柄つきパネル

   写真に色の膜をかけると4回差し戻された。原因は「写真の上に直接
   文字を置くこと」。かといって写真を小さくすると物足りない、
   と言われたので、**写真は画面いっぱいのまま、文字は不透明な
   パネルにのせる**形にした。写真の明るさが変わっても文字は必ず読める。

   パネルの柄は依頼者の指定（「文字の裏に柄が入った四角形」）。
   これは「背景に柄を敷き詰めない」の対象外＝パネルの中だけの装飾。
   ============================================================ */

.hero--cover {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: var(--forest);          /* 写真が無いときの下地 */
  min-height: clamp(540px, 78vh, 780px);
  display: flex;
  align-items: center;
}
.hero--cover .hero__media { position: absolute; inset: 0; z-index: 0; }
.hero--cover .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero--cover .hero__media::after { content: none; }   /* 膜は付けない */

.hero--cover .hero__inner {
  position: relative; z-index: 1;
  /* .wrap は width で左右の余白を作っている（padding ではない）。
     width を上書きすると余白が消えてパネルが画面端に張り付くので触らない。
     .hero__inner の max-width: 660px だけ解除する */
  max-width: none;
  padding-block: clamp(48px, 7vw, 92px) clamp(76px, 10vw, 132px);
}

/* 文字をのせるパネル */
.hero__panel {
  position: relative;
  max-width: 620px;
  padding: clamp(30px, 3.8vw, 46px) clamp(26px, 3.4vw, 44px);
  border-radius: var(--r);
  border: 3px solid #fff;
  color: #fff;
  /* 深緑の地に、白い水玉をうっすら重ねた柄 */
  background-color: #33503b;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .12) 1.7px, transparent 1.8px);
  background-size: 17px 17px;
  box-shadow: 0 20px 48px rgba(26, 40, 30, .38);
}
.hero__panel-body { position: relative; z-index: 2; }

.hero--cover .hero__title { color: #fff; }
.hero--cover .hero__title em { color: var(--yellow); background: none; padding: 0; }
.hero--cover .hero__lead { color: rgba(255, 255, 255, .93); margin-bottom: 32px; }
.hero--cover .hero__en { color: var(--yellow); }
.hero--cover .hero__eyebrow {
  color: #fff; background: rgba(255, 255, 255, .16);
  border: 2px solid rgba(255, 255, 255, .5); border-radius: 999px; padding: 7px 16px;
}
.hero--cover .hero__eyebrow .ico { color: var(--yellow); }

/* ボタンは黄色と白。深緑のパネルの上でいちばん目立つ */
.hero--cover .btn--primary {
  background: var(--yellow); color: #4a3a00; box-shadow: 0 4px 0 #c9ae00;
}
.hero--cover .btn--primary:hover:not(:disabled) { background: #ffe94d; color: #4a3a00; }
.hero--cover .btn--primary:active { box-shadow: 0 1px 0 #c9ae00; }
.hero--cover .btn--ghost { background: #fff; color: var(--forest); border-color: #fff; }
.hero--cover .btn--ghost:hover { background: #fff; color: var(--forest); border-color: #fff; }

/* 文字タイルは黄色と白の交互、★だけオレンジ */
.hero--cover .hero__tiles span:nth-child(1) { background: var(--yellow); color: #4a3a00; }
.hero--cover .hero__tiles span:nth-child(2) { background: #fff; color: var(--forest); }
.hero--cover .hero__tiles span:nth-child(3) { background: var(--yellow); color: #4a3a00; }
.hero--cover .hero__tiles span:nth-child(4) { background: #fff; color: var(--forest); }
.hero--cover .hero__tiles span:nth-child(5) { background: var(--yellow); color: #4a3a00; }
.hero--cover .hero__tiles span:nth-child(6) { background: #fff; color: var(--forest); }
.hero--cover .hero__tiles span:nth-child(7) { background: var(--orange); color: #4a2a00; }

/* 飾りはパネルの外側の角に。文字やボタンの裏には置かない */
.deco--p1 { top: -30px; right: -26px; }          /* きらきら（右上の外） */
.deco--p2 { top: -80px; left: -80px; }           /* 輪（左上の外） */
.deco--p3 { bottom: -44px; right: -48px; }       /* 水玉（右下の外） */
.hero__panel .deco { z-index: 0; }
@media (max-width: 700px) {
  .hero__panel { max-width: none; }
  .deco--p2, .deco--p3 { display: none; }
}

/* ============================================================
   横に並ぶカードは高さをそろえる
   （そろっていないと気になる、という指摘）
   下端にリンクがあるカードは、そのリンクを下に貼り付ける
   ============================================================ */
.entry-grid,
.usecase-grid,
.plan-grid,
.detail-grid,
.post-list,
.service-grid { align-items: stretch; }

.entry, .usecase, .plan, .detail-card, .post-card, .service {
  display: flex; flex-direction: column;
}
.entry > :last-child,
.service__more,
.plan__note { margin-top: auto; }

/* 申し込みカードのボタンは横幅いっぱいにせず、左に置いたまま下端へ */
.entry .btn { align-self: flex-start; }
.entry #externalEntryList { margin-top: 18px; }

/* ============================================================
   セクションの継ぎ目に線が出ないようにする
   小数の高さで1px の隙間が見えることがあるので、
   波を1pxだけ下に食い込ませる
   ============================================================ */
.wave { margin-bottom: -1px; position: relative; z-index: 1; }
.hero__wave { margin-bottom: -1px; }

/* 写真の下の波は、.hero のはみ出しの切り落とし（overflow: hidden）の中にあるので、
   下に食い込ませても切られて効かない。表示を125%・150%に拡大したパソコンで、
   波と次の面のあいだに暗い線が1本出ていた。次の面を2px上に重ねて、つなぎ目を覆う */
.hero + * { margin-top: -2px; position: relative; z-index: 1; }

/* ============================================================
   ヒーロー：横長の大きな写真 ＋ 重なる「柄つきカード」

   参考サイト（ariakehoiku）は白地に大きな写真、そばに手描き風の
   見出しときらきら、という軽くてかわいい作り。
   深緑のパネルは真逆で「かわいくない」と差し戻されたので、
   明るいカードに変えた。カードは不透明なので文字は必ず読める。
   ============================================================ */

.hero--card {
  position: relative; overflow: hidden;
  display: block; min-height: 0;
  background: var(--bg);
  padding: clamp(24px, 3.4vw, 44px) 0 clamp(52px, 7vw, 88px);
}
.hero--card .hero__inner { position: relative; z-index: 1; max-width: none; padding: 0; }

/* 写真は横長でばーんと */
.hero__photo {
  border-radius: clamp(20px, 2.8vw, 34px);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(74, 63, 54, .18);
}
.hero__photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 21 / 9; object-fit: cover;
}

/* 写真に重ねる、柄の入った明るいカード */
.hero__card {
  position: relative;
  margin-top: clamp(-104px, -8vw, -52px);
  margin-inline: 0 auto;
  max-width: 740px;
  padding: clamp(26px, 3.2vw, 42px) clamp(24px, 3vw, 40px);
  border-radius: clamp(20px, 2.8vw, 32px);
  border: 3px solid var(--yellow);
  /* うすいクリーム地に、黄色の水玉の柄 */
  background-color: #fffdf3;
  background-image: radial-gradient(circle, rgba(228, 176, 20, .22) 2px, transparent 2.1px);
  background-size: 18px 18px;
  box-shadow: 0 14px 34px rgba(74, 63, 54, .14);
}
.hero__card-body { position: relative; z-index: 2; }

.hero--card .hero__title { color: var(--ink); }
.hero--card .hero__title em {
  color: inherit;
  background: linear-gradient(transparent 58%, var(--yellow) 58%);
  padding: 0 .1em;
}
.hero--card .hero__lead { color: var(--ink-soft); margin-bottom: 30px; }
.hero--card .hero__en { color: var(--yellow-dark); }
.hero--card .hero__eyebrow {
  color: var(--forest); background: #fff;
  border: 2px solid var(--forest); border-radius: 999px; padding: 7px 16px;
}
.hero--card .hero__eyebrow .ico { color: var(--orange); }

/* ボタンは深緑と白。明るいカードの上ではっきり見える */
.hero--card .btn--primary { background: var(--forest); color: #fff; box-shadow: 0 4px 0 #2c4231; }
.hero--card .btn--primary:hover:not(:disabled) { background: #35503c; color: #fff; }
.hero--card .btn--primary:active { box-shadow: 0 1px 0 #2c4231; }
.hero--card .btn--ghost { background: #fff; color: var(--forest); border-color: var(--forest); }
.hero--card .btn--ghost:hover { background: var(--forest); color: #fff; border-color: var(--forest); }

/* 文字タイルは深緑と黄色の交互、★だけオレンジ */
.hero--card .hero__tiles span:nth-child(1) { background: var(--forest); color: #fff; }
.hero--card .hero__tiles span:nth-child(2) { background: var(--yellow); color: #4a3a00; }
.hero--card .hero__tiles span:nth-child(3) { background: var(--forest); color: #fff; }
.hero--card .hero__tiles span:nth-child(4) { background: var(--yellow); color: #4a3a00; }
.hero--card .hero__tiles span:nth-child(5) { background: var(--forest); color: #fff; }
.hero--card .hero__tiles span:nth-child(6) { background: var(--yellow); color: #4a3a00; }
.hero--card .hero__tiles span:nth-child(7) { background: var(--orange); color: #4a2a00; }

/* 飾りはページの四隅。文字やボタンの裏には置かない */
.hero--card .deco--h1 { top: 6%;  left: -34px; }
.hero--card .deco--h2 { bottom: 8%; right: -46px; }
.hero--card .deco--h3 { top: 3%;  right: 6%; }
.hero--card .deco--h4 { bottom: 18%; left: 4%; }

@media (max-width: 860px) {
  .hero__photo img { aspect-ratio: 16 / 10; }
  .hero__card { margin-top: clamp(-56px, -6vw, -32px); margin-inline: 0; max-width: none; }
  .hero--card .deco--h3, .hero--card .deco--h4 { display: none; }
}

/* ============================================================
   申し込みカード：ボタンを下に押し下げない
   （下に押しやると、上に変な余白ができると指摘された）
   高さはそろえたまま、中身は上から順に置く
   ============================================================ */
/* 2枚のカードのボタンの高さをぴったりそろえる。
   どちらのカードもボタンが最後の要素になるように HTML の並びを
   「本文 → 一覧 → ボタン」にしてある。並びを変えるとずれる。 */
.entry > :last-child { margin-top: 0; }
.entry .btn { margin-top: auto; }
.entry #externalEntryList { margin-top: 18px; margin-bottom: 18px; }
.entry #externalEntryList:empty { margin: 0; }

/* --- ヒーローのカードを少し詰める（ボタンが下に行きすぎないように） --- */
.hero--card .hero__eyebrow { margin-bottom: 18px; }
.hero--card .hero__tiles   { margin-bottom: 16px; }
.hero--card .hero__en      { margin-bottom: 10px; }
.hero--card .hero__title   { margin-bottom: 20px; line-height: 1.45; }
.hero--card .hero__lead    { margin-bottom: 26px; }
.hero__card { margin-top: clamp(-140px, -10vw, -64px); }

/* ============================================================
   ヒーロー：写真を横いっぱい、その上に直接文字（枠なし）

   写真の上に文字を置くと、写真の明るいところで文字が読めなくなる。
   平らな色の膜は4色ぜんぶ差し戻されているので、
   代わりに**文字のある左下だけを落とす影のグラデーション**をかける。
   写真の右上はそのまま見えるので、色を塗ったようには見えない。
   ============================================================ */

.hero--full {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;      /* 文字は下寄せ */
  padding: 0;
  min-height: clamp(560px, 82vh, 820px);
  background: var(--forest);                 /* 写真が無いときの下地 */
}
.hero--full .hero__media { position: absolute; inset: 0; z-index: 0; }
.hero--full .hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* 下と左を落とす。平らに塗らないので写真は写真のまま見える */
.hero--full .hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      rgba(22, 34, 25, .90) 0%,
      rgba(22, 34, 25, .78) 26%,
      rgba(22, 34, 25, .54) 52%,
      rgba(22, 34, 25, .26) 78%,
      rgba(22, 34, 25, .08) 100%),
    linear-gradient(to right,
      rgba(22, 34, 25, .58) 0%,
      rgba(22, 34, 25, .26) 40%,
      rgba(22, 34, 25, .02) 72%,
      transparent 100%);
}

.hero--full .hero__inner {
  position: relative; z-index: 1;
  max-width: none;
  padding-block: clamp(72px, 11vw, 130px) clamp(84px, 12vw, 150px);
}
.hero--full .hero__eyebrow,
.hero--full .hero__tiles,
.hero--full .hero__en,
.hero--full .hero__title,
.hero--full .hero__lead,
.hero--full .hero__actions { max-width: 720px; }

/* 文字は白。影を少し敷いて、写真の明るいところでも輪郭が出るようにする */
.hero--full .hero__title {
  color: #fff;
  text-shadow: 0 2px 16px rgba(14, 24, 16, .5);
}
.hero--full .hero__title em {
  color: var(--yellow); background: none; padding: 0;
}
.hero--full .hero__lead {
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 1px 10px rgba(14, 24, 16, .55);
  margin-bottom: 30px;
}
.hero--full .hero__en {
  color: var(--yellow);
  text-shadow: 0 1px 8px rgba(14, 24, 16, .5);
}
.hero--full .hero__eyebrow {
  display: inline-flex;
  color: #fff; background: rgba(22, 34, 25, .58);
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: 999px; padding: 7px 16px;
  backdrop-filter: blur(4px);
}
.hero--full .hero__eyebrow .ico { color: var(--yellow); }

/* ボタンは黄色と白。暗くなった下側でいちばん目立つ */
.hero--full .btn--primary {
  background: var(--yellow); color: #4a3a00; box-shadow: 0 4px 0 #c9ae00;
}
.hero--full .btn--primary:hover:not(:disabled) { background: #ffe94d; color: #4a3a00; }
.hero--full .btn--primary:active { box-shadow: 0 1px 0 #c9ae00; }
.hero--full .btn--ghost { background: #fff; color: var(--forest); border-color: #fff; }
.hero--full .btn--ghost:hover { background: #fff; color: var(--forest); border-color: #fff; }

/* 文字タイルは黄色と白の交互、★だけオレンジ */
.hero--full .hero__tiles span:nth-child(1) { background: var(--yellow); color: #4a3a00; }
.hero--full .hero__tiles span:nth-child(2) { background: #fff; color: var(--forest); }
.hero--full .hero__tiles span:nth-child(3) { background: var(--yellow); color: #4a3a00; }
.hero--full .hero__tiles span:nth-child(4) { background: #fff; color: var(--forest); }
.hero--full .hero__tiles span:nth-child(5) { background: var(--yellow); color: #4a3a00; }
.hero--full .hero__tiles span:nth-child(6) { background: #fff; color: var(--forest); }
.hero--full .hero__tiles span:nth-child(7) { background: var(--orange); color: #4a2a00; }

@media (max-width: 760px) {
  .hero--full { min-height: clamp(480px, 76vh, 640px); }
  .hero--full .hero__media::after {
    background: linear-gradient(to top,
      rgba(22, 34, 25, .93) 0%,
      rgba(22, 34, 25, .88) 34%,
      rgba(22, 34, 25, .74) 62%,
      rgba(22, 34, 25, .52) 88%,
      rgba(22, 34, 25, .38) 100%);
  }
}

/* ============================================================
   ヒーローの文字まわり（作り直し）
   ============================================================ */

/* --- 影は少し薄く。写真がよく見えるように --- */
.hero--full .hero__media::after {
  background:
    linear-gradient(to top,
      rgba(22, 34, 25, .80) 0%,
      rgba(22, 34, 25, .66) 26%,
      rgba(22, 34, 25, .42) 52%,
      rgba(22, 34, 25, .18) 78%,
      rgba(22, 34, 25, .04) 100%),
    linear-gradient(to right,
      rgba(22, 34, 25, .50) 0%,
      rgba(22, 34, 25, .22) 40%,
      rgba(22, 34, 25, .02) 72%,
      transparent 100%);
}
@media (max-width: 760px) {
  .hero--full .hero__media::after {
    background: linear-gradient(to top,
      rgba(22, 34, 25, .88) 0%,
      rgba(22, 34, 25, .82) 34%,
      rgba(22, 34, 25, .66) 62%,
      rgba(22, 34, 25, .44) 88%,
      rgba(22, 34, 25, .32) 100%);
  }
}

/* --- 上のラベル：うすい半透明の枠から、白いピルへ --- */
.hero--full .hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--forest);
  border: none; border-radius: 999px;
  padding: 9px 20px 9px 16px;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  box-shadow: 0 4px 14px rgba(14, 24, 16, .28);
  backdrop-filter: none;
  margin-bottom: 22px;
}
.hero--full .hero__eyebrow .ico { width: 17px; height: 17px; color: var(--orange); }

/* --- 見出し：白文字。「輝ける場所」だけ色の帯を敷く --- */
.hero--full .hero__title {
  color: #fff;
  text-shadow: 0 2px 16px rgba(14, 24, 16, .5);
  line-height: 1.5;
}
/* 前の `.hero--full .hero__title em`（黄色の文字）より強く当てる必要がある */
.hero--full .hero__title em.hero__mark {
  position: relative;
  display: inline-block;
  font-style: normal;
  color: #fff;                       /* 帯の上でも白文字のまま */
  background: var(--orange-dark);    /* 蛍光ペンのような帯 */
  padding: .06em .34em .1em;
  border-radius: .28em;
  box-shadow: 0 6px 18px rgba(120, 58, 8, .34);
  text-shadow: none;
}

/* --- まわりのきらきら（白とうすい黄色） --- */
.spark {
  position: absolute; display: block; pointer-events: none;
  background: center/contain no-repeat;
}
.spark--a, .spark--c {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.4c.75 5.5 2.7 7.45 8.2 8.2-5.5.75-7.45 2.7-8.2 8.2-.75-5.5-2.7-7.45-8.2-8.2 5.5-.75 7.45-2.7 8.2-8.2z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.spark--b, .spark--d {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.4c.75 5.5 2.7 7.45 8.2 8.2-5.5.75-7.45 2.7-8.2 8.2-.75-5.5-2.7-7.45-8.2-8.2 5.5-.75 7.45-2.7 8.2-8.2z' fill='%23ffefa8'/%3E%3C/svg%3E");
}
.spark--a { width: .42em; height: .42em; top: -.34em; left: -.3em; }
.spark--b { width: .3em;  height: .3em;  top: -.12em; right: -.42em; }
.spark--c { width: .34em; height: .34em; bottom: -.24em; right: .6em; }
.spark--d { width: .24em; height: .24em; bottom: -.1em;  left: .3em; }

@keyframes twinkle {
  0%, 100% { opacity: .45; transform: scale(.82); }
  50%      { opacity: 1;   transform: scale(1.12); }
}
.spark { animation: twinkle 2.6s ease-in-out infinite; }
.spark--b { animation-delay: .7s; }
.spark--c { animation-delay: 1.3s; }
.spark--d { animation-delay: 1.9s; }
@media (prefers-reduced-motion: reduce) {
  .spark { animation: none; opacity: .9; }
}

/* --- ボタン：帯のオレンジと色が被らないように、深緑と白にする --- */
.hero--full .btn--primary {
  background: var(--forest); color: #fff; box-shadow: 0 4px 0 #22321f;
}
.hero--full .btn--primary:hover:not(:disabled) { background: #35503c; color: #fff; }
.hero--full .btn--primary:active { box-shadow: 0 1px 0 #22321f; }
.hero--full .btn--ghost { background: #fff; color: var(--forest); border-color: #fff; }
.hero--full .btn--ghost:hover { background: #fff; color: var(--green-dark); border-color: #fff; }

/* --- 星のマークをやめたので、施設名は常に出す ---
   以前はロゴ画像が読めないとき用に星を出していたが、
   ロゴと関係のない記号なので削除した（依頼者の指定）。
   代わりに、ロゴの有無にかかわらず施設名の文字を必ず表示する。 */
.brand__text { display: block !important; }

/* ============================================================
   フォトスタジオのページの配色をサイト本来の色に直す

   もとの料金表の画像はオレンジ多用だったが、それは依頼者が
   「指示をしやすくするため」に作ったもの。
   サイトの決まり（緑と黄色を主役に、オレンジはアクセント）に合わせる。
   マークは依頼者ご自身で入れるので、こちらでは置かない。
   ============================================================ */

/* おすすめのプランは深緑で示す（オレンジの枠をやめる） */
.plan--pick {
  border-color: var(--forest); border-width: 3px;
  box-shadow: 0 10px 0 rgba(63, 92, 70, .16);
}
.plan__ribbon { background: var(--forest); color: #fff; }

/* 料金は深緑。オレンジは使わない */
.plan__prices strong { color: var(--forest); }
.plan__price { color: var(--forest); }
.plan__num { color: var(--forest); }

/* 時間の欄はうすい黄色、補足はうすい緑にして、面の色で区別する */
.plan__spec > div { background: var(--bg-soft); }
.plan__note { background: var(--bg-tint); color: var(--ink-soft); }

/* マークを外したぶんの余白をつめる */
.plan__icon { display: none; }
.detail-card__icon { display: none; }
.detail-card__head { gap: 0; margin-bottom: 16px; }
.detail-card__title {
  border-left: 5px solid var(--forest);
  padding-left: 12px;
}

/* ============================================================
   1. 写真の下の白い帯をなくす

   ヒーローの波の色が `--bg`（クリーム）で、その下のセクションが
   `--bg-soft`（うすい黄色）だったため、あいだに白い帯が見えていた。
   波を下のセクションと同じ色にする。
   ============================================================ */
.hero--full .hero__wave svg { fill: var(--bg-soft); }

/* ============================================================
   2. 「輝ける場所」を明るく

   濃いオレンジの帯だと「輝いて見えない」と差し戻された。
   ロゴの黄色の帯にして、文字は濃い茶にする
   （明るい黄色に白文字はコントラストが 1.5:1 まで落ちるため）。
   ============================================================ */
.hero--full .hero__title em.hero__mark {
  background: linear-gradient(180deg, #ffe94d 0%, var(--yellow) 55%, #f5cf00 100%);
  color: #4a3400;
  box-shadow: 0 6px 20px rgba(200, 160, 0, .45);
  text-shadow: none;
}

/* --- きらきらを8つに増やして、帯のまわりに散らす --- */
.spark--e { width: .26em; height: .26em; top: -.26em; left: 38%; }
.spark--f { width: .36em; height: .36em; top: .1em;  right: -.62em; }
.spark--g { width: .2em;  height: .2em;  bottom: -.3em; left: 62%; }
.spark--h { width: .3em;  height: .3em;  top: -.2em;  right: 22%; }
.spark--e { animation-delay: .35s; }
.spark--f { animation-delay: 1.0s; }
.spark--g { animation-delay: 1.6s; }
.spark--h { animation-delay: 2.2s; }

/* 黄色い帯の上では、白いきらきらは見えないので濃い色に切り替える */
.hero__mark .spark--a,
.hero__mark .spark--c,
.hero__mark .spark--e,
.hero__mark .spark--g {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.4c.75 5.5 2.7 7.45 8.2 8.2-5.5.75-7.45 2.7-8.2 8.2-.75-5.5-2.7-7.45-8.2-8.2 5.5-.75 7.45-2.7 8.2-8.2z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.hero__mark .spark--b,
.hero__mark .spark--d,
.hero__mark .spark--f,
.hero__mark .spark--h {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.4c.75 5.5 2.7 7.45 8.2 8.2-5.5.75-7.45 2.7-8.2 8.2-.75-5.5-2.7-7.45-8.2-8.2 5.5-.75 7.45-2.7 8.2-8.2z' fill='%23ffe100'/%3E%3C/svg%3E");
}

/* ============================================================
   3. 「ステラテラスについて」のボタンを明るく

   深緑だと暗い写真に沈んで目立たないと差し戻された。
   帯の黄色と混ざらないよう、明るいオレンジにする。
   ============================================================ */
.hero--full .btn--primary {
  background: var(--orange); color: #3d2200; box-shadow: 0 4px 0 #b8600f;
}
.hero--full .btn--primary:hover:not(:disabled) { background: #ff9c45; color: #3d2200; }
.hero--full .btn--primary:active { box-shadow: 0 1px 0 #b8600f; }

/* ============================================================
   4. ページ全体に飾りを足す（きらきら・枠の四角）

   参考サイトと同じで「散らした飾り」。敷き詰める柄ではない。
   文字やボタンの裏に来ないよう、左右の余白に置く。
   ============================================================ */
.deco--spark,
.deco--spark2,
.deco--spark3 { background: center/contain no-repeat; }

/* 黄色のきらきら */
.deco--spark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.4c.75 5.5 2.7 7.45 8.2 8.2-5.5.75-7.45 2.7-8.2 8.2-.75-5.5-2.7-7.45-8.2-8.2 5.5-.75 7.45-2.7 8.2-8.2z' fill='%23ffd400'/%3E%3C/svg%3E");
}
/* 緑のきらきら */
.deco--spark2 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.4c.75 5.5 2.7 7.45 8.2 8.2-5.5.75-7.45 2.7-8.2 8.2-.75-5.5-2.7-7.45-8.2-8.2 5.5-.75 7.45-2.7 8.2-8.2z' fill='%236f9070'/%3E%3C/svg%3E");
}
/* 白のきらきら（濃い面の上で使う） */
.deco--spark3 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.4c.75 5.5 2.7 7.45 8.2 8.2-5.5.75-7.45 2.7-8.2 8.2-.75-5.5-2.7-7.45-8.2-8.2 5.5-.75 7.45-2.7 8.2-8.2z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* 枠だけの四角（少しかたむける） */
.deco--square {
  border: 4px solid var(--yellow);
  border-radius: 10px;
  transform: rotate(14deg);
  opacity: .7;
}

/* 置き場所
   本文は .wrap の中（左右に余白がある）ので、飾りは必ずその外側に置く。
   端から少しはみ出させて、はみ出した分は overflow: hidden で切る。
   ％で置くと画面幅によって本文に重なるので、px で端から測ること。 */
.deco--s1 { width: 46px; height: 46px; top: 12%;   right: -14px; }
.deco--s2 { width: 62px; height: 62px; bottom: 14%; left: -20px; }
.deco--s3 { width: 40px; height: 40px; top: 10%;   left: -12px; }
.deco--s4 { width: 70px; height: 70px; top: 30%;   right: -24px; border-color: var(--green); }
.deco--s5 { width: 34px; height: 34px; bottom: 12%; right: -10px; }
.deco--s6 { width: 44px; height: 44px; top: 14%;   right: -14px; }
.deco--s7 { width: 58px; height: 58px; bottom: 14%; left: -18px; border-color: var(--orange); }
.deco--s8 { width: 42px; height: 42px; top: 12%;   left: -12px; }
.deco--s9 { width: 64px; height: 64px; bottom: 14%; right: -22px; border-color: #fff; }

/* 飾りを置くセクションは、はみ出しを切って重ならないようにする */
.pillars, #about, #events, #flow { position: relative; overflow: hidden; }
.pillars > .wrap, #about > .wrap, #events > .wrap, #flow > .wrap { position: relative; z-index: 1; }

/* 画面が狭いと左右の余白が無くなり、飾りが本文にかかるので消す */
@media (max-width: 1100px) {
  .deco--s1, .deco--s2, .deco--s3, .deco--s4, .deco--s5,
  .deco--s6, .deco--s7, .deco--s8, .deco--s9 { display: none; }
}

/* --- 狭い画面でも飾りが少しは見えるように ---
   左右に余白が無いので、セクションの上下の余白（padding）の中に
   小さく置く。見出しは左寄せなので、右上の角は必ず空いている。 */
@media (max-width: 1100px) {
  .deco--s1, .deco--s3, .deco--s6, .deco--s8 {
    display: block;
    width: 26px; height: 26px;
    top: 14px; bottom: auto;
    right: 14px; left: auto;
  }
  .deco--s2, .deco--s7 {
    display: block;
    width: 22px; height: 22px;
    top: 9px; bottom: auto;
    right: 50px; left: auto;
  }
}

/* ============================================================
   「輝ける場所」を、帯をやめて白→黄色のグラデーションの文字にする

   黄色の帯だと「背景が要らない」と差し戻された。
   文字そのものに色をつけて、輝いている感じを出す。
   background-clip: text は文字の形に背景を切り抜く仕組みで、
   影は text-shadow ではなく filter: drop-shadow で付ける
   （text-shadow は切り抜きの外側になり効かないため）。
   ============================================================ */
.hero--full .hero__title em.hero__mark {
  background: none;
  color: #fff;                       /* 切り抜きが効かない環境用 */
  padding: 0 .04em;
  border-radius: 0;
  box-shadow: none;
  text-shadow: 0 2px 16px rgba(14, 24, 16, .5);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero--full .hero__title em.hero__mark {
    background-image: linear-gradient(176deg,
      #ffffff 0%, #ffffff 30%, #fff6b0 58%, var(--yellow) 84%, #ffd000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 12px rgba(14, 24, 16, .62))
            drop-shadow(0 0 2px rgba(14, 24, 16, .45));
  }
}

/* ============================================================
   イベントを複数選べるようにしたぶんの見た目
   ============================================================ */

/* 選んだ数の表示 */
.field__count {
  margin-top: 12px; padding: 8px 16px;
  display: inline-block; border-radius: 999px;
  background: var(--forest); color: #fff;
  font-size: .84rem; font-weight: 700;
}

/* チェックボックスは四角、ラジオは丸で見分けられるようにする */
.choice:has(input[type="checkbox"]) .choice__dot { border-radius: 7px; }

/* 完了画面：申し込んだイベントを並べる */
.done__events { display: grid; gap: 10px; justify-items: center; margin-bottom: 8px; }
.done__event {
  display: inline-block; padding: 10px 20px; border-radius: 999px;
  background: var(--bg-soft); color: var(--ink);
  font-size: .95rem; font-weight: 700;
}

/* ============================================================
   ヒーローに施設名を入れる

   「吉野ヶ里町の子育て支援カフェ ステラテラス で
     大人も子どもも輝ける場所」という流れにする。
   ============================================================ */
.hero__name {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  font-weight: 700;
  letter-spacing: .16em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(14, 24, 16, .55);
}

/* ============================================================
   イベント申し込みの2枚のカードを同じ形にそろえる
   （片方だけイベント名を並べていたので、空白の差が大きかった）
   ============================================================ */
.entry__count {
  display: inline-block; align-self: flex-start;
  margin: 4px 0 20px; padding: 7px 16px;
  border-radius: 999px;
  background: var(--bg-soft); color: var(--yellow-dark);
  font-size: .84rem; font-weight: 700;
}
.entry__count:empty { display: none; }

/* ============================================================
   飾りを、白や黄色のセクションにも足す
   置き方はこれまでと同じ（本文の外側・端から px で測る）
   ============================================================ */
.deco--s10 { width: 40px; height: 40px; top: 12%;   left: -12px; }
.deco--s11 { width: 56px; height: 56px; bottom: 14%; right: -20px; border-color: var(--green); }
.deco--s12 { width: 38px; height: 38px; top: 14%;   right: -12px; }
.deco--s13 { width: 60px; height: 60px; bottom: 16%; left: -22px; border-color: var(--yellow); }
.deco--s14 { width: 44px; height: 44px; top: 6%;    left: -14px; }
.deco--s15 { width: 66px; height: 66px; bottom: 10%; right: -24px; border-color: var(--green); }
.deco--s16 { width: 40px; height: 40px; top: 12%;   right: -12px; }
.deco--s17 { width: 54px; height: 54px; bottom: 14%; left: -18px; border-color: var(--orange); }
.deco--s18 { width: 38px; height: 38px; top: 16%;   left: -12px; }

#gallerySection, #news, #info { position: relative; overflow: hidden; }
#gallerySection > .wrap, #news > .wrap, #info > .wrap { position: relative; z-index: 1; }

@media (max-width: 1100px) {
  .deco--s10, .deco--s11, .deco--s12, .deco--s13, .deco--s14,
  .deco--s15, .deco--s16, .deco--s17, .deco--s18 { display: none; }
  /* セクションの上の余白の右上に、小さく出す */
  .deco--s10, .deco--s12, .deco--s14, .deco--s16 {
    display: block;
    width: 24px; height: 24px;
    top: 14px; bottom: auto; right: 14px; left: auto;
  }
}

/* ============================================================
   ヒーローの見出しの並びを入れ替える

   「大人も子どもも／輝ける場所」→「ステラテラス」の順で、
   施設名をいちばん大きく見せる（依頼者の指定）。
   キャッチコピーは前置きの位置になるので、少し小さくする。
   ============================================================ */
.hero--full .hero__title {
  font-size: clamp(1.32rem, 3.6vw, 2.15rem);
  line-height: 1.5;
  letter-spacing: .04em;
  margin-bottom: 24px;
}
.hero--full .hero__name {
  display: block;
  margin: 14px 0 0;
  font-size: clamp(2.3rem, 7.4vw, 4.6rem);
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 3px 22px rgba(14, 24, 16, .58), 0 0 3px rgba(14, 24, 16, .4);
}

/* ============================================================
   「ステラテラスについて」のボタンを、うすい黄色に
   （オレンジより、やわらかい黄色がよいとの指定）
   ============================================================ */
.hero--full .btn--primary {
  background: #ffe98a; color: #4a3a00; box-shadow: 0 4px 0 #e0c860;
}
.hero--full .btn--primary:hover:not(:disabled) { background: #fff2b3; color: #4a3a00; }
.hero--full .btn--primary:active { box-shadow: 0 1px 0 #e0c860;
}

/* ============================================================
   ヒーローの仕上げ
   ・キャッチは一行
   ・施設名にもきらきら
   ・ボタンは①②③のカードに任せて、ヒーローからは外した
   ============================================================ */

/* キャッチと施設名のあいだを少し空ける（一行になったぶん） */
.hero--full .hero__title { margin-bottom: 26px; }
.hero--full .hero__name { position: relative; margin-top: 10px; }

/* 施設名のきらきら（文字が大きいので em で置くとちょうどよい） */
.spark--n1 { width: .17em; height: .17em; top: -.1em;  left: -.14em; }
.spark--n2 { width: .12em; height: .12em; top: .06em;  right: -.2em; }
.spark--n3 { width: .1em;  height: .1em;  bottom: -.06em; left: 26%; }
.spark--n4 { width: .14em; height: .14em; top: -.16em; right: 30%; }
.spark--n5 { width: .09em; height: .09em; bottom: .02em; right: 8%; }
.spark--n1 { animation-delay: .2s; }
.spark--n2 { animation-delay: .9s; }
.spark--n3 { animation-delay: 1.5s; }
.spark--n4 { animation-delay: 2.1s; }
.spark--n5 { animation-delay: 2.7s; }
.hero__name .spark--n1,
.hero__name .spark--n3,
.hero__name .spark--n5 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.4c.75 5.5 2.7 7.45 8.2 8.2-5.5.75-7.45 2.7-8.2 8.2-.75-5.5-2.7-7.45-8.2-8.2 5.5-.75 7.45-2.7 8.2-8.2z' fill='%23ffe100'/%3E%3C/svg%3E");
}
.hero__name .spark--n2,
.hero__name .spark--n4 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.4c.75 5.5 2.7 7.45 8.2 8.2-5.5.75-7.45 2.7-8.2 8.2-.75-5.5-2.7-7.45-8.2-8.2 5.5-.75 7.45-2.7 8.2-8.2z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* ============================================================
   ①②③のカードを、ページの入口としてはっきり見せる

   ヒーローからボタンを外したぶん、ここが申し込みへの入口になる。
   枠を太く、番号を大きく、下のリンクは「ボタンの形」にして押せると分かるようにする。
   ============================================================ */
.pillars { padding-top: clamp(48px, 6vw, 80px); }

.pillar {
  border-width: 3px;
  border-color: #cbdcc6;
  box-shadow: 0 8px 0 rgba(63, 92, 70, .13);
  padding: clamp(26px, 3vw, 34px) clamp(22px, 2.6vw, 30px) clamp(24px, 2.8vw, 30px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pillar:hover {
  transform: translateY(-5px);
  border-color: var(--forest);
  box-shadow: 0 13px 0 rgba(63, 92, 70, .2);
}

/* 番号を大きく */
.pillar__num {
  width: 52px; height: 52px;
  font-size: 1.15rem; letter-spacing: .02em;
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.pillar__title { font-size: 1.22rem; margin-bottom: 12px; }

/* 下のリンクを、押せると分かるボタンの形にする */
.pillar .link-arrow {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  align-self: stretch;
  margin-top: auto;
  padding: 14px 20px;
  border-radius: var(--r-full);
  font-size: .95rem; font-weight: 700;
  background: var(--forest); color: #fff;
  border-bottom: none;
  box-shadow: 0 4px 0 #2c4231;
  transition: background .2s ease, transform .12s ease, box-shadow .12s ease;
}
.pillar .link-arrow .ico { width: 17px; height: 17px; }
.pillar:hover .link-arrow { background: #35503c; }
.pillar:active .link-arrow { transform: translateY(3px); box-shadow: 0 1px 0 #2c4231; }

/* 2枚目（イベント参加申し込み）は黄色にして、いちばん目を引くようにする */
.pillar:nth-child(2) .link-arrow {
  background: var(--yellow); color: #4a3a00; box-shadow: 0 4px 0 #c9ae00;
}
.pillar:nth-child(2):hover .link-arrow { background: #ffe94d; color: #4a3a00; }
.pillar:nth-child(2):active .link-arrow { box-shadow: 0 1px 0 #c9ae00; }

/* 3枚目（当日受付）はオレンジ */
.pillar:nth-child(3) .link-arrow {
  background: var(--orange); color: #3d2200; box-shadow: 0 4px 0 #b8600f;
}
.pillar:nth-child(3):hover .link-arrow { background: #ff9c45; color: #3d2200; }
.pillar:nth-child(3):active .link-arrow { box-shadow: 0 1px 0 #b8600f; }

/* --- ①②③ も横並びなので高さをそろえる ---
   `.pillar__text` の flex:1 が効くように、カード自体を縦のフレックスにする。
   これでボタンは下端にそろう。 */
.pillar-grid { align-items: stretch; }
.pillar { display: flex; flex-direction: column; }

/* ============================================================
   「事前申込」「当日受付」のシールをもっと目立たせる

   カードの角から飛び出す丸バッジ。大きく・濃く・白フチを付けて、
   ぱっと目に入るようにする（依頼者の指定）。
   ============================================================ */
.pillar__badge {
  top: -18px; right: -14px;
  width: 84px; height: 84px;
  font-size: .88rem; line-height: 1.3; letter-spacing: .03em;
  border: 4px solid #fff;
  box-shadow: 0 6px 18px rgba(74, 63, 54, .3);
}
/* 02（事前申込）は黄色。ボタンと同じ色でそろえる */
.pillar:nth-child(2) .pillar__badge {
  background: var(--yellow); color: #4a3a00; transform: rotate(-9deg);
}
/* 03（当日受付）はオレンジ */
.pillar:nth-child(3) .pillar__badge {
  background: var(--orange); color: #3d2200; transform: rotate(8deg);
}
/* カードの角から出るので、切られないようにしておく */
.pillar { overflow: visible; }

@media (max-width: 520px) {
  .pillar__badge { width: 70px; height: 70px; font-size: .8rem; top: -14px; right: -8px; }
}

/* ============================================================
   参考サイトの「あしらいの様式」だけを取り入れる

   依頼者から分析シートを受け取って反映したもの。
   **配色は取り入れない**。参考サイトは空色 #009FE8 が主役だが、
   そのまま使うと参考サイトの複製になってしまうので、
   ステラテラスのロゴの2色（深緑・黄色）のまま様式だけを移している。

   取り入れたもの：リボンバナー／ドット装飾／紙のテクスチャ／
   ポラロイド風の写真／掲示板の枠／点線の区切り／
   ボタンの丸い矢印／スクロールでふわっと出る動き
   ============================================================ */

/* 参考シートにあった「枠のキャメル」だけ、色として新しく足す。
   掲示板の枠に使う。ほかの色はこれまでどおり :root の値を使うこと。 */
:root { --camel: #cfa267; }

/* ------------------------------------------------------------
   ① 紙のテクスチャ
   画用紙のような、ごく細かいざらつき。柄ではないので、
   「背景に柄を敷き詰めない」の対象外。目に見えるほど濃くしないこと。
------------------------------------------------------------ */
body {
  background-image: radial-gradient(rgba(73, 63, 57, .028) 1px, transparent 1px);
  background-size: 4px 4px;
  background-attachment: fixed;
}

/* ------------------------------------------------------------
   ② リボンバナー
   見出しの上の小さなラベルを、両端が燕尾に切れた帯にする。
   参考サイトでは英字だが、うちは日本語のピルをそのまま帯にした
   （英字と日本語を並べると読みにくい、という指摘が前にあったため）。
------------------------------------------------------------ */
.section__pill,
.section__label:not(.section__pill + .section__label) {
  position: relative;
  display: inline-block;
  margin-bottom: 18px;
  margin-inline: 16px 16px;
  padding: 9px 22px;
  border-radius: 0;
  background: var(--forest);
  color: #fff;
  font-size: .88rem; font-weight: 700; letter-spacing: .08em;
  box-shadow: 0 3px 10px rgba(74, 63, 54, .16);
}
/* 燕尾（両端の切れこみ） */
.section__pill::before, .section__pill::after,
.section__label:not(.section__pill + .section__label)::before,
.section__label:not(.section__pill + .section__label)::after {
  content: ""; position: absolute; top: 0;
  width: 16px; height: 100%;
  background: var(--forest-deep, #2c4231);
  /* 波線の指定を打ち消す */
  mask: none; -webkit-mask: none;
}
.section__pill::before,
.section__label:not(.section__pill + .section__label)::before {
  left: -14px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 46% 50%);
}
.section__pill::after,
.section__label:not(.section__pill + .section__label)::after {
  right: -14px; clip-path: polygon(0 0, 100% 0, 54% 50%, 100% 100%, 0 100%);
}

/* 色の違いはこれまでどおり残す */
.section__pill--green { background: var(--forest); color: #fff; }
.section__pill--green::before, .section__pill--green::after { background: #2c4231; }
.section__pill--yellow { background: var(--yellow); color: #4a3a00; }
.section__pill--yellow::before, .section__pill--yellow::after { background: #d9bf00; }
.section__pill--white { background: var(--orange); color: #3d2200; }
.section__pill--white::before, .section__pill--white::after { background: #c46f14; }

/* 英字だけのラベル（Gallery / News）は字間を広く */
.section__label:not(.section__pill + .section__label) {
  font-family: var(--font-en);
  letter-spacing: .28em; text-transform: uppercase; font-size: .76rem;
  padding: 10px 22px 10px 26px;
}

/* ------------------------------------------------------------
   ③ ドット装飾
   見出しの右側へ、小さな丸を格子に並べた帯を伸ばす。
------------------------------------------------------------ */
.section__head { position: relative; }
.section__head::after {
  content: ""; position: absolute; top: 12px; right: 0;
  width: clamp(90px, 16vw, 190px); height: 16px;
  background-image: radial-gradient(var(--forest) 40%, transparent 41%);
  background-size: 8px 8px;
  opacity: .3;
  pointer-events: none;
}
@media (max-width: 900px) { .section__head::after { display: none; } }

/* ------------------------------------------------------------
   ④ ポラロイド風の写真（フォトギャラリー）
   白フチ＋やわらかい影＋上にマスキングテープ。
   ※カルーセルの中なので傾けない（傾けると枠から見切れる）
------------------------------------------------------------ */
.gallery figure {
  overflow: visible;
  aspect-ratio: auto;
  background: #fff;
  padding: 9px 9px 26px;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(74, 63, 54, .22);
}
.gallery figure img {
  aspect-ratio: 1; border-radius: 2px; display: block;
}
/* マスキングテープ（枠の内側に置くので、送っても切れない） */
.gallery figure::before {
  content: ""; position: absolute; z-index: 2;
  top: 2px; left: 50%; transform: translateX(-50%) rotate(-4deg);
  width: 42px; height: 15px; border-radius: 2px;
  background: rgba(239, 139, 44, .5);
}
.gallery figure:nth-child(even)::before {
  transform: translateX(-50%) rotate(5deg);
  background: rgba(63, 92, 70, .38);
}
.gallery figure { position: relative; }

/* ------------------------------------------------------------
   ⑤ お知らせを「掲示板」にする
   キャメル色の太枠＋上にクリップ。区切りは実線ではなく点線。
------------------------------------------------------------ */
.news-list {
  position: relative;
  margin-top: 22px;
  padding: 26px 22px 10px;
  border: 6px solid var(--camel);
  border-radius: 14px;
  background: var(--bg-blush, #fffbe4);
}
/* 上にとめたクリップ */
.news-list::before {
  content: ""; position: absolute; top: -15px; left: 50%;
  margin-left: -34px; width: 68px; height: 15px;
  border: 3px solid #b9b2a6; border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: #ece7de;
}
.news-item { border-bottom: 2px dotted var(--camel); }
.news-item:last-child { border-bottom: none; }
.news-item__date { color: var(--forest); font-weight: 700; }

/* ------------------------------------------------------------
   ⑥ ボタンの左に白い丸の矢印
   参考サイトのピルボタンの特徴。①②③のボタンに付ける。
------------------------------------------------------------ */
.pillar .link-arrow::before {
  content: ""; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff center/11px 11px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5c46' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.pillar .link-arrow .ico { display: none; }

/* ------------------------------------------------------------
   ⑦ 動き
   ・スクロールでふわっと出る（下から上へ）
   ・飾りはゆっくり上下に揺れる
   どちらも「動きを減らす」設定のときは止める。
------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s ease-out, transform .6s ease-out;
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.deco--spark, .deco--spark2, .deco--spark3 { animation: floaty 3.4s ease-in-out infinite; }
@keyframes floaty-tilt {
  0%, 100% { transform: rotate(14deg) translateY(0); }
  50%      { transform: rotate(14deg) translateY(-7px); }
}
.deco--square { animation: floaty-tilt 4.2s ease-in-out infinite; }
.deco--s2, .deco--s5, .deco--s8, .deco--s11, .deco--s14 { animation-delay: 1.2s; }
.deco--s3, .deco--s6, .deco--s9, .deco--s12, .deco--s15 { animation-delay: 2.1s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .deco--spark, .deco--spark2, .deco--spark3, .deco--square { animation: none; }
}

/* ============================================================
   上品に仕上げる（参考：kodomonooka-nursery.jp）

   「フォントや枠が安っぽい」と言われて入れた仕上げ。
   参考サイトは **細い線・余白・字間を広くとった丸ゴシック** の
   「引き算」で上品に見せている。反対に、こちらの安っぽさの原因は
     ・Windows に丸ゴシックが無く、ふつうの角ゴシックで出ていた
     ・下にずらした「段差の影」（0 4px 0 など）が32か所
     ・3〜6px の太い枠線、燕尾のリボン、太い白フチ
     ・図形を並べただけの紙吹雪（丸・星）
   だったので、ここで全部まとめて上書きする。

   **配色は取り入れない**（参考サイトは珊瑚色＋水色）。
   ステラテラスの深緑・黄色・オレンジのまま、作りだけを移している。
   ============================================================ */

:root {
  /* 丸ゴシック（public/fonts に置いた Zen Maru Gothic）を先頭に */
  --font: 'Zen Maru Gothic', "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4",
          "Yu Gothic Medium", "游ゴシック Medium", YuGothic, sans-serif;
  --font-en: 'Zen Maru Gothic', "Hiragino Maru Gothic ProN", "Yu Gothic Medium", sans-serif;
  --font-num: 'Zen Maru Gothic', "Hiragino Maru Gothic ProN", "Yu Gothic Medium", sans-serif;

  /* やわらかい影（段差の影はもう使わない） */
  --shadow-soft: 0 12px 32px rgba(54, 45, 38, .08);
  --shadow-lift: 0 18px 40px rgba(54, 45, 38, .13);
  --line-green: #cfdccb;
  --tag-pale: #fff5bf;
}

/* ------------------------------------------------------------
   文字
   丸ゴシックの Medium を地に、字間を少し広げる
------------------------------------------------------------ */
body {
  font-family: var(--font);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 2;
}
h1, h2, h3, h4, .btn, .site-nav a, .brand__name {
  font-family: var(--font);
}
strong, b { font-weight: 700; }

/* ------------------------------------------------------------
   セクションの見出し
   小さなラベル（下線つき）→ 字間の広い見出し → 本文、を中央にそろえる。
   参考サイトの見出しの組み方。本文やカードの中身は左揃えのまま。
------------------------------------------------------------ */
.section__head,
.section__head--center {
  text-align: center;
  margin-inline: auto;
  max-width: 820px;
}
.section__head::after { content: none; display: none; }   /* 宙に浮いていた点線は外す */

/* ラベル：燕尾のリボンをやめて、下線つきの小さな文字に */
.section__pill,
.section__label:not(.section__pill + .section__label),
.section--block .section__pill,
.section__pill--green, .section__pill--yellow, .section__pill--white {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 18px; padding: 0 2px 6px;
  background: none; box-shadow: none; border-radius: 0;
  color: var(--forest);
  font-family: var(--font); font-size: .86rem; font-weight: 700;
  letter-spacing: .2em; text-transform: none;
  border-bottom: 2px solid var(--yellow);
}
/* 両脇に小さなきらきら（燕尾の代わり） */
.section__pill::before, .section__pill::after,
.section__label:not(.section__pill + .section__label)::before,
.section__label:not(.section__pill + .section__label)::after,
.section__pill--green::before, .section__pill--green::after,
.section__pill--yellow::before, .section__pill--yellow::after,
.section__pill--white::before, .section__pill--white::after {
  content: ""; position: static; flex: none;
  width: 12px; height: 12px;
  clip-path: none;
  background: center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.4c.75 5.5 2.7 7.45 8.2 8.2-5.5.75-7.45 2.7-8.2 8.2-.75-5.5-2.7-7.45-8.2-8.2 5.5-.75 7.45-2.7 8.2-8.2z' fill='%23e6c300'/%3E%3C/svg%3E");
}
/* 黄色い面の上では、ラベルの下線を深緑にする（黄色どうしで消えるため） */
.section--block .section__pill { border-bottom-color: var(--forest); }
.section--block .section__pill::before,
.section--block .section__pill::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.4c.75 5.5 2.7 7.45 8.2 8.2-5.5.75-7.45 2.7-8.2 8.2-.75-5.5-2.7-7.45-8.2-8.2 5.5-.75 7.45-2.7 8.2-8.2z' fill='%233f5c46'/%3E%3C/svg%3E");
}

/* 見出し：深緑・字間を広く・少しひかえめの大きさ */
.section__title {
  color: var(--forest);
  font-size: clamp(1.45rem, 3.1vw, 2.05rem);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.75;
  margin-bottom: 20px;
}
/* 強調は、太いマーカーをやめて細い下線に */
.section__title em {
  font-style: normal; color: inherit; padding: 0 .06em;
  background: linear-gradient(transparent 76%, rgba(255, 225, 0, .6) 76%, rgba(255, 225, 0, .6) 94%, transparent 94%);
}
.section__lead {
  margin-inline: auto;
  max-width: 40em;
  color: var(--ink-soft);
  line-height: 2.1;
  letter-spacing: .06em;
}

/* ------------------------------------------------------------
   ボタン
   段差の影をやめて、やわらかい影で「浮いている」だけにする
------------------------------------------------------------ */
.btn {
  letter-spacing: .12em;
  border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn--primary,
.btn--primary:active {
  box-shadow: 0 8px 20px rgba(63, 92, 70, .2);
}
.btn--primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(63, 92, 70, .26);
}
.btn--ghost {
  background: #fff;
  border: 2px solid var(--forest);
  color: var(--forest);
  box-shadow: none;
}
.btn--ghost:hover {
  background: var(--forest); color: #fff; transform: translateY(-2px);
}
.site-nav a.is-cta { box-shadow: 0 6px 16px rgba(63, 92, 70, .18); }

/* ------------------------------------------------------------
   ①②③のカード
   太い枠と段差の影をやめ、白いカードをやわらかい影で浮かせる
------------------------------------------------------------ */
.pillars .pillar {
  border: none;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  padding: clamp(28px, 3vw, 36px) clamp(24px, 2.6vw, 32px) clamp(26px, 2.8vw, 32px);
}
.pillars .pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
/* 番号：塗りつぶしの丸をやめて、細い輪にする */
.pillars .pillar__num {
  width: 50px; height: 50px;
  background: #fff !important;
  border: 2px solid var(--forest);
  color: var(--forest) !important;
  font-family: var(--font-num); font-size: 1.05rem; font-weight: 700; letter-spacing: .06em;
}
.pillars .pillar:nth-child(2) .pillar__num { border-color: #d9b400; color: #6f5600 !important; }
.pillars .pillar:nth-child(3) .pillar__num { border-color: var(--orange); color: #a24f0c !important; }
.pillars .pillar__title { letter-spacing: .1em; }

/* 下のボタン：色は残す（目立たせたいとの指定）。段差の影をやめ、
   矢印は参考サイトと同じく右端の小さな丸に */
.pillars .pillar .link-arrow {
  position: relative;
  justify-content: center;
  padding: 15px 48px;
  border-radius: 999px;
  box-shadow: none;
  letter-spacing: .12em;
}
.pillars .pillar .link-arrow::before { content: none; display: none; }
.pillars .pillar .link-arrow::after {
  content: ""; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff center/10px 10px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5c46' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}
.pillars .pillar:nth-child(2) .link-arrow { box-shadow: none; }
.pillars .pillar:nth-child(3) .link-arrow { box-shadow: none; }
.pillars .pillar:hover .link-arrow { filter: brightness(1.04); }

/* 事前申込・当日受付のシール：太い白フチをやめて、はんこのような点線の輪に */
.pillars .pillar__badge {
  border: none;
  outline: 1.5px dashed rgba(255, 255, 255, .9);
  outline-offset: -7px;
  box-shadow: 0 8px 18px rgba(54, 45, 38, .18);
  letter-spacing: .08em;
}
.pillars .pillar:nth-child(2) .pillar__badge { outline-color: rgba(74, 58, 0, .45); }

/* ------------------------------------------------------------
   事業の6枚・申し込み・ご利用の流れのカード
------------------------------------------------------------ */
.service, .entry, .usecase {
  border: none;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.entry--self, .entry--external { border-top: none; }
.service__photo, .service__photo img { border-radius: 14px; }
.service__title {
  letter-spacing: .1em;
  background: linear-gradient(transparent 80%, rgba(255, 225, 0, .55) 80%) !important;
}
/* アイコン：塗りつぶしの丸をやめて、細い輪にする（参考サイトの時計のアイコンと同じ扱い） */
.service .service__icon {
  background: #fff !important;
  border: 2px solid var(--forest);
  color: var(--forest) !important;
}
.service__no { font-family: var(--font-num); letter-spacing: .14em; }
/* カードの下のリンクは、参考サイトと同じ細い枠の丸ボタンに */
.service__more {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: auto; padding: 11px 20px;
  border: 2px solid var(--forest); border-radius: 999px;
  color: var(--forest); background: #fff;
  font-size: .9rem; letter-spacing: .12em;
  text-decoration: none;
}
.service__more:hover { background: var(--forest); color: #fff; border-color: var(--forest); }

/* 申し込みカードのラベルと件数 */
.entry__label {
  letter-spacing: .14em;
  border-radius: 6px;
}
.entry__count { letter-spacing: .08em; }

/* ------------------------------------------------------------
   お知らせ：太いキャメルの枠とクリップをやめ、白いカードに
------------------------------------------------------------ */
.news-list {
  border: none;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  padding: 12px clamp(20px, 3vw, 36px);
}
.news-list::before { content: none; display: none; }
.news-item { border-bottom: 1.5px dotted var(--line-green); }
.news-item:last-child { border-bottom: none; }
.news-item__date {
  color: var(--forest); font-family: var(--font-num);
  letter-spacing: .1em;
}
.news-item__title { letter-spacing: .06em; }

/* ------------------------------------------------------------
   フォトギャラリー：テープと白フチをやめ、角をまるくした写真に
------------------------------------------------------------ */
.gallery figure {
  padding: 0;
  background: transparent;
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}
.gallery figure::before { content: none; display: none; }
.gallery figure img { border-radius: 16px; }

/* ------------------------------------------------------------
   飾り
   図形を並べただけの紙吹雪（丸・星）はやめて、
   参考サイトのような「大きくやわらかい形」を面の端に置く。
   きらきらと枠の四角は残す（依頼者が気に入っているもの）が、細く・薄く。
------------------------------------------------------------ */
.section--confetti::before {
  top: -60px; right: -120px; width: 380px; height: 320px;
  border-radius: 58% 42% 55% 45% / 50% 58% 42% 50%;
  background: rgba(255, 225, 0, .13);
  background-image: none;
}
.section--confetti::after {
  bottom: -80px; left: -140px; width: 360px; height: 300px;
  border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%;
  background: rgba(63, 92, 70, .07);
  background-image: none;
}
.deco--square {
  border-width: 2px !important;
  border-radius: 6px;
  opacity: .45;
}

/* ------------------------------------------------------------
   ヘッダー
------------------------------------------------------------ */
.site-nav a { font-weight: 700; letter-spacing: .1em; }
.brand__name { letter-spacing: .12em; }

/* ------------------------------------------------------------
   ヒーロー：丸ゴシックになったぶん、字間を少し広げる
------------------------------------------------------------ */
.hero--full .hero__name { letter-spacing: .14em; }
.hero--full .hero__title { letter-spacing: .08em; }
.hero--full .hero__eyebrow { letter-spacing: .12em; }

/* --- 事業カードの写真を、カードの幅ぴったりにする ---
   写真はカードの余白ぶん外へ広げて端まで敷いているが、
   カードの余白をあとから変えたのに写真側の値が古いままで、左右に6pxはみ出していた。
   余白を変数にして、写真もその変数から計算する（もうずれない）。 */
.service {
  --card-py: clamp(24px, 2.6vw, 32px);
  --card-px: clamp(20px, 2.2vw, 28px);
  padding: var(--card-py) var(--card-px);
}
.service__photo {
  margin: calc(var(--card-py) * -1) calc(var(--card-px) * -1) 22px;
  border-radius: 22px 22px 0 0;
}
.service__photo img { border-radius: 0; }

/* --- 細かな仕上げ --- */

/* 申し込みカードの「ステラテラス主催」などは、横幅いっぱいの帯ではなく小さなタグに */
.entry__label { align-self: flex-start; padding: 5px 14px; }

/* お知らせの日付：字間を広げたぶん折れていたので、幅を取って1行に */
.news-item__date { width: 10.5em; white-space: nowrap; }
@media (max-width: 600px) { .news-item__date { width: auto; } }

/* セクションの下の「一覧を見る」ボタンは、見出しに合わせて中央に */
.section__more { text-align: center; }

/* --- 事業カードの本文と箇条書きのあいだの空白をなくす ---
   本文に flex: 1 が付いていて、本文が伸びて箇条書きを下へ押しやっていた
   （カードの途中に空白ができていた）。本文は中身の高さのままにし、
   余りはカードのいちばん下に回す。カードの高さはそろったまま。 */
.service .service__text { flex: none; }
.service .service__points { margin-bottom: 0; }

/* 「Pattern A」などのタグも、帯ではなく小さなタグに */
.usecase__label { align-self: flex-start; padding: 5px 16px; }

/* 「アクセス」の小見出しも、ほかの見出しと同じく中央に */
#info h3.section__title { text-align: center; }

/* 黄色の面（ご利用の流れ）の見出しも、ほかと同じ深緑にそろえる（コントラスト 5.8） */
.section--block .section__title { color: var(--forest); }

/* ------------------------------------------------------------
   トップ以外のページも同じ作りにそろえる
------------------------------------------------------------ */

/* ページの見出し（フォトスタジオ・お知らせ）：中央にそろえ、太いマーカーを細い下線に */
.page-hero__inner { text-align: center; margin-inline: auto; }
.page-hero__lead { margin-inline: auto; }
.page-hero__title {
  color: var(--forest);
  letter-spacing: .14em;
  line-height: 1.7;
}
.page-hero__title em {
  font-style: normal; color: inherit; padding: 0 .06em;
  background: linear-gradient(transparent 76%, rgba(255, 225, 0, .6) 76%, rgba(255, 225, 0, .6) 94%, transparent 94%);
}
/* 太い黄色の輪は外し、やわらかい形だけ残す */
.page-hero .deco--ring { display: none; }

/* 料金のカード：四角い灰色の枠と段差の影をやめて、白いカードに */
.plan {
  border: none;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.plan--pick {
  border: 2px solid var(--forest);
  box-shadow: 0 16px 36px rgba(63, 92, 70, .16);
}
.plan__ribbon { letter-spacing: .14em; box-shadow: 0 6px 14px rgba(63, 92, 70, .2); }
.plan__title { letter-spacing: .1em; }
.plan__spec > div { border-radius: 12px; }
.plan__note { border-radius: 12px; }

/* 補足のカード */
.detail-card { border-radius: 22px; box-shadow: var(--shadow-soft); }
.detail-card__title { letter-spacing: .1em; }

/* お知らせの一覧のカード */
.post-card {
  border: none;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.post-card:hover { box-shadow: var(--shadow-lift); }
.post-card__date { color: var(--forest); letter-spacing: .1em; }
.post-card__title { letter-spacing: .06em; }

/* 「◯件のイベントを選んでいます」は、選んでいないときは隠す。
   display を指定しているので、hidden 属性だけでは消えなかった */
.field__count[hidden] { display: none; }

/* リンク集の1件ずつも、ほかのカードと同じ白いカードに */
.link-item {
  border: none;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.link-item:hover { box-shadow: var(--shadow-lift); }
.link-item__title { letter-spacing: .06em; }

/* ------------------------------------------------------------
   セクションの面の色：黄色 → 白 → 緑（依頼者の指定）

   ①②③（うすい黄色）→ ステラテラスについて（白）→
   フォトギャラリー・お知らせ（うすい緑）→ お申し込み（うすい黄色）…

   「ステラテラスについて」は白い面になったので、中の白いカードが
   地に溶けないよう、影にごく薄い輪を足して縁を作っている。
   （枠線は refine の回で全部外しているので、線は足さない）
------------------------------------------------------------ */
#about .service {
  box-shadow: 0 0 0 1px rgba(63, 92, 70, .08), var(--shadow-soft);
}

/* ------------------------------------------------------------
   ヘッダーの施設名：「ステラテラス」と「STELLA TERRACE」の幅をそろえる

   英字のほうが54pxぶん短く、下だけ引っ込んで見えていた。
   字間を広げて、日本語の文字の幅とそろえている。
   最後の1文字のうしろにも字間が入るぶんは、負のマージンで打ち消す
   （打ち消さないと、英字の箱だけ右に長くなる）。

   ※ 字間の値は「日本語 1.5rem・英字 .58rem」で合わせたもの。
     どちらかの文字の大きさを変えたら、ここも測り直すこと。
     英字は 860px 以下では消えるので、合わせるのは 861px 以上だけでよい。
------------------------------------------------------------ */
.brand__sub {
  letter-spacing: .68em;
  margin-right: -.68em;
}

/* ------------------------------------------------------------
   見出しの上の小さな文字をやめ、その飾りを見出しに移した

   「ステラテラスでできること」→「ステラテラスについて」のように、
   上の小さな文字と下の見出しで内容が重なっていたため、
   依頼者の指示で**上の文字（日本語のピル・英字ラベル）は全部削除**した。
   かわりに、その両脇にあったきらきらを大きな見出しの両脇に付けている。

   `inline-block` にしているのは、見出しが `<em>` と地の文に分かれていて、
   flex にすると語がばらばらの要素になってしまうため。
------------------------------------------------------------ */
h2.section__title::before, h2.section__title::after,
.page-hero__title::before, .page-hero__title::after {
  content: "";
  display: inline-block;
  vertical-align: .1em;
  width: clamp(14px, 1.7vw, 19px);
  height: clamp(14px, 1.7vw, 19px);
  margin: 0 .46em;
  background: center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.4c.75 5.5 2.7 7.45 8.2 8.2-5.5.75-7.45 2.7-8.2 8.2-.75-5.5-2.7-7.45-8.2-8.2 5.5-.75 7.45-2.7 8.2-8.2z' fill='%23e6c300'/%3E%3C/svg%3E");
}
/* 黄色い面の上では黄色のきらきらが消えるので、深緑にする */
.section--block h2.section__title::before,
.section--block h2.section__title::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.4c.75 5.5 2.7 7.45 8.2 8.2-5.5.75-7.45 2.7-8.2 8.2-.75-5.5-2.7-7.45-8.2-8.2 5.5-.75 7.45-2.7 8.2-8.2z' fill='%233f5c46'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   ヘッダーのメニュー：「イベント当日受付」を足したぶんを詰める

   項目が7つになり、必要な幅が 1137px → 1290px に増えた。
   そのままだと 1280px のノートパソコンで1行に収まらず、
   「ヘッダーは常に1行」の決まりを破ってしまう。
   画面が狭くなるにつれて、字間 → 余白 → 文字の大きさ の順に詰める。
   （900px 以下はもともと横スクロールの1行に切り替わる）
------------------------------------------------------------ */
/* 画面が広くても本文の幅（--wrap: 1120px）は変わらないので、
   「入る／入らない」は画面幅ではなく **項目の数と文字数** で決まる。
   いまの6項目は、ふつうの大きさのまま 1120px に収まる（774px / 878px）。
   項目を増やしたら必ず測り直すこと。

   狭い画面では本文の幅が画面に合わせて縮むので、そこだけ詰める。
   900px 以下はもともと横スクロールの1行に切り替わる。 */
@media (min-width: 901px) and (max-width: 1150px) {
  .site-nav a { padding: 8px 9px; font-size: .8rem; letter-spacing: .05em; }
  .brand__name { font-size: 1.3rem; }
  .brand__logo img { height: 44px; }
}
@media (min-width: 901px) and (max-width: 1040px) {
  .site-header__inner { gap: 8px; }
  .site-nav a { padding: 7px 7px; font-size: .76rem; letter-spacing: .02em; }
  .brand__name { font-size: 1.16rem; }
  .brand__sub { font-size: .52rem; }
  .brand__logo img { height: 38px; }
}

/* ------------------------------------------------------------
   イベント開催のお申し込み（/host）

   項目が多い長いフォームなので、1〜5の小見出しで区切る。
   利用規約は番号つきの箇条書きにして、番号を丸バッジで出す。
------------------------------------------------------------ */

/* フォームの中の小見出し（「2. 主催者さまについて」など） */
.form-section {
  margin: 38px 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--yellow);
  color: var(--forest);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.form-section:first-child { margin-top: 0; }

/* 利用規約 */
.terms-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: terms;
}
.terms-list > li {
  position: relative;
  padding: 24px 26px 24px 68px;
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  counter-increment: terms;
}
.terms-list > li::before {
  content: counter(terms);
  position: absolute;
  top: 24px;
  left: 22px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--forest);
  border-radius: 50%;
  color: var(--forest);
  font-size: .9rem;
  font-weight: 700;
}
.terms-list h3 {
  margin: 0 0 8px;
  color: var(--forest);
  font-size: 1rem;
  letter-spacing: .08em;
}
.terms-list p { margin: 0; }

@media (max-width: 640px) {
  .terms-list > li { padding: 20px 20px 20px 58px; }
  .terms-list > li::before { top: 20px; left: 16px; width: 28px; height: 28px; }
}

/* ------------------------------------------------------------
   見出しの下線は「どの見出しにも同じように付ける」（依頼者の指定）

   そのため見出しの文字は全部 <em> で囲んである。
   面の色によっては黄色い下線が見えなくなるので、そこだけ色を変える。
------------------------------------------------------------ */

/* 黄色い面（ご利用の流れ）＝下線が消えるので白にする */
.section--block .section__title em {
  background: linear-gradient(transparent 76%, rgba(255, 255, 255, .92) 76%,
                              rgba(255, 255, 255, .92) 94%, transparent 94%);
}

/* うすい黄色の面（お申し込み・ページ見出し）＝黄色のままだと弱いので濃いめの黄にする */
.section--soft .section__title em,
.page-hero__title em {
  background: linear-gradient(transparent 76%, rgba(240, 196, 0, .75) 76%,
                              rgba(240, 196, 0, .75) 94%, transparent 94%);
}

/* ------------------------------------------------------------
   管理画面：イベント開催のお申し込み（1件ずつのカード）

   項目が20以上あるので表では読めない。見出しと中身の2列で並べる。
------------------------------------------------------------ */
.host-card {
  margin-bottom: 18px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.host-card__head { margin-bottom: 14px; }
.host-card__title { margin: 8px 0 2px; font-size: 1.06rem; color: var(--ink); }
.host-card__by { margin: 0; font-size: .86rem; color: var(--ink-soft); }

.host-rows { display: grid; gap: 2px; margin: 0 0 16px; }
.host-row {
  display: grid;
  grid-template-columns: 11em 1fr;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dotted var(--line);
  font-size: .88rem;
}
.host-row dt { margin: 0; color: var(--ink-soft); font-weight: 600; }
.host-row dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

.host-card__note { margin-bottom: 14px; }
.host-card__note textarea { min-height: 60px; }

.host-card__foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

@media (max-width: 720px) {
  .host-card { padding: 18px 16px; }
  .host-row { grid-template-columns: 1fr; gap: 2px; }
  .host-card__foot [style*="margin-left: auto"] { margin-left: 0 !important; }
}

/* イベントを開催したい方への案内（申し込みセクションの下） */
.host-invite {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 26px;
}
.host-invite p { margin: 0; flex: 1 1 320px; }

/* Instagram のご案内の枠は、うすい黄色ではなく白にする（依頼者の指定）。
   うしろの面（うすい緑）から浮かせるため、やわらかい影をつける。 */
.notice {
  background: #fff;
  box-shadow: var(--shadow-soft);
}

/* ------------------------------------------------------------
   Gmailで1人ずつ送る一覧（管理画面）
   自動送信が使えないとき用。1行＝1人で、押すと作成画面がひらく
------------------------------------------------------------ */
.gmail-rows { display: grid; gap: 8px; }
.gmail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-soft);
  border-radius: 10px;
}
.gmail-row__name { font-weight: 600; min-width: 8em; }
.gmail-row__mail { font-size: .84rem; flex: 1 1 200px; overflow-wrap: anywhere; }
.gmail-row__state { min-width: 6em; }
.gmail-row button { margin-left: auto; }

/* メールの送信設定：Google連携の囲みと、アプリパスワードの折りたたみ */
.oauth-box {
  margin-bottom: 18px;
  padding: 20px 22px;
  background: var(--bg-tint);
  border-radius: 14px;
}
.oauth-alt { margin-bottom: 18px; }
.oauth-alt > summary {
  cursor: pointer;
  padding: 10px 0;
  color: var(--ink-soft);
  font-size: .9rem;
  font-weight: 600;
}

/* 抽選の表：同じ方が他のイベントにも申し込んでいるときの表示 */
.apply-other {
  display: inline-block;
  margin-top: 4px;
  font-size: .78rem;
  color: var(--orange-dark);
}
.apply-other__state {
  margin-left: 4px;
  padding: 1px 6px;
  font-size: .7rem;
}