/* ============================================================
   MAHORA — Design System (全ページ共通)
   一棟貸し高級ヴィラ ブランドサイト(架空・制作サンプル)

   配色: 墨黒 #101010 / 生成り #F6F4EF / グレージュ #9A9288
         アクセントは鈍い真鍮 #B98C5A をリンク細部のみ
   書体: EN = Manrope(ジオメトリック系サンセリフ、細〜中太)
         JP = Noto Sans JP(300/400)
   方針: 写真の色を主役にし UI は無彩色。余白が主役。
         非対称グリッド。ライト(生成り)とダーク(墨黒)を意図的に切替。
   モーション: 初期状態は html.js が付いた時だけ適用(JS 無効でも全要素が見える)。
              prefers-reduced-motion: reduce では全モーション無効。
   ============================================================ */

:root {
  /* 基調色 */
  --ink:        #101010;   /* 墨黒 */
  --ink-soft:   #1a1a18;   /* やや明るい墨(ダーク2層目) */
  --cream:      #f6f4ef;   /* 生成り */
  --cream-2:    #efece4;   /* 生成り(やや沈む) */
  --greige:     #9a9288;   /* グレージュ */
  --brass:      #b98c5a;   /* 鈍い真鍮(アクセント・細部のみ) */

  /* 文字色 */
  --on-cream:        #1a1a18;            /* 生成り地の文字 */
  --on-cream-mute:   rgba(26,26,24,.56); /* 生成り地の弱文字 */
  --on-ink:          #ece9e1;            /* 墨地の文字 */
  --on-ink-mute:     rgba(236,233,225,.56);

  /* 罫線 */
  --line-cream: rgba(26,26,24,.14);
  --line-ink:   rgba(236,233,225,.16);

  /* 書体 */
  --f-en: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;

  /* 寸法 */
  --w-content: 1280px;
  --w-narrow:  860px;
  --pad-x: clamp(22px, 5vw, 64px);
  --sec-pad: clamp(96px, 17vw, 220px);   /* セクション間 desktop 160-240 / mobile 96-128 */

  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--f-jp);
  font-weight: 400;
  background: var(--cream);
  color: var(--on-cream);
  line-height: 2;
  letter-spacing: .06em;
  font-size: clamp(15px, 1.1vw, 16px);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* 和文の語中改行を抑える既定値。改行は 、。「」() 等の文節境界でのみ起こす。
   英語の見出し等は .h-en / .display 側で keep-all を解除する。 */
.h-sec, .lead, .hero__copy, .intro__copy, .intro__sub,
.xp-intro__copy, .chapter__body, .chapter__title, .quote p,
.villa__intro, .arch-copy p, .theme__desc, .step__body, .faq__a-inner,
.word__def, .footer__tag, .footer__fiction {
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;
}
/* 欧文見出しは通常の単語折り返しに戻す */
.h-en, .display, .villa-show__name, .theme__en, .word__en, .rate__name {
  word-break: normal;
  overflow-wrap: normal;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--ink); color: var(--cream); }

/* ============================== 汎用レイアウト ============================== */

.wrap { max-width: var(--w-content); margin: 0 auto; padding: 0 var(--pad-x); }
.wrap--narrow { max-width: var(--w-narrow); }

.sec { padding: var(--sec-pad) 0; position: relative; }
.sec--ink  { background: var(--ink);    color: var(--on-ink); }
.sec--ink2 { background: var(--ink-soft); color: var(--on-ink); }
.sec--cream2 { background: var(--cream-2); }

/* セクション小見出し: EN ラベル(極小・広字間)+ JP 見出しの2段構え */
.eyebrow {
  font-family: var(--f-en);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--greige);
  display: inline-block;
  margin-bottom: 22px;
}
.sec--ink .eyebrow, .sec--ink2 .eyebrow { color: var(--on-ink-mute); }

/* 大型 EN 見出し(ヒーロー級) */
.display {
  font-family: var(--f-en);
  font-weight: 200;
  font-size: clamp(56px, 10vw, 140px);
  line-height: .98;
  letter-spacing: -0.02em;
}

/* セクション見出し(JP) */
.h-sec {
  font-family: var(--f-jp);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.7;
  letter-spacing: .08em;
}
.h-sec b, .h-sec strong { font-weight: 600; }

.h-en {
  font-family: var(--f-en);
  font-weight: 300;
  font-size: clamp(30px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.h-sub {
  font-family: var(--f-jp);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 23px);
  letter-spacing: .1em;
  line-height: 1.9;
}

.lead {
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 2.3;
  letter-spacing: .08em;
  color: var(--on-cream-mute);
}
.sec--ink .lead, .sec--ink2 .lead { color: var(--on-ink-mute); }
.lead--strong { color: var(--on-cream); }
.sec--ink .lead--strong, .sec--ink2 .lead--strong { color: var(--on-ink); }

.kicker {
  font-family: var(--f-en);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--greige);
}

/* ボタン(罫線テキストリンク) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-en);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 16px 0;
  position: relative;
}
.btn::after {
  content: '';
  position: absolute;
  left: 0; bottom: 8px;
  width: 100%; height: 1px;
  background: currentColor;
  opacity: .3;
  transform-origin: right;
  transition: transform .6s var(--ease), opacity .4s;
}
.btn:hover::after { transform: scaleX(0); transform-origin: left; opacity: 0; }
.btn .arw { display: inline-block; transition: transform .6s var(--ease); }
.btn:hover .arw { transform: translateX(8px); }

/* 塗りボタン(RESERVE) */
.btn-fill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-en);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 1px solid currentColor;
  border-radius: 2px;
  transition: background .5s var(--ease), color .5s var(--ease);
}
.btn-fill:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.sec--ink .btn-fill:hover, .header.is-dark .btn-fill:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* ============================== ヘッダー ============================== */

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 30px) var(--pad-x);
  color: var(--on-ink);
  transition: background .5s var(--ease), padding .5s var(--ease), color .5s var(--ease),
              border-color .5s var(--ease), transform .6s var(--ease);
  border-bottom: 1px solid transparent;
  will-change: transform;
}
/* 下スクロールでヘッダーを隠す(上スクロール / 最上部で復帰) */
.header.is-hidden { transform: translateY(-115%); }
body.menu-open .header.is-hidden { transform: none; }
/* 最上部は透明、スクロールで生成り背景 + 細い罫線 */
.header.is-scrolled {
  background: rgba(246,244,239,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--on-cream);
  border-bottom-color: var(--line-cream);
  padding-top: clamp(12px, 1.6vw, 18px);
  padding-bottom: clamp(12px, 1.6vw, 18px);
}
/* メニューを開いている間は、スクロール済みでも生成り背景を出さない(暗いメニューの上で白帯にならない) */
body.menu-open .header { background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--on-ink); border-bottom-color: transparent; }

.brand { display: flex; flex-direction: column; line-height: 1; }
.brand__mark {
  font-family: var(--f-en);
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 22px);
  letter-spacing: .28em;
  padding-left: .28em;
}
.brand__sub {
  font-family: var(--f-jp);
  font-weight: 300;
  font-size: 9.5px;
  letter-spacing: .3em;
  margin-top: 7px;
  opacity: .7;
}

.nav { display: flex; align-items: center; gap: clamp(22px, 2.4vw, 40px); }
.nav__link {
  font-family: var(--f-en);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  position: relative;
  padding: 4px 0;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

/* 予約ボタン(ヘッダー専用・造形を作り直し)
   nav__link の下線は出さず、角丸の罫線ピル + ホバーで塗りに反転。
   ヘッダーの色状態(透明=生成り文字 / スクロール=墨文字)に追従する。 */
.nav__reserve {
  margin-left: clamp(6px, 1vw, 14px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-en);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
  padding: 11px 22px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .55s var(--ease), border-color .55s var(--ease);
}
.nav__reserve::after { display: none; }   /* nav__link 由来の下線を無効化 */
.nav__reserve::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .55s var(--ease);
}
.nav__reserve .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; transition: transform .55s var(--ease); }
/* 透明ヘッダー(生成り文字): ホバーで生成り塗り + 墨文字 */
.nav__reserve:hover { color: var(--ink); border-color: var(--on-ink); }
.nav__reserve:hover::before { background: var(--on-ink); transform: scaleX(1); transform-origin: left; }
.nav__reserve:hover .dot { transform: translateX(3px); }
/* スクロール済みヘッダー(墨文字): ホバーで墨塗り + 生成り文字 */
.header.is-scrolled .nav__reserve:hover { color: var(--cream); border-color: var(--ink); }
.header.is-scrolled .nav__reserve:hover::before { background: var(--ink); }
.nav__reserve:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* ハンバーガー(モバイル) */
.burger {
  display: none;
  width: 34px; height: 18px;
  position: relative;
  z-index: 130;
}
.burger span {
  position: absolute;
  left: 0; width: 100%; height: 1.5px;
  background: currentColor;
  transition: transform .5s var(--ease), opacity .3s, background .3s;
}
.burger span:nth-child(1) { top: 2px; }
.burger span:nth-child(2) { bottom: 2px; }
body.menu-open .burger span { background: var(--cream); }
body.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { transform: translateY(-6px) rotate(-45deg); }

/* 全画面メニュー */
.menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad-x);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--ease);
  pointer-events: none;
}
body.menu-open .menu { clip-path: inset(0 0 0 0); pointer-events: auto; }
.menu__list { display: flex; flex-direction: column; gap: clamp(10px, 2vh, 22px); }
.menu__item a {
  display: flex;
  align-items: baseline;
  gap: 20px;
  font-family: var(--f-en);
  font-weight: 200;
  font-size: clamp(34px, 9vw, 76px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), color .4s;
}
body.menu-open .menu__item a { opacity: 1; transform: none; }
.menu__item a:hover { color: var(--brass); }
.menu__item .jp { font-family: var(--f-jp); font-weight: 300; font-size: 13px; letter-spacing: .2em; color: var(--on-ink-mute); }
.menu__foot {
  margin-top: clamp(40px, 7vh, 80px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 36px;
  font-family: var(--f-jp);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--on-ink-mute);
  opacity: 0;
  transition: opacity .6s var(--ease) .3s;
}
body.menu-open .menu__foot { opacity: 1; }

/* ============================== ヒーロー(汎用) ============================== */

.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.hero__bg { position: absolute; inset: -6% 0; z-index: 0; overflow: hidden; }
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  will-change: transform;
}
/* 写真を沈める二層のベール(下方が暗い)+ 上端のわずかな闇でヘッダーを読みやすく */
.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(16,16,16,.34) 0%, rgba(16,16,16,.05) 34%, rgba(16,16,16,.66) 100%);
}
.hero__veil2 {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 80% at 18% 100%, rgba(16,16,16,.5) 0%, transparent 60%);
}
/* ヒーロー本文の初期状態(GSAP がタイムラインで開く) */
.js:not(.reduced) .hero__inner [data-hero-item],
.js:not(.reduced) .page-hero__inner [data-hero-item] { opacity: 0; }
.js:not(.reduced) .hero__scroll { opacity: 0; }
.hero__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding: 0 var(--pad-x) clamp(60px, 10vh, 120px);
  max-width: var(--w-content);
  margin: 0 auto;
  color: var(--on-ink);
}
.hero__eyebrow {
  font-family: var(--f-en);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--on-ink-mute);
  display: block;
  margin-bottom: clamp(20px, 3vh, 34px);
}
.hero__title { color: var(--on-ink); margin-bottom: clamp(22px, 3.5vh, 40px); }
.hero__copy {
  font-family: var(--f-jp);
  font-weight: 300;
  font-size: clamp(16px, 1.7vw, 22px);
  letter-spacing: .14em;
  line-height: 2;
  max-width: 34ch;
  color: var(--on-ink);
  text-shadow: 0 1px 24px rgba(16,16,16,.4);
  /* 和文が語中で折り返さないようにする(改行は 、。 等の文節境界でのみ) */
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;
}
/* スクロール促し: 細い縦線アニメーション */
.hero__scroll {
  position: absolute;
  right: var(--pad-x); bottom: clamp(40px, 8vh, 90px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hero__scroll span {
  font-family: var(--f-en);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--on-ink-mute);
  writing-mode: vertical-rl;
}
.hero__scroll i {
  display: block; width: 1px; height: 70px;
  background: linear-gradient(to bottom, rgba(236,233,225,.7), transparent);
  animation: scrollcue 2.6s var(--ease) infinite;
}
@keyframes scrollcue {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ページヒーロー(下層ページ用・短め) */
.page-hero {
  position: relative;
  height: clamp(58svh, 64vh, 72svh);
  min-height: 440px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.page-hero__bg { position: absolute; inset: -6% 0; overflow: hidden; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); will-change: transform; }
.page-hero__veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(16,16,16,.3) 0%, rgba(16,16,16,.12) 40%, rgba(16,16,16,.62) 100%); }
.page-hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--w-content); margin: 0 auto;
  padding: 0 var(--pad-x) clamp(48px, 7vh, 90px);
  color: var(--on-ink);
}
.page-hero__eyebrow {
  font-family: var(--f-en); font-weight: 500; font-size: 11px;
  letter-spacing: .36em; text-transform: uppercase; color: var(--on-ink-mute);
  display: block; margin-bottom: 18px;
}

/* ============================== フッター ============================== */

.footer { background: var(--ink); color: var(--on-ink); padding: clamp(70px, 9vw, 120px) 0 40px; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr;
  gap: clamp(40px, 6vw, 90px);
  padding-bottom: clamp(50px, 7vw, 80px);
  border-bottom: 1px solid var(--line-ink);
}
.footer__mark { font-family: var(--f-en); font-weight: 600; font-size: 26px; letter-spacing: .26em; padding-left: .26em; }
.footer__tag { margin-top: 22px; font-weight: 300; font-size: 14px; letter-spacing: .1em; line-height: 2.1; color: var(--on-ink-mute); max-width: 30ch; }
.footer__head {
  font-family: var(--f-en); font-weight: 600; font-size: 10.5px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--on-ink-mute);
  margin-bottom: 22px;
}
.footer__nav { display: flex; flex-direction: column; gap: 14px; }
.footer__nav a { font-weight: 300; font-size: 13.5px; letter-spacing: .1em; transition: color .4s; width: fit-content; }
.footer__nav a:hover { color: var(--brass); }
.footer__addr { font-weight: 300; font-size: 13px; letter-spacing: .08em; line-height: 2.1; color: var(--on-ink-mute); font-style: normal; }
.footer__note { padding-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.footer__fiction {
  font-weight: 300; font-size: 12px; letter-spacing: .08em; line-height: 1.9;
  color: var(--brass); opacity: .9;
}
.footer__copy { font-family: var(--f-en); font-weight: 400; font-size: 11px; letter-spacing: .12em; color: var(--on-ink-mute); }

/* ============================== ローダー(開幕) ============================== */

.loader {
  position: fixed; inset: 0;
  z-index: 1000;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.loader.is-done { display: none; }
.loader__mark {
  font-family: var(--f-en);
  font-weight: 300;
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--on-ink);
  opacity: 0;
}
.loader__line { width: clamp(80px, 16vw, 140px); height: 1px; background: rgba(236,233,225,.16); overflow: hidden; }
.loader__line i { display: block; width: 100%; height: 100%; background: var(--brass); transform: scaleX(0); transform-origin: left; }
/* JS が無い / reduced なら最初から畳む(白幕で固まらない) */
.reduced .loader, html:not(.js) .loader { display: none; }

/* ============================== ページ遷移幕 ============================== */

.curtain {
  position: fixed; inset: 0;
  z-index: 990;
  background: var(--ink);
  transform: translateY(101%);
  pointer-events: none;
}
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .42s ease both; }
::view-transition-new(root) { animation: vt-in .6s ease both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-2vh); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(2.4vh); } }

/* ============================== モーション初期状態(GSAP 駆動) ============================== */
/* JS 有効 かつ reduced でない時だけ初期状態を仕込む。GSAP が表示へ向けてアニメートする。
   GSAP/Lenis が読めない・reduced の時は .reduced で全初期状態を解除して即表示する。 */

.js:not(.reduced) [data-reveal] { opacity: 0; transform: translateY(34px); }
.js:not(.reduced) [data-reveal="fade"] { transform: none; }
.js:not(.reduced) [data-reveal="left"]  { transform: translateX(-42px); }
.js:not(.reduced) [data-reveal="right"] { transform: translateX(42px); }
.js:not(.reduced) [data-clip] { clip-path: inset(8% 7% 8% 7%); }
.js:not(.reduced) [data-batch] > * { opacity: 0; transform: translateY(34px); }

/* 文字分割(main.js が span を生成する) */
.char-mask { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.18; padding-bottom: .04em; }
.char { display: inline-block; transform: translateY(115%); will-change: transform; }

/* reduced: 全初期状態を解除して静的表示 */
.reduced [data-reveal],
.reduced [data-batch] > * { opacity: 1 !important; transform: none !important; }
.reduced [data-clip] { clip-path: none !important; }
.reduced .char { transform: none; }
.reduced .hero__bg img, .reduced .page-hero__bg img,
.reduced .fullshot__bg img, .reduced .theme__bg img { transform: scale(1) !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-batch] > * { opacity: 1 !important; transform: none !important; }
  [data-clip] { clip-path: none !important; }
  .char { transform: none !important; }
  .hero__bg img, .page-hero__bg img, .fullshot__bg img, .theme__bg img { transform: scale(1) !important; animation: none !important; }
  .hero__scroll i { animation: none; }
}

/* ============================== 共有コンポーネント ============================== */

/* 全幅写真ブロック(パララックス枠) */
.fullshot { position: relative; height: clamp(70vh, 90vh, 100vh); overflow: hidden; }
.fullshot__bg { position: absolute; inset: -12% 0; }
.fullshot__bg img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.fullshot__veil { position: absolute; inset: 0; background: rgba(16,16,16,.34); }
.fullshot__copy {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  max-width: var(--w-content); margin: 0 auto;
  padding: 0 var(--pad-x);
  color: var(--on-ink);
}
.fullshot__copy.is-center { align-items: center; text-align: center; }

/* 非対称メディア+テキスト行 */
.split { display: grid; align-items: center; gap: clamp(40px, 6vw, 96px); }
.split--7-5 { grid-template-columns: 1.4fr 1fr; }
.split--5-7 { grid-template-columns: 1fr 1.4fr; }
.split__media { position: relative; overflow: hidden; }
.split__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; transition: transform 1.2s var(--ease); will-change: transform; }
.split__media.is-wide img { aspect-ratio: 3/2; }
.split__media a { display: block; height: 100%; }
.split__media a:hover img { transform: scale(1.04); }
.split__cap { position: absolute; left: 18px; bottom: 16px; z-index: 2; font-family: var(--f-en); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--on-ink); text-shadow: 0 1px 16px rgba(16,16,16,.6); }

/* 区切り罫線 */
.rule { height: 1px; background: var(--line-cream); border: 0; }
.sec--ink .rule, .sec--ink2 .rule { background: var(--line-ink); }

/* ============================== レスポンシブ ============================== */

@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --sec-pad: clamp(80px, 22vw, 128px); }
  .nav { display: none; }
  .burger { display: block; }
  .split--7-5, .split--5-7 { grid-template-columns: 1fr; gap: 32px; }
  .split__media img, .split__media.is-wide img { aspect-ratio: 4/3; }
  .footer__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero__scroll { display: none; }
  .display { font-size: clamp(48px, 17vw, 84px); }
}