/* ============================================
   しろ歯科クリニック（デモ） - style.css
   全12ページ共通スタイル。
   「歯医者が、こわくない場所になるように。」
   白基調・清潔感・上品さ。誠実で落ち着いた演出。
   デザイントーン刷新（第2版）: 可愛い丸み・ぽってり感を排し、
   ヘアライン・直線・淡い光でつくる上質さへ。詳細は制作メモ.md参照。
   ============================================ */

:root{
  --porcelain:#fdfdfb;   /* ほぼ白（背景） */
  --section:#f4f6f4;     /* セクション替えの淡色 */
  --paper-white:#fff;    /* カード・ヘッダー等の純白 */
  --slate:#2c3a45;       /* 青灰のインク（本文・強調） */
  --teal:#467c74;        /* 彩度を落としたティール（控えめなアクセント） */
  --teal-soft:#eaf1f0;   /* ティールの淡色（mist・背景・ハイライト） */
  --sand:#efece4;        /* 淡いサンド（罫線・区切りの下地） */
  --hairline:#e2e5e0;    /* ヘアライン罫線 */
  --dim:#6d7780;         /* 補足テキスト */
  --danger:#b4544a;      /* 休診・注意表記（多用しない） */
  --font-deco:'Cormorant Garamond','EB Garamond',serif; /* 装飾英字（セクションラベル等） */
  --ease:cubic-bezier(0.16,1,0.3,1);
}

/* ---------- リセット ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
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;
}
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}

/* 写真プレースホルダー（写真が用意できるまでの仮置き用） */
.ph{position:relative;background:linear-gradient(135deg,var(--sand),#f1ede5 55%,var(--teal-soft));overflow:hidden}
.ph img,.ph svg{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}

/* ============================================
   共通ヘッダー
   ============================================ */
.hd{
  position:sticky;top:0;z-index:60;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 28px;background:rgba(253,253,251,.92);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:.14em}
.logo .txt span{font-size:9px;color:var(--dim);letter-spacing:.24em}

.hd nav{display:flex;gap:22px;font-size:12px;font-weight:500}
.hd nav a{padding:4px 0;border-bottom:2px solid transparent;transition:border-color .2s}
.hd nav a:hover,.hd nav a.is-current{border-color:var(--teal)}

.hd-right{display:flex;align-items:center;gap:18px}
.hd .tel{text-align:right;font-size:10px;color:var(--dim);line-height:1.5}
.hd .tel b{display:block;font-family:"Manrope";font-size:16px;letter-spacing:.06em;color:var(--slate)}
.hd .btn.sm{padding:10px 22px;font-size:11px}

@media(max-width:980px){
  .hd nav{display:none}
}
@media(max-width:760px){
  .hd .btn.sm{display:none}
}
@media(max-width:560px){
  .hd .tel{display:none}
  .hd{padding:12px 18px}
}

/* ハンバーガーボタン（980px以下で表示） */
.menu-btn{
  display:none;width:40px;height:40px;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  position:relative;z-index:120;flex-shrink:0;
}
.menu-btn span{display:block;width:22px;height:2px;background:var(--slate);transition:transform .3s var(--ease),opacity .2s var(--ease)}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){opacity:0}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:980px){.menu-btn{display:flex}}

/* フルスクリーンメニュー */
.fs-menu{
  position:fixed;inset:0;z-index:110;background:var(--porcelain);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:96px 28px 40px;overflow-y:auto;
  opacity:0;visibility:hidden;
  transition:opacity .55s var(--ease),visibility .55s var(--ease);
}
body.menu-open{overflow:hidden}
body.menu-open .fs-menu{opacity:1;visibility:visible}

.fs-menu nav{display:flex;flex-direction:column;width:100%;max-width:480px;margin:0 auto}
.fs-menu nav a{
  font-family:"Zen Old Mincho",serif;font-weight:500;font-size:clamp(19px,5vw,28px);letter-spacing:.16em;
  padding:15px 2px;border-bottom:1px solid var(--hairline);display:flex;justify-content:space-between;align-items:center;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .2s;
}
.fs-menu nav a span{font-family:"Manrope";font-size:10px;color:var(--dim);letter-spacing:.14em}
.fs-menu nav a:hover{color:var(--teal)}
body.menu-open .fs-menu nav a{opacity:1;transform:translateY(0)}
.fs-menu nav a:nth-child(1){transition-delay:.06s}
.fs-menu nav a:nth-child(2){transition-delay:.11s}
.fs-menu nav a:nth-child(3){transition-delay:.16s}
.fs-menu nav a:nth-child(4){transition-delay:.21s}
.fs-menu nav a:nth-child(5){transition-delay:.26s}
.fs-menu nav a:nth-child(6){transition-delay:.31s}
.fs-menu nav a:nth-child(7){transition-delay:.36s}
.fs-menu nav a:nth-child(8){transition-delay:.41s}
.fs-menu nav a:nth-child(9){transition-delay:.46s}

.fs-menu .fs-foot{
  width:100%;max-width:480px;margin:30px auto 0;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease) .5s,transform .5s var(--ease) .5s;
}
body.menu-open .fs-menu .fs-foot{opacity:1;transform:translateY(0)}
.fs-menu .fs-foot .tel-big{font-family:"Manrope";font-size:22px;letter-spacing:.06em;color:var(--slate)}
.fs-menu .fs-foot .cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

.menu-close{position:absolute;top:14px;right:22px;width:40px;height:40px;display:none}

/* ============================================
   スマホ下部固定バー（560px以下）
   ============================================ */
.sp-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--porcelain);border-top:1px solid var(--hairline);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
}
.sp-bar .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sp-bar a{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:13px 10px;border-radius:2px;font-size:12.5px;font-weight:700;letter-spacing:.05em;
}
.sp-bar a.tel-btn{border:1px solid var(--slate);color:var(--slate)}
.sp-bar a.res-btn{background:var(--teal);color:#fff}
@media(max-width:560px){
  .sp-bar{display:block}
  body{padding-bottom:74px}
}

/* ============================================
   ボタン
   ============================================ */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:13px;letter-spacing:.14em;padding:15px 30px;border-radius:2px;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .4s var(--ease),filter .3s var(--ease)}
.btn.fill{background:var(--teal);color:#fff}
.btn.fill:hover{filter:brightness(1.12);box-shadow:0 0 0 1px rgba(70,124,116,.25),0 10px 28px rgba(70,124,116,.24)}
.btn.line{border:1px solid var(--slate)}
.btn.line:hover{background:var(--slate);color:var(--porcelain);box-shadow:0 10px 24px rgba(44,58,69,.16)}

/* ============================================
   セクション共通部品
   ============================================ */
.sec{max-width:1120px;margin:0 auto;padding:88px 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,38px);font-weight:500;letter-spacing:.16em;line-height:1.8;margin-bottom:22px}
.sec-lead{max-width:560px;color:#4a545d;margin-bottom:36px}

/* カード（診療メニュー等） */
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:820px){.menu-grid{grid-template-columns:1fr}}
.mcard{background:#fff;border:1px solid var(--hairline);border-radius:6px;padding:26px 24px;transition:border-color .25s,box-shadow .35s var(--ease),transform .25s var(--ease);display:block}
.mcard:hover{border-color:var(--teal);box-shadow:0 20px 44px -18px rgba(44,58,69,.22);transform:translateY(-2px)}
.mcard .en{font-size:9px;color:var(--teal)}
.mcard h3{font-size:16px;font-weight:700;letter-spacing:.1em;margin:8px 0 8px}
.mcard p{font-size:13px;color:#4a545d}
.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:.04em;font-weight:600}
.mcard.jihi{background:var(--slate);color:var(--porcelain);border-color:var(--slate)}
.mcard.jihi .en{color:#7fc0b7}
.mcard.jihi p{color:#b9c2c9}
.mcard.jihi .fee{border-color:#3b4a56;color:#8d99a3}
.mcard.jihi .fee b{color:#fff}
.menu-note{font-size:11px;color:var(--dim);margin-top:16px}

/* 診療時間表 */
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 thead th.today{background:var(--teal)}
.hours td.today{background:var(--teal-soft)}
.hours-note{font-size:11px;color:var(--dim);margin-top:12px;line-height:1.9}

/* 安心バー */
.assure{max-width:1120px;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:18px 16px;text-align:center}
.assure li b{display:block;font-size:13px;letter-spacing:.08em}
.assure li span{font-size:10px;color:var(--dim);letter-spacing:.05em}

/* ============================================
   下層ページ用: パンくず / ページヘッダー
   ============================================ */
.crumbs{max-width:1120px;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:1120px;margin:0 auto;padding:26px 24px 0}
.page-head .en{display:block;font-family:var(--font-deco);font-style:italic;font-size:16px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--teal);margin-bottom:14px}
.page-head h1{font-family:"Zen Old Mincho",serif;font-size:clamp(28px,4.8vw,52px);font-weight:500;letter-spacing:.16em;line-height:1.8}
.page-head p{max-width:580px;margin-top:16px;color:#4a545d}

/* ============================================
   施術方針 / 医師紹介 / 来院フロー / アクセス
   （下層ページで使う共通レイアウト部品）
   ============================================ */
.policy{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:820px){.policy{grid-template-columns:1fr}}
.policy .ph{aspect-ratio:4/3;border-radius:6px}
.policy-points{display:grid;gap:0;border-top:1px solid var(--hairline)}
.pp{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--hairline)}
.pp .no{font-family:"Manrope";font-weight:800;font-size:13px;color:var(--teal);border:1px solid var(--teal);border-radius:50%;width:40px;height:40px;display:grid;place-items:center}
.pp h3{font-size:15px;font-weight:700;letter-spacing:.08em;margin-bottom:4px}
.pp p{font-size:13px;color:#4a545d}

.doc{display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:center}
@media(max-width:820px){.doc{grid-template-columns:1fr}}
.doc .ph{aspect-ratio:3/4;border-radius:6px}
.doc blockquote{font-family:"Zen Old Mincho",serif;font-weight:500;font-size:18px;line-height:2.3;letter-spacing:.1em}
.doc .who{margin-top:22px;font-size:12px;color:var(--dim);line-height:1.9}
.doc .who b{display:block;font-size:15px;color:var(--slate);letter-spacing:.14em}
.doc ul{margin-top:14px;font-size:11px;color:var(--dim);line-height:1.9}
.doc ul li::before{content:"／ ";color:var(--teal)}

.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step}
@media(max-width:820px){.flow{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.flow{grid-template-columns:1fr}}
.fstep{background:#fff;border:1px solid var(--hairline);border-radius:6px;padding:24px 20px;position:relative;transition:border-color .25s,box-shadow .35s var(--ease)}
.fstep:hover{border-color:var(--teal);box-shadow:0 18px 40px -16px rgba(44,58,69,.18)}
.fstep::before{counter-increment:step;content:"0" counter(step);font-family:"Manrope";font-weight:800;font-size:12px;color:var(--teal);letter-spacing:.2em}
.fstep h3{font-size:14px;font-weight:700;letter-spacing:.08em;margin:8px 0 6px}
.fstep p{font-size:12.5px;color:#4a545d}
.fstep .time{margin-top:10px;font-size:10px;color:var(--dim)}
.fstep .time b{color:var(--teal)}

.info{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
@media(max-width:820px){.info{grid-template-columns:1fr}}
.access .ph{aspect-ratio:16/9;border-radius:6px;margin-bottom:16px}
.access p{font-size:13px;color:#4a545d}
.access p b{color:var(--slate)}

/* CTA */
.cta{max-width:1120px;margin:96px auto 0;padding:0 24px}
.cta .box{background:var(--slate);color:var(--porcelain);border-radius:6px;padding:56px 28px;text-align:center;position:relative;overflow:hidden}
.cta .box::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(70,124,116,.2);top:-160px;right:-100px}
.cta h2{color:var(--porcelain);margin-bottom:8px}
.cta p{font-size:13px;color:#b9c2c9;margin-bottom:28px;position:relative}
.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}}

/* お知らせティッカー / FAQ抜粋（トップページ用） */
.ticker{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);overflow:hidden}
.ticker-in{max-width:1120px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:22px}
.ticker-in .en{font-size:10px;color:var(--teal);flex-shrink:0}
.ticker-list{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ticker-list a{display:flex;gap:14px;align-items:baseline;font-size:12.5px;color:var(--dim);padding:4px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticker-list a:hover{color:var(--teal)}
.ticker-list time{font-family:"Manrope";font-size:10.5px;color:var(--dim);flex-shrink:0}
.ticker-list .cat{flex-shrink:0;font-size:10px;padding:2px 9px;border-radius:2px;background:var(--teal-soft);color:var(--teal);letter-spacing:.05em}
.ticker-list .ttl{color:var(--slate);overflow:hidden;text-overflow:ellipsis}

.faq-top{display:grid;gap:0;border-top:1px solid var(--hairline)}
.faq-item{border-bottom:1px solid var(--hairline)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 4px;cursor:pointer;font-size:14px;font-weight:500}
.faq-q .qmark{font-family:"Manrope";color:var(--teal);font-weight:800;flex-shrink:0}
.faq-q .plus{flex-shrink:0;width:22px;height:22px;position:relative}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--slate);top:50%;left:50%;transform:translate(-50%,-50%)}
.faq-q .plus::before{width:14px;height:1.5px}
.faq-q .plus::after{width:1.5px;height:14px;transition:transform .25s var(--ease)}
.faq-item.is-open .faq-q .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq-a p{padding:0 4px 22px;font-size:13px;color:#4a545d;max-width:640px}
.faq-item.is-open .faq-a{max-height:400px}

/* ============================================
   共通フッター
   ============================================ */
.ft{margin-top:90px;border-top:1px solid var(--hairline);padding:56px 28px 30px;background:var(--section)}
.ft-in{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px}
.ft-brand address{font-style:normal;font-size:12px;color:var(--dim);line-height:2.1;margin-top:16px}
.ft-cols{display:flex;gap:52px;flex-wrap:wrap}
.ft-col h4{font-size:10.5px;letter-spacing:.14em;color:var(--dim);margin-bottom:14px}
.ft-col ul{display:flex;flex-direction:column;gap:10px;font-size:12.5px}
.ft-col ul a{color:var(--slate);transition:color .2s}
.ft-col ul a:hover{color:var(--teal)}
.ft .cp{max-width:1120px;margin:36px auto 0;font-size:10px;color:#a9a396;letter-spacing:.1em;border-top:1px solid var(--hairline);padding-top:16px}
@media(max-width:760px){
  .ft-in{gap:32px}
  .ft-cols{gap:32px;width:100%}
}

/* ============================================
   スクロールリビール
   ============================================ */
.rv{opacity:0;transform:translateY(16px);transition:opacity 1.4s var(--ease),transform 1.4s var(--ease)}
.rv.on{opacity:1;transform:translateY(0)}
.rv-d1{transition-delay:.12s}
.rv-d2{transition-delay:.24s}
.rv-d3{transition-delay:.36s}
.rv-d4{transition-delay:.48s}

/* ============================================
   演出基盤（デザイントーン刷新 第2版）
   .bg-drift / .glow / .script-reveal / .fade-up-seq / .sflow
   使い方は制作メモ.md参照。クラスを付与する側（HTML）はこのCSSの範囲外。
   ============================================ */

/* 常に動く背景（body直下への配置を想定） */
.bg-drift{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.7;
  background:
    radial-gradient(38% 42% at 18% 22%,var(--teal-soft),transparent 68%),
    radial-gradient(34% 38% at 82% 18%,var(--sand),transparent 70%),
    radial-gradient(46% 50% at 50% 90%,#ffffff,transparent 72%);
  background-repeat:no-repeat;
  animation:bgDriftPos 130s var(--ease) infinite alternate,
            bgDriftScale 150s var(--ease) infinite alternate;
}
@keyframes bgDriftPos{
  0%{background-position:0% 0%,100% 0%,50% 100%}
  50%{background-position:12% 8%,86% 14%,46% 92%}
  100%{background-position:4% 14%,92% 4%,54% 84%}
}
@keyframes bgDriftScale{
  0%{background-size:100% 100%,100% 100%,100% 100%}
  50%{background-size:118% 118%,112% 112%,124% 124%}
  100%{background-size:108% 108%,120% 120%,112% 112%}
}

/* ホバーグロー（.mcard・画像枠等に付与） */
.glow{position:relative;isolation:isolate}
.glow::after{
  content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
  background:radial-gradient(60% 60% at 50% 38%,rgba(70,124,116,.22),transparent 70%);
  opacity:0;transition:opacity .6s var(--ease);
  pointer-events:none;
}
.glow:hover::after{opacity:1}
.glow:hover{box-shadow:0 0 0 1px rgba(70,124,116,.14),0 22px 54px -20px rgba(70,124,116,.4)}

/* 筆記体オープニング（ヒーロー側で使用する前提の基盤） */
.script-reveal{
  display:inline-block;
  font-family:var(--font-deco);font-style:italic;
  -webkit-mask-image:linear-gradient(90deg,#000 50%,transparent 50%);
  mask-image:linear-gradient(90deg,#000 50%,transparent 50%);
  -webkit-mask-size:200% 100%;mask-size:200% 100%;
  -webkit-mask-position:100% 0;mask-position:100% 0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:scriptReveal 2.2s var(--ease) forwards;
}
@keyframes scriptReveal{
  0%{-webkit-mask-position:100% 0;mask-position:100% 0}
  100%{-webkit-mask-position:0% 0;mask-position:0% 0}
}

/* 子要素が順にふわっと上がって現れる（--seq-delayで時間差） */
.fade-up-seq > *{
  opacity:0;transform:translateY(18px);
  animation:fadeUpSeq .9s var(--ease) forwards;
  animation-delay:var(--seq-delay,0s);
}
@keyframes fadeUpSeq{to{opacity:1;transform:translateY(0)}}

/* スクロールフロー（.sflow-item の --p / data-state はmain.jsが書き込む） */
.sflow{position:relative;overflow:hidden}
.sflow-item{
  position:absolute;inset:0;
  opacity:1;transform:none;
  will-change:transform,opacity;
}
.sflow-item[data-state="current"]{opacity:1;transform:translateY(0)}
.sflow-item[data-state="prev"]{
  opacity:calc(1 - var(--p,0));
  transform:translateY(calc(var(--p,0) * -48px));
}
.sflow-item[data-state="next"]{
  opacity:var(--p,0);
  transform:translateY(calc(48px - (var(--p,0) * 48px)));
}

/* ============================================
   ローダー
   ============================================ */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--porcelain);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease,visibility .5s ease;
}
.loader .mark{
  width:56px;height:56px;border-radius:2px;border:1.5px solid var(--slate);background:none;color:var(--slate);
  font-family:"Zen Old Mincho",serif;font-weight:500;font-size:24px;display:grid;place-items:center;
  opacity:0;transform:scale(.82);
  animation:loaderIn .9s var(--ease) forwards;
}
@keyframes loaderIn{
  0%{opacity:0;transform:scale(.82)}
  55%{opacity:1;transform:scale(1.04)}
  100%{opacity:1;transform:scale(1)}
}
.loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader.is-skip{display:none}

/* ============================================
   モーション低減設定
   ============================================ */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto!important}
  .rv{opacity:1!important;transform:none!important}
  .loader{display:none!important}
  .bg-drift{opacity:.5!important}
  .script-reveal{-webkit-mask-image:none!important;mask-image:none!important}
  .fade-up-seq > *{opacity:1!important;transform:none!important}
  .sflow-item{opacity:1!important;transform:none!important}
}