@charset "utf-8";

/* =========================================================
   LIBRO＋CRAFT 特設サイト
   色はプロダクト実物から引く：
     ink   … CRAFT のアプリクロム（ダークネイビー）
     coral … 教材紙面の面付け色
   単一テーマ（ライト）。ダークテーマは意図的に持たない。
   ========================================================= */

:root {
  /* ground / ink */
  --ink:        #1e2530;   /* アプリのサイドバー相当 */
  --ink-2:      #2b3543;
  --paper:      #ffffff;   /* 紙白 */
  --white:      #ffffff;

  /* neutrals：青みに寄せたグレー（純グレーを使わない） */
  --gray-100:   #f2f3f5;
  --gray-200:   #e4e7eb;
  --gray-400:   #a8afb9;
  --gray-600:   #626b78;
  --gray-800:   #3a424f;

  /* accent */
  --coral:      #e8836f;
  --coral-deep: #cf6450;
  --coral-tint: #fdf1ee;

  /* type */
  --font-display: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body:    "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, "Consolas", monospace;

  /* layout */
  --w-max:      152rem;
  --pad-x:      clamp(2.8rem, calc(20vw - 11.2rem), 22rem);
  --pad-x-chrome: clamp(1.6rem, 3vw, 4rem);
  --band-y:     clamp(6.4rem, 8vw, 11.2rem);
  --header-h:   5.2rem;
  /* 1画面＝1セクション（社内FB B1 追加確定）
     ページ内移動ではセクションの上端を画面の上端に合わせ、ヘッダーはセクション自身の上余白に重ねる。
     ヘッダーは半透明で周りも透けるため、ヘッダー直下に合わせると前のセクションの末尾が透けて見えてしまう
     --header-bottom … 追従ヘッダーの下端（画面上端から。上の隙間 --header-gap ×2 を含む）
     --screen-h      … 1 画面の高さ
     --sec-head-top  … セクション上端から見出しまでの距離（全セクション共通。ヘッダー下端＋3.2rem）
     --sec-pad-bottom … セクション下端の最小余白 */
  --header-bottom: calc(var(--header-h) + var(--header-gap) * 2);
  --screen-h:   100vh;
  --sec-head-top: calc(var(--header-bottom) + 3.2rem);
  --sec-pad-bottom: 2.4rem;

  --radius:     0.4rem;
  --shadow:     0 1px 2px rgba(30, 37, 48, .06), 0 1.2rem 3.2rem rgba(30, 37, 48, .07);
}
/* スマホのアドレスバー伸縮に追従する dvh が使える環境では、そちらで 1 画面を測る */
@supports (height: 100dvh) {
  :root { --screen-h: 100dvh; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* 寸法は rem で書く（基準幅 1440px で 1rem = 10px）。
   約1224〜1930px の間は画面幅に比例して全体を拡縮し、どの幅でも 1440px と同じ比率で見せる。
   範囲外は上限・下限で止め、文字が小さすぎ／大きすぎにならないようにする。
   ウィンドウが縦に短いときは高さでも頭打ちにし、各セクションの中身を 1 画面（76rem からヘッダー下端 6.8rem を除いた約 69rem）に収める。
   2px 以下の細線と @media の条件は px のまま。 */
html {
  font-size: clamp(8.5px, min(100vw / 144, 100vh / 76), 13.4px);
  /* ページ内移動ではセクション上端を画面上端に合わせる（JS 側も同じ位置）。見出しの位置はセクション内の上余白で決まる */
  scroll-behavior: smooth;
}
/* 1カラム表示では拡縮せず、従来どおり 1rem = 10px */
@media (max-width: 900px) { html { font-size: 10px; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.4; margin: 0; text-wrap: balance; }
p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

:where(a, button, summary, details):focus-visible {
  outline: 2px solid var(--coral-deep);
  outline-offset: 0.3rem;
  border-radius: 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: 1.2rem; top: -6rem; z-index: 100;
  background: var(--ink); color: #fff; padding: 1rem 1.6rem; font-size: 1.3rem;
  transition: top .15s;
}
.skip-link:focus { top: 1.2rem; }

/* ---------- 共通パーツ ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem;
  padding: 1.3rem 2.6rem;
  font-size: 1.4rem; font-weight: 500; line-height: 1;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: 1rem;
  transition: background-color .18s, border-color .18s, color .18s, transform .18s;
}
.btn--solid { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--solid:hover { background: var(--coral-deep); border-color: var(--coral-deep); }
.btn--ghost { color: var(--ink); border-color: var(--gray-400); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); background: var(--white); }
.btn--sm { padding: 0.9rem 1.8rem; font-size: 1.3rem; }
/* ボタンの矢印：ホバーで右へ寄る */
.btn__arrow { flex: none; transition: transform .25s cubic-bezier(.22, .8, .3, 1); }
.btn:hover .btn__arrow { transform: translateX(0.6rem); }
@media (prefers-reduced-motion: reduce) { .btn__arrow { transition: none; } }
.btn--lg { padding: 1.7rem 3.8rem; font-size: 1.5rem; }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* 素材待ちのプレースホルダ（ワイヤーフレームと同じ見た目のまま残す） */
.ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px dashed var(--gray-400);
  background: repeating-linear-gradient(135deg, #f1f2f4 0 0.8rem, #f9fafb 0.8rem 1.6rem);
  color: var(--ink);
  font-family: var(--font-mono); font-size: 1.1rem; line-height: 1.7;
  padding: 1.2rem;
}
.ph--logo  { width: 15rem; height: 2.6rem; font-size: 1rem; }
.ph--logo-sm { width: 13rem; height: 2.2rem; }
.ph--mark  { width: 4rem; height: 4rem; flex: none; font-size: 0.9rem; }
.ph--wide  { height: 9.6rem; }
.ph--shot  { aspect-ratio: 16 / 10; }
.ph--step  { aspect-ratio: 4 / 3; }

/* アイコン
   本体スプライトから抽出した SVG を CSS マスクで敷く。
   <img> だと currentColor が効かないため、色は background-color で指定する。 */
.icon {
  display: block; flex: none;
  width: 2.8rem; height: 2.8rem;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-size: contain;      mask-size: contain;
}
.icon--summary-drag       { -webkit-mask-image: url(../assets/icons/summary-drag.svg);       mask-image: url(../assets/icons/summary-drag.svg); }
.icon--summary-browser    { -webkit-mask-image: url(../assets/icons/summary-browser.svg);    mask-image: url(../assets/icons/summary-browser.svg); }
.icon--summary-libro      { -webkit-mask-image: url(../assets/icons/summary-libro.svg);      mask-image: url(../assets/icons/summary-libro.svg); }
.icon--type-sticky        { -webkit-mask-image: url(../assets/icons/type-sticky.svg);        mask-image: url(../assets/icons/type-sticky.svg); }
.icon--type-audio         { -webkit-mask-image: url(../assets/icons/type-audio.svg);         mask-image: url(../assets/icons/type-audio.svg); }
.icon--type-video         { -webkit-mask-image: url(../assets/icons/type-video.svg);         mask-image: url(../assets/icons/type-video.svg); }
.icon--type-pagelink      { -webkit-mask-image: url(../assets/icons/type-pagelink.svg);      mask-image: url(../assets/icons/type-pagelink.svg); }
.icon--type-externallink  { -webkit-mask-image: url(../assets/icons/type-externallink.svg);  mask-image: url(../assets/icons/type-externallink.svg); }
.icon--type-plusfile      { -webkit-mask-image: url(../assets/icons/type-plusfile.svg);      mask-image: url(../assets/icons/type-plusfile.svg); }

.tbd {
  font-family: var(--font-mono); font-size: 1.2rem;
  border: 1px solid #d9b3ab; background: var(--coral-tint); color: var(--ink);
  padding: 2px 0.8rem; border-radius: 2px;
}

/* 帯セクションの共通枠 */
.band {
  background: var(--white);
  padding: var(--band-y) var(--pad-x);
}
.band > * { max-width: var(--w-max); margin-inline: auto; }
.band__head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 4rem; }
.band__title {
  font-size: clamp(2.4rem, 3vw, 3.2rem); color: var(--ink);
  position: relative; isolation: isolate;
  padding-top: 5.2rem; padding-left: 0.4rem;
}
/* 見出し背面のストライプ番号（hero を除き、CTA・LIBRO＋ との関係には付けない） */
.band__title::before {
  content: attr(data-num);
  position: absolute; left: -0.6rem; top: 0; z-index: -1;
  font-family: var(--font-display); font-weight: 900;
  font-size: 12rem; line-height: .8; letter-spacing: -.02em;
  color: transparent;
  background: repeating-linear-gradient(180deg, var(--coral) 0 2px, transparent 2px 5px);
  -webkit-background-clip: text; background-clip: text;
  pointer-events: none;
}

.band__note { font-size: 1.4rem; color: var(--ink); }

/* 1画面＝1セクション（特長・仕掛け・機能・動作環境・よくある質問・体験版）
   見出しはセクション上端から --sec-head-top の位置に固定し、全セクションでそろえる。
   見出しより下の中身は、残りのスペースの中央やや上（上 4：下 6）に置く。
   中身が画面より高いときはセクションが伸びる（下が切れてよい） */
.summary, .types, .features, .env, .faq, .demo {
  min-height: var(--screen-h);
  display: flex; flex-direction: column;
  padding-top: var(--sec-head-top); padding-bottom: var(--sec-pad-bottom);
}
/* 縦並びの flex では margin-inline: auto の子が縮むため、幅を明示する（.fcar は自前の指定が勝つよう詳細度 0） */
:where(.summary, .types, .features, .env, .faq, .demo) > * { width: 100%; order: 2; }
:where(.summary, .types, .features, .env, .faq, .demo) > .band__head { order: 0; }
/* 見出しと中身の間／中身の下に、余ったスペースを 4：6 で配る */
:where(.summary, .types, .features, .env, .faq, .demo)::before,
:where(.summary, .types, .features, .env, .faq, .demo)::after { content: ""; flex: 4 0 0; order: 1; }
:where(.summary, .types, .features, .env, .faq, .demo)::after { flex-grow: 6; order: 3; }

/* ---------- ヘッダー（独立した角丸オブジェクト） ---------- */
:root { --header-gap: 0.8rem; --header-radius: 1.2rem; }
.site-header {
  position: sticky; top: var(--header-gap); z-index: 50;
  padding: var(--header-gap) var(--pad-x-chrome) 0;
  background: transparent; border: 0;
  pointer-events: none;   /* 余白は下のコンテンツを触れるように */
}
.site-header > * { pointer-events: auto; }
.site-header__inner {
  max-width: var(--w-max); margin-inline: auto;
  height: var(--header-h); padding-inline: clamp(1.8rem, 2.4vw, 3rem);
  display: flex; align-items: center; justify-content: space-between; gap: 2.4rem;
  background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(1.4rem) saturate(140%);
  -webkit-backdrop-filter: blur(1.4rem) saturate(140%);
  border-radius: var(--header-radius);
}
.site-header__brand { text-decoration: none; display: flex; align-items: center; }
.site-header__brand-name {
  font-family: var(--font-display); font-weight: 900; font-size: 1.7rem;
  letter-spacing: .04em; color: var(--ink);
}
.site-nav { display: flex; align-items: center; gap: 2.4rem; font-size: 1.3rem; }
.site-nav a { text-decoration: none; color: var(--ink); }
/* ヘッダーはホバー時の色の切り替えをアニメーションさせない（即時に切り替える） */
.site-nav .btn { color: #fff; transition: none; }
/* ヘッダーのボタンはホバーしても色を変えない（.btn--solid:hover を打ち消す） */
.site-nav .btn--solid:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.site-nav__toggle {
  display: none;
  width: 4rem; height: 4rem; padding: 1rem 0.8rem;
  flex-direction: column; justify-content: space-between;
  background: transparent; border: 0; border-radius: 1rem;
  cursor: pointer;
}
.site-nav__toggle span { display: block; height: 1.5px; background: var(--ink); }
.site-nav-mobile[hidden] { display: none; }  /* display 指定が hidden 属性を打ち消さないように */
.site-nav-mobile {
  margin-top: 0.8rem;
  max-width: var(--w-max); margin-inline: auto;
  padding: 1.4rem 2.2rem 1.8rem;
  display: flex; flex-direction: column; gap: 0.4rem;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(1.4rem) saturate(140%);
  -webkit-backdrop-filter: blur(1.4rem) saturate(140%);
  border-radius: var(--header-radius);
}
.site-nav-mobile a { text-decoration: none; padding: 1.2rem 0; font-size: 1.4rem; color: var(--ink); }
.site-nav-mobile .btn {
  margin-top: 1.2rem; color: #fff; transition: none;
}
.site-nav-mobile .btn--solid:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- 01 ヒーロー ---------- */
.hero {
  position: relative;
  /* .band と同じく本文幅 --w-max の外側に --pad-x を取り、左端を他セクションと揃える */
  max-width: calc(var(--w-max) + var(--pad-x) * 2); margin-inline: auto;
  /* 1画面ちょうどの高さにする。ヘッダーは流れの中で --header-h＋上の隙間 1 つ分の場所を取るため、その分を引く */
  min-height: calc(var(--screen-h) - var(--header-h) - var(--header-gap));
  padding: 3.2rem var(--pad-x) 3.2rem;
  display: grid;
  /* コピー側を広げて折り返しを減らし、縦の長さを抑える */
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  /* 中身は 2 行目。余ったスペースを上 4：下 6 で配り、中央やや上に置く */
  grid-template-rows: 4fr auto 6fr;
  align-items: center;
  gap: 0 clamp(2.8rem, 3.5vw, 5.6rem);
  overflow: hidden;
}
.hero__copy {
  container-type: inline-size;
  position: relative; z-index: 2;
  grid-column: 1; grid-row: 2;
  width: 100%;
  padding-right: 0;
  display: flex; flex-direction: column; gap: 1.6rem;
}
.hero__brand { display: flex; align-items: center; gap: 1.2rem; }
.hero__brand-name {
  font-family: var(--font-display); font-weight: 900; font-size: 1.9rem;
  letter-spacing: .04em; color: var(--ink);
}
.hero__headline {
  font-weight: 900;
  /* 小数 px の字送りはにじみの原因になるため整数に丸める */
  font-size: clamp(2.4rem, 9.2cqw, 5.6rem);
  font-size: round(clamp(2.4rem, 9.2cqw, 5.6rem), 1px);
  line-height: 1.28; letter-spacing: 0; color: var(--ink);
  max-width: none; white-space: nowrap;
}
.hl-line { display: block; }
.hl-word {
  display: inline-block;
  opacity: 0; filter: blur(1.4rem);
  transform: translate3d(0, .12em, 0) scale(1.035);
  animation: hlFade .7s cubic-bezier(.2,.8,.24,1) forwards;
}
.hl-word--move { animation-delay: .95s; font-size: 1.25em; font-size: round(1.25em, 1px); }
/* 演出後は合成レイヤを解除して文字を素の解像度で描く */
.hl-word.is-done {
  animation: none; opacity: 1; filter: none; transform: none; will-change: auto;
  /* 合成レイヤを完全に解放して素の文字ラスタライズへ戻す */
  backface-visibility: visible; perspective: none;
}
@keyframes hlFade {
  0%   { opacity: 0;   filter: blur(1.4rem); transform: translate3d(0, .12em, 0) scale(1.035); }
  100% { opacity: 1;   filter: blur(0);    transform: translate3d(0, 0, 0) scale(1); }
}
.hl-word--move { position: relative; isolation: isolate; }

/* 「動く」本体：最初から赤。クリックの瞬間に押下の縮み */
.hl-move-txt {
  display: inline-block; color: #ff0000;
  animation: hlPress .3s cubic-bezier(.3,.7,.4,1) 2.45s both;
}
/* 覆いブロック：クリックの瞬間に一度に消える */
.hl-cover {
  position: absolute; z-index: 1; inset: .04em -.06em 0;
  background: var(--coral);
  pointer-events: none;
  animation: hlHide 0s 2.45s forwards;
}

/* カーソル：1.2s に右下から入り、0.75s かけて 1.95s に「動く」へ乗り、0.5s 止まって 2.45s（70–80%）で押下、右下へ抜ける */
.hl-cursor {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: .42em; height: .62em;
  background: url(../assets/hero/cursor.svg) no-repeat 0 0 / contain;
  opacity: 0; transform-origin: 0 0; pointer-events: none;
  animation: hlCursor 1.79s cubic-bezier(.45,0,.25,1) 1.2s forwards;
}

@keyframes hlPress { 35% { transform: scale(.94); } }
@keyframes hlHide { to { visibility: hidden; } }
@keyframes hlCursor {
  0%   { opacity: 0; transform: translate(2em, 1.3em); }
  5.3%  { opacity: 1; }
  41.9% { transform: translate(.62em, .62em); }
  69.8% { transform: translate(.62em, .62em); }
  74.6% { transform: translate(.62em, .62em) scale(.8); }
  79.9% { transform: translate(.62em, .62em) scale(1); }
  89.9% { opacity: 1; transform: translate(.62em, .62em); }
  100% { opacity: 0; transform: translate(1.5em, 1.3em); }
}
@media (prefers-reduced-motion: reduce) {
  .hl-word { opacity: 1; filter: none; transform: none; animation: none; }
  .hl-move-txt { animation: none; }
  .hl-cover, .hl-cursor { display: none; }
}
.hero__sub { font-size: clamp(1.5rem, 1.6vw, 1.8rem); color: var(--ink); font-weight: 500; }
.hero__lead {
  max-width: 62ch; font-size: 1.4rem; color: var(--ink);
}

/* リリース予定日：枠を持たず、上の区切り線で本文と分ける（案3c） */
.hero__release {
  margin-top: 0.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-200);
  display: flex; flex-direction: column; gap: 1.6rem;
}
/* 日程の下に「リリース予定」を回り込ませる */
.hero__release-date {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem;
  font-family: var(--font-display); font-weight: 900; color: var(--ink);
}
.hero__release-label { font-size: 1.4rem; font-weight: 700; line-height: 1.6; }
.hero__release-date time { font-size: clamp(2.2rem, 2.2vw, 2.8rem); line-height: 1.2; }

/* キャッチ横に置き、右端からはみ出させる */
.hero__shot {
  grid-column: 2; grid-row: 2;
  position: relative; z-index: 1;
  margin: 0 calc(-1 * var(--pad-x) - 6vw - 6rem) 0 6rem;
  min-width: 0;
  display: flex; justify-content: flex-end;
}
.hero__shot img {
  width: 100%; max-width: none; height: auto;
  object-fit: contain;
}

/* ノートPC 表現 */
.device { width: 100%; display: flex; flex-direction: column; align-items: center; }
.device__screen {
  width: 100%;
  background: #23262b;
  padding: 1.2rem 1.2rem 2.2rem;
  border-radius: 1.2rem 1.2rem 0.4rem 0.4rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  position: relative;
}
.device__screen::before {
  content: ""; position: absolute; left: 50%; top: 0.5rem; transform: translateX(-50%);
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(255,255,255,.28);
}
.device__screen::after {
  content: ""; position: absolute; left: 50%; bottom: 0.7rem; transform: translateX(-50%);
  width: 5.2rem; height: 0.3rem; border-radius: 2px; background: rgba(255,255,255,.16);
}
.hero__shot .device__screen img,
.hero__shot .device__screen video {
  display: block; border-radius: 0; border: 0; box-shadow: none;
  /* 拡大率によって高さが小数 px になると、映像の丸めで背景が細い線として見える。
     映像を枠いっぱいに敷き、背景もベゼルと同色にして隙間を見せない */
  background: #23262b;
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* ヒンジ〜キーボード面 */
.device__neck {
  width: calc(100% + 9.6rem); margin: 0 -4.8rem;
  height: 1.2rem;
  background: linear-gradient(#c9cdd3, #aeb3ba);
  border-radius: 0.3rem 0.3rem 0.8rem 0.8rem;
  position: relative;
}
.device__neck::after {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 9.6rem; height: 0.4rem;
  border-radius: 0 0 0.5rem 0.5rem; background: #9aa0a8;
}

/* 開く演出：「動く」のクリック（2.45s）と同時にフタが手前から起き上がり、開ききった位置で止まる。
   フタは厚み（.device__lid-edge）を持ち、閉じている間はその縁が台の上に見える。
   台（.device__neck）はフタを閉じたときの手前の端と同じ奥行き（画面の高さ分手前）に置く。幅は元の台のまま。
   画面には開き始めから動画の先頭コマを出し、大部分開いたところ（3.09s）で再生を始める（main.js の HOLD）。
   フタの角度と縁の幅は、1 本のアニメーション（--lid-open：0＝閉 → 1＝開）から計算して必ず同時に動かす
   （別々のアニメーションにすると縁が遅れて、閉じたときの縁が残像のように見える）。
   --lid-h（画面の高さ）と --edge-k は main.js が入れる */
@property --lid-open { syntax: '<number>'; inherits: true; initial-value: 1; }
.hero__shot .device {
  /* 視点は遠めに置き、製品写真のような歪みの少ない見え方にする（近いと開く途中のフタが大きく振り出して見える） */
  perspective: 500rem;
  perspective-origin: 50% calc(100% - 1.2rem);   /* 視点はヒンジの高さ */
  transform-style: preserve-3d;
}
.hero__shot .device__screen {
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transform: rotateX(calc((var(--lid-open) - 1) * 90deg));
  /* 出だしは速く、後半は長くゆっくり減速して止める */
  animation: devOpen 1.2s cubic-bezier(.16,1,.3,1) 2.45s both;
  /* 動き出す瞬間にレイヤを作ると最初の1コマが遅れるため、前もって用意しておく */
  will-change: transform;
}
/* ヒンジ：フタ下端の中央に濃色の軸を見せ、回転の支点を分かりやすくする */
.device__hinge { display: none; }
.hero__shot .device__hinge {
  display: block;
  position: absolute; left: 14%; right: 14%; bottom: 0;
  height: 0.6rem;
  background: #15171a;
  border-radius: 0.3rem 0.3rem 0 0;
}
/* フタの厚み（上端の縁）。台のメインカラーに揃える。
   閉じている間は台と同じ幅（--edge-k 倍）に広げ、開き始め（角度 75° まで）のうちにフタの幅へ戻す。
   開く途中に広い縁が残ると、閉じていたときの縁の残像に見えるため。--edge-k は main.js が入れる */
.device__lid-edge { display: none; }
.hero__shot .device__lid-edge {
  display: block;
  position: absolute; left: 0; right: 0; top: 0;
  height: 0.8rem;
  background: #c9cdd3;
  border-radius: 0.6rem 0.6rem 0.1rem 0.1rem;   /* 閉じたときの上2角は R を強め、台と接する側（下2角）は弱める */
  transform-origin: 50% 0;
  transform: translateZ(-0.8rem) rotateX(90deg) scaleX(calc(1 + (var(--edge-k, 1) - 1) * max(0, 1 - var(--lid-open) * 6)));
  backface-visibility: hidden;
}
.hero__shot .device__neck {
  transform: translateZ(var(--lid-h, 0px));
}
/* 開ききったら演出を外す */
.hero__shot .device__screen.is-open { animation: none; will-change: auto; }
@keyframes devOpen {
  from { --lid-open: 0; }
  to   { --lid-open: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__shot .device__screen { animation: none; will-change: auto; }
}

/* ---------- 02 3行サマリ ---------- */
.summary { border-top: 0; }
.summary__list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem;
}
.summary__list h3 { font-size: 1.8rem; color: var(--ink); margin-bottom: 1rem; }
.summary__list p { font-size: 1.3rem; color: var(--ink); }
.summary__list .icon { width: 3.4rem; height: 3.4rem; color: var(--coral); margin-bottom: 1.8rem; }

/* ---------- 03 できること一覧 ---------- */
.types__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
  margin-bottom: 3.2rem;
}
.type-card {
  display: flex; gap: 1.6rem; align-items: flex-start;
  padding: 2.2rem;
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  background: var(--paper);

}
.type-card .icon { color: var(--ink); margin-top: 0.3rem; }
.type-card h3 { font-size: 1.5rem; color: var(--ink); margin-bottom: 0.4rem; }
.type-card p { font-size: 1.2rem; color: var(--ink); line-height: 1.8; }

/* ---------- 04 機能詳細 ---------- */
.features { background: var(--paper); }
.feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3.2rem, 5vw, 6.4rem);
  align-items: center;
  padding: 4.4rem 0;
  border-top: 1px solid var(--gray-200);
}
.feature:first-of-type { border-top: 0; padding-top: 0; }
.feature--rev .feature__text { order: 2; }
.feature__text { display: flex; flex-direction: column; gap: 1.4rem; }
.feature__eyebrow {
  font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: .1em;
  color: var(--ink);
}
.feature__text h3 { font-size: clamp(1.9rem, 2.2vw, 2.4rem); color: var(--ink); }
.feature__text p { font-size: 1.35rem; color: var(--ink); }
.feature .ph { background-color: var(--white); }
.feature__shot {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top;
  background: var(--white);
}

.keys, .chips { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.keys li {
  font-family: var(--font-mono); font-size: 1.1rem; color: var(--ink);
  border: 1px solid var(--gray-200); background: var(--white);
  padding: 0.6rem 1rem; border-radius: 0.3rem;
}
.chips li {
  font-size: 1.2rem; color: var(--ink);
  border: 1px solid var(--gray-200); background: var(--white);
  padding: 0.9rem 1.6rem; border-radius: 0.3rem;
}

/* 機能詳細：1項目＝1枚のカードを左へ流すスライドショー */
/* 上下の余白は 1画面＝1セクションの共通指定に任せる */
.features--slides { overflow: hidden; }
.features--slides .band__head { margin-bottom: clamp(2rem, 2.4vw, 2.8rem); }
/* 左右の余白いっぱいまで広げ、前後のカードを切らずに見せる */
.fcar {
  --fcar-gap: clamp(1.4rem, 1.6vw, 2.2rem); --fcar-per: 2.9;
  position: relative;
  max-width: none; width: auto;
  margin-inline: calc(var(--pad-x) * -1);
}
.fcar__viewport { overflow: hidden; touch-action: pan-y; }
.fcar__track {
  display: flex; gap: var(--fcar-gap); align-items: stretch;
  -webkit-user-select: none; user-select: none;   /* ドラッグ操作で文字・画像が選択されないように */
}
.fcar__track img, .fcar__track video { -webkit-user-drag: none; }
.fcard {
  flex: 0 0 calc((100% - (var(--fcar-per) - 1) * var(--fcar-gap)) / var(--fcar-per));
  display: flex; flex-direction: column; gap: clamp(1rem, 1.1vw, 1.4rem);
  background: var(--white);
  border: 1px solid var(--gray-200); border-radius: 1rem;
  padding: clamp(1.2rem, 1.2vw, 1.6rem);
}
.fcard { opacity: .5; transition: border-color .15s ease, opacity .15s ease; }
.fcard.is-current { border-color: var(--gray-400); opacity: 1; }
.fcard__media { border-radius: 0.8rem; overflow: hidden; background: var(--white); }
.fcard__shot {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  object-fit: cover; object-position: left top; background: var(--white);
}
.fcard .ph--shot { aspect-ratio: 16 / 10; height: auto; background-color: var(--white); }
.fcard__shot, .fcard .ph--shot { border-radius: 0.8rem; }

/* 録画の周囲に黒帯がある素材（libro-direct.mp4：2560×1242 の中央付近 x320・y81 から 1920×1080 が画面）。
   画面部分の高さを枠に合わせ、左上を揃えて他のカード（1920×1080 を cover・左上基準）と同じ見え方にする。
   素材を 1920×1080 で書き出し直したらこの指定と HTML の --crop を外す。 */
.fcard__media--crop { position: relative; aspect-ratio: 16 / 10; }
.fcard__media--crop .fcard__shot {
  position: absolute; max-width: none; aspect-ratio: auto; object-fit: fill; border-radius: 0;
  width: calc(100% * 2560 / 1728);   /* 枠幅 = 1080 × 1.6 = 1728 相当 */
  height: calc(100% * 1242 / 1080);
  left: calc(-100% * 320 / 1728);
  top: calc(-100% * 81 / 1080);
}

.fcard__text { display: flex; flex-direction: column; gap: 0.7rem; }
.fcard__eyebrow { font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: .1em; color: var(--ink); }
.fcard__text h3 { font-size: clamp(1.6rem, 1.4vw, 1.9rem); color: var(--ink); }
.fcard__note { font-size: 1.25rem; line-height: 1.8; color: var(--ink); }

/* 操作バー：ドットはセンター（再生中）のカードの真下に中央揃え */
.fcar__bar {
  display: flex; align-items: center; justify-content: center; gap: clamp(1.2rem, 2vw, 2.2rem);
  margin-top: clamp(1.8rem, 2.4vw, 2.8rem);
  max-width: var(--w-max); margin-inline: auto;
  padding-inline: var(--pad-x);
}
.fcar__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.fcar__dot {
  width: 2.4rem; height: 0.4rem; padding: 0; border: 0; border-radius: 2px;
  background: var(--gray-200); cursor: pointer; transition: background .25s ease;
}
.fcar__dot:hover { background: var(--gray-400); }
.fcar__dot[aria-current="true"] { background: var(--coral); }
.fcar__btn {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 4.4rem; height: 4.4rem; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--gray-200); background: var(--white);
  box-shadow: var(--shadow);
  display: grid; place-items: center;
}
.fcar__btn--prev { left: max(1.2rem, calc(var(--pad-x) - 2.4rem)); }
.fcar__btn--next { right: max(1.2rem, calc(var(--pad-x) - 2.4rem)); }
.fcar__btn:hover { border-color: var(--gray-400); }
.fcar__btn::before {
  content: ""; width: 2rem; height: 2rem;
  background-color: var(--ink);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
  transition: background-color .15s ease;
}
.fcar__btn:hover::before { background-color: var(--coral); }
.fcar__btn--prev::before {
  -webkit-mask-image: url(../assets/icons/carousel-prev.svg); mask-image: url(../assets/icons/carousel-prev.svg);
}
.fcar__btn--next::before {
  -webkit-mask-image: url(../assets/icons/carousel-next.svg); mask-image: url(../assets/icons/carousel-next.svg);
}

@media (max-width: 1100px) { .fcar { --fcar-per: 2.1; } }
@media (max-width: 760px) {
  .fcar { --fcar-per: 1.1; }
}

/* 画面が低いときは、カードごと小さくして 1 画面に収める（比率と幅は全カード共通）。
   PC では寸法が横幅に比例するため、高さの px ではなく縦横比で判定する */
@media (max-width: 1100px) and (max-height: 820px), (min-width: 901px) and (min-aspect-ratio: 17/10) {
  .features--slides .band__head { margin-bottom: 0.8rem; }
  .features--slides .band__title { font-size: 2.1rem; }
  .fcard { gap: 0.8rem; padding: 1.2rem; }
  .fcard__text { gap: 0.5rem; }
  .fcard__text h3 { font-size: 1.55rem; }
  .fcard__note {
    font-size: 1.15rem; line-height: 1.65;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }
  .fcar__bar { margin-top: 1.2rem; }
  .fcar { --fcar-per: 3.4; }
  /* キー／チップスの一覧が一番背の高いカードを作り、全カードがそれに引き伸ばされるため隠す */
  .fcard .keys, .fcard .chips { display: none; }
}
@media (max-height: 820px) and (max-width: 1100px) { .fcar { --fcar-per: 2.6; } }
/* PC：寸法は高さでも頭打ちになり 1 画面分（約 69rem）が必ず確保されるため、その範囲でカードと文字を大きく見せる */
@media (min-width: 901px) and (min-aspect-ratio: 17/10) {
  .features--slides .band__head { margin-bottom: 2rem; }
  .features--slides .band__title { font-size: 3.2rem; }
  .fcard { gap: 1.2rem; padding: 1.4rem; }
  .fcard__text h3 { font-size: 1.9rem; }
  .fcard__note { font-size: 1.3rem; line-height: 1.8; }
  .fcar { --fcar-per: 2.6; }
  /* カード幅は画面幅に比例するため、高さで頭打ちになったときも縦にはみ出さないよう rem で上限を付ける */
  .fcard { flex-basis: min(calc((100% - (var(--fcar-per) - 1) * var(--fcar-gap)) / var(--fcar-per)), 54rem); }
}
@media (max-height: 820px) and (max-width: 760px) { .fcar { --fcar-per: 1.15; } }
@media (max-height: 620px) and (min-width: 1101px) { .fcar { --fcar-per: 4; } }

/* ---------- 05 使い方3ステップ ---------- */
.steps__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.8rem; }
.steps__list li { display: flex; flex-direction: column; gap: 1.4rem; }
.steps__num {
  font-family: var(--font-mono); font-size: 1.2rem; letter-spacing: .12em;
  color: var(--ink);
}
.steps__list h3 { font-size: 1.6rem; color: var(--ink); }

/* ---------- 06 動作環境 ---------- */
.env__list { display: grid; grid-template-columns: repeat(4, 1fr); }
.env__list > div { padding: 0.4rem 2.8rem; border-left: 1px solid var(--gray-200); text-align: center; }
.env__list > div:first-child { border-left: 0; }
.env__list dt {
  font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: .08em;
  color: var(--ink); margin-bottom: 0.8rem;
}
.env__list dd { margin: 0; font-size: 1.5rem; color: var(--ink); }
/* 項目名の上に置くアイコン（線画） */
.env__icon { display: block; width: 3.2rem; height: 3.2rem; margin: 0 auto 1.2rem; }

/* ---------- 07 FAQ ---------- */
.faq__list { border-top: 1px solid var(--gray-200); }
.faq details { border-bottom: 1px solid var(--gray-200); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.8rem 4rem 1.8rem 0; position: relative;
  font-size: 1.45rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.8rem; top: 50%;
  width: 0.9rem; height: 0.9rem; margin-top: -0.6rem;
  border-right: 1.5px solid var(--gray-400); border-bottom: 1.5px solid var(--gray-400);
  transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__body { padding: 0 4rem 2rem 0; font-size: 1.35rem; color: var(--ink); }
/* 回答の頭に「→」を付け、2行目以降は矢印の後ろにそろえる（文言には含めない） */
.faq__body p { position: relative; padding-left: 1.6em; }
.faq__body p::before { content: "→"; position: absolute; left: 0; top: 0; }
/* 7 問を 1 画面に収めるため、行の高さを詰める（上下の余白は共通指定） */
@media (min-width: 901px) {
  .faq .band__head { margin-bottom: 2.8rem; }
  .faq summary { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}

/* ---------- 体験版の入口 ---------- */
.demo__body {
  display: flex; align-items: center; justify-content: space-between; gap: 3.2rem;
  padding: 4rem 4.8rem;
  background: var(--gray-100); border-radius: 1.2rem;
}
.demo__text { font-size: 1.8rem; font-weight: 500; color: var(--ink); }
.demo__action { display: flex; flex-direction: column; align-items: flex-end; gap: 1.2rem; }
/* 狭い画面・タッチ端末では押せないボタンにし、案内を出す（js/main.js が aria-disabled を付ける） */
.demo__pc-only { display: none; font-size: 1.3rem; color: var(--ink); max-width: 36em; }
@media (max-width: 900px), (pointer: coarse) {
  .demo__pc-only { display: block; }
  .demo__body { flex-direction: column; align-items: flex-start; padding: 2.8rem 2.4rem; }
  .demo__action { align-items: flex-start; }
}

/* ---------- 08 CTA ---------- */
.cta {
  background: var(--ink); color: #fff;
  padding: clamp(6.4rem, 8vw, 10.4rem) var(--pad-x);
  display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center;
}
/* リリース予定日：ヒーローのパネルと同じ文言を見出しの上に添える */
.cta__release {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 0.6rem;
  font-family: var(--font-display); font-weight: 900; line-height: 1.3;
}
.cta p.cta__release { font-size: clamp(1.8rem, 1.8vw, 2.2rem); color: var(--coral); }
.cta__release span { font-size: 1.3rem; font-weight: 700; }
.cta h2 { font-size: clamp(2.2rem, 3vw, 3rem); }
.cta p { font-size: 1.4rem; color: #fff; max-width: 46ch; }
.cta__actions { display: flex; flex-wrap: nowrap; gap: 1.2rem; justify-content: center; padding-top: 0.8rem; }
.cta__actions .btn { flex: 0 1 auto; min-width: 0; }
.cta .btn--solid { background: #fff; border-color: #fff; color: var(--ink); font-weight: 700; transition: none; }

/* ---------- 09 LIBRO との関係 ---------- */
/* お問い合わせと同じ構成：見出し・本文・ボタンを縦に並べて中央に揃える */
.relation__inner {
  display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center;
}
.relation h2 { font-size: 1.8rem; color: var(--ink); }
.relation p { font-size: 1.3rem; color: var(--ink); }
.relation__actions { display: flex; justify-content: center; padding-top: 0.8rem; }
/* 大きさ・文字の太さはお問い合わせのボタンと揃える。ホバーしても色を変えない（動くのは矢印だけ） */
.relation__actions .btn { font-weight: 700; }
.relation .btn--solid { background: var(--ink); border-color: var(--ink); color: #fff; transition: none; }
/* お問い合わせと LIBRO＋ のボタンは同じ幅にする（長い方の「お問い合わせフォームへ」が収まる幅） */
.cta__actions .btn, .relation__actions .btn { width: min(28rem, 100%); }

/* お問い合わせ＋LIBRO＋ との関係：2 つで 1 画面。
   中身が収まる限り半分ずつに分け、それぞれ中身を中央に置く */
.closing {
  min-height: var(--screen-h);
  display: flex; flex-direction: column;
}
/* flex-basis 0 では padding の差がそのまま高さの差になる。お問い合わせの上余白はヘッダーの重なる分（--header-bottom）だけ多く、
   ヘッダーの下に見える部分が 2 つで同じ高さになる */
.closing > .cta, .closing > .relation { flex: 1 1 0; padding-block: 3.2rem; }
/* ヘッダーと重なる上端（--header-bottom）は白にし、紺はその下から敷く。
   中身は紺の部分の中央に来る（紺の部分の上下余白が同じ 3.2rem のため） */
.closing > .cta {
  padding-top: calc(var(--header-bottom) + 3.2rem);
  background: linear-gradient(var(--white) var(--header-bottom), var(--ink) var(--header-bottom));
}
.closing > .relation { display: flex; flex-direction: column; }
.closing > .relation > * { width: 100%; }
.closing > .cta::before, .closing > .cta::after,
.closing > .relation::before, .closing > .relation::after { content: ""; flex: 1 0 0; }

/* ---------- フッター ---------- */
.site-footer { background: var(--white); border-top: 1px solid var(--gray-200); }
.site-footer__inner {
  max-width: var(--w-max); margin-inline: auto;
  padding: 2.2rem calc(var(--pad-x-chrome) + 7.6rem) 1.4rem var(--pad-x-chrome);
  display: flex; align-items: center; justify-content: space-between; gap: 2.4rem; flex-wrap: wrap;
}
.site-footer__logo { height: 2.4rem; width: auto; display: block; }
.site-footer__nav { display: flex; gap: 2.2rem; font-size: 1.2rem; margin-left: auto; }
.site-footer__nav a { text-decoration: none; color: var(--ink); }
.site-footer__nav a:hover { color: var(--coral-deep); }
.site-footer__copy {
  padding: 1rem var(--pad-x-chrome) 1.4rem;
  display: flex; justify-content: center;
}
.site-footer small { font-size: 1.1rem; color: var(--ink); font-family: var(--font-mono); }

/* ---------- 上下ジャンプボタン ---------- */
.jump {
  position: fixed; right: clamp(1.6rem, 2.4vw, 3.2rem); bottom: clamp(1.6rem, 2.4vw, 3.2rem);
  z-index: 60;
  width: 5.2rem; height: 5.2rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff;
  border: 1px solid var(--ink); border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1rem 2.6rem rgba(30, 37, 48, .24);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.jump:hover { background: var(--coral-deep); border-color: var(--coral-deep); transform: translateY(-2px); }
.jump:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 0.3rem; }
.jump__arrow {
  width: 1.1rem; height: 1.1rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s ease;
}
.jump.is-up .jump__arrow { transform: rotate(-135deg) translate(-2px, -2px); }

/* ---------- スクロール表示（js/main.js が付与） ---------- */
.reveal { opacity: 0; transform: translateY(1.2rem); transition: opacity .5s ease, transform .5s ease; }
/* 見出し背面番号のフェードイン */
.rule-in::before { opacity: 0; transform: translateY(1.2rem); transition: opacity .6s ease .08s, transform .6s cubic-bezier(.22,.7,.2,1) .08s; }
.rule-in.is-visible::before { opacity: 1; transform: none; }
.reveal.is-visible { opacity: 1; transform: none; }
/* 機能詳細（付箋）：たどり着いたらまとめてフェード */
.flip-in { opacity: 0; transform: translateY(1.8rem); transition: opacity .7s cubic-bezier(.22,.7,.2,1), transform .7s cubic-bezier(.22,.7,.2,1); }
.flip-in.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .rule-in::before { opacity: 1; transform: none; }
  .flip-in { opacity: 1; transform: none; }
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px) {
  .site-nav { display: none; }
  .site-nav__toggle { display: flex; }
  .hero { grid-template-columns: 1fr; grid-template-rows: 4fr auto auto 6fr; gap: 0; }
  .hero__copy, .hero__shot { grid-column: 1; }
  .hero__copy { grid-row: 2; padding-right: 0; }
  .hero__shot { grid-row: 3; margin: 3.6rem 0 0; justify-content: center; }
  .hero__headline { max-width: none; white-space: normal; }
  .summary__list,
  .types__grid,
  .steps__list { grid-template-columns: 1fr; gap: 2.4rem; }
  .feature { grid-template-columns: 1fr; gap: 2.4rem; }
  .feature--rev .feature__text { order: 0; }
  .env__list { grid-template-columns: 1fr; }
  .env__list > div { padding: 1.6rem 0; border-left: 0; border-top: 1px solid var(--gray-200); }
  .env__list > div:first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 560px) {
  .cta__actions { gap: 0.8rem; }
  .cta__actions .btn--lg,
  .relation__actions .btn--lg { padding: 1.5rem 1.6rem; font-size: 1.3rem; width: min(24rem, 100%); }
}

/* 拡大表示（見た目3タイプの動画。js/main.js が生成） */
html.is-locked { overflow: hidden; }
.lightbox {
  padding: 0; border: 0; background: transparent; color: var(--white);
  max-width: none; max-height: none; overflow: visible;
}
.lightbox::backdrop { background: rgba(14, 18, 24, .82); }
/* transform を使うと閉じるボタンの fixed 基準がずれるため、不透明度だけで出す */
.lightbox[open] { animation: lightbox-in .22s ease; }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox__inner { position: relative; }
/* 上下に 6rem 以上の余白を確保し、右上の閉じるボタンと重ならないようにする */
.lightbox__video {
  display: block; width: auto; height: auto;
  max-width: min(92vw, 160rem); max-height: calc(100vh - 16rem); max-height: calc(100dvh - 16rem);
  border-radius: 0.8rem; background: var(--white);
}
.lightbox__name { margin: 1.2rem 0 0; font-size: 1.5rem; font-weight: 700; text-align: center; }
/* 閉じるボタンは画面の右上に固定（ウィンドウの高さに関係なく見切れない） */
.lightbox__close {
  position: fixed; top: 1.6rem; right: 1.6rem;
  width: 4.4rem; height: 4.4rem; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); cursor: pointer;
  transition: background .2s ease;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .26); }
.lightbox__close:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.lightbox__close::before,
.lightbox__close::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 1.8rem; height: 2px; background: var(--white);
}
.lightbox__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.lightbox__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .lightbox[open] { animation: none; } }

/* 見た目3タイプの比較（タップで拡大再生） */
.looks { margin-top: 4rem; }
/* 3タイプの動画のリード文（見出し帯から移した） */
.looks__lead { margin: 0 0 1.6rem; }
.looks__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
  list-style: none; margin: 0; padding: 0;
}
.look__media {
  position: relative; z-index: 0; aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px dashed var(--gray-400);
  background: repeating-linear-gradient(135deg, #f1f2f4 0 0.8rem, #f9fafb 0.8rem 1.6rem);
}
.look__media.has-video, .look__media:has(.look__still) { border: 0; background: var(--white); }
.look__media.has-video { cursor: pointer; }
.look__media:focus-visible { outline: 2px solid var(--coral, #ff6f5e); outline-offset: 2px; }
.look__ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 1.2rem; color: var(--ink);
  font-family: var(--font-mono); font-size: 1.1rem; line-height: 1.7;
}
.look__video {
  position: absolute; z-index: 1; inset: 0;
  display: block; width: 100%; height: 100%; object-fit: cover; background: var(--white);
  opacity: 0; transition: opacity .2s ease;
}
.look__video.is-ready { opacity: 1; }
.look__still {
  position: absolute; z-index: 1; inset: 0;
  display: block; width: 100%; height: 100%; object-fit: cover; background: var(--white);
}
/* 再生マーク：動画中央の丸＋三角 */
.look__cue {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  width: 5.6rem; height: 5.6rem; border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  transform: translate(-50%, -50%);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.look__cue::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  border-style: solid; border-width: 1rem 0 1rem 1.7rem;
  border-color: transparent transparent transparent var(--white);
  transform: translate(-38%, -50%);
}
.look__media.has-video:hover .look__cue { transform: translate(-50%, -50%) scale(1.08); }
.look__media:not(.has-video) .look__cue { display: none; }
.look__name { font-size: 1.5rem; margin: 1.4rem 0 0; }
.look__note { margin-top: 0.6rem; font-family: var(--font-mono); font-size: 1.1rem; line-height: 1.6; color: var(--ink); }
@media (max-width: 760px) {
  .looks__grid { grid-template-columns: 1fr; gap: 2.6rem; }
}

/* hero 以外の配置画像・動画は角丸に */
.feature__shot,
.feature .ph--shot,
.ph--step,
.ph--wide,
.look__media { border-radius: 0.8rem; }
.look__media { overflow: hidden; }
.look__video, .look__still { border-radius: inherit; }
.summary__list .ph, .types .ph, .steps .ph { border-radius: 0.8rem; }

/* 03 できること一覧：ヘッダーを除いた 1 画面に収める（横幅のある画面のみ。上下の余白は共通指定） */
@media (min-width: 901px) {
  .types .band__head { margin-bottom: 1.6rem; gap: 0.8rem; }
  .types__grid { gap: 1rem 1.6rem; margin-bottom: 1.2rem; }
  .type-card { padding: 1rem 1.8rem; gap: 1.4rem; }
  .types .looks { margin-top: 1.6rem; }
  .types .looks__lead { margin-bottom: 1rem; }
  .types .look__media { aspect-ratio: var(--look-ratio, 16 / 10); }
  .types .look__name { margin-top: 0.8rem; }
  .types .look__note { margin-top: 0.4rem; }
}

.site-header__brand { gap: 1rem; }
.site-header__brand-icon { width: 2.8rem; height: 2.8rem; display: block; border-radius: 0.6rem; }