/* public/css/top.css
   トップページ（public/index.html）だけの見た目。魔法陣＝システム構成図の世界（段階3、2026-10-12）。
   色・書体は style.css の :root（--sg-*）を使う。構成図（.ad）の線と文字は style.css 側。
   動き（GSAP）は public/js/top.js。HTML と CSS の既定は「描き終わった最終状態」。 */

/* ==========================================================================
   土台
   ========================================================================== */
@media (min-width: 1024px) {
    /* 画面端の小さな陣（右端 10〜54px）と本文が重ならないよう、PC のガターを 64px にそろえる。
       ヘッダー・フッターも同じ変数を使うので、左右の端は全体でそろう。 */
    .tp-page {
        --sg-gut: 64px;
    }
}

.tp-main {
    position: relative;
    color: var(--sg-text);
    overflow-x: clip;
    background:
        radial-gradient(1100px 760px at 76% 360px, rgba(var(--sg-silver-rgb), .05), transparent 70%),
        var(--sg-ground);
}

.tp-sec {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(56px, 5.4vw, 80px) var(--sg-gut) 0;
}

/* ヒーローの直後は詰める（comp の上段: ヒーローの下に相談内容の目次が見えている） */
.tp-hero + .tp-sec {
    padding-top: clamp(40px, 3.4vw, 52px);
}

.tp-head {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 28px);
    margin-bottom: clamp(22px, 2.4vw, 32px);
}

.tp-h2 {
    flex: none;
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .08em;
    color: var(--sg-white);
}

.tp-rule {
    flex: 1;
    min-width: 24px;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--sg-silver-rgb), .5), rgba(var(--sg-silver-rgb), .16));
}

.tp-head-link,
.tp-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--sg-brass);
    transition: color .25s var(--sg-ease-out);
}

.tp-head-link {
    flex: none;
}

.tp-head-link:hover,
.tp-text-link:hover {
    color: var(--sg-white);
}

.tp-arr {
    flex: none;
    width: 18px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s var(--sg-ease-out);
}

.tp-head-link:hover .tp-arr,
.tp-text-link:hover .tp-arr,
.sg-btn-red:hover .tp-arr {
    transform: translateX(4px);
}

.tp-lead {
    margin: -12px 0 22px;
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--sg-mute);
}

.tp-note {
    font-size: 14px;
    line-height: 1.9;
    color: var(--sg-mute);
    max-width: 62em;
}

/* 和文の見出し・題は文節で折り返す（auto-phrase 非対応のブラウザは従来どおり） */
.tp-h2,
.tp-hero-h1,
.tp-sol-title,
.tp-wk-title,
.tp-proc-name,
.tp-pr-name,
.tp-faq-sum,
.tp-flow-title,
.tp-flow-h,
.tp-contact-lead,
.tp-doc-h,
.tp-sol-rel-a {
    word-break: auto-phrase;
}

.tp-nb {
    display: inline-block;
}

/* 枠の角の「＋」目盛り */
.tp-x {
    position: absolute;
    width: 11px;
    height: 11px;
    pointer-events: none;
    z-index: 2;
    opacity: .7;
    background:
        linear-gradient(var(--sg-silver), var(--sg-silver)) center / 1px 100% no-repeat,
        linear-gradient(var(--sg-silver), var(--sg-silver)) center / 100% 1px no-repeat;
}

.tp-x-tl { left: 6px; top: 6px; }
.tp-x-tr { right: 6px; top: 6px; }
.tp-x-bl { left: 6px; bottom: 6px; }
.tp-x-br { right: 6px; bottom: 6px; }

/* ==========================================================================
   1. ヒーロー
   ========================================================================== */
.tp-hero {
    max-width: 1440px;
    margin: 0 auto;
    padding: 36px var(--sg-gut) 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

.tp-hero-sig {
    display: flex;
    align-items: center;
    gap: 18px;
    font-family: var(--sg-en);
    font-size: 12px;
    letter-spacing: .16em;
    color: var(--sg-brass);
}

.tp-hero-sig::after {
    content: "";
    width: 64px;
    height: 1px;
    background: currentColor;
}

.tp-hero-en {
    margin-top: 22px;
    font-family: var(--sg-en);
    font-size: clamp(11px, 1.05vw, 15px);
    letter-spacing: .34em;
    color: var(--sg-silver);
    white-space: nowrap;
}

.tp-hero-h1 {
    margin-top: 14px;
    font-size: clamp(40px, 4.7vw, 68px);
    font-weight: 900;
    line-height: 1.16;
    letter-spacing: .01em;
    color: var(--sg-white);
}

.tp-hero-h1 span {
    display: block;
}

.tp-hero-lead {
    margin-top: clamp(16px, 2.2vh, 24px);
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: .04em;
    text-wrap: pretty;
    word-break: auto-phrase;
    color: var(--sg-white);
}

.tp-hero-sub {
    margin-top: 12px;
    text-wrap: pretty;
    word-break: auto-phrase;
    font-size: clamp(14px, 1.06vw, 16px);
    line-height: 1.9;
    letter-spacing: .06em;
    color: var(--sg-text);
}

.tp-hero-cta {
    margin-top: clamp(24px, 3.6vh, 38px);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.tp-btn {
    min-height: 54px;
    padding: 0 30px;
    font-size: 15px;
}

.tp-btn .tp-arr {
    width: 18px;
}

.tp-btn-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 30px;
    border: 1px solid rgba(var(--sg-silver-rgb), .55);
    color: var(--sg-white);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .1em;
    transition: border-color .25s var(--sg-ease-out), background-color .25s var(--sg-ease-out);
}

.tp-btn-line:hover {
    border-color: var(--sg-silver);
    background: rgba(var(--sg-silver-rgb), .06);
}

.tp-hero-fig {
    position: relative;
    min-width: 0;
}

/* 陣の操作（一時停止・もう一度再生）。見た目は真鍮の小さな文字、押せる範囲は疑似要素で 44px に広げる */
.tp-hero-ctrl {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: 22px;
    margin: 4px 0 0;
}

.tp-hero-ctrl[hidden] {
    display: none;
}

.tp-replay {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 2px;
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--sg-brass);
    border-bottom: 1px solid rgba(var(--sg-brass-rgb), .5);
    transition: color .25s var(--sg-ease-out), border-color .25s var(--sg-ease-out);
}

.tp-replay::before {
    content: "";
    position: absolute;
    inset: -10px -8px;
}

.tp-replay .tp-ic-play,
.tp-replay[aria-pressed="true"] .tp-ic-pause {
    display: none;
}

.tp-replay[aria-pressed="true"] .tp-ic-play {
    display: inline;
}

.tp-replay[aria-pressed="true"] {
    border-bottom-style: dashed;
}

.tp-replay svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tp-replay:hover {
    color: var(--sg-silver);
    border-color: var(--sg-silver);
}

.tp-hero-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    margin-top: 10px;
    list-style: none;
}

.tp-hero-legend li {
    padding-top: 8px;
    border-top: 1px solid rgba(var(--sg-brass-rgb), .45);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--sg-silver);
}

.tp-hero-legend span {
    margin-right: .7em;
    font-family: var(--sg-en);
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--sg-brass);
}

@media (max-width: 639px) {
    .tp-hero-cta > a {
        flex: 1 1 auto;
    }
}

@media (min-width: 640px) {
    .tp-hero-fig .hs {
        max-width: 520px;
        margin: 0 auto;
    }
}

@media (min-width: 1024px) {
    .tp-hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: clamp(8px, 2vw, 32px);
        padding-top: 20px;
        padding-bottom: 0;
    }

    .tp-hero-fig .hs {
        max-width: 590px;
        margin: 0 0 0 auto;
    }

    /* 「一時停止」「もう一度再生」は陣の右下に重ねる（comp どおり、陣の下に余白の帯を作らない） */
    .tp-hero-ctrl {
        position: absolute;
        right: 0;
        bottom: -6px;
        margin: 0;
    }

    .tp-hero-legend {
        display: none;
    }
}

/* ---- ヒーローの陣（scripts/lib/render-sigil.mjs） ---- */
.hs {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.hs-k {
    fill: none;
    stroke: var(--sg-silver);
    stroke-width: 1.2;
}

.hs-thin { stroke-width: .9; }
.hs-ring { stroke-opacity: .6; }
.hs-ring-faint { stroke-opacity: .4; }
.hs-grid path { stroke-opacity: .34; }
.hs-dash { stroke-dasharray: 3 5; stroke-opacity: .22; }
.hs-tk { stroke-opacity: .7; stroke-width: 1; }
.hs-arc { stroke-width: 3; stroke-opacity: .96; stroke-linecap: round; }
.hs-main { stroke-width: 1.6; stroke-opacity: .9; }
.hs-speedl { stroke-opacity: .7; }

.hs-node rect {
    fill: var(--sg-ground);
    stroke: var(--sg-silver);
    stroke-width: 2.6;
}

.hs-node text,
.hs-ai text {
    stroke: none;
    fill: var(--sg-silver);
    font-family: var(--sg-jp);
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}

.hs-node text {
    font-size: 25px;
    letter-spacing: .02em;
}

.hs-ai rect {
    fill: var(--sg-ground);
    stroke: var(--sg-hi);
    stroke-width: 1.8;
}

.hs-ai text {
    font-family: var(--sg-en);
    font-weight: 400;
    font-size: 22px;
    fill: var(--sg-hi);
}

.hs-cn {
    stroke-opacity: .8;
    stroke-width: 2.2;
}

.hs-qlab text {
    fill: var(--sg-brass);
    font-family: var(--sg-jp);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .07em;
}

.hs-qlab .hs-qn {
    font-family: var(--sg-en);
    font-size: 12px;
    letter-spacing: .12em;
}

.hs-qlab path {
    fill: none;
    stroke: var(--sg-brass);
    stroke-width: 1.2;
}

.hs-qlab circle {
    fill: var(--sg-brass);
}

.hs-deg {
    font-family: var(--sg-en);
    font-size: 9px;
    letter-spacing: .14em;
    fill: var(--sg-brass);
    text-anchor: middle;
    dominant-baseline: central;
    paint-order: stroke;
    stroke: var(--sg-ground);
    stroke-width: 7px;
}

.hs-code {
    font-family: var(--sg-code);
    font-size: 16px;
    font-weight: 700;
    opacity: .92;
}

/* シンタックスハイライト風の 2 階調（色相は工程 02 のシアン 1 つ）: キーワードは濃く、値は少し薄く。
   流れの先頭（180° 側）ほど明るく後ろへ薄くするのは、render-sigil.mjs のマスク #hs-cm */
.hs-kw { fill: var(--sg-phase-2); }
.hs-vl { fill: var(--sg-phase-2); fill-opacity: .6; }

#hs-streams {
    filter: drop-shadow(0 0 4px rgba(var(--sg-phase-2-rgb), calc(.4 * var(--sg-phase-glow))));
}

.hs-rd { fill: var(--sg-red); }

.hs-cf text {
    stroke: none;
    fill: #FFFFFF;
    font-family: var(--sg-jp);
    font-weight: 900;
    font-size: 17px;
    letter-spacing: .04em;
    text-anchor: middle;
    dominant-baseline: central;
}

#hs-stamp {
    filter: drop-shadow(0 2px 9px rgba(230, 0, 18, var(--sg-glow)));
}

.hs-stamp-ring {
    fill: none;
    stroke: var(--sg-hi);
    stroke-opacity: .7;
    stroke-width: 1.2;
}

#hs-rip {
    fill: none;
    stroke: var(--sg-red);
    stroke-width: 2;
    opacity: 0;
}

#hs-chk circle {
    fill: var(--sg-ground);
    stroke: var(--sg-hi);
    stroke-width: 1.3;
}

#hs-chk path {
    fill: none;
    stroke: var(--sg-hi);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hs-pn {
    fill: var(--sg-ground);
    fill-opacity: .84;
    stroke: none;
}

.hs-fine-l { stroke-opacity: .3; stroke-width: .8; }
.hs-cons { stroke-opacity: .5; stroke-dasharray: 3 3; stroke-width: 1; }
.hs-cons-solid { stroke-dasharray: none; stroke-opacity: .35; }
.hs-q1circ { stroke-opacity: .8; stroke-width: 1.1; }
.hs-dim { stroke-width: 1.2; }
.hs-q1e { stroke-opacity: .55; stroke-dasharray: 3 3; }
.hs-q1f { stroke-width: 2; }

.hs-dimt,
.hs-ckt,
.hs-logt {
    fill: var(--sg-silver);
    stroke: none;
    font-family: var(--sg-jp);
    font-weight: 500;
    dominant-baseline: central;
}

.hs-dimt {
    font-size: 12px;
    text-anchor: middle;
    paint-order: stroke;
    stroke: var(--sg-ground);
    stroke-width: 4px;
}

.hs-ckt {
    font-size: 16px;
    letter-spacing: .03em;
}

.hs-logt {
    font-size: 11px;
    letter-spacing: .02em;
    fill-opacity: .82;
}

.hs-logdot {
    fill: var(--sg-brass);
    stroke: none;
}

.hs-ck rect {
    stroke-width: 1.5;
}

.hs-chp {
    stroke: var(--sg-hi);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hs-wv {
    stroke-width: 3;
    stroke-opacity: 1;
    stroke-linejoin: round;
}

.hs-wh {
    fill: none;
    stroke: var(--sg-phase-4);
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
}

/* オシロスコープの残光: 長い線ほど薄く太く、先端ほど明るく細く */
.hs-whp0 { stroke-width: 3.4; stroke-opacity: .2; }
.hs-whp1 { stroke-width: 3.8; stroke-opacity: .38; }
.hs-whp2 { stroke-width: 4.2; stroke-opacity: .65; }
.hs-whp3 { stroke-width: 5; stroke: var(--sg-phase-4); stroke: color-mix(in srgb, var(--sg-phase-4) 55%, #FFFFFF); }

:root[data-theme="light"] .hs-whp3 { stroke: var(--sg-phase-4); }

/* ライトでは滲みなし（--sg-phase-glow: 0 でも filter の計算が残るので外す） */
:root[data-theme="light"] #hs-streams,
:root[data-theme="light"] #hs-q1 > g,
:root[data-theme="light"] .hs-ai,
:root[data-theme="light"] #hs-q4 {
    filter: none;
}

/* ---- 工程の色: 各象限の図の線と文字だけ（外周・十字・中心・ラベル・引き出し線は銀白／真鍮のまま） ---- */
/* 01 設計: 方眼・図形・寸法線・注記・コンパス */
#hs-q1 { stroke: var(--sg-phase-1); }
#hs-q1 .hs-dimt { fill: var(--sg-phase-1); }
#hs-q1 .hs-cb { stroke: var(--sg-phase-1); }
#hs-q1 .hs-pin { fill: var(--sg-phase-1); }
#hs-q1 > g {
    filter: drop-shadow(0 0 3px rgba(var(--sg-phase-1-rgb), calc(.45 * var(--sg-phase-glow))));
}

/* 02 実装: コードの断片（上の .hs-kw / .hs-vl）・AI の枠・速度線 */
#hs-speed { stroke: var(--sg-phase-2); }
.hs-ai rect { stroke: var(--sg-phase-2); }
.hs-ai text { fill: var(--sg-phase-2); }
.hs-ai {
    filter: drop-shadow(0 0 4px rgba(var(--sg-phase-2-rgb), calc(.5 * var(--sg-phase-glow))));
}

/* 外周の弧（各象限の外側の太い弧）: 対応する象限の工程の色。03 確認は赤の印と同じ赤を控えめに（細く・薄く）。
   ダークだけ弱い滲み（ライトでは filter ごと外す） */
#hs-arc1 { stroke: var(--sg-phase-1); }
#hs-arc2 { stroke: var(--sg-phase-2); }
#hs-arc3 { stroke: var(--sg-red); stroke-width: 2.4; stroke-opacity: .8; }
#hs-arc4 { stroke: var(--sg-phase-4); }
#hs-arc1 { filter: drop-shadow(0 0 3px rgba(var(--sg-phase-1-rgb), calc(.5 * var(--sg-phase-glow)))); }
#hs-arc2 { filter: drop-shadow(0 0 3px rgba(var(--sg-phase-2-rgb), calc(.5 * var(--sg-phase-glow)))); }
#hs-arc3 { filter: drop-shadow(0 0 3px rgba(230, 0, 18, calc(.4 * var(--sg-phase-glow)))); }
#hs-arc4 { filter: drop-shadow(0 0 3px rgba(var(--sg-phase-4-rgb), calc(.5 * var(--sg-phase-glow)))); }
:root[data-theme="light"] .hs-arc { filter: none; }

/* 04 運用: 波形・ログ・稼働の点 */
#hs-q4 { stroke: var(--sg-phase-4); }
#hs-q4 .hs-wv { stroke-opacity: .72; }
#hs-q4 .hs-logt { fill: var(--sg-phase-4); }
#hs-q4 .hs-logdot { fill: var(--sg-phase-4); }
#hs-q4 {
    filter: drop-shadow(0 0 4px rgba(var(--sg-phase-4-rgb), calc(.45 * var(--sg-phase-glow))));
}

.hs-cb {
    fill: var(--sg-ground);
    stroke: var(--sg-hi);
    stroke-width: 1.5;
}

.hs-lead {
    stroke: var(--sg-brass);
    stroke-width: 3;
}

.hs-pin {
    fill: var(--sg-hi);
    stroke: none;
}

/* 狭い画面: 陣を幅いっぱいにし（viewBox は top.js が詰める）、細かい文字を間引く */
@media (max-width: 1023px) {
    .hs {
        overflow: hidden;
    }

    .hs-fine,
    #hs-log,
    .hs-qlab {
        display: none;
    }

    .hs-ckt { font-size: 17px; }
    .hs-dimt { font-size: 15px; }
}

/* 動きを許す環境: 描き始めまで各象限の図だけを隠す（外枠・ラベル・引き出し線は最初から見せる）。
   top.js が始まらなくても 2.5 秒後には必ず出す。 */
.tp-anim .hs-qc {
    opacity: 0;
    animation: tp-reveal .5s 2.5s forwards;
}

@keyframes tp-reveal {
    to { opacity: 1; }
}

/* ==========================================================================
   2. 相談内容から探す
   ========================================================================== */
.tp-sol {
    list-style: none;
    display: grid;
    gap: 8px;
}

.tp-sol-row {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(var(--sg-silver-rgb), .22);
    background: linear-gradient(90deg, rgba(var(--sg-silver-rgb), .025), rgba(var(--sg-silver-rgb), 0) 60%);
    transition: border-color .3s var(--sg-ease-out), background-color .3s var(--sg-ease-out);
}

.tp-sol-row:hover {
    border-color: rgba(var(--sg-silver-rgb), .72);
    background-color: rgba(var(--sg-silver-rgb), .035);
}

.tp-sol-ic .sgi {
    width: 32px;
    height: 32px;
}

@media (max-width: 767px) {
    .tp-sol-ic {
        align-self: start;
        padding-top: 2px;
    }

    .tp-sol-rel {
        flex-direction: column;
        gap: 2px;
    }

    .tp-sol-sep {
        display: none;
    }

    /* 狭い幅では読点ごとのかたまりより文節での折り返しを優先する */
    .tp-sol-title .inline-block {
        display: inline;
    }

    .tp-sol-title {
        word-break: auto-phrase;
    }
}

.tp-sol-link {
    color: var(--sg-white);
}

/* 行全体をクリック対象にする（関連する実績のリンクは上に重ねる） */
.tp-sol-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.tp-sol-link:focus-visible {
    outline: none;
}

.tp-sol-link:focus-visible::after {
    outline: 2px solid var(--sg-white);
    outline-offset: -2px;
}

.tp-sol-title {
    display: block;
    font-size: clamp(15px, 1.2vw, 17px);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .06em;
}

.tp-sol-rel {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.7;
}

.tp-sol-rel-l {
    color: var(--sg-brass);
    letter-spacing: .08em;
}

.tp-sol-rel-a {
    position: relative;
    z-index: 2;
    color: var(--sg-mute);
    text-decoration: underline;
    text-decoration-color: rgba(var(--sg-mute-rgb), .4);
    text-underline-offset: .28em;
    transition: color .25s var(--sg-ease-out), text-decoration-color .25s var(--sg-ease-out);
}

.tp-sol-rel-a:hover {
    color: var(--sg-white);
    text-decoration-color: var(--sg-brass);
}

.tp-sol-sep {
    width: 1px;
    height: 10px;
    align-self: center;
    background: rgba(var(--sg-silver-rgb), .3);
}

.tp-sol-go {
    color: rgba(var(--sg-silver-rgb), .6);
    transition: color .3s var(--sg-ease-out);
}

.tp-sol-row:hover .tp-sol-go {
    color: var(--sg-white);
}

.tp-sol-row:hover .tp-sol-go .tp-arr {
    transform: translateX(5px);
}

.tp-sol-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    margin-top: 18px;
    font-size: 14px;
    color: var(--sg-mute);
}

@media (min-width: 768px) {
    .tp-sol-row {
        grid-template-columns: 40px minmax(0, 1fr) 28px;
        gap: 22px;
        padding: 11px 24px;
    }

    .tp-sol-ic .sgi {
        width: 40px;
        height: 40px;
    }

    .tp-sol-title {
        display: inline;
    }

    .tp-sol-rel {
        margin-top: 2px;
    }
}

/* 小さな陣のアイコン（.sgi）の基本は style.css */
.tp-sol-row:hover .sgi-ring,
.tp-pr:hover .sgi-ring {
    stroke-opacity: .9;
}

/* ==========================================================================
   3. 制作実績
   ========================================================================== */
.tp-works-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

@media (min-width: 640px) {
    .tp-works-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .tp-works-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
    }
}

.tp-wk {
    --kc: var(--sg-silver);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px 14px 20px;
    border: 1px solid rgba(var(--sg-silver-rgb), .28);
    background: linear-gradient(180deg, rgba(var(--sg-silver-rgb), .03), rgba(var(--sg-silver-rgb), 0) 70%);
    isolation: isolate;
    overflow: hidden;
    transition: border-color .35s var(--sg-ease-out), background-color .35s var(--sg-ease-out);
}

.tp-wk:hover,
.tp-wk:focus-within {
    border-color: rgba(var(--sg-silver-rgb), .85);
    background-color: rgba(var(--sg-silver-rgb), .03);
}

.tp-wk-fig {
    position: relative;
}

/* 図の光の滲み（種類の色） */
.tp-wk-glow {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--kc) 20%, transparent) 0%, color-mix(in srgb, var(--kc) 7%, transparent) 42%, transparent 68%);
    transition: opacity .35s var(--sg-ease-out);
    opacity: .85;
}

.tp-wk:hover .tp-wk-glow {
    opacity: 1;
}

.tp-wk .ad .ad-mark {
    transform-box: fill-box;
    transform-origin: center;
    transition: filter .35s var(--sg-ease-out);
}

.tp-wk:hover .ad .ad-mark {
    filter: drop-shadow(0 0 3px rgba(230, 0, 18, calc(var(--sg-glow) * 1.5)));
}

.tp-wk-cap {
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: .06em;
    text-align: center;
    color: var(--sg-mute);
}

.tp-wk-title {
    margin-top: 14px;
    padding: 0 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .04em;
    color: var(--sg-white);
}

.tp-wk-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}

.tp-wk-link:focus-visible {
    outline: none;
}

.tp-wk-link:focus-visible::after {
    outline: 2px solid var(--sg-white);
    outline-offset: -2px;
}

.tp-wk-kind {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 0 6px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--kc);
}

.tp-wk-kind::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
}

@media (max-width: 639px) {
    .tp-wk {
        padding: 14px 8px 18px;
    }
}

/* ==========================================================================
   4. 進め方
   ========================================================================== */
.tp-proc {
    display: grid;
    gap: 28px;
    align-items: center;
}

.tp-proc-fig {
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
}

.tp-proc-fig .qs {
    display: block;
    width: 100%;
    height: auto;
}

.tp-proc-steps {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.tp-proc-step {
    position: relative;
    padding: 22px 4px 24px;
    border-top: 1px solid rgba(var(--sg-silver-rgb), .2);
}

.tp-proc-step::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    width: 100%;
    height: 1px;
    background: var(--sg-brass);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .6s var(--sg-ease-out);
}

.tp-proc-step.is-active::before {
    transform: scaleX(1);
}

.tp-proc-n {
    font-family: var(--sg-en);
    font-size: 12px;
    letter-spacing: .16em;
    color: var(--sg-brass);
    transition: color .4s var(--sg-ease-out);
}

.tp-proc-step.is-active .tp-proc-n {
    color: var(--tp-phase, var(--sg-white));
}

/* 各段の番号に工程の色（点灯中だけ）。03 確認は銀白 */
.tp-proc-step[data-step="1"] { --tp-phase: var(--sg-phase-1); }
.tp-proc-step[data-step="2"] { --tp-phase: var(--sg-phase-2); }
.tp-proc-step[data-step="3"] { --tp-phase: var(--sg-white); }
.tp-proc-step[data-step="4"] { --tp-phase: var(--sg-phase-4); }

.tp-proc-name {
    margin-top: 8px;
    font-size: clamp(18px, 1.5vw, 21px);
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--sg-white);
}

.tp-proc-desc {
    margin-top: 10px;
    max-width: 34em;
    font-size: 14.5px;
    line-height: 1.95;
    color: var(--sg-text);
}

@media (min-width: 768px) {
    .tp-proc-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(28px, 3.4vw, 56px);
    }
}

@media (min-width: 1024px) {
    .tp-proc {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: clamp(40px, 5vw, 88px);
    }

    .tp-proc-fig {
        max-width: 460px;
    }
}

/* 4 象限の陣の線・文字の基本は style.css（実績ページの相談の帯でも使う） */

/* ==========================================================================
   画面端の小さな陣（PC 1024px 以上だけ。装飾）
   ========================================================================== */
.tp-rail {
    display: none;
}

@media (min-width: 1024px) {
    .tp-rail {
        display: block;
        position: fixed;
        right: 10px;
        top: 50%;
        z-index: 20;
        width: 44px;
        height: 44px;
        margin-top: -22px;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity .5s var(--sg-ease-out), visibility 0s linear .5s;
    }

    .tp-rail.is-on {
        opacity: 1;
        visibility: visible;
        transition: opacity .5s var(--sg-ease-out), visibility 0s;
    }

    .tp-rail .qs {
        display: block;
        width: 100%;
        height: 100%;
    }
}

.qs-rail .qs-tk,
.qs-rail .qs-diag,
.qs-rail .qs-ring-f {
    display: none;
}

.qs-rail .qs-ring,
.qs-rail .qs-cross {
    stroke-width: 12;
    stroke-opacity: .5;
}

.qs-rail .qs-ring-o {
    stroke-width: 14;
    stroke-opacity: .75;
}

.qs-rail .qs-arc {
    stroke-width: 22;
    stroke-linecap: butt;
    stroke-opacity: .18;
}

.qs-rail .qs-q.is-lit .qs-sector { fill-opacity: .42; }

/* 進め方と画面端の陣: 点灯した象限の面と弧に工程の色（03 確認は従来どおり赤＝確認の意味） */
.qs-process .qs-q1,
.qs-rail .qs-q1 { --qa: var(--sg-phase-1); }
.qs-process .qs-q2,
.qs-rail .qs-q2 { --qa: var(--sg-phase-2); }
.qs-process .qs-q4,
.qs-rail .qs-q4 { --qa: var(--sg-phase-4); }
.qs-rail .qs-q.is-lit .qs-arc { stroke-opacity: 1; }

/* ==========================================================================
   5. ご依頼の目安
   ========================================================================== */
.tp-pr-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.tp-pr {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px 20px;
    border: 1px solid rgba(var(--sg-silver-rgb), .26);
    background: linear-gradient(180deg, rgba(var(--sg-silver-rgb), .03), rgba(var(--sg-silver-rgb), 0) 80%);
    transition: border-color .3s var(--sg-ease-out);
}

.tp-pr:hover {
    border-color: rgba(var(--sg-silver-rgb), .6);
}

.tp-pr-label {
    display: flex;
    align-items: center;
    gap: 14px;
}

@media (min-width: 640px) {
    .tp-pr-label {
        min-height: 3.4em;
    }
}

.tp-pr-ic .sgi {
    width: 38px;
    height: 38px;
}

.tp-pr-name {
    display: block;
    min-width: 0;
    padding-top: 2px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .06em;
    color: var(--sg-white);
}

.tp-pr-a {
    text-decoration: underline;
    text-decoration-color: rgba(var(--sg-brass-rgb), .7);
    text-underline-offset: .3em;
    transition: color .25s var(--sg-ease-out);
}

.tp-pr-a:hover {
    color: var(--sg-brass);
}

.tp-pr-note {
    font-size: 12px;
    line-height: 1.75;
    letter-spacing: .02em;
    color: var(--sg-mute);
    word-break: auto-phrase;
    text-wrap: pretty;
}

.tp-pr-price {
    padding-top: 12px;
    border-top: 1px solid rgba(var(--sg-silver-rgb), .16);
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
    color: var(--sg-white);
    font-variant-numeric: tabular-nums;
}

.tp-pr-foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 22px;
}

@media (min-width: 640px) {
    .tp-pr-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tp-pr:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    /* 題の行数が違っても金額の高さをそろえる（題・金額・注記の3行を列ごとに共有する） */
    .tp-pr {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
        align-content: start;
    }
}

@media (min-width: 1200px) {
    .tp-pr-list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .tp-pr:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

/* ==========================================================================
   6. よくある質問
   ========================================================================== */
.tp-faq {
    display: grid;
    gap: 8px;
}

.tp-faq-item {
    border: 1px solid rgba(var(--sg-silver-rgb), .22);
    transition: border-color .3s var(--sg-ease-out), background-color .3s var(--sg-ease-out);
}

.tp-faq-item:hover,
.tp-faq-item[open] {
    border-color: rgba(var(--sg-silver-rgb), .55);
}

.tp-faq-item[open] {
    background: rgba(var(--sg-silver-rgb), .025);
}

.tp-faq-sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 18px;
    cursor: pointer;
    list-style: none;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .05em;
    color: var(--sg-white);
}

.tp-faq-sum::-webkit-details-marker {
    display: none;
}

.tp-faq-sum:focus-visible {
    outline-offset: -2px;
}

/* 開閉の印: 細い線の「＋」→「−」 */
.tp-faq-ic {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
}

.tp-faq-ic::before,
.tp-faq-ic::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 14px;
    height: 1px;
    background: var(--sg-silver);
    transition: transform .35s var(--sg-ease-out), opacity .35s var(--sg-ease-out);
}

.tp-faq-ic::after {
    transform: rotate(90deg);
}

.tp-faq-item[open] .tp-faq-ic::after {
    transform: rotate(0deg);
    opacity: 0;
}

.tp-faq-a {
    padding: 0 18px 18px;
}

.tp-faq-a p {
    max-width: 68ch;
    font-size: 14.5px;
    line-height: 1.95;
    color: var(--sg-text);
}

@media (min-width: 768px) {
    .tp-faq-sum {
        padding: 12px 24px;
    }

    .tp-faq-a {
        padding: 0 24px 22px;
    }
}

/* ==========================================================================
   7. 相談の流れ・問い合わせ
   ========================================================================== */
.tp-contact {
    padding-bottom: clamp(72px, 8vw, 120px);
}

.tp-flow {
    position: relative;
    display: grid;
    gap: 18px;
    padding: 22px 20px;
    border: 1px solid rgba(var(--sg-silver-rgb), .3);
    background: linear-gradient(90deg, rgba(var(--sg-silver-rgb), .035), rgba(var(--sg-silver-rgb), .01));
}

/* 帯の四隅の括弧 */
.tp-flow::before,
.tp-flow::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    pointer-events: none;
    border: 1px solid var(--sg-silver);
    opacity: .7;
}

.tp-flow::before {
    left: -1px;
    top: -1px;
    border-right: 0;
    border-bottom: 0;
}

.tp-flow::after {
    right: -1px;
    bottom: -1px;
    border-left: 0;
    border-top: 0;
}

.tp-flow-h {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--sg-white);
}

.tp-flow-steps {
    list-style: none;
    display: grid;
    gap: 18px;
}

.tp-flow-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.tp-flow-ic {
    flex: none;
    width: 40px;
    height: 40px;
    fill: none;
    stroke: var(--sg-silver);
    stroke-width: 1.4;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.tp-flow-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--sg-white);
}

.tp-flow-desc {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.75;
    color: var(--sg-mute);
}

@media (min-width: 768px) {
    .tp-flow {
        gap: 22px;
        padding: 26px 32px;
    }

    .tp-flow-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 44px;
    }

    /* 段と段のあいだの矢印 */
    .tp-flow-step:not(:last-child)::after {
        content: "";
        position: absolute;
        right: -32px;
        top: 14px;
        width: 20px;
        height: 12px;
        background: no-repeat center / 20px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M1 6H18M13 1.5L18 6L13 10.5' fill='none' stroke='%23B08D57' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
}

@media (min-width: 1024px) {
    .tp-flow {
        grid-template-columns: 11em minmax(0, 1fr);
        align-items: center;
        gap: 24px;
        padding: 28px 44px;
    }
}

.tp-contact-grid {
    display: grid;
    gap: 40px;
    margin-top: clamp(36px, 4vw, 56px);
}

@media (min-width: 1024px) {
    .tp-contact-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: clamp(48px, 5vw, 88px);
    }
}

.tp-contact-lead {
    font-size: clamp(19px, 1.6vw, 23px);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .06em;
    color: var(--sg-white);
}

.tp-contact-text {
    margin-top: 14px;
    max-width: 30em;
    font-size: 15px;
    line-height: 1.95;
    color: var(--sg-text);
}

.tp-doc {
    position: relative;
    margin-top: 32px;
    padding: 22px 22px 24px;
    border: 1px solid rgba(var(--sg-silver-rgb), .26);
    background: var(--sg-raise);
}

.tp-doc-h {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--sg-white);
}

.tp-doc-text {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--sg-mute);
}

.tp-doc-link {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 12px;
    margin-top: 18px;
    padding: 12px 20px 12px 16px;
    border: 1px solid rgba(var(--sg-silver-rgb), .5);
    color: var(--sg-white);
    transition: border-color .25s var(--sg-ease-out), background-color .25s var(--sg-ease-out);
}

.tp-doc-link:hover {
    border-color: var(--sg-silver);
    background: rgba(var(--sg-silver-rgb), .06);
}

.tp-doc-ic {
    grid-row: span 2;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--sg-brass);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tp-doc-name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
}

.tp-doc-size {
    font-size: 12px;
    color: var(--sg-mute);
}

/* ---- フォーム（仕組みは contact.js。見た目だけ） ---- */
/* ブラウザが描く部品（select の選択肢リスト・スクロールバー）も暗い面にする */
.tp-form {
    color-scheme: dark;
}

.tp-form-grid {
    display: grid;
    gap: 22px;
}

@media (min-width: 640px) {
    .tp-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 20px;
    }

    .tp-field-full {
        grid-column: 1 / -1;
    }
}

.tp-field[hidden] {
    display: none;
}

.tp-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--sg-white);
}

.tp-req {
    color: var(--sg-err);
}

.tp-input {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid rgba(var(--sg-silver-rgb), .3);
    border-radius: 0;
    background: var(--sg-raise);
    color: var(--sg-white);
    font: inherit;
    font-size: 16px;
    line-height: 1.6;
    transition: border-color .2s var(--sg-ease-out), box-shadow .2s var(--sg-ease-out);
}

.tp-input:hover {
    border-color: rgba(var(--sg-silver-rgb), .55);
}

.tp-input:focus,
.tp-input:focus-visible {
    /* 強制カラーモードでは box-shadow が消えるので、透明の outline を残して枠が見えるようにする */
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--sg-white);
    box-shadow: 0 0 0 3px rgba(var(--sg-brass-rgb), .45);
}

.tp-input:user-invalid,
.tp-input[aria-invalid="true"] {
    border-color: var(--sg-err);
}

/* 欄ごとの誤りの文（contact.js が欄の下に出す） */
.tp-err {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
    color: var(--sg-err);
}

.tp-err[hidden] {
    display: none;
}

.tp-select {
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23E8E6DF' stroke-width='1.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
}

:root[data-theme="light"] .tp-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%231B2340' stroke-width='1.3'/%3E%3C/svg%3E");
}

.tp-select option {
    background: var(--sg-raise);
    color: var(--sg-white);
}

.tp-textarea {
    min-height: 160px;
    resize: vertical;
}

.tp-input-ro {
    background: var(--sg-ground);
    color: var(--sg-text);
}

.tp-work-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tp-work-row .tp-input {
    flex: 1;
}

.tp-work-clear,
.tp-inline-link {
    color: var(--sg-white);
    text-decoration: underline;
    text-decoration-color: var(--sg-brass);
    text-underline-offset: .3em;
}

.tp-work-clear {
    position: relative;
    flex: none;
    font-size: 14px;
    font-weight: 700;
}

/* 押せる範囲を 44px 前後に広げる（見た目の大きさは変えない） */
.tp-work-clear::before {
    content: "";
    position: absolute;
    inset: -12px -10px;
}

.tp-work-clear:hover,
.tp-inline-link:hover {
    color: var(--sg-brass);
}

.tp-help {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--sg-mute);
}

.tp-count {
    margin-left: .6em;
    font-variant-numeric: tabular-nums;
}

.tp-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--sg-text);
}

.tp-check {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 3px 0 0;
    border: 1px solid rgba(var(--sg-silver-rgb), .6);
    border-radius: 0;
    background: var(--sg-raise) no-repeat center / 14px 14px;
    cursor: pointer;
    transition: border-color .2s var(--sg-ease-out), background-color .2s var(--sg-ease-out);
}

.tp-check:hover {
    border-color: var(--sg-white);
}

.tp-check:checked {
    border-color: var(--sg-brass);
    background-color: var(--sg-brass);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.2L5.8 10.3L11.5 3.8' fill='none' stroke='%230E1220' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tp-check:focus-visible {
    outline: 2px solid var(--sg-white);
    outline-offset: 3px;
}

.tp-check:user-invalid,
.tp-check[aria-invalid="true"] {
    border-color: var(--sg-err);
}

.tp-form-submit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 30px;
}

/* 送信ボタンは折り返さない。状態・誤りの文はボタンの下の行に出す（横に並べない） */
.tp-submit {
    flex: none;
    min-height: 58px;
    padding: 0 40px;
    border: 1px solid var(--sg-red);
    font-size: 16px;
    white-space: nowrap;
}

/* 送れないとき: 赤い塗りをやめ、赤の点線の枠と淡い文字にして、有効時と見分けられるようにする */
.tp-submit:disabled,
.tp-submit:disabled:hover {
    background: transparent;
    border-style: dashed;
    color: var(--sg-mute);
    cursor: not-allowed;
}

/* contact.js が付ける状態のクラス（is-error / is-ok / is-wait）。誤りは #contact-alert、送信中・完了は #contact-status */
.tp-form-msg {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    color: var(--sg-mute);
}

/* 空のときは場所を取らない（live region は隠さずに置いておく） */
.tp-form-msg:not(:empty) {
    margin-top: 14px;
}

.tp-form-msg.is-error {
    color: var(--sg-err);
}

.tp-form-msg.is-ok {
    color: var(--sg-white);
}

.tp-form-msg.is-wait {
    color: var(--sg-mute);
}

/* ヒーローの陣の背後の光。ライト版では藍の薄い面として弱める（style.css の --sg-hero-glow） */
#hs-glow {
    fill-opacity: var(--sg-hero-glow);
}

/* ライト版: 実績の図の滲みを消し、カードを一段明るい面にする（works.css と同じ考え方） */
:root[data-theme="light"] .tp-wk-glow {
    display: none;
}

:root[data-theme="light"] .tp-wk {
    background: var(--sg-raise);
}

/* ライト版: ご依頼の目安のカードは、藍の薄い塗りだと地より暗い灰に見えるので一段明るい面に置く */
:root[data-theme="light"] .tp-pr {
    background: var(--sg-raise);
}

/* ライト版: コードの断片の値は明るい地で薄くなりすぎないよう少し濃く（opacity は top.js が動かすので fill-opacity で） */
:root[data-theme="light"] .hs-vl {
    fill-opacity: .72;
}

/* ライト版: フォームの部品（select の選択肢リストなど）も明るい面にする */
:root[data-theme="light"] .tp-form {
    color-scheme: light;
}