/* 道具・オプションの詳しいページ（tools/lp-a/build.py で作る）の共通の見た目。色と字はTOP（css/top-a.css）の墨と白に合わせる */
  .lpa-kicker{margin:0 0 14px;font-size:16px;font-weight:700;letter-spacing:.08em;color:var(--ta-on-muted,#C3C8D2)}
  .lpa-sec{padding:88px 0}
  .lpa-sec.is-mist{background:var(--ta-mist,#EEF0F3)}
  .lpa-in{max-width:1100px;margin:0 auto;padding:0 24px}
  .lpa-sec .lp-h2{margin:0 0 10px}
  .lpa-sec .lp-lead2{margin:0 0 36px;font-size:17px;line-height:1.9}
  /* 困りごと（墨の帯） */
  .lpa-dark{background:var(--ta-ink,#1F2229);color:var(--ta-on,#F2F3F5);padding:88px 0}
  .lpa-dark .lp-h2,.lpa-dark .lp-h2 em{color:#fff}
  .lpa-dark .lp-h2 em{background:linear-gradient(transparent 70%,rgba(255,255,255,.22) 70%)}
  .lpa-dark .lp-lead2{color:var(--ta-on-muted,#C3C8D2)}
  .lpa-dark .ta-tile{cursor:default}
  .lpa-dark .ta-tile-jp{margin-top:18px}
  .lpa-dark .ta-tile-n{margin:10px 0 0;line-height:1.8}
  /* できること（左右交互） */
  .lpa-feat{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center;padding:40px 0;border-top:1px solid var(--ta-line,#D7DBE2)}
  .lpa-feat:first-of-type{border-top:0}
  .lpa-feat.is-rev .lpa-shot{order:2}
  .lpa-shot{position:relative;margin:0}
  .lpa-shot::before{content:"";position:absolute;inset:0;background:#E8762E;clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);transform:translate(14px,14px);opacity:.9}
  .lpa-shot img{position:relative;display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:left top;clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.12)}
  .lpa-no{font-family:var(--ta-en);font-weight:500;font-size:56px;line-height:1;color:var(--ta-line,#D7DBE2);margin:0 0 8px}
  .lpa-ft{margin:0 0 14px;font-size:clamp(22px,2.4vw,28px);font-weight:900;line-height:1.5;letter-spacing:.04em;color:var(--ta-ink,#1F2229)}
  .lpa-fp{margin:0;font-size:17px;line-height:1.9;color:var(--ta-muted,#4F5664)}
  .lpa-fp b{color:var(--ta-ink,#1F2229)}
  /* 動画 */
  .lpa-video{position:relative;max-width:980px;margin:0 auto}
  .lpa-video video{display:block;width:100%;height:auto;aspect-ratio:16/10;background:#fff;border:1px solid var(--ta-line,#D7DBE2)}
  .lpa-cap{margin:12px 0 0;font-size:16px;color:var(--ta-muted,#4F5664);text-align:center}
  /* 流れ */
  .lpa-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ta-ink,#1F2229)}
  .lpa-steps li{padding:22px 20px 24px;border-right:1px solid var(--ta-line,#D7DBE2)}
  .lpa-steps li:last-child{border-right:0}
  .lpa-steps b{display:block;font-family:var(--ta-en);font-weight:500;font-size:16px;letter-spacing:.1em;color:#B9541A;margin-bottom:10px}
  .lpa-steps span{display:block;font-size:17px;font-weight:700;line-height:1.6;color:var(--ta-ink,#1F2229)}
  .lpa-steps small{display:block;margin-top:8px;font-size:16px;line-height:1.7;color:var(--ta-muted,#4F5664)}
  /* しないこと */
  .lpa-promise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
  .lpa-promise li{background:#fff;border:1px solid var(--ta-line,#D7DBE2);padding:24px 22px}
  .lpa-promise b{display:block;font-size:18px;line-height:1.5;color:var(--ta-ink,#1F2229);margin-bottom:8px}
  .lpa-promise span{font-size:16px;line-height:1.8;color:var(--ta-muted,#4F5664)}
  /* 料金 */
  .lpa-price{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .lpa-pc{padding:30px 28px;border:1px solid var(--ta-line,#D7DBE2);background:#fff;display:flex;flex-direction:column;gap:10px}
  .lpa-pc.is-dark{background:var(--ta-ink,#1F2229);border-color:var(--ta-ink,#1F2229);color:#fff}
  .lpa-pc-k{margin:0;font-size:16px;font-weight:700;letter-spacing:.06em;color:var(--ta-muted,#4F5664)}
  .lpa-pc.is-dark .lpa-pc-k{color:var(--ta-on-muted,#C3C8D2)}
  .lpa-pc-v{margin:0;font-size:clamp(24px,2.8vw,32px);font-weight:900;line-height:1.4}
  .lpa-pc-n{margin:0;font-size:16px;line-height:1.8;color:var(--ta-muted,#4F5664)}
  .lpa-pc.is-dark .lpa-pc-n{color:var(--ta-on-muted,#C3C8D2)}
  .lpa-pc .ta-btn{margin-top:auto;align-self:flex-start}
  .lpa-pc:not(.is-dark) .ta-btn{background:var(--ta-ink,#1F2229);color:#fff;border-color:var(--ta-ink,#1F2229)}
  /* よくある質問 */
  .lpa-faq details{border-top:1px solid var(--ta-line,#D7DBE2)}
  .lpa-faq details:last-child{border-bottom:1px solid var(--ta-line,#D7DBE2)}
  .lpa-faq summary{list-style:none;cursor:pointer;display:flex;gap:16px;align-items:center;min-height:64px;padding:16px 4px;font-size:18px;font-weight:700;color:var(--ta-ink,#1F2229)}
  .lpa-faq summary::-webkit-details-marker{display:none}
  .lpa-faq summary::before{content:"Q";font-family:var(--ta-en);font-size:22px;color:#B9541A}
  .lpa-faq summary::after{content:"+";margin-left:auto;font-family:var(--ta-en);font-size:26px;color:var(--ta-muted,#4F5664)}
  .lpa-faq details[open] summary::after{content:"−"}
  .lpa-faq p{margin:0;padding:0 4px 22px 38px;font-size:17px;line-height:1.9;color:var(--ta-muted,#4F5664)}
  /* ほかの道具へ */
  .lpa-next{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ta-ink,#1F2229)}
  .lpa-next a{display:flex;flex-direction:column;gap:8px;min-height:150px;padding:22px 20px;border-right:1px solid var(--ta-line,#D7DBE2);border-bottom:1px solid var(--ta-line,#D7DBE2);text-decoration:none;color:var(--ta-ink,#1F2229);transition:background .25s}
  .lpa-next a:hover,.lpa-next a:focus-visible{background:var(--ta-mist,#EEF0F3)}
  .lpa-next small{font-family:var(--ta-en);font-size:16px;letter-spacing:.08em;color:#B9541A;text-transform:uppercase}
  .lpa-next b{font-size:19px;line-height:1.5}
  .lpa-next span{font-size:16px;line-height:1.7;color:var(--ta-muted,#4F5664)}
  .lpa-next i{margin-top:auto;font-style:normal;font-family:var(--ta-en);font-size:22px}
  @media (max-width:900px){
    .lpa-feat{grid-template-columns:1fr;gap:28px}
    .lpa-feat.is-rev .lpa-shot{order:0}
    .lpa-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
    .lpa-steps li:nth-child(2){border-right:0}
    .lpa-steps li{border-bottom:1px solid var(--ta-line,#D7DBE2)}
    .lpa-promise{grid-template-columns:1fr}
    .lpa-next{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:560px){
    .lpa-sec,.lpa-dark{padding:64px 0}
    .lpa-in{padding:0 16px}
    .lpa-steps,.lpa-price,.lpa-next{grid-template-columns:1fr}
    .lpa-steps li{border-right:0}
    .lpa-shot::before{transform:translate(8px,8px)}
  }
  /* 自分でやると／HAKUSOだと（左に手間、右に結果の大きな数字） */
  .lpa-vis{min-width:0}
  .lpa-feat.is-rev .lpa-vis{order:2}
  .vs{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1.1fr);align-items:stretch}
  .vs-before{background:var(--ta-mist,#EEF0F3);padding:22px 20px}
  .vs-k{margin:0 0 12px;font-size:16px;font-weight:700;letter-spacing:.06em;color:var(--ta-muted,#4F5664)}
  .vs-before ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
  .vs-before li{background:#fff;border-radius:8px;padding:10px 12px;font-size:16px;line-height:1.6;color:var(--ta-muted,#4F5664)}
  .vs-arrow{display:grid;place-items:center;font:500 32px var(--ta-en);color:#E8762E}
  .vs-after{background:var(--ta-ink,#1F2229);color:#fff;padding:22px 22px 24px;display:flex;flex-direction:column}
  .vs-after .vs-k{color:var(--ta-on-muted,#C3C8D2)}
  .vs-cap{margin:0;font-size:16px;line-height:1.6;color:var(--ta-on-muted,#C3C8D2)}
  .vs-big{margin:2px 0 6px;font:500 clamp(64px,7vw,88px)/1 var(--ta-en);color:#fff;letter-spacing:.01em}
  .vs-big small{font:700 22px "Noto Sans JP",sans-serif;margin-left:6px}
  .vs-big.is-or{color:#FF9A5C}
  .vs-chips{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
  .vs-chips li{border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:4px 12px;font-size:16px;font-weight:700}
  .vs-chips li.g{border-color:#7fd6a8;color:#7fd6a8}.vs-chips li.o{border-color:#FF9A5C;color:#FF9A5C}
  .vs-note{margin:10px 0 0;font-size:16px;color:var(--ta-muted,#4F5664)}
  @media (max-width:640px){
    .vs{grid-template-columns:1fr}
    .vs-arrow{height:44px;transform:rotate(90deg)}
  }
  @media (max-width:900px){.lpa-feat.is-rev .lpa-vis{order:0}}
  /* 見本（いま → 4枚） */
  .lpa-sm-h{margin:34px 0 12px;font-size:20px;font-weight:900;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
  .lpa-sm-h span{font-size:16px;font-weight:400;color:var(--ta-muted,#4F5664)}
  .lpa-sample{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:16px;align-items:start}
  .lpa-sample.is-nobefore{grid-template-columns:1fr}
  .lpa-sample figure{margin:0}
  .lpa-sample img{display:block;width:100%;height:auto;background:#fff}
  .lpa-sample figcaption{margin-top:6px;font-size:16px;line-height:1.5;color:var(--ta-muted,#4F5664)}
  .lpa-sm-before img{outline:3px solid var(--ta-ink,#1F2229)}
  .lpa-sm-after{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .lpa-sample.is-nobefore .lpa-sm-after{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* 料金3つ・箇条書き・番号 */
  .lpa-price3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .lpa-pc-v small{font-size:18px;margin-left:4px}
  .lpa-list{margin:24px 0 0;padding:0 0 0 1.2em;display:grid;gap:8px;font-size:17px;line-height:1.8;color:var(--ta-muted,#4F5664)}
  .lpa-steps.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lpa-num{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;align-items:start}
  .lpa-num figure{margin:0}.lpa-num img{display:block;width:100%;height:auto;border:1px solid var(--ta-line,#D7DBE2)}
  .lpa-num figcaption{margin-top:6px;font-size:16px;color:var(--ta-muted,#4F5664)}
  .lpa-numlist{margin:0;padding:0;list-style:none;counter-reset:n;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px}
  .lpa-numlist li{counter-increment:n;display:flex;gap:10px;align-items:center;font-size:16px;padding:6px 0;border-bottom:1px solid var(--ta-line,#D7DBE2)}
  .lpa-numlist li::before{content:counter(n);flex:none;width:28px;height:28px;border-radius:50%;background:#E8762E;color:#fff;font:500 16px/28px var(--ta-en);text-align:center}
  .lpa-cap a{color:inherit}
  @media (max-width:900px){
    .lpa-sample,.lpa-num{grid-template-columns:1fr}
    .lpa-sample.is-nobefore .lpa-sm-after{grid-template-columns:repeat(2,minmax(0,1fr))}
    .lpa-price3{grid-template-columns:1fr}
    .lpa-steps.is-3{grid-template-columns:1fr}
    .lpa-steps.is-3 li{border-right:0}
  }
  /* 数字ではなく言葉を大きく出す時 */
  .vs-big.is-txt{font:900 clamp(26px,2.4vw,34px)/1.3 "Noto Sans JP",sans-serif;letter-spacing:.02em;margin:6px 0 4px;white-space:nowrap}
  /* スマホの画面を3つ並べる */
  .lpa-phones{display:grid;grid-template-columns:repeat(3,minmax(0,240px));justify-content:center;gap:28px}
  .lpa-phones figure{margin:0;text-align:center}
  .lpa-phones img{display:block;width:100%;height:auto;border-radius:22px;border:8px solid #111;background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.18)}
  .lpa-phones figcaption{margin-top:10px;font-size:16px;font-weight:700}
  @media (max-width:640px){.lpa-phones{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
  /* ヒーローの斜めの窓：詳しいページは傾きをTOPの半分（7%）にする。
     画面の録画は横に長いので、14%だと斜めで切れない幅が窓の7割しかなく、文字や札が切れる。
     動画は tools/lp-a/fit_hero.py で、この窓の切れない範囲（x 100〜1180 / 1280）に合わせて置き直してある */
  .ta .ta-back,.ta .ta-front,html.ta-i3 .ta .ta-front{clip-path:polygon(7% 0,100% 0,93% 100%,0 100%)}
  html.ta-js .ta .ta-front{clip-path:polygon(7% 0,7% 0,0 100%,0 100%)}
  html.ta-i3 .ta .ta-front{clip-path:polygon(7% 0,100% 0,93% 100%,0 100%)}
  /* 右を「項目と★が並ぶ」形にする時（ハクコミ・2026-10-29 白倉が5案を選択） */
  .vs-after.is-list{background:#fff;color:var(--ta-ink,#1F2229);border:1px solid var(--ta-line,#D7DBE2)}
  .vs-after.is-list .vs-k{color:var(--ta-ink,#1F2229)}
  .vs-res{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
  .vs-res li{display:flex;justify-content:space-between;align-items:center;gap:10px;border-radius:8px;padding:10px 14px;font-size:17px;font-weight:700}
  .vs-res li{flex-wrap:wrap}
  .vs-res li b{font-family:var(--ta-en);font-weight:500;font-size:22px;margin-left:auto;text-align:right}
  .vs-res li.g{background:#e6f3ec;color:#1f7a5a}
  .vs-res li.o{background:#fdeee3;color:#B9541A}
  /* 2026-10-29 白倉「改行がわかりづらい。1行でできるだけ」：絵の列を広げ、言葉は1行で収める */
  @media (min-width:901px){.lpa-feat:has(.vs){grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:40px}}
  .vs-before li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vs-res li{flex-wrap:nowrap;font-size:16px;padding:10px 12px}
  .vs-res li span{white-space:nowrap}
  .vs-res li b{font-size:20px;white-space:nowrap}
  /* 横に並べると1行に収まらないので、上＝自分でやると／下＝HAKUSOだと、の縦に並べる */
  .vs{grid-template-columns:1fr}
  .vs-arrow{height:40px;transform:rotate(90deg)}
  .vs-before ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5em),1fr));gap:8px}
  .vs-res{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11em),1fr));gap:8px}
  @media (min-width:901px){.lpa-feat.is-rev:has(.vs){grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}}