@charset "utf-8";
/* ==========================================================================
   Kazuma Web Works — base（裁縫作業場コンセプト版）
   トークン / リセット / タイポグラフィ / 背景装飾 / レイアウトの土台

   配色の考え方
   - 60-30-10。リネン地60%、革と焦げ茶30%、糸の色10%
   - 糸は5色（コーラル / マリーゴールド / セージ / デニム / ラベンダー）。
     多色だが散らからないのは「1区画につき1色」と決めているから
   - 黒は使わない。文字も罫線も焦げ茶に寄せると布に馴染む
   - ロゴの3色は糸の色に置き換える（コバルト→デニム、ライム→セージ、濃紺→焦げ茶）

   手ざわりの決めごと
   - 角は 3〜4px だけ。丸すぎず、直角でもない「裁った布」の角
   - 影はぼかさない。0 3px 0 の硬い影で、机に置いた紙の厚みを出す
   - 面のふちは破線のステッチで縫い止める。これがこの案の背骨
   - 帯の裁ち切りはピンキングばさみのギザギザ
   - イージングは実数値2本だけを使い回す
   ========================================================================== */

/* --- Webフォント ---
   Google Fonts から読むのをやめ、サイトで使う文字だけに絞ったファイルを assets/fonts/ に置いている（2026-09-17）。
   Google Fonts は文字の一覧（CSS 約170KB）を読み終えるまで画面を描かず、遅い回線でトップの表示に約4.5秒かかっていた。
   ページの文章を変えたら python tools/build-fonts.py --check で足りない字がないか確かめ、
   足りなければ python tools/build-fonts.py で作り直す（下の @font-face も自動で書き換わる） */
/* Webフォントが届くまでのあいだ、代わりに出る OS のフォント（游ゴシック・メイリオ・ヒラギノなど）。
   何も指定しないと、本文フォントが届いた瞬間に段落の行数が 3 行から 4 行に増え、
   その下のセクションが 30px ほど下へ飛んでいた
   （ずれの大きさは 料金 0.24・自己紹介 0.24・よくある質問 0.23・お問い合わせ 0.16。
    Google の目安は 0.1 以下。2026-09-19 に遅い回線で実測）。
   size-adjust は代替フォントの字面だけを伸縮させる指定で、line-height（行の高さ）には触らない。
   108% は実測で決めた値。本文は文節単位でしか折り返さない（.kww-wbr / word-break: keep-all）ため、
   単純な字幅比（実測 97.5%）ではなく、行数が一致する値を 94.5〜112% まで 1% 刻みで探して選んだ。
   これで全 12 ページの最大が 0.24 → 0.07 に収まっている。
   文章を大きく書き換えたときは、この値が合っているか測り直すこと */
@font-face {
  font-family: "KWW 代替ゴシック";
  src: local("Hiragino Sans"), local("ヒラギノ角ゴシック"), local("Yu Gothic UI"), local("Yu Gothic"),
       local("Noto Sans JP"), local("Meiryo"), local("メイリオ");
  size-adjust: 108%;
  font-display: swap;
}

/* @font-face ここから（tools/build-fonts.py が書き換える。手で直さない） */
@font-face {
  font-family: "Zen Kaku Gothic New";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/zen-kaku-400-ext.5d112c49.woff2") format("woff2");
  unicode-range: U+4E00-9FFF;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/zen-kaku-400.d5f52461.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/zen-kaku-700-ext.27e56d5a.woff2") format("woff2");
  unicode-range: U+4E00-9FFF;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/zen-kaku-700.67c15735.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/zen-maru-500-ext.3c70ef69.woff2") format("woff2");
  unicode-range: U+4E00-9FFF;
}
@font-face {
  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/zen-maru-500.84084083.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/zen-maru-700-ext.53dd1164.woff2") format("woff2");
  unicode-range: U+4E00-9FFF;
}
@font-face {
  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/zen-maru-700.e7e46009.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/fonts/zen-maru-900-ext.b37117da.woff2") format("woff2");
  unicode-range: U+4E00-9FFF;
}
@font-face {
  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/fonts/zen-maru-900.d293d430.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../assets/fonts/fraunces.dcd00842.woff2") format("woff2");
}
/* @font-face ここまで */

:root {
  /* このサイトは明るい配色ひとつで作っている（ダークモード用の配色は用意しない。
     クリーム色と手仕事の温かみが主題なので、暗い配色は別のデザインになってしまう）。
     それをブラウザに伝えておく。これが無いと、端末をダークモードにしている人の画面で、
     ブラウザが自分で描く部分——<select> を開いたときの選択肢の一覧、スクロールバー、
     日付や色の入力欄——だけが黒くなり、明るいページの中でそこだけ浮くことがある。
     サイト側で色を指定している部分（フォームの枠や文字）は今までどおりで、見た目は変わらない
     （2026-09-20 に追加。判断の経緯は README の同じ日のメモ） */
  color-scheme: light;

  /* --- 布と紙（60%） --- */
  --cream: #FAF4EA;      /* リネン。いちばん広い面 */
  --cream-2: #F2E8D8;    /* 一段濃い布 */
  --white: #FFFCF6;      /* 白い当て布。純白は使わない */
  --kraft: #EBDCC0;      /* 型紙のクラフト紙 */

  /* --- 革と木（30%） --- */
  --leather: #C08552;
  --leather-d: #9A6538;
  --leather-l: #D6A472;
  --wood: #4A3B32;

  /* --- 糸（10%）。既存の変数名は活かして中身を入れ替える --- */
  --coral: #EE6C7E;      /* コーラル。CTA の主役 */
  /* 文字色として8箇所で使う。#D24A5E は白地で 4.20:1 しかなく
     基準（4.5:1）に届かなかったので、色味は保ったまま少しだけ濃くした */
  --coral-d: #C4384F;
  --coral-100: #FBDDE2;
  --marigold: #EFA338;
  --sage: #5FAF93;
  --denim: #4E8FD0;
  --lilac: #A88BD4;

  /* --- 旧ブランド変数の受け皿。糸の色に読み替える --- */
  --cobalt: #4E8FD0;     /* デニムの糸 */
  --cobalt-600: #3B7CBD;
  --cobalt-100: #CFE0F2;
  --cobalt-050: #E9F1FA;
  --navy: #4A3B32;       /* 焦げ茶 */
  --lime: #5FAF93;       /* セージ */
  --sky: #4E8FD0;
  --amber: #EFA338;
  --grape: #A88BD4;

  /* --- 文字。黒は使わない --- */
  --ink: #4A3B32;
  --ink-70: #7A6558;
  /* 4.5:1 を満たす濃さ。#A3907F は淡くて気持ちよかったが、
     サイドバーの地で 2.53:1、白で 2.99:1 しかなく、
     年配の方や明るい場所では読めない。全背景で 4.6:1 以上になる値へ。 */
  --muted: #756455;
  --muted-2: #BCAB99;

  /* --- 糸の色を文字に置くとき。リネン地で 4.5:1 以上を確保してある --- */
  --t-cobalt: #2C6FAE;   /* デニム */
  --t-coral:  #C9445A;   /* コーラル */
  --t-amber:  #96650C;   /* マリーゴールド */
  --t-mint:   #2C7C63;   /* セージ */
  --t-grape:  #6B4CA8;   /* ラベンダー */
  --t-sky:    #2C6FAE;
  /* FAQ専用。サービス区画のデニムと重ならない青緑 */
  --t-faq:    #2A8790;
  --t-glossary: #8A5A2F;

  /* その区画の糸。tint-* が上書きする */
  --sc: var(--t-coral);
  --sc-bg: #FBE6E9;

  /* --- 罫線。生成りの糸 --- */
  --line: #E0D0B6;
  --line-soft: #EBDFCB;
  --line-blue: #CFE0F2;
  --stitch: #C9B79C;     /* ステッチの糸色 */

  /* --- 書体 ---
     見出し＝Zen Maru Gothic 900。ここは丸ゴシックで正しい。
     このコンセプトは親しみやすさが目的なので、硬い角ゴシックだと意図に反する。
     欧文の見出し・ラベル＝Fraunces（手仕事系のやわらかいセリフ）。
     本文＝Zen Kaku Gothic New。長文はこちらの方が読みやすい。 */
  --f-sans: "Zen Kaku Gothic New", "Fraunces", "KWW 代替ゴシック", -apple-system, BlinkMacSystemFont,
            "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --f-display: "Zen Maru Gothic", "Zen Kaku Gothic New", "KWW 代替ゴシック", -apple-system,
               BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  --f-en: "Fraunces", "Zen Maru Gothic", Georgia, serif;

  /* --- 丸み。裁った布の角。丸すぎず直角でもない --- */
  --r-xs: 3px;
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 4px;
  --r-xl: 5px;
  --r-pill: 999px;   /* タグとボタンだけ丸める */

  /* --- 影。ぼかさず、紙の厚みとして落とす --- */
  --lift: 0 3px 0 rgba(74, 59, 50, .12);
  --lift-sm: 0 2px 0 rgba(74, 59, 50, .1);

  /* --- 動き --- */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-snap: cubic-bezier(.34, 1.56, .64, 1);

  /* --- 寸法 --- */
  --wrap: 1200px;
  --gut: clamp(20px, 5vw, 48px);
  --sec: clamp(76px, 9vw, 132px);
  --hdr: 62px;
  --side: 302px;
}

/* --------------------------------------------------------------- reset -- */

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

/* hidden 属性は、要素側で display を指定していても必ず効かせる。
   以前は .form { display: grid } が勝ち、送信に成功しても JS で hidden にした
   フォームが消えず、ボタンが「送信中…」のまま残っていた */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 20px;
}

body {
  margin: 0;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.98;
  color: var(--ink);
  background: var(--cream);
  /* 布の織り目。細かい格子を薄く重ねるだけでリネンに見える */
  background-image:
    repeating-linear-gradient(0deg,  rgba(74, 59, 50, .03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(74, 59, 50, .03) 0 1px, transparent 1px 3px);
  font-feature-settings: "palt" 1;
  letter-spacing: .015em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 3px; }

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  padding: 10px 20px; background: var(--wood); color: var(--white);
  border-radius: var(--r-pill);
  font-size: 14.5px; transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

/* ---------------------------------------------------------- typography -- */

.display, .h2, .h3, .hero__title, h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 700;
}

.display {
  font-size: clamp(1.95rem, 4.2vw, 3.3rem);
  font-weight: 900;
  line-height: 1.36;
  letter-spacing: -.008em;
}
.h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -.004em;
}
/* 見出しの中の強調はその区画の糸の色で塗る */
.display em, .h2 em, .h3 em { font-style: normal; color: var(--sc); }
.h3 {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.7;
}
/* 日本語は文字と文字の間ならどこでも折り返せるので、行の最後に
   1〜2文字だけ取り残される「泣き別れ」が起きやすい。
   （例：「…公開できるの / か。」「…対応しま / す。」）
   実測したところ全ページで90箇所あった。

   word-break: auto-phrase … 文節（意味の切れ目）で折り返す。
     html に lang="ja" が要る。付いていることを確認済み。
   text-wrap: pretty      … 最終行が極端に短くなる割り付けを避ける。

   どちらも未対応のブラウザでは無視されるだけなので、付けて害はない。
   見出しは手で改行位置を決めてあるので対象に含めない。 */
/* .work__note と .tile__d は span なので、要素名では拾えない。
   中身は文章なので、他の本文と同じ折り返しにする。
   （これを入れ忘れていて、制作事例の説明が「…していま / す。」と割れていた） */
p, li, dd, dt, td, th, figcaption, blockquote, .lede, .work__note, .tile__d {
  text-wrap: pretty;
  word-break: auto-phrase;
}

/* ここだけは絶対に割りたくない、という塊に付ける。
   auto-phrase は文節で折り返すが、鉤括弧をまたぐ引用などは
   意図しない位置で切れることがある。そういう箇所を手で囲う。
   （例：about の「今さら聞けない」ことほど、が
     「今さら / 聞けない」と割れて、続く行が8文字しか埋まらなかった）
   狭い欄で使うと今度ははみ出すので、短い語句にだけ使うこと。 */
/* 意味の切れ目の塊。途中では改行せず、塊と塊の間でだけ改行する。
   inline-block にしてあるのは Safari（WebKit）のため。nowrap の inline 同士が隙間なく並ぶと、
   Chrome は境目で改行するが Safari は改行せず、ロゴ制作の料金カードなどで文字が枠からはみ出していた。
   Safari は文節改行（word-break: auto-phrase）にも対応していないので、目立つ文にはこの塊で改行位置を決めてある */
.nb { white-space: nowrap; display: inline-block; }

/* 本文の文節改行（js/site.js の phraseWrap）。JS が文節の境目に <wbr> を入れた要素にだけ付く。
   keep-all で <wbr>・空白・句読点以外では改行させず、塊が1行に収まらないときだけ break-word で折り返す。
   anywhere は使わない。Firefox では keep-all と anywhere を組み合わせると、幅が中身で決まる見出しやボタンで
   <wbr> を無視して1〜2文字ずつ折り返した（2026-09-17 に確認）。
   break-word は「欄の最小幅」に塊の長さが入るので、長い塊がグリッドの欄を押し広げないか、
   幅 320px から Safari・Firefox で確認してある */
.kww-wbr { word-break: keep-all; overflow-wrap: break-word; }
.kww-nw { white-space: nowrap; }   /* かっこ・句読点と隣の1文字（js/site.js の appendGlued） */

/* 改行しない塊（.nb）が欄より広くなると、横にはみ出す。起きるのは2つの場合。
     ・幅 320px 未満（Galaxy Fold の外側画面など）
     ・ブラウザの文字サイズを大きくしたとき（文字だけ 200% など）
   どちらも「文字の大きさに対して画面が狭い」状態なので、px ではなく em で指定する。
   19.9em は、標準の文字サイズ（16px）なら 318px、文字を2倍にしたなら 637px 相当。
   この状態のときだけ、塊の中でも折り返す。iPhone SE（320px・標準の文字サイズ）は今までどおり。
   .kww-nw（かっこ＋1文字）は 2文字なのでそのまま。行頭に「、」が来ないようにするため */
@media (max-width: 19.9em) {
  /* word-break も戻す。見出しの auto-phrase（文節単位でしか改行しない）を引き継ぐと、
     塊の中で折り返せず 440px のままはみ出していた（2026-09-19 に確認） */
  .nb { white-space: normal; word-break: normal; overflow-wrap: anywhere; }
}

/* グリッドの子は、既定では「中身の最小幅」より小さくならない。
   文字サイズを2倍にすると、見出しの塊のぶんだけ欄が広がり、横スクロールが出ていた（2026-09-19 に確認）。
   欄を縮められるようにして、収まらないときは見出しの側で折り返させる */
:is(.sec__in, .sec__head, .sec-head, .sec-head__aside, .svc__item, .flow, .plans,
    .glossary-guide, .prose, .wpdemo-lead, .phero__grid, .contact__grid) > * {
  min-width: 0;
}

/* 見出しは pretty ではなく balance。行数が少ないので、
   最終行だけを守るより、行の長さを揃えた方が収まりがよい。
   ヒーローの見出しだけは1行ずつ手で決めてあるので対象外にする。 */
h1, h2, h3, h4, .faq__q b, .plan__t {
  text-wrap: balance;
  word-break: auto-phrase;
}
.hero__title { text-wrap: initial; word-break: normal; }

.lede {
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  line-height: 2.12;
  color: var(--ink-70);
}
.small { font-size: 14.5px; line-height: 1.95; color: var(--muted); }
.num {
  font-family: var(--f-en);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* 眉ラベル。布のタグにして、ふちをステッチで留める */
.eyebrow {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-en);
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-70);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 6px 15px 6px 12px;
  margin-bottom: 20px;
  box-shadow: 0 1px 0 rgba(74, 59, 50, .07);
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sc); flex: none;
}
/* タグを留めているステッチ */
.eyebrow::after {
  content: ""; position: absolute; inset: 3px;
  border: 1px dashed #DFD0B8; border-radius: 2px; pointer-events: none;
}
.eyebrow--light { color: #FFF6E8; background: rgba(255, 255, 255, .12); border-color: rgba(255, 246, 232, .34); }
.eyebrow--light::before { background: var(--marigold); }
.eyebrow--light::after { border-color: rgba(255, 246, 232, .3); }

.mono {
  font-family: var(--f-en);
  font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}

/* ------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: var(--sec); position: relative; }

.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(36px, 4.5vw, 64px);
}
.sec-head__aside { padding-bottom: 6px; }
@media (max-width: 820px) {
  .sec-head { grid-template-columns: 1fr; align-items: start; gap: 18px; }
}

.rule { height: 0; border-top: 1.5px dashed var(--stitch); background: none; border-bottom: 0; margin: 0; transform-origin: left center; }

/* ========================================================== 背景の装飾 == */

/* 作業机の上にあるものだけを置く。
   ・糸まき（リング）
   ・ボタン（円）
   ・裁った布切れ（帯・シェブロン）
   ・縫い目の線（ドット）
   ・重ねた生地（ブロック）
   色はここでだけ使い、文字・ボタン・罫線には持ち込まない。 */

.deco {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.deco .pw { position: absolute; display: block; will-change: transform; }
.deco .pw > * { display: block; }

/* --- 形 --- */

/* ボタン。中央に糸を通す穴を2つ開ける */
.disc {
  border-radius: 50%;
  position: relative;
}

/* 糸まき。輪郭だけの円 */
.ring { border-radius: 50%; border-style: solid; background: none; }

/* 大きく弧を描く縫い目 */
.arc {
  border-radius: 50%;
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--aw, 64px)),
                #000 calc(100% - var(--aw, 64px) + 1px));
  mask: radial-gradient(closest-side, transparent calc(100% - var(--aw, 64px)),
        #000 calc(100% - var(--aw, 64px) + 1px));
}

/* リボン。角を少しだけ落とす */
.bar { border-radius: 3px; }

/* 縫い目のステッチ。点線を並べる */
.dots {
  background-image: radial-gradient(currentColor 2px, transparent 2.1px);
  background-size: 15px 15px;
}

/* ロゴの W から取ったシェブロン。裁った当て布として置く */
.chev {
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 74% 100%, 50% 52%, 26% 100%);
}

/* 重ねた生地。段違いに積む */
.blocks { display: grid; gap: 6px; }
.blocks span { display: block; height: 15px; border-radius: 3px; }
.blocks span:nth-child(1) { width: 100%; }
.blocks span:nth-child(2) { width: 66%; margin-left: 18%; }
.blocks span:nth-child(3) { width: 84%; margin-left: 6%; }

/* --- 色（装飾専用）。糸の色に置き換える --- */

.d-sky    { background: linear-gradient(140deg, #86B8E4, var(--denim)); }
.d-cobalt { background: linear-gradient(140deg, #86B8E4, var(--denim)); }
.d-lime   { background: linear-gradient(140deg, #95CFBA, var(--sage)); }
.d-amber  { background: linear-gradient(140deg, #F5C57C, var(--marigold)); }
.d-coral  { background: linear-gradient(140deg, #F79FAC, var(--coral)); }
.d-grape  { background: linear-gradient(140deg, #C6B2E6, var(--lilac)); }

/* 糸まきに見せる寄せ。中心を抜いて巻いた糸にする */
.d-orb-sky, .d-orb-grape, .d-orb-coral, .d-orb-lime {
  -webkit-mask: radial-gradient(closest-side, transparent 32%, #000 33%);
  mask: radial-gradient(closest-side, transparent 32%, #000 33%);
}
.d-orb-sky    { background: conic-gradient(from 0deg, var(--denim), #CFE0F2 50%, var(--denim)); }
.d-orb-grape  { background: conic-gradient(from 0deg, var(--lilac), #E4DAF5 50%, var(--lilac)); }
.d-orb-coral  { background: conic-gradient(from 0deg, var(--coral), #FBDDE2 50%, var(--coral)); }
.d-orb-lime   { background: conic-gradient(from 0deg, var(--marigold), #FBE3BE 50%, var(--marigold)); }

/* 弧を描く縫い目用のコニック */
.a-sky    { background: conic-gradient(from var(--a, 0deg), var(--denim), #CFE0F2 38%, transparent 58%); }
.a-cobalt { background: conic-gradient(from var(--a, 0deg), var(--denim), #CFE0F2 40%, transparent 60%); }
.a-coral  { background: conic-gradient(from var(--a, 0deg), var(--coral), #FBDDE2 42%, transparent 62%); }
.a-amber  { background: conic-gradient(from var(--a, 0deg), var(--marigold), #FBE3BE 40%, transparent 60%); }
.a-lime   { background: conic-gradient(from var(--a, 0deg), var(--sage), #D5EDE4 44%, transparent 64%); }
.a-grape  { background: conic-gradient(from var(--a, 0deg), var(--lilac), #E4DAF5 42%, transparent 62%); }

.r-sky { border-color: var(--denim); } .r-cobalt { border-color: var(--denim); }
.r-lime { border-color: var(--sage); } .r-amber { border-color: var(--marigold); }
.r-coral { border-color: var(--coral); }

.t-sky { color: var(--denim); } .t-cobalt { color: var(--denim); }
.t-lime { color: var(--sage); } .t-amber { color: var(--marigold); }
.t-coral { color: var(--coral); }

/* 濃さ。糸の色は強いので、地に置くときは十分に落とす */
.soft-28 { opacity: .09; } .soft-45 { opacity: .12; }
.soft-70 { opacity: .15; } .soft-90 { opacity: .2; }

/* 重なりを濁らせない */
.deco .pw > * { mix-blend-mode: multiply; }

/* Background tools: retain the existing opacity, parallax and animation classes.
   Only decorative elements are affected; SVG masks keep the illustration crisp. */
.deco .pw > :is(.arc, .ring, .disc, .chev, .bar, .dots, .blocks) {
  border: 0; border-radius: 0; clip-path: none;
  background: var(--tool-color, var(--denim));
  -webkit-mask: var(--tool-art) center / contain no-repeat;
  mask: var(--tool-art) center / contain no-repeat;
}
.deco .pw > .arc { --tool-art: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%20240%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2263%22%20cy%3D%22181%22%20rx%3D%2227%22%20ry%3D%2234%22%20transform%3D%22rotate%2825%2063%20181%29%22%2F%3E%3Cellipse%20cx%3D%22175%22%20cy%3D%22181%22%20rx%3D%2227%22%20ry%3D%2234%22%20transform%3D%22rotate%28-25%20175%20181%29%22%2F%3E%3Cpath%20d%3D%22M79%20151%20179%2028Q184%2078%20130%20128L156%20151M159%20151%2061%2028Q55%2078%20109%20128L81%20151%22%2F%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%22119%22%20r%3D%227%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); }
.deco .pw > .ring { --tool-art: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%20190%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2289%22%20cy%3D%2262%22%20rx%3D%2265%22%20ry%3D%2238%22%2F%3E%3Cellipse%20cx%3D%2289%22%20cy%3D%2262%22%20rx%3D%2225%22%20ry%3D%2214%22%2F%3E%3Cpath%20d%3D%22M24%2062v38c0%2050%20128%2051%20130%200V62M154%2099h65v39H89M171%20101v17M190%20101v25M207%20101v17M42%2099v21M62%20108v22M84%20111v24M107%20110v23M131%20102v24%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); }
.deco .pw > .disc { --tool-art: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20140%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%2220%22%20y%3D%2212%22%20width%3D%2280%22%20height%3D%2217%22%20rx%3D%225%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%22107%22%20width%3D%2280%22%20height%3D%2217%22%20rx%3D%225%22%2F%3E%3Cpath%20d%3D%22M30%2029v78M90%2029v78M30%2039l60%2012M30%2053l60%2012M30%2067l60%2012M30%2081l60%2012M30%2095h60M91%2087q22%202%2018%2028%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); }
.deco .pw > .chev { --tool-art: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%20160%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%20143a108%20108%200%200%201%20216%200ZM55%20143a65%2065%200%200%201%20130%200Z%22%2F%3E%3Cpath%20stroke-width%3D%224%22%20d%3D%22M120%2035V52M66%2050l9%2015M27%2089l16%209M174%2050l-9%2015M213%2089l-16%209M92%2039l4%2012M145%2039l-3%2012M43%2065l10%2010M196%2065l-10%2010M18%20115l13%203M222%20115l-13%203M110%20133h20M120%20123v20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); }
.deco .pw > .bar { --tool-art: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2065%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%225%22%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%22290%22%20height%3D%2255%22%20rx%3D%225%22%2F%3E%3Cpath%20stroke-width%3D%223%22%20d%3D%22M30%206v28M45%206v15M60%206v21M75%206v15M90%206v28M105%206v15M120%206v21M135%206v15M150%206v28M165%206v15M180%206v21M195%206v15M210%206v28M225%206v15M240%206v21M255%206v15M270%206v28%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); }
.deco .pw > .dots { --tool-art: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20140%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20stroke-width%3D%225%22%20d%3D%22M18%20116%20118%2021q14-12%2020-3t-6%2020Z%22%2F%3E%3Cpath%20stroke-width%3D%223%22%20d%3D%22m121%2026%207-6M125%2025c-28-8-54-7-58%2015-8%2036%2063%2020%2063%2054%200%2029-49%2037-52%2013-3-26%2063-31%2094-11%2018%2012%2017%2025%207%2032%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); }
.deco .pw > .blocks { --tool-art: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20180%20180%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m27%20151%2012-42L136%2012q6-6%2012%200l20%2020q6%206%200%2012L71%20141ZM39%20109l32%2032M126%2022l32%2032M115%2033l32%2032M49%20119l77-77%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22m27%20151%206-22%2016%2016Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); height: 150px; }
.deco .pw > .blocks > span { display: none; }
.deco .pw:nth-child(even) > .arc { --tool-art: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20180%20180%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m33%20146%207-32L135%2019q8-8%2016%200l10%2010q8%208%200%2016L66%20140ZM40%20114l26%2026M115%2039l26%2026M128%2017l-18-7-45%2045M34%20147l-7%207%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); }
.deco :is(.a-coral, .r-coral, .d-coral, .d-orb-coral, .t-coral) { --tool-color: var(--coral); }
.deco :is(.a-lime, .r-lime, .d-lime, .d-orb-lime, .t-lime, .t-mint) { --tool-color: var(--sage); }
.deco :is(.a-amber, .r-amber, .d-amber, .d-orb-amber, .t-amber) { --tool-color: var(--marigold); }
.deco :is(.a-grape, .r-grape, .d-grape, .d-orb-grape) { --tool-color: var(--lilac); }
/* Large arcs used to extend outside the section. Keep tools recognisable inside it. */
.deco .pw:has(> .arc) { left: auto !important; right: 2% !important; top: 3% !important; bottom: auto !important; }
.deco .pw:nth-child(even):has(> .arc) { left: 1% !important; right: auto !important; top: auto !important; bottom: 4% !important; }
.deco .pw > .arc { width: clamp(180px, 22vw, 340px) !important; height: clamp(180px, 22vw, 340px) !important; }
@media (max-width: 760px) {
  .deco .pw > .arc { width: 180px !important; height: 180px !important; }
}

/* --- 区画の地。布の種類と糸の色をセットで持たせる --- */

/* Extra tools and deliberately varied homepage compositions. */
.deco {
  --art-safety-pin: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20220%20140%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M49%2097%20162%2028q20-12%2031%205l9%2015-31%2020-13-22M49%2097l127-34M49%2097c-28%2029-48-9-25-22%2012-6%2026%205%2025%2022Z%22%2F%3E%3Cpath%20d%3D%22m163%2028%2012%2020%2018-11%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --art-button: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20140%20140%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%226%22%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%2270%22%20r%3D%2259%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%2270%22%20r%3D%2247%22%2F%3E%3Ccircle%20cx%3D%2255%22%20cy%3D%2255%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2285%22%20cy%3D%2255%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2255%22%20cy%3D%2285%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2285%22%20cy%3D%2285%22%20r%3D%226%22%2F%3E%3Cpath%20stroke-width%3D%224%22%20d%3D%22m55%2055%2030%2030m0-30L55%2085%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --art-paperclip: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20180%20180%22%3E%3Cpath%20d%3D%22m68%20107%2058-58c20-20%2043%203%2023%2023l-72%2072c-32%2032-68-4-36-36l77-77c43-43%2089%206%2048%2047l-72%2072%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%228%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --art-pincushion: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20170%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%20119c0-59%20160-59%20160%200%200%2047-160%2047-160%200ZM100%2080c-32%2015-32%2053%200%2072%2032-19%2032-57%200-72M24%20126q76%2023%20152%200M65%2087%2043%2041M101%2081V24M130%2087l28-43%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2234%22%20r%3D%228%22%2F%3E%3Ccircle%20cx%3D%22101%22%20cy%3D%2216%22%20r%3D%228%22%2F%3E%3Ccircle%20cx%3D%22163%22%20cy%3D%2237%22%20r%3D%228%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --art-zipper: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20220%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2014%20107%2043H207M10%2086l97-29h100M13%2028l71%2021M13%2072l71-21%22%2F%3E%3Crect%20x%3D%2285%22%20y%3D%2234%22%20width%3D%2243%22%20height%3D%2232%22%20rx%3D%228%22%2F%3E%3Cpath%20d%3D%22m101%2054-22%2019%2012%2013%2029-24M139%2040v20M152%2040v20M165%2040v20M178%2040v20M191%2040v20M25%2018l-4%2013M43%2024l-4%2013M61%2029l-4%2013M25%2082l-4-13M43%2076l-4-13M61%2071l-4-13%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
/* Secondary-page headers keep their shared arrangement. */
.deco .pw > .disc.d-orb-coral { --tool-art: var(--art-button); }
.deco .pw:nth-child(5) > .dots { --tool-art: var(--art-safety-pin); }

/* Homepage: fixed compositions avoid layout jumps between visits. */
#top.hero .deco .pw:nth-child(5) > .disc { --tool-art: var(--art-pincushion); }
#top.hero .deco .pw:nth-child(8) > .dots { --tool-art: var(--art-zipper); }
#works.sec .deco .pw > .arc { --tool-art: var(--art-paperclip); }
#works.sec .deco .pw:has(> .arc) { left: 2% !important; right: auto !important; top: 35% !important; bottom: auto !important; }
#works.sec .deco .pw:nth-child(2) { right: 3% !important; bottom: 12% !important; }
#works.sec .deco .pw:nth-child(3) { right: 12% !important; top: 5% !important; }
#services.sec .deco .pw:has(> .arc) { right: 3% !important; top: auto !important; bottom: 4% !important; }
#services.sec .deco .pw:nth-child(2) > .ring { --tool-art: var(--art-pincushion); }
#services.sec .deco .pw:nth-child(4) > .blocks { --tool-art: var(--art-safety-pin); }
#services.sec .deco .pw:nth-child(4) { right: 20% !important; bottom: auto !important; top: 3% !important; }
#pricing.sec .deco .pw > .arc { --tool-art: var(--art-zipper); }
#pricing.sec .deco .pw:has(> .arc) { left: 3% !important; right: auto !important; top: 8% !important; bottom: auto !important; }
#pricing.sec .deco .pw:nth-child(2) { right: 5% !important; top: auto !important; bottom: 5% !important; }
#pricing.sec .deco .pw:nth-child(3) > .disc { --tool-art: var(--art-button); }
#flow.sec .deco .pw:has(> .arc) { right: 2% !important; top: 30% !important; bottom: auto !important; }
#flow.sec .deco .pw:nth-child(2):has(> .arc) { left: 3% !important; right: auto !important; top: auto !important; bottom: 3% !important; }
#flow.sec .deco .pw:nth-child(2) > .arc { --tool-art: var(--art-safety-pin); }
#flow.sec .deco .pw:nth-child(3) > .ring { --tool-art: var(--art-button); }
#flow.sec .deco .pw:nth-child(3) { left: 5% !important; bottom: auto !important; top: 4% !important; }
#about.sec .deco .pw > .arc { --tool-art: var(--art-pincushion); }
#about.sec .deco .pw:has(> .arc) { left: 1% !important; right: auto !important; top: auto !important; bottom: 5% !important; }
#about.sec .deco .pw:nth-child(2) > .ring { --tool-art: var(--art-paperclip); }
#about.sec .deco .pw:nth-child(2) { right: 4% !important; bottom: auto !important; top: 3% !important; }
#faq.sec .deco .pw > .arc { --tool-art: var(--art-safety-pin); }
#faq.sec .deco .pw:has(> .arc) { right: 1% !important; top: auto !important; bottom: 3% !important; }
#faq.sec .deco .pw:nth-child(2) > .ring { --tool-art: var(--art-button); }
#faq.sec .deco .pw:nth-child(2) { left: 2% !important; bottom: auto !important; top: 5% !important; }
#faq.sec .deco .pw:nth-child(4) > .dots { --tool-art: var(--art-zipper); }

/* 色相を増やして賑やかにするのではなく、
   「リネン」「白い当て布」「型紙のクラフト紙」の3種の生地を切り替える。
   糸（--sc）は5色を順に回して、区画ごとに1色だけ使う。 */

.tint-cream { background: var(--cream); --sc: var(--t-coral);  --sc-bg: #FBE6E9; }
.tint-blue  { background: var(--white); --sc: var(--t-cobalt); --sc-bg: #E4EFF9; }
.tint-warm  { background: #FDF1EC;      --sc: var(--t-coral);  --sc-bg: #FBE6E9; }
.tint-mint  { background: #F1F8F4;      --sc: var(--t-mint);   --sc-bg: #DFF0E8; }
.tint-sun   { background: #FDF4E2;      --sc: var(--t-amber);  --sc-bg: #FAEBCE; }
.tint-lilac { background: #F6F2FC;      --sc: var(--t-grape);  --sc-bg: #EAE2F8; }
.tint-faq   { background: var(--white); --sc: var(--t-faq);    --sc-bg: #DDF1F2; }
.tint-glossary { background: #FBF5EA; --sc: var(--t-glossary); --sc-bg: #F2E2CF; }

/* 下層ページは body にテーマ色を付け、ページ全体へ --sc を配る */
.tint-blue-theme  { --sc: var(--t-cobalt); --sc-bg: #E4EFF9; }
.tint-warm-theme  { --sc: var(--t-coral);  --sc-bg: #FBE6E9; }
.tint-mint-theme  { --sc: var(--t-mint);   --sc-bg: #DFF0E8; }
.tint-sun-theme   { --sc: var(--t-amber);  --sc-bg: #FAEBCE; }
.tint-lilac-theme { --sc: var(--t-grape);  --sc-bg: #EAE2F8; }
.tint-cream-theme { --sc: var(--t-coral);  --sc-bg: #FBE6E9; }
.tint-glossary-theme { --sc: var(--t-glossary); --sc-bg: #F2E2CF; }

/* 生地を敷いた区画は、上辺をステッチで縫い止める。
   角丸ではなく「縫い目」で区画の切り替わりを示すのがこの案の作法。 */
.sec[class*="tint-"] {
  border-radius: 0;
  border-top: 1.5px dashed var(--stitch);
  border-bottom: 1.5px dashed var(--stitch);
}
/* #works だけ上辺の縫い目を外す。すぐ上にマーキー帯（ヒーローとの境目）が
   あり、帯のギザギザと破線がほぼ密着して二重の継ぎ目に見えていたため。
   帯自体がヒーロー→本編の切り替わりを示しているので、ここでの縫い目は不要。
   他区画どうしの縫い目（#works の下辺を含む）はそのまま。 */
#works.sec[class*="tint-"] { border-top: 0; }

/* --------------------------------------------------------------- 動き -- */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

.lines > span { display: block; overflow: hidden; }
.lines > span > span {
  display: block;
  transform: translate3d(0, 112%, 0);
  transition: transform .95s var(--ease);
  transition-delay: var(--d, 0ms);
}
.lines.is-in > span > span { transform: none; }

[data-draw] { transform: scaleX(0); transition: transform .9s var(--ease); transition-delay: var(--d, 0ms); }
[data-draw].is-in { transform: scaleX(1); }

/* 装飾はゆっくり。机の上の物は勝手に動き回らない */
@keyframes drift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -20px, 0); } }
@keyframes sway { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(12px, -14px, 0) rotate(5deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinr { to { transform: rotate(-360deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.dr { animation: drift 11s var(--ease) infinite; }
.dr-2 { animation: drift 14s var(--ease) infinite 1.6s; }
.dr-3 { animation: drift 9s var(--ease) infinite .8s; }
.sw { animation: sway 16s var(--ease) infinite; }
.sw-2 { animation: sway 19s var(--ease) infinite 2.2s; }
.sp { animation: spin 52s linear infinite; }
.sp-r { animation: spinr 68s linear infinite; }
.br { animation: breathe 13s var(--ease) infinite; }

/* JavaScript が動かないとき用の逃げ道。
   この2つが無いとページが真っ白になる。
     ・開幕の幕（.opening）は position:fixed; inset:0 で全面を覆っていて、
       JS が消すまでどかない
     ・本文の [data-reveal] は opacity:0 で始まり、JS が .is-in を付けて初めて見える
   <html class="no-js"> を置き、head の先頭のインライン script で即座に外している。
   JS が動く環境では CSS が本文を描く前に外れるので、点滅はしない。

   ただし .no-js が効くのは JS 自体を切っている場合だけ。 */
.no-js .opening { display: none; }
.no-js [data-reveal],
.no-js .lines > span > span,
.no-js [data-draw] { opacity: 1 !important; transform: none !important; }
.no-js .deco .pw { transform: none !important; }

/* JS は動くのに js ファイルだけ読めなかったとき（回線の瞬断、セキュリティ製品に弾かれた等）の保険。
   インライン script が .no-js を先に外してしまうので、上の逃げ道は効かない。
   以前はこの場合、本文がすべて透明のまま、トップは開幕の幕に覆われたままになっていた。
     ・site.js は動き出した瞬間に <html> へ .kww-js を付ける。付かないまま 2.5 秒たったら本文を出す
     ・opening.js は動き出した瞬間に <body> へ .is-opening か .is-ready を付ける。
       どちらも付かないまま 2.5 秒たったら幕をどける
   正常なときは 2.5 秒より前にクラスが付いてこの指定が外れるので、演出は変わらない。
   料金の数字の保険（下）と同じ 2.5 秒にそろえてある */
html:not(.no-js):not(.kww-js) [data-reveal],
html:not(.no-js):not(.kww-js) .lines > span > span,
html:not(.no-js):not(.kww-js) [data-draw] { animation: kww-reveal-failsafe 0s 2.5s forwards; }
@keyframes kww-reveal-failsafe { to { opacity: 1; transform: none; } }
html:not(.no-js) body:not(.is-opening):not(.is-ready) .opening { animation: kww-opening-failsafe 0s 2.5s forwards; }
@keyframes kww-opening-failsafe { to { visibility: hidden; } }   /* visibility:hidden なら押しても下のページに届く */

/* 料金の数字（[data-count]）。HTML には本当の金額を書いてあり、JS を実行しない読み手
   （AI検索、SNSのリンクプレビュー、読み上げ）にはそのまま金額が届く。
   以前は HTML に 0 を書いていたため、JS が動かないと「0万円〜」と読まれていた。
   JS が動く環境では、site.js が 0 に戻して .is-armed を付けるまで隠し、
   一瞬「10 → 0」と見えるちらつきを防ぐ。
   site.js が読み込めなかったときに金額が消えたままにならないよう、2.5 秒後に必ず出す。
   動きを減らす設定の下でも animation-delay は効くので、この保険は働く。 */
html:not(.no-js) [data-count]:not(.is-armed) {
  visibility: hidden;
  animation: kww-count-failsafe 0s 2.5s forwards;
}
@keyframes kww-count-failsafe { to { visibility: visible; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal], .lines > span > span, [data-draw] { opacity: 1 !important; transform: none !important; }
  .deco .pw { transform: none !important; }
}

/* 印刷。スクロールで出す演出は、印刷ではスクロールしないので透明のまま残る。
   以前は料金ページの3枚目のカードから下が白紙になっていた（2026-09-17 に確認）。
   印刷のときは演出をすべて終わった状態にする。数字は site.js の beforeprint で最終の値にする */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal], .lines > span > span, [data-draw],
  .viz [data-build], .viz [data-grow], .viz [data-drop] { opacity: 1 !important; transform: none !important; }
  [data-count] { visibility: visible !important; }
  .deco .pw { transform: none !important; }
  .opening { display: none !important; }
}