/* ゆりの花 訪問マッサージ — デザインシステム v0.1（コンプ用）
   トークン: 香るグリーン(本土) / 清々ペールブルー(沖縄) / インク / 深青CTA / ゴールド */
:root{
  --green:#89C997; --green-soft:#EDF7F0; --green-ink:#2F7D4B;
  --blue:#63C6EE; --blue-soft:#EAF7FD; --blue-ink:#0B5E80;
  --ink:#1A2332; --mute:#55636D; --line:#DCE7E0;
  --cta:#0E7DA8; --gold:#E9A61F; --gold-soft:#FFF6E8;
  --radius:16px; --shadow:0 8px 28px rgba(26,35,50,.08);
  --wrap:1080px;
}
*{box-sizing:border-box}
html{font-size:17px;scroll-behavior:smooth;scroll-padding-top:5.5rem;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:#fff;line-height:1.9;padding-bottom:5.4rem}
img{max-width:100%;height:auto;display:block}
a{color:var(--cta)}
h1,h2,h3{line-height:1.5;margin:0;text-wrap:balance}
p{margin:.6em 0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.2rem}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.6rem 1rem;z-index:100;border:2px solid var(--cta)}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:3px solid var(--cta);outline-offset:2px}

/* コンプ用リボン */
.ribbon{background:#1A2332;color:#fff;font-size:.72rem;text-align:center;padding:.35rem .6rem;letter-spacing:.03em}

/* ヘッダー */
header.site{position:sticky;top:0;z-index:50;background:#fff;border-bottom:3px solid var(--green)}
header.site .wrap{max-width:1240px;display:flex;align-items:center;gap:.8rem;min-height:4rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);min-width:0}
.brand img{width:2.6rem;height:auto}
.brand b{display:block;font-size:1.02rem;line-height:1.3}
.brand small{white-space:nowrap;display:block;font-size:.62rem;letter-spacing:.08em;color:var(--mute);font-family:"Lexend Zetta","Zen Maru Gothic",sans-serif}
.pc-nav{display:none;margin-left:auto}
.pc-nav a{white-space:nowrap;color:var(--ink);text-decoration:none;font-size:.86rem;font-weight:700;padding:.4rem .55rem;border-radius:8px}
.pc-nav a:hover{background:var(--green-soft)}
.fs{display:flex;align-items:center;gap:.25rem;margin-left:auto;font-size:.68rem;color:var(--mute)}
.fs button{font:inherit;font-weight:700;border:1.5px solid var(--cta);background:#fff;color:var(--cta);border-radius:8px;padding:.15rem .5rem;cursor:pointer;min-width:2rem}
.fs button[aria-pressed="true"]{background:var(--cta);color:#fff}
.sp-menu{position:relative;margin-left:auto}
.fs-in-menu{display:none;padding:.6rem .8rem;border-top:1px solid var(--line);margin:.3rem 0 0}
.fs-in-menu span{display:inline}
.sp-menu summary{white-space:nowrap;list-style:none;cursor:pointer;font-weight:700;font-size:.8rem;border:1.5px solid var(--ink);border-radius:8px;padding:.25rem .6rem}
.sp-menu summary::-webkit-details-marker{display:none}
.sp-menu nav{position:absolute;right:0;top:2.6rem;width:15rem;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:.5rem}
.sp-menu nav a{display:block;padding:.6rem .8rem;color:var(--ink);text-decoration:none;font-weight:700;border-radius:8px}
.sp-menu nav a:hover{background:var(--green-soft)}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:3rem;padding:.6rem 1.3rem;border-radius:12px;font-weight:700;text-decoration:none;font-size:1rem;border:2px solid transparent;cursor:pointer;font-family:inherit}
.btn-tel{background:var(--gold);color:var(--ink)}
.btn-form{background:var(--cta);color:#fff}
.btn-line{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--green-soft)}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}

/* ヒーロー */
.hero{background:linear-gradient(135deg,#0E3B2E 0%,#1A2332 65%,#0E4A66 130%);color:#fff;padding:2rem 0 2.4rem}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem}
.hero .wrap>*{min-width:0}
.badge{display:inline-block;background:var(--gold);color:var(--ink);font-weight:700;border-radius:9px;padding:.2rem .9rem;font-size:.9rem;letter-spacing:.04em}
.hero h1{font-size:1.5rem;margin:.7rem 0 .5rem;letter-spacing:.02em}
.hero p{color:#DCE8EE;margin:.5rem 0}
.hero-photo img{border-radius:var(--radius);box-shadow:0 14px 40px rgba(0,0,0,.35);width:100%;aspect-ratio:3/2;object-fit:cover}
.area-card{background:#fff;color:var(--ink);border-radius:var(--radius);padding:1rem 1.1rem;margin-top:1.1rem;box-shadow:var(--shadow)}
.area-card label{display:block;font-weight:700;margin-bottom:.4rem}
.area-card .row{display:flex;flex-wrap:wrap;gap:.6rem}
.area-card select{flex:1 1 10rem;min-width:0;max-width:100%;min-height:3rem;font:inherit;padding:.4rem .7rem;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.area-card small{display:block;color:var(--mute);font-size:.72rem;margin-top:.5rem;line-height:1.6}

/* 3つの事実 */
.facts{display:grid;gap:.7rem;margin:-1.2rem auto 0;position:relative}
.fact{background:#fff;border:1px solid var(--line);border-top:5px solid var(--green);border-radius:0 0 var(--radius) var(--radius);padding:.9rem 1rem;box-shadow:var(--shadow);text-align:center}
.fact b{display:block;font-size:1.02rem}
.fact span{display:block;font-size:.76rem;color:var(--mute);line-height:1.6}

/* セクション */
section{padding:3rem 0}
section.tint{background:var(--green-soft)}
section.tint-b{background:var(--blue-soft)}
.en{font-family:"Lexend Zetta","Zen Maru Gothic",sans-serif;font-size:.66rem;letter-spacing:.14em;color:var(--green-ink);text-transform:uppercase;display:block;margin-bottom:.3rem}
h2.t{font-size:1.28rem;padding-left:.7rem;border-left:6px solid var(--green);margin-bottom:.8rem}
.lead{color:var(--mute);max-width:44rem}
.grid{display:grid;gap:1rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem}
.card h3{font-size:1.05rem;margin-bottom:.3rem}
.card p{color:var(--mute);font-size:.9rem;margin:.3rem 0}
a.card{text-decoration:none;color:var(--ink);display:block;transition:transform .15s,box-shadow .15s}
a.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card .go{display:inline-block;margin-top:.5rem;color:var(--cta);font-weight:700;font-size:.9rem}

/* 願い */
.wish{display:grid;gap:1.2rem;align-items:center}
.wish img{border-radius:var(--radius);width:100%;aspect-ratio:3/2;object-fit:cover}
.point{background:#fff;border-left:6px solid var(--green);border-radius:0 14px 14px 0;padding:.8rem 1rem;margin:.7rem 0;box-shadow:0 2px 10px rgba(26,35,50,.05)}
.point b{display:block}
.point span{font-size:.9rem;color:var(--mute)}

/* 流れ */
.steps{counter-reset:s;display:grid;gap:.8rem;margin:1rem 0 0;padding:0;list-style:none}
.steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem .9rem 3.4rem;position:relative}
.steps li::before{content:counter(s);position:absolute;left:1rem;top:.9rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--cta);color:#fff;font-weight:700;text-align:center;line-height:1.7rem;font-size:.9rem}
.steps b{display:block}
.steps span{font-size:.88rem;color:var(--mute)}
.story{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.4rem}
.story figure{margin:0}
.story img{border-radius:14px;width:100%;aspect-ratio:4/3;object-fit:cover}
.story figcaption{font-size:.74rem;color:var(--mute);margin-top:.3rem;line-height:1.5}

/* 拠点 */
.base{position:relative;overflow:hidden;padding:0}
.base .ph{aspect-ratio:16/9;object-fit:cover;width:100%}
.base .body{padding:1rem 1.2rem 1.2rem}
.pill{display:inline-block;font-size:.7rem;font-weight:700;border-radius:999px;padding:.1rem .7rem;margin-bottom:.4rem}
.pill.on{background:var(--green);color:#0E3B2E}
.pill.soon{background:#E6EDF2;color:#3B4C58}
.base dl{margin:.5rem 0 0;font-size:.82rem;color:var(--mute);line-height:1.7}
.base dt{font-weight:700;color:var(--ink);float:left;clear:left;width:4.6em}
.base dd{margin:0 0 .2rem 4.6em}
.base.okinawa{border-top:5px solid var(--blue)}
.base.honshu{border-top:5px solid var(--green)}

/* 人 */
.people{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1rem 0}
.people img{border-radius:14px;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top}
.team img{border-radius:var(--radius);width:100%;aspect-ratio:3/2;object-fit:cover}
figcaption.c{font-size:.74rem;color:var(--mute);margin-top:.3rem}

/* GUIDE帯 */
.band{background:#1A2332;color:#fff;border-radius:var(--radius);padding:1.4rem 1.4rem}
.band h3{font-size:1.15rem}
.band p{color:#D5E1E8;margin:.4rem 0 .9rem;font-size:.9rem}
.band .btn-line{background:transparent;color:#fff;border-color:#fff}
.band .btn-line:hover{background:rgba(255,255,255,.12)}

/* NAP・表 */
table.nap,table.price{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff;border-radius:var(--radius);overflow:hidden}
table.nap th,table.nap td,table.price th,table.price td{border:1px solid var(--line);padding:.65rem .8rem;text-align:left;vertical-align:top}
table.nap th{background:var(--green-soft);width:8.5rem;white-space:nowrap}
table.price th{background:var(--green-soft)}
.scroll{overflow-x:auto}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0}
.chip{background:#fff;border:1.5px solid var(--green);color:var(--green-ink);border-radius:999px;padding:.15rem .9rem;font-weight:700;font-size:.85rem}
.stat{border:2px dashed var(--green);border-radius:var(--radius);padding:1rem 1.2rem;background:#fff;color:var(--mute);font-size:.88rem}
.stat b{color:var(--ink)}
.note{background:var(--gold-soft);border-left:5px solid var(--gold);border-radius:0 12px 12px 0;padding:.7rem 1rem;font-size:.86rem;margin:1rem 0}
.crumb{font-size:.76rem;color:var(--mute);padding:.7rem 0}
.crumb a{color:var(--mute)}

/* FAQ */
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;margin:.6rem 0;padding:.2rem 1rem}
.faq summary{cursor:pointer;font-weight:700;padding:.7rem 0;list-style:none;position:relative;padding-right:1.6rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:.55rem;font-size:1.3rem;color:var(--cta)}
.faq details[open] summary::after{content:"−"}
.faq p{color:var(--mute);margin:0 0 .8rem;font-size:.92rem}

/* フッター */
footer.site{background:#1A2332;color:#D5E1E8;padding:2.4rem 0 2rem;font-size:.84rem}
footer.site a{color:#fff}
footer.site .cols{display:grid;gap:1.4rem}
footer.site h4{margin:0 0 .4rem;color:#fff;font-size:.9rem}
footer.site .purpose{font-weight:700;color:var(--green);margin-bottom:.6rem}
footer.site .legal{border-top:1px solid #2F3D52;margin-top:1.4rem;padding-top:1rem;font-size:.74rem;color:#A9BAC5;line-height:1.7}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin:.25rem 0}

/* 固定CTAバー */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:3px solid var(--blue);display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:.6rem .6rem calc(.6rem + env(safe-area-inset-bottom,0px))}
.cta-bar .btn{min-height:3.2rem}

@media (min-width:1100px){
  .pc-nav{display:flex;gap:.1rem}
  .sp-menu{display:none}
  .fs{margin-left:.6rem}
}
@media (min-width:760px){
  .hero{padding:3.4rem 0 3.8rem}
  .hero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:2.4rem}
  .hero h1{font-size:2.3rem}
  .facts{grid-template-columns:repeat(3,1fr)}
  .grid.g2{grid-template-columns:repeat(2,1fr)}
  .grid.g3{grid-template-columns:repeat(3,1fr)}
  .wish{grid-template-columns:1fr 1fr;gap:2.4rem}
  .steps{grid-template-columns:repeat(2,1fr)}
  .story{grid-template-columns:repeat(4,1fr)}
  .people{grid-template-columns:repeat(2,1fr);max-width:32rem}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
  footer.site .cols{grid-template-columns:1.2fr 1fr 1fr}
  section{padding:4.2rem 0}
  h2.t{font-size:1.65rem}
}
@media (max-width:759px){
  header.site .wrap>.fs{display:none}
  .fs-in-menu{display:flex}
  .brand small{display:none}
  .brand b{font-size:.86rem;white-space:nowrap}
  .brand img{width:2.2rem}
  header.site .wrap{gap:.5rem}
  .fs button{padding:.1rem .4rem;min-width:1.7rem}
  .sp-menu summary{padding:.2rem .5rem;font-size:.74rem}
  .facts{margin-top:1rem}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.base h3{word-break:keep-all;overflow-wrap:anywhere}
.base h3 .legal{display:block;font-size:.8rem;font-weight:500;color:var(--mute)}
.base .ph.alt{object-position:88% 78%}

.nb{white-space:nowrap}
.hero .tagline{font-size:1.1rem;font-weight:700;color:#fff;margin-top:.2rem}

/* ===== 記事・地域ページ（援護射撃コンテンツ用） ===== */
.page-hero{background:var(--green-soft);padding:2rem 0 1.6rem;border-bottom:3px solid var(--green)}
.page-hero h1{font-size:1.45rem;text-wrap:balance}
.page-hero .lead{margin-top:.6rem}
.article{max-width:46rem;margin:0 auto}
.article h2{font-size:1.25rem;margin:2.2rem 0 .6rem;padding-left:.7rem;border-left:6px solid var(--green)}
.article h3{font-size:1.05rem;margin:1.4rem 0 .4rem}
.article p{color:#2A3644}
.article ul,.article ol{padding-left:1.3rem;color:#2A3644}
.article li{margin:.35rem 0}
.summary{background:#fff;border:2px solid var(--green);border-radius:var(--radius);padding:1rem 1.2rem;margin:1.2rem 0}
.summary b.t{display:block;color:var(--green-ink);margin-bottom:.3rem}
.toc{background:var(--green-soft);border-radius:14px;padding:.8rem 1.1rem;margin:1.2rem 0;font-size:.9rem}
.toc ol{margin:.3rem 0 0;padding-left:1.2rem}
.toc a{color:var(--ink)}
.sources{font-size:.82rem;color:var(--mute);border-top:1px solid var(--line);margin-top:2rem;padding-top:.8rem}
.sources li{margin:.2rem 0}
.sources a{color:var(--mute)}
.rel{display:grid;gap:.7rem;margin:1rem 0}
.rel a.card{padding:.8rem 1rem}
.rel a.card b{display:block}
.compare{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff}
.compare th,.compare td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left}
.compare th{background:var(--green-soft)}
.compare td.num{text-align:right;white-space:nowrap}
.compare tr.me td{background:#FFFBEA;font-weight:700}
.map{border:0;width:100%;height:16rem;border-radius:14px;margin:.8rem 0}
.disclaim{background:var(--gold-soft);border-left:5px solid var(--gold);border-radius:0 12px 12px 0;padding:.7rem 1rem;font-size:.84rem;margin:1.4rem 0;color:#4A3A12}
@media (min-width:760px){.page-hero h1{font-size:1.9rem}.rel{grid-template-columns:repeat(2,1fr)}}

/* ===== 2026.10 監査対応: コントラスト修正 ===== */
.article .band p{color:#D5E1E8}
.article .band h3{color:#fff}
.disclaim a{color:#0B5E80;font-weight:700}
figcaption,.story figcaption{color:#55636D}