/* =========================================================
   No.1診断 ／ 日本初・世界初診断 のタブ切り替え
   [teikoku_diagnosis_tabs]
   ========================================================= */
.ffd-tabs {
    --ffd-tabs-ink: #1e3a5c;        /* 藍鉄 */
    --ffd-tabs-ink-hover: #162c47;
    --ffd-tabs-text: #59646f;
    --ffd-tabs-line: #c8cdd4;
    --ffd-tabs-bg: #f2f4f6;
    --ffd-tabs-gold: #9a7b3f;
    width: 100%;
    scroll-margin-top: 96px;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
        "BIZ UDPGothic", "Yu Gothic", "YuGothic", "Meiryo", system-ui,
        -apple-system, BlinkMacSystemFont, sans-serif;
}

.ffd-tabs__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    box-sizing: border-box;
    max-width: 790px;               /* ウィザードの外枠（本文700px＋左右の余白44px×2＋罫1px×2）と同じ幅 */
    margin: 0 auto 20px;
    padding: 4px;
    background: var(--ffd-tabs-bg);
    border: 1px solid var(--ffd-tabs-line);
    border-radius: 14px;
}

.ffd-tabs .ffd-tabs__tab {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    box-sizing: border-box;
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: var(--ffd-tabs-text);
    font: inherit;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.ffd-tabs .ffd-tabs__tab:hover {
    background: rgba(30, 58, 92, 0.07);
    color: var(--ffd-tabs-ink);
}

.ffd-tabs .ffd-tabs__tab[aria-selected="true"] {
    background: var(--ffd-tabs-ink);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(18, 23, 31, 0.12), 0 6px 14px -6px rgba(30, 58, 92, 0.45);
    cursor: default;
}

.ffd-tabs .ffd-tabs__tab:focus {
    outline: none;
}

.ffd-tabs .ffd-tabs__tab:focus-visible {
    outline: 2px solid var(--ffd-tabs-gold);
    outline-offset: 2px;
}

/* アイコンと見出し：PCでは横並び、スマホでは縦に積む */
.ffd-tabs__head {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ffd-tabs__icon {
    flex: none;
    display: block;
    width: 20px;
    height: 20px;
    color: var(--ffd-tabs-text);
    transition: color 0.2s ease;
}

.ffd-tabs .ffd-tabs__tab:hover .ffd-tabs__icon {
    color: var(--ffd-tabs-ink);
}

/* 選択中は藍鉄の地に、サイトの金（お見積もりボタンの色）に寄せた明るい金で */
.ffd-tabs .ffd-tabs__tab[aria-selected="true"] .ffd-tabs__icon {
    color: #d9b46a;
}

.ffd-tabs__title {
    display: block;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ffd-tabs__sub {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    opacity: 0.82;
}

/* テーマ側で display を指定されても、隠したパネルは確実に隠す */
.ffd-tabs__panel[hidden] {
    display: none !important;
}

/* 外枠の幅の計算をテーマの box-sizing に左右されないよう固定する（タブの帯と左右をそろえるため）。
   段が進むとウィザードはカードの上端までスクロールするが、固定ヘッダーの下に進行標が隠れないよう余白を取る。
   カードの overflow: hidden はカード自体をスクロール領域にしてしまい、Chrome が scroll-margin を無視するため、
   スクロール領域を作らない overflow: clip に置き換える（未対応のブラウザでは元の hidden のまま） */
.ffd-tabs .fsd-wizard,
.ffd-tabs .ffd-wizard {
    box-sizing: content-box;
    overflow: clip;
    scroll-margin-top: 96px;
}

/* テーマの .post_content p（margin: 0 0 2em・line-height: 2.4）が各段の説明文に勝ち、
   説明文が中央からずれて左に寄るため、両方の診断で本来の指定に戻す */
.ffd-tabs .ffd-tabs__panel .fsd-step-description,
.ffd-tabs .ffd-tabs__panel .ffd-step-description {
    margin: 0 auto 30px;
    line-height: 1.75;
}

/* No.1診断の色を、タブの中だけ日本初・世界初診断と同じ藍鉄・錆青磁にそろえる
   （No.1診断プラグインの設定値は変えない） */
.ffd-tabs .fsd-wizard {
    --fsd-primary: #1e3a5c;
    --fsd-primary-hover: #162c47;
    --fsd-accent: #2f6f5e;
}

@media (max-width: 600px) {
    .ffd-tabs,
    .ffd-tabs .fsd-wizard,
    .ffd-tabs .ffd-wizard {
        scroll-margin-top: 72px;
    }

    /* ウィザードの外枠（左右8px）にそろえる */
    .ffd-tabs__list {
        margin: 0 8px 12px;
        border-radius: 12px;
    }

    .ffd-tabs .ffd-tabs__tab {
        min-height: 56px;
        padding: 8px 2px;
        border-radius: 9px;
    }

    .ffd-tabs__head {
        flex-direction: column;
        gap: 3px;
    }

    .ffd-tabs__icon {
        width: 18px;
        height: 18px;
    }

    /* 画面幅に合わせて縮め、320pxの端末でも「日本初・世界初調査」を1行に収める */
    .ffd-tabs__title {
        font-size: min(15px, 3.9vw);
        letter-spacing: 0;
    }

    .ffd-tabs__sub {
        font-size: min(10.5px, 2.9vw);
        letter-spacing: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ffd-tabs .ffd-tabs__tab {
        transition: none;
    }
}