/* LP layout uses the shared paper, ink, gold and lilac tokens. */

/* ホームの [data-scene]（章の演出）には頼らず、日本語の折り返しと字形だけをLPに合わせる。
   これが無いと <wbr> の切れ目が効かず、「お見積もり」などがWebKitで行の途中で割れる。 */
.lp-page main :is(.lead, h2, h3) { text-wrap: balance; word-break: auto-phrase; line-break: strict; }
.lp-page .display { font-feature-settings: "palt"; }
.lp-page main .bx, .lp-page .site-footer .bx { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.lp-page .price-card li.bx { display: block; }
.lp-page .price-card li.bx::before { margin-right: 10px; }
.lp-page .pricing-details { max-width: none; }
@media (max-width: 980px) { .lp-page .price-card { max-width: none; } }

.lp-hero {
  padding-block: clamp(112px, 12vw, 150px) 64px;
}
.lp-board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}
.lp-tile {
  min-width: 0;
}
.lp-board > .lp-tile {
  padding: clamp(20px, 2.6vw, 32px);
  border-radius: var(--radius);
}
.lp-tile--lead {
  grid-column: 1 / 8;
  grid-row: 1;
  background: var(--surface);
  border: 1px solid var(--line);
}
.lp-eyebrow {
  font-size: 13px;
}
/* H1の折れ目は、句ごとの保護（nb）と空白で決めている。WebKit は text-wrap: balance で行数を増やす（375pxで3行が4行になる）ので、均さない。 */
.lp-title {
  text-wrap: wrap;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.4;
  margin-block: 18px;
  letter-spacing: 0;
}
.lp-lead {
  font-size: 16px;
}
.lp-hero__cta {
  justify-content: flex-start;
  align-items: center;
  margin: 24px 0 0;
  width: 100%;
}
.lp-tile--free {
  grid-column: 1 / 6;
  grid-row: 2;
  color: var(--paper);
  background: var(--ink);
}
.lp-label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--gold-ink);
}
.lp-tile--free .lp-label {
  color: var(--gold-l);
}
/* 切り取り線: 点線＋はさみ。「ここまで無料／ここから有料」は文字で別に書くので、線は飾り（aria-hidden）。 */
.lp-cut {
  position: relative;
  border-top: 2px dotted var(--gold);
  margin-block: 24px;
  height: 1px;
}
.lp-cut::before {
  content: "\2702\FE0E";
  position: absolute;
  left: 14px;
  top: -.62em;
  padding-inline: 6px;
  background: var(--ink);
  color: var(--gold-l);
  font-size: 18px;
  line-height: 1;
}
.lp-tile--shot {
  grid-column: 8 / 13;
  grid-row: 1;
  background: var(--paper-2);
  align-content: center;
}
.lp-browser {
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.lp-browser__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  color: var(--gold-ink);
  background: var(--paper);
  font-size: 13px;
}
.lp-browser img {
  width: 100%;
  height: auto;
}
.lp-tile figcaption {
  font-size: 13px;
  margin-top: 14px;
}
.lp-tile--own {
  grid-column: 6 / 10;
  grid-row: 2;
  background: var(--lilac-soft);
}
.lp-tile--face {
  grid-column: 10 / 13;
  grid-row: 2;
  background: var(--paper-3);
}
.lp-tile--face img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius);
}
.lp-face-name {
  display: block;
  margin-top: 4px;
}
.lp-voices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.lp-voice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}
.lp-voice h3 {
  font-family: var(--f-serif-jp);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-gold);
}
.lp-voice p {
  margin-top: 20px;
}
.lp-page .lp-small {
  font-size: 13px;
}
.lp-page .lp-copy {
  font-size: 16px;
}
/* 進め方の1段 = 番号｜本文。styles.css の .process-step__body { grid-area: body } は、ホームの #process が grid-template-areas を
   定義する前提の規則。LPには定義が無く、暗黙の列が増えて本文が右へ飛んでいた。LPで定義する（!important は使わない）。 */
.lp-step {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "no body";
  align-items: start;
}
.lp-step .process-step__no {
  grid-area: no;
}
.lp-step__en {
  margin-left: 14px;
  font-family: var(--f-caps);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.lp-step__tag {
  margin-block: 8px;
}
.lp-cut--process {
  grid-column: 1 / -1;
  width: 100%;
  margin-bottom: 0;
}
.lp-cut--process::before {
  background: var(--paper);
  color: var(--gold-ink);
}
.lp-note {
  font-size: 16px;
  margin-block: 28px 16px;
}
.lp-works {
  display: grid;
  gap: 48px;
}
/* 1件1帯: 画像は左（偶数番目でも左のまま）。ホームの #works の素地（枠なし）には頼らず、LPで直接書く。 */
.lp-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  transform: none;
}
.lp-work:hover, .lp-work:focus-within {
  box-shadow: none;
  transform: none;
}
.lp-work .work-card__media {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.lp-work__body {
  padding: 0;
}
.lp-card {
  width: min(100%, 300px);
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.lp-about-copy {
  margin-block: 20px;
}
.lp-profile {
  margin-block: 28px;
}
.lp-profile > div {
  display: grid;
  grid-template-columns: 5em minmax(0, 1fr);
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
}
.lp-profile dt {
  color: var(--gold-ink);
}
.lp-faq__item {
  border-top: 1px solid var(--line-gold);
}
.lp-faq__item:last-child {
  border-bottom: 1px solid var(--line-gold);
}
.lp-faq__item summary {
  position: relative;
  min-height: 56px;
  padding: 20px 44px 20px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
}
.lp-faq__item summary::-webkit-details-marker {
  display: none;
}
.lp-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 12px;
  top: 18px;
  color: var(--gold-ink);
  font-size: 22px;
}
.lp-faq__item[open] summary::after {
  content: "−";
}
.lp-faq__item summary:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
}
.lp-faq__a {
  padding: 0 24px 24px 0;
  max-width: 72ch;
}
/* 相談: 左=見出しと連絡先、右=かんたん相談フォームと相談メモ（ホームと同じ並び。フォームと相談メモの部品は contact.css）。
   右の列がいちばん長いので、左の列は長いフォームの横で追従させる（画面の高さが足りないときは追従しない）。 */
.lp-contact {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-areas: "side memo";
  gap: 32px clamp(32px, 5vw, 72px);
  align-items: start;
}
.lp-contact__side {
  grid-area: side;
  min-width: 0;
  display: grid;
  gap: 28px;
  align-content: start;
}
.lp-contact__intro {
  min-width: 0;
}
.lp-contact__memo {
  grid-area: memo;
  min-width: 0;
}
.lp-contact .contact-wizard {
  width: 100%;
  margin: 0;
}
.lp-contact__hint {
  margin-top: 20px;
  max-width: 60ch;
  color: var(--ink-2);
}
@media (min-width: 981px) and (min-height: 820px) {
  .lp-contact__side { position: sticky; top: 104px; }
}
.lp-channels {
  display: grid;
  border-top: 1px solid var(--line-gold);
  min-width: 0;
}
.lp-channel {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 88px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line-gold);
  transition: background-color .2s var(--ease);
}
.lp-channel:hover {
  background: var(--paper-2);
}
.lp-channel__ico {
  color: var(--gold-ink);
  flex-shrink: 0;
}
.lp-channel small {
  display: block;
  font-size: 13px;
}
.lp-channel b {
  font-size: 16px;
  overflow-wrap: anywhere;
}
@media (max-width: 980px) {
  .lp-board {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-board > .lp-tile {
    grid-column: auto;
    grid-row: auto;
  }
  .lp-voices {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-work {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-contact {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "memo" "channels";
  }
  .lp-contact__side { display: contents; }
  .lp-contact__intro { grid-area: intro; }
  .lp-channels { grid-area: channels; }
}
@media (max-width: 639px) {
  .lp-title {
    font-size: clamp(1.8rem, 7.4vw, 2.6rem);
    line-height: 1.4;
    margin-block: 12px;
  }
  .lp-hero__cta {
    margin: 16px 0 0;
    gap: 8px;
  }
  .lp-hero__cta .btn {
    font-size: 15px;
    padding-inline: 12px;
  }
  .lp-tile--lead .lp-eyebrow {
    letter-spacing: .12em;
  }
}

/* ---- 第1ラウンドの磨き（撮影で見つけた不具合） ---- */

/* 章の上下の余白を、ホームの9vw（最大132px）から詰める。LPは長くなりやすい。 */
.lp-page .section { padding-block: clamp(56px, 6.8vw, 96px); }

/* 下段のタイルは、中身を上にそろえる（見出しの高さをそろえる。第1周の指摘: 中央置きで「ここまで無料」と「お渡し・縛りなし」の高さがずれた）。 */
.lp-tile--own, .lp-tile--face { display: grid; align-content: start; }

/* 「できること」: 見出しの1句（ホームページ制作で、）が列に収まらず語の途中で折れていた。
   左の列を広げ、箇条は「印・見出し・説明」を縦に積む（見出し列が狭く「デザイン」が割れていた）。 */
@media (min-width: 981px) { .lp-scope { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.lp-page .prose ul.check li { display: block; position: relative; padding-left: 1.6em; }
.lp-page .prose ul.check li::before { position: absolute; left: 0; top: .15em; }
.lp-page .prose ul.check li > b { display: block; }
.lp-page .prose ul.check li > p { margin-top: 4px; font-size: 16px; color: var(--ink-3); }

/* 「選ばれる理由」5枚: 盤面に空きを作らない（3枚＋2枚を6列で割る／タブレットは2列で最後の1枚を全幅）。 */
@media (min-width: 981px) {
  .lp-page .why-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lp-page .why-card { grid-column: span 2; }
  .lp-page .why-card:nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 641px) and (max-width: 980px) {
  .lp-page .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-page .why-card:last-child { grid-column: 1 / -1; }
}

/* FAQの質問: 末尾の「か？」だけが次の行に落ちないよう、行をそろえる。 */
.lp-faq__item summary { text-wrap: balance; line-break: strict; }

/* スマホ: 人物タイルは、似顔絵を小さく左に置く横長にして、縦に長くなりすぎないようにする。 */
@media (max-width: 639px) {
  .lp-tile--face { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; }
  .lp-tile--face img { height: 88px; }
}

/* 「選ばれる理由」は640px以下で必ず1列にする（既定の auto-fit だと560〜640pxで2列になり、カードの内側が句より狭くなって、
   緊急の折りが「、」を行頭に出していた）。320px級では、カードの左右の余白も少し詰める。 */
@media (max-width: 640px) { .lp-page .why-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 360px) { .lp-page .why-card, .lp-page .lp-voice { padding-inline: 20px; } }

/* 画像のキャプションの括弧書きは、折らずに1かたまりで次の行へ送る（WebKit 320pxで「（」が行末に残っていた）。 */
.lp-cap-note { display: inline-block; white-space: nowrap; }

/* 対句の見出し「できること・できないことを、正直に。」: balance だと「できること・」だけの短い行ができて行末に「・」が残る。
   先頭から詰める（幅が足りないときだけ「・」で折れる）。折らない箱にしないのは、ホームの360pxで「、」が行頭に来たため（phrase-rules.cjs のコメント）。 */
.lp-page .why-card h3.lp-pair { text-wrap: wrap; }

/* ---- 独立レビューの指摘（アクセシビリティ） ---- */

/* 番号（01〜05）は金だとコントラスト約2:1。大きな文字でも3:1に足りないので、読める金（--gold-ink）にする。 */
.lp-page .why-card__no, .lp-page .process-step__no { color: var(--gold-ink); opacity: 1; }

/* キーボードのフォーカス枠: 全体の規則は --gold（紙色との比 約2.1:1）。明るい面（ヘッダー・本文・モバイルのメニュー・固定の相談ボタン）だけ、3:1以上の色にする。
   暗いフッターの上は、全体の規則の金のまま（暗い地との比が十分）。 */
.lp-page .site-header :focus-visible, .lp-page main :focus-visible, .lp-page .menu-overlay :focus-visible, .lp-page .floating-cta :focus-visible { outline-color: var(--gold-ink); }


/* ---- 採点 第1周（16/20・合格）の指摘への対応 ----
   採点役の指摘は、コードで裏を取った（H1 48px < 節見出し 49.6px／下段の継ぎ目 627・981 と上段の 804／FOR YOUの罫 1428 と 1398／FAQの質問に折り返しの区切りが無い）。 */

/* 視覚階層: H1（3rem）が節見出し（最大3.1rem）より小さく、大小が逆転していた。H1を大きくし、LPの節見出しを一段小さくする。 */
.lp-page main h2.display { font-size: clamp(1.55rem, 3.2vw, 2.55rem); }
@media (min-width: 981px) { .lp-title { font-size: clamp(2.4rem, 3.6vw, 3.25rem); } }
@media (min-width: 640px) and (max-width: 980px) { .lp-title { font-size: clamp(2rem, 4.4vw, 2.6rem); } }

/* 盤面: PCの下段を左右反転（人物｜お渡し｜無料）。上段の継ぎ目（7|8）に下段の継ぎ目がそろい、暗いタイルが主CTAの真下から離れる。
   作例の画面写真（黒地にマゼンタ）は、H1より先に目を引くので、少し小さくする。 */
@media (min-width: 981px) {
  .lp-tile--face { grid-column: 1 / 4; }
  .lp-tile--own { grid-column: 4 / 8; }
  .lp-tile--free { grid-column: 8 / 13; }
  .lp-browser { max-width: 88%; margin-inline: auto; }
}

/* 「FOR YOU」: 引用の行数が違っても、金の罫と答えの高さがそろうよう、行を3枚で共有する（subgrid）。 */
@media (min-width: 981px) {
  .lp-voices { grid-template-rows: auto auto; }
  .lp-voice { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; }
}

/* 進め方: 罫と切り取り線が全幅に伸び、本文だけが左に寄って右が空いていた。本文の幅にそろえる。注も同じ幅・同じ灰色にする。 */
.lp-process { max-width: 760px; }
.lp-note { max-width: 46em; color: var(--ink-2); }

/* 料金: 5項目めが片側だけに入り、右下に穴ができていた。「〜」は最低価格の意味を持つので、小さく薄くせず読める大きさにする。 */
@media (min-width: 761px) { .lp-page .pricing-details > div:nth-child(5) { grid-column: 1 / -1; } }
.lp-page .price-card .amount small { font-size: 1.3rem; color: var(--ink-2); }

/* できること: 左の見出しを、右の一覧の上端にそろえる。 */
.lp-scope { align-items: start; }

/* わたしについて: 見出し → 名刺 → 本文の順（スマホで名刺が見出しより先に出ていた）。PCは左に名刺、右に見出しと本文。名刺の左端を列の左端にそろえる。 */
.lp-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 clamp(30px, 5vw, 72px); align-items: start; grid-template-areas: "card head" "card body"; }
.lp-about .lp-card { grid-area: card; margin-inline: 0; }
.lp-about__head { grid-area: head; }
.lp-about__body { grid-area: body; }
@media (max-width: 980px) {
  .lp-about { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "card" "body"; }
  .lp-about .lp-card { margin-inline: auto; }
}

/* リンク: ライラックは「1画面に1つの強調」。LPのリンクは墨＋金の下線にして、見出しの強調語だけがライラックになるようにする。 */
.lp-page main .textlink { color: var(--ink); border-bottom-color: var(--gold); }
.lp-page main .textlink:hover { border-bottom-color: var(--ink); }

/* フッター: ラベル（MENU・CONTACT）は金（ほかの節のラベルと同じ）。タグラインの年だけが次の行に落ちないようにする。 */
.lp-page .site-footer .footer-col h4 { color: var(--gold-l); }
.lp-nowrap { white-space: nowrap; }

/* 相談メモの説明文: 生成された文には文節の区切りが無く、語の途中で割れていた。対応するブラウザでは、文節で折る。 */
.lp-contact .contact-wizard :is(p, h3) { word-break: auto-phrase; line-break: strict; }

/* スマホ: 主ボタンは全幅（親指で押しやすく、いちばん目立たせる）。 */
@media (max-width: 639px) { .lp-hero__cta .btn--primary { width: 100%; justify-content: center; } }

/* ---- 採点 第2周（20/20・合格）の「余白と整列」の指摘のうち、コードで裏を取れた所 ----
   測定（390px）: 「できること」のリード→一覧が80px（ほかの節は34px）。PC: ABOUTの見出し→本文が約95px（ほかの節の見出し→本文は約30px）。
   進め方の01と02の間は、切り取り線のすぐ下に、01の下罫がもう1本出て二重になっていた。 */
@media (max-width: 980px) { .lp-scope { row-gap: 0; } }
@media (min-width: 981px) { .lp-about__head { margin-bottom: 0; } }
.lp-step:has(> .lp-cut--process) { border-bottom: 0; }
@media (max-width: 639px) { .pricing-cta .btn--primary { width: 100%; justify-content: center; } }
.lp-contact__intro .section__head { margin-bottom: 0; }

/* ---- 採点 第3周（19/20・合格）の指摘のうち、コードで裏を取れた2点 ----
   かんたん相談の入力欄の例文（placeholder）が、語の途中で割れていた（SP: 「Googleマ／ップ」と、2行目が小さい「ッ」で始まる。PC: 「複数あれば1／行に」）。
   文節で折る（対応するブラウザだけ。相談メモの説明文と同じ指定）。
   相談欄の下には、フッターのぼかし（36px）が重なる。連絡先の最後の線とぼかしの間が約25pxしか無かったので、余白を足す。 */
.lp-contact .quick-form :is(input, textarea) { word-break: auto-phrase; line-break: strict; }
.lp-page #contact { padding-bottom: clamp(88px, 9vw, 132px); }