/* =========================================================
   佐久間歯科医院  Design System  —  Yume Design
   鉄紺 × 砂金 × 白磁 / 明朝 × Noto Sans × Cormorant
   ========================================================= */

:root{
  --hakuji:#F7F4EF;   /* base bg */
  --yuki:#EFEBE3;     /* subtle panel */
  --tetsu:#1B2A44;    /* deep navy */
  --tetsu2:#16243a;   /* darker navy */
  --konkage:#24395B;
  --sakin:#A8894A;    /* gold */
  --awasakin:#C2A86E; /* light gold */
  --sumi:#22242A;     /* ink text */
  --sumi70:rgba(34,36,42,.72);
  --sumi55:rgba(34,36,42,.56);
  --kasumi:#767980;
  --kinari:#F2EFE8;   /* off-white on dark */
  --line:rgba(34,36,42,.12);
  --line-d:rgba(242,239,232,.16);

  --mincho:"Shippori Mincho B1",serif;
  --gothic:"Noto Sans JP",sans-serif;
  --en:"Cormorant Garamond",serif;

  --maxw:1180px;
  --gut:clamp(20px,5vw,40px);

  /* fluid type */
  --fs-eyebrow:11px;
  --fs-body:clamp(14px,1.6vw,15.5px);
  --fs-lead:clamp(15px,1.9vw,17px);
  --fs-h3:clamp(19px,2.4vw,23px);
  --fs-h2:clamp(26px,4.4vw,42px);
  --fs-h1:clamp(33px,6vw,66px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--gothic); font-weight:300; color:var(--sumi);
  background:var(--hakuji); line-height:1.9; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(168,137,74,.22); }

.mincho{ font-family:var(--mincho); }
.en{ font-family:var(--en); }
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(64px,11vw,140px); }
.center{ text-align:center; }

/* eyebrow / headings */
.eyebrow{ font-family:var(--en); text-transform:uppercase; letter-spacing:.3em;
  font-size:var(--fs-eyebrow); color:var(--sakin); display:inline-block; }
.h2{ font-family:var(--mincho); font-weight:500; font-size:var(--fs-h2);
  line-height:1.45; letter-spacing:.02em; color:var(--tetsu); }
.h3{ font-family:var(--mincho); font-weight:500; font-size:var(--fs-h3);
  line-height:1.5; color:var(--tetsu); }
.lead{ font-size:var(--fs-lead); line-height:2.05; color:var(--sumi70); }
.on-dark .h2,.on-dark .h3{ color:var(--kinari); }
.on-dark .lead,.on-dark p{ color:rgba(242,239,232,.82); }

.rule{ width:62px; height:1px; background:linear-gradient(90deg,var(--sakin),transparent); margin-top:26px; }
.rule.center{ margin-inline:auto; background:linear-gradient(90deg,transparent,var(--sakin),transparent); }
.hairline{ height:1px; background:var(--line); border:0; }

.num-en{ font-family:var(--en); line-height:1; color:var(--sakin); }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:12px; font-size:14px; letter-spacing:.06em;
  padding:15px 30px; border-radius:2px; transition:transform .35s ease, background .35s, color .35s, border-color .35s; }
.btn:hover{ transform:translateY(-2px); }
.btn-gold{ background:var(--sakin); color:#fff; }
.btn-gold:hover{ background:#b6985a; }
.btn-line{ border:1px solid var(--tetsu); color:var(--tetsu); }
.btn-line:hover{ background:var(--tetsu); color:var(--kinari); }
.btn-ghost{ border:1px solid rgba(242,239,232,.45); color:var(--kinari); }
.btn-ghost:hover{ border-color:var(--awasakin); }
.btn svg{ width:16px; height:16px; }

/* =================== HEADER =================== */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:60; transition:background .5s, box-shadow .5s, border-color .5s; border-bottom:1px solid transparent; }
.site-header.scrolled{ background:rgba(247,244,239,.98); border-bottom:1px solid var(--line); }
.header-inner{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); height:72px; display:flex; align-items:center; justify-content:space-between; }
@media(min-width:768px){ .header-inner{ height:84px; } }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:30px; width:auto; transition:opacity .4s; }
.brand .brand-fallback{ font-family:var(--mincho); font-size:20px; letter-spacing:.06em; }
/* logo is gold-on-light; show light wordmark on transparent(dark) hero, real logo after scroll */
.brand .logo-light{ display:block; }
.brand .logo-dark{ display:none; }
.site-header.scrolled .brand .logo-light{ display:none; }
.site-header.scrolled .brand .logo-dark{ display:block; }

.nav{ display:none; align-items:center; gap:34px; }
@media(min-width:1024px){ .nav{ display:flex; } }
.nav a.navlink{ position:relative; font-size:14px; letter-spacing:.04em; color:var(--kinari); transition:color .3s; padding-block:6px; }
.nav a.navlink::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--sakin); transition:width .4s; }
.nav a.navlink:hover::after,.nav a.navlink.active::after{ width:100%; }
.site-header.scrolled .nav a.navlink{ color:var(--sumi); }
.nav .tel{ font-family:var(--en); font-size:21px; letter-spacing:.04em; color:var(--kinari); display:flex; align-items:center; gap:8px; }
.nav .tel small{ font-family:var(--gothic); font-size:11px; letter-spacing:.12em; color:var(--awasakin); }
.site-header.scrolled .nav .tel{ color:var(--tetsu); }

.burger{ display:flex; flex-direction:column; gap:6px; width:34px; height:34px; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; }
@media(min-width:1024px){ .burger{ display:none; } }
.burger span{ display:block; width:24px; height:1px; background:var(--kinari); transition:.35s; }
.site-header.scrolled .burger span{ background:var(--sumi); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{ position:fixed; inset:0; z-index:55; background:rgba(27,42,68,.99);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; text-align:center;
  opacity:0; visibility:hidden; transition:opacity .45s; }
.mobile-menu.open{ opacity:1; visibility:visible; }
.mobile-menu a{ font-family:var(--mincho); color:var(--kinari); font-size:21px; letter-spacing:.05em; }
.mobile-menu .tel{ font-family:var(--en); color:var(--awasakin); font-size:30px; margin-top:6px; }
.mobile-menu small{ color:rgba(242,239,232,.6); font-size:12px; }

/* =================== HERO (top page) =================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.hero-slides{ position:absolute; inset:0; z-index:0; }
.hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.6s ease; transform:scale(1.06); }
.hero-slide{ transform:none; }
.hero-slide.active{ opacity:1; }
.hero-overlay{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg, rgba(20,32,52,.92) 0%, rgba(22,36,58,.78) 42%, rgba(22,36,58,.42) 100%); }
.hero-grain{ position:absolute; inset:0; z-index:2; opacity:.04; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero .container{ position:relative; z-index:3; padding-top:90px; padding-bottom:60px; }
.hero h1{ font-family:var(--mincho); font-weight:500; color:var(--kinari);
  font-size:var(--fs-h1); line-height:1.34; letter-spacing:.02em; }
.hero .reveal-line{ display:block; overflow:hidden; }
.hero .reveal-line>span{ display:block; }
.hero-lead{ color:rgba(242,239,232,.86); font-size:var(--fs-lead); line-height:2.05; margin-top:34px; max-width:34em; }
.hero-tags{ color:rgba(194,168,110,.92); font-size:13px; letter-spacing:.05em; margin-top:26px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:40px; }
.hero-scroll{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3; }
.hero-scroll i{ display:block; width:1px; height:48px; background:rgba(242,239,232,.28); position:relative; overflow:hidden; }
.hero-scroll i::after{ content:""; position:absolute; top:0; left:0; width:100%; height:16px; background:var(--awasakin); animation:scrolldot 2s ease-in-out infinite; }
@keyframes scrolldot{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(300%);} }

/* page hero (sub pages) */
.page-hero{ position:relative; padding-top:140px; padding-bottom:64px; background:var(--tetsu); overflow:hidden; }
.page-hero::before{ content:""; position:absolute; inset:0; background:
  radial-gradient(110% 120% at 85% 0%, rgba(36,57,91,.7), transparent 60%); }
.page-hero .container{ position:relative; z-index:2; }
.page-hero .eyebrow{ color:var(--awasakin); }
.page-hero h1{ font-family:var(--mincho); font-weight:500; color:var(--kinari); font-size:clamp(28px,5vw,46px); line-height:1.4; margin-top:14px; }
.crumbs{ font-size:12px; color:rgba(242,239,232,.5); margin-top:18px; letter-spacing:.04em; }
.crumbs a:hover{ color:var(--awasakin); }

/* =================== LAYOUT HELPERS =================== */
.grid{ display:grid; gap:clamp(28px,4vw,56px); }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.grid-4{ grid-template-columns:1fr 1fr; }
@media(min-width:768px){ .grid-2{ grid-template-columns:1fr 1fr; } .grid-3{ grid-template-columns:repeat(3,1fr);} }
@media(min-width:900px){ .grid-4{ grid-template-columns:repeat(4,1fr);} }
.split{ display:grid; gap:clamp(32px,5vw,72px); align-items:center; grid-template-columns:1fr; }
@media(min-width:900px){ .split{ grid-template-columns:1fr 1fr; } .split.wide-l{ grid-template-columns:1.15fr .85fr; } .split.wide-r{ grid-template-columns:.85fr 1.15fr; } }

.figure{ position:relative; overflow:hidden; border-radius:2px; }
.figure img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease; }
.figure.ratio-43{ aspect-ratio:4/3; }
.figure.ratio-11{ aspect-ratio:1/1; }
.figure.ratio-45{ aspect-ratio:4/5; }
.figure.ratio-32{ aspect-ratio:3/2; }
.figure.ratio-169{ aspect-ratio:16/9; }
.figure.frame{ outline:1px solid var(--line); outline-offset:8px; }
.figcap{ font-size:11px; letter-spacing:.1em; color:var(--kasumi); margin-top:14px; }

/* circular portrait (院長) — 丸く切り抜き＋砂金のリング */
.figure.round{ aspect-ratio:1/1; border-radius:50%; overflow:visible; }
.figure.round img{ border-radius:50%; }
.figure.round::after{ content:""; position:absolute; inset:-13px; border-radius:50%;
  border:1px solid var(--awasakin); opacity:.7; pointer-events:none; }
@media(min-width:900px){ .figure.round::after{ inset:-17px; } }

/* =================== INTRO / LEAD BLOCK =================== */
.intro-quote{ font-family:var(--mincho); font-weight:500; color:var(--tetsu);
  font-size:clamp(22px,3.6vw,36px); line-height:1.65; letter-spacing:.02em; }

/* =================== REASON / STRENGTH =================== */
.reason{ display:flex; gap:22px; padding-block:30px; border-top:1px solid var(--line); }
.reason:last-child{ border-bottom:1px solid var(--line); }
.reason .rn{ font-family:var(--en); font-size:38px; color:var(--sakin); line-height:1; flex:0 0 auto; width:58px; }

/* =================== TREATMENT CARD =================== */
.tcard{ background:#fff; border:1px solid var(--line); border-radius:2px; overflow:hidden; transition:transform .5s, box-shadow .5s; display:flex; flex-direction:column; }
.tcard:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -30px rgba(27,42,68,.4); }
.tcard .figure{ border-radius:0; }
.tcard-body{ padding:26px 24px 28px; flex:1; display:flex; flex-direction:column; }
.tcard .en-min{ font-family:var(--en); letter-spacing:.18em; text-transform:uppercase; font-size:12px; color:var(--sakin); }
.tcard h3{ font-family:var(--mincho); font-size:var(--fs-h3); color:var(--tetsu); margin:8px 0 12px; }
.tcard p{ font-size:13.5px; line-height:1.95; color:var(--sumi70); }

/* free / jiyu note */
.jiyu{ background:var(--yuki); border-left:2px solid var(--sakin); padding:14px 16px; font-size:11.5px; line-height:1.85; color:var(--sumi55); margin-top:18px; }
.jiyu b{ color:var(--sakin); font-weight:500; }

/* =================== EQUIP CARD =================== */
.equip{ background:#fff; border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.equip .figure{ aspect-ratio:4/3; background:var(--yuki); }
.equip-body{ padding:18px 20px 22px; }
.equip-body .no{ font-family:var(--en); font-size:18px; color:var(--sakin); }
.equip-body h3{ font-family:var(--mincho); font-size:17px; color:var(--tetsu); margin:4px 0 8px; }
.equip-body p{ font-size:12.5px; line-height:1.85; color:var(--sumi70); }

/* =================== NEWS =================== */
.news-item{ display:grid; grid-template-columns:1fr; gap:4px; padding-block:22px; border-top:1px solid var(--line); }
@media(min-width:640px){ .news-item{ grid-template-columns:130px 1fr; gap:24px; align-items:baseline; } }
.news-item:last-child{ border-bottom:1px solid var(--line); }
.news-date{ font-family:var(--en); font-size:15px; letter-spacing:.08em; color:var(--sakin); }
.news-item h3{ font-family:var(--mincho); font-size:16px; color:var(--tetsu); margin-bottom:4px; font-weight:500; }
.news-item p{ font-size:13px; color:var(--sumi70); line-height:1.8; }

/* =================== FLOW (初診の流れ) =================== */
.flow{ counter-reset:flow; }
.flow-step{ display:grid; grid-template-columns:auto 1fr; gap:22px; padding-block:28px; border-top:1px solid var(--line); position:relative; }
.flow-step:last-child{ border-bottom:1px solid var(--line); }
.flow-no{ font-family:var(--en); font-size:30px; color:var(--sakin); line-height:1; }
.flow-step h3{ font-family:var(--mincho); font-size:19px; color:var(--tetsu); margin-bottom:8px; }
.flow-step p{ font-size:13.5px; color:var(--sumi70); line-height:1.95; }

/* =================== FAQ =================== */
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-q{ display:flex; gap:16px; align-items:flex-start; width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:24px 0; font-family:var(--mincho); font-size:16.5px; color:var(--tetsu); }
.faq-q .qmark{ font-family:var(--en); color:var(--sakin); font-size:20px; line-height:1.2; flex:0 0 auto; }
.faq-q .plus{ margin-left:auto; position:relative; width:16px; height:16px; flex:0 0 auto; margin-top:3px; }
.faq-q .plus::before,.faq-q .plus::after{ content:""; position:absolute; background:var(--sakin); transition:.35s; }
.faq-q .plus::before{ top:7px; left:0; width:16px; height:1.5px; }
.faq-q .plus::after{ left:7px; top:0; width:1.5px; height:16px; }
.faq-item.open .plus::after{ transform:rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .45s ease; }
.faq-a-inner{ padding:0 0 26px 36px; font-size:13.5px; line-height:2; color:var(--sumi70); }

/* =================== SCHEDULE =================== */
.schedule{ width:100%; border-collapse:collapse; }
.schedule th,.schedule td{ border:1px solid var(--line); padding:12px 4px; text-align:center; font-size:14px; font-weight:400; }
.schedule thead th{ background:var(--yuki); font-weight:500; }
.schedule .tcorner{ background:var(--yuki); }
.schedule .on{ color:var(--sakin); }
.schedule .off{ color:var(--kasumi); }
.schedule .tcol{ font-size:12.5px; text-align:left; padding-left:12px; white-space:nowrap; }
.note{ font-size:12.5px; line-height:1.85; color:var(--sumi70); margin-top:14px; }
.note .ast{ color:var(--sakin); }

/* info dl */
.infolist dt{ font-size:12px; letter-spacing:.1em; color:var(--kasumi); }
.infolist dd{ font-size:15px; color:var(--sumi); margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.infolist dd:last-child{ border-bottom:0; }
.tel-big{ font-family:var(--en); font-size:30px; letter-spacing:.03em; color:var(--tetsu); display:block; line-height:1.1; }

/* map */
.map{ width:100%; aspect-ratio:4/3; border-radius:2px; overflow:hidden; outline:1px solid var(--line); outline-offset:0; }
.map iframe{ width:100%; height:100%; border:0; }
@media(min-width:900px){ .map{ aspect-ratio:auto; height:100%; min-height:420px; } }

/* =================== CTA =================== */
.cta{ background:var(--tetsu); position:relative; overflow:hidden; }
.cta .container{ position:relative; z-index:2; }
.cta-tel{ font-family:var(--en); font-size:clamp(38px,7vw,54px); color:var(--awasakin); letter-spacing:.03em; line-height:1; display:inline-block; transition:color .35s; }
.cta-tel:hover{ color:var(--kinari); }

/* =================== FOOTER =================== */
.footer{ background:var(--tetsu2); color:rgba(242,239,232,.7); padding-block:64px 28px; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:36px; }
@media(min-width:768px){ .footer-grid{ grid-template-columns:1.6fr 1fr 1fr; } }
.footer .fbrand{ font-family:var(--mincho); color:var(--kinari); font-size:21px; letter-spacing:.06em; margin-bottom:14px; }
.footer a:hover{ color:var(--awasakin); }
.footer nav{ display:flex; flex-direction:column; gap:12px; font-size:13px; }
.footer .fsmall{ font-size:12.5px; line-height:1.95; }
.footer-bottom{ display:flex; flex-direction:column; gap:10px; justify-content:space-between; align-items:center; margin-top:42px; padding-top:22px; border-top:1px solid var(--line-d); }
@media(min-width:640px){ .footer-bottom{ flex-direction:row; } }
.footer-bottom .en{ font-family:var(--en); letter-spacing:.22em; text-transform:uppercase; font-size:11px; color:rgba(242,239,232,.45); }
.footer-bottom small{ font-size:11px; color:rgba(242,239,232,.45); }

/* =================== REVEAL (progressive enhancement) =================== */
html.js [data-reveal]{ opacity:0; transform:translateY(26px); }
html.js [data-hero]{ opacity:0; transform:translateY(18px); }
html.js .hero .reveal-line>span{ transform:translateY(118%); }
@media(prefers-reduced-motion:reduce){
  html.js [data-reveal],html.js [data-hero]{ opacity:1!important; transform:none!important; }
  html.js .hero .reveal-line>span{ transform:none!important; }
  html{ scroll-behavior:auto; }
  .hero-slide.active{ animation:none; }
}

/* bg utilities */
.bg-tetsu{ background:var(--tetsu); }
.bg-yuki{ background:var(--yuki); }
.bg-hakuji{ background:var(--hakuji); }
.tcenter{ text-align:center; }
.mt-s{ margin-top:18px; } .mt-m{ margin-top:32px; } .mt-l{ margin-top:56px; }
.maxw-40{ max-width:40em; } .maxw-30{ max-width:30em; }

/* =================== RESERVE CTA =================== */
.cta-reserve{ display:inline-flex; align-items:center; gap:8px; background:var(--sakin); color:#fff!important;
  font-size:13px; letter-spacing:.04em; padding:11px 20px; border-radius:2px; margin-left:6px;
  transition:transform .3s, background .3s; }
.cta-reserve:hover{ transform:translateY(-2px); background:#b6985a; }
.cta-reserve svg{ width:17px; height:17px; }
.site-header.scrolled .cta-reserve{ color:#fff!important; }

/* mobile sticky bar */
.mobilebar{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; gap:1px;
  box-shadow:0 -6px 24px -12px rgba(0,0,0,.4); }
@media(min-width:1024px){ .mobilebar{ display:none!important; } }
.mobilebar a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:11px 4px 12px; font-size:11.5px; letter-spacing:.04em; color:#fff; line-height:1; }
.mobilebar a svg{ width:19px; height:19px; }
.mobilebar .mb-call{ background:var(--tetsu); }
.mobilebar .mb-web{ background:var(--sakin); }
.mobilebar a span{ font-weight:400; }
body.has-mobilebar{ padding-bottom:60px; }
@media(min-width:1024px){ body.has-mobilebar{ padding-bottom:0; } }
.footer{ position:relative; z-index:1; }

/* =================== FORM =================== */
.form-wrap{ max-width:760px; margin-inline:auto; }
.form-row{ margin-bottom:22px; }
.form-row label{ display:block; font-size:13px; letter-spacing:.04em; color:var(--sumi); margin-bottom:8px; font-weight:400; }
.form-row label .req{ color:#b5482f; font-size:11px; margin-left:6px; }
.form-row label .opt{ color:var(--kasumi); font-size:11px; margin-left:6px; }
.form-row input[type=text], .form-row input[type=tel], .form-row input[type=email], .form-row input[type=date], .form-row select, .form-row textarea{
  width:100%; font-family:var(--gothic); font-size:15px; color:var(--sumi); background:#fff;
  border:1px solid rgba(34,36,42,.18); border-radius:2px; padding:13px 14px; transition:border-color .3s; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline:none; border-color:var(--sakin); }
.form-row textarea{ min-height:120px; resize:vertical; }
.form-grid2{ display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:600px){ .form-grid2{ grid-template-columns:1fr 1fr; } }
.form-grid3{ display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:600px){ .form-grid3{ grid-template-columns:1fr 1fr 1fr; } }
.radio-pills{ display:flex; gap:10px; flex-wrap:wrap; }
.radio-pills label{ margin:0; cursor:pointer; }
.radio-pills input{ position:absolute; opacity:0; }
.radio-pills span{ display:inline-block; padding:10px 22px; border:1px solid rgba(34,36,42,.2); border-radius:2px; font-size:14px; transition:.25s; }
.radio-pills input:checked + span{ background:var(--tetsu); color:var(--kinari); border-color:var(--tetsu); }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--sumi70); }
.consent input{ margin-top:3px; }
.form-submit{ width:100%; background:var(--sakin); color:#fff; border:0; font-family:var(--gothic);
  font-size:16px; letter-spacing:.08em; padding:17px; border-radius:2px; cursor:pointer; transition:transform .3s, background .3s; }
.form-submit:hover{ transform:translateY(-2px); background:#b6985a; }
.form-submit:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.form-note{ font-size:12.5px; color:var(--kasumi); line-height:1.8; }
.form-success{ display:none; background:var(--yuki); border-left:3px solid var(--sakin); padding:24px; border-radius:2px; }
.form-success.show{ display:block; }
.line-btn{ display:inline-flex; align-items:center; gap:10px; background:#06C755; color:#fff!important; padding:14px 26px; border-radius:2px; font-size:15px; transition:transform .3s; }
.line-btn:hover{ transform:translateY(-2px); }

/* =================== PREMIUM EFFECTS =================== */
/* frame付き画像はGSAPで出現（下から開くワイプ＋奥行きスケール）。CSS transitionは切ってカクつき防止 */
.figure img{ will-change:transform; }
html.js .figure.frame img{ transition:none; }
/* frame以外の画像（カード等）はホバーでゆっくり寄る */
.figure:not(.frame) img{ transition:transform .9s cubic-bezier(.2,.8,.2,1); }
.figure:not(.frame):hover img{ transform:scale(1.045); }
/* magnetic CTA smoothing */
.cta-reserve,.btn-gold,.cta-tel{ will-change:transform; }
/* opening loader (first visit only) */
#sk-loader{ position:fixed; inset:0; z-index:9999; background:var(--tetsu);
  display:flex; align-items:center; justify-content:center; }
#sk-loader img{ width:240px; max-width:64vw; height:auto;
  opacity:0; transform:translateY(10px); animation:skLogoIn .9s .15s forwards cubic-bezier(.2,.8,.2,1); }
@keyframes skLogoIn{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ #sk-loader img{ animation:none; opacity:1; transform:none; } }