/* まちなか薬局 くすのめ（デモ）
   地は白、文字は濃い灰 #37474F。若緑 #7CB342 は線と印だけ（面に塗らない・白地の字に使わない）。緑の字は #4E7A23。
   面は灰のごく薄い色 #F3F5F6 だけ。書体は Noto Sans JP の1つ（700／500／400）。時刻と番号は 500 の等幅数字。
   あしらい: 薬袋のカード（口の折り返しの線・上の角を6px落とす）／楠の芽の印／分包の帯の区切り。 */

:root {
  --ink: #37474F;
  --ink-2: #56656C;
  --g: #7CB342;
  --gt: #4E7A23;
  --gray: #F3F5F6;
  --line: #EBEDED;          /* 濃い灰の10% */
  --line-2: rgba(55, 71, 79, .2);
  --font: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  --wrap: 1160px;
  --ease: cubic-bezier(.22, .68, .32, 1);
  --me: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M11 19.2V11.5' fill='none' stroke='%2337474F' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M11 12.6C6.2 12.8 2.4 9.6 2 4C7 3.8 10.6 7.2 11 12.6Z' fill='%237CB342'/%3E%3Cpath d='M11 10.8C11.2 5.2 14.6 1 20 .6C20.4 6 17 10.4 11 10.8Z' fill='%237CB342'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 1.9; letter-spacing: .03em;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 700; line-height: 1.5; letter-spacing: .04em; font-feature-settings: "palt"; text-wrap: balance; word-break: auto-phrase; }
p, dd, li, td { text-wrap: pretty; word-break: auto-phrase; }
table { border-collapse: collapse; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.num { font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.narrow > * { max-width: 780px; }
.small { font-size: .86rem; color: var(--ink-2); line-height: 1.8; margin-top: 14px; }
p + p { margin-top: .9em; }

/* 楠の芽の印（区画の頭） */
.me { width: 20px; height: 18px; flex: none; }
.h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); margin-bottom: 28px; }
.h3 { font-size: 1.08rem; margin-bottom: 8px; }

/* ボタンと文字のリンク */
.cta { margin-top: 32px; }
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 500; padding: 13px 26px; border-radius: 4px; letter-spacing: .06em; transition: transform .2s var(--ease), opacity .2s; }
.btn:hover { transform: translateY(-2px); opacity: .92; }
.btn span { transition: transform .2s var(--ease); }
.btn:hover span { transform: translateX(3px); }
.tl { color: var(--gt); font-weight: 500; text-underline-offset: .28em; text-decoration-thickness: 1px; }
.tl span { display: inline-block; transition: transform .2s var(--ease); }
.tl:hover span { transform: translateX(3px); }
.tls { margin-top: 24px; }
.small a { color: var(--gt); text-underline-offset: .25em; }

/* 薬袋のカード：濃い灰10%の線で囲み、上から14pxに若緑の折り返しの線。上の左右の角を6px落とす */
.bag { position: relative; isolation: isolate; padding: 34px 26px 24px; }
.bag::before, .bag::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.bag::before { inset: 0; background: var(--line); clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%, 0 6px); }
.bag::after {
  inset: 1px;
  background: linear-gradient(var(--g), var(--g)) 0 12.25px / 100% 1.5px no-repeat, linear-gradient(var(--gray), var(--gray)) 0 0 / 100% 12.25px no-repeat, #fff;
  clip-path: polygon(5.6px 0, calc(100% - 5.6px) 0, 100% 5.6px, 100% 100%, 0 100%, 0 5.6px);
}
.bag--s { padding: 28px 18px 18px; font-size: .88rem; line-height: 1.75; }

/* 分包の帯（区画の区切り） */
.bunpou {
  width: min(100% - 40px, var(--wrap)); margin: 0 auto; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='16'%3E%3Crect x='.5' y='.5' width='27' height='15' rx='1.5' fill='none' stroke='%2337474F' stroke-opacity='.2'/%3E%3Cpath d='M29 8h12' stroke='%2337474F' stroke-opacity='.35' stroke-dasharray='1.5 2.5'/%3E%3C/svg%3E") repeat-x 0 0;
}

/* ヘッダー */
.head { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.head__in { width: min(100% - 40px, 1280px); margin-inline: auto; display: flex; align-items: center; gap: 14px; min-height: 76px; }
.brand { display: block; line-height: 0; }
.logo { width: auto; height: 46px; overflow: visible; }
.logo__sub { font: 500 10.5px var(--font); fill: var(--ink); letter-spacing: .1em; }
.logo__n { font: 700 25px var(--font); fill: var(--ink); letter-spacing: .06em; }
.logo__stem { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.logo__lf { fill: var(--g); }
.logo__vein { fill: none; stroke: #fff; stroke-width: 1.1; stroke-linecap: round; opacity: .85; }
.demo { align-self: center; font-size: 10px; font-weight: 500; letter-spacing: .14em; color: var(--ink-2); border: 1px solid var(--line-2); padding: 0 5px; border-radius: 2px; line-height: 1.6; }
.gnav { margin-left: auto; }
.gnav ul { display: flex; gap: 4px; }
.gnav a { position: relative; display: block; padding: 10px 12px; font-size: .92rem; font-weight: 500; text-decoration: none; letter-spacing: .04em; }
.gnav ul a::after { content: ""; position: absolute; left: 12px; bottom: 2px; width: 22px; height: 2px; background: var(--g); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.gnav ul a[aria-current="page"]::after, .gnav ul a:hover::after { transform: scaleX(1); }
.gnav__tel { display: none; }
.head__tel { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; padding-left: 18px; border-left: 1px solid var(--line); }
.head__tel a, .gnav__tel a { font-size: 1.12rem; text-decoration: none; letter-spacing: .04em; }
.head__tel span, .gnav__tel span { font-size: .72rem; color: var(--ink-2); }
.menu { display: none; }

@media (max-width: 1100px) {
  .head__in { min-height: 64px; }
  .logo { height: 40px; }
  .head__tel { display: none; }
  .menu { display: flex; align-items: center; gap: 8px; margin-left: auto; background: none; border: 1px solid var(--line-2); border-radius: 4px; padding: 7px 12px; cursor: pointer; font-size: .8rem; font-weight: 500; }
  .menu__bars { position: relative; width: 16px; height: 10px; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
  .menu__bars::after { content: ""; position: absolute; left: 0; right: 0; top: 2.75px; border-top: 1.5px solid var(--ink); }
  .gnav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); padding: 8px 20px 22px; margin: 0; display: none; }
  .is-menu .gnav { display: block; }
  .gnav ul { flex-direction: column; gap: 0; }
  .gnav a { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .gnav ul a::after { left: 4px; bottom: 8px; }
  .gnav__tel { display: flex; flex-direction: column; margin-top: 16px; line-height: 1.4; }
  .gnav__tel a { padding: 0; border: 0; font-size: 1.3rem; }
}

/* 区画 */
.sec { padding: 88px 0; }
.sec--tight { padding: 64px 0; }
.sec--gray { background: var(--gray); }
.sec--gray .bag::after { background: linear-gradient(var(--g), var(--g)) 0 12.25px / 100% 1.5px no-repeat, linear-gradient(var(--gray), var(--gray)) 0 0 / 100% 12.25px no-repeat, #fff; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin-top: 40px; max-width: 980px; }
.cols2 p + p { margin-top: 0; }

/* 写真 */
.ph img { width: 100%; border-radius: 4px; aspect-ratio: 3 / 2; object-fit: cover; }
.ph figcaption { margin-top: 10px; font-size: .84rem; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.ph figcaption::before { content: ""; width: 14px; height: 1.5px; background: var(--g); }

/* ---------- トップの最初の画面 */
.hero__ph { position: relative; }
.hero__ph > img { width: 100%; height: 60vh; min-height: 420px; max-height: 660px; object-fit: cover; object-position: 62% 55%; }
.hero__band {
  position: absolute; left: 0; bottom: 132px; width: 45%;
  background: #fff; padding: 34px 44px 34px max(20px, calc((100vw - var(--wrap)) / 2));
}
.hero__h { font-size: clamp(1.55rem, 1rem + 1.6vw, 2.35rem); line-height: 1.5; letter-spacing: .05em; }
.hero__p { margin-top: 14px; max-width: 30em; }
.hero__cards { position: relative; z-index: 2; margin-top: -92px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.entry { display: flex; flex-direction: column; text-decoration: none; min-height: 100%; transition: transform .25s var(--ease); }
.entry:hover { transform: translateY(-3px); }
.entry__h { font-size: 1.14rem; margin-bottom: 8px; }
.entry p { font-size: .94rem; line-height: 1.8; }
.entry__hr { font-size: 1rem !important; }
.entry__more { margin-top: auto; padding-top: 16px; color: var(--gt); font-weight: 500; font-size: .92rem; }
.entry__more span { display: inline-block; transition: transform .2s var(--ease); }
.entry:hover .entry__more span { transform: translateX(3px); }
.hero + .sec { padding-top: 96px; }

/* 持ってくるもの */
.motte { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.motte__card { padding: 36px 30px 26px; }
.sq li { position: relative; padding: 11px 0 11px 22px; border-bottom: 1px dashed var(--line-2); font-weight: 500; }
.sq li:last-child { border-bottom: 0; }
.sq li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 8px; height: 8px; border: 1.5px solid var(--g); border-radius: 1px; }
.motte__p { margin-top: 24px; }
.motte__ph { margin-top: 8px; }
.motte__ph img { aspect-ratio: 4 / 3.4; }

/* 写真と文を左右に */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split--ph-l > .ph { order: -1; }

/* 薬局のこと（トップ） */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 56px; margin-top: 36px; align-items: start; }
.about__big { font-size: 1.3rem; font-weight: 700; line-height: 1.7; letter-spacing: .05em; grid-row: span 2; }
.about p + p { margin-top: 0; }
.about .cta { margin-top: 8px; }

/* よく聞かれること */
.qa { border-top: 1px solid var(--line-2); }
.qa__i { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 48px; padding: 26px 0; border-bottom: 1px solid var(--line-2); }
.qa dt { font-weight: 700; font-size: 1.04rem; line-height: 1.7; display: flex; gap: 10px; }
.qa dt::before { content: ""; flex: none; width: 16px; height: 15px; margin-top: .3em; background: var(--me) no-repeat center / contain; }

/* 表 */
.tbl { width: 100%; max-width: 820px; border-top: 1px solid var(--line-2); }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 15px 0; border-bottom: 1px solid var(--line-2); }
.tbl th { width: 9.5em; padding-right: 20px; font-weight: 500; color: var(--ink-2); font-size: .94rem; }
#basho .small { margin-top: 16px; }

/* ページの頭 */
.phd { padding: 64px 0 40px; }
.ph1 { display: flex; align-items: center; gap: 14px; font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); letter-spacing: .06em; }
.ph1 .me { width: 26px; height: 24px; }
.lead { margin-top: 18px; max-width: 34em; font-size: 1.04rem; }
.phd--side { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.phd--side .ph img { aspect-ratio: 16 / 10; }
.phd__wide { margin-top: 40px; }
.phd__wide img { aspect-ratio: auto; height: 46vh; min-height: 280px; max-height: 520px; }
.phd--photo { padding-bottom: 0; }
.phd__full { margin-top: 36px; }
.phd__full img { border-radius: 0; aspect-ratio: auto; height: 45vh; min-height: 260px; max-height: 560px; object-position: 50% 60%; }
.phd__full figcaption { margin-top: 10px; }
.phd + .sec { padding-top: 48px; }
.phd--photo + .sec { padding-top: 72px; }

/* 図の共通 */
.fig__h { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.06rem; margin-bottom: 22px; }
.fig__no { font-size: .74rem; font-weight: 500; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 2px; padding: 0 6px; letter-spacing: .08em; }
.fig__note { margin-top: 18px; font-size: .86rem; color: var(--ink-2); }
.ic { width: 40px; height: 40px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ic .ic-thin { stroke-width: 1.1; opacity: .7; }
.ic .ic-fill { fill: var(--ink); stroke: none; }
.ic .ic-g { fill: #fff; stroke: var(--g); stroke-width: 2; }
.ic .ic-g-ln { stroke: var(--g); stroke-width: 1.5; }

/* Y-1 処方せんを送ってから受け取るまで */
.y1 { margin-top: 8px; }
.y1__road { position: relative; display: grid; grid-template-columns: 60px 1fr 60px; gap: 0 10px; }
.y1__line { position: absolute; left: 30px; right: 30px; top: 86px; border-top: 2px dotted rgba(55, 71, 79, .55); transform-origin: left center; }
.y1__end { position: relative; margin-top: 58px; display: flex; justify-content: center; }
.ic--end { width: 56px; height: 56px; background: #fff; }
.y1__stops { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 10px; }
.y1__stops li { display: grid; grid-template-rows: 50px 72px auto; justify-items: center; text-align: center; }
.y1__dot { grid-row: 2; width: 72px; height: 72px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; display: grid; place-items: center; }
.y1__t { grid-row: 3; margin-top: 12px; font-size: .9rem; line-height: 1.6; font-weight: 500; }
.y1__note { grid-row: 1; align-self: end; margin-bottom: 8px; font-size: .76rem; line-height: 1.5; color: var(--ink-2); }
.y1__note--mid { position: relative; left: calc(-50% - 5px); width: 150%; }
.y1__note--g { border: 1px solid var(--g); color: var(--gt); border-radius: 3px; padding: 1px 8px; font-weight: 500; }

/* Y-2 家に薬を届ける流れ */
.y2__steps { position: relative; }
.y2__s { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 48px; gap: 0 14px; padding-bottom: 30px; }
.y2__s::before { content: ""; position: absolute; left: 27.25px; top: 26px; bottom: 2px; border-left: 1.5px solid var(--ink); }
.y2__s--last { margin-top: 30px; padding-bottom: 0; }
.y2__s--last::before { display: none; }
.y2__dot { justify-self: center; margin-top: 7px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; }
.y2__h { display: block; font-size: 1.04rem; }
.y2__t { display: block; font-size: .92rem; line-height: 1.75; margin-top: 2px; }
.y2__ic { width: 44px; height: 44px; }
.y2__again { position: absolute; left: 6px; top: -56px; display: flex; align-items: flex-start; gap: 12px; }
.y2__again svg { width: 34px; height: 62px; fill: none; stroke: var(--g); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.y2__again span { margin-top: -2px; font-size: .78rem; color: var(--gt); font-weight: 500; }
.y2__rep { grid-column: 2 / 4; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.y2__arw { width: 64px; height: 24px; fill: none; stroke: var(--g); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.y2__to { display: flex; gap: 4px; }
.y2__rt { font-size: .86rem; flex: 1 1 14em; }
.start { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.start__h p { max-width: 28em; }

/* Y-3 期限 */
.y3 { margin-top: 48px; }
.y3__row { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 28px; align-items: end; }
.y3__ex { font-weight: 500; font-size: .94rem; margin-bottom: 10px; }
.y3__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.y3__d { display: grid; grid-template-rows: 1.9em auto; text-align: center; }
.y3__n { font-size: .8rem; font-weight: 500; color: var(--gt); font-variant-numeric: tabular-nums; }
.y3__box { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 104px; padding: 12px 4px; border: 1.5px solid var(--ink); border-radius: 4px; background: #fff; }
.y3__box::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(124, 179, 66, .15); transform-origin: left; transform: scaleX(0); }
.y3.is-in .is-k .y3__box::before { transform: scaleX(1); }
.is-off .y3__box { border-style: dashed; }
.is-no .y3__box { background: var(--gray); }
.is-out .y3__box { border-color: rgba(55, 71, 79, .3); }
.y3__w { font-size: 1.15rem; }
.y3__tm { font-size: .76rem; line-height: 1.5; }
.is-no .y3__tm { font-weight: 500; }
.y3__tbl { display: none; }

/* Y-4 店の中 */
.y4__svg { width: 100%; height: auto; display: block; }
.y4__wall { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.y4__ln { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.y4__fill { fill: var(--gray); }
.y4__chair { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.y4__free { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 5; }
.y4__t { font: 400 17px var(--font); fill: var(--ink); }
.y4__t--s { font-size: 15px; }
.y4__tree { fill: rgba(124, 179, 66, .15); stroke: var(--g); stroke-width: 2; }
.y4__route { fill: none; stroke: var(--g); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 .016; }
.y4__route--br { stroke-width: 2; stroke-dasharray: 0 .03; }
.y4__spots circle { fill: none; stroke: var(--g); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.85); transition: opacity .25s, transform .3s var(--ease); }
.y4[data-on="uketsuke"] [data-spot="uketsuke"], .y4[data-on="machiai"] [data-spot="machiai"], .y4[data-on="owatashi"] [data-spot="owatashi"], .y4[data-on="kaikei"] [data-spot="kaikei"] { opacity: 1; transform: scale(1); }

.inside { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.steps li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; padding: 18px 12px; border-radius: 4px; transition: background-color .2s; cursor: default; }
.steps li + li { border-top: 1px dashed var(--line-2); }
.steps li:hover, .steps li:focus-visible { background: var(--gray); }
.steps__h { display: block; font-size: 1.06rem; margin-bottom: 2px; }
.steps p { font-size: .94rem; line-height: 1.8; }
/* 受付で渡す番号札の形（数字は入れない） */
.tag { position: relative; width: 66px; height: 66px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; display: grid; place-items: center; }
.tag::before { content: ""; position: absolute; top: 7px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; border: 1.5px solid var(--ink); }
.tag::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid var(--line-2); }
.tag span { margin-top: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.inside--ph .inside__r { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-content: start; }
.inside--ph .inside__r p { grid-column: 1 / -1; margin-top: 8px; }
.inside--ph .inside__r p + p { margin-top: 0; }

/* 2つを並べる */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.money { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 48px; align-items: start; }
.body .h2 { margin-bottom: 0; }
.g4 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 980px; }
.g4 p { font-size: .95rem; line-height: 1.8; }

/* LINEで送る（LINE はここだけ） */
.line { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0 48px; }
.line__card, .line__s { grid-column: 2; }
.line__card { padding: 38px 32px 26px; }
.mel li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px dashed var(--line-2); }
.mel li:last-child { border-bottom: 0; }
.mel li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 18px; height: 16px; background: var(--me) no-repeat center / contain; }

/* 気をつけていただくこと／伺ってすること */
.care { padding: 38px 32px 28px; }
.care__l { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 48px; }
.care__l dt { font-weight: 700; }
.care__l dd { font-size: .95rem; line-height: 1.8; margin-top: 4px; }

/* ケアマネジャー・医療機関の方へ */
.pro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 48px; }
.pro .h2 { margin-bottom: 0; align-items: flex-start; }
.pro .h2 .me { margin-top: .4em; }

/* 営業時間 */
.hours__in { max-width: 860px; }
.week { width: 100%; text-align: center; border-top: 1.5px solid var(--ink); }
.week th, .week td { padding: 14px 4px; border-bottom: 1px solid var(--line-2); }
.week thead th { font-weight: 500; font-size: .92rem; }
.week tbody th { text-align: left; font-size: .95rem; white-space: nowrap; padding-right: 12px; }
.week td { font-weight: 500; font-size: 1.05rem; }
.week td.off { color: #9AA6AB; }
.hours__p { margin-top: 22px; font-weight: 500; }

/* 名前 */
.name { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; align-items: center; max-width: 900px; }
.name__mark svg { width: 160px; height: 160px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nm__stem { stroke: var(--ink); stroke-width: 2.4; }
.nm__lf { stroke: var(--g); stroke-width: 2.4; transform-box: view-box; }
.nm__lf--l { transform-origin: 60px 72px; }
.nm__lf--r { transform-origin: 60px 64px; }
.nm__v { stroke: var(--g); stroke-width: 1.4; opacity: .8; }
.notice__c { max-width: 860px; padding: 38px 32px 28px; }
.notice__c .h2 { margin-bottom: 14px; }

/* 場所と地図 */
.place__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.map svg { width: 100%; height: auto; display: block; background: #fff; border-radius: 4px; }
.mp__ln { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.mp__tie { stroke: var(--ink); stroke-width: 1.2; }
.mp__t { font: 400 16px var(--font); fill: var(--ink); }
.mp__p { font: 700 22px var(--font); fill: var(--ink); }
.mp__tree { fill: rgba(124, 179, 66, .15); stroke: var(--g); stroke-width: 2; }

/* 掲示事項：掲示の紙に近い、字を詰めた表 */
.kj { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 56px; padding: 24px 0 88px; align-items: start; }
.toc { position: sticky; top: 100px; border-left: 1.5px solid var(--line-2); }
.toc a { display: block; padding: 6px 0 6px 16px; font-size: .88rem; text-decoration: none; color: var(--ink-2); line-height: 1.6; }
.toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }
.ks { padding: 28px 0 32px; border-top: 1.5px solid var(--ink); }
.ks + .ks { margin-top: 12px; }
.ks__h { font-size: 1.12rem; margin-bottom: 14px; }
.ks__sub { margin-top: 16px; margin-bottom: 8px; font-weight: 500; font-size: .92rem; }
.ks p { font-size: .95rem; line-height: 1.85; }
.ks p a { color: var(--gt); text-underline-offset: .25em; }
.kt { width: 100%; font-size: .92rem; line-height: 1.7; }
.kt th, .kt td { text-align: left; vertical-align: top; padding: 9px 12px; border: 1px solid var(--line-2); }
.kt tbody th { width: 12.5em; background: var(--gray); font-weight: 500; }
.kt thead th { background: var(--gray); font-weight: 500; }
.kt + p { margin-top: 12px; }

/* ページの下 */
.pnext { display: flex; flex-wrap: wrap; gap: 14px 40px; padding: 40px 0 72px; border-top: 1px solid var(--line); }

/* フッター */
.foot { background: var(--ink); color: #fff; padding: 56px 0 28px; }
.foot__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; }
.foot .logo__sub, .foot .logo__n { fill: #fff; }
.foot .logo__stem { stroke: #fff; }
.foot .logo__vein { stroke: var(--ink); }
.foot__addr { margin-top: 18px; font-size: .9rem; line-height: 1.9; color: #E6EAEC; }
.foot__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; }
.foot__nav a { display: inline-block; padding: 6px 0; font-size: .9rem; text-decoration: none; color: #E6EAEC; }
.foot__nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.foot__c { margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .78rem; color: #C9D1D4; }

/* ---------- 動き（transform と opacity だけ。JS が html に .js を付けたときだけ隠す） */
@keyframes up8 { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sprout { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
html.js .hero__cards .entry { animation: up8 .4s var(--ease) both; animation-delay: calc(.2s + var(--i) * .1s); }
html.js .head .logo__lf { transform-box: view-box; animation: sprout .7s var(--ease) both .1s; }
html.js .head .logo__lf--l { transform-origin: 16px 27px; }
html.js .head .logo__lf--r { transform-origin: 16px 24px; animation-delay: .25s; }
html.js .fade { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .fade.is-in { opacity: 1; transform: none; }
html.js .bunpou { opacity: 0; transform: translateX(-14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.js .bunpou.is-in { opacity: 1; transform: none; }
html.js .y1__line { transform: scaleX(0); transition: transform 1.1s var(--ease) .1s; }
html.js .y1.is-in .y1__line { transform: scaleX(1); }
html.js .y1__stops li, html.js .y1__end { opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease); transition-delay: calc(.15s + var(--i, 0) * .2s); }
html.js .y1__end--l { --i: -.5; }
html.js .y1__end--r { --i: 6; }
html.js .y1.is-in .y1__stops li, html.js .y1.is-in .y1__end { opacity: 1; transform: none; }
html.js .y2__s { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: calc(.1s + var(--i) * .15s); }
html.js .y2.is-in .y2__s { opacity: 1; transform: none; }
html.js .y3__d { opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease); transition-delay: calc(var(--i) * .09s); }
html.js .y3.is-in .y3__d { opacity: 1; transform: none; }
html.js .y3__box::before { transition: transform .5s var(--ease); transition-delay: calc(.35s + var(--i) * .14s); }
html:not(.js) .is-k .y3__box::before { transform: scaleX(1); }
html.js .y4__route { opacity: 0; transition: opacity .8s var(--ease) .4s; }
html.js .y4.is-in .y4__route { opacity: 1; }
html.js .y4__chair { opacity: 0; transition: opacity .3s; }
html.js .y4.is-in .y4__chair { opacity: 1; }
html.js .y4.is-in .y4__chair:nth-of-type(2n) { transition-delay: .1s; }
html.js .map .mp__tree, html.js .map use { opacity: 0; transition: opacity .6s .3s; }
html.js .map.is-in .mp__tree, html.js .map.is-in use { opacity: 1; }
html.js .nm__lf { opacity: 0; transform: scale(.5); transition: opacity .8s var(--ease), transform .9s var(--ease); }
html.js .nm__lf--r { transition-delay: .2s; }
html.js .name.is-in .nm__lf { opacity: 1; transform: none; }

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

/* ---------- 幅ごと */
@media (max-width: 1000px) {
  .hero__band { width: 56%; }
  .y1__stops li { grid-template-rows: 56px 64px auto; }
  .y1__dot { width: 64px; height: 64px; }
  .y1__line { top: 88px; }
  .y1__end { margin-top: 60px; }
}
@media (max-width: 820px) {
  .sec { padding: 60px 0; }
  .sec--tight { padding: 48px 0; }
  .hero__ph > img { height: 46vh; min-height: 260px; max-height: 420px; }
  .hero__band { position: static; width: auto; padding: 26px 20px 8px; }
  .hero__cards { margin-top: 20px; grid-template-columns: 1fr; gap: 14px; }
  .hero + .sec { padding-top: 64px; }
  .cols2, .motte, .split, .pair, .about, .two, .money, .body, .start, .line, .pro, .inside, .place__in, .phd--side, .kj, .g4 { grid-template-columns: minmax(0, 1fr); }
  .cols2 { gap: 0; margin-top: 28px; }
  .cols2 p + p { margin-top: .9em; }
  .split, .motte, .two, .money, .start, .inside, .place__in, .phd--side { gap: 32px; }
  .split > .ph { order: -1; }
  .about__big { grid-row: auto; font-size: 1.15rem; }
  .about .cta { margin-top: 20px; }
  .qa__i { grid-template-columns: minmax(0, 1fr); padding: 20px 0; }
  .line__card, .line__s { grid-column: 1; }
  .line__card, .care, .notice__c, .motte__card { padding: 34px 20px 22px; }
  .care__l { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .body .h2, .pro .h2 { margin-bottom: 20px; }
  .phd { padding: 40px 0 28px; }
  .phd--side .phd__ph { order: 2; }
  .kj { gap: 24px; padding-top: 8px; }
  .toc { position: static; }
  .toc ul { display: flex; flex-wrap: wrap; gap: 2px 14px; }
  .toc a { padding: 4px 0 4px 10px; }
  .kt tbody th { width: 7.5em; }
  .kt th, .kt td { padding: 8px 9px; }
  .name { grid-template-columns: 96px minmax(0, 1fr); gap: 20px; }
  .name__mark svg { width: 92px; height: 92px; }
  .foot__in { grid-template-columns: minmax(0, 1fr); }
  .tbl th { width: 6.8em; padding-right: 12px; }

  /* Y-1 は縦にして上から下へ */
  .y1__road { display: block; padding-left: 0; }
  .y1__line { left: 31px; right: auto; top: 30px; bottom: 30px; border-top: 0; border-left: 2px dotted rgba(55, 71, 79, .55); transform-origin: center top; }
  html.js .y1__line { transform: scaleY(0); }
  html.js .y1.is-in .y1__line { transform: scaleY(1); }
  .y1__end { margin: 0; width: 64px; justify-content: center; }
  .y1__end--l { margin-bottom: 12px; }
  .y1__end--r { margin-top: 12px; }
  .ic--end { width: 48px; height: 48px; }
  .y1__stops { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .y1__stops li { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; justify-items: start; text-align: left; align-items: center; }
  .y1__dot { grid-row: 1 / span 2; grid-column: 1; width: 62px; height: 62px; }
  .y1__note { grid-row: 1; grid-column: 2; align-self: end; margin: 0 0 4px; }
  .y1__note--mid { left: 0; width: auto; }
  .y1__t { grid-row: 2; grid-column: 2; margin: 0; align-self: start; }
  .y1__stops li:not(:has(.y1__note)) .y1__t { grid-row: 1 / span 2; align-self: center; }

  /* Y-3 は7日を縮めて1列。時刻は帯の下の表へ */
  .y3__row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .y3__days { gap: 4px; }
  .y3__n { font-size: .68rem; letter-spacing: 0; }
  .y3__box { min-height: 52px; padding: 10px 2px; }
  .y3__tm { display: none; }
  .y3__tbl { display: table; margin-top: 14px; width: 100%; font-size: .9rem; border-top: 1px solid var(--line-2); }
  .y3__tbl th, .y3__tbl td { padding: 7px 4px; border-bottom: 1px solid var(--line-2); text-align: left; }
  .y3__tbl th { width: 3em; font-weight: 700; }

  .y2__s { grid-template-columns: 44px minmax(0, 1fr) 40px; gap: 0 10px; }
  .y2__s::before { left: 21.25px; }
  .y2__again { left: 0; }
  .y2__ic { width: 38px; height: 38px; }
  .y2__rep { grid-column: 2 / 4; }
  .steps li { grid-template-columns: 66px minmax(0, 1fr); gap: 12px; padding: 16px 4px; }
  .tag { width: 60px; height: 60px; }
  .inside--ph .inside__r { grid-template-columns: 1fr 1fr; gap: 12px; }
  .week th, .week td { padding: 10px 2px; }
  .week thead th { font-size: .8rem; }
  .week tbody th { font-size: .8rem; padding-right: 4px; }
  .week td { font-size: .95rem; }
}
@media (max-width: 420px) {
  .logo { height: 36px; }
  .demo { font-size: 9px; padding: 0 3px; }
  .menu__label { font-size: .74rem; }
  .pair { gap: 14px; }
}
.nb { display: inline-block; }
.tbasho { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 64px; align-items: end; }
.tbasho .cta { margin: 0 0 48px; }
@media (max-width: 820px) { .tbasho { grid-template-columns: minmax(0, 1fr); } .tbasho .cta { margin: 0; } }
.num, .fig__no { white-space: nowrap; }
.fig__h { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 600px) { .y4__t { font-size: 24px; } .y4__t--s { font-size: 20px; } .y4__route { stroke-width: 4; } }
@media (max-width: 600px) { .mp__t { font-size: 26px; } .mp__p { font-size: 30px; } }