/* 規約型固定ページ（利用規約・個人情報保護方針・運営会社 11-static §3・§4）と、はじめての方へ（§1・§2）。 */
/* SP の左右は 20（11 §3 SP pad 20・幅 335。全体の --jn-gutter 16 は変えない。pixel-triage A19） */
.p-static { padding: 40px 20px; }
@media (min-width: 768px) { .p-static { padding-inline: var(--jn-gutter, 20px); } }
/* 利用規約 PC だけ Figma の見出し上端が 7 低い（個人情報方針は一致。pp3 B-2） */
@media (min-width: 768px) { .p-static.p-static--terms { padding-top: 87px; } }
.p-static__inner { max-width: 700px; margin-inline: auto; }
/* ページ見出し（部品「点線下線見出し」: N 700 20/28 ls1.0 navy ＋下線 2px secondary の破線 4/4。Figma 書き出し実測 #34BFBD 2px 4px 間隔。SP 18/25.2） */
.p-static__title {
  margin: 0 0 39px;             /* 下線→本文の文字上端 46（Figma 225:79698 / 225:79751 の描画実測。40 だと 47） */
  padding-bottom: 8px;          /* 線は背景で下端に引く。Figma SP の描画で文字上端→線 27（10 だと 29） */
  background: linear-gradient(90deg, var(--jn-color-secondary) 25%, transparent 25% 75%, var(--jn-color-secondary) 75%) left bottom / 8px 2px round no-repeat; /* 両端を半ダッシュにして周期を幅に合わせる（Figma 描画の実測: 1440 一覧 160–161…1278–1279、規約 PC 370–371…1068–1069） */
  color: var(--jn-color-navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) { .p-static__title { padding-bottom: 9px; font-size: 20px; } } /* PC は文字上端→線 30（描画実測） */

/* 本文 .c-prose と Q&A は components.css */
/* 番号付きリストの項目間 22（Figma SP・PC とも行頭差 43〜44。pp4 E3-3。以前の 20 は 1 か所の実測で、累積で CONTACT 帯が 8〜17px 上がっていた） */
.p-static .c-prose li + li { margin-top: 22px; }
/* 個人情報 節 1 の一覧の後の段落（制定・会社名・問い合わせ先）は Figma SP・PC とも行頭差 44＝段落間 22（ほかの段落は 16）。Figma どおり（ユーザー決定 9/30、pp4 E3-2・E4 #1） */
.p-static .c-prose ol + p,
.p-static .c-prose ol + p + p,
.p-static .c-prose ol + p + p + p { margin-top: 22px; }

/* ---------- はじめての方へ ---------- */
.p-guide__inner { max-width: 1120px; margin-inline: auto; }
.p-guide__narrow { max-width: 700px; margin-inline: auto; }
.p-guide .c-heading { margin-bottom: 28px; }
.p-guide-intro {
  padding: 60px 16px;
  /* 霞（SP `232:65764` 161×67・`232:65765` 173×72・`232:65812` 12×12、#FF5D9B。Figma 375×583 の位置を右上・左下基準で置く） */
  background:
    url("../img/deco-kasumi-pink-sp-1.svg") right -35px top 18px / 161px 67px no-repeat,
    url("../img/deco-kasumi-pink-sp-dot.svg") right 131px top 18px / 12px 12px no-repeat,
    url("../img/deco-kasumi-pink-sp-2.svg") left -58px bottom 39px / 173px 72px no-repeat,
    var(--jn-color-primary);
}
.p-guide-intro__card {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 1120px;
  margin-inline: auto;
  padding: 40px 20px 60px;
  background: var(--jn-color-white);
  border-radius: 20px;
}
.p-guide-intro__title { display: flex; flex-direction: column; align-items: center; gap: 16px; width: fit-content; max-width: 100%; margin: 0 auto; text-align: center; }
/* 見出し＝丸帯＋点線＋サブ（Figma PC `232:64461` 76+16+線0+16+51=159 / SP `232:65767` 40+10+線0+16+29=95） */
/* 丸帯はインタビュー導入の丸帯（page-interview.css .p-iv-intro__badge）と同じ値（11 §1.1「10 §2.1 と同型」。PC 388 幅＝イラスト 44＋gap 20＋文字＋pad 39、SP 223×40。pixel-triage A13・A16） */
.p-guide-intro__badge {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 16px;
  background: var(--jn-color-white); /* Figma 地 #FFFFFF（白カード上） */
  border-radius: var(--jn-radius-pill);
  color: var(--jn-color-navy);
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
/* 招き猫（PC `232:64464` 44×60 / SP `232:65770` 31×40。guide-maneki.svg） */
.p-guide-intro__illust { display: block; flex: none; width: 31px; height: 40px; }
/* 点線（`232:64500` / SP `232:65806`: #34BFBD 2px 破線 4/4、丸帯と同じ幅）。線 2px を上下 -1 で吸収し、SP は丸帯→線 10 */
.p-guide-intro__title::after { content: ""; order: 1; align-self: stretch; height: 2px; margin: -7px 0 -1px; background: linear-gradient(90deg, var(--jn-color-secondary) 50%, transparent 50%) left center / 8px 2px repeat-x; }
/* SP のサブ 18px・リード #0387A8 は Figma SP どおり（ユーザー決定 9/30「とにかく Figma 通り」。以前は読みやすさのため 19px・navy にしていた） */
.p-guide-intro__sub { order: 2; color: var(--jn-color-contact); font-size: 18px; font-weight: 700; line-height: 1.6; letter-spacing: 0.05em; }
.p-guide-intro__lead { margin: 0; color: var(--jn-color-contact); font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: 0.05em; text-align: center; }
.p-guide-intro__lead, .p-guide-intro__text { text-wrap: pretty; }
.p-guide-intro__text { margin: 0; color: var(--jn-color-navy); font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: 0.05em; }
.p-guide-intro br, .p-guide-merit__item br { display: none; }
/* SP 本文 2 段落の間 20（`232:65809` V gap20。カード gap 28 から −8） */
.p-guide-intro__lead + .p-guide-intro__text { margin-top: -8px; }
@media (max-width: 767px) { .p-guide-intro__lead, .p-guide-intro__text { line-height: 22px; } } /* SP の行送りは Figma 22（232:65726 の描画で導入文 324/346/368/391・本文 432/453/476/497/520 が一致。22.2 だと以降の手順の帯などが 2 下がる） */

.p-guide-merit { padding: 40px 20px; background: #fafafa; }
.p-guide-merit__body { display: flex; flex-direction: column; gap: 20px; }
.p-guide-merit__media { aspect-ratio: 492 / 309; overflow: hidden; background: var(--jn-color-primary-soft); border-radius: 20px; }
.p-guide-merit__img { width: 100%; height: 100%; object-fit: cover; }
.p-guide-merit__list { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; }
/* SP も PC と同じ 18/500・字間 0.1em・行送り 28.8（Figma SP 232:65726 の重ねで 16/700 を否定。pp2 content2 #6） */
.p-guide-merit__item { display: flex; align-items: flex-start; gap: 12px; color: var(--jn-color-navy); font-size: 18px; font-weight: 500; line-height: 28.8px; letter-spacing: 0.1em; }
.p-guide-merit__check { flex: none; width: 32px; height: 32px; color: var(--jn-color-primary); } /* Figma はピンクの丸チェック（pixel-b2 #8） */

.p-guide-steps { padding: 40px 20px; }
.p-guide-steps__list { display: flex; flex-direction: column; gap: 48px; margin: 0; padding: 0; list-style: none; }
.p-guide-step { position: relative; overflow: visible; background: #fafafa; border-radius: 4px; }
.p-guide-step + .p-guide-step::before {
  /* カード間の下向き矢印（SP `232:65828`、PC は間隔からの推定） */
  content: "";
  position: absolute;
  top: -36px;
  left: 50%;
  width: 16px;
  height: 16px;
  border-right: 4px solid var(--jn-color-contact); /* Figma は濃い teal #0387A8（描画実測。帯の #34BFBD ではない） */
  border-bottom: 4px solid var(--jn-color-contact);
  border-radius: 2px;
  transform: translateX(-50%) rotate(45deg);
}
.p-guide-step__band { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--jn-color-secondary); border-radius: 4px 4px 0 0; }
.p-guide-step__num {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--jn-color-white);
  border-radius: 999px;
  color: var(--jn-color-navy);
  font-family: var(--jn-font-latin);
  font-size: 14px;
  font-weight: 700;
}
.p-guide-step__name { margin: 0; color: var(--jn-color-white); font-size: 16px; font-weight: 700; line-height: 1.6; letter-spacing: 0.05em; }
/* Figma SP は手順 02・06 の見出しだけ 4px 右（ほかは x81）。Figma どおり（ユーザー決定 9/30、pp4 E5-1） */
@media (max-width: 767px) { .p-guide-step:nth-child(2) .p-guide-step__name, .p-guide-step:nth-child(6) .p-guide-step__name { padding-left: 4px; } }
@media (max-width: 767px) { .p-guide-step__name { line-height: 26px; } } /* 2 行の手順名（05）の帯高 76（Figma 232:65726 の描画 2267–2343）。1.6（25.6）だと 75 */
.p-guide-step__text { margin: 0; padding: 16px 20px; color: var(--jn-color-text-strong); font-size: 14px; font-weight: 500; line-height: 22px; letter-spacing: 0.05em; } /* 行送り 22（Figma の描画実測。22.4 だとカードごとに 1px ずつずれる。pp2 content2 #3） */
.p-guide-step__link { color: #0387A8; text-decoration: underline; text-underline-offset: 2px; } /* 手順 01 の「こちら」（先方指示 10/1。色は導入文の #0387A8） */
.p-guide-step__link:hover { text-decoration: none; }

.p-guide-faq { padding: 40px 20px 80px; }
.p-guide-faq__list { display: flex; flex-direction: column; gap: 27px; } /* SP の項目間は 27（Figma SP 232:65726 の Q. 上端の間隔を 7 項目で実測、30 だと毎回 +3。PC 40） */
/* 見出し→中身は SP も 40（メリット・使いかた・よくある質問。pp2 content2 #7） */
.p-guide-merit .c-heading, .p-guide-steps .c-heading, .p-guide-faq .c-heading { margin-bottom: 40px; }
/* SP の見出し幅は Figma 232:65726 の点線でメリット・使い方 x16〜358、よくある質問 x36〜338（本文 20〜355 とは別。pixel-D D3・D4） */
@media (max-width: 767px) {
  .p-guide-merit .c-heading, .p-guide-steps .c-heading { width: auto; margin-inline: -4px -3px; }
  .p-guide-faq .c-heading { width: auto; margin-inline: 16px 17px; }
  /* Figma SP の描画: 見出しの字上端→破線が 2 長く（破線 1434–1435 / 3455–3456）、破線→手順 01 の帯 1475 */
  .p-guide-steps .c-heading, .p-guide-faq .c-heading { padding-bottom: 10px; margin-bottom: 39px; }
  .p-guide-faq { padding-top: 39px; } /* 手順カード下端 3343 → よくある質問の字上端 3427（Figma）。40 だと 3428 */
}
/* 問いは SP も 18（「Q.」20）。Figma SP 232:65855（pp2 content2 #8） */
.p-guide-faq .c-qa .q { font-size: 18px; }
.p-guide-faq .c-qa .q::before { font-size: 20px; }
/* 答えは base.css の word-break: keep-all だと句読点・括弧でしか折れず 1 行目が短くなる。Figma どおり幅いっぱいで折る（インタビュー .p-iv-qa__text と同じ。pp content M5） */
.p-guide-faq .a { word-break: normal; line-break: strict; text-wrap: pretty; } /* 最終行の 1 字落ち（415 で「す」だけ）を防ぐ（14 幅点検） */
.p-guide__extra { margin-top: 40px; }
/* SP のよくある質問は左右の端に霞がのぞく（Figma SP `232:65726` 節上端 3385 から）。インタビュー SP と同じく同じ絵 0.92 倍の近似（page-interview.css） */
@media (max-width: 767px) {
  .p-guide-faq { position: relative; overflow: clip; }
  .p-guide-faq > .p-guide__narrow { position: relative; z-index: 1; }
  .p-guide-faq::before,
  .p-guide-faq::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 308px;
    background: url("../img/deco-kasumi-teal.svg") 0 -130px / 308px 902px repeat-y;
    pointer-events: none;
  }
  .p-guide-faq::before { left: -178px; }
  .p-guide-faq::after { right: -160px; background-position-y: -240px; }
  /* 使い方の節もカードの裏に霞（Figma SP 節上端 1362 から。端の帯の縦位置を相関で合わせた位相 左 −251・右 −23。pixel-D D2） */
  .p-guide-steps { position: relative; overflow: clip; }
  .p-guide-steps > * { position: relative; z-index: 1; }
  .p-guide-steps::before,
  .p-guide-steps::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 308px;
    background: url("../img/deco-kasumi-teal.svg") 0 -251px / 308px 902px repeat-y;
    pointer-events: none;
  }
  .p-guide-steps::before { left: -178px; }
  .p-guide-steps::after { right: -160px; background-position-y: -23px; }
}

@media (min-width: 768px) {
  .p-static { padding-block: 80px; }
  /* 規約型の節見出しは 37 高（11 §3 PC 18/25.2＋1px 線。pad 8→11。pixel-triage A18） */
  .p-static .c-prose h2 { padding-bottom: 11px; }
  /* 導入の地は SP と同じ primary（インタビュー導入と同型。pixel-triage A12） */
  .p-guide-intro { padding: 100px var(--jn-gutter); background: url("../img/deco-kasumi-pink-l.svg") left -177.5px top 0 / 422px 1034px no-repeat, url("../img/deco-kasumi-pink-c.svg") calc(50% - 27px) 0 / 949px 1034px no-repeat, url("../img/deco-kasumi-pink-r.svg") right -177.5px top 0 / 451px 1034px no-repeat, var(--jn-color-primary); /* 霞（PC `232:64434` 1445×1034）を左端・中央・右端の 3 群で置く。1440 では元と同じ位置、広い画面でも枠の切り口を見せない（先方指摘 TOP⑦ の横展開） */ }
  /* 768 付近で 100 固定だと語の途中で折れるので、1024 以上で 100 に届くよう伸ばす（UX r3 M1） */
  .p-guide-intro__card { padding: 40px clamp(24px, calc((100vw - 768px) * 0.45 + 24px), 100px) 60px; }
  .p-guide-intro__badge { height: 76px; padding: 8px 39px; font-size: 32px; line-height: 51.2px; }
  .p-guide-intro__badge { gap: 20px; }
  .p-guide-intro__illust { width: 44px; height: 60px; }
  .p-guide-intro__title::after { margin: -1px 0; }  /* PC: 丸帯→線→サブ 16/16 */
  .p-guide-intro__lead + .p-guide-intro__text { margin-top: 0; } /* PC 本文 gap 28 */
  .p-guide-intro__sub { font-size: 32px; }
  .p-guide-intro__lead, .p-guide-intro__text { color: var(--jn-color-navy); font-size: 18px; text-align: center; }
  .p-guide-intro br, .p-guide-merit__item br { display: inline; }
  .p-guide-merit, .p-guide-steps { padding: 80px var(--jn-gutter); }
  .p-guide-faq { padding: 80px var(--jn-gutter); }
  /* 使い方〜よくある質問の白地の左右端に霞（Figma PC `232:64424` y1447〜4451。インタビュー Q&A と同じ絵・同じ 980 周期・同じ x で IoU 0.96）。
     使い方の上端から 1 本で敷き、よくある質問の下端（.p-guide の下端）で切る。本文の下に置く */
  .p-guide { overflow: clip; }
  .p-guide-steps { position: relative; }
  .p-guide-steps > *, .p-guide-faq > * { position: relative; z-index: 1; }
  .p-guide-steps::before,
  .p-guide-steps::after {
    content: "";
    position: absolute;
    top: 80px; /* 見出しの横から始める（先方指示 10/1。上の節に接して始まっていた） */
    height: 8000px;
    width: 335px;
    background: url("../img/deco-kasumi-teal.svg") 0 0 / 335px 980px repeat-y;
    pointer-events: none;
  }
  /* 横は 1440 の見え幅（左 231・右 256）を狭い幅でも保ち、本文の列（700）の 20 手前で止める（先方指示 10/1。1280 で左 151 しか見えなかった） */
  .p-guide-steps::before { left: calc(min(231px, 50% - 370px) - 335px); }
  .p-guide-steps::after { left: max(calc(100% - 256px), calc(50% + 370px)); }
  .p-guide-merit__body { flex-direction: row; align-items: center; gap: 40px; }
  .p-guide-merit__media { flex: 0 0 492px; }
  .p-guide-merit__list { gap: 28px; padding-block: 20px; }
  .p-guide-faq__list { gap: 40px; }
  .p-guide-step__band { padding: 16px 28px; }
  .p-guide-step__num { width: 32px; height: 32px; font-size: 16px; }
  .p-guide-step__name { font-size: 18px; }
  .p-guide-step__text { padding: 0 20px 16px 28px; } /* 右 20: 28 だと 09 の本文 44 字が 2 行に折れ、以降が +21 下がる（Figma は 1 行。pixel-B2 B2-2） */
  .p-guide-faq .c-qa .a { padding-right: 20px; line-height: 22px; } /* 折り返し位置と行送り 22 を Figma に合わせる（pixel-B2 B2-3・B2-4） */
  .p-guide-step__band + .p-guide-step__text { padding-top: 16px; }
}