/* Kawauso Factory 公式サイト — 共通の見た目
   方針（本人指示 2026-10-25）：エレガントでハイブランド。ブランドバッグのメゾンのサイトを手本に、
   白地・墨・大きな写真・広い余白・小さく字間を空けた英字の大文字。色は写真に任せる。 */

:root {
  --bg: #ffffff;
  --ivory: #f6f3ee;
  --ink: #141414;
  --ink-2: #4d4d4d;
  --ink-3: #8a8a8a;
  --line: rgba(20, 20, 20, .12);
  --label: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --serif-en: "Cormorant Garamond", "Times New Roman", serif;
  --serif-ja: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --head-h: 76px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 2; letter-spacing: .03em;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }

/* 小さな大文字の英字（ナビ・見出しの上の札・リンク） */
.label, .links a, .discover, .foot h4, .chip {
  font-family: var(--label); font-weight: 400; font-size: 11.5px;
  letter-spacing: .26em; text-transform: uppercase;
}

/* ---------- ヘッダー：ロゴを中央に ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--head-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--gutter); color: #fff;
  transition: background .5s ease, color .5s ease, border-color .5s ease;
  border-bottom: 1px solid transparent;
}
.top.solid, .top.scrolled { background: rgba(255,255,255,.96); color: var(--ink); border-bottom-color: var(--line); }
.top .brand { grid-column: 2; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.top .brand img { height: 30px; width: auto; }
.top .brand .w { display: none; }
.top .brand .b { display: block; }
.top.solid .brand .w, .top.scrolled .brand .w { display: none; }
.top:not(.solid):not(.scrolled) .brand .b { display: none; }
.top:not(.solid):not(.scrolled) .brand .w { display: block; }
.top .brand span { font-family: var(--label); font-size: 13px; letter-spacing: .34em; white-space: nowrap; }
.links { display: flex; gap: clamp(16px, 2.6vw, 36px); align-items: center; }
.links.l { grid-column: 1; justify-self: start; }
.links.r { grid-column: 3; justify-self: end; }
.links a { text-decoration: none; opacity: .9; position: relative; padding: 4px 0; }
.links a::after, .discover::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor;
  transition: right .5s ease;
}
.links a:hover::after { right: 0; }
@media (max-width: 760px) {
  .top .brand span { display: none; }
  .links .opt { display: none; }
}

/* ---------- ヒーロー：全面の映像 ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #0b0d12; color: #fff; }
.hero > img, .hero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 58%, rgba(0,0,0,.45) 100%); }
.hero .cap {
  position: absolute; left: 0; right: 0; bottom: clamp(48px, 9vh, 96px); z-index: 1;
  text-align: center; padding: 0 var(--gutter);
}
.hero .cap .label:not(.discover), .panel .cap .label:not(.discover) { display: block; margin-bottom: 18px; opacity: .9; }
.hero h1, .hero .h1 {
  font-family: var(--serif-en); font-weight: 400; font-size: clamp(34px, 5.4vw, 72px);
  line-height: 1.1; letter-spacing: .02em; margin: 0 0 26px;
}
.hero h1:lang(ja), .hero .h1:lang(ja) { font-family: var(--serif-ja); font-weight: 500; letter-spacing: .14em; font-size: clamp(26px, 4vw, 50px); line-height: 1.5; }

.discover {
  display: inline-block; width: max-content; justify-self: center; position: relative; text-decoration: none; padding: 6px 0;
}
.discover::after { right: 0; }
.discover:hover::after { right: 100%; }

/* ---------- メゾンの言葉 ---------- */
.statement { padding: clamp(96px, 16vw, 200px) 0; text-align: center; }
.statement .logo { width: min(560px, 82vw); margin: 0 auto clamp(48px, 7vw, 80px); }
.statement p.lead {
  font-family: var(--serif-ja); font-size: clamp(18px, 2.1vw, 24px); line-height: 2.2; letter-spacing: .12em; margin: 0 0 1.6em;
}
.statement p.lead:lang(en) { font-family: var(--serif-en); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.6; letter-spacing: .01em; }
.statement p { color: var(--ink-2); margin: 0 auto; max-width: 34em; }

/* ---------- 2つのアプリを並べる（雑誌の見開き） ---------- */
.diptych { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--bg); }
.panel { position: relative; display: block; text-decoration: none; color: #fff; overflow: hidden; aspect-ratio: 4 / 5; background: #0b0d12; }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.panel:hover img { transform: scale(1.07); }
.panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 88%); }
.panel .cap { position: absolute; left: 0; right: 0; bottom: clamp(28px, 5vw, 56px); z-index: 1; text-align: center; padding: 0 20px; }
.panel .name { display: block; font-family: var(--serif-en); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; margin: 10px 0 8px; letter-spacing: .02em; }
.panel .tag { display: block; font-family: var(--serif-ja); font-size: 14px; letter-spacing: .16em; margin-bottom: 18px; opacity: .92; }
.panel .tag:lang(en) { font-family: var(--serif-en); font-style: italic; font-size: 18px; letter-spacing: .02em; }
@media (max-width: 760px) { .diptych { grid-template-columns: 1fr; } .panel { aspect-ratio: 4 / 5; } }

/* ---------- 全面の写真の帯 ---------- */
.band { position: relative; height: 92svh; min-height: 480px; overflow: hidden; color: #fff; background: #0b0d12; }
.band img, .band video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.22); }
.band .cap { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; text-align: center; padding: 0 var(--gutter); }
.band q { quotes: none; font-family: var(--serif-ja); font-size: clamp(20px, 3vw, 36px); letter-spacing: .2em; line-height: 2; }
.band q:lang(en) { font-family: var(--serif-en); font-style: italic; letter-spacing: .02em; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.4; }
.band .label { margin-top: 26px; opacity: .85; }

/* ---------- 3つの約束 ---------- */
.house { padding: clamp(96px, 14vw, 180px) 0; background: var(--ivory); }
.house .head { text-align: center; margin-bottom: clamp(56px, 8vw, 96px); }
.house h2, .sec h2 {
  font-family: var(--serif-en); font-weight: 400; font-size: clamp(32px, 4vw, 52px); letter-spacing: .02em; line-height: 1.15; margin: 14px 0 0;
}
.house h2:lang(ja), .sec h2:lang(ja) { font-family: var(--serif-ja); font-weight: 500; font-size: clamp(22px, 2.8vw, 32px); letter-spacing: .16em; line-height: 1.6; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 5vw, 72px); }
.three > div { text-align: center; }
.three .n { font-family: var(--serif-en); font-style: italic; font-size: 22px; color: var(--ink-3); }
.three h3 { font-family: var(--serif-ja); font-weight: 500; font-size: 18px; letter-spacing: .16em; margin: 10px 0 14px; }
.three h3:lang(en) { font-family: var(--serif-en); font-size: 24px; letter-spacing: .02em; }
.three p { color: var(--ink-2); font-size: 14px; margin: 0; }
@media (max-width: 760px) { .three { grid-template-columns: 1fr; } }

/* ---------- お問い合わせ ---------- */
.contact { padding: clamp(96px, 14vw, 180px) 0; text-align: center; }
.contact .mail { font-family: var(--serif-en); font-size: clamp(22px, 3vw, 34px); text-decoration: none; letter-spacing: .03em; border-bottom: 1px solid var(--line); word-break: break-all; }
.contact .mail:hover { border-color: var(--ink); }
.contact p { color: var(--ink-2); }

/* ---------- フッター：黒地に白いロゴ ---------- */
footer.foot { background: #0e0e0e; color: #d9d9d9; padding: clamp(64px, 9vw, 112px) 0 40px; }
.foot .logo { width: min(320px, 70vw); margin: 0 auto clamp(48px, 7vw, 72px); opacity: .95; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 900px; margin: 0 auto; text-align: center; }
.foot h4 { margin: 0 0 16px; color: #fff; }
.foot ul { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 2.3; }
.foot a { text-decoration: none; color: #bdbdbd; }
.foot a:hover { color: #fff; }
.foot .legal { text-align: center; margin-top: clamp(56px, 8vw, 88px); padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); font-family: var(--label); font-size: 10.5px; letter-spacing: .24em; color: #8a8a8a; text-transform: uppercase; }
@media (max-width: 600px) { .foot-cols { grid-template-columns: 1fr; } }

/* ---------- ふわっと出る ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .panel img { transition: none; }
}

/* =========================================================
   Sky Gallery のページ
   ========================================================= */
.sec { padding: clamp(96px, 14vw, 180px) 0; }
.sec .head { text-align: center; margin-bottom: clamp(48px, 7vw, 88px); }
.sec .intro { color: var(--ink-2); max-width: 36em; margin: 22px auto 0; }

.hero .lockup { width: min(380px, 70vw); margin: 0 auto 26px; }
.hero .cap .label.soon { display: inline-block; border: 1px solid rgba(255,255,255,.7); padding: 8px 22px; margin: 0; }

/* 6つの景色：横に流れる帯 */
.scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.scene { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 4; background: #0b0d12; color: #fff; }
.scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.scene:hover img { transform: scale(1.05); }
.scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 100%); }
.scene figcaption { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 1; text-align: center; padding: 0 16px; }
.scene b { display: block; font-family: var(--serif-ja); font-weight: 500; font-size: 17px; letter-spacing: .16em; }
.scene b:lang(en) { font-family: var(--serif-en); font-size: 22px; letter-spacing: .02em; }
.scene span { display: block; font-size: 12px; opacity: .85; letter-spacing: .08em; line-height: 1.7; margin-top: 6px; }
@media (max-width: 760px) { .scenes { grid-template-columns: 1fr 1fr; } .scene { aspect-ratio: 4 / 5; } }

/* 特長：写真と文を交互に（雑誌の組み） */
.feature { display: grid; grid-template-columns: 1.6fr 1fr; align-items: center; gap: clamp(32px, 6vw, 96px); margin: 0 0 clamp(80px, 12vw, 160px); }
.feature:last-child { margin-bottom: 0; }
.feature.flip { grid-template-columns: 1fr 1.6fr; }
.feature.flip .shot { order: 2; }
.feature .txt { max-width: 26em; }
.feature h3 { font-family: var(--serif-ja); font-weight: 500; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: .14em; line-height: 1.7; margin: 14px 0 18px; }
.feature h3:lang(en) { font-family: var(--serif-en); font-size: clamp(26px, 2.8vw, 34px); letter-spacing: .01em; line-height: 1.2; }
.feature p { color: var(--ink-2); margin: 0 0 1em; }
.feature ul { list-style: none; margin: 0; padding: 0; color: var(--ink-2); font-size: 13.5px; }
.feature li { padding: 9px 0; border-top: 1px solid var(--line); }
.feature li:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 860px) { .feature, .feature.flip { grid-template-columns: 1fr; } .feature.flip .shot { order: 0; } }

/* 空のことば */
.words { background: var(--ivory); text-align: center; }
.words-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px clamp(22px, 3.6vw, 48px); font-family: var(--serif-ja); font-size: clamp(22px, 3vw, 34px); letter-spacing: .2em; margin: 0 0 40px; }
.words-row span:nth-child(even) { color: var(--ink-3); }
.words p { color: var(--ink-2); max-width: 34em; margin: 0 auto; }

.film video { width: 100%; background: #000; }

.sister { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.sister .panel { aspect-ratio: 16 / 10; }
.sister .txt { display: grid; place-content: center; text-align: center; padding: 48px var(--gutter); background: var(--ivory); }
.sister .txt h3 { font-family: var(--serif-en); font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); margin: 12px 0 10px; }
.sister .txt p { color: var(--ink-2); margin: 0 auto 26px; max-width: 24em; }
@media (max-width: 760px) { .sister { grid-template-columns: 1fr; } }

.credit { text-align: center; font-family: var(--label); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); padding: 40px var(--gutter); margin: 0; }

/* ---------- 404 ---------- */
.notfound { min-height: 100svh; display: grid; place-content: center; text-align: center; padding: 0 var(--gutter); }
.notfound .logo { width: min(360px, 70vw); margin: 0 auto 40px; }
.notfound p { color: var(--ink-2); }
.feature .shot video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0b0d12; }
.film video { aspect-ratio: 16 / 9; }

/* 2つの版（無印と＋）— 中央そろえの2列、アイコンと App Store への細いリンク */
.editions { border-top: 1px solid var(--line); }
.ed-grid { display: grid; grid-template-columns: 1fr 1fr; max-width: 1040px; margin: 0 auto; }
.ed { text-align: center; padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 56px); }
.ed + .ed { border-left: 1px solid var(--line); }
.ed .icon { width: 108px; height: 108px; border-radius: 22px; margin: 0 auto 26px; box-shadow: 0 14px 30px -14px rgba(0,0,0,.45); }
.ed h3 { font-family: var(--serif-en); font-weight: 400; font-size: clamp(28px, 3vw, 38px); margin: 10px 0 6px; letter-spacing: .02em; }
.ed .tag { font-family: var(--serif-ja); font-size: 16px; letter-spacing: .16em; margin: 0 0 18px; }
.ed .tag:lang(en) { font-family: var(--serif-en); font-style: italic; font-size: 20px; letter-spacing: .02em; }
.ed p { color: var(--ink-2); font-size: 14px; max-width: 24em; margin: 0 auto 28px; }
.ed .discover { color: var(--ink); }
.ed-note { text-align: center; color: var(--ink-3); font-size: 12.5px; margin: clamp(32px, 5vw, 56px) 0 0; }
@media (max-width: 700px) { .ed-grid { grid-template-columns: 1fr; } .ed + .ed { border-left: 0; border-top: 1px solid var(--line); } }

/* =========================================================
   文書のページ（プライバシーポリシー・サポート）— 白地に細い一段組み
   ========================================================= */
.doc-head { padding: calc(var(--head-h) + clamp(64px, 10vw, 120px)) 0 clamp(40px, 6vw, 64px); text-align: center; }
.doc-head h1 { font-family: var(--serif-ja); font-weight: 500; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: .16em; margin: 16px 0 14px; }
.doc-head h1:lang(en) { font-family: var(--serif-en); font-weight: 400; font-size: clamp(34px, 4.4vw, 52px); letter-spacing: .01em; }
.doc-head p { color: var(--ink-2); margin: 0; }
.doc-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; margin: 32px 0 0; padding: 0; list-style: none; }
.doc-toc a { text-decoration: none; position: relative; padding: 4px 0; }
.doc-toc a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .3; }
.doc { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter) clamp(96px, 12vw, 160px); }
.doc .part { border-top: 1px solid var(--line); padding-top: clamp(48px, 7vw, 72px); margin-top: clamp(48px, 7vw, 72px); scroll-margin-top: calc(var(--head-h) + 16px); }
.doc .part:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.doc .part > h2 { font-family: var(--serif-en); font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: .02em; margin: 10px 0 8px; }
.doc .part > h2:lang(ja) { font-family: var(--serif-ja); font-weight: 500; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: .14em; }
.doc .part > .sub { color: var(--ink-3); font-size: 13px; margin: 0 0 32px; }
.doc h3 { font-family: var(--serif-ja); font-weight: 500; font-size: 17px; letter-spacing: .08em; margin: 40px 0 12px; }
.doc h3:lang(en) { font-family: var(--serif-en); font-size: 21px; letter-spacing: .01em; }
.doc h4 { font-size: 14px; font-weight: 500; margin: 26px 0 8px; letter-spacing: .06em; }
.doc p, .doc li { color: var(--ink-2); font-size: 14.5px; }
.doc ul, .doc ol { padding-left: 1.3em; margin: 0 0 1em; }
.doc li { margin: 0 0 .5em; }
.doc .meta { text-align: center; color: var(--ink-3); font-size: 13px; margin: 0 0 clamp(48px, 7vw, 72px); }
.doc .mail-box { text-align: center; border: 1px solid var(--line); padding: 28px 20px; margin: 0 0 8px; }
.doc .mail-box a { font-family: var(--serif-en); font-size: clamp(20px, 2.6vw, 26px); text-decoration: none; border-bottom: 1px solid var(--line); }
.doc details { border-top: 1px solid var(--line); padding: 16px 0; }
.doc details:last-of-type { border-bottom: 1px solid var(--line); }
.doc summary { cursor: pointer; list-style: none; font-size: 15px; color: var(--ink); display: flex; justify-content: space-between; gap: 16px; }
.doc summary::-webkit-details-marker { display: none; }
.doc summary::after { content: "+"; font-family: var(--label); color: var(--ink-3); transition: transform .3s; }
.doc details[open] summary::after { transform: rotate(45deg); }
.doc details > div { padding-top: 10px; }
.doc code { font-size: 12.5px; word-break: break-all; }

/* ---------- トップのファーストビュー：横に送るスライド（バレットはスライドの数から自動で作る） ---------- */
.slider { position: relative; height: 100svh; min-height: 560px; background: #0b0d12; color: #fff; overflow: hidden; }
.slides { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.slides::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.slide > img, .slide > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 55%, rgba(0,0,0,.5) 100%); }
.slide .cap { position: absolute; left: 0; right: 0; bottom: clamp(92px, 14vh, 140px); z-index: 1; text-align: center; padding: 0 var(--gutter); }
.slide .cap .label:not(.discover) { display: block; margin-bottom: 18px; opacity: .9; }
.slide .h1 { font-family: var(--serif-en); font-weight: 400; font-size: clamp(34px, 5.4vw, 72px); line-height: 1.1; letter-spacing: .02em; margin: 0 0 26px; }
.slide .h1:lang(ja) { font-family: var(--serif-ja); font-weight: 500; letter-spacing: .14em; font-size: clamp(26px, 4vw, 50px); line-height: 1.5; }
.bullets { position: absolute; left: 0; right: 0; bottom: clamp(36px, 6vh, 56px); z-index: 3; display: flex; justify-content: center; gap: 14px; }
.bullets button { all: unset; cursor: pointer; width: 34px; height: 18px; display: grid; place-items: center; }
.bullets button::before { content: ""; width: 100%; height: 1px; background: rgba(255,255,255,.45); transition: background .4s, height .4s; }
.bullets button[aria-current="true"]::before { background: #fff; height: 2px; }
.bullets button:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .slides { scroll-behavior: auto; } }