/* 案A「ひろびろ」— 写真を大きく、区画は白地中心。参考サイト寄りの落ち着き。
   差し色は見出しの下線・タグ・カードの上辺だけに点で置く。 */

/* ── メインビジュアル ─────────────────────── */
.hero { position: relative; }
.hero-photo { position: relative; --wave-color: var(--c-base); }
.hero-photo img { width: 100%; height: clamp(420px, 46vw, 620px); object-fit: cover; object-position: 60% 40%; }
.hero-card {
  position: absolute; left: max(24px, calc(50% - var(--w) / 2)); bottom: -56px;
  width: min(560px, calc(100% - 48px)); z-index: 2;
  background: rgba(255,253,247,.96); border-radius: 26px;
  padding: 40px 44px 36px; box-shadow: 0 18px 40px rgba(125,99,89,.16);
}
.hero-eyebrow {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 14px;
  color: var(--c-accent); background: var(--c-subtle); border-radius: 999px; padding: 5px 18px; margin-bottom: 16px;
}
.hero-card h1 { font-size: clamp(27px, 3.1vw, 40px); font-weight: 900; letter-spacing: .02em; }
.hero-card h1 { color: var(--c-brown); }
.hero-lead { margin-top: 14px; font-family: var(--font-head); color: var(--c-accent); font-weight: 700; }
.hero-btns { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.hero-btns .btn { padding: 14px 26px; font-size: 15px; }
.hero-hand {
  position: absolute; right: max(32px, calc(50% - var(--w) / 2)); top: 48px;
  font-family: var(--font-head); font-weight: 700; font-size: 20px; line-height: 1.9;
  color: var(--c-brown); background: rgba(255,255,255,.88); border-radius: 22px; padding: 18px 26px;
  transform: rotate(-4deg); box-shadow: 0 8px 22px rgba(125,99,89,.14);
}

/* ── こんなこと、ありませんか ───────────────── */
.worry { padding: 104px 0 68px; background: var(--c-base); }
/* ★見出しの下は葉のラインに一本化した。黄色い棒と葉のラインが重なって中途半端だったため
   （飾りは重ねるほど弱くなる。1つを大きく置くほうが効く）。 */
.worry-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.worry-list li {
  background: var(--c-subtle); border-radius: 999px; padding: 11px 24px;
  font-size: 15px; color: var(--c-body);
}
.worry-list li:nth-child(3n) { background: var(--c-alt); }
.worry-list li:nth-child(5n) { background: #fdeef2; }
.worry-close {
  margin-top: 32px; text-align: center; font-family: var(--font-head); font-weight: 700;
  font-size: clamp(19px, 2.2vw, 26px); color: var(--c-accent);
}

/* ── あゆみプラスとは ────────────────────── */
.about { padding: 68px 0; background: var(--c-subtle); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.about-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.eyebrow { font-family: var(--font-head); font-size: 13px; letter-spacing: .2em; color: var(--c-leaf); font-weight: 700; }
.about-text h2 { font-size: clamp(23px, 2.5vw, 31px); margin: 10px 0 24px; }
.about-text p + p { margin-top: 18px; }
.about-strong {
  margin-top: 28px; font-family: var(--font-head); font-weight: 700; font-size: 19px;
  color: var(--c-brown); background: #fff; border-radius: 18px; padding: 20px 24px;
  border-left: 6px solid var(--c-leaf);
}

/* ── 3つのサポート ──────────────────────── */
.support { padding: 68px 0; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card {
  background: #fff; border-radius: 22px; padding: 34px 28px 30px;
  border: 1px solid var(--c-border); box-shadow: 0 6px 18px rgba(125,99,89,.06);
  border-top: 6px solid var(--c-leaf);
}
.card-2 { border-top-color: var(--c-gold); }
.card-3 { border-top-color: var(--c-pink); }
.card .card-label {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 13px;
  color: #fff; background: var(--c-leaf); border-radius: 999px; padding: 3px 16px; margin-bottom: 14px;
}
.card.card-2 .card-label { background: var(--c-gold); color: var(--c-brown); }
.card.card-3 .card-label { background: var(--c-pink); }
.card h3 { font-size: 20px; margin-bottom: 12px; }
.card p { font-size: 15px; color: var(--c-body); }

/* ── お知らせ ──────────────────────────── */
.news { padding: 68px 0; background: var(--c-alt); }

/* ── 3つの入口 ──────────────────────────── */
.guide { padding: 68px 0 0; }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.guide-item {
  display: block; text-align: center; background: #fff; border: 2px solid var(--c-border);
  border-radius: 22px; padding: 30px 20px; transition: .2s;
}
.guide-item:hover { border-color: var(--c-accent); transform: translateY(-4px); }
.guide-en { display: block; font-family: var(--font-head); font-size: 12px; letter-spacing: .18em; color: var(--c-leaf); }
.guide-item strong { display: block; font-family: var(--font-head); font-size: 20px; color: var(--c-brown); margin: 8px 0 6px; }
.guide-note { font-size: 13px; color: var(--c-muted); }

/* ── アクセス ──────────────────────────── */
.access { padding: 68px 0; }
.access-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; }
.access-text h2 { font-size: 27px; margin-bottom: 20px; }
.access-name { font-family: var(--font-head); font-weight: 700; color: var(--c-accent); }
.access-addr { margin-top: 6px; }
.access-run { margin-top: 12px; font-size: 14px; color: var(--c-muted); }
.access-text .more { text-align: left; margin-top: 26px; }

/* ── お問い合わせ誘導 ────────────────────── */
.cta { padding: 62px 0; background: var(--c-subtle); text-align: center; }
.cta h2 { font-size: clamp(22px, 2.6vw, 30px); }
.cta p { margin-top: 18px; }
.cta p:last-child { margin-top: 30px; }

@media (max-width: 900px) {
  .hero-photo { position: relative; --wave-color: var(--c-base); }
.hero-photo img { height: 340px; object-position: 62% 38%; }
  /* ★position:static のままだと、z-index 0 の飾りのほうが後に描かれてカードの上に乗る
     （静的な箱の背景は、位置指定した要素より先に塗られるため）。relative にして本文の層へ。 */
  .hero-card { position: relative; z-index: 2; width: auto; margin: -36px 16px 0; padding: 28px 24px 26px; border-radius: 22px; }
  .hero-hand { top: 14px; right: 14px; font-size: 14px; padding: 12px 16px; border-radius: 16px; }
  .hero-btns .btn { flex: 1 1 100%; }
  .worry { padding: 96px 0 112px; }
  .worry-list li { font-size: 14px; padding: 9px 18px; }
  /* ★スマホは横に逃げ場が無い（本文が幅いっぱい）。縦に居場所を作る＝上下の余白を広げ、
     飾りはその帯に置く。狭めると必ず文字の下に潜る。 */
  .about, .support, .news, .access, .cta { padding: 96px 0; }
  .worry, .cta { padding-bottom: 112px; }
  .guide { padding: 96px 0 0; }
  .about-grid, .cards, .guide-grid, .access-grid { grid-template-columns: 1fr; gap: 24px; }
  .about-strong { font-size: 17px; }
}

/* 3つのサポートの下に置く写真（追加素材） */
.support-photo { margin-top: 36px; }
.support-photo img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 38%; }
@media (max-width: 900px) { .support-photo { margin-top: 28px; } .support-photo img { aspect-ratio: 16 / 10; } }