/*
 * YURAI LP ／ 土台（リセット・タイポ・共通部品）
 *
 * CSP `style-src 'self'` を維持するため、HTML側に style 属性を書かない。
 * 動的な値が要る場合は JS の CSSOM（el.style.setProperty）で当てる。
 * CSPは CSSOM 操作を禁じないので、演出の自由度は損なわれない。
 */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* 固定ヘッダーの分だけ手前で止める。**見出しがヘッダーに隠れない。** */
  scroll-padding-top: calc(var(--yu-head-h) + 12px);
}

body {
  margin: 0;
  background: var(--yu-bg);
  color: var(--yu-ink);
  font-family: var(--yu-gothic);
  font-size: 15.5px;
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; }
img { height: auto; }

a { color: var(--yu-navy); text-decoration: none; }
a:hover { color: var(--yu-red); }

/* 明朝は見出しだけ。本文に使うと業務ソフトとして読みづらくなる */
[data-serif] {
  font-family: var(--yu-serif);
  font-feature-settings: "palt" 1;
}

/* キーボード操作を殺さない。focus-visible は必ず見えるようにする */
:focus-visible {
  outline: 3px solid var(--yu-red);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 読み上げ専用 */
.yu-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* キーボードで最初に来る「本文へ飛ぶ」 */
.yu-skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--yu-navy);
  color: #fff;
  border-radius: var(--yu-r-s);
  transition: top .18s var(--yu-ease);
}
.yu-skip:focus { top: 12px; color: #fff; }

/* ═══════════════════════════════════════════════════════════
   ロゴ ── AIの2文字だけ赤（docs/BRAND.md ルール1）
   ═══════════════════════════════════════════════════════════ */

.yu-logo {
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--yu-navy-d);
  font-style: normal;
}
.yu-logo i { color: var(--yu-red); font-style: normal; }

/* 濃紺の面の上では明るい赤に切り替える */
.yu-dark .yu-logo { color: #fff; }
.yu-dark .yu-logo i,
.yu-dark .yu-em { color: var(--yu-red-l); }

/* 本文中の「AI」を赤にする（御社由来の<i>AI</i>、YURAI。） */
.yu-em { color: var(--yu-red); font-style: normal; }

/* ═══════════════════════════════════════════════════════════
   レイアウト
   ═══════════════════════════════════════════════════════════ */

.yu-wrap {
  width: 100%;
  max-width: var(--yu-wrap);
  margin: 0 auto;
  padding: 0 var(--yu-pad);
}

.yu-sec { padding: var(--yu-sec-pad) 0; scroll-margin-top: var(--yu-head-h); }
.yu-sec--tight { padding: clamp(48px, 6vw, 76px) 0; }
.yu-sec--alt { background: var(--yu-white); }
.yu-sec--dark { background: var(--yu-navy-d); color: var(--yu-on-navy); }
.yu-sec--dark h2, .yu-sec--dark h3 { color: #fff; }

.yu-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--yu-red);
  margin-bottom: 14px;
}
.yu-sec--dark .yu-eyebrow { color: var(--yu-red-l); }

h1 {
  font-size: clamp(31px, 5vw, 54px);
  line-height: 1.38;
  font-weight: 700;
  color: var(--yu-navy-d);
  letter-spacing: .01em;
}

h2 {
  font-size: clamp(25px, 3.6vw, 40px);
  line-height: 1.42;
  font-weight: 700;
  color: var(--yu-navy-d);
}

h3 {
  font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.55;
  font-weight: 700;
  color: var(--yu-navy-d);
}

.yu-lede {
  margin-top: 18px;
  max-width: 46em;
  color: var(--yu-ink3);
}
.yu-sec--dark .yu-lede { color: var(--yu-on-navy); }

.yu-note {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--yu-mut);
}

/* ═══════════════════════════════════════════════════════════
   ボタン
   ═══════════════════════════════════════════════════════════ */

.yu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--yu-r-s);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  text-align: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.yu-btn--main { background: var(--yu-red); color: #fff; }
.yu-btn--main:hover { background: var(--yu-red-h); color: #fff; }

.yu-btn--navy { background: var(--yu-navy); color: #fff; }
.yu-btn--navy:hover { background: var(--yu-navy-d); color: #fff; }

.yu-btn--sub {
  background: var(--yu-white);
  color: var(--yu-navy);
  border-color: var(--yu-line);
}
.yu-btn--sub:hover { border-color: var(--yu-red); color: var(--yu-red); }

.yu-sec--dark .yu-btn--sub {
  background: transparent;
  color: #fff;
  border-color: var(--yu-line-on-navy);
}
.yu-sec--dark .yu-btn--sub:hover { border-color: var(--yu-red-l); color: var(--yu-red-l); }

.yu-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ═══════════════════════════════════════════════════════════
   ピル・チップ
   ═══════════════════════════════════════════════════════════ */

.yu-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.yu-pill {
  display: inline-block;
  padding: 7px 15px;
  border-radius: var(--yu-pill);
  background: var(--yu-white);
  border: 1px solid var(--yu-line);
  font-size: 13px;
  font-weight: 500;
  color: var(--yu-ink3);
}
.yu-sec--alt .yu-pill { background: var(--yu-s2); }

/* ═══════════════════════════════════════════════════════════
   ヘッダ
   ═══════════════════════════════════════════════════════════ */

.yu-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 248, 249, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.yu-head[data-scrolled="true"] { border-bottom-color: var(--yu-line); }

.yu-head-in {
  max-width: var(--yu-wrap);
  margin: 0 auto;
  padding: 12px var(--yu-pad);
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 64px;
}

.yu-head .yu-logo { font-size: 21px; }

.yu-nav { display: flex; gap: 20px; margin-left: auto; }
.yu-nav a { font-size: 13.5px; font-weight: 500; color: var(--yu-ink2); }
.yu-nav a:hover { color: var(--yu-red); }

.yu-head .yu-btn { padding: 10px 18px; font-size: 13.5px; }

/* ═══════════════════════════════════════════════════════════
   フッタ
   ═══════════════════════════════════════════════════════════ */

.yu-foot {
  background: var(--yu-navy-dd);
  color: var(--yu-on-navy-mut);
  padding: 48px 0 40px;
  font-size: 13px;
}
.yu-foot a { color: var(--yu-on-navy); }
.yu-foot a:hover { color: var(--yu-red-l); }
.yu-foot .yu-logo { font-size: 20px; color: #fff; }
.yu-foot .yu-logo i { color: var(--yu-red-l); }

.yu-foot-in { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-start; }
.yu-foot-links { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.yu-foot-legal {
  width: 100%;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 12px;
  line-height: 1.9;
  color: #7d8da8;
}

/* ═══════════════════════════════════════════════════════════
   未確定事項マーカー
   確定していない連絡先などを推測で書かないための明示。
   ═══════════════════════════════════════════════════════════ */

[data-todo] {
  border-bottom: 1px dashed var(--yu-warn);
  color: var(--yu-warn-d);
}

/* ═══════════════════════════════════════════════════════════
   レスポンシブ
   既存LPは window.innerWidth<900 のJSフラグで14個のレンダ値を
   切り替えていた（JS無効時にスマホでPCレイアウトが出る）。
   ここではCSSに持たせる。
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .yu-nav { display: none; }
  .yu-head .yu-btn { margin-left: auto; }
  .yu-foot-links { margin-left: 0; width: 100%; }
}

@media (max-width: 768px) {
  body { font-size: 15px; }
  .yu-head-in { min-height: 56px; padding: 10px var(--yu-pad); }
  .yu-head .yu-logo { font-size: 19px; }
  .yu-btns .yu-btn { width: 100%; }
  .yu-anim { aspect-ratio: 4 / 3; }
}

/* ═══════════════════════════════════════════════════════════
   prefers-reduced-motion
   duration を潰すだけでは足りない。delay と「終了状態」も強制する。
   duration=0 でも opacity:0 から始まる要素は消えたままになる。
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    opacity: 1 !important;
  }
  /* transform だけは `*` に掛けてはいけない。
     **「動きの transform」と「配置の transform」は別物。**

       動き   吹き出しの pop、書類チップの浮き沈み → 消してよい
       配置   SVG の人物（g の translate(x,y)）    → 消すと全員が原点へ重なる
              アートボード全体の scale(--yl-k)      → 消すと絵が原寸のまま
                                                     はみ出す／縮尺が狂う

     どちらも実測で踏んでいる。除外する対象を明示する。
     複雑な :not() が使えない古い環境ではこの規則ごと無効になるが、
     そのとき失われるのは「HTML側の transform 打ち消し」だけで、
     配置は守られる（安全側に倒れる）。 */
  *:not(svg):not(svg *):not(.yl-artboard), *::before, *::after {
    transform: none !important;
  }
}