@charset "UTF-8";
/* =========================================================
   ABOUT（頭皮アートメイクとは？）  page-about.php 専用
   すべて .smp-about 配下にスコープ
   （ヘッダー・フッターへスタイルが漏れないようにしてある）
   ※ 旧ABOUTデザインのCSSは Git の initial commit に保存済み
   ========================================================= */
.smp-about{
  --green-deep:#2c4636; --green:#33503f; --green-soft:#46604f;
  --sage:#93a98e; --sage-deep:#7c9479; --terra:#b3705f;
  --greige:#e8e5dc; --greige-2:#f2f0e9; --paper:#ffffff;
  --ink:#2b2b29; --ink-soft:#5b5b54; --ink-faint:#8d8a7f;
  --line:#ded9cd; --line-strong:#cbc6b8; --line-green:#cdd6cd;
  --line-color:#06c755; --dark:#1c1c1a;
  --serif-en:"EB Garamond","Cormorant Garamond","Times New Roman",serif;
  --serif-jp:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --jp:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  interpolate-size:allow-keywords;
  background:var(--paper);
  font-family:var(--jp);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.8;
  letter-spacing:.01em;
  position:relative;
}
.smp-about *{box-sizing:border-box;}

/* ページ最上部のタイトル：改行防止のため 28px に縮小（このページのみ） */
.page .page_h2{font-size:28px;}

/* ページ最上部のリード（タイトルは他ページ共通の .page_h2 をそのまま使用） */
.page .about-lead{
  font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:11px; color:#5b5b54; line-height:1.4; letter-spacing:.01em; text-align:left; margin:12px 0 0;
}

/* section scaffold */
.smp-about .sec{padding:34px 22px; border-top:1px solid var(--line); scroll-margin-top:64px;}
.smp-about .sec-title{font-size:22px; font-weight:600; margin:0 0 12px; letter-spacing:.04em;
  font-family:var(--serif-jp); line-height:1.5; color:var(--ink);}
.smp-about .lead{font-size:13.5px; color:var(--ink-soft); margin:12px 0;}
.smp-about p{margin:11px 0; font-size:13.5px; line-height:1.95; color:var(--ink);}
.smp-about .fine{font-size:11.5px; color:var(--ink-faint); line-height:1.75;
  background:var(--greige-2); border-radius:9px; padding:12px 14px; margin:14px 0 0;}
/* 見出し（プロフィール／クリニック情報などのサブ見出し） */
.smp-about .sub-h3{margin:22px 0 4px; font-size:14.5px; font-weight:600; font-family:var(--serif-jp); color:var(--green-deep);}

/* image / media placeholder */
.smp-about .ph{
  position:relative; width:100%;
  background:var(--greige);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:#9a9182; font-size:10.5px; letter-spacing:.04em;
  background-image:
    radial-gradient(circle at 50% 42%, rgba(124,148,121,.16), transparent 60%),
    repeating-linear-gradient(45deg, rgba(203,198,184,.4) 0 9px, rgba(210,205,191,.4) 9px 18px);
  border-radius:12px; padding:10px; overflow:hidden;
}
.smp-about .ph span{background:rgba(255,255,255,.72); padding:4px 10px; position:relative; z-index:1; border-radius:5px; line-height:1.4; color:#7d7567;}
.smp-about .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.smp-about .ph.r43{aspect-ratio:4/3;}
.smp-about .ph.h120{height:130px;}

/* ---------- first view ---------- */
.smp-about .fv{padding:0 22px; margin-top:1rem;}
.smp-about .fv .ph{border-radius:16px;}
.smp-about .fv-body{padding:28px 22px 30px;}
.smp-about .fv-body h1{font-size:30px; font-weight:600; margin:4px 0 6px; font-family:var(--serif-jp); letter-spacing:.06em; color:var(--ink); line-height:1.45;}
.smp-about .fv-body .h-sub{font-size:13.5px; color:var(--ink-soft); margin:0 0 8px; line-height:1.9;}

/* ---------- 目次（アコーディオン） ---------- */
.smp-about .toc{margin:18px 0 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); overflow:hidden;}
.smp-about .toc summary{
  list-style:none; cursor:pointer; padding:16px 2px;
  font-family:var(--serif-jp); font-size:13.5px; font-weight:600; color:var(--green-deep);
  display:flex; align-items:center; justify-content:space-between;
}
.smp-about .toc summary::-webkit-details-marker{display:none;}
.smp-about .toc summary::after{content:"＋"; color:var(--sage-deep); font-size:16px; transition:transform .3s ease;}
.smp-about .toc[open] summary::after{transform:rotate(135deg);}
.smp-about .toc::details-content{
  height:0; overflow:hidden;
  transition:height .35s ease, content-visibility .35s allow-discrete;
}
.smp-about .toc[open]::details-content{height:auto;}
.smp-about .toc-grid{display:flex; flex-direction:column; gap:0; padding:0 2px 6px;}
.smp-about .toc-grid a{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; background:none; border:0; border-radius:0;
  border-top:1px solid var(--line);
  padding:13px 2px; font-size:12.5px; color:var(--green-deep);
  font-family:var(--serif-jp); line-height:1.45;
}
.smp-about .toc-grid .no{font-family:var(--serif-en); font-size:13px; color:var(--sage-deep); flex:none; width:20px;}
.smp-about .toc-grid .tx{flex:1; min-width:0;}
.smp-about .toc-grid .ar{font-family:var(--serif-en); color:var(--sage-deep); flex:none; opacity:.6;}

/* ---------- generic lists ---------- */
.smp-about .wlist{list-style:none; padding:0; margin:14px 0; display:flex; flex-direction:column; gap:8px;}
.smp-about .wlist li{
  font-size:13px; color:var(--ink); padding:11px 14px 11px 38px; position:relative;
  background:var(--greige-2); border-radius:9px; line-height:1.6;
}
.smp-about .wlist li::before{content:""; position:absolute; left:14px; top:14px; width:15px; height:15px; border-radius:50%; border:1.5px solid var(--sage); background:#fff;}
.smp-about .wlist.check li::after{content:""; position:absolute; left:18.5px; top:19.5px; width:6px; height:3.5px; border-left:1.5px solid var(--green-soft); border-bottom:1.5px solid var(--green-soft); transform:rotate(-45deg);}
.smp-about .wlist.warn li::before{border-color:var(--terra); border-radius:5px;}
.smp-about .wlist.warn li::after{content:"!"; position:absolute; left:18.5px; top:10px; font-size:11px; font-weight:700; color:var(--terra); font-family:var(--serif-en);}
.smp-about .wlist.bare li{background:none; border-radius:0; padding:6px 0 6px 26px;}
.smp-about .wlist.bare li::before{left:2px; top:11px;}
.smp-about .wlist.bare.check li::after{left:6.5px; top:16.5px;}

/* tag pill list */
.smp-about .taglist{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0;}
.smp-about .taglist span{font-size:12.5px; border:1px solid var(--line-green); border-radius:999px; padding:7px 14px; background:#fff; color:var(--green);}

/* ---------- 症例 ---------- */
.smp-about .case{margin:18px 0; padding-top:18px; border-top:1px solid var(--line);}
.smp-about .case:first-of-type{border-top:0; padding-top:6px;}
.smp-about .case-label{display:inline-block; font-family:var(--serif-jp); font-size:13px; font-weight:600;
  color:#fff; background:var(--green-deep); border-radius:6px; padding:4px 12px; margin:0 0 10px;}
.smp-about .ba{display:grid; grid-template-columns:1fr auto 1fr; gap:6px; align-items:center; margin-bottom:12px;}
.smp-about .ba .ph{aspect-ratio:3/4;}
.smp-about .ba-arrow{display:flex; align-items:center; justify-content:center;
  color:var(--green-deep); font-size:14px; line-height:1; padding:0 2px;}
.smp-about .ba .lab{position:absolute; top:0; left:0; right:0; z-index:2; font-family:var(--serif-en); font-size:16.5px; letter-spacing:.14em; text-align:center; background:#2c4636; color:#fff; padding:7px 0; border-radius:0;}
.smp-about .spec{border-radius:11px; overflow:hidden; margin-top:12px; background:var(--greige-2);}
.smp-about .spec div{display:flex; font-size:12.5px; border-top:1px solid var(--line);}
.smp-about .spec div:first-child{border-top:0;}
.smp-about .spec dt{width:84px; flex:none; color:var(--sage-deep); padding:9px 12px; font-weight:600; font-family:var(--serif-jp);}
.smp-about .spec dd{margin:0; padding:9px 12px; color:var(--ink);}

/* ---------- 比較マトリクス ---------- */
.smp-about .cmp{width:100%; border-collapse:separate; border-spacing:0; margin:14px 0; font-size:12px;
  background:#fff; border-radius:12px; overflow:hidden; border:1px solid var(--line); table-layout:fixed;}
.smp-about .cmp th,.smp-about .cmp td{border-bottom:1px solid var(--line); padding:11px 4px; text-align:center; vertical-align:middle;}
.smp-about .cmp thead th{background:var(--green-deep); color:#fff; font-weight:600; font-size:10.5px; line-height:1.3;}
.smp-about .cmp thead th:first-child{width:34%;}
.smp-about .cmp tbody th{background:var(--greige-2); text-align:left; font-weight:600; font-size:11.5px; color:var(--ink); padding-left:10px; line-height:1.35;}
.smp-about .cmp tbody tr:last-child th,.smp-about .cmp tbody tr:last-child td{border-bottom:0;}
.smp-about .cmp .row-hi th{background:#e4ede0; color:var(--green-deep); font-weight:700;}
.smp-about .cmp .row-hi td{background:#eef3ec;}
.smp-about .cmp .mk{font-size:15px; font-weight:700; font-family:var(--serif-en);}
.smp-about .cmp .o{color:var(--green);} .smp-about .cmp .d{color:var(--sage-deep);} .smp-about .cmp .x{color:var(--terra);}

/* ---------- steps ---------- */
.smp-about .steps{display:flex; flex-direction:column; margin:18px 0; counter-reset:st;}
.smp-about .step{display:flex; gap:14px; padding-bottom:18px; position:relative;}
.smp-about .step::before{counter-increment:st; content:counter(st); position:absolute; left:0; top:0;
  width:36px; height:36px; background:var(--green-deep); color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:var(--serif-en); font-size:16px;}
.smp-about .step::after{content:""; position:absolute; left:17.5px; top:40px; bottom:0; width:1px; background:var(--sage); opacity:.5;}
.smp-about .step:last-child{padding-bottom:0;}
.smp-about .step:last-child::after{display:none;}
.smp-about .step .body{margin-left:50px; flex:1;}
.smp-about .step h4{font-size:14.5px; margin:6px 0 3px; font-weight:600; font-family:var(--serif-jp);}
.smp-about .step p{font-size:12.5px; color:var(--ink-soft); margin:0;}

/* ---------- tables ---------- */
.smp-about .wtable{width:100%; border-collapse:separate; border-spacing:0; margin:14px 0; font-size:12.5px;
  background:#fff; border-radius:12px; overflow:hidden; border:1px solid var(--line);}
.smp-about .wtable th,.smp-about .wtable td{padding:11px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); line-height:1.7;}
.smp-about .wtable thead th{background:var(--green-deep); color:#fff; font-weight:600; font-size:12px; border-bottom:0;}
.smp-about .wtable tbody th{background:var(--greige-2); font-weight:600; white-space:nowrap; color:var(--ink); width:96px;}
.smp-about .wtable tbody tr:last-child th,.smp-about .wtable tbody tr:last-child td{border-bottom:0;}
.smp-about .wtable td.num{font-family:var(--serif-en); font-size:13.5px; color:var(--green);}

/* ---------- 料金カード ---------- */
.smp-about .pricelist{display:flex; flex-direction:column; gap:8px; margin:14px 0;}
.smp-about .pricecard{display:flex; gap:14px; align-items:center; border:1px solid var(--line); border-radius:12px; background:#fff; padding:14px 16px;}
.smp-about .pc-img{width:76px; height:76px; flex:none; object-fit:cover; object-position:center; border-radius:8px; background:var(--greige-2);}
.smp-about .pc-body{flex:1; min-width:0;}
.smp-about .pc-head{display:flex; align-items:baseline; justify-content:flex-start; gap:10px; flex-wrap:wrap;}
.smp-about .pc-name{font-family:var(--serif-jp); font-size:17px; font-weight:600; color:var(--green-deep);}
.smp-about .pc-meta{font-size:11.5px; color:var(--ink-faint); white-space:nowrap;}
.smp-about .pc-spec{display:flex; flex-direction:column; gap:2px; margin-top:5px;}
.smp-about .pc-spec span{font-size:10px; color:var(--ink-soft); line-height:1;}
.smp-about .pc-prices{display:flex; flex-direction:column; align-items:flex-start; gap:5px; margin-top:9px; padding-top:9px; border-top:1px dashed var(--line);}
.smp-about .pc-reg{font-size:12px; color:var(--ink-soft);}
.smp-about .pc-reg b{font-family:var(--serif-en); font-size:13px; font-weight:600;}
.smp-about .pc-mon{font-size:12px; color:var(--green); font-weight:600;}
.smp-about .pc-mon b{font-family:var(--serif-en); font-size:17px; margin:0 2px;}
.smp-about .pc-unit{font-size:10.5px; color:var(--ink-faint);}

/* clinic info / definition rows */
.smp-about .deflist{border-radius:12px; overflow:hidden; margin:14px 0; background:var(--greige-2);}
.smp-about .deflist .row{display:flex; font-size:12.5px; border-top:1px solid var(--line);}
.smp-about .deflist .row:first-child{border-top:0;}
.smp-about .deflist dt{width:118px; flex:none; padding:10px 12px; font-weight:600; color:var(--sage-deep); font-family:var(--serif-jp); white-space:nowrap;}
.smp-about .deflist dd{margin:0; padding:10px 12px;}
.smp-about .map{display:block; width:100%; height:200px; border:0; border-radius:12px; margin-top:8px;}

/* profile */
.smp-about .profile{display:flex; gap:14px; align-items:flex-start; background:var(--greige-2); border-radius:14px; padding:16px; margin:12px 0;}
.smp-about .profile .ph{width:88px; height:112px; flex:none; aspect-ratio:auto; border-radius:11px;}
.smp-about .profile h4{margin:0 0 5px; font-size:15.5px; font-family:var(--serif-jp); font-weight:600; letter-spacing:.03em;}
.smp-about .profile p{font-size:12px; color:var(--ink-soft); margin:6px 0 0; line-height:1.8;}
.smp-about .pf-main{flex:1; min-width:0;}
.smp-about .pf-links{display:flex; align-items:center; gap:8px; margin-top:11px;}
.smp-about .pf-ig{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none;
  border-radius:9px; border:1px solid var(--line-strong); background:#fff; color:var(--green-deep);}
.smp-about .pf-ig svg{width:17px; height:17px;}
.smp-about .pf-cta{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:34px; border-radius:9px; background:var(--green-deep); color:#fff; text-decoration:none;
  font-size:12px; font-family:var(--serif-jp); letter-spacing:.04em;}

/* ---------- FAQ ---------- */
.smp-about .faqlist{display:flex; flex-direction:column; gap:10px; margin-top:14px;}
.smp-about .qa{border:1px solid var(--line); border-radius:11px; background:#fff; padding:15px 16px;}
.smp-about .qa .q{display:flex; gap:11px; align-items:flex-start; font-size:13.5px; font-weight:600; color:var(--green-deep); line-height:1.55; margin:0;}
.smp-about .qa .a{display:flex; gap:11px; align-items:flex-start; margin:9px 0 0; font-size:12.5px; color:var(--ink-soft); line-height:1.9;}
.smp-about .qa .mark{font-family:var(--serif-en); color:var(--sage-deep); font-size:16px; line-height:1.4; flex:none;}

/* ---------- figure ---------- */
.smp-about .figure{margin:18px 0; border-radius:12px; background:var(--greige-2); padding:16px 16px 12px;}
.smp-about .figure img{display:block; width:100%; max-width:320px; height:auto; margin:0 auto;}
.smp-about .figure figcaption{font-size:11px; color:var(--ink); text-align:center; margin-top:10px; letter-spacing:.02em;}

/* ---------- 2-column bullet grid ---------- */
.smp-about .gridlist{display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:14px 0; list-style:none; padding:0;}
.smp-about .gridlist li{font-size:12px; color:var(--ink); padding:10px 12px 10px 26px; position:relative; background:var(--greige-2); border-radius:8px; line-height:1.45;}
.smp-about .gridlist li::before{content:""; position:absolute; left:12px; top:15px; width:6px; height:6px; border-radius:50%; background:var(--sage-deep);}
.smp-about .gridlist.boxed{grid-template-columns:1fr; gap:0; border:1.5px dashed var(--sage); border-radius:12px; padding:6px 16px;}
.smp-about .gridlist.boxed li{background:none; border-radius:0; padding:11px 8px 11px 20px;}
.smp-about .gridlist.boxed li + li{border-top:1px solid var(--line);}
.smp-about .gridlist.boxed li::before{left:4px; top:18px;}
.smp-about .gridlist.boxed.danger{border-color:var(--terra);}
.smp-about .gridlist.boxed.danger li::before{background:var(--terra);}

/* ---------- compact numbered list ---------- */
.smp-about .numlist{list-style:none; padding:6px 16px; margin:16px 0; display:flex; flex-direction:column; gap:9px;
  border:1.5px dashed var(--sage); border-radius:12px;}
.smp-about .numlist li{display:flex; gap:13px; align-items:flex-start; font-size:13px; line-height:1.7; padding:12px 2px;}
.smp-about .numlist li + li{border-top:1px solid var(--line);}
.smp-about .numlist li .n{font-family:var(--serif-en); font-size:18px; color:var(--sage-deep); flex:none; padding-top:1px; line-height:1.2;}

/* ---------- closing message ---------- */
.smp-about .closing{padding:48px 26px; text-align:center; background:var(--green-deep); color:#eef2ee; border-top:1px solid var(--line);}
.smp-about .closing p{font-size:14px; color:#e3eae3; line-height:2.05;}
.smp-about .closing .em{font-size:16px; font-weight:600; color:#fff; font-family:var(--serif-jp); letter-spacing:.06em;}

/* ---------- inline CTA band ---------- */
.smp-about .cta-inline{
  display:block; text-decoration:none; color:inherit;
  padding:26px 22px; background:var(--greige-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  text-align:center; transition:background .15s;
}
.smp-about .cta-inline .ci-lead{
  font-family:var(--serif-jp); font-size:16px; font-weight:600;
  color:var(--green-deep); line-height:1.6; margin:0 0 4px; letter-spacing:.04em;
}
.smp-about .cta-inline .ci-sub{font-size:11.5px; color:var(--ink-soft); margin:0 0 16px;}
.smp-about .cta-inline .ci-go{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--green); color:#fff; border-radius:999px;
  padding:13px 28px; font-size:13.5px; font-weight:600; font-family:var(--jp);
  box-shadow:0 6px 16px rgba(44,70,54,.32), 0 2px 4px rgba(44,70,54,.22);
  transition:transform .15s ease, box-shadow .15s ease;
}
.smp-about .cta-inline:hover .ci-go{box-shadow:0 9px 22px rgba(44,70,54,.38), 0 3px 6px rgba(44,70,54,.24); transform:translateY(-1px);}
.smp-about .cta-inline:active .ci-go{transform:translateY(1px); box-shadow:0 3px 8px rgba(44,70,54,.28);}

/* =========================================================
   私たちが大切にしていること（元ABOUT実装の .point ブロック）
   ※ .smp-about の外に配置。元 about.css のスタイルを復元
   ========================================================= */
.point {
  margin-top: 40px;
  background: url(../img/about/bg02.webp) no-repeat bottom;
  background-size: cover;
  background-position: center top;
}
.point .inner {
  padding: 50px 30px 53px 30px;
}
.point .img {
  max-width: 54px;
  margin: auto;
}
.point .ttl {
  margin-top: 34px;
  margin-bottom: 28px;
  font-size: 26px;
  letter-spacing: 0.15em;
  line-height: 1.346;
  color: #ffffff;
  font-weight: 400;
}
.point p {
  max-width: 310px;
  margin: auto;
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2.08;
  color: #ffffff;
}

/* ---------- 下部固定CTA（sticky風・position:fixed） ---------- */
/* ※ .smp-about の外なのでCSS変数は使わずリテラル値で指定 */
.about-sticky-cta{
  position:fixed; left:0; right:0; bottom:0; margin-inline:auto; z-index:40;
  width:100%; max-width:440px;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-top:1px solid #ded9cd;
}
.about-sticky-cta a{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:17px 16px; border-radius:999px;
  background:#0f8f51; color:#fff; text-decoration:none;
  font-size:16px; font-weight:600; letter-spacing:.04em;
  font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  box-shadow:2px 3px 5px #223528;
}
.about-sticky-cta a:active{transform:translateY(1px); box-shadow:1px 2px 3px #223528;}
.about-sticky-cta .li{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:5px; background:#fff; color:#06c755;
  font-family:"EB Garamond",serif; font-size:12px; font-weight:700; flex:none;
}
/* 固定CTAに本文末尾が隠れないよう余白（このページのみ） */
.main{padding-bottom:80px;}