@charset "UTF-8";

/* =========================================================
   mneme — 香りとお香
   骨格: 香老舗 薫玉堂 の実CSSを忠実再現（右125px固定サイドバー /
   100vhヒーロー / [全幅写真 → 中央1000pxテキスト] の反復 / pb180）
   翻案: 配色=生成りの和紙、コピー/コンセプト=香りと記憶
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  /* 色 */
  --paper:      #F5F1E8;   /* 生成りの和紙 */
  --paper-2:    #EFEADF;   /* フッター・沈めた面 */
  --paper-3:    #FBF9F5;   /* サイドバー・浮かせた面 */
  --sumi:       #1E1B18;   /* 温かい墨 */
  --sumi-mute:  #5A5148;   /* 本文の弱め */
  --sumi-dim:   #8C8377;   /* キャプション */
  --line:       rgba(30,27,24,.14);
  --line-soft:  rgba(30,27,24,.08);
  --accent:     #8B6A3F;   /* 沈香の褐 */
  --accent-dim: rgba(139,106,63,.28);
  --on-dark:    #F2EEE5;

  /* 寸法 */
  --side:  125px;                        /* 右サイドバー（実測） */
  --maxw:  1000px;                       /* .block__inner（実測） */
  --inpad: clamp(20px, 5.2vw, 70px);     /* inner左右（実測70px） */
  --sec-y: clamp(84px, 12vw, 180px);     /* セクション余白（実測180px） */

  /* 書体 */
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --gothic: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --latin:  "EB Garamond", "Times New Roman", serif;

  /* イージング */
  --ease:   cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--sumi);
  font-family:var(--gothic);
  font-size:16px;
  line-height:2;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  line-break:strict;
  word-break:normal;
  overflow-wrap:normal;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
::selection{ background:var(--accent); color:var(--paper); }

/* 和文の折り返し（行末読点を作らない・行頭約物を作らない） */
.jp{ word-break:normal; line-break:strict; }
.nb{ display:inline-block; }

/* ---------- layout ---------- */
.l-container{ margin-right:var(--side); position:relative; z-index:1; }
.l-footer   { margin-right:var(--side); }

/* ---------- 右サイドバー（薫玉堂 .l-header 再現） ---------- */
.l-header__inner{
  position:fixed; top:0; right:0; bottom:0;
  width:var(--side); height:100%;
  z-index:20;
  background:var(--paper-3);
  border-left:1px solid var(--line-soft);
  display:flex; flex-direction:column; align-items:center;
}
.side-menu{
  width:100%; padding:38px 0 0;
  font-family:var(--latin);
  font-size:12px; letter-spacing:.22em; text-align:center;
  color:var(--sumi);
}
.side-menu .bars{ display:block; width:22px; height:9px; margin:0 auto 11px; position:relative; }
.side-menu .bars::before,
.side-menu .bars::after{
  content:""; position:absolute; left:0; width:100%; height:1px; background:var(--sumi);
  transition:transform .4s var(--ease);
}
.side-menu .bars::before{ top:0; }
.side-menu .bars::after { bottom:0; }
.side-menu:hover .bars::before{ transform:translateY(-2px); }
.side-menu:hover .bars::after { transform:translateY(2px); }

.side-lang{
  margin-top:auto; padding-bottom:34px;
  font-family:var(--latin); font-size:12px; letter-spacing:.18em;
  color:var(--sumi-dim);
}
.side-lang a{ transition:color .3s; }
.side-lang a:hover{ color:var(--accent); }
.side-lang .is-current{ color:var(--sumi); }

.side-logo{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
}
.side-logo a{ display:block; }
.side-logo .wm{
  display:block;
  font-family:var(--latin); font-weight:500;
  font-size:20px; letter-spacing:.14em; line-height:1;
  color:var(--sumi);
}
.side-logo .sub{
  display:block; margin-top:9px;
  font-family:var(--latin); font-size:10.5px; letter-spacing:.28em;
  color:var(--sumi-dim);
}
.side-store{
  width:100%; height:120px;               /* 実測 125×120 */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px;
  background:var(--sumi); color:var(--on-dark);
  font-size:12px; letter-spacing:.12em; line-height:1.7; text-align:center;
  writing-mode:horizontal-tb;
  transition:background .45s var(--ease);
}
.side-store:hover{ background:var(--accent); }
.side-store .ar{ font-family:var(--latin); font-size:12px; transition:transform .45s var(--ease); }
.side-store:hover .ar{ transform:translateX(4px); }

/* ---------- モバイル用ヘッダー（≤768で出現） ---------- */
.m-header{ display:none; }

/* ---------- ドロワー ---------- */
.drawer{
  position:fixed; inset:0; z-index:60;
  background:var(--paper);
  visibility:hidden; opacity:0;
  transition:opacity .5s var(--ease), visibility 0s linear .5s;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.drawer.is-open{ visibility:visible; opacity:1; transition:opacity .5s var(--ease); }
.drawer__close{
  position:absolute; top:22px; right:22px; z-index:2;
  width:46px; height:46px; border:1px solid var(--line);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.drawer__close:hover{ background:var(--sumi); border-color:var(--sumi); color:var(--paper); }
.drawer__close::before,
.drawer__close::after{
  content:""; position:absolute; width:15px; height:1px; background:currentColor;
}
.drawer__close::before{ transform:rotate(45deg); }
.drawer__close::after { transform:rotate(-45deg); }
.drawer__inner{
  max-width:900px; margin:0 auto;
  padding:110px clamp(24px,6vw,60px) 90px;
}
.drawer__list li{ border-bottom:1px solid var(--line-soft); }
.drawer__list a{
  display:flex; align-items:baseline; gap:clamp(18px,3vw,38px);
  padding:clamp(15px,2.2vw,22px) 4px;
  font-family:var(--mincho); font-size:clamp(17px,2.1vw,22px); line-height:1.5;
  transition:color .35s;
}
.drawer__list a:hover{ color:var(--accent); }
.drawer__list .n{
  font-family:var(--latin); font-size:12px; letter-spacing:.16em;
  color:var(--accent); flex:none;
}
.drawer__list .en{
  margin-left:auto; font-family:var(--latin); font-size:12px; letter-spacing:.2em;
  color:var(--sumi-dim);
}
.drawer__foot{
  margin-top:52px; display:flex; flex-wrap:wrap; gap:14px 30px;
  font-size:12px; letter-spacing:.1em; color:var(--sumi-mute);
}

/* =========================================================
   Hero — 100vh フルブリード写真スライダー（薫玉堂再現）
   ========================================================= */
.hero{ position:relative; height:100svh; min-height:560px; overflow:hidden; background:var(--sumi); }
.hero__slides{ position:absolute; inset:0; }
.hero__slide{
  position:absolute; inset:0; margin:0;
  opacity:0; transition:opacity 1.6s var(--ease);
}
.hero__slide.is-active{ opacity:1; }
.hero__slide img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transform:scale(1.06);
  transition:transform 9s linear;
}
.hero__slide.is-active img{ transform:scale(1); }
.hero__slide.sp-only{ display:none; }

.hero__copy{
  position:absolute; left:clamp(20px,4.4vw,75px); top:50%;
  transform:translateY(-50%);
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(21px,2.5vw,31px);
  line-height:1.85; letter-spacing:.18em;
  color:#fff;
  text-shadow:0 1px 26px rgba(0,0,0,.55), 0 0 5px rgba(0,0,0,.3);
}
/* 英字eyebrowは縦組みだと日本語の列に割り込むためPCでは出さない（SPの横組みでのみ使う） */
.hero__copy .en{ display:none; }
.hero::after{           /* 文字側だけ静かに沈める */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.16) 38%, rgba(0,0,0,0) 68%);
}

/* ドット＝60×2px のプログレス線（実測） */
.hero__dots{
  position:absolute; left:0; right:0; bottom:22px; z-index:2;
  display:flex; justify-content:center; gap:10px;
}
.hero__dots button{
  display:block; width:60px; height:2px; padding:0;
  background:rgba(255,255,255,.22); position:relative; overflow:hidden;
}
.hero__dots button::after{
  content:""; position:absolute; inset:0; background:#fff;
  transform:scaleX(0); transform-origin:left center;
}
.hero__dots .is-active button::after{ animation:sliderNav 4.5s linear forwards; }
@keyframes sliderNav{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }

/* =========================================================
   .block — [全幅写真] → [中央1000pxテキスト]（薫玉堂再現）
   ========================================================= */
.block{ padding-bottom:var(--sec-y); }
.block__thumb{ position:relative; width:100%; aspect-ratio:1314/744; overflow:hidden; background:var(--paper-2); }
.block__thumb img{ width:100%; height:100%; object-fit:cover; }

/* 署名 — 記憶が像を結ぶ（ぼやけた像がピントを結ぶ） */
.block__thumb img,
.mem img{
  filter:blur(16px) saturate(.5) brightness(1.04);
  transform:scale(1.07);
  opacity:.55;
  will-change:filter, transform, opacity;
  transition:filter 1.7s var(--ease), transform 2.1s var(--ease), opacity 1.3s var(--ease);
}
.block__thumb.is-in img,
.mem.is-in img{ filter:none; transform:scale(1); opacity:1; }

.block__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:var(--sec-y) var(--inpad) 0;
}
.block__title{
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(20px,2.3vw,28px);
  line-height:1.6; letter-spacing:.09em;
  color:var(--sumi);
}
.block__title .num{
  display:inline-block; margin-right:45px;      /* 実測 45px */
  font-family:var(--latin); font-size:14px; letter-spacing:.1em;
  color:var(--accent); vertical-align:middle;
}
.block__lead{
  margin-top:clamp(26px,3vw,40px);
  font-family:var(--mincho);
  font-size:clamp(14.5px,1.25vw,16px);
  line-height:2.35; letter-spacing:.05em;
  color:var(--sumi-mute);
  max-width:42em;
}
.block__lead + .block__lead{ margin-top:1.6em; }

/* もっと見る */
.more{
  display:inline-flex; align-items:center; gap:14px;
  margin-top:clamp(30px,3.4vw,46px);
  font-size:13px; letter-spacing:.14em; color:var(--sumi);
  position:relative; padding-bottom:7px;
}
.more::before{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--line);
}
.more::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:right center;
  transition:transform .55s var(--ease);
}
.more:hover::after{ transform:scaleX(1); transform-origin:left center; }
.more .ar{ font-family:var(--latin); transition:transform .45s var(--ease); }
.more:hover .ar{ transform:translateX(5px); }

/* =========================================================
   お知らせ
   ========================================================= */
.news{ padding-bottom:var(--sec-y); }
.news__inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--inpad); }
.news__list{ margin-top:clamp(34px,3.6vw,52px); border-top:1px solid var(--line-soft); }
.news__list li{ border-bottom:1px solid var(--line-soft); }
.news__list a{
  display:grid; grid-template-columns:155px 1fr; align-items:baseline;
  padding:clamp(17px,1.9vw,25px) 2px;
  transition:opacity .35s;
}
.news__list a:hover{ opacity:.58; }
.news__list time{
  font-family:var(--latin); font-size:14px; letter-spacing:.08em; color:var(--sumi-dim);
}
.news__list h3{ font-family:var(--mincho); font-size:15.5px; font-weight:400; line-height:1.85; }

/* =========================================================
   最終CTA
   ========================================================= */
.cta{ position:relative; background:var(--sumi); color:var(--on-dark); overflow:hidden; }
.cta__bg{ position:absolute; inset:0; opacity:.3; }
.cta__bg img{ width:100%; height:100%; object-fit:cover; }
/* 背景写真が明るいカットでも文字が沈まないよう、必ずスクリムを重ねる */
.cta__bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 50%, rgba(20,18,16,.44) 0%, rgba(20,18,16,.72) 100%);
}
.cta__inner{
  position:relative; max-width:var(--maxw); margin:0 auto;
  padding:clamp(92px,11vw,150px) var(--inpad);
  text-align:center;
}
.cta__title{
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(21px,2.7vw,33px); line-height:1.85; letter-spacing:.1em;
}
.cta__text{
  margin-top:clamp(22px,2.4vw,32px);
  font-size:14px; line-height:2.2; color:rgba(242,238,229,.74);
}
.cta__btns{
  margin-top:clamp(34px,3.8vw,50px);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
}
.btn{
  display:inline-flex; align-items:center; gap:13px;
  min-width:250px; padding:19px 34px;
  justify-content:center;
  border:1px solid rgba(242,238,229,.34);
  font-size:13px; letter-spacing:.14em;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.btn .ar{ font-family:var(--latin); transition:transform .45s var(--ease); }
.btn:hover{ background:var(--on-dark); color:var(--sumi); border-color:var(--on-dark); }
.btn:hover .ar{ transform:translateX(5px); }
.btn--fill{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn--fill:hover{ background:var(--on-dark); border-color:var(--on-dark); color:var(--sumi); }

/* =========================================================
   Footer
   ========================================================= */
.l-footer{ background:var(--paper-2); }
.footer__top{
  border-bottom:1px solid var(--line-soft);
}
.footer__top a{
  display:block; padding:26px 0; text-align:center;
  font-family:var(--latin); font-size:12px; letter-spacing:.22em; color:var(--sumi-dim);
  transition:color .35s;
}
.footer__top a:hover{ color:var(--accent); }
.footer__inner{
  max-width:1180px; margin:0 auto;
  padding:clamp(56px,6.4vw,84px) clamp(22px,5vw,70px);
  display:grid; grid-template-columns:1.15fr .85fr auto; gap:clamp(30px,4vw,60px);
}
.footer__brand .wm{
  font-family:var(--latin); font-size:26px; letter-spacing:.14em; line-height:1;
}
.footer__brand .tag{
  margin-top:14px; font-family:var(--mincho); font-size:13px; letter-spacing:.14em; color:var(--sumi-mute);
}
.footer__addr{
  margin-top:26px; font-size:12.5px; line-height:2.1; color:var(--sumi-mute);
  font-style:normal;
}
.footer__addr a{ transition:color .3s; }
.footer__addr a:hover{ color:var(--accent); }
.footer__nav{
  display:grid; gap:8px 26px;
  grid-auto-flow:column; grid-template-rows:repeat(5,auto); grid-template-columns:auto auto;
  justify-content:start; align-content:start;
}
.footer__nav a{
  font-size:12.5px; letter-spacing:.08em; color:var(--sumi-mute);
  transition:color .3s;
}
.footer__nav a:hover{ color:var(--accent); }
.footer__side{ text-align:right; }
.footer__side .store{
  display:inline-flex; align-items:center; gap:11px;
  padding:16px 26px; background:var(--sumi); color:var(--on-dark);
  font-size:12.5px; letter-spacing:.12em;
  transition:background .45s var(--ease);
}
.footer__side .store:hover{ background:var(--accent); }
.footer__copy{
  border-top:1px solid var(--line-soft);
  padding:22px clamp(22px,5vw,70px);
  font-family:var(--latin); font-size:11.5px; letter-spacing:.1em; color:var(--sumi-dim);
  text-align:center;
}

/* =========================================================
   reveal
   ========================================================= */
.rv{ opacity:0; transform:translateY(22px); transition:opacity 1.15s var(--ease), transform 1.15s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }
.rv[data-d="1"]{ transition-delay:.12s; }
.rv[data-d="2"]{ transition-delay:.24s; }
.rv[data-d="3"]{ transition-delay:.36s; }

/* =========================================================
   下層ページ共通
   ========================================================= */
.phero{ position:relative; height:clamp(380px,52vh,560px); overflow:hidden; background:var(--sumi); }
.phero img{ width:100%; height:100%; object-fit:cover; }
.phero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,.04) 75%);
}
.phero__copy{
  position:absolute; left:clamp(20px,4.4vw,75px); bottom:clamp(34px,5vw,64px); z-index:2;
  color:#fff; text-shadow:0 1px 22px rgba(0,0,0,.5);
}
.phero__copy .en{
  display:block; font-family:var(--latin); font-size:12px; letter-spacing:.3em;
  text-transform:uppercase; color:rgba(255,255,255,.74); margin-bottom:14px;
}
.phero__copy h1{
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(24px,3.2vw,40px); line-height:1.5; letter-spacing:.11em;
}

.sec{ padding:var(--sec-y) 0; }
.sec--tight{ padding:clamp(60px,7vw,110px) 0; }
.sec--paper2{ background:var(--paper-2); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--inpad); }
.wrap--wide{ max-width:1180px; }

.h2{
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(20px,2.3vw,28px); line-height:1.6; letter-spacing:.09em;
}
.h2 .num{
  display:inline-block; margin-right:45px;
  font-family:var(--latin); font-size:14px; letter-spacing:.1em; color:var(--accent);
  vertical-align:middle;
}
.h3{
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(17px,1.75vw,21px); line-height:1.7; letter-spacing:.08em;
}
.lead{
  font-family:var(--mincho);
  font-size:clamp(15px,1.4vw,17.5px); line-height:2.35; letter-spacing:.06em;
  color:var(--sumi);
  max-width:40em;
}
.body{
  font-size:15px; line-height:2.2; letter-spacing:.03em; color:var(--sumi-mute);
  max-width:44em;
}
.body + .body{ margin-top:1.5em; }
.mt-s{ margin-top:clamp(18px,2vw,26px); }
.mt-m{ margin-top:clamp(30px,3.4vw,46px); }
.mt-l{ margin-top:clamp(46px,5.4vw,76px); }

.pull{
  font-family:var(--mincho);
  font-size:clamp(19px,2.5vw,29px); line-height:2; letter-spacing:.12em;
  color:var(--sumi);
}

/* 罫線リスト */
.rules{ border-top:1px solid var(--line-soft); }
.rules li{
  border-bottom:1px solid var(--line-soft);
  padding:clamp(16px,1.9vw,23px) 2px
;
  display:flex; gap:clamp(16px,2.4vw,34px); align-items:baseline;
  font-size:15px; line-height:2.05; color:var(--sumi-mute);
}
.rules .n{
  font-family:var(--latin); font-size:12px; letter-spacing:.12em; color:var(--accent); flex:none;
}

/* 商品カード */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(34px,4.4vw,64px) clamp(28px,3.4vw,48px); }
.card__fig{ aspect-ratio:4/3; overflow:hidden; background:var(--paper-2); }
.card__fig img{ width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease); }
.card:hover .card__fig img{ transform:scale(1.035); }
.card__ttl{
  margin-top:clamp(17px,1.9vw,24px);
  font-family:var(--mincho); font-size:clamp(16px,1.6vw,19px); letter-spacing:.09em; line-height:1.6;
}
.card__sub{
  margin-top:9px; font-family:var(--latin); font-size:12px; letter-spacing:.18em; color:var(--accent);
}
.card__txt{ margin-top:13px; font-size:14px; line-height:2.05; color:var(--sumi-mute); }

/* 奇数枚で孤立行が出るときは最後の1枚をワイド化して埋める */
.card--wide{
  grid-column:1 / -1;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px,3.6vw,52px); align-items:center;
}
.card--wide .card__fig{ aspect-ratio:16/10; }
.card--wide .card__ttl{ margin-top:0; }

/* 会社概要 */
.dl{ border-top:1px solid var(--line-soft); }
.dl__row{
  display:grid; grid-template-columns:220px 1fr;
  border-bottom:1px solid var(--line-soft);
  padding:clamp(16px,1.9vw,22px) 2px;
}
.dl__row dt{ font-family:var(--mincho); font-size:14.5px; letter-spacing:.08em; color:var(--sumi); }
.dl__row dd{ font-size:14.5px; line-height:2; color:var(--sumi-mute); }
.dl__row dd a{ overflow-wrap:anywhere; }

/* パンくず */
.crumb{
  max-width:var(--maxw); margin:0 auto; padding:26px var(--inpad) 0;
  font-size:12px; letter-spacing:.08em; color:var(--sumi-dim);
}
.crumb a:hover{ color:var(--accent); }
.crumb span{ margin:0 9px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1024px){
  :root{ --side:104px; }
  .side-logo .wm{ font-size:17px; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
  .footer__side{ grid-column:1 / -1; text-align:left; }
}

@media (max-width:768px){
  :root{ --side:0px; --sec-y:clamp(64px,13vw,96px); --inpad:22px; }

  .l-container,.l-footer{ margin-right:0; }
  .l-header__inner{ display:none; }

  /* 上部固定の横帯ヘッダー（薫玉堂SPと同じ切替） */
  .m-header{
    display:flex; align-items:center; justify-content:space-between;
    position:fixed; top:0; left:0; right:0; z-index:40;
    height:58px; padding:0 18px;
    background:rgba(245,241,232,.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-soft);
  }
  .m-header .wm{ font-family:var(--latin); font-size:19px; letter-spacing:.14em; }
  .m-header .bg{ width:26px; height:12px; position:relative; }
  .m-header .bg::before,
  .m-header .bg::after{ content:""; position:absolute; left:0; width:100%; height:1px; background:var(--sumi); }
  .m-header .bg::before{ top:0; }
  .m-header .bg::after{ bottom:0; }

  /* スマホのヒーローは「画像 上／文字 下」に分割 */
  .hero{ height:auto; min-height:0; background:var(--paper); padding-top:58px; }
  .hero__slides{ position:relative; inset:auto; width:100%; aspect-ratio:4/5; overflow:hidden; }
  .hero__slide{ position:absolute; inset:0; }
  .hero__slide.pc-only{ display:none; }
  .hero__slide.sp-only{ display:block; }
  .hero::after{ display:none; }
  .hero__copy{
    position:static; transform:none;
    writing-mode:horizontal-tb;
    padding:clamp(30px,7vw,44px) 22px clamp(10px,3vw,18px);
    font-size:clamp(19px,5.4vw,25px); line-height:1.95; letter-spacing:.1em;
    color:var(--sumi); text-shadow:none;
  }
  .hero__copy .en{
    display:block;
    writing-mode:horizontal-tb; margin:0 0 15px; color:var(--accent);
    font-family:var(--latin); font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  }
  .hero__dots{ position:static; padding:4px 22px clamp(30px,7vw,44px); justify-content:flex-start; }
  .hero__dots button{ width:44px; background:var(--line); }
  .hero__dots button::after{ background:var(--accent); }

  .block__inner{ padding-top:clamp(34px,8vw,52px); }
  .block__title .num{ display:block; margin:0 0 12px; }
  .h2 .num{ display:block; margin:0 0 12px; }

  .news__list a{ grid-template-columns:1fr; gap:5px; }

  .phero{ height:clamp(300px,54vw,380px); margin-top:58px; }
  .phero__copy{ left:22px; bottom:26px; }

  .cards{ grid-template-columns:1fr; gap:38px; }
  .card--wide{ grid-template-columns:1fr; gap:0; }
  .card--wide .card__fig{ aspect-ratio:4/3; }
  .card--wide .card__ttl{ margin-top:clamp(17px,1.9vw,24px); }
  .dl__row{ grid-template-columns:1fr; gap:4px; }
  .footer__inner{ grid-template-columns:1fr; }
  .footer__nav{
    gap:6px 20px;
    grid-auto-flow:row; grid-template-rows:none; grid-template-columns:1fr 1fr;
  }
  .btn{ width:100%; min-width:0; }
  .drawer__inner{ padding:88px 22px 70px; }
}

@media (max-width:420px){
  .hero__copy{ font-size:20px; }
  .drawer__list a{ font-size:17px; gap:14px; }
  .drawer__list .en{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
  .block__thumb img,.mem img{ filter:none; transform:none; opacity:1; }
  .rv{ opacity:1; transform:none; }
}