/* あゆみプラス TOP デザイン案 — 3案共通の土台（色・書体・ヘッダー・ボタン）
   ★これは「案を見比べるためのカンプ」用。採用案を pages/index.html（保存正規形）と
     css/decorations.css へ起こし直す。ここのCSSは本番には持ち込まない。 */

:root {
  /* ロゴ決定案の実測色 */
  --c-accent: #5fa47c;      /* 濃い緑（ロゴ C65 M17 Y60） */
  --c-leaf: #87ba62;        /* 明るい緑（ロゴ C52 M8 Y74） */
  --c-sun: #fbce53;         /* 明るい黄（ロゴ M22 Y73） */
  --c-gold: #f9bf00;        /* 濃い黄（ロゴ M29 Y100） */
  --c-brown: #7d6359;       /* 茶（ロゴ C60 M65 Y65） */
  /* 子どもらしい差し色（追加） */
  --c-orange: #f4964a;
  --c-pink: #ef8fae;
  --c-sky: #6fc4dd;
  /* 地色と文字 */
  --c-body: #4f463f;
  --c-muted: #8b7f74;
  --c-border: #e7ded1;
  --c-base: #fffdf7;
  --c-subtle: #eef6ea;
  --c-alt: #fff7e2;
  --font-head: 'Zen Maru Gothic', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;
  --w: 1120px;
}


/* 形と質感（.c-blob / .c-wave-* / .c-tex-*）は製品の語彙を使う。
   生成の単一の正 = scripts/compile/shape-vocab.mjs（本番では tokens.shapes 宣言で style.css に入る）。
   このカンプでは blobs.css として書き出した物を読み込んでいる。 */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }   /* 飾りが画面の外へはみ出すため（横スクロール止め） */
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--c-body);
  background: var(--c-base);
  line-height: 1.9;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-head); color: var(--c-brown); line-height: 1.55; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.inner { width: min(var(--w), calc(100% - 48px)); margin-inline: auto; position: relative; z-index: 2; }

/* ── 最上部の細い帯 ───────────────────────── */
.topbar { background-color: var(--c-sun); color: var(--c-brown); font-size: 14px; }
.topbar .inner { display: flex; justify-content: center; padding: 9px 0; }
.topbar p { display: flex; align-items: center; gap: 12px; font-weight: 700; margin: 0; }
.topbar .tag {
  background: #fff; color: var(--c-accent); border-radius: 999px;
  padding: 2px 14px; font-size: 13px; font-family: var(--font-head);
}

/* ── ヘッダー ────────────────────────────── */
.header { background: var(--c-base); border-bottom: 1px solid var(--c-border); }
.header .inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; height: 92px; }
.logo img { width: 218px; }
.nav { display: flex; align-items: center; gap: 20px; font-size: 14px; font-weight: 500; font-family: var(--font-head); color: var(--c-brown); }
.nav a { position: relative; padding: 4px 0; }
.nav a:not(.btn-head):hover { color: var(--c-accent); }
.nav a:not(.btn-head)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
  background: var(--c-leaf); border-radius: 3px; transform: scaleX(0); transition: transform .2s;
}
.nav a:not(.btn-head):hover::after { transform: scaleX(1); }
.nav a.btn-head {
  background-color: var(--c-accent); color: #fff; border-radius: 999px; padding: 13px 30px; font-weight: 700; margin-left: 12px; white-space: nowrap;
  line-height: 1.2; box-shadow: 0 3px 0 rgba(95,164,124,.35);
}
.nav a.btn-head:hover { background: var(--c-leaf); }

/* ── ボタン ────────────────────────────── */
.btn {
  display: inline-block; font-family: var(--font-head); font-weight: 700;
  border-radius: 999px; padding: 15px 34px; transition: .2s; text-align: center;
}
.btn-main { background-color: var(--c-accent); color: #fff; box-shadow: 0 4px 0 rgba(95,164,124,.4); }
.btn-main:hover { background: var(--c-leaf); transform: translateY(2px); box-shadow: 0 2px 0 rgba(95,164,124,.4); }
.btn-sub { background-color: var(--c-gold); color: var(--c-brown); box-shadow: 0 4px 0 rgba(249,191,0,.35); }
.btn-sub:hover { background: var(--c-sun); transform: translateY(2px); box-shadow: 0 2px 0 rgba(249,191,0,.35); }
.btn-line { background: #fff; color: var(--c-accent); border: 2px solid var(--c-accent); padding: 13px 32px; }
.btn-line:hover { background: var(--c-accent); color: #fff; }
.btn-big { font-size: 19px; padding: 19px 56px; }

/* ── 区画見出しの既定（案ごとに上書き） ───────────── */
.sec-title { text-align: center; font-size: 30px; margin-bottom: 30px; }

/* ── お知らせ ──────────────────────────── */
.news-list li {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 13px 4px; border-bottom: 1px dashed var(--c-border);
}
/* 日付は「年月を小さく・日を大きく」の2段（参考サイトの見せ方） */
.news-list time {
  flex: 0 0 76px; display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-head); line-height: 1.15; color: var(--c-muted);
}
.news-list .ym { font-size: 11px; letter-spacing: .06em; }
.news-list .d {
  font-size: 28px; font-weight: 700; color: var(--c-accent);
  position: relative; padding: 2px 0 9px;
}
.news-list .d::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 26px; height: 3px; border-radius: 3px; background: var(--c-sun);
}
.news-list .cat {
  font-size: 12px; font-family: var(--font-head); color: #fff; background: var(--c-leaf);
  border-radius: 999px; padding: 3px 14px;
}
.news-list li:nth-child(3n) .cat { background: var(--c-sky); }
.news-list a { flex: 1 1 260px; font-weight: 500; }
.news-list a:hover { color: var(--c-accent); text-decoration: underline; }
.more { text-align: center; margin-top: 26px; }

/* ── アクセス ──────────────────────────── */
/* 地図。★製品の既存の型（.c-embed / .c-embed-map）に合わせてある＝本番でもそのまま使える。
   API キーの要らない `maps.google.com/maps?q=<緯度>,<経度>(<名称>)&output=embed` 形式。
   ★iframe は角丸が中身に効かないので、器側で overflow: hidden する。 */
.c-embed { width: 100%; }
.c-embed iframe { display: block; width: 100%; border: 0; }
.c-embed-map { border-radius: 18px; overflow: hidden; box-shadow: 0 6px 18px rgba(125,99,89,.10); }
.c-embed-map iframe { height: 100%; aspect-ratio: 16 / 10; }

/* ── フッター ──────────────────────────── */
.footer { background-color: var(--c-accent); color: #fff; padding: 56px 0 28px; text-align: center; }
.footer .foot-logo { width: 240px; margin: 0 auto 22px; background: #fff; border-radius: 16px; padding: 14px 20px; }
.foot-addr { font-size: 14px; line-height: 2; }
.foot-links { display: flex; justify-content: center; gap: 28px; margin-top: 22px; font-size: 14px; font-family: var(--font-head); }
.foot-links a:hover { text-decoration: underline; }
.copy { margin-top: 26px; font-size: 12px; color: rgba(255,255,255,.75); }

/* ── スマホ ───────────────────────────── */
@media (max-width: 900px) {
  .inner { width: calc(100% - 32px); }
  .nav { display: none; }
  .header .inner { height: 68px; }
  .logo img { width: 176px; }
  .sec-title { font-size: 23px; margin-bottom: 20px; }
  .topbar p { font-size: 12px; gap: 8px; flex-wrap: wrap; justify-content: center; text-align: center; }
  .topbar .tag { font-size: 11px; padding: 2px 10px; }
  .btn-big { font-size: 17px; padding: 17px 36px; }
  .news-list time { flex: 0 0 62px; }
  .news-list .d { font-size: 23px; }
  .news-list li { gap: 12px; }
}


/* ══ 賑やかさの部品（参考サイト waka-kids.org の実測 2026-09-16）══════════
   実測して分かったこと: 参考サイトは区画の縦余白がむしろ大きい（144px）。
   賑やかく見えるのは詰めているからではなく、余白に必ず何かが置いてあるから。
     ① 写真の背後に、写真より大きい淡い色の丸をずらして敷く（223〜320px）
     ② その丸に水玉を重ねる
     ③ 見出しの下に小さな葉を横に並べた区切りを置く
     ④ 飾りのイラストが大きい（100〜150px が標準・写真に重ねる）
   ① は .c-shape（形と質感の語彙・M20）で作る＝画像を置かずに済む。 */

/* ① 背後に敷く水彩の丸（.c-shape .c-blob-N と一緒に使う） */
.wash { position: absolute; z-index: 0; pointer-events: none; }
.wash-sun   { background: var(--c-sun);    opacity: .40; }
.wash-leaf  { background: var(--c-leaf);   opacity: .30; }
.wash-sky   { background: var(--c-sky);    opacity: .28; }
.wash-pink  { background: var(--c-pink);   opacity: .26; }
.wash-orange{ background: var(--c-orange); opacity: .26; }
.wash-white { background: #fff;            opacity: .55; }

/* ② 水玉（丸の上に重ねる・白抜き） */
.wash-dots {
  background-image: radial-gradient(circle, rgba(255,255,255,.85) 26%, rgba(255,255,255,0) 28%);
  background-size: 22px 22px;
}

/* ③ 見出しの下の葉の区切り
   ★イラストPNGを repeat-x すると隙間が作れず、毛虫のような連なりになる（実測）。
     タイルの中に余白を含められる SVG で作る＝葉・点・葉…の間隔をこちらで決められる。
   ★2026-09-16 見直し: 小さすぎて点線に見えたので 1.7 倍に（タイル 40×18 → 68×32）。
     見出しの装飾は「見出しの半分くらいの高さ」ないと、装飾ではなく汚れに見える。 */
.sec-title::after {
  content: ""; display: block; width: 340px; height: 32px; margin: 16px auto 0;
  background-repeat: repeat-x; background-position: center; background-size: 68px 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 32'%3E%3Cpath d='M22 16c0-7-7-10.5-14-10.5 0 7 7 10.5 14 10.5z' fill='%2387ba62'/%3E%3Cpath d='M22 16c7 0 14-3.5 14-10.5-7 0-14 3.5-14 10.5z' fill='%235fa47c'/%3E%3Cpath d='M22 16v9.5' stroke='%235fa47c' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='53' cy='13' r='4.3' fill='%23f9bf00'/%3E%3C/svg%3E");
}

/* 区画の上下に重ねる丘（2段）— 背景の切り替わりを「線」でなく「風景」にする */
.hills { position: relative; }
.hills::before, .hills::after {
  content: ""; position: absolute; left: -2%; right: -2%; height: 74px; bottom: 0; z-index: 0; pointer-events: none;
  background-repeat: no-repeat; background-size: 100% 100%;
}
.hills::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 L0 74 C 150 40 260 96 420 70 C 600 40 700 100 880 72 C 1020 50 1120 84 1200 66 L1200 120 Z' fill='%2387ba62' opacity='.42'/%3E%3C/svg%3E");
}
.hills::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 L0 98 C 180 66 300 112 500 92 C 680 74 820 116 980 94 C 1090 78 1150 100 1200 92 L1200 120 Z' fill='%235fa47c' opacity='.5'/%3E%3C/svg%3E");
  height: 52px;
}

/* 飾りは丘より上に出す */
.deco { z-index: 3; }

@media (max-width: 900px) {
  .sec-title::after { width: 240px; height: 24px; background-size: 51px 24px; margin-top: 10px; }
  .hills::before { height: 44px; }
  .hills::after { height: 32px; }
}