/* こゆるり鍼灸院 ホームページ（ステージング）
   色と書体は karte-app の styles.css の :root トークンを正本にした UI 一式（homepage-ui-2026-11-15.html）の値。
   新しい色を作らない。例外は LINE のボタンの LINE ブランド色だけ。 */
:root{
  --page:#F7F4F1; --card:#FFFFFF; --ink:#351209; --muted:#765E58; --line:#E7E3E1; --soft:#EFEAE6;
  --gold:#C8A96E; --gold-ink:#8F7240; --accent:#C8967F; --accent-ink:#8F5640;
  --f-head:"Shippori Mincho",serif; --f-body:"Zen Kaku Gothic New",system-ui,sans-serif; --f-latin:"Cormorant Garamond",serif;
  --green:#06C755; /* LINE brand color, only for LINE buttons */
  --fs:16px; --fs-s:14px; --fs-l:20px; --fs-xl:30px; --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--page); color:var(--ink); font-family:var(--f-body); font-size:var(--fs); line-height:1.8;}
img{max-width:100%; display:block;}
.en{font-family:var(--f-latin); letter-spacing:.14em;}
h1,h2,h3,.logo .name,.pagetitle h1{font-family:var(--f-head);}
a{color:var(--gold-ink); text-decoration:none;}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold-ink); outline-offset:2px;}
button{font-family:inherit;}
.wrap{max-width:960px; margin:0 auto; padding:0 20px;}
.testbar{background:var(--ink); color:var(--page); font-size:13px; text-align:center; padding:6px 12px; font-family:sans-serif;}
header{position:sticky; top:0; z-index:10; background:rgba(247,244,241,.96); border-bottom:1px solid var(--line);}
.head-in{display:flex; align-items:center; gap:12px; padding:10px 20px; max-width:960px; margin:0 auto;}
.logo{display:flex; align-items:center; gap:10px; line-height:1.25; color:var(--ink);}
.logo img{width:44px; height:40px; object-fit:contain; border-radius:6px; background:#fff;}
.logo .name{font-size:var(--fs-l); font-weight:700; display:block;}
.logo .en{font-size:11px; color:var(--gold-ink); display:block;}
nav.desk{margin-left:auto; display:flex; gap:16px; font-size:var(--fs-s); flex-wrap:wrap;}
nav.desk a{color:var(--ink); padding:4px 2px; border-bottom:2px solid transparent;}
nav.desk a.on{color:var(--gold-ink); border-bottom-color:var(--gold-ink);}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; border-radius:999px; padding:10px 22px; font-size:var(--fs-s); text-align:center; border:1px solid var(--gold); cursor:pointer; background:#fff; color:var(--ink);}
.btn-gold{background:var(--gold); color:var(--ink); border-color:var(--gold); font-weight:700;}
.btn-line{background:#fff; color:var(--ink); border-color:var(--line);}
.btn-green{background:var(--green); color:#fff; border-color:var(--green);}
header .btn{padding:8px 16px;}
.hero{padding:44px 0 38px; text-align:center; background:linear-gradient(180deg,var(--page),var(--soft));}
.hero .en{color:var(--gold-ink); font-size:var(--fs-s);}
.hero h1{font-size:var(--fs-xl); font-weight:700; line-height:1.5; margin:14px 0 10px;}
.hero p.lead{color:var(--muted); max-width:560px; margin:0 auto;}
.hero .from{margin-top:10px; color:var(--gold-ink); font-size:var(--fs-s);}
.pagetitle{padding:40px 0 6px; text-align:center;}
.pagetitle h1{font-size:26px; font-weight:700;}
.pagetitle .en{color:var(--gold-ink); font-size:12px; display:block;}
.chips{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:18px 0 6px;}
.chip{border:1px solid var(--gold); color:var(--gold-ink); border-radius:999px; padding:3px 14px; font-size:var(--fs-s); background:var(--card);}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px;}
.mascot{margin:24px auto 0; width:118px; height:118px; border-radius:50%; object-fit:cover; object-position:50% 30%; border:2px solid var(--gold);}
.leaf{text-align:center; color:var(--gold); font-size:18px; margin:24px 0 4px;}
section{padding:30px 0;}
h2{font-size:22px; text-align:center; font-weight:700;}
h2 .en{display:block; font-size:12px; color:var(--gold-ink); font-weight:500;}
.sub{text-align:center; color:var(--muted); font-size:var(--fs-s); margin-top:6px;}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 18px;}
.card h3{font-size:17px; margin-bottom:6px;}
.card p{font-size:var(--fs-s); color:var(--muted);}
.card .photo{border-radius:10px; margin-bottom:12px; aspect-ratio:4/3; width:100%; object-fit:cover;}
.price{font-size:var(--fs-l); color:var(--gold-ink); margin-top:8px;}
.price small{font-size:13px;}
.for{font-size:var(--fs-s); color:var(--gold-ink); margin-top:6px;}
.first-entry{background:var(--card); border:1.5px solid var(--gold); border-radius:var(--radius); padding:20px; max-width:720px; margin:20px auto 0; text-align:center;}
.first-entry h3{font-size:18px;}
.first-entry p{font-size:var(--fs-s); color:var(--muted);}
.first-entry table.price{max-width:480px; margin:10px auto 0;}
.director-strip{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; max-width:640px; margin:22px auto 0; display:flex; gap:16px; align-items:center;}
.director-strip .face{flex:0 0 72px; width:72px; height:72px; border-radius:50%; border:1.5px solid var(--gold); object-fit:cover; object-position:50% 25%;}
.director-strip h3{font-size:16px;}
.director-strip p{font-size:var(--fs-s); color:var(--muted);}
.director-strip p.more{margin-top:4px;}
.note{font-size:13px; color:var(--muted); text-align:center; margin-top:12px;}
.season{background:var(--card); border:1px solid var(--gold); border-radius:var(--radius); padding:22px; max-width:640px; margin:22px auto 0; display:flex; gap:16px; align-items:flex-start;}
.season .face{flex:0 0 64px; width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:50% 30%; border:1.5px solid var(--gold);}
.season h3{font-size:17px;}
.season p{font-size:var(--fs-s); color:var(--muted);}
.quiz{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px 20px; max-width:640px; margin:22px auto 0; text-align:center;}
.quiz .q{font-size:17px; font-weight:700; margin-bottom:14px;}
.quiz .opts{display:grid; gap:10px;}
.quiz .opts button{font-size:var(--fs); min-height:44px; padding:12px; border-radius:10px; border:1px solid var(--gold); background:var(--page); color:var(--ink); cursor:pointer; width:100%;}
.quiz .result .menu{font-size:var(--fs-l); color:var(--gold-ink); font-weight:700; margin:8px 0;}
.quiz .why,.quiz .rprice{font-size:var(--fs-s); color:var(--muted);}
.quiz .back{margin-top:12px; font-size:13px;}
.quiz .back button{background:none; border:none; color:var(--gold-ink); cursor:pointer; font-size:13px; min-height:44px; padding:0 8px;}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:22px;}
.step{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 14px; text-align:center;}
.step .num{font-family:var(--f-latin); font-size:24px; color:var(--gold-ink);}
.step h3{font-size:15px; margin:4px 0;}
.step p{font-size:13px; color:var(--muted); line-height:1.6;}
.line-sec{background:var(--soft); border-radius:var(--radius); padding:26px 22px; text-align:center; max-width:720px; margin:0 auto;}
.line-sec.top{margin-top:18px;}
.line-sec h3{font-size:19px; margin-bottom:6px;}
.line-sec p{font-size:var(--fs-s); color:var(--muted); max-width:520px; margin:0 auto 16px;}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px;}
.photo-ph{border:1.5px dashed var(--gold); border-radius:var(--radius); min-height:170px; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; color:var(--gold-ink); font-size:var(--fs-s); background:var(--card); text-align:center; padding:12px;}
figure.photo{margin:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
figure.photo img{width:100%; height:100%; max-height:420px; object-fit:cover;}
figure.photo figcaption{font-size:13px; color:var(--muted); padding:8px 12px;}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px;}
.gallery figure.photo img{aspect-ratio:3/4; height:auto;}
.creds{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.quote{font-family:var(--f-head); font-size:17px; color:var(--ink); margin:10px 0 4px;}
table.info{width:100%; border-collapse:collapse; font-size:var(--fs-s);}
table.info th, table.info td{padding:8px 6px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top;}
table.info th{width:34%; color:var(--gold-ink); font-weight:700;}
.news{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; max-width:720px; margin:22px auto 0; font-size:var(--fs-s);}
.news .date{color:var(--gold-ink); margin-right:10px;}
.faqs{max-width:720px; margin:26px auto 0;}
details.faq{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px; margin-top:10px;}
details.faq summary{cursor:pointer; min-height:28px;}
details.faq p{font-size:var(--fs-s); color:var(--muted); margin-top:6px;}
.menurow{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-top:14px;}
.menurow h3{font-size:18px;}
.menurow .desc{font-size:var(--fs-s); color:var(--muted); margin:6px 0 10px;}
table.price{width:100%; border-collapse:collapse; font-size:var(--fs-s);}
table.price td{padding:7px 4px; border-bottom:1px dotted var(--line);}
table.price td:last-child{text-align:right; color:var(--gold-ink); white-space:nowrap;}
.interest{display:grid; gap:10px; max-width:440px; margin:16px auto 0;}
.interest button{font-size:var(--fs); min-height:44px; padding:13px; border-radius:10px; border:1px solid var(--gold); background:var(--card); color:var(--ink); cursor:pointer;}
.interest button.sel{background:var(--green); color:#fff; border-color:var(--green);}
.interest button.sel::before{content:"✓ ";}
footer{border-top:1px solid var(--line); margin-top:24px; padding:26px 0 96px; text-align:center; font-size:var(--fs-s); color:var(--muted);}
footer p + p{margin-top:8px;}
footer .en{color:var(--gold-ink);}
.mnav{display:none;}
.sticky-cta{display:none;}
@media (max-width:720px){
  nav.desk{display:none;}
  .head-in .btn{margin-left:auto;}
  .cards{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .two{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr 1fr;}
  .hero h1{font-size:25px;}
  .mnav{display:flex; gap:4px; overflow-x:auto; padding:8px 12px; border-bottom:1px solid var(--line); background:var(--page);}
  .mnav a{white-space:nowrap; font-size:13px; color:var(--ink); padding:5px 10px; border-radius:999px; border:1px solid var(--line); background:var(--card);}
  .mnav a.on{color:#fff; background:var(--gold-ink); border-color:var(--gold);}
  .sticky-cta{display:flex; position:fixed; left:0; right:0; bottom:0; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(247,244,241,.97); border-top:1px solid var(--line); z-index:20;}
  .sticky-cta .btn{flex:1;}
}
@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto !important; transition:none !important;} }