/* 6okken v4 — 骨組みは実コードから移植:
   lewonder.com   … 2列ヘッダ(25/25・右半分は余白)・全画面2列のビジュアルホーム・
                    下層は左固定ペイン+右スクロール・10emラベル列・見出しは本文と同寸UPPERCASE
   labecque.ch    … 500ms cubic-bezier(0.23,1,0.32,1) の共通トランジション・エッジtoエッジ
   iscp-nyc.org   … アクセント1色の文法(リンク/見出し/罫を全部同色・hoverで墨にスワップ)
   paradiseair    … 黒白の地に構造で遊ぶ・root 62.5%
   文字組みは tsutsu-web(ポートフォリオ)から移植: League Spartan + Ubuntu Mono 自前配信・
   root10px・取り消し線ホバー・和文は文久ゴシック連鎖。
   禁じ手: カード・角丸・影・グラデ・汎用フェードイン・大小の見出し階段 */

@font-face { font-family: "League Spartan"; src: url("fonts/LeagueSpartan-300.woff2") format("woff2");
  font-weight: 300; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+2039-203A; }
@font-face { font-family: "League Spartan"; src: url("fonts/LeagueSpartan-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+2039-203A; }
@font-face { font-family: "League Spartan"; src: url("fonts/LeagueSpartan-600.woff2") format("woff2");
  font-weight: 600; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+2039-203A; }
@font-face { font-family: "Ubuntu Mono"; src: url("fonts/UbuntuMono-400.woff2") format("woff2");
  font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2013-2014, U+2026; }

:root {
  /* 実験(2026-08-29): C×ビビッド橙 — 冬の稜線の氷地に、単色統一(lewonder型)のビビッド橙 */
  --wht: #f4f7f8;
  --blk: #ff5500;
  --gray: #ff5500;
  --acc: #ff5500;             /* ロクマルの橙。ISCPの文法で使う: リンク=橙, hover=墨 */
  --sans: "League Spartan", "Toppan Bunkyu Gothic", "游ゴシック体", YuGothic, "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --mono: "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);   /* labecque .transition */
}

* { margin: 0; padding: 0; border: 0; box-sizing: border-box; }
html { font-size: 10px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  background: var(--wht); color: var(--blk);
  font-family: var(--sans); font-weight: 300;
  font-size: 1.6rem; line-height: 1.9;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--acc); text-decoration: none; transition: color 150ms ease-in-out; }
a:hover { text-decoration: line-through; color: #b03a00; }
.mono, figcaption { font-family: var(--mono); font-size: 1.3rem; }
.gray { color: var(--gray); }
[lang="ja"], .jp { line-height: 2.05; }

/* 見出し: 色で立てる(iscp)。節見出しは一段大きく(2026-08-28 本人指示) */
h1, h2, h3 { font-size: 1.6rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
h2 { color: var(--acc); font-size: 2.4rem; letter-spacing: 0.04em; }
h2 [lang="ja"] { font-size: 1.5rem; margin-left: 0.4em; }

/* ---------- ヘッダ: lewonder 25/25/50 ---------- */
header.site {
  position: sticky; top: 0; z-index: 99;
  display: flex; flex-flow: row wrap; align-items: stretch;
  background: var(--wht);
}
header.site .bar { display: flex; flex-flow: row wrap; width: 100%; align-items: flex-end; }
header.site article { width: 25%; padding: 10px; }
header.site .brand { font-weight: 600; font-size: 1.8rem; letter-spacing: 0.02em; color: var(--blk); }
header.site .brand:hover { text-decoration: line-through; }
header.site address { font-style: normal; font-family: var(--mono); font-size: 1.3rem; color: var(--gray); line-height: 1.6; }
header.site .tagline { font-family: var(--mono); font-size: 1.3rem; line-height: 1.6; }
/* タブナビ(labecqueの書類インデックスタブを1px線で翻訳。現在地は帯の線を消して手前に立つ) */
/* 家型タブ: 6つのタブ=6軒の家(ロクマルと同じ理屈)。黒い家の中に白い家を重ねて1pxの輪郭を作る */
nav.tabs { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; padding: 6px 10px 0; border-bottom: 1px solid var(--blk); }
nav.tabs a { display: block; position: relative; top: 2px; background: var(--blk); padding: 1px 1px 0;
  clip-path: polygon(0 34%, 50% 0, 100% 34%, 100% 100%, 0 100%); font-size: 1.4rem; color: var(--blk); }
nav.tabs a > span { display: block; background: var(--wht);
  clip-path: polygon(0 34%, 50% 0, 100% 34%, 100% 100%, 0 100%);
  padding: 1.9rem 1.6rem 0.45rem; }
nav.tabs a[aria-current="page"] > span { font-weight: 600; }
nav.tabs a:hover > span { text-decoration: line-through; }
nav.tabs a.call { background: var(--acc); color: var(--acc); }

/* ---------- ホーム: lewonder home(本文に文章を置かない2列ビジュアル) ---------- */
body.home { min-height: 100svh; display: flex; flex-direction: column; }
.homey { position: relative; overflow: hidden; height: calc(100svh - 13rem); min-height: 44rem; flex: none; display: flex; flex-flow: row nowrap; padding: 5px; }
.homenews { padding: 7rem 10px 2rem; }
.homenews > h2 { display: block; margin-bottom: 2rem; }
.homey article { width: 50%; min-width: 0; padding: 5px; display: flex; align-items: center; justify-content: center; }
.homey article:first-child { padding-right: 2.5px; }
.homey article:last-child  { padding-left: 2.5px; }

/* 2枚の面: 写真も動画も同じ縦横比(904:1280)・同じ高さ */
.stagewrap { height: 100%; width: fit-content; max-width: 100%; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.stage { position: relative; overflow: hidden; aspect-ratio: 904 / 1280; height: 60%; max-width: 100%; }
.stage img, .stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.car .stage img { opacity: 0; transition: opacity 500ms var(--ease); }
.car .stage img.on { opacity: 1; }
.stagewrap .bar { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.4rem;
  font-family: var(--mono); font-size: 1.3rem; color: var(--gray); }
.stagewrap .bar .num { flex-shrink: 0; }

/* ホーム右下の公募行(固定・mono) */
.homecall { position: fixed; right: 10px; bottom: 10px; z-index: 60;
  font-family: var(--mono); font-size: 1.3rem; background: var(--wht); padding: 0.2rem 0.6rem; }

/* ---------- 下層: 左固定ペイン+右スクロール(lewonder inner) ---------- */
main.split { display: flex; align-items: flex-start; }
.pane-l { position: sticky; top: 15rem; width: 25%; padding: 10px 5px 10px 10px; }
.pane-l figure img { width: 100%; }
.pane-l figcaption { padding-top: 0.4rem; color: var(--gray); }
.pane-r { width: 50%; padding: 10px 10px 14rem 2.5px; }
@media (min-width: 681px) { .pane-r { min-height: calc(100svh - 15rem); } }

/* 右ペインの節 */
.pane-r section { margin-bottom: 8rem; }
.pane-r section > h2 { display: block; margin-bottom: 2.4rem; }
.pane-r .lead { max-width: 58rem; }
.pane-r p { max-width: 58rem; margin-bottom: 1.4rem; }
.pane-r .en { color: var(--gray); }

/* 10emラベル行(lewonder: span1=10em / span2=calc(100% - 10em)) */
.row { display: flex; flex-flow: row nowrap; padding: 0.45rem 0; }
.row .k { width: 10em; flex-shrink: 0; font-family: var(--mono); font-size: 1.3rem; color: var(--gray); padding-top: 0.35em; }
.row .k.acc { color: var(--acc); }
.row .v { width: calc(100% - 10em); }
.row .v .sub { color: var(--gray); }
.row.head .v { font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
@media (max-width: 520px) {
  .row { flex-flow: column nowrap; }
  .row .k { width: auto; padding-top: 0; }
  .row .v { width: 100%; }
}

/* 年グルーピング(lewonder residences) */
.yeargroup { display: flex; }
.yeargroup .year { width: 10em; flex-shrink: 0; font-family: var(--mono); font-size: 1.3rem; color: var(--acc); padding-top: 0.35em; }
.yeargroup ul { list-style: none; width: calc(100% - 10em); }
.yeargroup li { padding: 0.45rem 0; }
.yeargroup li .t { font-weight: 400; }
.yeargroup li .d { color: var(--gray); }
@media (max-width: 520px) {
  .yeargroup { flex-direction: column; }
  .yeargroup ul { width: 100%; }
}

/* フッタ(下層のみ・1行) */
footer.site { padding: 4rem 10px 3rem; margin-left: 0; width: 100%;
  font-family: var(--mono); font-size: 1.2rem; color: var(--gray);
  display: flex; flex-wrap: wrap; gap: 0.4rem 2.4rem; }
footer.site a { color: var(--gray); }
footer.site a:hover { text-decoration: line-through; }

/* ---------- モバイル(単一ブレークポイント=lewonder 680px) ---------- */
@media (max-width: 680px) {
  header.site article,   header.site article:nth-child(2) { display: none; }
    body.home { display: block; }
  .homey { height: auto; }
  .homey { flex-flow: column nowrap; padding: 5px; }
  .homey article { width: 100%; padding: 5px; }
  .homey article:first-child, .homey article:last-child { padding: 5px; }
  .stagewrap { width: 100%; height: auto; }
  .stage { height: auto; width: 100%; }
  main.split { flex-direction: column; }
  .pane-l { position: static; width: 100%; padding: 10px; }
  .pane-r { width: 100%; padding: 10px 10px 8rem; }
  .homecall { position: static; display: inline-block; margin: 0 10px 2rem; }
}

/* 開閉式プロジェクト(lewonder residencesの showtitle/showtext を details で) */
details.proj { padding: 0.35rem 0; }
details.proj summary { cursor: pointer; list-style: none; font-weight: 400; }
details.proj summary::-webkit-details-marker { display: none; }
details.proj summary::before { content: "+ "; font-family: var(--mono); color: var(--acc); }
details.proj[open] summary::before { content: "\2212 "; }
details.proj summary:hover { text-decoration: line-through; }
details.proj .body { padding: 0.6rem 0 1.2rem; max-width: 58rem; }
details.proj .body img { width: 100%; max-width: 40rem; margin: 0.8rem 0 0.2rem; }
details.proj .cred { color: var(--gray); font-size: 1.35rem; }

/* 埋め込み動画(YouTube) */
.embed { position: relative; aspect-ratio: 16 / 9; max-width: 58rem; margin: 1.2rem 0; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ラベル行の中の写真 */
.row .v img { max-width: 34rem; margin: 0.6rem 0 0.3rem; }

/* ロクマル(実ロゴのSVG再現) */
.rokumaru { display: block; margin: 2.8rem 0 3.2rem; }

.map { border: 0; width: 100%; max-width: 34rem; height: 24rem; margin: 1rem 0 0.4rem; filter: grayscale(35%); }

/* 歩く人: 左下から歩いてきて、動画が終わる頃(73.5s)にOPEN CALLの直前で立ち止まる(読む距離)。
   足踏み(0.7s×105歩=73.5s)と移動(73.5s)を同時に終え、アニメ終了後は既定=立ち姿(pB)に戻る */
.walker { position: absolute; bottom: 4px; left: 0; z-index: 6; pointer-events: none;
  animation: walker-cross 73.5s linear forwards; }
.walker .pose.pA { opacity: 0; }
.walker .pA { animation: walker-stepA 0.7s steps(1) 105; }
.walker .pB { animation: walker-stepB 0.7s steps(1) 105; }
@keyframes walker-cross { from { transform: translateX(-40px); } to { transform: translateX(calc(100vw - 278px)); } }
@keyframes walker-stepA { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes walker-stepB { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
@media (max-width: 680px) {
  @keyframes walker-cross { from { transform: translateX(-40px); } to { transform: translateX(calc(100vw - 80px)); } }
}

/* 追補v8: 富士山の稜線・フッタの回収・日→英の順・ロゴ右説明・ミニスライダー・アンカー位置 */
nav.tabs { position: relative; }
.fujimt { position: absolute; right: 12px; bottom: -1px; height: 56px; width: 140px; z-index: 1; }
nav.tabs::after { content: ""; position: absolute; right: 0; bottom: -1px; width: 152px; height: 1px; background: var(--wht); }
@media (max-width: 680px) { .fujimt { display: none; } }
header.site address a { color: var(--gray); }
.en2 { color: #ff5500; }
section[id], section, .homenews { scroll-margin-top: 15rem; }
.logorow { display: flex; gap: 4rem; align-items: flex-start; flex-wrap: wrap; }
.logorow .rokumaru { margin: 0.4rem 0; flex: 0 0 auto; }
.logorow > div { max-width: 46rem; min-width: 24rem; flex: 1; }
.car.mini { max-width: 38rem; margin: 0.8rem 0 0.4rem; }
.car.mini .stage { aspect-ratio: 3 / 2; height: auto; width: 100%; }
footer.site { align-items: baseline; gap: 0.6rem 3rem; }
footer.site .copy { font-size: 1.2rem; }
footer.site .fnav { display: flex; gap: 0.8rem; font-family: var(--mono); font-size: 1.5rem; }
footer.site .fnav a { color: var(--blk); text-decoration: underline; text-underline-offset: 3px; }
footer.site .fnav a:hover { text-decoration: line-through; }

/* miniスライダー: カウンターは写真の右下に白で重ねる */
.car.mini { position: relative; }
.car.mini .bar { position: static; justify-content: flex-end; padding-top: 0.3rem; color: var(--gray); }
.car.mini .leg { display: none; }

/* 追補v15(2026-08-28): ヘッダのロクマル・富士山頂の天気・目次列・
   ホームの新動画(余白つき)・NEWS横のスライド・ロゴ横の映像・ライトボックス */
/* ロゴの丸: 上端≈「6okken」の上端・下端は住所の字面に合わせて3px上げる。
   余白はロゴの左(article padding10px+margin10px=20px)とロゴ→文字のgap(20px)を同値に */
header.site .idrow { display: flex; gap: 20px; align-items: flex-end; }
header.site .idrow .brand { display: block; line-height: 1.1; }
.hlogo { height: 58px; width: auto; aspect-ratio: 850 / 1400; flex: none; margin: 0 0 3px 10px; }  /* brand19.8+住所2行41.6の実測-字面調整 */
.hlogo circle { fill: var(--blk); }
header.site article.wxa { width: auto; margin-left: auto; text-align: right; }
.wx { font-family: var(--mono); font-size: 1.3rem; line-height: 1.6; color: var(--blk); min-height: 4.2rem; }
.toc { position: sticky; top: 15rem; width: 25%; flex-shrink: 0; padding: 10px 10px 10px 2.4rem;
  display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start;
  font-family: var(--mono); font-size: 1.3rem; }
.toc .toclabel { font-weight: 600; letter-spacing: 0.08em; color: var(--blk);
  border-bottom: 1px solid var(--blk); padding-bottom: 0.5rem; margin-bottom: 0.5rem; min-width: 9em; }
.toc a { color: var(--gray); }
.toc a::before { content: "→ "; }
.toc a:hover { color: var(--blk); }
.homey.solo article { width: 100%; padding: 2rem 0 5rem; }
.stage.wide { aspect-ratio: 960 / 464; height: auto; width: min(68vw, calc((100svh - 26rem) * 960 / 464)); max-width: 96%; }
.newsgrid { display: flex; gap: 6rem; align-items: flex-start; }
.newsgrid .rows { flex: 1 1 auto; max-width: 88rem; }
.newscar { flex: 0 0 30rem; width: 30rem; max-width: 100%; margin-left: auto; }
.newscar .stage { aspect-ratio: 904 / 1280; height: auto; width: 100%; }
.logorow .rokuvidw { flex: 0 0 auto; margin: 0.4rem 0; }
.logorow .rokuvidw video { display: block; height: 181px; width: auto; }
.logorow .rokuvidw figcaption { color: var(--gray); padding-top: 0.4rem; }
.car.mini .frame { cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(255,255,255,0.97);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 10px; }
.lb[hidden] { display: none; }
.lb img { max-width: min(94vw, 130rem); max-height: 76svh; width: auto; height: auto; cursor: pointer; }
.lb .lbbar { font-family: var(--mono); font-size: 1.4rem; color: var(--gray);
  display: flex; gap: 2.8rem; align-items: baseline; padding-top: 1.2rem; }
.lb button { background: none; font: inherit; font-family: var(--mono); color: var(--blk); cursor: pointer; }
.lb button:hover { text-decoration: line-through; }
.lb .lbx { position: absolute; top: 1.6rem; right: 2.4rem; font-size: 2rem; }

/* 追補v16(2026-08-29): 単色統一で消えたリンクの手掛かりを下線で戻す。
   富士山・歩く人のSVGは色がHTMLに焼かれていたのでCSSでトークンに従わせる
   (CSSのプレゼンテーション指定はSVGの属性より強い) */
main a, .homenews a { text-decoration: underline; text-underline-offset: 0.22em; }
nav.tabs a, .toc a, header.site a { text-decoration: none; }
a:hover { text-decoration: line-through; }
.fujimt rect { fill: var(--blk); }
.fujimt path { stroke: var(--blk); }
.walker svg circle, .walker svg rect { fill: var(--blk); }
.walker svg path { stroke: var(--blk); }
.homealt { position: fixed; left: 10px; bottom: 10px; z-index: 60;
  font-family: var(--mono); font-size: 1.3rem; background: var(--wht); padding: 0.2rem 0.6rem;
  text-decoration: underline; text-underline-offset: 0.22em; }
@media (max-width: 680px) {
  .toc { display: none; }
  .stage.wide { width: 96%; }
  .newsgrid { flex-direction: column; gap: 3rem; }
  .newscar { width: 100%; flex-basis: auto; }
  .logorow .rokuvidw video { height: 140px; }
}