/* DEMO訪問看護ステーション（7R のホームページの見本）
   考え：看護師が1日に回る「訪問の道」。最初の画面は夕方の町で、道が1回だけゆっくり引かれ、
   伺った家の窓に灯りがともる。下の本文は、その道が1本の線になって、1つの段ずつ立ち寄る。
   色：夕方の常磐色・灯りの色・薄い若葉の地。見出しは明朝、本文は大きめのゴシック。
   動きはこの1か所だけ。端末で「動きを減らす」にしていると、最初から描き終えた形で止まる。 */

:root {
  --dusk: #1C3A34;
  --dusk-2: #24463F;
  --dusk-3: #2C5149;
  --house: #12271F;
  --lamp: #F2C078;
  --on-dusk: #F4EFE4;
  --on-dusk-2: #BFD0C8;
  --dusk-rule: #3E6159;

  --sage: #EEF2EC;
  --paper: #FFFFFF;
  --text: #22332F;
  --text-2: #4F605B;
  --pine: #2C5E52;
  --pine-dark: #214A40;
  --rule: #C9D3CD;
  --pick: #E3EEE8;

  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "BIZ UDPMincho", "Noto Serif JP", serif;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic", "YuGothic", "Meiryo", "Noto Sans JP", sans-serif;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sage);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17.5px;
  line-height: 1.95;
  overflow-wrap: anywhere;
}
h1, h2, h3 { margin: 0; font-weight: 600; }
p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
strong { font-weight: 700; }

:focus-visible { outline: 3px solid var(--dusk); outline-offset: 3px; border-radius: 3px; }
.site-head :focus-visible, .hero :focus-visible, .site-foot :focus-visible { outline-color: var(--lamp); }

.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--paper); color: var(--text); padding: 10px 16px; border: 2px solid var(--dusk); }
.skip:focus { top: 8px; }

.demo-band {
  padding: 6px var(--gutter);
  background: var(--lamp);
  color: var(--dusk);
  font-size: 12.5px; line-height: 1.6; text-align: center; font-weight: 600;
}

/* 上の段 */
.site-head { background: var(--dusk); color: var(--on-dusk); border-bottom: 1px solid var(--dusk-rule); }
.site-head__inner { max-width: 1120px; margin: 0 auto; padding: 10px var(--gutter); display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; font-family: var(--mincho); font-weight: 600; font-size: 18px; letter-spacing: .04em; }
.brand__mark { width: 26px; height: 26px; color: var(--on-dusk); flex: none; }
.brand__win { fill: var(--lamp); }
.head-tel { margin-left: auto; display: inline-flex; flex-direction: column; align-items: flex-end; text-decoration: none; min-height: 44px; justify-content: center; line-height: 1.35; }
.head-tel__label { font-size: 12.5px; color: var(--on-dusk-2); }
.head-tel__num { font-size: 21px; font-weight: 700; letter-spacing: .04em; }

/* ===== 最初の画面：夕方の町 ===== */
.hero { background: var(--dusk); color: var(--on-dusk); padding-top: 56px; }
.hero__inner { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; align-items: end; }
.hero__area { font-size: 14px; color: var(--on-dusk-2); letter-spacing: .06em; margin-bottom: 18px; }
.hero__name { display: block; font-family: var(--sans); font-weight: 600; font-size: 16px; letter-spacing: .06em; color: var(--lamp); margin-bottom: 14px; }
.hero__msg { display: block; font-family: var(--mincho); font-weight: 600; font-size: clamp(38px, 5.4vw, 66px); line-height: 1.38; letter-spacing: .02em; }
.hero__lead { margin-top: 26px; max-width: 30em; color: #DCE5DF; font-size: 17px; }

.hero__side { display: grid; gap: 10px; }
.btn {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-height: 54px; padding: 10px 20px; border-radius: 999px;
  font-family: inherit; font-size: 16.5px; font-weight: 700; line-height: 1.35;
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
}
.btn__num { font-size: 14px; font-weight: 400; letter-spacing: .05em; }
.btn--lamp { background: var(--lamp); color: var(--dusk); border-radius: 18px; padding: 12px 24px; }
.btn--lamp:hover { background: #F6CF95; }
.btn--ghost { background: transparent; color: var(--on-dusk); border-color: var(--on-dusk-2); }
.btn--ghost:hover { background: var(--dusk-2); }
.btn--line { position: relative; padding-left: 44px; }
.btn--line::before { content: ""; position: absolute; left: 20px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #06C755; }
.btn--pine { background: var(--pine); color: #FFFFFF; align-items: center; justify-self: start; min-width: 240px; }
.btn--pine:hover { background: var(--pine-dark); }
.btn--pine:focus-visible { outline-color: var(--dusk); }

.hero__facts { margin-top: 18px; border-top: 1px solid var(--dusk-rule); }
.hero__facts > div { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--dusk-rule); font-size: 15px; line-height: 1.6; }
.hero__facts dt { color: var(--on-dusk-2); }

.town { margin-top: 36px; background: linear-gradient(to bottom, transparent 70%, var(--dusk-3) 70%); }
.town__svg { display: block; width: 100%; height: clamp(170px, 17vw, 230px); }
.town__hill-far { fill: var(--dusk-2); }
.town__hill { fill: var(--dusk-3); }
.town__house path { fill: var(--house); }
.town__win { fill: var(--lamp); opacity: .16; }
.town__route { fill: none; stroke: var(--lamp); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
.town__time { fill: var(--lamp); font: 600 19px var(--sans); letter-spacing: .04em; opacity: 0; }
.town__cap { background: var(--dusk-3); color: var(--on-dusk); font-size: 14px; line-height: 1.6; padding: 0 var(--gutter) 22px; text-align: center; }

/* 1回だけ、ゆっくり道を引く */
.town__reveal { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: draw 8s linear .4s forwards; }
.town__win { animation: lit 1.6s ease forwards; }
.town__time { animation: show 1.6s ease forwards; }
.town__win--1, .town__time--1 { animation-delay: 1.9s; }
.town__win--2, .town__time--2 { animation-delay: 3.1s; }
.town__win--3, .town__time--3 { animation-delay: 4.4s; }
.town__win--4, .town__time--4 { animation-delay: 5.7s; }
.town__win--5, .town__time--5 { animation-delay: 6.9s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes lit { to { opacity: 1; } }
@keyframes show { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .town__reveal { animation: none; stroke-dashoffset: 0; }
  .town__win, .town__time { animation: none; opacity: 1; }
}

/* ===== 本文：道に沿って立ち寄る ===== */
.route { position: relative; max-width: 780px; margin: 0 auto; padding: 24px var(--gutter) 64px 72px; }
.route::before { content: ""; position: absolute; left: 35px; top: 0; bottom: 40px; border-left: 2px dashed var(--pine); }
.stop { position: relative; padding: 48px 0 40px; }
.stop + .stop { border-top: 1px solid var(--rule); }
.stop__mark {
  position: absolute; left: -48px; top: 54px;
  width: 22px; height: 22px; background: var(--pine);
  clip-path: polygon(50% 0, 100% 46%, 100% 100%, 0 100%, 0 46%);
}
.stop h2 { font-family: var(--mincho); font-size: clamp(25px, 3vw, 32px); line-height: 1.45; letter-spacing: .03em; margin-bottom: 22px; }
.lead { color: var(--text); margin-bottom: 26px; }
.note { margin-top: 18px; font-size: 15.5px; color: var(--text-2); }

.plain { display: grid; gap: 12px; }
.plain li { position: relative; padding-left: 26px; }
.plain li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--pine); }

.tasks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.tasks > div { padding: 16px 0 18px; border-top: 1px solid var(--rule); }
.tasks dt { font-weight: 700; font-size: 17.5px; margin-bottom: 4px; }
.tasks dd { font-size: 16px; color: var(--text-2); line-height: 1.85; }

.flow { counter-reset: f; display: grid; gap: 0; }
.flow li { counter-increment: f; display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; padding: 14px 0 18px; }
.flow li::before { content: counter(f, cjk-ideographic); grid-row: span 2; font-family: var(--mincho); font-size: 34px; font-weight: 600; line-height: 1.1; color: var(--pine); }
.flow h3 { font-family: var(--mincho); font-size: 20px; line-height: 1.5; }
.flow p { color: var(--text-2); font-size: 16.5px; }

.times > div, .facts > div { display: grid; grid-template-columns: 8.5em 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule); }
.times > div:last-child, .facts > div:last-child { border-bottom: 1px solid var(--rule); }
.times dt, .facts dt { color: var(--text-2); font-size: 15.5px; padding-top: 2px; }
.times dd { font-weight: 700; }
.times dd span { display: block; font-weight: 400; font-size: 15.5px; color: var(--text-2); }

.area { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.area__map { width: 100%; height: auto; display: block; }
.area__city { fill: var(--pick); stroke: var(--pine); stroke-width: 2; }
.area__town { fill: #F6E3C1; stroke: var(--pine); stroke-width: 2; }
.area__town-rest { fill: none; stroke: var(--rule); stroke-width: 2; stroke-dasharray: 6 6; }
.area__home { fill: var(--dusk); }
.area__label { font: 600 20px var(--mincho); fill: var(--text); }
.area__small { font: 400 15px var(--sans); fill: var(--text); }
.area__text p + p { margin-top: 12px; font-size: 16px; color: var(--text-2); }

.stop--pro h2 { color: var(--pine-dark); }

/* フォーム */
.form { background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 30px; display: grid; gap: 24px; }
.field { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.field > label, .field > legend { font-weight: 700; font-size: 16px; padding: 0; margin-bottom: 8px; }
.field input[type="text"] { width: 100%; min-height: 54px; padding: 10px 16px; font: inherit; color: var(--text); background: var(--paper); border: 1.5px solid var(--text-2); border-radius: 12px; }
.choices { display: grid; gap: 8px; }
.choices--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 16px; border: 1.5px solid var(--rule); border-radius: 12px; cursor: pointer; line-height: 1.5; font-size: 16.5px; }
.choice input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--pine); }
.choice:has(input:checked) { border-color: var(--pine); background: var(--pick); }
.choice:has(input:focus-visible) { outline: 3px solid var(--dusk); outline-offset: 2px; }
.choice input:focus-visible { outline: none; }
.form__result:not(:empty) { background: var(--pick); border-radius: 10px; padding: 12px 16px; font-weight: 700; }

/* 下の段 */
.site-foot { background: var(--dusk); color: var(--on-dusk); }
.site-foot__inner { max-width: 780px; margin: 0 auto; padding: 52px var(--gutter) 60px 72px; }
.site-foot__name { font-family: var(--mincho); font-weight: 600; font-size: 22px; margin-bottom: 14px; }
.site-foot__tel { font-size: 24px; font-weight: 700; letter-spacing: .03em; line-height: 1.5; }
.site-foot__tel span { display: block; font-size: 15px; font-weight: 400; color: var(--on-dusk-2); letter-spacing: 0; }
.site-foot__addr { margin-top: 18px; font-size: 15px; color: var(--on-dusk-2); }
.site-foot__demo { margin-top: 22px; font-size: 13px; color: var(--on-dusk-2); }

.dock { display: none; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 40; transform: translateX(-50%);
  width: min(92vw, 460px); background: var(--paper); color: var(--text);
  border: 2px solid var(--dusk); border-radius: 14px; padding: 14px 18px;
  font-size: 15.5px; line-height: 1.6;
}

/* ===== 幅の狭い画面 ===== */
@media (max-width: 880px) {
  .hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .hero__side { max-width: 460px; }
}

@media (max-width: 640px) {
  body { padding-bottom: 76px; font-size: 17px; }
  .site-head__inner { min-height: 58px; }
  .brand { font-size: 15.5px; letter-spacing: .02em; }
  .head-tel { display: none; }
  .hero { padding-top: 36px; }
  .hero__name { font-size: 14.5px; }
  .hero__msg { font-size: 34px; }
  .hero__lead { font-size: 16.5px; }
  .hero__facts > div { grid-template-columns: 6.8em 1fr; font-size: 14.5px; }
  .town__time { font-size: 22px; }

  .route { padding: 8px var(--gutter) 48px 52px; }
  .route::before { left: 25px; }
  .stop { padding: 40px 0 32px; }
  .stop__mark { left: -37px; top: 45px; width: 20px; height: 20px; }
  .tasks { grid-template-columns: 1fr; }
  .times > div, .facts > div { grid-template-columns: 1fr; gap: 2px; }
  .area { grid-template-columns: 1fr; }
  .flow li { grid-template-columns: 44px 1fr; }
  .flow li::before { font-size: 28px; }

  .form { padding: 20px 16px; }
  .choices--row { grid-template-columns: 1fr; }
  .btn--pine { width: 100%; }

  .site-foot__inner { padding: 44px var(--gutter) 48px; }

  .dock {
    display: grid; grid-template-columns: 2fr 1fr; gap: 6px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: var(--dusk);
  }
  .dock__btn { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 14px; text-decoration: none; font-weight: 700; font-size: 16px; color: var(--on-dusk); border: 2px solid var(--on-dusk-2); }
  .dock__btn--lamp { background: var(--lamp); color: var(--dusk); border-color: var(--lamp); }
  .dock__btn:focus-visible { outline: 3px solid var(--lamp); outline-offset: 2px; }
  .toast { bottom: 88px; }
}