/* ==============================
   八綱療院 別所｜共通スタイル
   配色はここだけ変えれば全ページに効く
   ============================== */
:root {
  --green:      #7B9A5B;   /* 抹茶グリーン（見出し・ボタン） */
  --green-dark: #5E7A43;   /* 濃い抹茶（ホバー・線） */
  --green-pale: #EEF3E7;   /* 薄い抹茶（背景帯） */
  --brown:      #4A3728;   /* こげ茶（本文の強調・フッター） */
  --brown-pale: #F5F1EC;   /* 薄い茶（表の見出し） */
  --bg:         #FAFAF7;   /* 生成り（ページ背景） */
  --ink:        #333333;   /* 本文 */
  --sub:        #777777;   /* 補足 */
  --line:       #DDDDD5;   /* 罫線 */
  --w:          960px;     /* コンテンツ幅 */
}

/* ---------- リセット ----------
   最低文字サイズ 22px（1rem）。これより小さい指定はしない
----------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:22px;scroll-behavior:smooth}
body{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-dark)}
ul{list-style:none}

/* ---------- 共通レイアウト ---------- */
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
section{padding:48px 0}
section + section{border-top:1px solid var(--line)}
.sec-title{
  font-size:1.5rem;color:var(--brown);letter-spacing:.06em;
  margin-bottom:24px;padding-bottom:10px;
  border-bottom:2px solid var(--green);
}
.sec-title small{display:block;font-size:.8rem;line-height:1.4;color:var(--green);letter-spacing:.18em;font-weight:normal;margin-top:4px}
p + p{margin-top:1em}
.lead{font-size:1.05rem}
.note{font-size:1rem;color:var(--sub)}

/* ---------- ヘッダー ----------
   1段目：院名（左）・電話（右）／2段目：ナビ（PCのみ）
------------------------------ */
.site-header{background:var(--green-dark);position:sticky;top:0;z-index:40;box-shadow:0 2px 6px rgba(0,0,0,.12)}
/* 固定ヘッダーの分だけ、ページ内リンクの着地位置を下げる */
html{scroll-padding-top:140px}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 24px}
.logo{font-size:1.1rem;font-weight:bold;color:#fff;text-decoration:none;letter-spacing:.06em;line-height:1.4;white-space:nowrap}
/* 英字の副題は飾り扱い：最低22pxの例外。漢字の院名と同じくらいの幅に合わせる */
.logo small{display:block;font-size:.68rem;color:#fff;letter-spacing:.04em;font-weight:600;opacity:.9;margin-top:2px;white-space:nowrap}
.tel-head{display:none;font-weight:bold;color:#fff;text-decoration:none;font-size:1.3rem;white-space:nowrap}
.gnav{display:none;justify-content:center;flex-wrap:wrap;gap:6px 28px;padding:8px 24px 12px;border-top:1px solid rgba(255,255,255,.35)}
.gnav a{text-decoration:none;color:#fff;font-weight:bold;white-space:nowrap}
.gnav a:hover{text-decoration:underline;text-underline-offset:6px}

/* ---------- スマホのメニュー（三本線） ---------- */
.menu-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:2px solid rgba(255,255,255,.7);border-radius:8px;
  color:#fff;padding:8px 10px 6px;cursor:pointer;font:inherit;flex:none;
}
.menu-icon{display:flex;flex-direction:column;gap:5px;width:30px}
.menu-icon i{display:block;height:3px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.menu-label{font-size:1rem;line-height:1;font-weight:bold;white-space:nowrap}
.is-open .menu-icon i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.is-open .menu-icon i:nth-child(2){opacity:0}
.is-open .menu-icon i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* スマホ：開いたときだけ縦並びで表示 */
@media (max-width:767px){
  .header-top{padding:10px 16px}
  .logo{font-size:1.2rem}
  .logo small{display:none}   /* 英字の副題は幅が足りないのでスマホでは隠す */
  .is-open .gnav{
    display:flex;flex-direction:column;gap:0;padding:0;
    max-height:calc(100vh - 90px);overflow-y:auto;
  }
  .is-open .gnav a{padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.25);text-align:left}
  .is-open .gnav a::after{content:"›";float:right;opacity:.7}
  .is-open .gnav .gnav-tel{background:var(--brown);text-align:center;font-size:1.2rem}
  .is-open .gnav .gnav-tel::after{content:none}
}

/* ---------- ヒーロー（トップ） ---------- */
.hero{background:var(--green-pale);text-align:center;padding:40px 0 36px}
.hero .ph{background:#ddd;aspect-ratio:16/9;max-width:720px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;color:#888}
.hero h1{font-size:1.9rem;color:var(--brown);letter-spacing:.1em;line-height:1.3}
.hero .copy{font-size:1rem;letter-spacing:.25em;color:var(--green-dark);margin:8px 0 6px}
.hero .meta{font-size:1rem;color:var(--sub)}

/* ---------- ヒーロー スライドショー（CSSのみ・3枚固定） ----------
   枚数を変えるときは ①HTMLの枚数 ②animation の秒数 ③nth-child の delay を合わせる
   目安：1枚5秒 → 3枚なら 15s、delay は 0s / 5s / 10s
--------------------------------------------------------------- */
.hero-slides{position:relative;aspect-ratio:16/9;max-width:720px;margin:0 auto 24px;overflow:hidden;background:#ddd}
.hero-slides > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:hero-fade 15s infinite}
.hero-slides > :nth-child(1){animation-delay:0s}
.hero-slides > :nth-child(2){animation-delay:5s}
.hero-slides > :nth-child(3){animation-delay:10s}
.hero-slides .ph{display:flex;align-items:center;justify-content:center;color:#888;margin:0}
@keyframes hero-fade{
  0%{opacity:0} 6%{opacity:1} 33%{opacity:1} 40%{opacity:0} 100%{opacity:0}
}
/* 動きが苦手な設定の人には1枚目を固定表示 */
@media (prefers-reduced-motion:reduce){
  .hero-slides > *{animation:none}
  .hero-slides > :first-child{opacity:1}
}

/* ---------- ボタン ---------- */
.btn{
  display:block;text-align:center;max-width:360px;margin:20px auto 0;
  padding:14px 20px;border-radius:6px;text-decoration:none;font-weight:bold;
  background:var(--green);color:#fff;font-size:1.1rem;letter-spacing:.05em;
}
.btn:hover{background:var(--green-dark)}
.btn.tel:hover{background:var(--brown)}
.btn.sub{background:#fff;color:var(--green-dark);border:1px solid var(--green);font-weight:normal;font-size:1rem}
.btn.tel{background:var(--green-dark);font-size:1.25rem;white-space:nowrap;letter-spacing:0;padding:14px 8px;max-width:none}
@media (min-width:768px){.btn.tel{max-width:420px;font-size:1.35rem}}

/* ---------- 地図 ---------- */
.map{display:block;width:100%;aspect-ratio:4/3;border:0;border-radius:6px}
.map-wide{aspect-ratio:16/9;margin-bottom:24px}

/* ---------- 料金・時間の表 ---------- */
table{width:100%;border-collapse:collapse;font-size:1rem}
th,td{border:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top}
th{background:var(--brown-pale);color:var(--brown);font-weight:bold;width:38%}
td .small{display:block;font-size:1rem;color:var(--sub);margin-top:2px}
.price-big{font-size:1.6rem;font-weight:bold;color:var(--brown)}

/* ---------- 2カラム（PCのみ） ---------- */
.two{display:grid;gap:32px;align-items:start}  /* start＝写真が隣の文章の高さに引っ張られない */

/* ---------- ステップ ---------- */
.steps{display:grid;gap:10px;list-style:none;margin:0 0 28px;padding:0}
.step{display:flex;align-items:center;gap:14px;border:1px solid var(--line);background:#fff;padding:14px 16px;border-radius:6px}
.step b{flex:none;width:2.2em;height:2.2em;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem}

.sub-title{font-size:1.1rem;color:var(--brown);margin-bottom:12px}
.info-grid{display:grid;gap:16px}
.info-grid .box{height:100%}
.list{list-style:disc;padding-left:1.4em;margin:.6em 0 1em}
.list li + li{margin-top:.4em}

/* ---------- FAQ ---------- */
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;padding:14px 32px 14px 4px;font-weight:bold;position:relative;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"＋";position:absolute;right:6px;top:12px;color:var(--green)}
details[open] summary::after{content:"−"}
details .a{padding:0 4px 16px;color:var(--ink)}

/* ---------- お知らせ ---------- */
.news-list li{border-bottom:1px solid var(--line);padding:12px 4px;display:flex;gap:16px;flex-wrap:wrap}
.news-list .d{color:var(--sub);font-size:1rem;flex:none}
.news-list a{text-decoration:none;color:var(--ink)}

/* ---------- 写真 ---------- */
.photo{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px}
.photo-stack{display:grid;gap:12px}
figure{margin:0}
figcaption{font-size:1rem;color:var(--sub);margin-top:6px}
.card-img{display:block;width:calc(100% + 40px);margin:-20px -20px 16px;aspect-ratio:16/9;object-fit:cover;border-radius:6px 6px 0 0}

/* ---------- 木の看板（縦長の飾り） ---------- */
.about-intro{display:grid;gap:24px;align-items:center}
.wood-sign{width:110px;margin:0 auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18))}
@media (min-width:768px){
  .about-intro{grid-template-columns:1fr 130px}
  .wood-sign{width:130px}
}

.voice{margin:1.2em 0;padding:16px 20px;background:var(--green-pale);border-radius:6px;color:var(--brown)}
.voice cite{display:block;text-align:right;font-style:normal;color:var(--sub);margin-top:6px}
.voice cite::before{content:"— "}

/* ---------- カード ---------- */
.cards{display:grid;gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:20px}
.card h3{color:var(--brown);font-size:1.15rem;margin-bottom:8px}

/* ---------- 強調ボックス ---------- */
.box{background:#fff;border:1px solid var(--line);padding:16px 20px;border-radius:6px}
.box.rec{border-color:var(--brown)}
.box h3{font-size:1.1rem;color:var(--brown);margin-bottom:6px}

/* ---------- フォーム ---------- */
.form-row{margin-bottom:18px}
.form-row label{display:block;font-weight:bold;margin-bottom:6px;font-size:1rem}
.form-row label i{font-style:normal;font-size:1rem;color:#fff;background:var(--brown);padding:1px 6px;border-radius:3px;margin-left:8px;vertical-align:2px}
.form-row input,.form-row textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:4px;font:inherit;background:#fff}
.form-row textarea{min-height:140px}

/* ロボット対策の隠し欄（人には見えない） */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent-ok,.sent-error,.sent-tel{margin-bottom:24px}
.field-msg{color:#b04a3a;font-weight:bold;margin-top:6px}
.form-row input[aria-invalid=true]{border-color:#b04a3a;background:#FFF6F4}

/* ---------- フッター ---------- */
.site-footer{background:var(--brown);color:#EDE6DD;padding:36px 0 90px;font-size:1rem;text-align:center}
.site-footer .fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-bottom:22px}
.site-footer .fnav a{color:#EDE6DD;text-decoration:none}
.site-footer .copy{font-size:1rem;color:#B8AA98;margin-top:16px}

/* ---------- スマホ固定バー ---------- */
.fixbar{position:fixed;left:0;right:0;bottom:0;display:flex;background:#fff;z-index:50}
.fixbar a{flex:1;text-align:center;padding:14px 6px;text-decoration:none;font-weight:bold;color:var(--brown)}
.fixbar a{color:#fff}
.fixbar a:first-child{background:var(--green-dark)}   /* 電話：ヘッダーと同じ濃い抹茶 */
.fixbar a:last-child{background:var(--brown)}         /* アクセス：こげ茶 */

/* ---------- 作業用マーカー（本番前に .todo を全部消す） ---------- */
.todo{background:#FFF3B0;color:#7a5a00;padding:2px 6px;border-radius:3px;font-size:1rem;font-weight:normal}

/* ---------- PC ---------- */
@media (min-width:768px){
  .tel-head,.gnav{display:flex}
  .menu-btn,.gnav .sp-only{display:none}
  .fixbar{display:none}
  .site-footer{padding-bottom:36px}
  .two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .two-3-2{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards.three{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
  .step{flex-direction:column;text-align:center;justify-content:center;padding:18px 12px}
  /* 服装・時間・施術のあと：横幅いっぱいに縦3段。見出しを左、本文を右に */
  .info-grid .box{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start;padding:20px 28px}
  .info-grid .box h3{margin:0}
  .hero h1{font-size:2.6rem}
  .hero .copy{font-size:1.1rem}
  section{padding:64px 0}
  .sec-title{font-size:1.7rem}
}

.box-body p + p{margin-top:.8em}

/* 施術→院長ページ「治療についての考え方」への案内 */
.to-thinking{margin-top:32px;padding:24px;background:var(--green-pale);border-radius:8px;text-align:center}
.to-thinking p{margin-bottom:12px}
.photo.portrait{aspect-ratio:3/4;object-position:center top}

/* お知らせ・コラム */
.news-list .tag{flex:none;font-size:.8rem;line-height:1;padding:6px 10px;border-radius:4px;background:var(--brown-pale);color:var(--brown);align-self:flex-start;margin-top:.45em}
.news-list .tag-col,.col-meta .tag-col{background:var(--green-pale);color:var(--green-dark)}
.column{max-width:760px}
.col-meta{display:flex;gap:12px;align-items:center;color:var(--sub);font-size:1rem}
.col-meta .tag{font-size:.8rem;padding:6px 10px;border-radius:4px}
.col-title{font-size:1.5rem;color:var(--brown);margin:12px 0 28px;line-height:1.5;padding-bottom:16px;border-bottom:1px solid var(--green)}
.column p+p{margin-top:1em}
.col-list{margin:1em 0 1em 1.2em}
.col-list li{margin:.3em 0}
.col-end{font-weight:bold;color:var(--brown);margin-top:1.4em}
.column .note{margin-top:1.6em}
.col-sign{text-align:right;margin-top:2em}
.col-more{margin-top:40px;padding:24px;background:var(--green-pale);border-radius:8px;display:grid;gap:12px}
.news-list a{color:var(--green-dark);text-decoration:underline;text-underline-offset:4px}
/* タブレット幅：メニュー6項目を1行に収める */
@media (min-width:768px) and (max-width:1023px){.gnav{gap:6px 16px;padding-inline:12px;font-size:.9rem}}

/* お知らせ一覧：押すと開く本文 */
.news-list details,.news-list details:first-of-type{flex:1 1 12em;min-width:0;border:0}
.news-list summary{cursor:pointer;list-style:none;padding:0;font-weight:normal;position:static;color:var(--green-dark);text-decoration:underline;text-underline-offset:4px}
.news-list summary::-webkit-details-marker{display:none}
.news-list summary::after{content:"＋";position:static;margin-left:.5em;text-decoration:none;display:inline-block;color:var(--green)}
.news-list details[open] summary::after{content:"－"}
.news-list details p{margin-top:10px;padding:14px 16px;background:var(--green-pale);border-radius:6px;font-size:.95rem;line-height:1.8}

/* 急ぎのお知らせの帯（js/notice.js で出す） */
.notice-bar{display:block;background:var(--brown);color:#fff;text-align:center;padding:12px 16px;font-weight:bold;line-height:1.6;text-decoration:none}
a.notice-bar::after{content:" ›";opacity:.8}
a.notice-bar:hover{text-decoration:underline;text-underline-offset:4px}