/* 治療院みはら 詳細ページ 共通スタイル（GEO最適化・ブランド配色） */
:root{
  --teal:#246b6b; --green:#7a9c45; --ink:#2b2b2b; --muted:#555;
  --cream:#f7f3e8; --cream2:#f0e9d6; --line:#e4ddc9; --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--cream);
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  line-height:1.9; font-size:16px; -webkit-font-smoothing:antialiased;
}
a{color:var(--teal)}
.wrap{max-width:860px; margin:0 auto; padding:0 20px}

/* ヘッダー・ナビ */
header.site{background:var(--white); border-bottom:1px solid var(--line)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; flex-wrap:wrap; gap:8px}
header.site .brand{font-size:20px; font-weight:700; color:var(--teal); text-decoration:none; letter-spacing:.02em}
nav.site a{display:inline-block; margin:2px 10px 2px 0; font-size:13px; color:var(--muted); text-decoration:none}
nav.site a:hover{color:var(--teal)}

/* パンくず */
.crumbs{font-size:12px; color:var(--muted); padding:12px 0}
.crumbs a{text-decoration:none}

/* 本文 */
main{padding:8px 0 56px}
.hero{padding:28px 0 8px}
.hero h1{font-size:30px; line-height:1.4; color:var(--teal); margin:0 0 10px}
.lead{font-size:17px; color:var(--muted); margin:0}
article section{margin-top:36px; padding-top:28px; border-top:1px solid var(--line)}
article section:first-of-type{border-top:none}
h2{font-size:21px; color:var(--ink); margin:0 0 14px}
h3{font-size:16px; color:var(--teal); margin:22px 0 8px}
p{margin:0 0 14px}
strong{color:var(--ink)}

/* 表（GEO：spec table） */
table{width:100%; border-collapse:collapse; background:var(--white); margin:16px 0; font-size:14px}
th,td{border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top}
thead th, th[scope=row]{background:var(--cream2); font-weight:600; color:var(--ink)}
th[scope=row]{width:32%}

/* 注記・ガードレール */
.note{font-size:13px; color:var(--muted); background:var(--white); border:1px solid var(--line); border-left:3px solid var(--green); padding:12px 14px; margin:16px 0}

/* CTA */
.cta{margin:34px 0 0; text-align:center}
.btn{display:inline-block; margin:6px; padding:12px 22px; border-radius:6px; text-decoration:none; font-size:14px}
.btn-primary{background:var(--teal); color:#fff}
.btn-outline{border:1px solid var(--teal); color:var(--teal)}

/* フッター */
footer.site{background:#22312f; color:rgba(255,255,255,.85); margin-top:40px}
footer.site .wrap{padding:30px 20px; text-align:center; font-size:13px}
footer.site a{color:rgba(255,255,255,.9)}
footer.site .fname{font-size:16px; color:#fff; margin:8px 0}
footer.site address{font-style:normal; line-height:1.8}

@media(max-width:640px){
  .hero h1{font-size:24px}
  th[scope=row]{width:40%}
}

/* ロゴ・画像・SNS（追加） */
header.site .brand{display:inline-flex; align-items:center; gap:10px}
header.site .brand img.logo{height:34px; width:auto; display:block}
.hero-img{width:100%; max-height:300px; object-fit:cover; border-radius:8px; margin:8px 0 4px}
figure{margin:16px 0}
figure img{width:100%; border-radius:8px; display:block}
figure figcaption{font-size:12px; color:var(--muted); margin-top:6px; text-align:center}
.portrait{float:right; width:200px; max-width:40%; border-radius:8px; margin:0 0 14px 18px}
footer.site .sns{margin:14px 0}
footer.site .sns a{display:inline-block; margin:0 8px; color:rgba(255,255,255,.9); text-decoration:none; font-size:13px}
footer.site .sns a:hover{color:#fff; text-decoration:underline}
@media(max-width:640px){ .portrait{float:none; width:60%; max-width:60%; margin:0 auto 14px; display:block} }

/* ホーム・カード・料金・凡例（追加2） */
.band{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.home-hero{background:linear-gradient(180deg,#eef3f1,#f7f3e8); text-align:center; padding:48px 20px 40px}
.home-hero h1{font-size:28px; color:var(--teal); margin:0 0 12px; line-height:1.5}
.home-hero p{max-width:640px; margin:0 auto; color:var(--muted)}
.home-hero .btn{margin-top:18px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:18px 0}
.card{background:var(--white); border:1px solid var(--line); border-radius:8px; padding:18px; text-decoration:none; color:var(--ink); display:block}
.card:hover{border-color:var(--teal)}
.card h3{margin:0 0 6px; color:var(--teal); font-size:16px}
.card p{margin:0; font-size:14px; color:var(--muted)}
.price-amount{font-size:18px; font-weight:700; color:var(--ink); white-space:nowrap}
.legal{margin:12px 0 0}
.legal a{display:inline-block; margin:0 8px; font-size:12px; color:rgba(255,255,255,.85); text-decoration:none}
.legal a:hover{text-decoration:underline}
.pay{display:inline-block; margin:6px 8px 6px 0; padding:12px 22px; border-radius:6px; background:#635bff; color:#fff; text-decoration:none; font-size:14px; font-weight:600}
.pay.paypal{background:#003087}
.section-note{font-size:12px;color:var(--muted)}

/* 柔らかい和柄・丸み・キャラクター（追加3） */
body{
  background-color:var(--cream);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='16'%3E%3Cpath d='M0 8 Q20 0 40 8 T80 8' fill='none' stroke='%237a9c45' stroke-opacity='0.07' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size:80px 16px;
}
.home-hero{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='16'%3E%3Cpath d='M0 8 Q20 0 40 8 T80 8' fill='none' stroke='%23246b6b' stroke-opacity='0.10' stroke-width='1.4'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#eef3f1,#f7f3e8);
  background-size:80px 16px, cover;
  border-radius:0 0 26px 26px;
}
.card{border-radius:14px; box-shadow:0 2px 10px rgba(60,50,30,0.05); transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(60,50,30,0.09)}
.btn, .pay{border-radius:999px}
.hero-img{border-radius:16px}
.note{border-radius:10px}
header.site{border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(122,156,69,0.08)}

/* キャラクター（ニョロ） */
.hero-flex{display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap}
.hero-flex .hero-text{max-width:560px; text-align:left}
.mascot{width:130px; height:auto; flex:0 0 auto; filter:drop-shadow(0 6px 10px rgba(60,50,30,0.12))}
figure.mascot-fig{margin:18px 0 0; text-align:center}
figure.mascot-fig img{width:150px; height:auto; filter:drop-shadow(0 6px 10px rgba(60,50,30,0.12))}
figure.mascot-fig figcaption{font-size:12px; color:var(--muted); margin-top:6px}
@media(max-width:640px){
  .hero-flex .hero-text{text-align:center}
  .mascot{width:100px}
}

/* ニョロ 区切りアクセント（追加4） */
.nyoro-accent{margin:14px 0 -10px}
.nyoro-accent img{width:76px; height:auto; filter:drop-shadow(0 4px 7px rgba(60,50,30,0.12))}
.nyoro-accent.c{text-align:center}
.nyoro-accent.r{text-align:right}
.nyoro-accent.l{text-align:left}
@media(max-width:640px){ .nyoro-accent img{width:64px} .nyoro-accent{text-align:center} }

/* み〜ちゃんキャラ（プロフィール アバター） */
.hero-flex img[src*="miichan"]{border-radius:20px; background:#fff; box-shadow:0 4px 14px rgba(60,50,30,0.10)}

/* 本人写真＋キャプション（つかみ） */
.portrait-fig{float:right; width:210px; max-width:44%; margin:0 0 14px 18px}
.portrait-fig img{width:100%; border-radius:12px; display:block; box-shadow:0 4px 12px rgba(60,50,30,0.10)}
.portrait-fig figcaption{font-size:11px; color:var(--muted); margin-top:6px; line-height:1.7}
@media(max-width:640px){ .portrait-fig{float:none; width:70%; max-width:70%; margin:0 auto 14px} }

/* み〜ちゃん イラスト（実はこんなキャラ） */
.art-fig{clear:both; margin:22px auto 4px; max-width:420px; text-align:center}
.art-fig img{width:100%; border-radius:16px; display:block; box-shadow:0 6px 18px rgba(60,50,30,0.14)}
.art-fig figcaption{font-size:13px; color:var(--muted); margin-top:8px}

/* ニョロ 相棒紹介ブロック */
.nyoro-intro{display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:var(--white); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:22px 0 4px; box-shadow:0 2px 10px rgba(60,50,30,0.05)}
.nyoro-intro img{width:104px; height:auto; flex:0 0 auto; filter:drop-shadow(0 4px 7px rgba(60,50,30,0.12))}
.nyoro-intro p{margin:0; flex:1 1 240px; font-size:14px; line-height:1.85}
