/* B案：迷わない案内板 */
:root {
  --ink: #121417;
  --ink-2: #3a4047;
  --bg: #ffffff;
  --bg-2: #f2f4f3;
  --line: #d5dad8;
  --green: #0b5c49;
  --green-2: #084a3a;
  --green-l: #e5f0ec;
  --yellow: #ffd23f;
  --yellow-2: #f5c400;
  --c-rx: #1b4f8a;
  --c-kp: #2c6a2e;
  --c-home: #9c4700;
  --c-otc: #64399a;
  --c-job: #474d55;
  --ph-bg: #e9eeec;
  --ph-ink: #3a4a45;
  --ph-line: rgba(11, 92, 73, .08);
  --font: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 19px; line-height: 1.9; color: var(--ink); background: var(--bg); }
img { max-width: 100%; height: auto; }
a { color: var(--c-rx); text-underline-offset: .2em; }
h1, h2, h3 { margin: 0; line-height: 1.45; font-weight: 700; }
p { margin: 0 0 .9em; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.sp { display: none; }
svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
a:focus-visible, button:focus-visible, input:focus, select:focus, textarea:focus, summary:focus-visible { outline: 4px solid #ffb000; outline-offset: 2px; }

/* ヘッダー */
.hd { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 3px solid var(--green); }
.hd-in { width: min(1240px, 100% - 32px); margin-inline: auto; display: flex; align-items: center; gap: 18px; min-height: 80px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; }
.logo-mark { width: 14px; height: 44px; background: var(--green); border-radius: 2px; box-shadow: 6px 0 0 var(--yellow); }
.logo-text { display: flex; flex-direction: column; font-size: 27px; font-weight: 700; line-height: 1.15; margin-left: 6px; letter-spacing: .06em; }
.logo-text small { font-size: 12.5px; color: var(--ink-2); letter-spacing: .04em; }
.gnav { display: flex; margin-left: auto; }
.gnav a { padding: .45em .75em; font-size: 17px; font-weight: 700; color: var(--ink); text-decoration: none; border-radius: 4px; }
.gnav a:hover { background: var(--green-l); }
.hd-tel {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 12px;
  background: var(--yellow); color: var(--ink); text-decoration: none; border-radius: 6px; line-height: 1.15;
}
.hd-tel span { display: flex; flex-direction: column; font-size: 23px; font-weight: 700; letter-spacing: .02em; }
.hd-tel small { font-size: 12px; }
.hd-tel:hover { background: var(--yellow-2); }
.hd-form { display: inline-flex; align-items: center; min-height: 52px; padding: 0 18px; background: var(--green); color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; border-radius: 6px; }
.hd-form:hover { background: var(--green-2); }
.nav-toggle { display: none; }

/* ファーストビュー */
.hero { background: linear-gradient(180deg, var(--green-l) 0, var(--green-l) 78%, #fff 78%); padding: 52px 0 28px; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: 44px; align-items: start; }
.hero-tag { display: inline-block; margin-bottom: 1.1em; padding: 3px 12px; font-size: 15.5px; font-weight: 700; background: #fff; border: 2px solid var(--green); color: var(--green); border-radius: 4px; }
.hero h1 { font-size: clamp(26px, 3vw, 38px); line-height: 1.5; letter-spacing: .02em; color: var(--green-2); }
.hero h1 span { display: block; margin-top: .25em; font-size: 1.12em; color: var(--ink); }
.hero-lead { margin-top: 1.1em; font-size: 19px; max-width: 32em; }
.hero-photos { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-top: 26px; align-items: end; max-width: 640px; }
.hero-photos img { display: block; width: 100%; border-radius: 6px; border: 3px solid #fff; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .4); }
.hero-photos img:first-child { max-width: 360px; }

.call-card {
  background: #fff; border: 3px solid var(--green); border-radius: 10px; padding: 26px 24px 22px;
  box-shadow: 0 16px 30px -18px rgba(8, 74, 58, .45);
}
.call-title { font-size: 20px; font-weight: 700; text-align: center; margin-bottom: .6em; }
.call-btn {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 16px 18px; background: var(--yellow); color: var(--ink); text-decoration: none; border-radius: 8px;
  box-shadow: 0 4px 0 var(--yellow-2);
}
.call-btn:hover { background: var(--yellow-2); }
.call-btn svg { width: 38px; height: 38px; grid-row: 1 / span 2; }
.call-num { font-size: clamp(26px, 2.5vw, 33px); font-weight: 700; letter-spacing: .01em; line-height: 1.2; white-space: nowrap; }
.call-hint { font-size: 14px; }
.call-free { text-align: center; margin: 14px 0 0; font-size: 17px; line-height: 1.6; }
.call-free a { font-weight: 700; color: var(--ink); }
.call-free small { font-size: 14px; color: var(--ink-2); }
.today { margin: 18px 0 0; padding: 12px 14px; background: var(--bg-2); border-radius: 6px; border-left: 6px solid var(--green); }
.today-label { font-size: 14px; font-weight: 700; color: var(--green); margin: 0; }
.today-hours { margin: 0; font-size: 18px; line-height: 1.6; }
.today-hours strong { font-size: 1.15em; }
.call-form { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 16px; min-height: 54px; font-weight: 700; color: var(--green); border: 2px solid var(--green); border-radius: 8px; text-decoration: none; }
.call-form:hover { background: var(--green-l); }

/* ご用件 */
.routes { padding: 40px 0 20px; }
.routes-title { font-size: 24px; margin-bottom: 16px; }
.route-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.route {
  --c: var(--c-rx);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  min-height: 92px; padding: 12px 12px 12px 14px;
  color: #fff; background: var(--c); text-decoration: none; border-radius: 8px;
  font-size: 17.5px; font-weight: 700; line-height: 1.45;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
}
.route:hover { filter: brightness(1.1); }
.route svg { width: 30px; height: 30px; }
.route .arr { width: 20px; height: 20px; }
.route em { display: inline-block; margin-left: .3em; padding: 0 .4em; font-style: normal; font-size: 13px; color: var(--ink); background: var(--yellow); border-radius: 3px; vertical-align: .1em; }
.r-kp { --c: var(--c-kp); }
.r-home { --c: var(--c-home); }
.r-otc { --c: var(--c-otc); }
.r-job { --c: var(--c-job); }

/* セクション */
.sec { padding: 80px 0; }
.sec-head { margin-bottom: 40px; }
.sec-kicker { display: inline-block; margin-bottom: .5em; padding: 2px 12px; font-size: 15.5px; font-weight: 700; color: #fff; background: var(--green); border-radius: 3px; }
.sec-head h2 { font-size: clamp(25px, 2.8vw, 34px); }

/* 路線図ふうの Q&A */
.qa { padding-top: 56px; }
.line { list-style: none; margin: 0; padding: 0; position: relative; }
.stop { --c: var(--c-rx); position: relative; padding: 0 0 56px 82px; }
.stop::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 0; width: 8px; background: var(--c); border-radius: 4px; opacity: .9; }
.stop:last-child::before { bottom: 40%; }
.c-rx { --c: var(--c-rx); }
.c-kp { --c: var(--c-kp); }
.c-home { --c: var(--c-home); }
.c-otc { --c: var(--c-otc); }
.stop-q { display: flex; align-items: center; gap: 16px; margin-left: -82px; margin-bottom: 18px; }
.stop-no {
  position: relative; z-index: 1; flex: none;
  display: grid; place-items: center; width: 62px; height: 62px;
  font-size: 28px; font-weight: 700; color: var(--c); background: #fff; border: 7px solid var(--c); border-radius: 50%;
}
.stop-q h3 { font-size: clamp(22px, 2.4vw, 29px); color: var(--ink); padding-bottom: 4px; border-bottom: 3px solid var(--c); }
.stop-a { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px; align-items: start; }
.stop-text p:last-child { margin-bottom: 0; }
.stop-fig { border-radius: 8px; max-width: 420px; }
.stop-fig.photo { margin: 0; }
.stop-fig.photo img { display: block; width: 100%; border-radius: 8px; }
.stop-fig figcaption { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.stop-call {
  display: inline-flex; align-items: center; gap: 8px; align-self: start; justify-self: start;
  min-height: 58px; padding: 0 22px; font-weight: 700; font-size: 18px;
  color: var(--ink); background: var(--yellow); border-radius: 8px; text-decoration: none; box-shadow: 0 4px 0 var(--yellow-2);
}

.delivery { margin-top: 18px; padding: 18px 20px; background: #fff7ef; border: 2px solid #ecc9a6; border-radius: 8px; }
.delivery-title { font-weight: 700; font-size: 20px; color: var(--c-home); margin-bottom: .2em; }
.areas { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; padding: 0; }
.areas li { min-width: 4.2em; text-align: center; padding: 4px 12px; font-weight: 700; background: #fff; color: var(--c-home); border: 2px solid var(--c-home); border-radius: 30px; }
.delivery-spec { margin: 0; }
.delivery-spec div { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; }
.delivery-spec dt { font-weight: 700; }
.delivery-spec dd { margin: 0; }

.mini-access { margin: 0; padding: 18px 20px; background: var(--bg-2); border-radius: 8px; }
.mini-access div { display: grid; grid-template-columns: 4.5em 1fr; padding: 4px 0; }
.mini-access dt { font-weight: 700; color: var(--c-rx); }
.mini-access dd { margin: 0; }

.free-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 700; }
.free-badge span { padding: 4px 14px; background: var(--c-kp); color: #fff; border-radius: 4px; font-size: 20px; }
.kp-steps { list-style: none; counter-reset: k; margin: 0 0 16px; padding: 0; }
.kp-steps li { counter-increment: k; position: relative; padding: 12px 0 12px 58px; border-top: 1px solid var(--line); }
.kp-steps li::before {
  content: counter(k); position: absolute; left: 0; top: 14px;
  display: grid; place-items: center; width: 40px; height: 40px; font-weight: 700; font-size: 20px;
  color: #fff; background: var(--c-kp); border-radius: 50%;
}
.kp-steps b { display: block; font-size: 20px; }
.kp-fee { padding: 12px 16px; background: var(--green-l); border-radius: 6px; }
.kp-bring { padding: 12px 16px; border: 2px solid var(--green-l); border-radius: 6px; }
.kp-bring b { display: block; color: var(--c-kp); }
.to-notice { font-size: 17px; }
.to-notice a::after { content: " →"; }

/* できること */
.can { background: var(--bg-2); }
.can-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.can-list { --c: var(--c-rx); }
.can-list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.can-list svg { width: 44px; height: 44px; padding: 8px; color: #fff; background: var(--c); border-radius: 8px; }
.can-list b { display: block; font-size: 20px; line-height: 1.5; }
.can-list div { color: var(--ink-2); line-height: 1.7; }
.can-list div b { color: var(--ink); }
.pay { margin: 26px 0 0; padding: 16px 20px; background: #fff; border-radius: 8px; }
.pay b { display: block; }

/* 薬剤師 */
.since { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.since::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 6px; background: var(--green); border-radius: 3px; }
.since li { position: relative; padding: 44px 16px 0 0; line-height: 1.6; font-size: 17px; }
.since li::before { content: ""; position: absolute; left: 0; top: 10px; width: 24px; height: 24px; background: #fff; border: 6px solid var(--green); border-radius: 50%; }
.since b { display: block; font-size: 26px; color: var(--green); }
.since .now::before { background: var(--yellow); }
.staff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pc { padding: 22px; background: #fff; border: 2px solid var(--line); border-radius: 10px; }
.pc .portrait { max-width: 150px; border-radius: 12px; margin-bottom: 14px; }
.pc .portrait .ph-box { font-size: 13px; padding: .6em; }
.pc .portrait .ph-file { font-size: 11px; }
.pc-role { font-size: 15px; font-weight: 700; color: var(--green); margin: 0; }
.pc-name { font-size: 27px; letter-spacing: .08em; margin-bottom: 10px; }
.chips { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 1px 10px; font-size: 15.5px; font-weight: 700; background: var(--green-l); color: var(--green-2); border-radius: 4px; }
.pc details { border-top: 1px solid var(--line); padding-top: 8px; }
.pc summary { cursor: pointer; font-weight: 700; color: var(--c-rx); min-height: 44px; display: flex; align-items: center; }
.hist { margin: 0; padding-left: 1.1em; font-size: 17px; line-height: 1.8; }
.team { margin: 32px 0 0; max-width: 533px; }
.team img { display: block; width: 100%; border-radius: 8px; }
.team figcaption { font-size: 14px; color: var(--ink-2); margin-top: 4px; }

/* 店舗案内 */
.shop { background: var(--bg-2); }
.shop-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.hours { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 20px; background: #fff; border-radius: 8px; overflow: hidden; border: 2px solid var(--line); }
.hours thead th { background: var(--green); color: #fff; font-size: 16px; padding: 8px 16px; text-align: left; }
.hours tbody th, .hours tbody td { padding: 14px 16px; border-top: 1px solid var(--line); text-align: left; }
.hours tbody td { font-weight: 700; font-size: 24px; }
.hours tr.is-today th, .hours tr.is-today td { background: #fff6cf; }
.today-mark { display: inline-block; margin-left: .5em; padding: 0 .5em; font-size: 13px; background: var(--ink); color: #fff; border-radius: 3px; vertical-align: .15em; }
.small { font-size: 16px; color: var(--ink-2); margin-top: 10px; }
.info { margin: 18px 0 0; background: #fff; border-radius: 8px; padding: 6px 18px; border: 2px solid var(--line); }
.info div { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.info div:last-child { border-bottom: 0; }
.info dt { font-weight: 700; }
.info dd { margin: 0; }
.sns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.sns a { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; font-weight: 700; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: 6px; text-decoration: none; }
.map iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 2px solid var(--line); border-radius: 8px; background: #fff; }

/* 採用 */
.recruit { background: #fff; }
.recruit-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; padding: 40px; border: 3px solid var(--c-job); border-radius: 12px; }
.recruit h2 { font-size: clamp(25px, 2.8vw, 32px); margin-bottom: .5em; }
.recruit .sec-kicker { background: var(--c-job); }
.btn-job { display: inline-flex; align-items: center; gap: 6px; min-height: 58px; padding: 0 22px; font-weight: 700; color: #fff; background: var(--c-job); border-radius: 8px; text-decoration: none; }
.btn-job svg { width: 20px; height: 20px; }
.job { margin: 0; }
.job div { display: grid; grid-template-columns: 8em 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.job div:first-child { border-top: 1px solid var(--line); }
.job dt { font-weight: 700; }
.job dd { margin: 0; }

/* お問い合わせ */
.contact { background: var(--green-l); }
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; align-items: start; }
.contact-tel .call-free { text-align: left; }
.form { background: #fff; padding: 28px; border-radius: 10px; border: 2px solid var(--line); }
.f-row { margin-bottom: 20px; }
.f-row label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 700; font-size: 19px; }
.req, .opt { font-size: 13px; padding: 0 .5em; border-radius: 3px; line-height: 1.7; }
.req { background: #b3261e; color: #fff; }
.opt { background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line); }
.form input[type=text], .form input[type=email], .form input[type=tel], .form select, .form textarea {
  width: 100%; font: inherit; font-size: 19px; padding: 13px 14px; color: var(--ink); background: #fff;
  border: 2px solid #8d9894; border-radius: 6px;
}
.form textarea::placeholder { color: #6b7570; }
.f-agree { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 18px; font-size: 17px; }
.f-agree input { width: 24px; height: 24px; }
.f-submit { width: 100%; min-height: 64px; font: inherit; font-weight: 700; font-size: 20px; color: #fff; background: var(--green); border: 0; border-radius: 8px; cursor: pointer; }
.f-submit:hover { background: var(--green-2); }
.form-note-live { margin: 14px 0 0; font-weight: 700; color: #b3261e; }

/* 保険薬局としてのご案内 */
.notice { padding: 52px 0; background: #fff; border-top: 3px solid var(--green); }
.notice h2 { font-size: 24px; margin-bottom: .5em; }
.notice-list { margin: 0 0 1em; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.notice-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }

/* フッター */
.ft { background: var(--green-2); color: #fff; padding: 44px 0 110px; font-size: 16.5px; }
.ft a { color: #fff; }
.ft p { margin: 0 0 .3em; }
.ft-name { font-size: 24px; font-weight: 700; }
.ft-name small { font-size: 14px; font-weight: 400; }
.ft-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; }
.ft-copy { margin-top: 20px !important; font-size: 13px; opacity: .8; }

.sp-cta { display: none; }

@media (max-width: 1100px) {
  .gnav a { padding: .45em .5em; font-size: 16px; }
  .hd-tel small { display: none; }
  .route-list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  body { font-size: 18px; }
  .sp { display: inline; }
  .hd-in { min-height: 64px; gap: 10px; }
  .logo-mark { height: 36px; width: 12px; }
  .logo-text { font-size: 22px; }
  .hd-tel, .hd-form { display: none; }
  .nav-toggle {
    display: block; margin-left: auto; min-height: 50px; padding: 0 16px;
    font: 700 16px var(--font); color: #fff; background: var(--green); border: 0; border-radius: 6px;
  }
  .gnav { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; background: #fff; border-bottom: 3px solid var(--green); }
  .gnav.is-open { display: flex; }
  .gnav a { padding: 16px 20px; font-size: 19px; border-bottom: 1px solid var(--line); border-radius: 0; }

  .hero { padding: 32px 0 20px; background: var(--green-l); }
  .hero h1 { font-size: 22px; }
  .hero h1 span { font-size: 1.1em; }
  .hero-in { grid-template-columns: 1fr; gap: 28px; }
  .hero-photos { grid-template-columns: 1fr 1fr; }
  .route-list { grid-template-columns: 1fr; }
  .route { min-height: 70px; }
  .route br { display: none; }

  .sec { padding: 56px 0; }
  .stop { padding-left: 0; padding-bottom: 44px; }
  .stop::before { left: 27px; top: 10px; height: 62px; bottom: auto; }
  .stop-q { margin-left: 0; align-items: flex-start; }
  .stop-no { width: 54px; height: 54px; font-size: 24px; border-width: 6px; }
  .stop-a { grid-template-columns: 1fr; gap: 20px; }
  .stop::before { display: none; }

  .can-list { grid-template-columns: 1fr; }
  .since { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .since::before { display: none; }
  .staff { grid-template-columns: 1fr; }
  .pc { display: grid; grid-template-columns: 96px 1fr; column-gap: 16px; }
  .pc .portrait { grid-row: 1 / span 3; max-width: 96px; margin: 0; }
  .pc .chips, .pc details { grid-column: 1 / -1; }
  .pc-name { font-size: 24px; margin-bottom: 4px; }
  .shop-grid, .contact-grid, .recruit-in { grid-template-columns: 1fr; gap: 28px; }
  .recruit-in { padding: 24px 20px; }
  .map iframe { min-height: 320px; }
  .job div, .info div { grid-template-columns: 6.5em 1fr; }
  .notice-list { grid-template-columns: 1fr; }
  .form { padding: 20px; }

  .sp-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: 1.15fr 1fr; box-shadow: 0 -6px 18px -8px rgba(0, 0, 0, .35); }
  .sp-cta a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 64px; font-size: 19px; font-weight: 700; text-decoration: none; padding-bottom: env(safe-area-inset-bottom); }
  .sp-tel { background: var(--yellow); color: var(--ink); }
  .sp-form { background: var(--green); color: #fff; }
}