@charset "utf-8";
/* ============================================================
   伝・Tokyo リニューアルデモ — site.css
   配色：現行サイトの「黒基調」を踏襲。
        赤金の多用を避け、墨・生成り・濃紺に金を微量だけ。
   フォント：日本語は Noto 系のみ。
        中国語・韓国語フォント（Noto Sans/Serif SC・TC・HK・KR、
        WenQuanYi 等）は一切参照しない。
   ============================================================ */

/* ---------- design tokens ---------- */
:root{
  /* 墨（現行サイトの #000 / #111 / #1c1c1c を踏襲） */
  --sumi:#0d0d0d;
  --sumi-2:#161616;
  --sumi-3:#242424;
  --sumi-4:#3a3a3a;

  /* 生成り・白 */
  --kinari:#f4f0e8;
  --kinari-2:#eae4d8;
  --white:#ffffff;

  /* 濃紺 */
  --kon:#141f33;
  --kon-2:#1e2c47;

  /* 金（アクセントは細線・小文字のみ。面では使わない） */
  --kin:#a8874e;
  --kin-2:#c9a86a;

  /* テキスト */
  --ink:#14161a;
  --ink-2:#4a4f57;
  --ink-3:#7c8189;
  --on-dark:#f4f0e8;
  --on-dark-2:rgba(244,240,232,.72);
  --on-dark-3:rgba(244,240,232,.48);

  --line:#dcd6c8;
  --line-dark:rgba(244,240,232,.18);

  /* 和文（Noto 系のみ。SC/TC/HK/KR は含めない） */
  --jp-sans:"Noto Sans JP","Noto Sans CJK JP","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Meiryo",sans-serif;
  --jp-serif:"Noto Serif JP","Noto Serif CJK JP","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  /* 欧文。ただし肩書き・ボタン・タグなど日本語が流れ込む箇所にも当たるため、
     generic family に落ちる前に必ず和文フォントを挟む。
     欧文の見た目は先頭の Cormorant / Jost が担うので変わらない。
     （挟まないと Linux・Android で中国語字形になることがある） */
  --en-serif:"Cormorant Garamond","EB Garamond",Georgia,"Times New Roman",
             "Noto Serif JP","Noto Serif CJK JP","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --en-sans:"Jost","Helvetica Neue",Arial,
            "Noto Sans JP","Noto Sans CJK JP","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Meiryo",sans-serif;

  --maxw:1200px;
  --gut:clamp(20px,5vw,64px);
  --r:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
body{
  margin:0;
  background:var(--kinari);
  color:var(--ink);
  font-family:var(--jp-sans);
  font-size:16px;
  line-height:1.9;
  font-feature-settings:"palt" 1;
  letter-spacing:.02em;
  overflow-x:hidden;
}
html[lang="en"] body{font-family:var(--en-sans);letter-spacing:.005em;line-height:1.75}
img,video,iframe{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--kin-2);outline-offset:3px}

/* ---------- utilities ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:840px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-60px;z-index:999;background:var(--sumi);color:var(--kinari);padding:10px 16px;transition:top .2s}
.skip:focus{top:8px}

/* 見出し */
.eyebrow{
  font-family:var(--en-sans);
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--kin);font-weight:500;
  display:flex;align-items:center;gap:14px;
}
.eyebrow::after{content:"";flex:1 1 auto;height:1px;background:currentColor;opacity:.4;max-width:80px}
.eyebrow--center{justify-content:center}
.eyebrow--center::before{content:"";flex:0 0 auto;width:40px;height:1px;background:currentColor;opacity:.4}
.eyebrow--center::after{flex:0 0 auto;width:40px}

.h-en{
  font-family:var(--en-serif);
  font-weight:300;
  line-height:1.12;
  letter-spacing:.005em;
  font-size:clamp(2rem,4.6vw,3.6rem);
}
.h-jp{
  font-family:var(--jp-serif);
  font-weight:400;
  line-height:1.55;
  font-size:clamp(1.25rem,2.4vw,1.7rem);
  letter-spacing:.06em;
}
.lede{font-size:clamp(.95rem,1.35vw,1.05rem);color:var(--ink-2);max-width:64ch}
.on-dark .lede{color:var(--on-dark-2)}
.on-dark{color:var(--on-dark)}

/* リンク・ボタン */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--en-sans);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 30px;border:1px solid currentColor;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn::after{content:"→";font-size:1.05em;transition:transform .35s var(--ease)}
.btn:hover::after{transform:translateX(5px)}
.btn--fill{background:var(--sumi);color:var(--kinari);border-color:var(--sumi)}
.btn--fill:hover{background:var(--kon);border-color:var(--kon)}
.btn--ghost:hover{background:var(--sumi);color:var(--kinari)}
.btn--onDark{color:var(--kinari);border-color:rgba(244,240,232,.45)}
.btn--onDark:hover{background:var(--kinari);color:var(--sumi);border-color:var(--kinari)}

.txtlink{
  font-family:var(--en-sans);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid var(--kin);padding-bottom:4px;display:inline-block;
  transition:border-color .3s,color .3s;
}
.txtlink:hover{color:var(--kin)}

/* セクション */
.sec{padding:clamp(64px,9vw,132px) 0}
.sec--tight{padding:clamp(48px,6vw,88px) 0}
.sec--dark{background:var(--sumi);color:var(--on-dark)}
.sec--kon{background:var(--kon);color:var(--on-dark)}
.sec--paper{background:var(--white)}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head--center{justify-items:center;text-align:center}

/* ============================================================
   デモ告知バー ＋ ヘッダー（固定スタック）
   ⚠ 本番リリース時は .demobar ブロックとHTML側を削除
   ============================================================ */
.topstack{position:fixed;inset:0 0 auto 0;z-index:200}
.demobar{
  background:#7a1f24;color:#fff;
  font-family:var(--jp-sans);font-size:12px;line-height:1.5;letter-spacing:.02em;
  padding:9px var(--gut);
  display:flex;align-items:center;justify-content:center;gap:6px 12px;flex-wrap:wrap;text-align:center;
}
.demobar__badge{
  font-family:var(--en-sans);font-size:10px;letter-spacing:.2em;font-weight:600;
  border:1px solid rgba(255,255,255,.6);padding:2px 8px;flex:0 0 auto;
}
.demobar__sp{display:none}
@media (max-width:820px){
  .demobar__pc{display:none}
  .demobar__sp{display:inline}
  .demobar{font-size:11px;padding:8px 14px}
}

.hd{
  background:rgba(13,13,13,.0);
  transition:background .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.hd__in{
  max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut);
  height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.is-solid .hd{background:rgba(13,13,13,.94);backdrop-filter:blur(10px);border-bottom-color:var(--line-dark)}
.hd__logo{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.hd__logo img{width:auto;height:34px;filter:brightness(0) invert(1)}
.hd__logoTxt{
  font-family:var(--en-serif);font-size:20px;letter-spacing:.22em;color:var(--kinari);line-height:1;
  padding-left:12px;border-left:1px solid var(--line-dark);
}
.hd__nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.hd__nav a{
  font-family:var(--en-sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-2);padding:8px 0;position:relative;transition:color .3s;
}
.hd__nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--kin-2);
  transition:right .35s var(--ease);
}
.hd__nav a:hover,.hd__nav a[aria-current="page"]{color:var(--kinari)}
.hd__nav a:hover::after,.hd__nav a[aria-current="page"]::after{right:0}
.hd__right{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.langsw{display:flex;align-items:center;gap:8px;font-family:var(--en-sans);font-size:11.5px;letter-spacing:.14em}
.langsw a{color:var(--on-dark-3);transition:color .3s}
.langsw a[aria-current="true"]{color:var(--kin-2)}
.langsw a:hover{color:var(--kinari)}
.langsw span{color:var(--on-dark-3);opacity:.5}
.hd__cta{
  font-family:var(--en-sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid rgba(244,240,232,.4);color:var(--kinari);padding:11px 20px;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.hd__cta:hover{background:var(--kinari);color:var(--sumi)}
.hd__burger{display:none;width:44px;height:44px;position:relative;flex:0 0 auto}
.hd__burger i{position:absolute;left:11px;right:11px;height:1px;background:var(--kinari);transition:transform .35s var(--ease),opacity .25s}
.hd__burger i:nth-child(1){top:17px}
.hd__burger i:nth-child(2){top:22px}
.hd__burger i:nth-child(3){top:27px}
.is-menu .hd__burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.is-menu .hd__burger i:nth-child(2){opacity:0}
.is-menu .hd__burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* モバイルメニュー */
.mnav{
  position:fixed;inset:0;z-index:190;background:var(--sumi);
  padding:140px var(--gut) 48px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.is-menu .mnav{opacity:1;visibility:visible}
.mnav a{display:block;color:var(--kinari);border-bottom:1px solid var(--line-dark);padding:20px 0}
.mnav__en{font-family:var(--en-serif);font-size:26px;font-weight:300;line-height:1.2}
.mnav__jp{display:block;font-family:var(--jp-sans);font-size:12px;color:var(--on-dark-3);letter-spacing:.14em;margin-top:6px}
.mnav__lang{display:flex;gap:18px;margin-top:32px;font-family:var(--en-sans);font-size:13px;letter-spacing:.16em;color:var(--on-dark-3)}
.mnav__lang a{border:0;padding:0;display:inline}
.mnav__lang a[aria-current="true"]{color:var(--kin-2)}
@media (max-width:1300px){
  .hd__nav{display:none}
  .hd__cta{display:none}
  .hd__right .langsw{display:none}
  .hd__burger{display:block}
}

/* ============================================================
   ヒーロー（動画背景）
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--sumi);overflow:hidden}
.hero__media{position:absolute;inset:0;overflow:hidden;background:var(--sumi)}
/* 静止画は動画が始まるまでのつなぎ。再生が始まったら消す。
   （消さないと、半透明の動画の下に着物姿が残って二重に見える） */
.hero__poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 30%;
  opacity:1;transition:opacity 1.6s var(--ease);
}
.hero__media.is-playing .hero__poster{opacity:0}
/* 動画は viewport より 1.35 倍に拡大して中央に置く。
   YouTube のロゴ・コントロール・チャンネル名は端に出るため、
   拡大して画面外に追い出す。pointer-events も切っておく。 */
.hero__video{
  position:absolute;top:50%;left:50%;
  width:max(100vw,177.78vh);height:max(56.25vw,100vh);
  transform:translate(-50%,-50%) scale(1.35);
  transform-origin:center;
  border:0;pointer-events:none;
  opacity:0;transition:opacity 1.6s var(--ease);
}
.hero__video.is-on{opacity:1}
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(13,13,13,.86) 0%,rgba(13,13,13,.46) 30%,rgba(13,13,13,.62) 62%,rgba(13,13,13,.95) 100%),
    linear-gradient(96deg,rgba(13,13,13,.78) 0%,rgba(13,13,13,.34) 46%,rgba(13,13,13,.1) 72%),
    radial-gradient(120% 80% at 18% 100%,rgba(20,31,51,.6) 0%,rgba(13,13,13,0) 62%);
}
.hero__in{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut) clamp(72px,11vh,140px);color:var(--on-dark)}
.hero__eyebrow{color:var(--kin-2);margin-bottom:22px;max-width:420px}
.hero h1{margin:0}
.hero__en{
  display:block;font-family:var(--en-serif);font-weight:300;
  font-size:clamp(2.6rem,7.2vw,6rem);line-height:1.02;letter-spacing:-.005em;
}
.hero__en em{font-style:italic;color:var(--kin-2)}
.hero__jp{
  display:block;font-family:var(--jp-serif);font-weight:400;
  font-size:clamp(.95rem,1.7vw,1.25rem);letter-spacing:.22em;
  color:var(--on-dark-2);margin-top:22px;
}
.hero__lede{margin-top:26px;max-width:52ch;color:var(--on-dark-2);font-size:clamp(.9rem,1.2vw,1rem)}
.hero__acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero__scroll{
  position:absolute;right:var(--gut);bottom:clamp(72px,11vh,140px);
  writing-mode:vertical-rl;font-family:var(--en-sans);font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--on-dark-3);display:flex;align-items:center;gap:14px;
}
.hero__scroll::after{content:"";width:1px;height:66px;background:linear-gradient(180deg,var(--kin-2),transparent)}
@media (max-width:900px){.hero__scroll{display:none}}
@media (prefers-reduced-motion:reduce){
  .hero__video{display:none}
  html{scroll-behavior:auto}
}

/* 信頼バー */
.trust{background:var(--sumi-2);color:var(--on-dark);border-top:1px solid var(--line-dark)}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark)}
.trust__cell{background:var(--sumi-2);padding:clamp(24px,3.4vw,40px) clamp(16px,2vw,28px);text-align:center}
.trust__n{font-family:var(--en-serif);font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:300;color:var(--kin-2);line-height:1.1}
.trust__l{font-size:12px;color:var(--on-dark-2);margin-top:10px;letter-spacing:.06em}
@media (max-width:760px){.trust__grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   「体験で選ぶ」3枚カード
   ============================================================ */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)}
.way{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  /* カードの高さは画面幅ではなくカード自身の幅に見合わせる。
     3列のままだと 900〜1140px でカード幅が画面の1/4しかなく、
     縦長になりすぎて中身の下に大きな空きができる。 */
  min-height:clamp(380px,34vw,520px);padding:clamp(24px,3vw,36px);
  color:var(--kinari);overflow:hidden;background:var(--sumi);
  isolation:isolate;
}
/* ノートPC・タブレット横向き：3列をやめて2列＋3枚目を横長に */
@media (max-width:1140px){
  .ways{grid-template-columns:repeat(2,1fr)}
  .way{min-height:clamp(320px,30vw,420px)}
  .way:last-child{grid-column:1 / -1;min-height:clamp(260px,24vw,340px)}
}
/* スマホ：1列 */
@media (max-width:700px){
  .ways{grid-template-columns:1fr}
  .way,.way:last-child{grid-column:auto;min-height:clamp(300px,58vw,420px)}
}
.way__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.way::before{
  content:"";position:absolute;inset:0;z-index:-1;
  /* カードが横長になる幅では文字の開始位置が上がるため、
     中間部を早めに濃くして可読性を確保する */
  background:linear-gradient(180deg,rgba(13,13,13,.30) 0%,rgba(13,13,13,.58) 34%,rgba(13,13,13,.86) 68%,rgba(13,13,13,.95) 100%);
  transition:background .5s var(--ease);
}
.way:hover .way__img{transform:scale(1.055)}
.way:hover::before{background:linear-gradient(180deg,rgba(20,31,51,.44) 0%,rgba(13,13,13,.66) 34%,rgba(13,13,13,.9) 68%,rgba(13,13,13,.97) 100%)}
.way__no{font-family:var(--en-sans);font-size:11px;letter-spacing:.28em;color:var(--kin-2);margin-bottom:14px}
.way__en{font-family:var(--en-serif);font-weight:300;font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.15}
.way__jp{font-family:var(--jp-serif);font-size:13.5px;letter-spacing:.12em;color:var(--on-dark-2);margin-top:8px}
.way__txt{font-size:14px;color:var(--on-dark-2);margin-top:16px;line-height:1.85}
.way__more{margin-top:20px;font-family:var(--en-sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--kin-2);display:inline-flex;gap:.6em;align-items:center}
.way__more::after{content:"→";transition:transform .35s var(--ease)}
.way:hover .way__more::after{transform:translateX(5px)}

/* ============================================================
   安心（心理的ハードル解除）
   ============================================================ */
.ease{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
@media (max-width:1000px){.ease{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ease{grid-template-columns:1fr}}
.ease__c{
  background:var(--white);border:1px solid var(--line);padding:clamp(22px,2.6vw,30px);
  display:grid;gap:12px;align-content:start;
}
.sec--dark .ease__c,.sec--kon .ease__c{background:rgba(244,240,232,.05);border-color:var(--line-dark)}
.ease__ico{width:34px;height:34px;color:var(--kin)}
.ease__ico svg{width:100%;height:100%;display:block}
.ease__t{font-family:var(--jp-serif);font-size:16px;letter-spacing:.06em;line-height:1.5}
html[lang="en"] .ease__t{font-family:var(--en-serif);font-size:20px;font-weight:400}
.ease__d{font-size:13.5px;color:var(--ink-2);line-height:1.8}
.sec--dark .ease__d,.sec--kon .ease__d{color:var(--on-dark-2)}

/* ============================================================
   2カラム（画像＋テキスト）
   ============================================================ */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
.split--rev .split__fig{order:2}
@media (max-width:900px){.split{grid-template-columns:1fr}.split--rev .split__fig{order:0}}
.split__fig{position:relative}
.split__fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split__cap{
  position:absolute;left:0;bottom:-1px;background:var(--sumi);color:var(--on-dark-2);
  font-family:var(--en-sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;padding:9px 16px;
}
.split__body{display:grid;gap:20px;align-content:start}
.split__body p{color:var(--ink-2);font-size:15px}
.sec--dark .split__body p,.sec--kon .split__body p{color:var(--on-dark-2)}

/* ============================================================
   演目／プラン表
   ============================================================ */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px)}
@media (max-width:840px){.plans{grid-template-columns:1fr}}
.plan{
  border:1px solid var(--line);background:var(--white);
  padding:clamp(24px,3vw,34px);display:grid;gap:14px;align-content:start;
  transition:border-color .35s,transform .35s var(--ease);
}
.plan:hover{border-color:var(--kin);transform:translateY(-3px)}
.plan__top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:start}
.plan__name{font-family:var(--en-serif);font-size:clamp(1.25rem,1.9vw,1.5rem);font-weight:400;line-height:1.22;text-wrap:balance}
.plan__jp{font-family:var(--jp-serif);font-size:12.5px;color:var(--ink-3);letter-spacing:.08em;display:block;margin-top:5px}
.plan__price{font-family:var(--en-serif);font-size:1.3rem;color:var(--kin);white-space:nowrap;text-align:right;line-height:1.2}
.plan__price i{font-family:var(--jp-sans);font-style:normal;font-size:.72em;margin-left:1px}
.plan__price small{font-family:var(--jp-sans);font-size:10.5px;letter-spacing:.06em;color:var(--ink-3);display:block;text-align:right;margin-top:4px}
@media (max-width:420px){
  .plan__top{grid-template-columns:1fr}
  .plan__price,.plan__price small{text-align:left}
}
.plan__d{font-size:14px;color:var(--ink-2);line-height:1.85}
.plan__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.tag{
  font-family:var(--en-sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--ink-3);padding:5px 11px;
}

/* ============================================================
   アーティスト
   ============================================================ */
.artists{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px)}
@media (max-width:980px){.artists{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.artists{grid-template-columns:repeat(2,1fr)}}
.artist{display:grid;gap:14px;align-content:start}
.artist__fig{position:relative;overflow:hidden;background:var(--sumi-3)}
.artist__fig img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1s var(--ease);filter:saturate(.92)}
.artist:hover .artist__fig img{transform:scale(1.05)}
.artist__role{font-family:var(--en-sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--kin)}
.artist__name{font-family:var(--en-serif);font-size:1.25rem;font-weight:400;line-height:1.25}
.artist__jp{font-family:var(--jp-serif);font-size:12.5px;color:var(--ink-3);letter-spacing:.08em}
.sec--dark .artist__jp{color:var(--on-dark-3)}
.artist__bio{font-size:13px;color:var(--ink-2);line-height:1.8}
.sec--dark .artist__bio{color:var(--on-dark-2)}

/* ============================================================
   動画ギャラリー
   ============================================================ */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
@media (max-width:900px){.vids{grid-template-columns:1fr}}
.vid{background:var(--sumi-2);border:1px solid var(--line-dark)}
.vid__frame{position:relative;aspect-ratio:16/9;background:var(--sumi-3)}
.vid__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid__play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(13,13,13,.15),rgba(13,13,13,.5));
  transition:background .35s;
}
.vid__play:hover{background:linear-gradient(180deg,rgba(20,31,51,.2),rgba(13,13,13,.62))}
.vid__play span{
  width:64px;height:64px;border:1px solid rgba(244,240,232,.7);border-radius:50%;
  display:grid;place-items:center;color:var(--kinari);font-size:15px;padding-left:4px;
  transition:background .35s,border-color .35s,color .35s;
}
.vid__play:hover span{background:var(--kinari);color:var(--sumi);border-color:var(--kinari)}
.vid__body{padding:18px 20px 22px}
.vid__t{font-family:var(--jp-serif);font-size:14.5px;color:var(--on-dark);letter-spacing:.06em;line-height:1.6}
html[lang="en"] .vid__t{font-family:var(--en-serif);font-size:18px}
.vid__m{font-family:var(--en-sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--kin-2);margin-bottom:8px}

/* ============================================================
   新着情報
   ============================================================ */
.news{display:grid;gap:clamp(18px,2.4vw,28px)}
.news__i{
  border:1px solid var(--line);background:var(--white);
  padding:clamp(22px,2.8vw,34px);display:grid;gap:12px;align-content:start;
}
.news__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.news__date{
  font-family:var(--en-sans);font-size:12px;letter-spacing:.16em;color:var(--kin);
}
.news__t{
  font-family:var(--jp-serif);font-size:clamp(1.05rem,1.9vw,1.35rem);
  font-weight:500;line-height:1.55;letter-spacing:.04em;
}
html[lang="en"] .news__t{font-family:var(--en-serif);font-weight:500;font-size:clamp(1.25rem,2.2vw,1.6rem)}
.news__b{display:grid;gap:11px}
.news__b p{font-size:14.5px;line-height:1.95;color:var(--ink-2)}

/* トップの新着情報（3件・行だけ） */
.newsrow{border-top:1px solid var(--line-dark)}
.newsrow a{
  display:grid;grid-template-columns:auto 1fr auto;gap:8px 22px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line-dark);transition:color .3s;
}
.newsrow a:hover{color:var(--kin-2)}
.newsrow__d{
  font-family:var(--en-sans);font-size:12px;letter-spacing:.14em;color:var(--kin-2);white-space:nowrap;
}
.newsrow__t{font-size:14.5px;color:var(--on-dark);line-height:1.7}
.newsrow__a{color:var(--on-dark-3);font-size:13px}
@media (max-width:640px){
  .newsrow a{grid-template-columns:1fr;gap:5px}
  .newsrow__a{display:none}
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{border-top:1px solid var(--line)}
.sec--dark .faq,.sec--kon .faq{border-color:var(--line-dark)}
.faq__i{border-bottom:1px solid var(--line)}
.sec--dark .faq__i,.sec--kon .faq__i{border-color:var(--line-dark)}
.faq__q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  text-align:left;padding:24px 0;font-family:var(--jp-serif);font-size:clamp(15px,1.6vw,17px);
  line-height:1.6;letter-spacing:.04em;
}
html[lang="en"] .faq__q{font-family:var(--en-serif);font-size:clamp(18px,2vw,21px);font-weight:400}
.faq__q::after{
  content:"";flex:0 0 auto;width:14px;height:14px;margin-top:.45em;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;
  color:var(--kin);transition:transform .35s var(--ease);
}
.faq__i.is-open .faq__q::after{transform:rotate(135deg)}
.faq__a{overflow:hidden;height:0;transition:height .4s var(--ease)}
.faq__a>div{padding:0 0 26px;max-width:72ch;color:var(--ink-2);font-size:14.5px;line-height:1.95}
.sec--dark .faq__a>div,.sec--kon .faq__a>div{color:var(--on-dark-2)}

/* ============================================================
   用語集（AEO用の定義コンテンツ）
   ============================================================ */
.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:900px){.terms{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.terms{grid-template-columns:1fr}}
.term{background:var(--white);padding:clamp(20px,2.4vw,28px);display:grid;gap:8px;align-content:start}
.term__t{font-family:var(--en-serif);font-size:1.15rem;font-weight:500}
.term__r{font-family:var(--jp-serif);font-size:12.5px;color:var(--kin);letter-spacing:.1em}
.term__d{font-size:13.5px;color:var(--ink-2);line-height:1.8}

/* ============================================================
   ページヘッダー（下層）
   ============================================================ */
.phead{position:relative;background:var(--sumi);color:var(--on-dark);min-height:clamp(340px,44vh,460px);display:flex;align-items:flex-end;overflow:hidden}
.phead__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.phead::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,13,.85) 0%,rgba(13,13,13,.3) 45%,rgba(13,13,13,.88) 100%)}
.phead__in{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut) clamp(40px,6vh,68px)}
.phead h1{font-family:var(--en-serif);font-weight:300;font-size:clamp(2.2rem,5.4vw,4rem);line-height:1.08;margin-top:14px}
.phead__jp{display:block;font-family:var(--jp-serif);font-size:clamp(.85rem,1.4vw,1.05rem);letter-spacing:.2em;color:var(--on-dark-2);margin-top:14px}
.phead__lede{margin-top:20px;max-width:56ch;color:var(--on-dark-2);font-size:14.5px}

/* パンくず */
.crumb{background:var(--white);border-bottom:1px solid var(--line)}
.crumb ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 0;font-size:11.5px;letter-spacing:.1em;color:var(--ink-3);font-family:var(--en-sans)}
.crumb li+li::before{content:"／";margin-right:8px;color:var(--line)}
.crumb a:hover{color:var(--kin)}

/* ============================================================
   お問い合わせ
   ============================================================ */
.form{display:grid;gap:22px}
.field{display:grid;gap:8px}
.field label{font-family:var(--en-sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.field .req{color:var(--kin);margin-left:6px}
.field input,.field select,.field textarea{
  font:inherit;font-size:15px;color:var(--ink);background:var(--white);
  border:1px solid var(--line);padding:14px 16px;border-radius:0;width:100%;
  transition:border-color .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--kin);outline:none}
.field textarea{min-height:170px;resize:vertical}
.field--check label{
  display:flex;align-items:flex-start;gap:10px;
  font-family:inherit;font-size:13.5px;letter-spacing:normal;text-transform:none;color:var(--ink);
}
.field--check input[type=checkbox]{width:auto;margin-top:3px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:680px){.form__row{grid-template-columns:1fr}}
.form__note{font-size:12.5px;color:var(--ink-3);line-height:1.8}

.info{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.info__r{background:var(--white);display:grid;grid-template-columns:190px 1fr;gap:0}
@media (max-width:640px){.info__r{grid-template-columns:1fr}}
.info__k{
  background:var(--kinari);padding:16px 20px;font-family:var(--en-sans);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  display:flex;align-items:center;
}
.info__v{padding:16px 20px;font-size:14.5px;color:var(--ink)}

/* ============================================================
   CTA帯
   ============================================================ */
.cta{position:relative;background:var(--kon);color:var(--on-dark);overflow:hidden}
.cta__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.24}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,31,51,.82),rgba(13,13,13,.9))}
.cta__in{position:relative;z-index:1;text-align:center;display:grid;gap:22px;justify-items:center;padding:clamp(64px,9vw,120px) var(--gut);max-width:820px;margin-inline:auto}

/* ============================================================
   フッター
   ============================================================ */
.ft{background:var(--sumi);color:var(--on-dark-2);padding:clamp(56px,7vw,88px) 0 36px;font-size:13.5px}
.ft__top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(24px,3.4vw,48px);padding-bottom:clamp(36px,5vw,56px);border-bottom:1px solid var(--line-dark)}
@media (max-width:900px){.ft__top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft__top{grid-template-columns:1fr}}
.ft__brand img{height:40px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.ft__brand p{margin-top:18px;color:var(--on-dark-3);font-size:13px;line-height:1.9}
.ft__h{font-family:var(--en-sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--kin-2);margin-bottom:16px}
.ft__list li{margin-bottom:11px}
.ft__list a{color:var(--on-dark-2);transition:color .3s}
.ft__list a:hover{color:var(--kinari)}
.ft__bot{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;padding-top:26px;font-size:11.5px;color:var(--on-dark-3)}
.ft__sns{display:flex;gap:16px}
.ft__sns a{color:var(--on-dark-3);transition:color .3s}
.ft__sns a:hover{color:var(--kin-2)}
.ft__sns svg{width:18px;height:18px;display:block}

/* ============================================================
   スクロール演出
   ============================================================ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* 本文用 */
.prose{display:grid;gap:20px;max-width:74ch}
.prose p{color:var(--ink-2);font-size:15px}
.prose h2{font-family:var(--jp-serif);font-size:clamp(1.15rem,2vw,1.45rem);letter-spacing:.06em;margin-top:20px}
html[lang="en"] .prose h2{font-family:var(--en-serif);font-weight:400;font-size:clamp(1.5rem,2.4vw,1.9rem)}
.prose ul{display:grid;gap:10px;margin-top:4px}
.prose li{position:relative;padding-left:20px;color:var(--ink-2);font-size:14.5px}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--kin)}
.sec--dark .prose p,.sec--dark .prose li{color:var(--on-dark-2)}