@charset "UTF-8";
/* ==========================================================================
   /tools/ 2026 リニューアル専用スタイル
   - 名前空間は .stp / .stp-* のみ（sc-* は本体ヘッダーと衝突するため禁止）
   - 既存 .sft-* を使うのは JS 契約上必要な箇所だけで、見た目は .stp- 側で上書きする
   ========================================================================== */

.stp {
    --stp-o: #ff570b;
    --stp-o-d: #c04a0b;
    --stp-o-l: #fff3ec;
    --stp-o-b: #ffd9c4;
    --stp-tx: #1f2328;
    --stp-tx2: #5f6570;
    --stp-tx3: #626976;
    --stp-bd: #909090;
    --stp-bd2: #f0f1f3;
    --stp-bg: #ffffff;
    --stp-bg2: #f8f9fa;
    --stp-sh: 0 1px 2px rgba(31, 35, 40, .04), 0 4px 12px rgba(31, 35, 40, .05);
    --stp-sh2: 0 4px 10px rgba(31, 35, 40, .06), 0 12px 28px rgba(31, 35, 40, .08);
    --stp-r: 14px;
    --stp-neg: #c33338;
    --stp-pos: #26804d;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif;
    color: var(--stp-tx);
    background: var(--stp-bg);
    line-height: 1.7;
    font-size: 16px;
    /* 親テーマのコンテナ幅を無視して全幅で敷く */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: hidden;
}

.stp *,
.stp *::before,
.stp *::after { box-sizing: border-box; }

.stp p,
.stp ul,
.stp ol,
.stp dl,
.stp dd { margin: 0; }

.stp ul,
.stp ol { list-style: none; padding: 0; }

.stp-wrap {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
}

.stp-svg {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── 見出し ────────────────────────────────────── */
.stp-h2 {
    margin: 0;
    font-size: clamp(23px, 2.4vw, 31px);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .01em;
    text-align: center;
    color: var(--stp-tx);
}

.stp-sub {
    margin: 12px auto 0;
    max-width: 46em;
    text-align: center;
    font-size: 15px;
    color: var(--stp-tx2);
}

.stp-sec {
    padding: clamp(52px, 6vw, 84px) 0;
    background: var(--stp-bg);
    border-top: 1px solid var(--stp-bd2);
}

.stp-sec--tint { background: var(--stp-bg2); }

/* ── ボタン ────────────────────────────────────── */
.stp-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}

.stp-btn .stp-svg { font-size: 18px; stroke-width: 2; }

.stp-btn--primary {
    background: var(--stp-o);
    color: #fff;
    box-shadow: 0 4px 14px rgba(255, 122, 61, .28);
}
.stp-btn--primary:hover { background: var(--stp-o-d); color: #fff; transform: translateY(-1px); }

.stp-btn--ghost {
    background: #fff;
    color: var(--stp-tx);
    border-color: var(--stp-bd);
}
.stp-btn--ghost:hover { background: var(--stp-o-l); border-color: var(--stp-o-b); color: var(--stp-o-d); }

.stp-btn--outline {
    background: #fff;
    color: var(--stp-o-d);
    border-color: var(--stp-o-b);
}
.stp-btn--outline:hover { background: var(--stp-o-l); border-color: var(--stp-o); }

.stp-btn--white {
    background: #fff;
    color: var(--stp-o-d);
    box-shadow: 0 4px 14px rgba(120, 50, 10, .16);
}
.stp-btn--white:hover { background: #fff8f3; transform: translateY(-1px); color: var(--stp-o-d); }

.stp-btn--outline-w {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border-color: rgba(255, 255, 255, .72);
}
.stp-btn--outline-w:hover { background: rgba(255, 255, 255, .26); color: #fff; }

.stp-btn--full { width: 100%; }

/* ボタン自体に .sft-tool-card を併記する箇所（パネルを開くボタン）は
   既存 .sft-tool-card の装飾を打ち消してボタンとして見せる */
.stp .stp-btn.sft-tool-card {
    opacity: 1;
    animation: none;
    transform: none;
    text-align: center;
}

.stp a:focus-visible,
.stp button:focus-visible {
    outline: 3px solid var(--stp-o);
    outline-offset: 2px;
}

/* テーマ側の .entry-content a{text-decoration:underline} を .stp 内だけ打ち消す */
.stp a,
.stp a:hover,
.stp a:focus { text-decoration: none !important; }

/* ══════════════════════════════════════════════════
   1. ヒーロー
   ══════════════════════════════════════════════════ */
.stp-hero {
    position: relative;
    padding: clamp(40px, 5vw, 68px) 0 clamp(48px, 5vw, 76px);
    background:
        radial-gradient(120% 130% at 88% 8%, #fff1e6 0%, rgba(255, 241, 230, 0) 58%),
        linear-gradient(180deg, #fffaf6 0%, #ffffff 78%);
    border-bottom: 1px solid var(--stp-bd2);
}

.stp-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.stp-h1 {
    margin: 0;
    font-size: clamp(28px, 3.05vw, 40px);
    font-weight: 800;
    line-height: 1.32;
    letter-spacing: .005em;
    color: var(--stp-tx);
}

.stp-h1-em { color: var(--stp-o-d); }

.stp-lead {
    margin: 20px 0 0;
    font-size: clamp(15px, 1.2vw, 16px);
    color: var(--stp-tx2);
    line-height: 1.9;
}

.stp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 0;
}

.stp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px 7px 11px;
    border: 1px solid var(--stp-bd);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--stp-tx2);
}

.stp-badge .stp-svg { font-size: 15px; color: var(--stp-o); stroke-width: 2; }

.stp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 0;
}

/* ── ヒーロー右：装飾ダッシュボード（サンプル数値） ── */
.stp-mock { position: relative; }

.stp-mock-note {
    display: inline-block;
    margin: 0 0 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(31, 35, 40, .05);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--stp-tx3);
}

.stp-mock-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
}

.stp-mc {
    background: #fff;
    border: 1px solid var(--stp-bd);
    border-radius: 12px;
    padding: 13px 14px;
    box-shadow: var(--stp-sh);
    min-width: 0;
}

.stp-mc--lot     { grid-column: span 4; }
.stp-mc--dd      { grid-column: span 4; }
.stp-mc--margin  { grid-column: span 4; }
.stp-mc--score   { grid-column: span 3; text-align: center; }
.stp-mc--equity  { grid-column: span 6; }
.stp-mc--rr      { grid-column: span 3; }
.stp-mc--meter   { grid-column: span 8; }
.stp-mc--verdict { grid-column: span 4; }

.stp-mc-h {
    font-size: 11px;
    font-weight: 700;
    color: var(--stp-tx3);
    letter-spacing: .02em;
    margin-bottom: 8px !important;
    line-height: 1.5;
}

.stp-mc-box {
    background: var(--stp-bg2);
    border: 1px solid var(--stp-bd2);
    border-radius: 9px;
    padding: 8px 11px;
}

.stp-mc-k { font-size: 10px; color: var(--stp-tx3); line-height: 1.5; }

.stp-mc-v {
    font-size: 25px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--stp-tx);
}

.stp-mc-v span { font-size: 12px; font-weight: 700; margin-left: 4px; color: var(--stp-tx2); }
.stp-mc-v--neg { color: var(--stp-neg); }
.stp-mc-v--sm { font-size: 21px; color: var(--stp-o-d); }

.stp-mc-s { font-size: 10.5px; color: var(--stp-tx3); line-height: 1.6; margin-top: 6px !important; }
.stp-mc-s--c { text-align: center; color: var(--stp-pos); font-weight: 700; }

.stp-mc-chip {
    display: inline-block;
    margin-top: 5px !important;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--stp-o-l);
    /* ★ --stp-o-d(#f26522) は地色 #fff3ec の上で 2.90 しかなく 10px の文字には足りない。
       #c2410c なら 4.75 で AA(4.5)を満たす（--stp-o 系は枠・地色・グラフ線に留める）。 */
    color: #c2410c;
    font-size: 10px;
    font-weight: 700;
}

.stp-mc-pct { font-size: 10px; color: var(--stp-tx3); text-align: right; margin-top: 3px !important; }

.stp-spark { display: block; width: 100%; height: 34px; margin-top: 6px; }
.stp-spark polyline { fill: none; stroke: var(--stp-o); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.stp-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--stp-bd2);
    overflow: hidden;
    margin-top: 9px;
}
.stp-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffa574, var(--stp-o)); }

.stp-ring { position: relative; width: 84px; height: 84px; margin: 2px auto 0; }
.stp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.stp-ring circle { fill: none; stroke-width: 7; }
.stp-ring-bg { stroke: #eef0f2; }
.stp-ring-fg { stroke: #2f9e5f; stroke-linecap: round; stroke-dasharray: 188.5; stroke-dashoffset: 41.5; }

.stp-ring-txt {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    flex-direction: column;
    line-height: 1.1;
}
.stp-ring-txt strong { font-size: 24px; font-weight: 800; }
.stp-ring-txt span { font-size: 10px; color: var(--stp-tx3); }

/* ★ --stp-o(#ff7a3d) は白地 2.59 で装飾基準の 3.0 も割る。#c2410c で 5.18（文字基準も満たす） */
.stp-stars { font-size: 12px; color: #c2410c; letter-spacing: 1px; margin-top: 4px !important; }
.stp-stars span { color: var(--stp-bd); }

.stp-eq { display: block; width: 100%; height: 92px; }
.stp-eq-grid { stroke: var(--stp-bd2); stroke-width: 1; }
.stp-eq-line { fill: none; stroke: var(--stp-o); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.stp-mc-dl { display: flex; gap: 14px; margin-top: 8px; }
.stp-mc-dl div { min-width: 0; }
.stp-mc-dl dt { font-size: 10px; color: var(--stp-tx3); line-height: 1.5; }
.stp-mc-dl dd { font-size: 13px; font-weight: 700; margin: 0; line-height: 1.5; }

.stp-meter { position: relative; height: 9px; border-radius: 999px; margin: 14px 0 7px; }
.stp-meter i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #4caf80 0%, #a7cf5c 26%, #ffc24b 52%, #ff9048 76%, #e5484d 100%);
}
.stp-meter b {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--stp-o);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.stp-meter-lb { display: flex; justify-content: space-between; gap: 4px; }
.stp-meter-lb li { font-size: 9.5px; color: var(--stp-tx3); line-height: 1.4; }

.stp-verdict {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--stp-tx);
}
.stp-verdict .stp-svg { font-size: 17px; color: var(--stp-pos); stroke-width: 2; }

/* ══════════════════════════════════════════════════
   2. 何を確認したいですか？
   ══════════════════════════════════════════════════ */
.stp-purpose-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 38px;
}

.stp-purpose {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "ico body"
        "foot foot";
    gap: 18px;
    width: 100%;
    padding: 26px 26px 20px;
    background: #fff;
    border: 1px solid var(--stp-bd);
    border-radius: var(--stp-r);
    box-shadow: var(--stp-sh);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.stp-purpose:hover {
    border-color: var(--stp-o-b);
    box-shadow: var(--stp-sh2);
    transform: translateY(-2px);
}

.stp-purpose-ico {
    grid-area: ico;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 15px;
    background: var(--stp-o-l);
    color: var(--stp-o-d);
    border: 1px solid var(--stp-o-b);
}
.stp-purpose-ico .stp-svg { font-size: 28px; }

.stp-purpose-body { grid-area: body; display: block; min-width: 0; }

.stp-purpose-title {
    display: block;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 6px;
}

.stp-purpose-desc {
    display: block;
    font-size: 14px;
    line-height: 1.8;
    color: var(--stp-tx2);
}

.stp-purpose-foot {
    grid-area: foot;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--stp-bd2);
}

.stp-purpose-items {
    font-size: 13px;
    font-weight: 600;
    color: var(--stp-tx2);
    line-height: 1.7;
    word-break: break-word;
}

.stp-purpose-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: var(--stp-o-l);
    color: var(--stp-o-d);
    transition: background-color .2s, transform .2s;
}
.stp-purpose-arrow .stp-svg { font-size: 18px; stroke-width: 2; }
.stp-purpose:hover .stp-purpose-arrow { background: var(--stp-o); color: #fff; transform: translateX(3px); }

/* ══════════════════════════════════════════════════
   3. まず使ってほしいツール
   ══════════════════════════════════════════════════ */
.stp-feat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 38px;
}

.stp-feat {
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
    background: #fff;
    border: 1px solid var(--stp-bd);
    border-radius: var(--stp-r);
    box-shadow: var(--stp-sh);
}

.stp-feat-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}
.stp-feat-title .stp-svg { font-size: 21px; color: var(--stp-o); }

.stp-feat-desc {
    margin: 16px 0 18px !important;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--stp-tx2);
    flex: 1 1 auto;
}

/* ミニUI（装飾） */
.stp-demo {
    background: var(--stp-bg2);
    border: 1px solid var(--stp-bd2);
    border-radius: 11px;
    padding: 14px;
}

.stp-demo-h { font-size: 11.5px; font-weight: 700; color: var(--stp-tx3); margin-bottom: 10px !important; }
.stp-demo-s { font-size: 10.5px; color: var(--stp-tx3); line-height: 1.6; }

.stp-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 20px 12px;
    border: 1.5px dashed var(--stp-o-b);
    border-radius: 10px;
    background: #fff;
    text-align: center;
    margin-bottom: 9px;
}
.stp-drop .stp-svg { font-size: 26px; color: var(--stp-o); }
.stp-drop p { font-size: 11.5px; font-weight: 600; color: var(--stp-tx2); line-height: 1.6; }

.stp-demo-form { display: grid; gap: 7px; }

.stp-fld {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    background: #fff;
    border: 1px solid var(--stp-bd);
    border-radius: 8px;
    min-width: 0;
}
.stp-fld span { font-size: 10.5px; color: var(--stp-tx3); flex: none; }
.stp-fld i { font-size: 13px; font-weight: 700; font-style: normal; margin-left: auto; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stp-fld em { font-size: 10px; font-style: normal; color: var(--stp-tx3); flex: none; }
.stp-fld--sel { position: relative; padding-right: 24px; }
.stp-fld--sel::after {
    content: "";
    position: absolute;
    right: 11px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border-right: 1.6px solid var(--stp-tx3);
    border-bottom: 1.6px solid var(--stp-tx3);
    transform: rotate(45deg);
}

.stp-demo--lot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 10px; align-items: start; }

.stp-demo-out {
    background: #fff;
    border: 1px solid var(--stp-o-b);
    border-radius: 9px;
    padding: 11px;
}
.stp-demo-out-k { font-size: 10px; color: var(--stp-tx3); }
.stp-demo-out-v { font-size: 24px; font-weight: 800; line-height: 1.25; color: var(--stp-o-d); }
.stp-demo-out-v span { font-size: 11px; margin-left: 3px; color: var(--stp-tx2); }
.stp-demo-dl { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--stp-bd2); display: grid; gap: 7px; }
.stp-demo-dl div { display: block; min-width: 0; }
.stp-demo-dl dt { font-size: 10px; color: var(--stp-tx3); line-height: 1.5; }
.stp-demo-dl dd { font-size: 11.5px; font-weight: 700; margin: 0; line-height: 1.5; }

.stp-steps { display: flex; align-items: center; gap: 6px; margin-bottom: 11px; }
.stp-steps li {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--stp-tx3);
    white-space: nowrap;
}
.stp-steps li + li::before {
    content: "";
    width: 12px;
    height: 1px;
    background: var(--stp-bd);
    flex: none;
    margin-right: 1px;
}
.stp-steps b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    flex: none;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--stp-bd);
    font-size: 10px;
    font-weight: 700;
}
.stp-steps .is-on { color: var(--stp-o-d); }
.stp-steps .is-on b { background: var(--stp-o); border-color: var(--stp-o); color: #fff; }

/* ══════════════════════════════════════════════════
   4. すべてのツール
   ══════════════════════════════════════════════════ */
.stp-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 32px 0 30px;
}

.stp-tab {
    padding: 10px 20px;
    border: 1px solid var(--stp-bd);
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--stp-tx2);
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}
.stp-tab:hover { border-color: var(--stp-o-b); color: var(--stp-o-d); }
.stp-tab.is-active {
    background: var(--stp-o);
    border-color: var(--stp-o);
    color: #fff;
    box-shadow: 0 2px 10px rgba(255, 122, 61, .26);
}

.stp-toolgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

/* .sft-tool-card を併記するカードは既存CSSの装飾を打ち消してから .stp-card を適用する */
.stp-toolgrid .stp-card,
.stp-toolgrid .stp-card.sft-tool-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding: 20px 18px 16px;
    background: #fff;
    border: 1px solid var(--stp-bd);
    border-radius: 12px;
    box-shadow: var(--stp-sh);
    text-align: left;
    text-decoration: none;
    font: inherit;
    color: var(--stp-tx);
    cursor: pointer;
    opacity: 1;
    animation: none;
    transform: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.stp-toolgrid .stp-card:hover,
.stp-toolgrid .stp-card.sft-tool-card:hover {
    border-color: var(--stp-o-b);
    box-shadow: var(--stp-sh2);
    transform: translateY(-2px);
    color: var(--stp-tx);
}

.stp-card-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 13px;
    border-radius: 11px;
    background: var(--stp-o-l);
    border: 1px solid var(--stp-o-b);
    color: var(--stp-o-d);
    flex: none;
}
.stp-card-ico .stp-svg { font-size: 21px; }

.stp-card-body { display: block; min-width: 0; margin-bottom: 14px; }

.stp-card-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.55;
    margin-bottom: 5px;
    word-break: break-word;
}

.stp-card-desc {
    display: block;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--stp-tx2);
}

.stp-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    vertical-align: 2px;
    white-space: nowrap;
}
.stp-tag--popular { background: var(--stp-o-l); color: var(--stp-o-d); border: 1px solid var(--stp-o-b); }
.stp-tag--featured { background: var(--stp-o); color: #fff; }
.stp-tag--soon { background: #f1f2f4; color: var(--stp-tx3); border: 1px solid var(--stp-bd); }

.stp-card-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--stp-bd2);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--stp-o-d);
}
.stp-card-link .stp-svg { font-size: 15px; stroke-width: 2; transition: transform .2s; }
.stp-card:hover .stp-card-link .stp-svg { transform: translateX(3px); }
.stp-card-link--soon { color: var(--stp-tx3); }

.stp-card--soon { cursor: default; background: #fcfcfd; }
.stp-card--soon:hover { transform: none; box-shadow: var(--stp-sh); border-color: var(--stp-bd); }
.stp-card--soon .stp-card-ico { background: #f4f5f6; border-color: var(--stp-bd); color: var(--stp-tx3); }
.stp-card--soon .stp-card-name { color: var(--stp-tx2); }

/* display:flex を持つカードにも [hidden] を効かせる（タブ絞り込み用） */
.stp-toolgrid .stp-card[hidden] { display: none !important; }

.stp-empty { text-align: center; color: var(--stp-tx2); font-size: 14px; padding: 28px 0 4px; }

/* ══════════════════════════════════════════════════
   5. 運用までの流れ
   ══════════════════════════════════════════════════ */
.stp-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
    counter-reset: none;
}

.stp-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 8px;
}

/* 番号バッジはアイコン円の右上に重ねる */
.stp-step-n {
    position: absolute;
    top: -5px;
    left: calc(50% + 21px);
}

/* ステップ間のコネクタ（PCのみ） */
.stp-step + .stp-step::before {
    content: "";
    position: absolute;
    top: 44px;
    left: -50%;
    width: 100%;
    height: 0;
    border-top: 2px dashed var(--stp-o-b);
    z-index: 0;
}

.stp-step-n {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--stp-o);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(255, 122, 61, .35);
}

.stp-step-ico {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--stp-bd);
    box-shadow: var(--stp-sh);
    color: var(--stp-o-d);
}
.stp-step-ico .stp-svg { font-size: 32px; }

.stp-step-title {
    display: block;
    margin-top: 16px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.55;
}

.stp-step-desc {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--stp-tx2);
}

/* ══════════════════════════════════════════════════
   6. 安心して使える理由
   ══════════════════════════════════════════════════ */
.stp-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 38px;
}

.stp-trust {
    display: flex;
    gap: 15px;
    padding: 22px 20px;
    background: #fff;
    border: 1px solid var(--stp-bd);
    border-radius: var(--stp-r);
    box-shadow: var(--stp-sh);
}

.stp-trust-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 12px;
    background: var(--stp-o-l);
    border: 1px solid var(--stp-o-b);
    color: var(--stp-o-d);
}
.stp-trust-ico .stp-svg { font-size: 23px; }

.stp-trust-title { margin: 0 0 6px; font-size: 16px; font-weight: 700; line-height: 1.55; }
.stp-trust-desc { font-size: 13px; line-height: 1.85; color: var(--stp-tx2); }

.stp-note {
    max-width: 62em;
    margin: 22px auto 0 !important;
    font-size: 12px;
    line-height: 1.9;
    color: var(--stp-tx3);
    text-align: center;
}

/* ══════════════════════════════════════════════════
   6.5 使い方ガイド
   ══════════════════════════════════════════════════ */
.stp-h2--mt { margin-top: clamp(48px, 5vw, 68px) !important; }

/* 初心者 / 中級者カード */
.stp-lv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 34px;
}

.stp-lv {
    padding: 26px 24px 22px;
    background: #fff;
    border: 1px solid var(--stp-bd);
    border-radius: var(--stp-r);
    box-shadow: var(--stp-sh);
}

.stp-lv-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--stp-o-l);
    border: 1px solid var(--stp-o-b);
    color: var(--stp-o-d);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}

.stp-lv-title { margin: 12px 0 8px; font-size: 18px; font-weight: 700; line-height: 1.55; }
.stp-lv-desc { font-size: 14px; line-height: 1.9; color: var(--stp-tx2); }

.stp-lv-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px !important;
    padding-top: 15px;
    border-top: 1px solid var(--stp-bd2);
}
.stp-lv-items li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px 6px 10px;
    border: 1px solid var(--stp-bd);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--stp-tx2);
    line-height: 1.6;
}
.stp-lv-items .stp-svg { font-size: 15px; color: var(--stp-o); stroke-width: 2; }

/* 3ステップ チェックリスト */
.stp-check-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px;
}

.stp-check {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 22px 20px 18px;
    background: #fff;
    border: 1px solid var(--stp-bd);
    border-radius: var(--stp-r);
    box-shadow: var(--stp-sh);
}

.stp-check-n {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--stp-o);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(255, 122, 61, .3);
}

.stp-check-body { min-width: 0; display: flex; flex-direction: column; }
.stp-check-title { margin: 3px 0 6px; font-size: 16px; font-weight: 700; line-height: 1.55; }
.stp-check-desc { font-size: 13px; line-height: 1.85; color: var(--stp-tx2); }

.stp .stp-check-link {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    align-self: flex-start;
    gap: 5px;
    margin-top: 12px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    animation: none;
    transform: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--stp-o-d);
    cursor: pointer;
    text-align: left;
    min-height: 0;
}
.stp .stp-check-link .stp-svg { font-size: 15px; stroke-width: 2; transition: transform .2s; }
.stp .stp-check-link:hover .stp-svg { transform: translateX(3px); }

/* 本文 */
.stp-prose {
    max-width: 860px;
    margin: 30px auto 0;
    display: grid;
    gap: 16px;
}
.stp-prose p { font-size: 15px; line-height: 2; color: var(--stp-tx2); }

/* 関連リンク */
.stp-rel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 860px;
    margin: 26px auto 0 !important;
}

.stp-rel a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--stp-bd);
    border-radius: 12px;
    box-shadow: var(--stp-sh);
    color: var(--stp-tx);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.stp-rel a:hover { border-color: var(--stp-o-b); box-shadow: var(--stp-sh2); transform: translateY(-2px); color: var(--stp-tx); }

.stp-rel-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 11px;
    background: var(--stp-o-l);
    border: 1px solid var(--stp-o-b);
    color: var(--stp-o-d);
}
.stp-rel-ico .stp-svg { font-size: 20px; }

.stp-rel-body { min-width: 0; flex: 1 1 auto; }
.stp-rel-name { display: block; font-size: 15px; font-weight: 700; line-height: 1.55; }
.stp-rel-desc { display: block; font-size: 12.5px; line-height: 1.7; color: var(--stp-tx2); margin-top: 2px; }

.stp-rel-arrow { flex: none; color: var(--stp-o-d); display: flex; }
.stp-rel-arrow .stp-svg { font-size: 18px; stroke-width: 2; transition: transform .2s; }
.stp-rel a:hover .stp-rel-arrow .stp-svg { transform: translateX(3px); }

/* ══════════════════════════════════════════════════
   7. 下部CTA
   ══════════════════════════════════════════════════ */
.stp-cta {
    padding: clamp(30px, 4vw, 44px) 0 clamp(38px, 4vw, 52px);
    background: var(--stp-bg);
    border-top: 1px solid var(--stp-bd2);
}

.stp-cta-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
    max-width: 1160px;
    padding: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 44px);
    border-radius: 18px;
    background: linear-gradient(103deg, #f85f00 0%, #ff570b 46%, #f2622a 100%);
    box-shadow: 0 10px 30px rgba(242, 98, 42, .22);
    color: #fff;
}

/* .stp-wrap の padding を CTA では内側 padding に統合する */
.stp-cta .stp-wrap.stp-cta-inner { width: calc(100% - 48px); }

.stp-cta-vis { position: relative; width: 168px; flex: none; }

.stp-cta-card {
    background: #fff;
    border-radius: 12px;
    padding: 13px;
    box-shadow: 0 8px 20px rgba(120, 45, 10, .22);
}
.stp-cta-row { display: block; height: 7px; border-radius: 4px; background: #eceef0; margin-bottom: 6px; }
.stp-cta-row--s { width: 58%; }
.stp-cta-chart { display: block; width: 100%; height: 48px; margin-top: 4px; }
.stp-cta-chart rect { fill: #ffd0b3; }
.stp-cta-chart rect:nth-child(2n) { fill: var(--stp-o); }

.stp-cta-mag {
    position: absolute;
    right: -10px;
    bottom: -12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    color: var(--stp-o-d);
    box-shadow: 0 6px 16px rgba(120, 45, 10, .26);
}
.stp-cta-mag .stp-svg { font-size: 24px; stroke-width: 2; }

.stp-cta-title {
    margin: 0;
    font-size: clamp(19px, 2vw, 26px);
    font-weight: 800;
    line-height: 1.5;
    color: #fff;
}

.stp-cta-desc { margin-top: 10px !important; font-size: 14px; line-height: 1.85; color: rgba(255, 255, 255, .94); }

.stp-cta-actions { display: flex; flex-direction: column; gap: 11px; flex: none; }
.stp-cta-actions .stp-btn { white-space: nowrap; }

/* ══════════════════════════════════════════════════
   「直近の計算」パネル
   既存 JS が #sft-hero と #sft-dash-grid の間に差し込むため、
   .stp-wrap と同じ幅・余白に揃える（幅制限が無いと全幅で浮く）
   ══════════════════════════════════════════════════ */
.stp > .sft-recent-panel {
    /* ★ max-width だけだと 641〜1112px の帯域で左右の余白が 0 になり、
       画面端にべったり付いて下のセクション（.stp-wrap の padding 24px）と左端が揃わない。
       min() で「本文幅」と「画面幅 - padding×2」の小さい方を採る。 */
    max-width: min(1112px, calc(100% - 48px));
    margin: 24px auto 0;
}

/* ══════════════════════════════════════════════════
   ツール表示エリア（既存パネル）
   ══════════════════════════════════════════════════ */
.stp-toolview { padding: 28px 0 48px; background: var(--stp-bg); }
.stp-toolview .sft-back-btn { margin-bottom: 4px; }

/* ══════════════════════════════════════════════════
   レスポンシブ
   ══════════════════════════════════════════════════ */
@media (max-width: 1080px) {
    .stp-toolgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stp-hero-inner { grid-template-columns: 1fr; gap: 34px; }

    /* ヒーローが1カラムになるとモックが本文幅いっぱいに間延びするので幅を抑える */
    /* ★ margin:auto だけだと grid item の stretch が切れて中身の自然幅(406px)まで縮むので
       width:100% を必ず併記する */
    .stp-mock { width: 100%; max-width: 680px; margin-left: auto; margin-right: auto; }

    /* ★ 1080px 以下（＝ヒーローが 1 カラムになる幅）ではモックを出さない。
       2 カラム時の「右カラムを埋める」役割が縦積みで失われ、
       実測 778px（hero 1279px の 61%・390px 幅）のスクロール負債だけが残るため。
       上の width/max-width/margin は display を戻した時のために残してある。
       実測 2026-08-02: hero 1279→467px / ツール一覧到達 1350→538px。 */
    .stp-mock { display: none; }

    /* 12カラムのまま2カラム相当に畳む。
       ★ 親を repeat(6,1fr) に減らすと span 8 / span 12 が暗黙トラックを生み、
         同じ span でもカード幅が倍違う（実測 631px vs 333px）ので列数は 12 のまま変えない。 */
    .stp-mc--lot,
    .stp-mc--dd,
    .stp-mc--margin,
    .stp-mc--score,
    .stp-mc--rr,
    .stp-mc--verdict { grid-column: span 6; }
    .stp-mc--equity,
    .stp-mc--meter { grid-column: span 12; }

    /* DOM 順のままだと 全幅カード（資産曲線/リスクメーター）が間に挟まり、
       リスクリワードと判定結果がそれぞれ単独行になって右半分が空く。
       表示順だけ入れ替えて 2 枚ずつ × 全幅 2 枚 に詰める（DOM は触らない）。 */
    .stp-mc--rr      { order: 5; }
    .stp-mc--verdict { order: 6; }
    .stp-mc--equity  { order: 7; }
    .stp-mc--meter   { order: 8; }

    .stp-cta-inner { grid-template-columns: auto minmax(0, 1fr); }
    .stp-cta-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .stp-cta-actions .stp-btn { flex: 1 1 200px; }
}

@media (max-width: 860px) {
    .stp-feat-grid { grid-template-columns: 1fr; gap: 18px; }
    .stp-check-grid { grid-template-columns: 1fr; gap: 14px; }
    .stp-lv-grid { grid-template-columns: 1fr; gap: 16px; }
    .stp-rel { grid-template-columns: 1fr; }
    .stp-trust-grid { grid-template-columns: 1fr; }
    .stp-toolgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stp-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
    .stp-purpose-grid { grid-template-columns: 1fr; gap: 16px; }
    /* 3枚のデモカードが縦積みになるので、幅いっぱいに広がって間延びしないよう抑える */
    .stp-feat-grid { max-width: 620px; margin-left: auto; margin-right: auto; }
    .stp-step + .stp-step::before { display: none; }
    .stp-demo--lot { grid-template-columns: 1fr; }
}

/* 860px で他のグリッドが一斉に1カラムになるので、目的別カードもここで揃える
   （760px で切ると 834/768 のタブレットだけ目的別だけが2カラムで浮く） */

@media (max-width: 640px) {
    .stp-wrap { padding: 0 16px; }
    .stp > .sft-recent-panel { max-width: calc(100% - 32px); margin-top: 18px; }
    .stp-sec { padding: 44px 0; }
    .stp-h1 { font-size: 27px; }
    .stp-lead { font-size: 14.5px; }
    .stp-br-pc { display: none; }
    .stp-hero-actions { flex-direction: column; align-items: stretch; }
    .stp-hero-actions .stp-btn { width: 100%; }

    .stp-mock-grid { gap: 10px; }
    .stp-mc-v { font-size: 21px; }

    .stp-flow { grid-template-columns: 1fr; row-gap: 22px; }
    .stp-step {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-areas: "ico title" "ico desc";
        column-gap: 15px;
        row-gap: 2px;
        align-items: start;
        text-align: left;
        padding: 0;
    }
    .stp-step-n { left: 40px; top: -6px; }
    .stp-step-ico { grid-area: ico; width: 56px; height: 56px; }
    .stp-step-ico .stp-svg { font-size: 25px; }
    .stp-step-title { grid-area: title; margin-top: 3px; }
    .stp-step-desc { grid-area: desc; margin-top: 0; }

    .stp-cta { padding: 0 0 40px; }
    .stp-cta-inner { grid-template-columns: 1fr; text-align: center; padding: 26px 20px 28px; }
    .stp-cta .stp-wrap.stp-cta-inner { width: calc(100% - 32px); }
    .stp-cta-vis { display: none; }
    .stp-cta-actions { flex-direction: column; }
    .stp-cta-actions .stp-btn { flex: none; width: 100%; }
    .stp-purpose { padding: 22px 18px 18px; gap: 14px; }
    .stp-purpose-ico { width: 50px; height: 50px; }
    .stp-purpose-ico .stp-svg { font-size: 24px; }
    .stp-purpose-title { font-size: 17px; }
    .stp-purpose-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* SP のステップは番号を左肩に置くため相対配置にする */
@media (max-width: 640px) {
    .stp-step { position: relative; }
}

/* ツールカードは 15 枚あるので 640px でも 2 カラムを保つ。
   1 カラムにすると「すべてのツール」だけで 4,449px（実測）になり、下のセクションまで届かない。
   360px でもカード幅 156px で 2 カラムが成立する（実測 4,874px → 3,298px）ので、
   ツール名が 4 行に折れ始める 340px 未満でだけ 1 カラムへ落とす。 */
@media (max-width: 339px) {
    .stp-toolgrid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .stp *,
    .stp *::before,
    .stp *::after {
        transition: none !important;
        animation: none !important;
    }
}