/* =========================================================
   YUTABI — 国内温泉旅行専門
   BYAKU Narai を忠実に再現:
   黒地×白 / 古典明朝(筑紫オールド明朝→Shippori) / 清御隷書→Yuji Syuku
   / Garamond→EB Garamond / 完全モノクローム / 縦書き
   ========================================================= */

:root{
  --bg:        #0a0908;   /* ほぼ純黒(墨) */
  --bg-2:      #121110;   /* 微明パネル */
  --bg-3:      #17150f;   /* 微明パネル2 */
  --text:      #f3f0ea;   /* 温白 */
  --text-mute: #aaaaaa;   /* 清御隷書 色 #aaa 準拠 */
  --text-dim:  #8d8d8d;   /* グレー */
  --text-dark: #6c6c6c;
  --line:      rgba(243,240,234,0.16);
  --line-soft: rgba(243,240,234,0.08);

  --mincho: "Shippori Mincho","Hiragino Mincho ProN",游明朝,"Yu Mincho",serif;
  --brush:  "Yuji Syuku","Shippori Mincho",serif;     /* 清御隷書体 代替 */
  --latin:  "EB Garamond","Shippori Mincho",serif;     /* Garamond 系 */
  --sans:   "Noto Sans JP",system-ui,sans-serif;

  --e: cubic-bezier(.16,1,.3,1);

  --maxw: 1200px;
  --pad: clamp(22px, 5vw, 88px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--mincho);
  font-weight:500;
  color:var(--text);
  background:var(--bg);
  line-height:1.9;
  letter-spacing:0.1em;
  font-size:15px;
  overflow-x:hidden;
  text-wrap:pretty;
  word-break:normal;
  line-break:strict;
  -webkit-font-smoothing:antialiased;
}
/* 本文の行末約物・泣き別れ対策 */
.about-body p, .reason-text p, .message-body p, .sec-intro,
.style-card p, .support-item p, .area-spots, .contact-lead, .hero-lead{
  text-wrap:pretty;
}
.nb{ white-space:nowrap; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--text); color:var(--bg); }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); position:relative; z-index:2; }
section{ position:relative; }

/* =================== SPLASH =================== */
.splash{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
  transition:opacity 1.2s var(--e), visibility 0s linear 1.2s;
  overflow:hidden;
}
.splash-inner{ position:relative; text-align:center; color:var(--text); }
.splash-en{
  display:block; font-family:var(--latin); font-style:italic; font-weight:500;
  font-size:clamp(44px,9vw,104px); letter-spacing:0.16em; color:var(--text);
  opacity:0; transform:translateY(12px); animation:splashIn 1.1s var(--e) .2s forwards;
}
.splash-jp{
  display:block; font-family:var(--brush); font-size:clamp(18px,3.2vw,28px);
  letter-spacing:0.7em; margin-top:.7em; padding-left:0.7em; color:var(--text-mute);
  opacity:0; transform:translateY(12px); animation:splashIn 1.1s var(--e) .55s forwards;
}
.splash-tag{
  display:block; font-size:10px; letter-spacing:0.46em; color:var(--text-dim); margin-top:2.2em; padding-left:0.46em;
  opacity:0; animation:splashIn 1.1s var(--e) .9s forwards;
}
@keyframes splashIn{ to{ opacity:1; transform:translateY(0);} }
body.is-loaded .splash{ opacity:0; visibility:hidden; pointer-events:none; }

/* =================== SCROLL PROGRESS =================== */
.scroll-progress{ position:fixed; top:0; left:0; height:1px; width:0%; background:var(--text); opacity:.7; z-index:9000; }

/* =================== FIXED VERTICAL CTA (BYAKU c-conversion__btn) =================== */
.v-cta{
  position:fixed; top:50%; right:clamp(14px,2.5vw,40px); transform:translateY(-50%);
  z-index:900; writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl;
  font-family:var(--mincho); font-size:14px; font-weight:600; letter-spacing:0.34em;
  color:var(--text); padding:26px 12px; border:1px solid var(--line);
  background:rgba(10,9,8,0.35); backdrop-filter:blur(4px);
  transition:background .4s var(--e), color .4s var(--e), border-color .4s var(--e);
  opacity:0; animation:splashIn 1s var(--e) 2s forwards;
}
.v-cta:hover{ background:var(--text); color:var(--bg); border-color:var(--text); }
@media (max-width:880px){ .v-cta{ display:none; } }

/* =================== HEADER =================== */
#header{
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:30px var(--pad);
  transition:padding .6s var(--e), background .6s var(--e), box-shadow .6s var(--e);
}
#header.scrolled{
  padding:16px var(--pad);
  background:rgba(10,9,8,0.7);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line-soft);
}
.logo{ display:inline-flex; align-items:baseline; gap:9px; color:var(--text); }
.logo-kabu{ font-size:10px; font-weight:500; letter-spacing:0.24em; opacity:.72; transform:translateY(-1px); }
.logo-name{ font-family:var(--latin); font-style:italic; font-size:26px; letter-spacing:0.14em; }

.nav{ display:flex; align-items:center; gap:28px; }
.nav a{ font-family:var(--mincho); font-size:13px; font-weight:500; color:var(--text); letter-spacing:0.14em; position:relative; transition:opacity .3s; opacity:.82; }
.nav a:hover{ opacity:1; }
.nav a:not(.nav-cta)::after{ content:""; position:absolute; left:0; bottom:-7px; width:0; height:1px; background:var(--text); transition:width .45s var(--e); }
.nav a:not(.nav-cta):hover::after{ width:100%; }
.nav-cta{ border:1px solid var(--line); padding:9px 22px; opacity:1; transition:all .45s var(--e); }
.nav-cta:hover{ background:var(--text); border-color:var(--text); color:var(--bg) !important; }

.burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.burger span{ display:block; width:24px; height:1px; background:var(--text); transition:.4s var(--e); }
body.drawer-open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.drawer-open .burger span:nth-child(2){ opacity:0; }
body.drawer-open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:999; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  opacity:0; visibility:hidden; transition:opacity .6s var(--e), visibility 0s linear .6s;
}
body.drawer-open .drawer{ opacity:1; visibility:visible; transition:opacity .6s var(--e); }
.drawer a{ font-family:var(--mincho); font-size:18px; color:var(--text); padding:11px; letter-spacing:0.16em; opacity:.85; }
.drawer-cta{ margin-top:18px; border:1px solid var(--line); padding:12px 34px; }

/* =================== HERO =================== */
.hero{ position:relative; height:100svh; min-height:600px; display:flex; align-items:center; justify-content:center; overflow:hidden; text-align:center; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-img{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,9,8,0.5) 0%, rgba(10,9,8,0.42) 42%, rgba(10,9,8,0.82) 100%),
    url('../images/hero.jpg') center 40% / cover no-repeat,
    #0a0908;
  transform:scale(1.08);
}
.steam{ position:absolute; bottom:-12%; width:46vw; height:92%; background:radial-gradient(ellipse at center bottom, rgba(255,250,240,0.06), transparent 66%); filter:blur(34px); opacity:.6; pointer-events:none; }
.steam-1{ left:-8%; animation:steamRise 11s ease-in-out infinite; }
.steam-2{ left:30%; animation:steamRise 13s ease-in-out infinite 1.8s; opacity:.4; }
.steam-3{ right:-10%; left:auto; animation:steamRise 10s ease-in-out infinite 1s; opacity:.5; }
@keyframes steamRise{ 0%,100%{ transform:translateY(8%) scaleX(1); opacity:.3; } 50%{ transform:translateY(-7%) scaleX(1.12); opacity:.58; } }

.hero-inner{ position:relative; z-index:3; color:var(--text); padding:0 var(--pad); max-width:980px; }
.hero-eyebrow{ display:block; margin-bottom:34px; }
.hero-eyebrow .en{ font-family:var(--latin); font-style:italic; font-size:clamp(15px,1.8vw,20px); letter-spacing:0.3em; color:var(--text-mute); }
.hero-title{ font-family:var(--mincho); font-weight:600; font-size:clamp(38px,7vw,90px); line-height:1.55; letter-spacing:0.16em; }
.hero-lead{ margin-top:38px; font-family:var(--mincho); font-size:clamp(13px,1.5vw,16px); font-weight:400; line-height:2.4; letter-spacing:0.14em; color:var(--text-mute); }
.hero-scroll{ position:absolute; bottom:clamp(40px,7vh,70px); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero-scroll span:first-child{ font-family:var(--latin); font-style:italic; font-size:12px; letter-spacing:0.3em; color:var(--text-dim); writing-mode:vertical-rl; }
.hero-scroll-line{ width:1px; height:56px; background:linear-gradient(var(--text-mute), transparent); position:relative; overflow:hidden; }
.hero-scroll-line::after{ content:""; position:absolute; top:-56px; left:0; width:1px; height:56px; background:var(--text); animation:scrollDot 2.4s var(--e) infinite; }
@keyframes scrollDot{ to{ top:56px; } }

/* =================== SECTION COMMON =================== */
.section{ padding:clamp(86px,12vw,168px) 0; }
.sec-head{ position:relative; margin-bottom:clamp(50px,6vw,76px); }
.sec-vert{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--latin); font-style:italic; font-size:14px; letter-spacing:0.22em; color:var(--text-dim);
  margin-bottom:16px;
}
.sec-vert::after{ content:""; width:36px; height:1px; background:var(--line); }
.chapter{ display:block; font-family:var(--brush); font-size:15px; letter-spacing:0.3em; color:var(--text-mute); margin-bottom:16px; }
.sec-eyebrow{ font-family:var(--mincho); font-weight:600; font-size:clamp(24px,3.6vw,42px); letter-spacing:0.14em; color:var(--text); line-height:1.5; display:block; }
.sec-intro{ font-family:var(--mincho); font-size:clamp(14px,1.6vw,16.5px); max-width:760px; color:var(--text-mute); margin-bottom:clamp(48px,5vw,66px); line-height:2.4; }

/* light-band variants now just tonal panels */
.sec-head-light .sec-eyebrow{ color:var(--text); }
.sec-intro-light{ color:var(--text-mute); }

/* =================== ABOUT =================== */
.about{ background:var(--bg); }
.about-grid{ display:grid; grid-template-columns:1fr 1.45fr; gap:clamp(40px,7vw,110px); align-items:start; }
.quote-main{ font-family:var(--mincho); font-weight:600; font-size:clamp(30px,4.6vw,58px); line-height:1.55; color:var(--text); letter-spacing:0.1em; }
.quote-sub{ margin-top:28px; font-family:var(--brush); font-size:18px; color:var(--text-mute); letter-spacing:0.12em; line-height:2; }
.about-body p{ margin-bottom:1.9em; color:var(--text-mute); }
.about-body p:last-child{ margin-bottom:0; }

/* =================== REASONS =================== */
.reasons{ background:var(--bg); }
.reason-list{ border-top:1px solid var(--line); }
.reason{ display:grid; grid-template-columns:120px 1fr; gap:clamp(20px,4vw,64px); padding:clamp(40px,5vw,62px) 0; border-bottom:1px solid var(--line); align-items:start; transition:background .6s var(--e); }
.reason:hover{ background:var(--bg-2); }
.reason-num{ font-family:var(--latin); font-style:italic; font-size:clamp(42px,5vw,66px); color:var(--text-dim); line-height:1; }
.reason-text h3{ font-family:var(--mincho); font-weight:600; font-size:clamp(19px,2.4vw,28px); color:var(--text); line-height:1.7; letter-spacing:0.08em; margin-bottom:20px; }
.reason-text p{ color:var(--text-mute); max-width:780px; }

/* =================== STYLES =================== */
.styles{ background:var(--bg-2); }
.style-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.style-card{ background:var(--bg); padding:clamp(34px,4vw,54px); position:relative; transition:background .6s var(--e); }
.style-card:hover{ background:var(--bg-3); }
.style-card-wide{ grid-column:1 / -1; }
.style-en{ font-family:var(--latin); font-style:italic; font-size:18px; letter-spacing:0.14em; color:var(--text-dim); }
.style-card h3{ font-family:var(--mincho); font-weight:600; font-size:clamp(20px,2.6vw,29px); color:var(--text); margin:10px 0 16px; letter-spacing:0.08em; }
.style-card p{ color:var(--text-mute); font-size:14.5px; }

/* =================== 湯質 =================== */
.senshitsu{ background:var(--bg-3); overflow:hidden; }
.senshitsu-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.sen-tag{ background:var(--bg); padding:32px 26px; display:flex; flex-direction:column; gap:10px; cursor:default; transition:background .6s var(--e); }
.sen-tag:hover{ background:var(--bg-2); }
.sen-jp{ font-family:var(--mincho); font-weight:600; font-size:clamp(16px,1.9vw,21px); color:var(--text); letter-spacing:0.1em; }
.sen-en{ font-family:var(--latin); font-style:italic; font-size:13px; letter-spacing:0.14em; color:var(--text-dim); }

/* =================== AREAS =================== */
.areas{ background:var(--bg); }
.area-stats{ display:flex; justify-content:space-between; gap:clamp(30px,5vw,64px); flex-wrap:wrap; margin-bottom:66px; padding-bottom:58px; border-bottom:1px solid var(--line); }
.area-stat{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.area-stat .unit{ text-align:right; }
.area-stat .num{ font-family:var(--mincho); font-weight:600; font-size:clamp(46px,6.5vw,82px); color:var(--text); line-height:1; letter-spacing:0.03em; }
.area-stat .num .plus{ color:var(--text-dim); font-size:.6em; vertical-align:super; }
.area-stat .unit{ font-size:12px; letter-spacing:0.18em; color:var(--text-dim); }
.area-list{ border-top:1px solid var(--line); }
.area-row{ display:grid; grid-template-columns:210px 1fr; gap:clamp(16px,4vw,52px); padding:28px 0; border-bottom:1px solid var(--line); align-items:baseline; transition:padding-left .5s var(--e); }
.area-row:hover{ padding-left:14px; }
.area-region{ font-family:var(--mincho); font-weight:600; font-size:clamp(17px,2vw,22px); color:var(--text); letter-spacing:0.1em; }
.area-spots{ color:var(--text-mute); font-size:14.5px; letter-spacing:0.08em; }

/* =================== SUPPORT =================== */
.support{ background:var(--bg-2); }
.support-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.support-item{ background:var(--bg); padding:clamp(32px,4vw,50px); transition:background .6s var(--e); }
.support-item:hover{ background:var(--bg-3); }
.support-item h4{ font-family:var(--mincho); font-weight:600; font-size:clamp(17px,2vw,22px); color:var(--text); margin-bottom:16px; letter-spacing:0.08em; position:relative; padding-left:26px; }
.support-item h4::before{ content:""; position:absolute; left:0; top:.75em; width:14px; height:1px; background:var(--text-dim); }
.support-item p{ color:var(--text-mute); font-size:14.5px; }

/* =================== MESSAGE =================== */
.message{ overflow:hidden; color:var(--text); background:var(--bg); }
.message-bg{ position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse at 22% 78%, rgba(40,35,28,0.6) 0%, var(--bg) 62%); }
.message-bg::after{ content:""; position:absolute; bottom:-15%; right:-10%; width:60vw; height:80%; background:radial-gradient(ellipse at center bottom, rgba(255,250,240,0.05), transparent 60%); filter:blur(34px); animation:steamRise 14s ease-in-out infinite; }
.message-inner{ max-width:840px; position:relative; }
.message-lead{ font-family:var(--mincho); font-weight:600; font-size:clamp(23px,3.4vw,42px); line-height:1.8; letter-spacing:0.1em; color:var(--text); margin-bottom:44px; }
.message-body p{ color:var(--text-mute); margin-bottom:1.8em; line-height:2.3; }
.message-sign{ margin-top:48px; display:flex; align-items:baseline; gap:18px; }
.sign-role{ font-size:12px; letter-spacing:0.2em; color:var(--text-dim); }
.sign-name{ font-family:var(--mincho); font-weight:600; font-size:clamp(22px,2.8vw,32px); letter-spacing:0.18em; color:var(--text); }

/* =================== SHOPS =================== */
.shops{ background:var(--bg); }
.shop-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.shop{ background:var(--bg); padding:clamp(28px,3vw,40px); display:flex; flex-direction:column; gap:10px; transition:background .6s var(--e); }
.shop-main{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:center; gap:24px; }
.shop-main .shop-name{ font-size:clamp(22px,3vw,30px); }
.shop:hover{ background:var(--bg-3); }
.shop-area{ font-family:var(--latin); font-style:italic; font-size:15px; letter-spacing:0.14em; color:var(--text-dim); }
.shop-name{ font-family:var(--mincho); font-weight:600; font-size:clamp(18px,2.2vw,24px); color:var(--text); letter-spacing:0.1em; }

/* =================== AWARDS =================== */
.awards{ background:var(--bg-2); }
.award-list{ list-style:none; max-width:880px; }
.award-list li{ font-family:var(--mincho); font-size:clamp(15px,1.8vw,18px); color:var(--text); padding:24px 0 24px 42px; border-bottom:1px solid var(--line); position:relative; letter-spacing:0.06em; }
.award-list li::before{ content:""; position:absolute; left:0; top:31px; width:7px; height:7px; border:1px solid var(--text-dim); border-radius:50%; }
.award-list li:first-child{ border-top:1px solid var(--line); }

/* =================== COMPANY =================== */
.company{ background:var(--bg); }
.company-table{ width:100%; border-collapse:collapse; max-width:940px; }
.company-table th, .company-table td{ text-align:left; padding:22px 0; border-bottom:1px solid var(--line); vertical-align:top; font-weight:400; font-size:14.5px; }
.company-table th{ width:220px; font-family:var(--mincho); font-weight:600; color:var(--text); letter-spacing:0.1em; padding-right:24px; }
.company-table td{ color:var(--text-mute); }

/* =================== CONTACT =================== */
.contact{ background:var(--bg-3); color:var(--text); text-align:center; overflow:hidden; }
.contact::before{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,9,8,0.82), rgba(10,9,8,0.9)),
    url('../images/contact-bg.jpg') center/cover no-repeat;
}
.contact-inner{ max-width:780px; margin:0 auto; position:relative; }
.contact-eyebrow{ display:block; font-family:var(--brush); font-size:17px; letter-spacing:0.3em; color:var(--text-mute); margin-bottom:14px; }
.contact-title{ font-family:var(--mincho); font-weight:600; font-size:clamp(28px,4.4vw,52px); line-height:1.55; letter-spacing:0.12em; color:var(--text); margin:14px 0 30px; }
.contact-lead{ color:var(--text-mute); font-size:clamp(13px,1.5vw,16px); line-height:2.2; margin-bottom:48px; }
.contact-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* outline button, fill on hover (monochrome) */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; padding:19px 42px; font-family:var(--mincho); font-weight:600; font-size:14.5px; letter-spacing:0.16em; cursor:pointer; overflow:hidden; border:1px solid var(--line); transition:color .5s var(--e), border-color .5s var(--e); }
.btn span{ position:relative; z-index:2; }
.btn::before{ content:""; position:absolute; inset:0; z-index:1; background:var(--text); transform:translateY(101%); transition:transform .55s var(--e); }
.btn:hover{ color:var(--bg); border-color:var(--text); }
.btn:hover::before{ transform:translateY(0); }
.btn-primary{ background:transparent; color:var(--text); }
.contact-note{ margin-top:36px; font-size:11.5px; letter-spacing:0.14em; color:var(--text-dim); }

/* =================== FOOTER =================== */
.footer{ background:var(--bg); color:var(--text-mute); padding:88px 0 44px; position:relative; z-index:2; border-top:1px solid var(--line); }
.footer-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:26px; }
.footer-logo{ display:inline-flex; align-items:baseline; gap:9px; color:var(--text); }
.footer-logo .logo-name{ font-family:var(--latin); font-style:italic; font-size:30px; letter-spacing:0.14em; }
.footer-logo .logo-kabu{ font-size:10px; letter-spacing:0.24em; opacity:.7; }
.footer-tag{ font-family:var(--mincho); font-size:14px; line-height:2.1; letter-spacing:0.12em; color:var(--text-mute); }
.footer-nav{ display:flex; gap:24px; flex-wrap:wrap; justify-content:center; }
.footer-nav a{ font-size:12.5px; letter-spacing:0.1em; color:var(--text-dim); transition:color .3s; }
.footer-nav a:hover{ color:var(--text); }
.footer-copy{ font-family:var(--latin); font-style:italic; font-size:13px; letter-spacing:0.14em; color:var(--text-dark); margin-top:8px; }

/* =================== REVEAL =================== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--e), transform 1.1s var(--e); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-d1{ transition-delay:.1s;} .reveal-d2{ transition-delay:.2s;} .reveal-d3{ transition-delay:.3s;} .reveal-d4{ transition-delay:.4s;}

.char-i{ display:inline-block; opacity:0; filter:blur(8px); transform:translateY(24px); transition:opacity .9s linear, filter 1s var(--e), transform 1.1s var(--e); }
.char-i.is-space{ width:.4em; }
.split.in .char-i{ opacity:1; filter:blur(0); transform:translateY(0); }

/* hero opening */
.hero-inner > *{ opacity:0; transform:translateY(22px); }
body.is-loaded .hero-eyebrow{ animation:heroIn 1.1s var(--e) .4s forwards; }
body.is-loaded .hero-title{ opacity:1; transform:none; }
body.is-loaded .hero-lead{ animation:heroIn 1.2s var(--e) 1.2s forwards; }
body.is-loaded .hero-scroll{ animation:heroIn 1s var(--e) 1.5s forwards; }
body.is-loaded .hero-img{ animation:heroZoom 3s var(--e) forwards; }
@keyframes heroIn{ to{ opacity:1; transform:translateY(0);} }
@keyframes heroZoom{ to{ transform:scale(1);} }

/* =================== RESPONSIVE =================== */
@media (max-width:980px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .about-grid{ grid-template-columns:1fr; gap:38px; }
  .style-grid{ grid-template-columns:1fr; }
  .senshitsu-grid{ grid-template-columns:repeat(2,1fr); }
  .shop-grid{ grid-template-columns:repeat(2,1fr); }
  .reason{ grid-template-columns:1fr; gap:14px; }
  .reason-num{ font-size:40px; }
  .area-row{ grid-template-columns:1fr; gap:8px; }
  .support-list{ grid-template-columns:1fr; }
  .company-table th{ width:150px; font-size:13.5px; }
}
@media (max-width:560px){
  body{ font-size:14.5px; }
  .senshitsu-grid{ grid-template-columns:1fr; }
  .shop-grid{ grid-template-columns:1fr; }
  .area-stats{ flex-direction:column; gap:0; align-items:stretch; }
  .area-stat{ flex-direction:row; align-items:baseline; justify-content:center; gap:18px; padding:20px 0; border-bottom:1px solid var(--line-soft); }
  .area-stat:first-child{ border-top:1px solid var(--line-soft); }
  .area-stat .num{ font-size:clamp(40px,13vw,56px); min-width:4.4em; text-align:right; position:relative; }
  .area-stat .num .plus{ position:absolute; left:100%; top:.15em; margin-left:.04em; }
  .area-stat .unit{ min-width:5.2em; text-align:left; }
  .company-table th, .company-table td{ display:block; width:100%; padding:6px 0; border:none; }
  .company-table th{ padding-top:18px; color:var(--text); font-size:13px; }
  .company-table td{ padding-bottom:18px; border-bottom:1px solid var(--line); }
  .contact-actions{ flex-direction:column; }
  .btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .reveal, .char-i{ opacity:1 !important; transform:none !important; filter:none !important; }
  .hero-inner > *{ opacity:1 !important; transform:none !important; }
  .v-cta{ opacity:1 !important; }
}

/* =================== IMAGE MODULES =================== */
/* full-width 章区切り image bands */
.img-divider{ position:relative; height:clamp(320px,52vw,640px); overflow:hidden; z-index:2; }
.img-divider__inner{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.04); transition:transform 1.4s var(--e); }
.img-divider::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,9,8,0.5) 0%, rgba(10,9,8,0.25) 45%, rgba(10,9,8,0.6) 100%); }
.img-divider.in .img-divider__inner{ transform:scale(1); }
.divider-1 .img-divider__inner{ background-image:url('../images/divider-1.jpg'); }
.divider-2 .img-divider__inner{ background-image:url('../images/divider-2.jpg'); }
.img-divider__cap{ position:absolute; left:var(--pad); bottom:clamp(28px,4vw,52px); z-index:2;
  writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl;
  font-family:var(--mincho); font-weight:600; font-size:clamp(18px,2.4vw,28px); letter-spacing:0.34em; color:var(--text);
  text-shadow:0 2px 24px rgba(0,0,0,.5); }

/* about media */
.about-media{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--bg-2); }
.about-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--e); }
.about:hover .about-media img{ transform:scale(1.04); }
.about-grid.has-media{ grid-template-columns:0.9fr 1.3fr; }
@media (max-width:980px){ .about-grid.has-media{ grid-template-columns:1fr; } }

/* style card media */
.style-card{ padding:0; display:flex; flex-direction:column; }
.style-card__img{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.style-card__img img{ width:100%; height:100%; object-fit:cover; filter:brightness(.82); transition:transform 1.2s var(--e), filter .6s var(--e); }
.style-card:hover .style-card__img img{ transform:scale(1.05); filter:brightness(1); }
.style-card__body{ padding:clamp(28px,3.2vw,40px); }
.style-card-wide .style-card__img{ aspect-ratio:21/9; }

/* area gallery strip */
.area-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(40px,5vw,64px); }
.area-gallery figure{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-2); }
.area-gallery img{ width:100%; height:100%; object-fit:cover; filter:brightness(.78); transition:transform 1.2s var(--e), filter .6s var(--e); }
.area-gallery figure:hover img{ transform:scale(1.05); filter:brightness(1); }
.area-gallery figcaption{ position:absolute; left:16px; bottom:14px; font-family:var(--mincho); font-size:13px; letter-spacing:0.2em; color:var(--text); text-shadow:0 2px 14px rgba(0,0,0,.6); }
@media (max-width:980px){ .area-gallery{ grid-template-columns:repeat(2,1fr); } }

/* message founder media */
.message .container{ display:grid; grid-template-columns:1.4fr 0.9fr; gap:clamp(40px,6vw,84px); align-items:center; }
.message-media{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--bg-2); }
.message-media img{ width:100%; height:100%; object-fit:cover; filter:brightness(.88); transition:transform 1.6s var(--e); }
.message:hover .message-media img{ transform:scale(1.04); }
.message .sec-head{ grid-column:1 / -1; }
@media (max-width:980px){ .message .container{ grid-template-columns:1fr; gap:40px; } .message-media{ aspect-ratio:16/10; } }