@charset "UTF-8";
/* ============================================
   しろ歯科クリニック（デモ・30万円プラン版） - style.css
   全6ページ共通スタイル。演出なし（標準のCSSホバーのみ）。
   配色・フォントは100万円版・60万円版（歯科クリニックHP/・歯科クリニックHP-60万/）を踏襲。

   100万円版・60万円版との違い（演出面）:
   ・スクロールリビール(.rv)、ヒーローのゆっくりズーム(.kv-zoom)、ページ遷移フェード、
     ローダー、ホバーグロー(.glow)、フルスクリーン/ドロップダウンメニューの凝った開閉、
     スマホ下部固定バー は非搭載。
   ・メニューはヘッダー直下に開く、ごく普通のドロップダウン（フェードのみ）。
   ============================================ */

:root{
  --porcelain:#fdfdfb;
  --section:#f4f6f4;
  --paper-white:#fff;
  --slate:#2c3a45;
  --teal:#467c74;
  --teal-soft:#eaf1f0;
  --sand:#efece4;
  --hairline:#e2e5e0;
  --dim:#6d7780;
  --danger:#b4544a;
  --font-deco:'Cormorant Garamond','EB Garamond',serif;
  --header-h:70px;
}

/* ---------- リセット ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{
  font-family:"Zen Kaku Gothic New",sans-serif;
  background:var(--porcelain);
  color:var(--slate);
  line-height:2;
  font-size:15.5px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img,svg{max-width:100%;display:block}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit}
table{border-collapse:collapse}

.mincho{font-family:"Zen Old Mincho",serif;font-weight:500;letter-spacing:.06em}
.en{font-family:"Manrope",sans-serif;letter-spacing:.22em;text-transform:uppercase}
.skip-link{
  position:fixed;z-index:999;top:.8rem;left:.8rem;padding:.7rem 1.2rem;
  background:var(--slate);color:var(--porcelain);font-size:1.2rem;
  transform:translateY(-200%);transition:transform .2s;
}
.skip-link:focus{transform:none}

/* ============================================
   共通ヘッダー
   ============================================ */
.hd{
  position:sticky;top:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  height:var(--header-h);
  padding:0 28px;background:rgba(253,253,251,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.logo{display:flex;align-items:center;gap:12px}
.logo .mark{width:34px;height:34px;border-radius:2px;border:1.5px solid var(--slate);background:none;display:grid;place-items:center;color:var(--slate);font-family:"Zen Old Mincho",serif;font-weight:500;font-size:16px;flex-shrink:0}
.logo .txt b{display:block;font-size:15px;font-weight:700;letter-spacing:.1em}
.logo .txt span{font-size:9px;color:var(--dim);letter-spacing:.2em}

.gnav{display:flex;gap:26px;font-size:12.5px;font-weight:500}
.gnav a{padding:4px 0;border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
.gnav a:hover,.gnav a[aria-current="page"]{color:var(--teal);border-color:var(--teal)}

.hd-right{display:flex;align-items:center;gap:16px}
.hd-right .btn{padding:11px 20px;font-size:11.5px}

.menu-btn{
  display:none;width:38px;height:38px;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  flex-shrink:0;
}
.menu-btn span{display:block;width:20px;height:1.5px;background:var(--slate);transition:transform .25s,opacity .2s}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){opacity:0}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media(max-width:900px){
  .gnav{display:none}
  .hd-right .btn.desktop-only{display:none}
  .menu-btn{display:flex}
}
@media(max-width:520px){
  .hd{padding:0 16px}
}

/* ドロップダウンメニュー（フェードのみ。100万円/60万円版のような円形展開・
   フルスクリーンオーバーレイ、フェード+スライドの凝った演出は非搭載） */
.mnav{
  display:none;position:sticky;top:var(--header-h);z-index:99;
  background:var(--porcelain);border-bottom:1px solid var(--hairline);
  padding:8px 28px 18px;
}
body.menu-open .mnav{display:block}
.mnav a{display:block;padding:12px 2px;font-size:14.5px;border-bottom:1px solid var(--hairline)}
.mnav a:last-child{border-bottom:none}
@media(min-width:901px){.mnav{display:none!important}}

/* ============================================
   ボタン
   ============================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:13px;letter-spacing:.1em;padding:15px 30px;border-radius:2px;transition:background .2s,color .2s,border-color .2s,filter .2s}
.btn.fill{background:var(--teal);color:#fff}
.btn.fill:hover{filter:brightness(1.1)}
.btn.line{border:1px solid var(--slate)}
.btn.line:hover{background:var(--slate);color:var(--porcelain)}

/* ============================================
   セクション共通部品
   ============================================ */
.sec{max-width:1080px;margin:0 auto;padding:80px 24px 0}
.label{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.label .en{font-family:var(--font-deco);font-style:italic;font-size:14px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--teal)}
.label::after{content:"";flex:1;height:1px;background:var(--hairline)}
h2{font-family:"Zen Old Mincho",serif;font-size:clamp(24px,3.4vw,36px);font-weight:500;letter-spacing:.14em;line-height:1.8;margin-bottom:20px}
.sec-lead{max-width:560px;color:#4a545d;margin-bottom:32px}

/* ============================================
   ヒーロー（index.html） 1枚固定写真・演出なし
   ============================================ */
.hero-top{max-width:1080px;margin:0 auto;padding:56px 24px 0}
.hero-copy{max-width:640px}
.hero-copy .en{font-size:10px;color:var(--teal);margin-bottom:20px;display:block}
.hero h1{font-size:clamp(27px,4.2vw,44px);font-weight:600;line-height:1.7;letter-spacing:.07em}
.hero h1 .line{display:block}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 68%,var(--teal-soft) 68%)}
.hero-copy .lead{margin-top:24px;max-width:430px;color:#4a545d;font-size:14px}
.hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero-cta .btn{flex:0 0 auto}
.hero-photo{
  width:100%;margin-top:42px;aspect-ratio:16/7;overflow:hidden;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
.hero-photo img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.hero-photo{aspect-ratio:4/3}.hero-cta{flex-direction:column}.hero-cta .btn{width:100%}}

/* 安心ポイントバー（トップ） */
.assure{max-width:1080px;margin:52px auto 0;padding:0 24px}
.assure ul{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:6px;overflow:hidden}
@media(max-width:760px){.assure ul{grid-template-columns:1fr 1fr}}
.assure li{background:var(--porcelain);padding:20px 16px;text-align:center}
.assure li b{display:block;font-size:13px;letter-spacing:.06em;margin-bottom:4px}
.assure li span{font-size:10.5px;color:var(--dim);letter-spacing:.03em}

/* 当院についての抜粋（トップ。3〜4行、詳細はabout.htmlのみ） */
.about-digest{max-width:1080px;margin:0 auto;padding:80px 24px 0}
.about-digest__inner{max-width:680px}
.about-digest p{color:#4a545d;margin-bottom:1.2em}
.about-digest .more{margin-top:8px}

/* もっと見るリンク */
.more a{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--teal);border-bottom:1px solid var(--teal-soft);padding-bottom:4px;border-radius:2px;transition:gap .2s,border-color .2s}
.more a:hover{gap:12px;border-color:var(--teal)}
.more a .arrow{font-family:"Manrope"}

/* ============================================
   診療メニュー カード（menu.html・index.htmlダイジェスト共通）
   静的HTML直書き。CMSなし。
   ============================================ */
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.menu-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.menu-grid{grid-template-columns:1fr}}
.mcard{background:#fff;border:1px solid var(--hairline);border-radius:6px;padding:26px 24px;transition:border-color .2s,box-shadow .2s;display:flex;flex-direction:column}
.mcard:hover{border-color:var(--teal);box-shadow:0 14px 30px -18px rgba(44,58,69,.22)}
.mcard .en{font-size:9px;color:var(--teal)}
.mcard h3{font-size:16px;font-weight:700;letter-spacing:.08em;margin:8px 0 8px}
.mcard p.desc{font-size:13px;color:#4a545d;flex:1}
.mcard .fee{margin-top:14px;padding-top:12px;border-top:1px dashed var(--hairline);font-size:11px;color:var(--dim)}
.mcard .fee b{font-family:"Manrope";font-size:15px;color:var(--slate);letter-spacing:.03em;font-weight:600}
.mcard .fee-note{display:block;margin-top:2px;font-size:10px;color:var(--dim)}
.mcard.jihi{background:var(--slate);color:var(--porcelain);border-color:var(--slate)}
.mcard.jihi .en{color:#7fc0b7}
.mcard.jihi p.desc{color:#b9c2c9}
.mcard.jihi .fee{border-color:#3b4a56;color:#8d99a3}
.mcard.jihi .fee b{color:#fff}
.mcard .risk{margin-top:14px;padding:13px 15px;border-radius:6px;font-size:11.5px;line-height:1.9}
.mcard:not(.jihi) .risk{background:rgba(180,84,74,.06);border:1px solid rgba(180,84,74,.25);color:#6d4d48}
.mcard.jihi .risk{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#d9dfe2}
.mcard .risk b{display:block;color:var(--danger);font-size:10.5px;letter-spacing:.06em;margin-bottom:5px}
.mcard.jihi .risk b{color:#f1a99f}
.menu-note{font-size:11px;color:var(--dim);margin-top:20px}

/* ============================================
   診療時間表
   ============================================ */
table.hours{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--hairline);border-radius:6px;overflow:hidden;font-size:12.5px}
.hours th,.hours td{padding:12px 8px;text-align:center;border-bottom:1px solid var(--hairline)}
.hours thead th{background:var(--slate);color:#fff;font-weight:500;letter-spacing:.1em;font-size:11px}
.hours tbody th{background:var(--section);font-weight:700;letter-spacing:.1em;font-size:11px}
.hours td .ok{color:var(--teal);font-weight:700}
.hours td .no{color:#b7bdb8}
.hours-note{font-size:11px;color:var(--dim);margin-top:12px;line-height:1.9}

/* ============================================
   当院について（about.html）
   ============================================ */
.policy-block{padding-top:56px}
.policy-block:first-of-type{padding-top:0}
.policy{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:820px){.policy{grid-template-columns:1fr;gap:24px}}
.policy .ph{aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:var(--sand)}
.policy .ph img{width:100%;height:100%;object-fit:cover}
.policy-block .no{font-family:"Manrope";font-weight:800;font-size:12px;color:var(--teal);border:1px solid var(--teal);border-radius:50%;width:38px;height:38px;display:grid;place-items:center;margin-bottom:14px}
.policy-block h3{font-size:17px;font-weight:700;letter-spacing:.07em;margin-bottom:12px;line-height:1.8}
.policy-block p{color:#4a545d;font-size:13.5px}

/* 院長紹介 */
.doc{display:grid;grid-template-columns:280px 1fr;gap:44px;align-items:center}
@media(max-width:820px){.doc{grid-template-columns:1fr;gap:24px}}
.doc .ph{aspect-ratio:3/4;border-radius:6px;overflow:hidden;background:var(--sand);max-width:280px}
.doc .ph img{width:100%;height:100%;object-fit:cover}
.doc blockquote{font-family:"Zen Old Mincho",serif;font-weight:500;font-size:17px;line-height:2.2;letter-spacing:.08em}
.doc .who{margin-top:20px;font-size:12px;color:var(--dim);line-height:1.9}
.doc .who b{display:block;font-size:15px;color:var(--slate);letter-spacing:.12em}
.doc ul{margin-top:12px;font-size:11px;color:var(--dim);line-height:1.9}
.doc ul li::before{content:"／ ";color:var(--teal)}
.doc .msg{margin-top:22px;padding-top:20px;border-top:1px solid var(--hairline);font-size:13px;color:#4a545d}

/* スタッフ紹介（簡易カード） */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:640px){.team-grid{grid-template-columns:1fr}}
.team-card{display:flex;gap:18px;background:#fff;border:1px solid var(--hairline);border-radius:6px;padding:20px}
.team-card .ph{width:84px;height:84px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--sand)}
.team-card .ph img{width:100%;height:100%;object-fit:cover}
.team-card .en{font-size:9px;color:var(--teal)}
.team-card h3{font-size:14.5px;font-weight:700;letter-spacing:.06em;margin:4px 0 6px}
.team-card p{font-size:12px;color:#4a545d}

/* ============================================
   アクセス（access.html）
   ============================================ */
.info{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
@media(max-width:820px){.info{grid-template-columns:1fr}}
.access-visual{aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--sand);margin-bottom:16px}
.access-visual img{width:100%;height:100%;object-fit:cover}
.access .detail-list{display:grid;gap:14px;margin-top:18px}
.access .detail-list .row{display:grid;grid-template-columns:70px 1fr;gap:14px;font-size:12.5px;color:#4a545d;padding-bottom:14px;border-bottom:1px solid var(--hairline)}
.access .detail-list .row:last-child{border-bottom:none;padding-bottom:0}
.access .detail-list .row b{color:var(--slate);font-size:11px;letter-spacing:.06em}
.access p.addr{font-size:14px;color:var(--slate);font-weight:700}

/* ============================================
   情報カード（お問い合わせページ）
   ============================================ */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.info-card{border:1px solid var(--hairline);background:#fff;border-radius:6px;padding:24px 22px}
.info-card h3{font-size:11px;letter-spacing:.1em;color:var(--teal);margin-bottom:10px}
.info-card p{font-size:13px;color:#4a545d}

/* ============================================
   お問い合わせフォーム
   ============================================ */
.form{max-width:680px;margin:0 auto}
.form__row{margin-bottom:24px}
.form__label{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:10px;font-size:13px;letter-spacing:.04em}
.form__req{font-size:10px;padding:.2em .8em;border:1px solid var(--teal);color:var(--teal);border-radius:2px}
.form__req--opt{border-color:var(--hairline);color:var(--dim)}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea{
  width:100%;font:inherit;font-size:14px;padding:13px 14px;
  border:1px solid var(--hairline);border-radius:4px;background:#fff;
  transition:border-color .2s;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--teal)}
.form textarea{min-height:150px;resize:vertical}
.form__submit{text-align:center;margin-top:34px}
.form__submit .btn{min-width:260px;background:var(--teal);color:#fff;border:none}
.form__submit .btn:hover{filter:brightness(1.1)}
.form__submit .btn:disabled{opacity:.6;cursor:default;pointer-events:none}
.form__note{text-align:center;font-size:11.5px;color:var(--dim);margin-top:14px}
.form-done{max-width:680px;margin:0 auto;text-align:center;padding:20px 0 10px}
.form-done__mark{font-family:var(--font-deco);font-style:italic;font-size:3.4rem;color:var(--teal);margin-bottom:18px}
.form-done__ttl{font-family:"Zen Old Mincho",serif;font-size:clamp(19px,2.8vw,24px);font-weight:500;margin-bottom:16px}
.form-done__txt{color:#4a545d;line-height:1.9;font-size:13.5px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================
   CTA
   ============================================ */
.cta{max-width:1080px;margin:88px auto 0;padding:0 24px}
.cta .box{background:var(--slate);color:var(--porcelain);border-radius:6px;padding:52px 28px;text-align:center}
.cta h2{color:var(--porcelain);margin-bottom:8px}
.cta p{font-size:13px;color:#b9c2c9;margin-bottom:26px}
.cta .btn.fill{background:#fff;color:var(--slate)}
.cta .btn.line{border-color:#5a6975;color:var(--porcelain);margin-left:10px}
.cta .btn.line:hover{background:#fff;color:var(--slate);border-color:#fff}
@media(max-width:560px){.cta .btn{display:flex;justify-content:center}.cta .btn.line{margin:12px 0 0}}

/* ============================================
   下層ページ用: パンくず / ページヘッダー
   ============================================ */
.crumbs{max-width:1080px;margin:0 auto;padding:18px 24px 0;font-size:11px;color:var(--dim);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{color:var(--dim);transition:color .2s}
.crumbs a:hover{color:var(--teal)}
.crumbs .sep{color:#b7bdb8}
.crumbs .now{color:var(--slate)}

.page-head{max-width:1080px;margin:0 auto;padding:24px 24px 0}
.page-head .en{display:block;font-family:var(--font-deco);font-style:italic;font-size:15px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--teal);margin-bottom:12px}
.page-head h1{font-family:"Zen Old Mincho",serif;font-size:clamp(26px,4.4vw,46px);font-weight:500;letter-spacing:.14em;line-height:1.8}
.page-head p{max-width:560px;margin-top:14px;color:#4a545d}

/* ============================================
   共通フッター
   ============================================ */
.ft{margin-top:88px;border-top:1px solid var(--hairline);padding:52px 28px 28px;background:var(--section)}
.ft-in{max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:36px}
.ft-brand address{font-style:normal;font-size:12px;color:var(--dim);line-height:2.1;margin-top:14px}
.ft-nav{display:flex;flex-wrap:wrap;gap:12px 26px}
.ft-nav h4{width:100%;font-size:10.5px;letter-spacing:.12em;color:var(--dim);margin-bottom:6px}
.ft-nav a{font-size:12.5px;color:var(--slate);transition:color .2s}
.ft-nav a:hover{color:var(--teal)}
.ft .cp{max-width:1080px;margin:32px auto 0;font-size:10px;color:#a9a396;letter-spacing:.08em;border-top:1px solid var(--hairline);padding-top:14px}

/* ============================================
   モーション低減設定
   ============================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}