@charset "UTF-8";
/* Claude Code実践ガイド｜ホームページ編 — 販売ページのスタイル v3
   v2への指示（2026-08-23ほのきさん）＝「もっと思い切った大きめのフォント・もっと動きを」
   「初めて見る人が、こんなこともできるのかと思うページ」。
   緑の世界観と文章は据え置き。色を変えるときは --accent 1ヶ所。 */

:root {
  --accent: #2d7a5f;
  --accent-dark: #1f5b46;
  --accent-weak: rgba(45, 122, 95, 0.12);
  --accent-line: rgba(45, 122, 95, 0.28);
  --band: #edf4f0;
  --bg: #fbfaf6;
  --panel: #ffffff;
  --ink: #1f2937;
  --fg: #475569;
  --fg-soft: #5a697f;
  --line: #e4e0d6;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(45, 60, 50, 0.06);
  --shadow-hover: 0 14px 34px rgba(45, 60, 50, 0.14);

  /* 申込ボタンと特典見出しに使う、明るい強調色（2026-08-23ほのきさん指示で追加） */
  --pop: #fb8c00;
  --pop-2: #ffa726;
  --pop-weak: #fff3e2;
  --pop-line: #f5c98f;

  /* 「作るもの」1・2・3カードに使う青系（2026-08-23「緑じゃない色へ」の指示で追加） */
  --blue: #3f7cae;
  --blue-weak: #e9f1f7;
  --blue-line: #bcd4e6;

  /* 同・黄色系の候補（見比べ用。数字の中の文字だけ濃い茶色にして読めるように） */
  --sun: #f2c94c;
  --sun-ink: #5f4a12;
  --sun-deep: #d9a514;
  --sun-weak: #fdf6dd;
  --sun-line: #ecd98e;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic UI", "Yu Gothic", "YuGothic", "Meiryo", "MS PGothic", sans-serif;
  --font-head: "Shippori Mincho B1", "Yu Mincho", "YuMincho",
               "Hiragino Mincho ProN", "MS PMincho", serif;
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
  :root {
    --accent-weak: color-mix(in srgb, var(--accent) 12%, transparent);
    --accent-line: color-mix(in srgb, var(--accent) 30%, transparent);
  }
}

* { box-sizing: border-box; }
/* overflow-x: hidden は body だけでなく html にも。横からのスライド演出で
   画面の外に待機している要素が、横スクロールを生まないようにするため */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 2.0;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
  line-break: strict;
  overflow-x: hidden;   /* 横からのスライド演出が横スクロールを生まないように */
}

a { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.exlink {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  word-break: break-all;
}
.exlink:hover { text-decoration-thickness: 2px; }

strong { font-weight: 700; color: var(--ink); }

/* ============ セクションの帯 ============ */
.sec { padding: 4rem 1.1rem; }
.sec--band { background: var(--band); }
.sec--price {
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
}
.inner { max-width: 46rem; margin: 0 auto; }
.inner--narrow { max-width: 42rem; }

/* セクション見出し：大きく・中央・明朝＋短い緑の線 */
.sec h2 {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: 0.05em;
  font-size: clamp(1.5rem, 4.8vw, 2.1rem);
  line-height: 1.55;
  color: var(--ink);
  text-align: center;
  margin: 0 0 2.4rem;
  padding: 0;
  text-wrap: balance;
}
.sec h2::after {
  content: "";
  display: block;
  width: 2.8rem;
  height: 4px;
  background: var(--accent);
  margin: 0.9rem auto 0;
  border-radius: 2px;
}
.sec--price h2 { color: #fff; }
.sec--price h2::after { background: rgba(255, 255, 255, 0.75); }

.sec p { margin: 1.15rem 0; }
.sec ul, .sec ol { margin: 1.15rem 0; padding-left: 1.5rem; }
.sec li { margin: 0.5rem 0; }
.sec ul li::marker { color: var(--accent); }

.lead-big { font-size: 1.06rem; }

/* ============ ヒーロー ============
   ファーストビューの背景には、いろはさん制作の絵（文字なし・hero-bg.png）を
   横幅いっぱいに敷く予定（A案・2026-08-23決定）。文字はこのままHTML。
   画像が届いたら .hero の background にグラデーションと重ねて指定する。例：
     background: linear-gradient(180deg, rgba(227,239,232,.65), rgba(251,250,246,.92)),
                 url("images/hero-bg.png") center / cover no-repeat; */
.hero {
  /* 背景＝いろはさん制作「立ち上がる街」（2026-08-24確定・原本は 図解/完成/ に保管）。
     「下端ぞろえ（center bottom）」が大事＝どの画面幅でも下端の街並みが必ず見える */
  background:
    linear-gradient(180deg, rgba(227, 239, 232, 0.4) 0%, rgba(251, 250, 246, 0) 45%),
    url("images/hero-bg.jpg") center bottom / cover no-repeat,
    linear-gradient(180deg, #e3efe8 0%, var(--bg) 100%);
  padding: 4rem 1.1rem 3.8rem;
  text-align: center;
}
.hero__grid {
  max-width: 58rem;
  margin: 0 auto;
}
.hero__title {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: 0.03em;
  font-size: clamp(2rem, 7.6vw, 3.7rem);
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 3.4rem;   /* 「ホームページ編」の下の余白 */
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line__in { display: block; }
.hero__title-sub {
  font-size: 0.5em;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-top: 0.25em;
}
.hero__catch {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.02rem, 3.2vw, 1.35rem);
  line-height: 1.9;
  color: var(--fg);
}
.hero__catch .accent { color: var(--accent); }
/* チェックの3つ：広い画面では横1列、入りきらない幅では3つ縦積み。
   「1つ＋2つ」のような中途半端な折り返しにはしない（2026-08-23ほのきさん指示） */
.hero__chips {
  list-style: none;
  margin: 3.4rem 0 0;   /* 「公開できます」の下の余白 */
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
@media (min-width: 1000px) {
  .hero__chips {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
  }
}
@media (max-width: 380px) {
  .hero__chips li { font-size: 0.82rem; padding: 0.35rem 0.9rem; }
}
.hero__chips li {
  background: var(--panel);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 0.4rem 1.15rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  box-shadow: var(--shadow);
}
.hero__chips li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 700;
  margin-right: 0.45em;
}
.hero__cta { margin: 5rem 0 0; }   /* 申込ボタンはチェック3つからしっかり離す */

@media (min-width: 900px) {
  .hero { padding: 5.4rem 1.5rem 5rem; }
}

/* ============ ボタン ============ */
.cta-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.4;
  padding: 1.05rem 3.4rem;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, var(--pop-2) 0%, var(--pop) 100%);
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(251, 140, 0, 0.35);
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}
.cta-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 34px rgba(251, 140, 0, 0.45);
}
.cta-btn--pending { cursor: default; }
.cta-note {
  margin: 0.7rem 0 0;
  text-align: center;
  font-size: 0.84rem;
  color: var(--fg-soft);
}
.hero .cta-note { text-align: inherit; }
.sec--price .cta-note { color: rgba(255, 255, 255, 0.85); }
.cta-center { text-align: center; }

/* ============ カードいろいろ ============ */
.whitecard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--shadow);
}

/* こんな方へ（チェックの箱） */
.checks { list-style: none; margin: 0; padding: 0; }
.checks li {
  margin: 0;
  padding: 0.8rem 0 0.8rem 2.2rem;
  border-bottom: 1px dashed var(--line);
  position: relative;
  font-size: 1.02rem;
}
.checks li:last-child { border-bottom: 0; }
.checks li::before {
  content: "✓";
  position: absolute;
  left: 0.2rem;
  color: var(--accent);
  font-weight: 700;
  font-size: 1.1rem;
}

/* 作るもの3枚（横から入ってくるカード） */
.cards3 {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.cards3 li {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--sun-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow 0.3s var(--ease-out-expo), border-color 0.3s var(--ease-out-expo);
}
.cards3__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.1rem;
  background: var(--sun-weak);
  border-bottom: 1px solid var(--sun-line);
}
.cards3 .no {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--sun);
  color: var(--sun-ink);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1;
}
.cards3 strong { font-size: 1.02rem; line-height: 1.6; }
.cards3 .sub {
  display: block;
  padding: 0.9rem 1.2rem 1rem;
  font-size: 0.92rem;
  color: var(--fg-soft);
  line-height: 1.8;
}

/* ブラウザ風の枠（完成例・試し読み） */
.browser {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin: 1.6rem 0;
  transition: box-shadow 0.3s var(--ease-out-expo);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.9rem;
  background: #f0efe9;
  border-bottom: 1px solid var(--line);
}
.browser__bar span { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: #d8d3c7; }
.browser__body { padding: 1.4rem 1.6rem 1.5rem; }
.browser__body > :first-child { margin-top: 0; }
.browser__body > :last-child { margin-bottom: 0; }
.browser__link { display: inline-block; font-weight: 700; }

/* サイト紹介ブロック：枠の中に実際のページのスクリーンショット */
.browser__thumb {
  display: block;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.browser__thumb img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.8s var(--ease-out-expo);
}
@media (hover: hover) {
  .browser:hover .browser__thumb img { transform: scale(1.04); }
}

/* ページを開くボタン（申込ボタンと区別がつく縁取り型） */
.link-btn {
  display: inline-block;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.75rem 2rem;
  border: 2px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-dark);
  background: var(--panel);
  text-decoration: none;
  transition: background 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo);
}
.link-btn::after { content: "\00a0↗"; }
.link-btn:hover { background: var(--accent-weak); transform: translateY(-2px); }

/* ============ 表 ============ */
.table-wrap {
  margin: 1.6rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.table-wrap table { border-collapse: collapse; width: 100%; min-width: 22rem; font-size: 0.94rem; }
.table-wrap table.cols-3 { min-width: 30rem; }
.table-wrap th, .table-wrap td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.table-wrap th {
  background: var(--accent-weak);
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}
.table-wrap tbody tr:last-child td { border-bottom: 0; }

/* ============ 特典の札 ============ */
.tokuten { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.tokuten li {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow 0.3s var(--ease-out-expo);
}
.tokuten .fuda {
  display: block;
  padding: 0.65rem 1.3rem;
  background: var(--pop-weak);
  border-bottom: 1px solid var(--pop-line);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
}
.tokuten .fuda::before {
  content: "特典";
  display: inline-block;
  font-size: 0.78rem;
  line-height: 1.6;
  padding: 0 0.55rem;
  margin-right: 0.6rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--pop-2) 0%, var(--pop) 100%);
  color: #fff;
  vertical-align: 0.08em;
}
.tokuten .body { display: block; padding: 0.85rem 1.3rem 1rem; font-size: 0.96rem; }

/* ============ 価格の帯 ============ */
.nb { white-space: nowrap; }   /* 「1,980円（税込）」の途中で折り返さないための包み */

/* クレヨン風の下線（価格の「1,980円（税込）」用。2026-08-23ほのきさん指示）
   文字色は変えず、文字の下にガタガタした縁のクレヨンの線だけを引く */
.marker {
  position: relative;
  z-index: 0;
}
.marker::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.02em;
  height: 0.18em;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C12 3 22 10 32 6 C42 3 52 10 62 6 C72 3 82 9 92 6 C102 4 112 10 122 6 C132 3 142 9 152 6 C162 4 172 10 182 6 C192 3 202 9 212 6 C222 4 232 10 242 6 C252 3 262 9 272 6 C282 4 290 8 298 6 L298 11 C288 14 278 10 268 12 C258 14 248 11 238 12 C228 14 218 10 208 12 C198 14 188 11 178 12 C168 14 158 10 148 12 C138 14 128 11 118 12 C108 14 98 10 88 12 C78 14 68 11 58 12 C48 14 38 10 28 12 C18 13 10 12 2 12 Z' fill='%23ffe94d' opacity='0.95'/%3E%3Cpath d='M8 8 C50 6 100 9 150 7 C200 5 250 9 294 8 L293 10 C250 12 190 9 140 11 C90 13 40 10 9 10 Z' fill='%23ffd94d' opacity='0.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* 線は、金額が現れたあとに左からすっと引かれる */
html.js:not(.motion-off) .price-big .marker::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease-out-expo) 0.75s;
}
html.js:not(.motion-off) .price-big.is-visible .marker::before {
  transform: scaleX(1);
}
.price-big {
  text-align: center;
  margin: 0 0 1.6rem;   /* 金額とハンコの間の余白（クレヨン線の逃げ場も兼ねる） */
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2rem, 7vw, 3.1rem);
  line-height: 1.4;
  color: #fff;
  letter-spacing: 0.02em;
}
.price-cap {
  text-align: center;
  margin: 0 0 2.6rem;   /* ハンコと説明文の間の余白 */
}
.price-cap .stamp {
  display: inline-block;
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 0.25rem 1.4rem;
}
.sec--price p { color: rgba(255, 255, 255, 0.94); text-align: center; }   /* 価格の帯の中は文章も中央ぞろえ */
.sec--price .cta-center { margin-top: 3rem; }   /* 説明文とボタンの間の余白 */
.sec--price .pay-note { font-size: 0.88rem; color: rgba(255, 255, 255, 0.85); }

/* ============ ✕の箇条書き ============ */
.ngs { list-style: none; margin: 0; padding: 0; }
.ngs li {
  margin: 0;
  padding: 0.8rem 0 0.8rem 2.2rem;
  border-bottom: 1px dashed var(--line);
  position: relative;
}
.ngs li:last-child { border-bottom: 0; }
.ngs li::before {
  content: "✕";
  position: absolute;
  left: 0.2rem;
  color: var(--fg-soft);
  font-weight: 700;
}

/* ============ 購入の流れ ============ */
.steps { list-style: none; margin: 0 0 0.5rem; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  margin: 0 0 1rem;
  padding: 1.05rem 1.3rem 1.05rem 3.8rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow 0.3s var(--ease-out-expo);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============ よくある質問 ============ */
.faq { margin: 0; }
.faq dt {
  margin: 1rem 0 0;
  padding: 0.9rem 1.3rem;
  background: var(--accent-weak);
  border: 1px solid var(--accent-line);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
}
.faq dd {
  margin: 0;
  padding: 0.85rem 1.3rem 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 0.97rem;
}

/* ============ 下のリンク ============ */
.foot {
  margin: 0;
  padding: 2.2rem 1.1rem 2.6rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.9rem;
}
.foot p { margin: 0.3rem 0; }
.foot .name { color: var(--fg-soft); font-size: 0.82rem; }

/* ============ ホバー（マウス環境だけ） ============ */
@media (hover: hover) {
  .cards3 li:hover, .tokuten li:hover, .browser:hover, .steps li:hover {
    box-shadow: var(--shadow-hover);
  }
  .cards3 li:hover { border-color: var(--sun-deep); }
}

/* ============ 動き（スクロールで現れる） ============
   JSが動く環境（html.js）だけ隠す。動きを止めた人（html.motion-off）と
   JSなし環境では、すべて最初から表示される。 */
html.js:not(.motion-off) :where([data-reveal]) {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 2s var(--ease-out-expo), transform 2s var(--ease-out-expo);
  transition-delay: var(--rd, 0s);
}
html.js:not(.motion-off) :where([data-reveal="left"])  { transform: translateX(-52px); }
html.js:not(.motion-off) :where([data-reveal="right"]) { transform: translateX(52px); }
html.js:not(.motion-off) :where([data-reveal="zoom"])  { transform: scale(0.86); }
html.js:not(.motion-off) :where([data-reveal="stamp"]) {
  transform: scale(1.7) rotate(-6deg);
  transition: opacity 1s var(--ease-back), transform 1s var(--ease-back);
  transition-delay: var(--rd, 0s);
}
html.js:not(.motion-off) :where([data-reveal].is-visible) {
  opacity: 1;
  transform: none;
}

/* 「価格について」の帯だけ、きびきびした速さ（2026-08-23ほのきさん指示） */
html.js:not(.motion-off) .fastzone :where([data-reveal]) { transition-duration: 0.8s; }
html.js:not(.motion-off) .fastzone :where([data-reveal="stamp"]) { transition-duration: 0.45s; }

/* 箱の中のチェック・✕は、箱が現れてから1つずつ */
html.js:not(.motion-off) :where([data-reveal]) .checks li,
html.js:not(.motion-off) :where([data-reveal]) .ngs li {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 1.4s var(--ease-out-expo), transform 1.4s var(--ease-out-expo);
}
html.js:not(.motion-off) :where([data-reveal].is-visible) .checks li,
html.js:not(.motion-off) :where([data-reveal].is-visible) .ngs li {
  opacity: 1;
  transform: none;
}
html.js:not(.motion-off) [data-reveal].is-visible li:nth-child(1) { transition-delay: 0.4s; }
html.js:not(.motion-off) [data-reveal].is-visible li:nth-child(2) { transition-delay: 0.8s; }
html.js:not(.motion-off) [data-reveal].is-visible li:nth-child(3) { transition-delay: 1.2s; }
html.js:not(.motion-off) [data-reveal].is-visible li:nth-child(4) { transition-delay: 1.6s; }
html.js:not(.motion-off) [data-reveal].is-visible li:nth-child(5) { transition-delay: 2s; }
html.js:not(.motion-off) [data-reveal].is-visible li:nth-child(6) { transition-delay: 2.4s; }

/* ============ ヒーローの開演（読み込み直後に順番に出る） ============ */
html.js:not(.motion-off) .hero .lo { opacity: 0; }
/* ヒーローの開演は、きびきびした速さに戻す（2026-08-23ほのきさん指示。ページ中盤のゆっくりは維持） */
html.js:not(.motion-off) .hero__title .line__in {
  transform: translateY(115%);
  transition: transform 0.9s var(--ease-out-expo);
}
html.js:not(.motion-off).is-loaded .hero__title .line__in { transform: none; }
html.js:not(.motion-off).is-loaded .hero__title .lt-1 { transition-delay: 0.15s; }
html.js:not(.motion-off).is-loaded .hero__title .lt-2 { transition-delay: 0.3s; }

@keyframes heroUp   { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes heroPop  { from { opacity: 0; transform: scale(0.6); }       to { opacity: 1; transform: none; } }
@keyframes heroFade { from { opacity: 0; transform: scale(1.04); }      to { opacity: 1; transform: none; } }
html.js:not(.motion-off).is-loaded .lo-catch { animation: heroUp  0.9s var(--ease-out-expo) 0.55s forwards; }
html.js:not(.motion-off).is-loaded .lo-c1    { animation: heroPop 0.5s var(--ease-back)     0.8s  forwards; }
html.js:not(.motion-off).is-loaded .lo-c2    { animation: heroPop 0.5s var(--ease-back)     0.95s forwards; }
html.js:not(.motion-off).is-loaded .lo-c3    { animation: heroPop 0.5s var(--ease-back)     1.1s  forwards; }
html.js:not(.motion-off).is-loaded .lo-cta   { animation: heroUp  0.8s var(--ease-out-expo) 1.3s  forwards; }

/* ============ 動きを止めるボタン（「視差効果を減らす」設定の方にだけ出す） ============ */
.motion-toggle {
  position: fixed;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 50;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: var(--panel);
  color: var(--accent-dark);
  cursor: pointer;
  box-shadow: var(--shadow);
}

/* ============ 特商法ページ（文書スタイル） ============ */
.page { max-width: 42rem; margin: 0 auto; padding: 3rem 1.1rem 4rem; }
.doc p { margin: 1.15rem 0; }
.tokusho-title {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 1.5rem;
  line-height: 1.55;
  margin: 0 0 2rem;
  padding-bottom: 0.9rem;
  border-bottom: 3px solid var(--accent);
  color: var(--ink);
}
.tokusho th { min-width: 9.5rem; }
.doc .foot { border-top: 1px solid var(--line); padding: 1.5rem 0 0; margin-top: 3rem; }

/* ============ 画面が広いとき ============ */
@media (min-width: 768px) {
  body { font-size: 18px; }
  .sec { padding: 5rem 1.5rem; }
  .cards3 { grid-template-columns: repeat(3, 1fr); }
}

/* ============ ご質問・お問い合わせ（2026-08-26追加） ============ */
.contact-card { text-align: center; }
.contact-btns {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin: 1.2rem 0 0.9rem;
}
.contact-mail { font-size: 0.88rem; opacity: 0.75; margin: 0; }
.contact-note { font-size: 0.88rem; opacity: 0.75; margin: 0.2rem 0 0; }

/* ページ内リンク（ヒーローのボタン→価格）を、すーっと移動させる */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.copyright { font-size: 0.82rem; opacity: 0.7; margin-top: 0.4rem; }