/* ひとこと店番 サービスページ
   2026-09-27 作り直し。「明るい・親しみ・見てわかる」。店舗向けのサービスの定石に寄せた。
   前の「町の掲示板と、灯り」（深緑・明朝・生成り）はやめた ＝ 古くさく・地味に見えたため。
   色はこの5つだけ: 白 / クリーム / 文字 / 橙 / マーカーの黄。
   書体は2つだけ: 見出し Zen Maru Gothic 700 / 本文 Noto Sans JP。明朝は使わない。
   やらないこと: LINEのロゴとLINEの緑（#06C755）／人物のモデル写真／架空の実績。
   ※「画面の見本（.mk）」の中だけは、お店の色（藍）とGoogleの休業の赤を使っている。
     見本として本物に合わせるため。ページの装飾には使っていない。 */
:root{
  --ink:#1f2a2e;        /* 文字 */
  --cream:#fff7ec;      /* あたたかいクリーム：節の交互の地 */
  --orange:#b4500d;     /* 主役：ボタン・強調 */
  --marker:#ffe38a;     /* マーカーの黄：見出しの一部の下線 */
  --sub:#5d6a6e;        /* 文字のうすい方（--ink の薄め） */
  --line:#eadfd0;
  --r:16px;
  --sh:0 4px 16px rgba(31,42,46,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:#fff;color:var(--ink);font-size:16px;line-height:1.9;
  line-break:strict;overflow-wrap:anywhere;
  font-family:"Noto Sans JP","Hiragino Sans","Noto Sans CJK JP",sans-serif;
  padding-bottom:calc(78px + env(safe-area-inset-bottom));
}
img{max-width:100%;display:block}
a{color:inherit}
.nw{display:inline-block;max-width:100%;text-indent:0}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
h1,h2,h3,.maru{font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Noto Sans JP",sans-serif;font-weight:700}

/* 下書きの印（公開するときは出ない）
   画面に貼り付けず、ページの一番上にそのまま置く。
   貼り付ける（position:fixed）とボタンや吹き出しに重なって押せなくなるため。 */
.draft{margin:8px 0 0 12px;display:inline-block;
  font:11px/1.5 system-ui,sans-serif;background:#fff8dc;border:1px solid #d9b94a;border-radius:8px;
  padding:3px 9px;color:#6b5a1e}

/* ══ 1画面目 ══════════════════════════════════════════ */
.lp-hero{background:var(--cream);padding:22px 0 46px}
.hero-grid{display:grid;gap:34px}
.brand{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:18px;letter-spacing:.2em;padding-left:.2em}
.brand-sub{display:block;font-family:"Noto Sans JP",sans-serif;font-weight:400;
  font-size:10.5px;letter-spacing:.18em;color:var(--sub);margin-top:1px}
.lp-hero h1{margin-top:24px;font-size:clamp(28px,7.6vw,42px);line-height:1.5;letter-spacing:.01em}
.lp-hero h1 .nw:first-child{background:linear-gradient(transparent 64%,var(--marker) 64%)}
.scope-items{list-style:none;margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.scope-items li{font-size:13.5px;line-height:1.5;font-weight:500;padding:7px 14px;border-radius:999px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.lp-hero .sub{margin-top:22px;font-size:16px;color:var(--sub);line-height:2}
.cta{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:58px;padding:0 24px;
  border-radius:999px;background:var(--orange);color:#fff;font-weight:700;text-decoration:none;font-size:16.5px;
  box-shadow:0 6px 18px rgba(240,122,43,.3)}
.btn.ghost{background:#fff;color:var(--ink);border:2px solid var(--orange);box-shadow:none}
.btn svg{width:19px;height:19px;flex:none}
.monitor{margin-top:14px;font-size:13.5px;color:var(--sub);text-align:center}
@media (min-width:640px){.cta{flex-direction:row}.cta .btn{flex:1}.monitor{text-align:left}}
/* 広い画面では、右に見本を縦積みにせず「文章 → 見本3つを横並び」の上下にする
   （縦積みだと右だけ長く伸びて、左下が大きく空いてしまう） */
@media (min-width:900px){
  .hero-grid{gap:26px;justify-items:center}
  .hero-txt{max-width:860px;width:100%}
  .lp-hero{padding:18px 0 34px}
  .lp-hero h1{margin-top:18px;font-size:38px}
  .lp-hero .sub{margin-top:16px}
  .cta{margin-top:18px}
  .cta .btn{flex:0 1 260px}
}

/* 実際の画面3つの流れ（①送る → ②できる → ③出る）
   どの幅でも横に3つ並べる。狭い画面は指で横にずらして見る */
.flow3{display:grid;grid-auto-flow:column;align-items:center;justify-content:start;
  gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.fscreen{display:grid;justify-items:center;gap:8px;width:168px;opacity:0;transform:translateY(10px);
  animation:rise .55s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:calc(var(--i) * .28s + .15s)}
.fscreen figcaption{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:13px;
  line-height:1.6;color:var(--sub);text-align:center}
.farrow{color:var(--orange);font-size:15px;line-height:1}
/* 3つ並べても入りきる幅になったら、横にずらす必要がないので真ん中に置く */
@media (min-width:620px){.flow3{justify-content:center;gap:14px;overflow-x:visible}}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fscreen{animation:none;opacity:1;transform:none}}

/* ══ 節の見出し ═══════════════════════════════════════ */
.sec{padding:58px 0}
.sec.tint{background:var(--cream)}
.sec h2{font-size:clamp(23px,5.6vw,29px);line-height:1.55}
.sec h2 .nw:first-child{background:linear-gradient(transparent 66%,var(--marker) 66%)}
.sec .sec-sub{margin-top:12px;color:var(--sub);font-size:15px}
.sec>.wrap>h2+*{margin-top:28px}

/* ══ ② こんなこと、ありませんか ═══════════════════════ */
.troubles{display:grid;gap:14px}
.trouble{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:22px 20px;box-shadow:var(--sh)}
.trouble .ti{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--cream);color:var(--orange)}
.trouble .ti svg{width:24px;height:24px}
.trouble h3{margin-top:14px;font-size:18px;line-height:1.65}
.trouble p{margin-top:8px;font-size:15px;color:var(--sub);line-height:1.9}
@media (min-width:640px){.troubles{grid-template-columns:1fr 1fr}}

/* ══ ③ しくみの図 ═════════════════════════════════════ */
.sys{display:grid;justify-items:center;gap:10px}
.sys-box{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:16px 22px;text-align:center;width:100%;max-width:280px}
.sys-in .sys-lb{font-size:12.5px;letter-spacing:.08em;color:var(--sub)}
.sys-in .sys-say{margin-top:6px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:19px}
.sys-hub{background:var(--orange);border-color:var(--orange);color:#fff;
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:19px;letter-spacing:.06em}
.sys-arw{color:var(--orange);font-size:14px;line-height:1}
.sys-out{list-style:none;display:grid;gap:8px;width:100%;max-width:280px}
.sys-out li{background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:var(--sh);
  padding:11px 16px;text-align:center;font-weight:500;font-size:15px}
.sys-note{margin-top:20px;font-size:14.5px;color:var(--sub);text-align:center}
@media (min-width:860px){
  .sys{grid-template-columns:auto 26px auto 26px 1fr;align-items:center;justify-items:stretch;gap:0}
  .sys-box{max-width:none;width:220px}
  .sys-arw{text-align:center;transform:rotate(-90deg)}
  .sys-out{max-width:none;margin-left:14px}
}

/* ══ ④ できること4つ（小さな画面の見本つき）═══════════ */
.cans{display:grid;gap:18px}
.can{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:24px 20px;display:grid;gap:18px}
.can .no{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;
  color:var(--orange);display:flex;align-items:center;gap:10px}
.can .ci{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--cream);color:var(--orange)}
.can .ci svg{width:19px;height:19px}
.can h3{margin-top:10px;font-size:19px;line-height:1.65}
.can-txt p:last-child{margin-top:10px;font-size:15px;color:var(--sub);line-height:1.95}
.can-pic{display:grid;justify-items:center}
.can-note{margin-top:22px;background:var(--cream);border-radius:var(--r);
  padding:18px 20px;font-size:14.5px;color:var(--sub)}
/* 横に2枚並べる。札の中は「文章 → 見本」の縦積みのまま
   （中で横に割ると文章の幅が足りず、1語ずつ折れてしまう） */
@media (min-width:640px){.cans{grid-template-columns:1fr 1fr}}

/* ══ ⑤ 今までとの違い ═════════════════════════════════ */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cmp-h{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:15px;
  text-align:center;padding:10px 8px;border-radius:999px}
.cmp-h.before{background:#fff;border:1px solid var(--line);color:var(--sub)}
.cmp-h.after{background:var(--orange);color:#fff}
.cmp-c{font-size:14.5px;line-height:1.85;padding:16px 14px;border-radius:var(--r)}
.cmp-c.before{background:#fff;border:1px dashed var(--line);color:var(--sub)}
.cmp-c.after{background:#fff;border:2px solid var(--orange);box-shadow:var(--sh);font-weight:500}
/* 2列なので、狭い画面では字とすき間を詰める（詰めないと言葉の途中で折れる） */
@media (max-width:389px){.cmp{gap:6px}
  .cmp-h{font-size:13.5px;padding:9px 4px}
  .cmp-c{font-size:12.5px;padding:13px 9px}}

/* ══ ⑥ 事例 ═══════════════════════════════════════════ */
.honest{background:var(--cream);border-radius:var(--r);padding:20px;font-size:15px;line-height:1.95}
.cases{margin-top:16px;display:grid;gap:16px}
.case{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:20px;display:grid;justify-items:start}
.case .mk{justify-self:center}
.case .name{margin-top:16px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:19px}
.case .meta{font-size:13px;color:var(--sub);margin-top:2px}
.case p:nth-of-type(3){margin-top:10px;font-size:15px;line-height:1.9;color:var(--sub)}
.case .state{margin-top:12px;font-size:12px;letter-spacing:.1em;background:var(--cream);
  color:var(--orange);border-radius:999px;padding:4px 12px;font-weight:700}
.case-link{margin-top:14px;font-size:15px;font-weight:700;color:var(--orange);
  text-decoration:underline;text-underline-offset:4px}
.case-note{margin-top:16px;font-size:14px;color:var(--sub)}
@media (min-width:640px){.cases{grid-template-columns:1fr 1fr}}

/* ══ ⑥b ほかの業態の見本 ══════════════════════════════
   ボタンは1つだけ。スマホは幅いっぱい（ほかの節と同じ）、
   PCは .cta の flex:1 で横いっぱいに伸びてしまうので 340px で止めて左に置く */
.smp-lead .case-note{margin-top:14px}
.demo-more{margin-top:28px}
@media (min-width:640px){
  .smp-lead .cta,.demo-more{max-width:340px}
}

/* ══ ⑩b 運営している人 ═══════════════════════════════
   顔写真は入れない。site/face.jpg を置いたときだけ .ab-face に出る。
   無いあいだは丸い枠に「岡」の字（.ab-noface） */
.about{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:22px;display:grid;gap:16px;justify-items:center}
.ab-face{width:72px;height:72px;border-radius:999px;object-fit:cover}
.ab-noface{display:grid;place-items:center;background:var(--cream);
  color:var(--orange);font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:30px}
.ab-txt{font-size:15px;line-height:1.95}
.ab-txt p+p{margin-top:12px}
.ab-link{margin-top:14px}
.ab-link a{font-weight:700;color:var(--orange);
  text-decoration:underline;text-underline-offset:4px}
@media (min-width:640px){
  .about{grid-template-columns:auto 1fr;justify-items:start;align-items:start;gap:22px}
}

/* ══ ⑦⑪ 申し込みの帯 ═════════════════════════════════ */
.band{background:var(--orange);color:#fff;padding:36px 0;text-align:center}
.band.big{padding:56px 0}
.band .wrap{max-width:600px}
.band-t{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;line-height:1.55;
  font-size:clamp(21px,5.4vw,27px)}
.band.big .band-t{font-size:clamp(24px,6.4vw,32px)}
.band-s{margin-top:12px;font-size:15px;line-height:1.9;color:#fff}
.band .btn{margin-top:22px;background:#fff;color:var(--orange);box-shadow:0 6px 18px rgba(31,42,46,.18)}
.band-n{margin-top:14px;font-size:13px;color:#fff}

/* ══ ⑧ 使い方 ═════════════════════════════════════════ */
.steps{list-style:none;display:grid;gap:14px}
.steps li{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:22px 20px}
.steps .no{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--orange);color:#fff;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:17px}
.steps h3{margin-top:12px;font-size:18px;line-height:1.65}
.steps p{margin-top:8px;font-size:15px;color:var(--sub);line-height:1.9}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}

/* ══ ⑨ 料金 ═══════════════════════════════════════════ */
.plans{display:grid;gap:16px}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:24px 22px}
.plan.main{border:2px solid var(--orange)}
.plan .pname{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:21px}
.plan .limit{display:inline-block;font-size:12px;letter-spacing:.06em;background:var(--orange);color:#fff;
  border-radius:999px;padding:3px 11px;margin-left:8px;vertical-align:3px}
.plan dl{margin-top:16px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:baseline}
.plan dt{font-size:13px;color:var(--sub)}
.plan dd{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:25px;text-align:right}
.plan.main dd{color:var(--orange)}
.plan .cond{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--sub)}
.price-notes{margin-top:22px;list-style:none;font-size:14.5px;color:var(--sub)}
.price-notes li{padding-left:1.2em;text-indent:-1.2em;margin-top:9px;line-height:1.9}
.price-notes li::before{content:"・";color:var(--orange)}
@media (min-width:640px){.plans{grid-template-columns:1fr 1fr}}

/* ══ ⑩ よくあるご質問 ═════════════════════════════════ */
.faq{display:grid;gap:10px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.faq summary{cursor:pointer;list-style:none;padding:18px 44px 18px 48px;position:relative;
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:16.5px;line-height:1.7}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";position:absolute;left:20px;top:18px;color:var(--orange);font-size:17px}
.faq summary::after{content:"";position:absolute;right:20px;top:26px;width:9px;height:9px;
  border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 20px 20px 48px;font-size:15px;color:var(--sub);line-height:1.95;position:relative}
.faq .a::before{content:"A";position:absolute;left:20px;top:0;font-family:"Zen Maru Gothic",sans-serif;
  font-weight:700;color:var(--ink);font-size:17px}

/* ══ フッター ═════════════════════════════════════════ */
footer{padding:34px 0 26px;text-align:center;font-size:13px;color:var(--sub)}
footer .flogo{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:17px;
  letter-spacing:.2em;padding-left:.2em;color:var(--ink)}
footer nav{margin:12px 0 10px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
footer nav a{text-decoration:underline;text-underline-offset:4px}
footer small{display:block;font-size:12px}

/* ══ 画面下の固定ボタン ═══════════════════════════════ */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.dock a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;
  border-radius:999px;font-weight:700;text-decoration:none;font-size:15.5px;background:var(--orange);color:#fff}
.dock a.alt{background:#fff;color:var(--ink);border:2px solid var(--orange)}
.dock a svg{width:17px;height:17px;flex:none}
/* 320〜360pxでは、ボタンの字が言葉の途中で折れるので小さくする */
@media (max-width:374px){.dock{gap:8px;padding-left:10px;padding-right:10px}
  .dock a{font-size:13px;gap:5px;min-height:48px}
  .dock a svg{width:14px;height:14px}}
@media (min-width:720px){.dock{max-width:520px;left:50%;transform:translateX(-50%);bottom:16px;
  border-radius:999px;border:1px solid var(--line);box-shadow:0 8px 24px rgba(31,42,46,.14)}}

/* ══ 画面の見本（.mk）— 画像ファイルではなく HTML/CSS ══ */
.mk{width:168px;border-radius:14px;overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:0 6px 20px rgba(31,42,46,.12);font-size:11px;line-height:1.7}
/* ①LINEで一言。デモ（demo.html）のトーク画面と同じ色・同じ流れにそろえている。
   LINEのロゴ・アイコンは使わない。ブランドの緑 #06C755 も使わない
   （公式と間違われないため。吹き出しは #9fe07c の黄緑にしている） */
.mk-chat .mk-bar{background:#273246;color:#fff;padding:8px 10px;font-size:10px;font-weight:700;
  display:flex;align-items:center;gap:7px}
.mk-chat .mk-back{flex:none;width:6px;height:6px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;
  transform:rotate(45deg);margin-left:1px}
.mk-chat .mk-talk{padding:10px;display:grid;gap:7px;background:#8fa9cf}
.mk-chat .mb{padding:7px 10px;border-radius:12px;max-width:90%;font-size:10px;line-height:1.75;
  box-shadow:0 1px 2px rgba(31,42,46,.12)}
.mk-chat .mb.me{justify-self:end;background:#9fe07c;border-bottom-right-radius:3px}
.mk-chat .mb.you{justify-self:start;background:#fff;border-bottom-left-radius:3px}
.mk-chat .mk-btns{margin-top:6px;padding-top:6px;border-top:1px solid var(--line);display:flex;gap:5px}
/* 「>」で直下だけに当てる。付けないと中の .nw にも枠が付いて、二重の輪になる */
.mk-chat .mk-btns>span{flex:none;white-space:nowrap;font-size:9.5px;font-weight:700;line-height:1;
  padding:5px 10px;border-radius:999px;border:1.5px solid var(--orange)}
.mk-chat .mk-btns>.yes{background:var(--orange);color:#fff}
.mk-chat .mk-btns>.no{background:#fff;color:var(--orange)}
/* ②できたストーリー画像（お店の色。demo.js の描き方に合わせている） */
.mk-story{aspect-ratio:9/16;background:#1b2a41;color:#f6f2e9;display:grid;place-items:center;padding:9px}
.mk-story .mk-st-in{border:1px solid #c4432b;width:100%;height:100%;
  display:grid;align-content:center;justify-items:center;gap:4px;padding:10px 8px;text-align:center}
.mk-st-shop{font-size:9px;opacity:.82}
.mk-st-bar{display:block;width:22px;height:2px;background:#c4432b;margin:3px 0 6px}
.mk-st-big{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:17px;line-height:1.45}
.mk-st-sub{margin-top:4px;font-size:9.5px;opacity:.8;line-height:1.6}
/* ③Googleマップのお店の欄 */
.mk-map{padding:12px 11px}
.mk-mp-name{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:13px}
.mk-mp-meta{font-size:9.5px;color:var(--sub);margin-top:1px}
.mk-mp-row{margin-top:9px;padding-top:9px;border-top:1px solid var(--line);display:grid;gap:2px}
.mk-mp-row .dt{font-size:9.5px;color:var(--sub)}
.mk-mp-row .closed{color:#b3261e;font-weight:700;font-size:11.5px}
.mk-mp-post{margin-top:9px;background:var(--cream);border-radius:8px;padding:8px 9px}
.mk-mp-post .lbl{font-size:9px;color:var(--sub);letter-spacing:.06em}
.mk-mp-post p+p{margin-top:2px;font-size:10.5px;line-height:1.65}
/* お店のホームページ */
.mk-site .mk-sv-head{background:var(--ink);color:#fff;padding:12px 11px}
.mk-sv-name{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:14px}
.mk-sv-catch{margin-top:3px;font-size:9.5px;opacity:.85;line-height:1.6}
.mk-sv-nav{list-style:none;display:flex;flex-wrap:wrap;gap:5px;padding:9px 11px;border-bottom:1px solid var(--line)}
.mk-sv-nav li{font-size:9.5px;padding:3px 8px;border-radius:999px;background:var(--cream);color:var(--sub)}
.mk-sv-pics{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:9px 11px}
.mk-sv-pics span{aspect-ratio:1;border-radius:6px;background:var(--cream);border:1px solid var(--line)}
.mk-site.th-wa .mk-sv-head{background:#1b2a41}
.mk-site.th-wa .mk-sv-nav li{background:#ece6d8;color:#5c5a52}
.mk-site.th-wa .mk-sv-pics span{background:#ece6d8;border-color:#d9d2c3}
.mk-site.th-kissa .mk-sv-head{background:#3a2418}
.mk-site.th-kissa .mk-sv-nav li{background:#ebdcc2;color:#6b5745}
.mk-site.th-kissa .mk-sv-pics span{background:#ebdcc2;border-color:#dccbb0}
/* 口コミへの返事 */
.mk-reply{padding:11px}
.mk-reply .mk-rv .stars{color:var(--orange);font-size:10px;letter-spacing:.1em}
.mk-reply .mk-rv .rt{margin-top:3px;font-size:10.5px;line-height:1.7}
.mk-reply .mk-ans{margin-top:9px;background:var(--cream);border-radius:10px;padding:9px 10px}
.mk-reply .mk-ans .lbl{font-size:9px;font-weight:700;color:var(--orange);letter-spacing:.06em}
.mk-reply .mk-ans p+p{margin-top:3px;font-size:10.5px;line-height:1.7}

/* ══ 個人情報・確認事項のページ ═══════════════════════ */
.doc{padding:34px 0 54px}
.doc .wrap{max-width:720px}
.doc h1{font-size:26px;line-height:1.55}
.doc .updated{margin-top:10px;font-size:13px;color:var(--sub)}
.doc .intro{margin-top:22px;font-size:15.5px;line-height:2}
.doc section{margin-top:34px}
.doc h2{font-size:19px;line-height:1.65;border-left:4px solid var(--orange);padding-left:12px}
.doc ul{margin-top:14px;list-style:none;font-size:15.5px}
.doc li{padding-left:1.2em;text-indent:-1.2em;margin-top:10px;line-height:1.95}
.doc li::before{content:"・";color:var(--orange)}
.doc .note{margin-top:12px;font-size:14px;color:var(--sub)}
.doc ul.check li{padding-left:1.7em;text-indent:0;position:relative}
.doc ul.check li::before{content:"";position:absolute;left:0;top:.6em;width:13px;height:13px;
  border:2px solid var(--orange);border-radius:4px}
.terms-link{margin-top:24px}
.terms-link a{font-size:15px;font-weight:700;color:var(--orange);text-decoration:underline;text-underline-offset:4px}
.back{display:inline-flex;align-items:center;gap:6px;margin-top:40px;font-size:15px;
  text-decoration:underline;text-underline-offset:4px}

/* ══ デモ（色と書体だけそろえた。中身は変えていない）══ */
.demo-head{background:var(--cream);padding:22px 0 30px}
.demo-head .wrap,.demo-main .wrap{max-width:720px}
.demo-head h1{font-size:25px;margin-top:18px;line-height:1.55}
.demo-head .sub{margin-top:10px;font-size:14px;color:var(--sub);line-height:1.9}
.demo-head .sub+.sub{margin-top:2px}
/* トークの画面。本物のLINEに近い見た目に寄せている。
   LINEのロゴ・アイコンは使わない。ブランドの緑 #06C755 もそのまま使わない
   （公式と間違われないため。吹き出しは #9fe07c の黄緑にしている） */
.phone{margin-top:26px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#8fa9cf}
.phone .lbar{background:#273246;color:#fff;padding:12px 16px;display:flex;align-items:center;gap:12px}
.phone .lback{flex:none;width:9px;height:9px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(45deg);margin-left:2px}
.phone .lname{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:15px}
.talk{padding:16px 14px;display:grid;gap:14px;min-height:150px}
.brow{display:flex;align-items:flex-end;gap:6px;max-width:92%}
.brow.me{margin-left:auto;flex-direction:row-reverse}
.bub{padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.85;
  box-shadow:0 1px 2px rgba(31,42,46,.12)}
.brow.me .bub{background:#9fe07c;border-bottom-right-radius:4px}
.brow.you .bub{background:#fff;border-bottom-left-radius:4px}
.bmeta{flex:none;font-size:10px;line-height:1.5;color:#2f3c55;text-align:right}
.bmeta .bread{display:block;font-weight:700}
/* 確認のボタン（［はい］［直す］） */
.bbtns{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);display:flex;gap:8px}
.bbtns button{font:inherit;font-weight:700;font-size:14px;min-height:40px;padding:0 18px;
  border-radius:999px;cursor:pointer;border:2px solid var(--orange)}
.bbtns .byes{background:var(--orange);color:#fff}
.bbtns .bno{background:#fff;color:var(--orange)}
/* 送る一言を選ぶボタン（入力欄のすぐ上に横一列。はみ出す分は指で横にずらす）。
   ここだけ横にずれる＝ページ全体は横スクロールしない */
.quick{display:flex;gap:8px;padding:12px;background:#fff;border-top:1px solid #d7d2cb;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.quick::-webkit-scrollbar{display:none}
.quick button{flex:none;white-space:nowrap;font:inherit;font-size:14px;padding:0 16px;min-height:40px;
  border-radius:999px;border:1px solid #c9c3ba;background:#fff;color:var(--ink);cursor:pointer}
.quick button:hover{border-color:var(--orange);color:var(--orange)}
.compose{display:flex;gap:8px;padding:10px;background:#fff;border-top:1px solid #d7d2cb}
.compose input{flex:1;min-width:0;font:inherit;font-size:16px;padding:10px 14px;border:1px solid #d7d2cb;
  border-radius:999px;background:#fff;color:var(--ink)}
.compose button{font:inherit;font-weight:700;font-size:15px;padding:0 20px;border:0;border-radius:999px;
  background:var(--orange);color:#fff;cursor:pointer;min-height:44px}
/* 画面の下に付ける注意書き。1〜2文ごとの段落なので、段落の間も空ける */
.linenote,.shopnote,.colornote{margin-top:14px;font-size:12.5px;color:var(--sub);line-height:1.9}
.linenote+.linenote,.colornote+.colornote{margin-top:4px}
/* 店名＋ことわり書き。かたまり（.nw）に余白を付けない
   （付けると、かたまりの間が大きく空き、折り返した行の頭が下がって見える） */
.shopnote{margin-top:8px}
.out{margin-top:44px}
.out h3{font-size:18px;display:flex;align-items:center;gap:10px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700}
/* 見出しの文字は1つの箱にまとめる。まとめないと、かたまり（.nw）が横並びの部品になり、
   かたまりの間に gap の10pxが入る（「Googleマップでの　見え方」のように空く） */
.out h3 .h3t{min-width:0}
.out h3 .tag{font-size:11px;letter-spacing:.08em;background:var(--orange);color:#fff;
  border-radius:999px;padding:3px 10px;flex:none}
/* 説明は1〜2文ごとの段落。段落の間をあけて、詰まって見えないようにする */
.out .note{margin-top:14px;font-size:14px;color:var(--sub);line-height:1.9}
.out .note+.note{margin-top:10px}
.story-wrap{margin-top:28px;display:grid;justify-items:center;gap:22px}
#story{width:min(240px,62vw);height:auto;aspect-ratio:1080/1920;border-radius:12px;box-shadow:0 8px 26px rgba(31,42,46,.18)}
/* 同じ形のボタン2つ。せまい画面では縦に2段になる */
.picks{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;width:100%}
.save,.pick{flex:1 1 210px;max-width:280px;font:inherit;font-size:15px;font-weight:700;padding:12px 22px;
  border-radius:999px;border:2px solid var(--orange);
  background:#fff;color:var(--orange);cursor:pointer;min-height:48px;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center}
.picknote{font-size:12.5px;color:var(--sub);line-height:1.9;text-align:center}
.gcard{margin-top:22px;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:18px;box-shadow:var(--sh)}
.gcard .gname{font-size:19px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700}
.gcard .gmeta{font-size:13px;color:var(--sub);margin-top:2px}
.gcard .grow{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:15px;
  display:grid;grid-template-columns:5.5em 1fr;gap:10px}
.gcard .grow dt{font-size:13px;color:var(--sub)}
.gcard .closed{color:#b3261e;font-weight:700}
.gcard .gpost{margin-top:14px;border-radius:10px;padding:14px;background:var(--cream)}
.gcard .gpost .lbl{font-size:11px;letter-spacing:.08em;color:var(--sub)}
.reviews{margin-top:22px;display:grid;gap:10px}
.rev{text-align:left;font:inherit;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;cursor:pointer;box-shadow:var(--sh)}
.rev[aria-pressed=true]{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.rev .stars{color:var(--orange);letter-spacing:.14em;font-size:14px}
.rev .who{font-size:12px;color:var(--sub);margin-left:8px}
.rev .rtext{font-size:14.5px;margin-top:4px;line-height:1.85}
/* お返事の案は「下書き」。ふだんは、ふつうの文（.rdraft）で見せる。
   ［直して出す］を押したときだけ入力欄（.redit）に変える。
   ★1〜2は［このまま出す］を置かない（事実を確かめて、読んで直してから出すため） */
.answer{margin-top:16px;border:2px solid var(--orange);border-radius:var(--r);padding:18px;background:#fff}
.answer:empty{display:none}
.answer .lbl{font-size:12px;letter-spacing:.1em;color:var(--orange);font-weight:700}
.answer p{margin-top:8px;font-size:15.5px;line-height:1.95}
.answer .warn{margin-top:0;font-size:13.5px;font-weight:700;color:#b3261e;line-height:1.8}
.answer.care{border-color:#e0b4ae}
/* 入力欄。高さは中身に合わせて demo.js が伸ばす（中でスクロールさせない＝最後の行まで見える）。
   word-break:auto-phrase = 言葉の区切りで折る（対応していないブラウザは今までどおり） */
.redit{margin-top:10px;width:100%;font:inherit;font-size:15.5px;line-height:1.95;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  resize:none;overflow:hidden;word-break:auto-phrase;overflow-wrap:normal}
/* ★1〜2だけ、お返事の下にお店の連絡先（見本）を1行ずつ置く */
.answer .rcontact{margin-top:2px;font-size:14.5px;font-weight:700}
.answer .rdraft+.rcontact,.answer .redit+.rcontact{margin-top:12px}
.answer .rnote{margin-top:8px;font-size:12.5px;color:var(--sub);line-height:1.8}
.rbtns{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.rbtns button{flex:none;white-space:nowrap;font:inherit;font-weight:700;font-size:14.5px;min-height:48px;
  padding:0 20px;border-radius:999px;cursor:pointer;border:2px solid var(--orange);background:#fff;color:var(--orange)}
.rbtns button.primary{background:var(--orange);color:#fff}
.answer .flow{margin-top:12px;font-size:12.5px;color:var(--sub);line-height:1.8}
.answer .done{margin-top:12px;font-size:14px;color:var(--orange);font-weight:700}