/* One 公開ページの新しい意匠（x-olp.*・resources/views/components/olp）
   元: loops/one-pages-design/design/mocks/_src/base.css と 5 つのモックのページの CSS（class は olp- を付けて写した）
   - 全部の規則を .olp の下に置く（ヘッダー・フッター・K のページに効かせない）。基本の要素は .olp :where(…) で詳細度を 0,1,0 にする
   - 色は brand-guide §2.1 の 26 色だけ。値を書くのは下の .olp のトークンの所だけ（ほかは var(--…)）
   - 太さは 400 と 700。グラデーション・画像の URL の読み込み・ダーク表示は使わない（color-scheme: light）
   - 書体は brand-guide §3.1 の指定から和文の 1 つ（#2248 の font-families.json に無い名前）を外した。計画 §6 D1 の推奨・記録は W0 の work-log
   - 組み立て無し。版の数は App\Support\OneLp::cssUrl() が中身の sha256 から付ける */

.olp{
--slp-cta:#006FC9;--slp-cta-hover:#005BAC;--slp-cta-active:#004A8C;--slp-card:#FFFFFF;
--slp-ink:#222222;--slp-body:#333333;--slp-sub:#555555;--slp-placeholder:#6B6B6B;
--slp-bg:#F8F8F8;--slp-accent-soft:#EEF6FF;--slp-accent-bg:#E8F3FF;--slp-accent-line:#CFE6FF;
--slp-line:#E5E5E5;--slp-field-line:#8A8A8A;--slp-paper:#F7F5F0;
--slp-success:#1E7B3A;--slp-success-bg:#E9F6EC;--slp-warning:#946300;--slp-warning-bg:#FFF4D7;--slp-warning-line:#FBA904;
--slp-error:#BD3D30;--slp-error-bg:#FDECEA;--slp-chart-2:#7A8A9A;--slp-chart-3:#2E4A68;
--slp-coral-bg:#FDE9E2;--slp-coral-ink:#9E3A20;
--slp-inner:1120px;--slp-r-s:6px;--slp-r-m:8px;--slp-r-l:12px;--slp-r-full:999px;--slp-r-pill:9999px;
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:72px;
--fs-h1:28px;--fs-h2:24px;--fs-h3:18px;--fs-lead:16px;--fs-body:16px;--fs-note:13px;
--sec-y:56px;--card-pad:20px;--gutter:20px;
color-scheme:light;background:var(--slp-card);color:var(--slp-body);
font-family:Roboto,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
font-size:var(--fs-body);font-weight:400;line-height:1.8;line-break:strict;text-align:left;
}
.olp--product,.olp--feature{--fs-h1:28px}
.olp--hub{--fs-h1:26px}
.olp--tool,.olp--api-doc{--fs-h1:24px}
@media (min-width:700px){.olp{--fs-h1:34px;--fs-h2:28px;--fs-h3:20px;--fs-lead:17px}.olp--product,.olp--feature{--fs-h1:34px}.olp--hub{--fs-h1:32px}.olp--tool,.olp--api-doc{--fs-h1:28px}}
@media (min-width:860px){.olp{--sec-y:72px;--card-pad:32px}}
@media (min-width:1100px){.olp{--fs-h1:44px;--fs-h2:34px}.olp--product,.olp--feature{--fs-h1:44px}.olp--hub{--fs-h1:40px}.olp--tool,.olp--api-doc{--fs-h1:32px}}
.olp--bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

/* ---------- 基本（Bootstrap・Codebase・Tailwind の要素の規則を打ち消す）
   詳細度は 0,1,0（:where と :not(:where()) は数えない）。部品の class の規則（0,1,0）が後ろにあるので部品が勝つ。
   .olp-raw の中（x-olp.tool-panel に入れる Livewire などの今の画面）は打ち消さない ---------- */
.olp :where(*,*::before,*::after){box-sizing:border-box}
.olp :where(figure):not(:where(.olp-raw *)){margin:0}
.olp :where(h1,h2,h3,h4):not(:where(.olp-raw *)){margin:0;padding:0;color:var(--slp-ink);font-family:inherit;font-weight:700;line-height:1.35;letter-spacing:normal;text-wrap:balance;font-feature-settings:"palt";word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.olp :where(h1):not(:where(.olp-raw *)){font-size:var(--fs-h1)}
.olp :where(h2):not(:where(.olp-raw *)){font-size:var(--fs-h2)}
.olp :where(h3):not(:where(.olp-raw *)){font-size:var(--fs-h3)}
.olp :where(p):not(:where(.olp-raw *)){margin:0 0 var(--sp-4);text-wrap:pretty}
.olp :where(p:last-child):not(:where(.olp-raw *)){margin-bottom:0}
.olp :where(ul,ol):not(:where(.olp-raw *)){margin:0;padding:0;list-style:none}
.olp :where(dl,dd,dt):not(:where(.olp-raw *)){margin:0}
.olp :where(img,svg):not(:where(.olp-raw *)){display:block;max-width:100%}
.olp :where(img):not(:where(.olp-raw *)){height:auto}
.olp :where(a):not(:where(.olp-raw *)){color:var(--slp-cta-hover);text-decoration:underline;text-underline-offset:3px}
.olp :where(b,strong){font-weight:700}
.olp :where(table):not(:where(.olp-raw *)){border-collapse:collapse}
.olp :where(caption):not(:where(.olp-raw *)){padding:0;color:var(--slp-ink);text-align:left;caption-side:top}
.olp :where(button,input,textarea,select):not(:where(.olp-raw *)){font:inherit;color:inherit;margin:0}
.olp :where(:focus-visible){outline:3px solid var(--slp-cta);outline-offset:2px;border-radius:var(--slp-r-s)}
.olp :where(summary,.olp-btn,.olp-bx){word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
@supports (word-break:auto-phrase){.olp :where(h1,h2,h3,h4,summary,.olp-btn,.olp-bx){word-break:auto-phrase}}
.olp-nw{white-space:nowrap}
.olp-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.olp-lead{font-size:var(--fs-lead);color:var(--slp-body);text-wrap:pretty}
.olp-note{font-size:var(--fs-note);color:var(--slp-sub);line-height:1.7}
.olp-eyebrow{margin:0 0 var(--sp-2);font-size:13px;font-weight:700;line-height:1.5;letter-spacing:.04em;color:var(--slp-cta-hover)}
.olp-icon{display:inline-block;width:1.25em;height:1.25em;flex:none;fill:currentColor;vertical-align:-.2em}

/* ---------- 帯と外枠 ---------- */
.olp-wrap{max-width:calc(var(--slp-inner) + var(--gutter) * 2);margin:0 auto;padding:0 var(--gutter)}
.olp-sec{padding:var(--sec-y) 0}
.olp-sec--white{background:var(--slp-card)}
.olp-sec--gray{background:var(--slp-bg)}
.olp-sec--tint{background:var(--slp-accent-soft)}
/* 同じ地の帯が続くときは 1 つの帯に見せる（SSL のモックの「要点と信頼帯を 1 つの灰色の帯に」） */
.olp-sec--gray+.olp-sec--gray,.olp-sec--tint+.olp-sec--tint{padding-top:0}
.olp-sec__head{margin-bottom:var(--sp-6);max-width:46em}
.olp-sec__head .olp-lead{margin-top:var(--sp-3)}
/* 節の直後の主 CTA（x-olp.section・x-olp.table の cta・B18 の意匠の直し T23-S-02）。幅は .olp-btns の決まり（390 は全幅・600px 未満は「?」の余白） */
.olp-sec__cta{margin-top:var(--sp-6)}
.olp-sec__cta .olp-btns{margin-top:0}
.olp-sec__cta>.olp-note{margin:var(--sp-2) 0 0}

/* ---------- ボタン（brief §3.2・brand-guide §2.2）。角丸はピル型（両端が半円）で --slp-r-pill だけ（9/29 の決定） ---------- */
.olp-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:48px;padding:14px 32px;border-radius:var(--slp-r-pill);border:0;font-family:inherit;font-size:16px;font-weight:700;line-height:1.4;text-decoration:none;text-align:center;cursor:pointer}
.olp-btn .olp-icon{width:18px;height:18px}
.olp-btn--primary{background:var(--slp-cta);color:var(--slp-card)}
.olp-btn--primary:hover{background:var(--slp-cta-hover);color:var(--slp-card)}
.olp-btn--primary:active{background:var(--slp-cta-active)}
.olp-btn--secondary{background:var(--slp-card);color:var(--slp-cta-hover);border:1.5px solid var(--slp-cta);padding:12px 28px}
.olp-btn--secondary:hover{background:var(--slp-accent-soft);color:var(--slp-cta-hover)}
.olp-btn--tool{background:var(--slp-card);color:var(--slp-ink);border:1.5px solid var(--slp-field-line)}
.olp-btn--tool:hover{background:var(--slp-bg)}
.olp-btns{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-5)}
.olp-btns .olp-btn{width:100%}
@media (min-width:700px){.olp-btns{flex-direction:row;flex-wrap:wrap;align-items:center}.olp-btns .olp-btn{width:auto}}
.olp-link{display:inline-block;padding:2px 0;font-weight:700;color:var(--slp-cta-hover);text-decoration:underline;text-underline-offset:3px}
.olp-link__arr{display:inline-block;margin-left:4px;pointer-events:none}
.olp-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-4) 0 0}
.olp-chips li{white-space:nowrap;font-size:14px;line-height:1.5;color:var(--slp-ink);background:var(--slp-accent-soft);border:1px solid var(--slp-accent-line);border-radius:var(--slp-r-full);padding:5px 12px}

/* ---------- イラスト ---------- */
.olp-ill{position:relative;container-type:inline-size;margin:0;border-radius:var(--slp-r-l);background:var(--slp-paper);overflow:hidden;border:1px solid var(--slp-line)}
.olp-ill--flat-blue{border-radius:0;background:transparent;border-color:transparent}
.olp-ill img{display:block;width:100%;height:auto}
.olp-ill__tag{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);display:grid;place-items:center;padding:0 .4em;font-weight:700;line-height:1;white-space:nowrap;color:var(--slp-ink);font-size:clamp(12px,calc(var(--fs,3.2) * 1cqi),22px);pointer-events:none}
.olp-ill__tag--chosen{color:var(--slp-card)}
.olp-ill-fig figcaption{margin-top:var(--sp-3);font-size:15px;line-height:1.75;color:var(--slp-body)}

/* ---------- ヒーロー ---------- */
.olp-hero{padding:32px 0 var(--sec-y);background:var(--slp-card)}
.olp-hero__in{display:grid;gap:var(--sp-6);grid-template-columns:minmax(0,1fr)}
.olp-hero__in>*,.olp-hero__text{min-width:0}
.olp-hero .olp-lead{margin-top:var(--sp-4);max-width:34em}
.olp-hero__note{margin:var(--sp-2) 0 0;color:var(--slp-body)}
.olp-hero__vis{display:grid;gap:var(--sp-4);align-content:start}
.olp-hero__vis>*{min-width:0}
@media (max-width:1099.98px){.olp-hero__vis{max-width:640px}}
@media (min-width:1100px){.olp-hero{padding:56px 0 72px}.olp-hero__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--sp-7);align-items:start}}
.olp-hero--product,.olp-hero--feature{background:var(--slp-card)}
.olp-hero--hub{background:var(--slp-bg)}
.olp-hero--hub.olp-hero--plain{background:var(--slp-accent-soft)}
.olp-hero__search{margin-top:var(--sp-5)}
.olp-hero__wide{grid-column:1/-1;justify-self:center;width:100%}
@media (min-width:1100px){.olp-hero--hub .olp-hero__in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.olp-hero__wide{width:80%}}
.olp-hero--tool{background:var(--slp-accent-soft);padding:28px 0 var(--sp-5)}
.olp-hero--tool .olp-lead{margin-top:var(--sp-3);max-width:40em}
.olp-hero--tool .olp-hero__in{display:block}
@media (min-width:1100px){.olp-hero--tool{padding:28px 0 var(--sp-5)}}
/* ハブの道案内（/service の「目的から選ぶ」の形） */
.olp-pick{background:var(--slp-card);border:1px solid var(--slp-accent-line);border-radius:var(--slp-r-l);padding:var(--sp-5) var(--sp-5) var(--sp-2)}
.olp-pick__title{display:flex;align-items:center;gap:var(--sp-2);font-size:14px;font-weight:700;color:var(--slp-cta-hover);margin:0 0 var(--sp-1)}
.olp-pick li+li{border-top:1px solid var(--slp-line)}
.olp-pick a{display:grid;grid-template-columns:minmax(0,1fr) 16px;column-gap:var(--sp-3);row-gap:2px;align-items:center;min-height:48px;padding:10px 0;text-decoration:none;color:var(--slp-body)}
.olp-pick__need{font-size:15px;line-height:1.55;grid-column:1}
.olp-pick__svc{font-size:14px;font-weight:700;line-height:1.5;color:var(--slp-cta-hover);grid-column:1}
.olp-pick__arr{grid-column:2;grid-row:1/span 2;width:16px;height:16px;color:var(--slp-sub)}
.olp-pick a:hover .olp-pick__need{text-decoration:underline}
@media (min-width:700px){.olp-pick a{grid-template-columns:minmax(0,1fr) auto 16px}.olp-pick__svc{grid-column:2;grid-row:1;white-space:nowrap}.olp-pick__arr{grid-column:3;grid-row:1}}

/* ---------- ツールの入力面（brief §2 #13） ---------- */
.olp-tool-sec{background:var(--slp-accent-soft);padding:0 0 var(--sp-7)}
.olp-tool-grid{display:grid;gap:var(--sp-7)}
@media (min-width:1100px){.olp-tool-grid--aside{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-6);align-items:start}}
.olp-tool{max-width:880px;background:var(--slp-card);border:1px solid var(--slp-accent-line);border-radius:var(--slp-r-l);padding:var(--card-pad)}
.olp-tool-grid--aside .olp-tool{max-width:none}
.olp-tool__title{font-size:19px}
@media (min-width:1100px){.olp-tool__title{font-size:22px}}
.olp-tool :where(label){display:block;margin:var(--sp-4) 0 var(--sp-2);font-size:14px;font-weight:700;color:var(--slp-ink)}
/* 入力面の中（.olp-raw。基本の打ち消しの外）のボタンと入力欄も、ブラウザの既定の書体でなくページの書体にする */
.olp-tool :where(button,input,textarea,select){font-family:inherit}
.olp-tool :where(input[type=text],input[type=search],input:not([type]),textarea,select),.olp-dsearch input{width:100%;min-width:0;min-height:52px;border:1.5px solid var(--slp-field-line);border-radius:var(--slp-r-m);padding:10px 14px;font-size:16px;line-height:1.5;color:var(--slp-ink);background:var(--slp-card)}
.olp-tool :where(textarea){display:block;min-height:152px;resize:vertical}
/* layout の common.css の #main input[type=text]（詳細度 1,1,1）は上の規則に勝ち、入力欄を 14px・細い灰色の枠・角丸 4px にする
   （iOS は 16px 未満の入力欄で拡大する）。layout は変えず、その 4 つを 1,3,1 で書き直す。:not(#olp-id-boost) は ID の詳細度を足すだけ（この id は置かない） */
.olp .olp-dsearch input[type=text]:not(#olp-id-boost),.olp .olp-tool input[type=text]:not(#olp-id-boost){font-size:16px;border:1.5px solid var(--slp-field-line);border-radius:var(--slp-r-m);padding:10px 14px}
/* 検索窓（form role="search"）の 1 行の入力欄はボタンと組に見せるピル型。同じ詳細度 1,3,1 を後に置く。複数行・選択・ほかのフォームの項目は 8px のまま */
.olp [role=search] :is(input[type=text],input[type=search],input:not([type])):not(#olp-id-boost){border-radius:var(--slp-r-pill);padding:10px 20px}
.olp-tool ::placeholder,.olp-dsearch ::placeholder{color:var(--slp-placeholder);opacity:1}
.olp-tool :where(button[type=submit]),.olp-tool .olp-btn{min-height:52px;padding:0 20px;border-radius:var(--slp-r-pill)}
.olp [wire\:id] :is(button[class*=btn],a[class*=btn],[class*=btn]>a){border-radius:var(--slp-r-pill)}
.olp-tool .olp-note{margin:var(--sp-3) 0 0}
.olp-tool__row{display:flex;gap:var(--sp-2)}
.olp-tool__row>:first-child{flex:1}
.olp-tool__aside{min-width:0}
.olp-tool__next{margin:var(--sp-3) 0 0;font-size:15px}

/* ---------- ドメイン検索（brief §2 #12） ---------- */
.olp-dsearch{display:grid;gap:var(--sp-2)}
.olp-dsearch--panel{background:var(--slp-card);border:1px solid var(--slp-accent-line);border-radius:var(--slp-r-l);padding:var(--sp-4)}
.olp-dsearch__label{display:block;font-size:14px;font-weight:700;color:var(--slp-ink);line-height:1.5}
.olp-dsearch__row{display:flex;gap:var(--sp-2)}
.olp-dsearch__row input{flex:1}
.olp-dsearch__row .olp-btn{flex:none;min-height:52px;padding:0 24px}
.olp-dsearch__alt{margin:var(--sp-1) 0 0;font-size:15px;line-height:1.6}
@media (min-width:1100px){.olp-dsearch--panel{padding:var(--sp-5)}.olp-closing .olp-dsearch{min-width:460px}}

/* ---------- 行ごとの絵＋説明（problem-solution。DOM は 絵 → 文。左右は order で入れ替える） ---------- */
.olp-rows{display:grid;gap:var(--sp-7)}
.olp-row{display:grid;gap:var(--sp-5);align-items:center}
.olp-row__media{width:100%;max-width:560px}
.olp-row__text>p,.olp-row__text>ul,.olp-row__text>ol{margin-top:var(--sp-3)}
.olp-row__no{display:block;font-size:28px;font-weight:700;line-height:1.2;color:var(--slp-cta-hover);font-feature-settings:"tnum";margin-bottom:var(--sp-2)}
@media (min-width:860px){
.olp-row--media{grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:var(--sp-7)}
.olp-row__media{max-width:none}
.olp-rows--start-left .olp-row--media:nth-child(even) .olp-row__media,.olp-rows--start-right .olp-row--media:nth-child(odd) .olp-row__media{order:2}
.olp-rows--start-left .olp-row--media:nth-child(even),.olp-rows--start-right .olp-row--media:nth-child(odd){grid-template-columns:minmax(0,6fr) minmax(0,4fr)}
}
.olp-split{display:grid;gap:var(--sp-5)}
.olp-split__art{width:100%;max-width:560px}
@media (min-width:1100px){.olp-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-6);align-items:center}.olp-split__art{max-width:none}.olp-split--art-right .olp-split__art{order:2}}

/* ---------- 特長の並び（benefit-grid。アイコンの円か、紙の絵のスポット） ---------- */
.olp-feat{display:grid;gap:var(--sp-4)}
.olp-feat__item{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--sp-4);background:var(--slp-card);border-radius:var(--slp-r-l);padding:var(--sp-5)}
.olp-sec:not(.olp-sec--gray):not(.olp-sec--tint) .olp-feat__item{border:1px solid var(--slp-line)}
.olp-feat__ic{width:48px;height:48px;border-radius:50%;background:var(--slp-accent-soft);color:var(--slp-cta);display:grid;place-items:center}
.olp-feat__ic .olp-icon{width:24px;height:24px}
.olp-feat__item h3{font-size:18px;margin-bottom:4px}
.olp-feat__item p{margin:0;font-size:15px;line-height:1.7}
.olp-feat--plain .olp-feat__item{grid-template-columns:minmax(0,1fr)}
.olp-feat--spot .olp-feat__item{grid-template-columns:minmax(0,1fr);justify-items:start;gap:var(--sp-3)}
.olp-feat__spot{width:112px;border-radius:var(--slp-r-l);overflow:hidden}
@media (min-width:1100px){.olp-feat__spot{width:136px}}
@media (min-width:700px){.olp-feat--c2,.olp-feat--c4{grid-template-columns:repeat(2,minmax(0,1fr))}.olp-feat--c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.olp-feat--c4{grid-template-columns:repeat(4,minmax(0,1fr))}.olp-feat--c4 .olp-feat__item{grid-template-columns:minmax(0,1fr);align-content:start}}
/* 700〜1099px の 3 列はアイコンを文の上に（横に並べると 768 で文の列が約 120px。W2 の value-auth の記録） */
@media (min-width:700px) and (max-width:1099.98px){.olp-feat--c3 .olp-feat__item{grid-template-columns:minmax(0,1fr);align-content:start}}
/* AI の案内（x-olp.ai-guide・B18 の意匠の直し T03-01）: One MCP の 1 枠（46em まで・例があれば 860px 以上で 文｜例）と llms.txt の注記。600px 未満の「?」の余白は部品で取る（PLAN-S2-04） */
.olp-ai{display:grid;gap:var(--sp-3)}
.olp-ai__box{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--sp-3) var(--sp-4);max-width:46em;background:var(--slp-card);border:1px solid var(--slp-line);border-radius:var(--slp-r-l);padding:var(--sp-5)}
.olp-ai__ic{width:48px;height:48px;border-radius:50%;background:var(--slp-accent-soft);color:var(--slp-cta);display:grid;place-items:center}
.olp-ai__ic .olp-icon{width:24px;height:24px}
.olp-ai>*,.olp-ai__main,.olp-ai__ex,.olp-ex__side{min-width:0}
.olp-ai__main h3{margin:var(--sp-2) 0 4px}
.olp-ai__main p{font-size:15px;line-height:1.7}
.olp-ai__more{margin:var(--sp-2) 0 0}
.olp-ai__ex{grid-column:2}
.olp-ai__llms{max-width:46em}
@media (min-width:860px){.olp-ai--ex .olp-ai__box{max-width:none;grid-template-columns:48px minmax(0,1fr) minmax(0,1fr)}.olp-ai--ex .olp-ai__ex{grid-column:3}}
@media (max-width:599.98px){.olp .olp-ai{margin-right:var(--olp-help-gap)}.olp-ai__box{grid-template-columns:minmax(0,1fr)}.olp-ai__ex{grid-column:1}}

/* ---------- 手順（stepper。番号・つなぎ線。1100px 以上は横） ---------- */
.olp-steps{display:grid;counter-reset:none}
.olp-step{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--sp-4);padding-bottom:var(--sp-5)}
.olp-step:last-child{padding-bottom:0}
.olp-step:not(:last-child)::before{content:"";position:absolute;left:23px;top:52px;bottom:4px;width:2px;background:var(--slp-accent-line)}
.olp-step__no{width:48px;height:48px;border-radius:50%;background:var(--slp-cta);color:var(--slp-card);display:grid;place-items:center;font-weight:700;font-size:17px;font-feature-settings:"tnum"}
.olp-step h3{margin-top:10px}
.olp-step p{margin:4px 0 0;font-size:15px;line-height:1.7}
.olp-step__body{min-width:0}
.olp-step__shot{margin-top:var(--sp-3)}
.olp-step__cond{color:var(--slp-body)}
@media (min-width:1100px){
.olp-steps--c3{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--sp-6)}
.olp-steps--c4{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--sp-5)}
.olp-steps--c3 .olp-step,.olp-steps--c4 .olp-step{grid-template-columns:minmax(0,1fr);padding-bottom:0;gap:var(--sp-2);align-content:start}
.olp-steps--c3 .olp-step:not(:last-child)::before,.olp-steps--c4 .olp-step:not(:last-child)::before{left:60px;right:calc(var(--sp-5) * -1 + 8px);top:23px;bottom:auto;width:auto;height:2px}
.olp-steps--c3 .olp-step h3,.olp-steps--c4 .olp-step h3{margin-top:var(--sp-2)}
}

/* ---------- 要点（key-facts。事実を 3〜5 行） ---------- */
.olp-facts{border:1px solid var(--slp-line);border-left:4px solid var(--slp-cta);border-radius:var(--slp-r-l);background:var(--slp-card);padding:var(--card-pad)}
.olp-facts__title{font-size:var(--fs-h3);margin:0 0 var(--sp-3)}
.olp-facts dl>div{display:grid;gap:2px;padding:var(--sp-3) 0;border-top:1px solid var(--slp-line)}
.olp-facts dl>div:first-child{border-top:0;padding-top:0}
.olp-facts dt{font-size:14px;font-weight:700;color:var(--slp-cta-hover);line-height:1.6}
.olp-facts dd{line-height:1.75;text-wrap:pretty}
.olp-facts__note{margin-top:var(--sp-3)}
@media (min-width:700px){.olp-facts dl>div{grid-template-columns:9.5em 1fr;gap:var(--sp-4)}.olp-split .olp-facts dl>div{grid-template-columns:minmax(0,1fr);gap:2px}}
/* 表の形（variant="table"・ハブの要点。9/29 の決定）: 箱と左の青い線を外し、項目の列を灰色の地にした 2 列の表 */
.olp-facts--table{border:0;border-radius:0;background:transparent;padding:0}
.olp-facts--table dl{border:1px solid var(--slp-line);border-radius:var(--slp-r-m);background:var(--slp-card);overflow:hidden}
.olp-facts--table dl>div{gap:0;padding:0}
.olp-facts--table dt,.olp-facts--table dd{padding:var(--sp-3) var(--sp-4)}
.olp-facts--table dt{background:var(--slp-bg);color:var(--slp-ink)}
@media (min-width:700px){.olp-facts--table dl>div{grid-template-columns:13em 1fr;gap:0}.olp-facts--table dt{border-right:1px solid var(--slp-line)}}

/* ---------- 向き不向き（fit） ---------- */
.olp-fit{display:grid;gap:var(--sp-4)}
@media (min-width:860px){.olp-fit{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--sp-5)}.olp-split .olp-fit{grid-template-columns:minmax(0,1fr)}}
.olp-fit__col{border-radius:var(--slp-r-l);padding:var(--card-pad)}
.olp-fit__col--yes{background:var(--slp-accent-soft)}
.olp-fit__col--no{background:var(--slp-card);border:1px solid var(--slp-line)}
.olp-fit__col h3{margin-bottom:var(--sp-4)}
.olp-fit ul{display:grid;gap:var(--sp-4)}
.olp-fit li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--sp-3);line-height:1.7}
.olp-fit li>.olp-icon{width:20px;height:20px;margin-top:4px;color:var(--slp-success)}
.olp-fit__col--no li>.olp-icon{color:var(--slp-sub)}
.olp-fit__pick{display:block;margin-top:2px;font-size:14px;font-weight:700;color:var(--slp-cta-hover)}

/* ---------- 表（table-cards。600px 以下は 1 行を 1 枚のカード） ---------- */
.olp-table{width:100%;border-collapse:collapse;background:var(--slp-card);border:1px solid var(--slp-line);font-size:15px}
.olp-table caption{font-size:var(--fs-h3);font-weight:700;line-height:1.35;margin:0 0 var(--sp-3)}
/* 表の題を h3 にする形（captionHeading。モックの SSL の h3.tbl-title と同じ見た目）。h3 は表の直前・表の名前は aria-labelledby */
.olp-table__title{margin:0 0 var(--sp-3);font-size:var(--fs-h3);line-height:1.35}
.olp-table th,.olp-table td{padding:14px clamp(8px,2.5vw - 3px,16px);border-bottom:1px solid var(--slp-line);text-align:left;vertical-align:middle;line-height:1.6}
.olp-table thead th{font-size:14px;color:var(--slp-body);background:var(--slp-bg);font-weight:700;white-space:nowrap}
.olp-table tbody th{font-weight:700;color:var(--slp-ink)}
.olp-table .olp-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700;color:var(--slp-ink)}
.olp-table tr.olp-table__rec{background:var(--slp-accent-bg)}
.olp-rec{display:inline-block;margin-left:var(--sp-2);padding:0 8px;border-radius:var(--slp-r-full);background:var(--slp-coral-bg);color:var(--slp-coral-ink);font-size:13px;font-weight:700;line-height:1.7;white-space:nowrap}
.olp-table__note{margin-top:var(--sp-3)}
@media (max-width:600px){
/* caption も block（table-caption のままだと無名の表の箱が縮み、題が 1 文字ずつ縦に並ぶ） */
.olp-table,.olp-table caption,.olp-table tbody,.olp-table tr,.olp-table th,.olp-table td{display:block}
.olp-table{border:0;background:transparent}
.olp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.olp-table tbody tr{background:var(--slp-card);border:1px solid var(--slp-line);border-radius:var(--slp-r-l);padding:var(--sp-4);margin-bottom:var(--sp-3)}
.olp-table tr.olp-table__rec{border-color:var(--slp-cta)}
.olp-table tbody th{padding:0 0 var(--sp-2);border:0;font-size:18px}
/* td の中の文・nowrap の span・リンクは flex の別々の子になる。折り返して右に詰め（間 0）、列の名前を左に押す（はみ出さない） */
.olp-table td{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:2px 0;padding:8px 0;border-bottom:1px dashed var(--slp-line);text-align:left}
.olp-table td:last-child{border-bottom:0}
.olp-table td::before{content:attr(data-label);flex:none;margin-right:auto;padding-right:var(--sp-3);text-align:left;font-size:14px;font-weight:700;color:var(--slp-sub)}
}
/* 2 列で 2 列目が num でない表（olp-table--pair・T0126-S-02）: 600px 以下のカードで値の前の列見出しを出さず、値を左寄せの 1 段に（1 列目がカードの見出し） */
@media (max-width:600px){.olp-table--pair td::before{content:none}.olp-table--pair td{display:block;padding:0}}
/* auto-phrase の無いブラウザ（WebKit・Firefox）の本文のセル: 行の長さをそろえ、最後の行に 1 字だけ残さない（CU-04。WebKit 26.6 の 54 ページ×26 幅で 83→0・新しい印 0） */
@supports not (word-break:auto-phrase){.olp td{text-wrap:balance}}

/* ---------- 価格の条件の欄（x-olp.terms・B18 の意匠の直し T14-S2）。15px・--slp-body（olp-note にしない）。600px 未満は名前の下に値・以上は 名前｜値（grid） ---------- */
.olp-terms{margin:var(--sp-3) 0 0;font-size:15px;line-height:1.7;color:var(--slp-body)}
.olp-terms>div{padding:6px 0;border-top:1px solid var(--slp-line)}
.olp-terms dt{font-weight:700;color:var(--slp-ink)}
.olp-terms dd{margin:0}
.olp-terms dd p{margin:0}
@media (min-width:600px){.olp-terms>div{display:grid;grid:auto/7em minmax(0,1fr);gap:0 var(--sp-3)}}

/* ---------- FAQ（1 列・区切り線・「+」・質問のタイプ別） ---------- */
.olp-faq{max-width:860px}
.olp-faq__group+.olp-faq__group{margin-top:var(--sp-6)}
.olp-faq__type{font-size:14px;font-weight:700;color:var(--slp-cta-hover);letter-spacing:.04em;margin:0 0 var(--sp-2)}
.olp-faq details{border-top:1px solid var(--slp-line)}
.olp-faq__group details:last-of-type{border-bottom:1px solid var(--slp-line)}
.olp-faq summary{display:block;list-style:none;cursor:pointer;position:relative;padding:var(--sp-4) 48px var(--sp-4) 0;font-size:17px;font-weight:700;color:var(--slp-ink);line-height:1.6;min-height:48px}
.olp-faq summary::-webkit-details-marker{display:none}
.olp-faq summary::before,.olp-faq summary::after{content:"";position:absolute;right:8px;top:50%;width:16px;height:2px;margin-top:-1px;background:var(--slp-cta)}
.olp-faq summary::after{width:2px;height:16px;margin-top:-8px;right:15px}
.olp-faq details[open] summary::after{display:none}
.olp-faq__a{padding:0 0 var(--sp-5);color:var(--slp-body)}
.olp-faq__a p{margin:0 0 var(--sp-2)}
.olp-faq__a p:last-child{margin:0}

/* ---------- 締めの CTA（brief §2 #17）。2 つの形（9/29 の決定）: search＝淡い青の帯・見出しの下に幅いっぱいの検索窓の枠／
   buttons＝灰色の帯の中の白い枠・見出し｜ボタンの組 ---------- */
.olp-closing--search{background:var(--slp-accent-soft)}
.olp-closing--buttons{background:var(--slp-bg)}
/* 前の帯と同じ地なら 1 つの帯に見せる（.olp-sec--gray+.olp-sec--gray と同じ考え。FAQ の灰色の帯の後の buttons ほか） */
.olp-sec--gray+.olp-closing--buttons,.olp-sec--tint+.olp-closing--search{padding-top:0}
.olp-closing__in{display:grid;gap:var(--sp-5);align-items:center}
.olp-closing__in .olp-btns{margin-top:0}
.olp-closing p{margin-top:var(--sp-3)}
.olp-closing__act{display:grid;gap:var(--sp-3);min-width:0}
.olp-closing__act p{margin:0;font-size:15px}
.olp-closing--buttons .olp-closing__in{background:var(--slp-card);border:1px solid var(--slp-line);border-radius:var(--slp-r-l);padding:var(--card-pad)}
.olp-closing--search .olp-closing__in{gap:var(--sp-4)}
.olp-closing--search .olp-dsearch{background:var(--slp-card);border:1px solid var(--slp-accent-line);border-radius:var(--slp-r-l);padding:var(--sp-4)}
@media (min-width:1100px){.olp-closing--buttons .olp-closing__in{grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-7);padding:var(--sp-6) var(--sp-7)}.olp-closing--stack .olp-closing__in{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}.olp-closing--search .olp-dsearch{padding:var(--sp-5) var(--sp-6)}}

/* ---------- 信頼帯（trust-bar） ---------- */
.olp-trust{display:grid;border:1px solid var(--slp-line);border-radius:var(--slp-r-l);background:var(--slp-card)}
.olp-trust__item{display:grid;grid-template-columns:40px 1fr;gap:var(--sp-3);padding:var(--sp-4) var(--card-pad);align-items:start}
.olp-trust__item+.olp-trust__item{border-top:1px solid var(--slp-line)}
.olp-trust__ic{width:40px;height:40px;border-radius:var(--slp-r-m);background:var(--slp-accent-soft);color:var(--slp-cta);display:grid;place-items:center}
.olp-trust__ic .olp-icon{width:22px;height:22px}
.olp-trust__label{font-size:13px;font-weight:700;color:var(--slp-cta-hover);margin:0;line-height:1.5}
.olp-trust__value{font-size:16px;font-weight:700;color:var(--slp-ink);margin:2px 0 0;line-height:1.5}
.olp-trust__sub{font-size:14px;color:var(--slp-sub);margin:2px 0 0;line-height:1.6;text-wrap:balance}
@media (min-width:1100px){.olp-trust--c2{grid-template-columns:repeat(2,1fr)}.olp-trust--c3{grid-template-columns:repeat(3,1fr)}.olp-trust--c4{grid-template-columns:repeat(4,1fr)}.olp-trust__item+.olp-trust__item{border-top:0;border-left:1px solid var(--slp-line)}}

/* ---------- 一覧（catalog）: カード・行の一覧・文字のリンク ---------- */
.olp-grps{display:block}
.olp-grp{display:grid;gap:var(--sp-4)}
.olp-grp+.olp-grp{margin-top:var(--sp-7)}
.olp-grp__head p{margin-top:var(--sp-2)}
.olp-grp--art{grid-template-areas:"fig" "head" "list"}
.olp-grp--art .olp-grp__art{grid-area:fig;max-width:480px}
.olp-grp--art .olp-grp__head{grid-area:head}
.olp-grp--art .olp-grp__list{grid-area:list}
@media (min-width:1100px){
.olp-grps--stack .olp-grp{grid-template-columns:320px minmax(0,1fr);gap:var(--sp-7)}
.olp-grps--stack .olp-grp__head h2{font-size:28px}
.olp-grps--stack .olp-grp+.olp-grp{padding-top:var(--sp-7);border-top:1px solid var(--slp-line)}
.olp-grps--stack .olp-grp--art{grid-template-rows:auto 1fr;grid-template-areas:"head list" "fig list";row-gap:var(--sp-5);align-items:start}
.olp-grps--stack .olp-grp--art .olp-grp__art{max-width:none}
.olp-grps--cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);align-items:start}
.olp-grps--cols .olp-grp+.olp-grp{margin-top:0}
}
.olp-grps--cols .olp-grp{background:var(--slp-card);border:1px solid var(--slp-line);border-radius:var(--slp-r-l);padding:var(--sp-2) 0;gap:0}
.olp-grps--cols .olp-grp+.olp-grp{margin-top:var(--sp-4)}
.olp-grps--cols .olp-grp__head{padding:var(--sp-3) 20px var(--sp-1)}
.olp-grps--cols .olp-grp__head h3{font-size:15px;color:var(--slp-cta-hover);letter-spacing:.04em}
.olp-cards{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.olp-cards--c2,.olp-cards--c4{grid-template-columns:repeat(2,minmax(0,1fr))}.olp-cards--c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.olp-cards--c4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.olp-card{display:flex;flex-direction:column;gap:var(--sp-2);height:100%;border:1px solid var(--slp-line);border-radius:var(--slp-r-l);background:var(--slp-card);padding:var(--sp-5);text-decoration:none;color:inherit}
a.olp-card:hover{border-color:var(--slp-cta)}
.olp-card__t{font-size:var(--fs-h3);font-weight:700;color:var(--slp-ink);line-height:1.35}
.olp-card p{margin:0;font-size:15px;line-height:1.7;color:var(--slp-body)}
.olp-card__more{margin-top:auto;padding-top:var(--sp-2);font-size:14px;font-weight:700;color:var(--slp-cta-hover)}
.olp-card__ic{width:48px;height:48px;border-radius:50%;background:var(--slp-accent-soft);color:var(--slp-cta);display:grid;place-items:center;margin-bottom:var(--sp-1)}
.olp-card__ic .olp-icon{width:24px;height:24px}
.olp-list{border:1px solid var(--slp-line);border-radius:var(--slp-r-l);background:var(--slp-card);overflow:hidden}
.olp-grps--cols .olp-list{border:0;border-radius:0}
.olp-list li+li{border-top:1px solid var(--slp-line)}
.olp-list__a{display:grid;column-gap:var(--sp-4);row-gap:var(--sp-2);align-items:center;grid-template-columns:44px minmax(0,1fr) 20px;grid-template-areas:"ic body arr" "ic chips arr";padding:var(--sp-4);text-decoration:none;color:inherit;min-height:48px}
.olp-list__a:hover{background:var(--slp-accent-soft)}
.olp-list__ic{grid-area:ic;align-self:start;width:44px;height:44px;border-radius:var(--slp-r-m);background:var(--slp-accent-soft);color:var(--slp-cta);display:grid;place-items:center}
.olp-list__ic .olp-icon{width:24px;height:24px}
.olp-list__body{grid-area:body;min-width:0}
.olp-list__t{display:block;font-size:18px;font-weight:700;color:var(--slp-ink);line-height:1.4}
.olp-list__d{display:block;margin:2px 0 0;font-size:15px;line-height:1.65;color:var(--slp-body)}
.olp-list__chips{grid-area:chips;display:flex;flex-wrap:wrap;gap:6px}
.olp-list__chips:empty{display:none}
.olp-list__arr{grid-area:arr;width:20px;height:20px;color:var(--slp-sub)}
.olp-tag{font-size:13px;line-height:1.5;padding:2px 10px;border-radius:var(--slp-r-full);border:1px solid var(--slp-line);color:var(--slp-body);background:var(--slp-card);white-space:nowrap}
.olp-tag--kind{border-color:var(--slp-accent-line);background:var(--slp-accent-soft);color:var(--slp-cta-hover);font-weight:700}
.olp-grps--cols .olp-list__a{grid-template-columns:40px minmax(0,1fr) 18px;grid-template-areas:"ic body arr";padding:var(--sp-3) 20px;min-height:64px}
.olp-grps--cols .olp-list__ic{align-self:center;width:40px;height:40px;border-radius:50%}
.olp-grps--cols .olp-list__t{font-size:16px}
.olp-grps--cols .olp-list__d{font-size:14px;color:var(--slp-sub)}
@media (min-width:700px){.olp-list__a{padding:var(--sp-4) var(--sp-5)}}
@media (min-width:1100px){.olp-grps--stack .olp-list__a{grid-template-columns:44px minmax(0,1fr) minmax(0,max-content) 20px;grid-template-areas:"ic body chips arr"}.olp-grps--stack .olp-list__ic{align-self:center}.olp-grps--stack .olp-list__chips{justify-content:flex-end;max-width:260px}}
.olp-links{display:grid;border-top:1px solid var(--slp-line)}
@media (min-width:700px){.olp-links{grid-template-columns:1fr 1fr;column-gap:var(--sp-6)}}
.olp-links li{border-bottom:1px solid var(--slp-line)}
.olp-links a{display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:2px var(--sp-3);align-items:center;min-height:56px;padding:var(--sp-3) 0;text-decoration:none;color:inherit}
.olp-links__t{font-size:16px;font-weight:700;color:var(--slp-cta-hover);text-decoration:underline;text-underline-offset:3px}
.olp-links__d{grid-column:1;font-size:15px;line-height:1.6;color:var(--slp-body)}
.olp-links__arr{grid-column:2;grid-row:1/span 2;color:var(--slp-cta-hover);font-weight:700}
.olp-catalog__foot{margin-top:var(--sp-6);font-size:15px}

/* ---------- 画面の例（product-shot）・構成図（diagram） ---------- */
.olp-demo{margin:0;background:var(--slp-bg);border:1px solid var(--slp-line);border-radius:var(--slp-r-l);padding:var(--sp-4)}
.olp-demo__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2);margin:0 0 var(--sp-3)}
.olp-demo__ttl{font-size:14px;font-weight:700;color:var(--slp-body)}
.olp-demo__tag{display:inline-block;margin-left:auto;padding:0 10px;border-radius:var(--slp-r-full);background:var(--slp-line);color:var(--slp-body);font-size:13px;font-weight:700;line-height:1.8;white-space:nowrap}
.olp-demo__body{pointer-events:none}
.olp-demo figcaption,.olp-diagram figcaption{margin-top:var(--sp-3);font-size:var(--fs-note);color:var(--slp-sub);line-height:1.7}
.olp-diagram{margin:0;background:var(--slp-card);border:1px solid var(--slp-line);border-radius:var(--slp-r-l);padding:var(--card-pad)}
.olp-sec--gray .olp-diagram,.olp-sec--tint .olp-diagram{border-color:var(--slp-card)}
/* 見出しの横の絵（x-olp.diagram の art。モックの SSL の lv-head） */
.olp-diagram-head{display:grid;gap:var(--sp-5);margin-bottom:var(--sp-6)}
.olp-diagram-head .olp-sec__head{margin-bottom:0}
.olp-diagram-head__art{max-width:560px;min-width:0}
@media (min-width:1100px){.olp-diagram-head{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:var(--sp-7);align-items:center}.olp-diagram-head__art{max-width:none}}
.olp-shot{margin:0}
.olp-shot img{border:1px solid var(--slp-line);border-radius:var(--slp-r-l)}
/* 複数の図の並び（x-olp.demo layout="shots"。モックの SSL の shots2） */
.olp-shots{display:grid;gap:var(--sp-5)}
@media (min-width:860px){.olp-shots--c2{grid-template-columns:repeat(2,minmax(0,1fr))}.olp-shots--c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.olp-shots>.olp-shot{min-width:0}
.olp-shot__body{pointer-events:none}
.olp-shot figcaption{margin-top:var(--sp-2);font-size:var(--fs-note);color:var(--slp-sub);line-height:1.7}
/* 結果と入力の例（x-olp.example・B18 の意匠の直し T23-S-03・PLAN-S2-02・PLAN-S2-07）。x-olp.demo の中の押せない絵。右の余白は取らない */
.olp-ex{margin:0;font-size:14px;line-height:1.6;color:var(--slp-body)}
/* rows は幅によらず 1 行 1 枚（R2-M1）。値の前に列見出し（data-label と data-sep） */
.olp-ex--rows,.olp-ex--rows tbody{display:block}
.olp-ex--rows{background:var(--slp-card);border:1px solid var(--slp-line)}
.olp-ex--rows thead{display:none}
.olp-ex--rows tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 12px}
.olp-ex--rows tr+tr{border-top:1px solid var(--slp-line)}
.olp-ex--rows :is(th,td){min-width:0;padding:0;border:0;text-align:left;overflow-wrap:normal}
.olp-ex--rows th{flex-basis:100%;font-weight:700}
.olp-ex--rows td[data-label]::before{content:attr(data-label) attr(data-sep);color:var(--slp-sub);white-space:nowrap}
.olp-ex__tag{display:inline-block;padding:0 8px;border-radius:var(--slp-r-full);background:var(--slp-success-bg);color:var(--slp-success);font-size:13px;font-weight:700;white-space:nowrap}
.olp-ex__btn{display:inline-block;padding:4px 14px;border-radius:var(--slp-r-pill);background:var(--slp-cta);color:var(--slp-card);font-size:13px;font-weight:700;white-space:nowrap}
.olp-ex__pre{white-space:pre-wrap;overflow-wrap:anywhere;font-family:"SF Mono",Consolas,Menlo,monospace;background:var(--slp-card);border:1px solid var(--slp-line);border-radius:var(--slp-r-m);padding:var(--sp-3)}
.olp-ex--kv>div{display:grid;grid:auto/9em minmax(0,1fr);gap:0 var(--sp-3);padding:6px 0;border-top:1px solid var(--slp-line)}
.olp-ex--kv dt{font-weight:700;color:var(--slp-ink)}
.olp-ex--pair{display:grid;gap:var(--sp-3)}
@media (min-width:700px){.olp-ex--pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.olp-ex__side{background:var(--slp-card);border:1px solid var(--slp-line);border-radius:var(--slp-r-m);padding:var(--sp-3)}
.olp-ex__label{margin:0 0 var(--sp-1);font-size:13px;font-weight:700;color:var(--slp-sub)}
.olp-ex__body p{margin:0}
.olp-ex--names .olp-ex--kv{margin-top:var(--sp-2)}
.olp-ex--names .olp-ex--kv>div{grid-template-columns:minmax(0,1fr)}
.olp-ex__names{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.olp-ex__names li{padding:2px 12px;border:1px solid var(--slp-accent-line);border-radius:var(--slp-r-full);background:var(--slp-card);font-weight:700;white-space:nowrap}
.olp-ex--arrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.olp-ex__from,.olp-ex__to{padding:6px 12px;border:1px solid var(--slp-line);border-radius:var(--slp-r-m);background:var(--slp-card);font-weight:700;overflow-wrap:anywhere}
.olp-ex__via{display:inline-flex;align-items:center;gap:var(--sp-2)}
.olp-ex__arr{position:relative;width:32px;height:2px;background:var(--slp-sub)}
.olp-ex__arr::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left-color:var(--slp-sub);border-right:0}
@media (max-width:599.98px){.olp-ex--arrow{flex-direction:column;align-items:flex-start}.olp-ex__arr{width:2px;height:24px}.olp-ex__arr::after{right:auto;top:auto;left:-4px;bottom:-1px;border:5px solid transparent;border-top-color:var(--slp-sub);border-bottom:0}}

/* ---------- TLD カード（tld-card。.com は 2 列ぶんの「おすすめ」） ---------- */
.olp-tlds{display:grid;gap:var(--sp-3);grid-template-columns:minmax(0,1fr)}
@media (min-width:360px){.olp-tlds{grid-template-columns:repeat(2,minmax(0,1fr))}.olp-tld--pick{grid-column:span 2}}
@media (min-width:700px){.olp-tlds{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}}
.olp-tld{display:flex;flex-direction:column;background:var(--slp-card);border:1px solid var(--slp-line);border-radius:var(--slp-r-l);padding:var(--sp-4) 14px}
.olp-tld--pick{border:2px solid var(--slp-cta)}
@media (min-width:360px){.olp-tld--pick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;column-gap:var(--sp-4);grid-template-areas:"b b" "n p" "f r" "f c" "x x"}.olp-tld--pick .olp-tld__badges{grid-area:b}.olp-tld--pick .olp-tld__name{grid-area:n}.olp-tld--pick .olp-tld__feat{grid-area:f;margin-bottom:0}.olp-tld--pick .olp-tld__price{grid-area:p;margin-top:10px}.olp-tld--pick .olp-tld__renew{grid-area:r}.olp-tld--pick .olp-tld__cond{grid-area:c}.olp-tld--pick .olp-tld__btn{grid-area:x}}
@media (min-width:1100px){.olp-tld{padding:20px}}
.olp-tld__badges{display:flex;flex-wrap:wrap;gap:6px}
.olp-tld__pick{font-size:13px;font-weight:700;line-height:1.6;color:var(--slp-card);background:var(--slp-cta);border-radius:var(--slp-r-full);padding:1px 10px;white-space:nowrap}
.olp-tld__elig{font-size:13px;line-height:1.6;color:var(--slp-ink);background:var(--slp-accent-soft);border:1px solid var(--slp-accent-line);border-radius:var(--slp-r-full);padding:0 9px;white-space:nowrap}
.olp-tld__name{margin-top:10px;font-size:28px;line-height:1.2;font-feature-settings:normal;word-break:normal}
.olp-tld__name a{display:inline-flex;align-items:center;gap:2px;color:var(--slp-ink);text-decoration:none}
.olp-tld__name a:hover{color:var(--slp-cta-hover);text-decoration:underline;text-underline-offset:4px}
.olp-tld__name .olp-icon{width:20px;height:20px;color:var(--slp-sub)}
.olp-tld__feat{margin:6px 0 var(--sp-4);font-size:14px;line-height:1.65;color:var(--slp-body);text-wrap:balance}
.olp-tld__price{margin:auto 0 0}
.olp-tld__lblrow{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin:0}
.olp-tld__lbl{font-size:13px;font-weight:700;color:var(--slp-sub);line-height:1.5}
.olp-tld__camp{font-size:12px;font-weight:700;line-height:1.5;color:var(--slp-warning);background:var(--slp-warning-bg);border:1px solid var(--slp-warning-line);border-radius:var(--slp-r-full);padding:0 8px;white-space:nowrap}
.olp-tld__num{margin:2px 0 0;font-size:26px;font-weight:700;color:var(--slp-ink);line-height:1.25}
.olp-tld__yen{font-size:15px;font-weight:700;margin-left:1px}
.olp-tld__mark{font-size:13px;font-weight:700;color:var(--slp-cta-hover);margin-left:2px}
.olp-tld__renew{margin:8px 0 0;display:flex;flex-direction:column;font-size:14px;line-height:1.5}
.olp-tld__renew b{color:var(--slp-ink)}
.olp-tld__cond{margin:6px 0 0}
.olp-tld__btn{margin-top:14px;width:100%;min-height:44px;padding:8px 10px;font-size:15px}
@media (max-width:380px){.olp-tld__num{font-size:23px}}
.olp-tld__notes{display:grid;gap:6px;margin:var(--sp-5) 0 0;font-size:14px;line-height:1.7;color:var(--slp-sub)}

/* ---------- 右下の「?」（layout のヘルプのボタン・DocsBot）の分の余白（600px 未満）----------
   layout と「?」は変えない。「?」は右 12px・下 16px・44px 四方（design/checks の B08.D7 の代わり・モックの .help-fab と同じ）。
   本文の最後（x-olp.page の下）に 44＋16＋4 の余白、幅いっぱいの行（道案内・一覧・リンク・カード・FAQ・ボタン・検索窓・入力面・
   行ごとの説明〔x-olp.row の文〕・手順・向き不向き）の右に 12＋44＋4−20（帯の左右の余白）の余白を取る。帯の見出しとリード・要点・表・信頼帯は幅いっぱいのまま。
   一覧の行（.olp-list）は枠を幅いっぱいのまま、リンクの箱だけを縮め、矢印を余白の側へ出し、アイコンを 32px にして、題の幅を今までより狭くしない */
@media (max-width:599.98px){.olp{--olp-help-gap:40px;padding-bottom:64px}
.olp :is(.olp-pick,.olp-list__a,.olp-links,.olp-cards,.olp-faq,.olp-btns,.olp-dsearch,.olp-tool,.olp-row__text,.olp-steps,.olp-fit){margin-right:var(--olp-help-gap)}
.olp .olp-list li{position:relative}
.olp .olp-list__a{grid-template-columns:32px minmax(0,1fr);grid-template-areas:"ic body" "ic chips"}
.olp .olp-list__ic{width:32px;height:32px}
.olp .olp-list__ic .olp-icon{width:20px;height:20px}
.olp .olp-list__arr{position:absolute;right:12px;top:50%;margin-top:-10px}}

/* ---------- B18 の意匠の直し: ページに置いた今の画面（Livewire）・検索窓・TLD の締め ----------
   今の画面の class を名指しするのはこの節の規則だけ（Livewire の DOM と旧い CSS は変えない・OneLpCssTest の LEGACY_DOM_CLASSES） */
/* オークションの一覧（T05-06・裁き R5）: Livewire の一覧の塊の左右の余白を 0 にし、左端の軸を h1 とそろえる（上下は変えない）。
   .olp と .olp-p-auction-list は同じ要素で詳細度 0,3,0（common.css の .open-area__active-detail.edit_none 0,2,0・main section.auction-faq 0,1,2 に勝つ） */
.olp.olp-p-auction-list :is(.open-area__active-detail,.auction-point,.auction-flow,.auction-faq){padding-inline:0}
/* 英語の gTLD の訴求のカード 3 枚（TM-P-auction-03）: 769px 以上の 2 列（旧い CSS の li 49%）で右下が空くので 1 列 */
.olp-p-auction-list .gtld-why .topic_list li{width:100%}
/* オークションの一覧とバックオーダーの検索欄: 右の固定の「.jp」と文字の末尾を重ねない（TM-S-03） */
.olp .olp-tool .backorder-form__name input[type=text]:not(#olp-id-boost){padding-right:3.2em;text-overflow:ellipsis}
/* 一括検索の結果の表: 金額は折らない。960px 以上は折り返す flex と決めた列の幅（10/06 本番の崩れ・枠を開くと列が狭い） */
.olp.olp-p-domain-bulk-search .olp-raw :is(.domain-price,.domain-renew){white-space:nowrap}
.olp.olp-p-domain-bulk-search .olp-raw .domain-table .sp{white-space:normal;text-wrap:balance}
.olp-p-domain-bulk-search .bulk-search-list__body-dom{overflow-wrap:anywhere}
.olp-p-domain-bulk-search .bulk-search-list__body-cart{flex-wrap:wrap}
@media (min-width:960px){
.olp.olp-p-domain-bulk-search .olp-raw :is(.bulk-search-list__head,.bulk-search-list__body li){flex-wrap:wrap}
.olp.olp-p-domain-bulk-search .olp-raw :is(.bulk-search-list__head-dom,.bulk-search-list__body-dom){flex:1 1 8rem;width:auto;min-width:0}
.olp.olp-p-domain-bulk-search .olp-raw :is(.bulk-search-list__body-cart,.bulk-search-list__head li:nth-child(2)){flex:0 1 auto;flex-wrap:wrap;width:auto;min-width:0;margin:0 0 0 auto;justify-content:flex-end}
.olp.olp-p-domain-bulk-search .olp-raw .bulk-search-list__head li:nth-child(2){flex-grow:1;padding:0 .75rem}
.olp.olp-p-domain-bulk-search .olp-raw :is(.domain-price,.domain-renew,.domain-price__head,.domain-renew__head,.domain-status__head){flex:0 0 auto;width:auto;max-width:none;margin:0;padding:0 .5rem 0 0;text-align:right;white-space:nowrap}
.olp.olp-p-domain-bulk-search .olp-raw :is(.domain-price,.domain-price__head){min-width:8rem}
.olp.olp-p-domain-bulk-search .olp-raw :is(.domain-renew,.domain-renew__head){min-width:5rem}
.olp.olp-p-domain-bulk-search .olp-raw :is(.domain-status:not(.status-loading),.domain-status__head){min-width:4.5rem;padding:0}
.olp.olp-p-domain-bulk-search .olp-raw :is(.domain-price__head,.domain-renew__head){font-size:13px}
.olp.olp-p-domain-bulk-search .olp-raw :is(.domain-price,.domain-renew){font-size:20px}
.olp.olp-p-domain-bulk-search .olp-raw .price-lang{font-size:15px}
}
/* 移管の結果の表（一括検索と同じ崩れ・同じ直し）: 名前は欄の中で折る・960px 以上は折り返す flex と決めた列の幅 */
.olp-p-domain-transfer .transfer-list__body-dom{overflow-wrap:anywhere}
@media (min-width:960px){
.olp.olp-p-domain-transfer .olp-raw :is(.transfer-list__head,.transfer-list__body li,.transfer-list__body-domBlock,.transfer-list__body-cart){flex-wrap:wrap}
.olp.olp-p-domain-transfer .olp-raw :is(.transfer-list__head-dom,.transfer-list__body-domBlock){flex:1 1 22rem;width:auto;min-width:0}
.olp.olp-p-domain-transfer .olp-raw .transfer-list__body-domBlock{flex-direction:row;align-items:center;padding:0}
.olp.olp-p-domain-transfer .olp-raw .transfer-list__body-dom{flex:1 1 14rem;width:auto;max-width:none}
.olp.olp-p-domain-transfer .olp-raw .transfer-list__body-choice{flex:0 1 auto;max-width:100%;margin:0}
.olp.olp-p-domain-transfer .olp-raw .transfer-list__body-message{flex:0 0 100%}
.olp.olp-p-domain-transfer .olp-raw :is(.transfer-list__body-cart,.transfer-list__head li:nth-child(2)){flex:0 1 auto;width:auto;min-width:0;margin:0 0 0 auto;justify-content:flex-end}
.olp.olp-p-domain-transfer .olp-raw .transfer-list__head li:nth-child(2){flex-grow:1;padding:0 .75rem}
.olp.olp-p-domain-transfer .olp-raw :is(.domain-price,.domain-price__head,.domain-status__head){flex:0 0 auto;width:auto;max-width:none;margin:0;padding:0 .5rem 0 0;text-align:right;white-space:nowrap}
.olp.olp-p-domain-transfer .olp-raw .domain-price{min-width:8rem;font-size:20px}
.olp.olp-p-domain-transfer .olp-raw .domain-price__head{min-width:8rem;font-size:13px}
.olp.olp-p-domain-transfer .olp-raw :is(.domain-status:not(.status-loading),.domain-status__head){min-width:4.5rem;padding:0}
.olp.olp-p-domain-transfer .olp-raw .price-lang{font-size:15px}
}
@media (max-width:599.98px){
/* 検索窓と WHOIS の入力面: 入力欄は行いっぱい、ボタンは次の行に行いっぱい（TM-S-02・食い違い K33: 先頭の .olp で 0,2,0 にし、
   .olp-dsearch__row input・.olp-dsearch__row .olp-btn・.olp-tool__row>:first-child の後ろに置く） */
.olp :is(.olp-dsearch__row,.olp-tool__row){flex-wrap:wrap}
.olp :is(.olp-dsearch__row,.olp-tool__row)>*{flex:1 1 100%}
/* TLD のページの締めの白い枠の右端を、本文とカードの右端（「?」の余白）にそろえる（tld-23(a)・裁き R5・R19）。枠の中のボタンの並びは二重に縮めない */
.olp-p-tld-show .olp-closing__in{margin-right:var(--olp-help-gap)}
.olp-p-tld-show .olp-closing__in .olp-btns{margin-right:0}
}

/* 動きを止める（B12）。重要度の指定を使うのはこの規則だけ */
@media (prefers-reduced-motion:reduce){.olp *,.olp *::before,.olp *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}