/* 配色は docs/デザイントークン.md（確定値）。ここ以外に色を直書きしない。 */
:root {
  --peri: #b2b5dd;
  --peri-deep: #6f74bd;
  --peri-face: #eaebf8;
  --rose: #dda6b8;
  --rose-deep: #bd7a90;
  --rose-face: #f8e9ee;
  --rose-text: #ad6b80;
  --ground: #fdfcfd;
  --ink: #575360;
  --ink-soft: #96919e;
  --rule: #dcdcea;
  --warn: #c76d86;

  --card-shadow: 0 4px 20px rgba(178, 181, 221, .2);
  --btn-shadow: 0 6px 14px -4px rgba(111, 116, 189, .6);

  --round: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --body: "Hiragino Maru Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  /* 見出しはロゴタイプと同じ Kiwi Maru。Klee One（鉛筆の楷書）はロゴの丸みに対して
     硬く、大人びて見えたため差し替えた。本文には使わない（長文の可読性が落ちる） */
  --hand: "Kiwi Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;

  /* 紙の濃さ。LPは濃く、規約・PPは薄く敷く */
  --paper: .95;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--ground); }

/* 紙は固定レイヤーとして敷く。タイルにすると継ぎ目が規則的に出るため、
   1枚を cover で置いて繰り返さない。background-attachment: fixed は
   iOS Safari で崩れるので、固定要素で代用する */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background: url("../img/paper.jpg") center / cover no-repeat;
  opacity: var(--paper);
  pointer-events: none;
}

body.doc-page { --paper: .45; }

body {
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.9;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--peri-deep); }

/* ---- レイアウト ---- */

.wrap { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 22px; }
.wrap-narrow { max-width: 620px; }

section { padding: 56px 0; }

.sec-title {
  font-family: var(--hand);
  font-weight: 500;
  font-size: 22px;
  color: var(--peri-deep);
  line-height: 1.6;
  margin-bottom: 8px;
}

.sec-lead {
  color: var(--ink-soft);
  font-size: 14px;
  margin-bottom: 28px;
}

.card {
  background: #fff;
  border-radius: 20px;
  padding: 26px 24px;
  box-shadow: var(--card-shadow);
}

/* LPだけ、枠を手で引いたように崩す。角丸を4隅バラバラにするのは脈タコと同じ手。
   規約・PPには当てない（読ませるページで枠が揺れると視線が散る） */
.lp .card {
  border: 2px solid var(--rule);
  border-radius: 26px 34px 24px 30px / 30px 24px 34px 26px;
  box-shadow: 0 4px 18px rgba(178, 181, 221, .14);
}

/* 地の紙を透かすため、面は不透明にしない */
.face { background: rgba(234, 235, 248, .62); }

/* ---- ヘッダ ---- */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: rgba(253, 252, 253, .92);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 10;
}
.site-header .wrap {
  display: flex; align-items: center; gap: 10px;
  height: 58px;
}
.site-header img { width: 32px; height: 32px; }
.site-header a {
  font-family: var(--hand);
  font-weight: 500; font-size: 15px;
  color: var(--peri-deep); text-decoration: none;
  line-height: 1.3;
}

/* ---- ヒーロー ---- */

.hero {
  background: url("../img/hero.jpg") center bottom / cover no-repeat;
  text-align: center;
  padding: 40px 0 72px;
}
.hero .tako { width: 250px; margin: 0 auto 4px; }
/* 見出しは確定したロゴタイプの画像。文字で組み直さない
   （正典: tools/character/canon/logo/） */
.hero h1 img { width: 300px; max-width: 82%; margin: 0 auto; }
.hero .sub {
  margin-top: 14px;
  font-size: 15px;
  line-height: 2;
}
.hero .sub strong { color: var(--peri-deep); font-weight: 800; }

/* ---- ボタン ---- */

.cta {
  display: inline-block;
  margin-top: 26px;
  background: var(--peri-deep);
  color: #fff;
  font-family: var(--round);
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  padding: 15px 40px;
  border-radius: 999px;
  box-shadow: var(--btn-shadow);
}
.cta.pending {
  background: var(--peri-face);
  color: var(--peri-deep);
  box-shadow: none;
  border: 2px solid var(--peri);
}
.cta-note { margin-top: 10px; font-size: 12px; color: var(--ink-soft); }

/* ---- 背骨のセクション ---- */

.spine {
  background: var(--peri-deep);
  color: #fff;
  text-align: center;
}
.spine .sec-title { color: #fff; }
.spine p { font-size: 15px; line-height: 2.1; }
.spine .quote {
  display: block;
  margin: 22px auto 0;
  max-width: 460px;
  background: rgba(255, 255, 255, .14);
  border: 1.5px solid rgba(255, 255, 255, .5);
  border-radius: 24px 32px 22px 30px / 30px 22px 32px 24px;
  padding: 22px 24px;
  font-family: var(--hand);
  font-weight: 500;
  font-size: 17px;
  line-height: 2;
}

/* ---- ステップ ---- */

.steps { display: flex; flex-direction: column; gap: 4px; }
.step { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; }
.step + .step { border-top: 1px dashed var(--rule); }
.step .cut { flex: none; width: 76px; margin-top: -4px; }
.step h3 {
  font-family: var(--hand); font-weight: 500;
  font-size: 17px; color: var(--peri-deep); line-height: 1.6;
}
.step h3 .no { color: var(--peri); margin-right: 6px; }
.step p { font-size: 14px; color: var(--ink-soft); }

/* 見出しの下に引く手描きの波線。生成画像にすると色を変えられないので
   SVG を data URI で持つ（.spine では白に差し替える） */
.lp .sec-title::after {
  content: "";
  display: block;
  width: 118px; height: 10px;
  margin-top: 6px;
  background: no-repeat left center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10'%3E%3Cpath d='M2 6C12 1 22 9 32 5s20-3 30 1 20 3 30-2 18-1 26 2' fill='none' stroke='%236f74bd' stroke-width='2' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
}
.lp .center .sec-title::after { margin-left: auto; margin-right: auto; }
.lp .spine .sec-title::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10'%3E%3Cpath d='M2 6C12 1 22 9 32 5s20-3 30 1 20 3 30-2 18-1 26 2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E");
}

/* ---- 見本カード（診断結果） ---- */

.sample { max-width: 380px; margin: 0 auto; }
.sample .cap {
  text-align: center; letter-spacing: .25em;
  font-size: 12px; color: var(--ink-soft); margin-bottom: 12px;
}
.sample .names {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--ink-soft);
}
.sample .nums {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--round); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sample .nums .a { color: var(--peri-deep); font-size: 30px; }
.sample .nums .b { color: var(--rose-deep); font-size: 44px; }
.sample .bar {
  height: 17px; border-radius: 999px; overflow: hidden; display: flex;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .07);
  margin: 10px 0 8px;
}
.sample .bar i { display: block; height: 100%; }
.sample .bar .a { background: var(--peri); width: 28%; }
.sample .bar .b { background: var(--rose); width: 72%; }
.sample .scale { text-align: center; font-size: 11px; color: var(--ink-soft); }
.sample .rlabel { font-size: 12px; color: var(--ink-soft); margin: 16px 0 7px; }
.sample .reason {
  background: var(--peri-face); border-radius: 12px;
  padding: 10px 13px; font-family: var(--round); font-weight: 800;
  font-size: 13.5px; margin-bottom: 7px;
}
.sample .locked { color: var(--ink-soft); font-weight: 400; font-size: 12.5px; }
.sample-note {
  max-width: 380px; margin: 14px auto 0;
  font-size: 12px; color: var(--ink-soft); text-align: center;
}

/* ---- 料金 ---- */

.price { text-align: center; }
.price .amount {
  font-family: var(--round); font-weight: 800;
  font-size: 40px; color: var(--peri-deep);
  font-variant-numeric: tabular-nums; line-height: 1.3;
}
.price .amount small { font-size: 16px; }
.price ul { list-style: none; margin-top: 18px; text-align: left; }
.price li {
  font-size: 14px; padding: 9px 0;
  border-bottom: 1px dashed var(--rule);
  display: flex; gap: 10px;
}
.price li:last-child { border-bottom: 0; }
.price li b { color: var(--peri-deep); flex: none; }

/* ---- プライバシー要約 ---- */

.priv { display: flex; flex-direction: column; gap: 10px; }
.priv div {
  border-radius: 14px; padding: 14px 16px; font-size: 14px;
}
.priv .yes { background: var(--peri-face); }
.priv .no { background: var(--rose-face); }
.priv b {
  display: block; font-family: var(--round); font-weight: 800;
  font-size: 12px; margin-bottom: 3px;
}
.priv .yes b { color: var(--peri-deep); }
.priv .no b { color: var(--rose-text); }

/* ---- FAQ ---- */

.faq details {
  border-bottom: 1px solid var(--rule);
  padding: 4px 0;
}
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--hand); font-weight: 500;
  font-size: 16px; color: var(--peri-deep);
  padding: 13px 28px 13px 0; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "＋"; position: absolute; right: 2px; top: 13px;
  color: var(--peri); font-weight: 800;
}
.faq details[open] summary::after { content: "－"; }
.faq p { font-size: 14px; color: var(--ink); padding: 0 0 16px; }

/* ---- 規約・ポリシー本文 ---- */

.doc-head { text-align: center; padding: 40px 0 8px; }
.doc-head img { width: 78px; margin: 0 auto 12px; }
.doc-head h1 {
  font-family: var(--hand); font-weight: 500;
  font-size: 23px; color: var(--peri-deep); line-height: 1.6;
}
.doc-head .meta { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }

.doc { padding-bottom: 20px; }
.doc h2 {
  font-family: var(--hand); font-weight: 500;
  font-size: 18px; color: var(--peri-deep);
  margin: 40px 0 14px; padding-left: 14px;
  border-left: 5px solid var(--peri);
  line-height: 1.6;
}
.doc h3 {
  font-family: var(--round); font-weight: 800;
  font-size: 14.5px; margin: 26px 0 8px;
}
.doc p { font-size: 14.5px; margin-bottom: 16px; }
.doc ul, .doc ol { margin: 0 0 18px 22px; }
.doc li { font-size: 14.5px; margin-bottom: 8px; }
.doc table {
  width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: 14px;
}
.doc th, .doc td {
  border: 1px solid var(--rule); padding: 10px 12px; text-align: left;
  vertical-align: top;
}
.doc th { background: var(--peri-face); color: var(--peri-deep); font-weight: 800; white-space: nowrap; }
.doc-cut { width: 96px; margin: 0 0 6px; }
.doc .note {
  background: var(--peri-face); border-radius: 14px;
  padding: 16px 18px; font-size: 14px; margin-bottom: 18px;
}
.doc .alert {
  background: var(--rose-face); border-radius: 14px;
  padding: 16px 18px; font-size: 14px; margin-bottom: 18px;
}
.doc .alert b { color: var(--rose-text); }
.table-scroll { overflow-x: auto; }

/* ---- フッタ ---- */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--peri-face);
  padding: 34px 0 40px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}
.site-footer nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 20px; margin-bottom: 16px;
}
.site-footer a { color: var(--peri-deep); text-decoration: none; font-weight: 800; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .copy { font-size: 12px; }

/* 折り返しを句の切れ目だけに限定する。
   <br> で改行位置を決め打ちすると狭い画面で孤立行が出るため、そちらは使わない */
.phrases > span { display: inline-block; }

@media (max-width: 480px) {
  .hero .tako { width: 210px; }
  section { padding: 44px 0; }
  .card { padding: 22px 18px; }
}

/* 使い方のカット（76px）を横に置いたままだと、320pxでは本文が
   150px弱しか残らず1行8〜9文字になる。この幅では縦に積む */
@media (max-width: 380px) {
  .step { flex-direction: column; gap: 8px; }
  .step .cut { width: 64px; margin-top: 0; }

  /* 320pxでは1行に入る字数が足りず、句の内側で折り返してしまう。
     .phrases は句の「間」しか制御できないので、字を詰めて句を収める */
  .hero .sub { font-size: 14px; }
  .spine .quote { font-size: 15px; padding: 18px 16px; }
}