@charset "utf-8";
/* ==========================================================================
   KUU 2026 — Figma 再現の土台
   figma/*.php と assets/css/pages/*.css は Figma のノードツリーから機械生成。
   ここでは「Figma の1px をどう画面に写すか」だけを定義する。
     PC : 1440幅で --px=1px（Figma と完全一致）。狭い画面では比例縮小。
     SP :  390幅で --px=1px（同上）。広い画面では 1.35px で頭打ち。
   ========================================================================== */
@font-face{font-family:"KUU Midashi";src:url("../fonts/kuu-midashi.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"KUU Reisho";src:url("../fonts/kuu-reisho.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}

:root{
  /* 縦スクロールバーの幅。100vw はこれを含むため、引かないと右端が切れる。JSで実測して入れる */
  --sbw:0px;
  --bg:#000000; --fg:#F4F4F3;  /* kihi指示08-27: 背景の黒を#000に統一 */
  --f-jp:"KUU Midashi","Hiragino Kaku Gothic ProN","Hiragino Sans","Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --f-en:"Helvetica Neue",Helvetica,Arial,"Hiragino Kaku Gothic ProN",sans-serif;
  --f-rei:"KUU Reisho","Hiragino Mincho ProN",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;font-family:var(--f-en)}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0;font-size:inherit;font-weight:inherit}
:focus-visible{outline:2px solid #EEEBDE;outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--fg);color:var(--bg);padding:12px 20px}
.skip-link:focus{left:0}

/* ---- Figma フレームの器 ---- */
.kfx{position:relative;margin-inline:auto;overflow:hidden}
.kfx--pc{--px:min(1px, calc((100vw - var(--sbw,0px)) / 1440))}
/* 下限 0.82px = 320px 幅相当。実機の最小幅(320px)までは効かず、
   それより狭くなる＝拡大表示のときだけ縮小を止めて文字を大きく保つ。 */
.kfx--sp{--px:min(1.35px, max(0.82px, calc((100vw - var(--sbw,0px)) / 390)))}
@media (max-width:1023.98px){ .kfx--pc{display:none} }
@media (min-width:1024px){ .kfx--sp:not(.kf-menu){display:none} }

/* ---- リンクの当たり判定を要素いっぱいに ---- */
.kfx a{display:block;color:inherit;text-decoration:none}
.kfx a:hover{opacity:.72;transition:opacity .2s}

/* ---- SPメニュー（オーバーレイ）---- */
.kf-menu{position:fixed;inset-block-start:0;inset-inline:0;z-index:200;margin-inline:auto;
  background:var(--bg);opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s;
  min-height:100dvh !important;height:auto !important;max-height:100dvh;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
body.kf-menu-open .kf-menu{opacity:1;visibility:visible}
body.kf-menu-open{overflow:hidden}
@media (min-width:1024px){ .kf-menu{display:none} }
.kf-menu-trigger{cursor:pointer}

/* ---- お問い合わせフォーム（入力欄は Figma 生成物の中にある） ---- */
#kuu-contact-form{position:absolute;width:0;height:0;overflow:hidden}
.kf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kf-formmsg{max-width:min(92vw,760px);margin:calc(100*var(--px, 1px)) auto 0;padding:16px 20px;
  border-radius:10px;font-family:var(--f-jp);font-size:15px;line-height:1.7;position:relative;z-index:5}
.kf-formmsg.is-ok{border:1px solid #EEEBDE;color:#EEEBDE}
.kf-formmsg.is-ng{border:1px solid #D98F8F;color:#D98F8F}
.kfx select option{background:#000000;color:#F4F4F3}

/* ---- Figma に無いがサイトとして必要なもの ---- */
.kf-copy{margin:0;padding:24px 20px 32px;text-align:center;color:#C1C1C1;font-family:var(--f-en);font-size:12px;letter-spacing:.06em}
.kf-empty{max-width:min(92vw,760px);margin:0 auto;padding:48px 20px 64px;text-align:center;
  color:#C1C1C1;font-family:var(--f-jp);font-size:15px;line-height:1.9}

/* --- 404 のサイト内ナビ（Figma に該当デザインが無いため最小限の自作） --- */
.kf-404nav{max-width:1180px;margin:0 auto 64px;padding:0 24px}
.kf-404nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.kf-404nav li{margin:0}
.kf-404nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border:1px solid rgba(244,244,243,.25);border-radius:999px;color:#F4F4F3;text-decoration:none;
  font-family:var(--f-en);font-size:14px;letter-spacing:.04em}
.kf-404nav a:hover,.kf-404nav a:focus-visible{background:rgba(244,244,243,.10)}

/* --- タップ領域の確保（見た目は変えず、当たり判定だけ 44px 角へ広げる） --- */
.kf-menu-trigger::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:max(100%,44px);height:max(100%,44px)}

/* --- 日本語の行分割を Figma 寄りにする ---
   既定の normal より禁則が厳しく、小書き仮名や長音記号の前で折り返さない。
   Figma の組版に近づき、段落の行数ズレが減る。 */
/* Figma と同じく、単語の途中では折らない。
   break-word にすると、枠にぎりぎり収まる短い語（STORY / CHARACTER 等）まで
   2行に割れてしまう。はみ出す1件は判断ログに記載。 */
.kfx :where(p,h1,h2,h3,h4,div,span,a,li){line-break:strict;overflow-wrap:normal}

/* --- BLOG に記事が無いときの案内（カード枠の位置に出す） --- */
.kf-noposts{display:grid;place-content:center;text-align:center;color:#C1C1C1;
  font-family:var(--f-jp);font-size:calc(18 * var(--px, 1px));line-height:1.9;margin:0}

/* --- Figma テンプレートを持たないページ（プライバシーポリシー等）用 --- */
.kf-generic{max-width:820px;margin:0 auto;padding:120px 24px 96px;color:#F4F4F3;font-family:var(--f-jp)}
.kf-generic__title{font-size:32px;line-height:1.5;margin:0 0 32px}
.kf-generic__body{font-size:16px;line-height:2}
.kf-generic__body :where(p,ul,ol,h2,h3,table){margin:0 0 1.6em}
.kf-generic__body :where(h2,h3){line-height:1.6}
.kf-generic__body a{color:#EEEBDE}

/* ヘッダーナビ（高木さん指示 2026-08-26）:
   大文字化で文字幅が変わるため、Figma の固定座標をやめて等間隔（Figma実測32px）の
   右寄せフレックスに組み直す。対象はナビ項目コンポーネント 4147:1693 のみ。 */
[data-fid$=";4147:1693"]{display:flex;align-items:center;justify-content:flex-end;
  gap:calc(32 * var(--px));}
[data-fid$=";4147:1693"]>div{position:static !important;width:auto !important;}

/* 記事0件の表示は、カード1枚分でなくカード領域全体の中央に出す（高木さん指摘⑯） */
.kf-noposts{left:0 !important;width:100% !important;}

/* TOPヒーロー動画（2026-08-27 改）:
   動画素材はロゴが中央の小さな範囲(高さの27%)にあり、周囲は黒余白。箱をどこに置いても
   「見た目の間隔」は余白ぶん巨大になるため、旧サイトと同じ
   「ファーストビュー全面に動画・ロゴは画面中央」方式にする。
   - 箱: ページ最上端(ヘッダーの裏)から、画面下端(上限=ヒーロー区画の下端)まで
   - cover: 動画が箱を必ず満たす=枠の縁が出ない。ロゴは素材の中央なので画面中央に来る
   - フィルタ: 黒(0)→#111112(17)へ線形に持ち上げ、背景との境目を物理的に無くす
     (invert→brightness 238/255→invert)。合成(mix-blend)が効かないブラウザでも消える */
[data-fid="4181:6229"]{top:calc(-80 * var(--px)) !important; left:calc(-35 * var(--px)) !important;
  height:min(calc(100vh), calc(1184 * var(--px))) !important; z-index:0 !important;}
[data-fid="4181:6229"]{height:min(calc(100svh), calc(1184 * var(--px))) !important;}
/* SP は縦長画面での cover だと拡大されすぎてロゴが見切れるため、
   「ロゴを画面幅の約90%の大きさで、画面の縦中央に置く」方式にする。
   箱の縁はフィルタで背景と同色になるため見えない。
   箱幅975u → ロゴ表示幅 = 975×(692/1920) ≒ 351u（画面390uの90%） */
[data-fid="4365:3696"]{left:calc(-292.5 * var(--px)) !important; width:calc(975 * var(--px)) !important;
  top:clamp(0px, calc(50vh - 328.5 * var(--px)), calc(347 * var(--px))) !important;
  height:calc(497.5 * var(--px)) !important; z-index:0 !important;}
[data-fid="4365:3696"]{top:clamp(0px, calc(50svh - 328.5 * var(--px)), calc(347 * var(--px))) !important;}
/* ヒーロー箱の mix-blend-mode:lighten（Figma由来・背景に黒を溶かす旧目的）は、
   cover全面＋背景#000 になった今は不要。特定の合成経路で色反転を起こすため打ち消す
   （320px実機で白黒反転を確認・2026-08-27）。 */
[data-fid="4181:6229"], [data-fid="4365:3696"]{mix-blend-mode:normal !important;}
[data-fid="4181:6229"] video, [data-fid="4365:3696"] video{
  object-fit:cover !important; object-position:center center;
  /* 背景が #000 に統一された（kihi 08-27）ため、黒持ち上げフィルタは撤去。
     動画の黒(0,0,0)＝背景 で境目は素で出ない */
  mix-blend-mode:normal !important;}

/* ヘッダーの出現制御（山下さん・高木さん確定 2026-08-29）:
   下にスクロール中は隠れ、少しでも上に戻したら現れる。
   ページ最上部では Figma どおりの絶対配置に戻る（照合にも影響しない）。
   .kf-hdr-float は JS(main.js) がスクロール量に応じて付け外しする。
   fixed でも width の var(--px) は DOM 上 .kfx 内にあるため解決される。 */
.kf-hdr-float{position:fixed !important;top:0 !important;left:50% !important;
  /* ★z-index は !important 必須。ページ生成CSSが header 要素へ詳細度(0,2,0)で
     z-index:0〜2 を書くため、(0,1,0)のこの宣言は素では負けて本文の下に潜る
     （2026-08-31 敵対監査で発見）。 */
  transform:translateX(-50%) translateY(0);z-index:150 !important;background:#000;
  transition:transform .28s ease}
.kf-hdr-float.kf-hdr-hidden{transform:translateX(-50%) translateY(-105%)}
@media (prefers-reduced-motion: reduce){.kf-hdr-float{transition:none}}

/* TOPヒーロー動画: 1441px以上のワイド画面では画面全幅に広げる（山下さん依頼 2026-08-31）。
   サイト全体は 1440px 基準の中央寄せのため、従来は動画も 1440px で止まり左右に黒が残った。
   1440px 以下は従来どおり＝Figma 照合にも影響しない。
   .kfx の overflow:hidden を front の PC ブロックだけ解く（横のはみ出しは body の
   overflow-x:hidden が抑える）。中央合わせはスクロールバー幅(--sbw)を除いて計算する。 */
@media (min-width:1441px){
  .kf-front-pc{overflow:visible}
  /* ★8/31 の Figma 再取り込みでヒーローの祖先 2 段(4147:1550 → 4181:6228)に
     overflow:hidden が付き、広げた動画が 1440px 枠でクリップされて左右に黒が戻った。
     ただし 4181:6228 の overflow:hidden は「動画の上 80px をクリップしてヘッダー帯を
     守る」役割も兼ねている（visible にしたら動画がヘッダーを覆い隠した＝Master 目視で発見）。
     そこで 4181:6228 は hidden のまま横幅だけ全幅化する。動画(4181:6229)の
     left:calc(50% - …) は、親が全幅になると自動的に left:0 / 幅=親幅 に一致する。
     4147:1550 はページ全体の入れ物で、はみ出すのは全幅化した子だけなので visible で安全。 */
  .kf-front-pc [data-fid="4147:1550"]{overflow:visible !important}
  .kf-front-pc [data-fid="4181:6228"],
  .kf-front-pc [data-fid="4181:6229"]{
    left:calc(50% - (100vw - var(--sbw,0px)) / 2) !important;
    width:calc(100vw - var(--sbw,0px)) !important;
  }
}