@charset "UTF-8";
/* =========================================================================
   AI診断ページ / 診断結果ページ 専用CSS（style.css とは分離・is_page 限定 enqueue）
   規約: p-shindan-* / p-result-* の BEM、モバイルファースト＋@media(min-width:1024px)、
   親テーマ p/h2/h3 の margin:33px・letter-spacing:2.4px は各 __title 配下で打ち消す。
   セクションCSSは指揮官がこのファイルにコメント区切りで直列統合する。
   ========================================================================= */

/* ===== 共通土台 ===== */
.p-shindan,
.p-result {
    /* Figma背景（淡いブルーグレー）。ヘッダー/フッターも同色下地に乗る */
    --shindan-bg: #eaf1f9;
    --shindan-navy: #294382;
    --shindan-blue-grad: linear-gradient(203deg, #2e7fe8 11%, #4157b4 67%);
    background-color: var(--shindan-bg);
}

/* 親テーマが p/h2/h3 に当てる margin/letter-spacing を診断配下で打ち消す共通。
   親の「.single p, .page:not(.home) p」（詳細度0,2,1・margin 48px）に勝つため
   .page 前置＋:is()（0,2,1の後勝ち）で書く */
.page .p-shindan :is(p, h1, h2, h3, h4, ul, li),
.page .p-result :is(p, h1, h2, h3, h4, ul, li) {
    margin: 0;
    letter-spacing: normal;
}

/* ===== ミニマルヘッダー ===== */
/* header/footer は <main class="p-shindan|p-result"> の外にあり CSS変数が届かないため直接指定 */
.p-shindan-head {
    display: flex;
    align-items: center;
     padding: 25px 16px 12px 18px;
    background-color: #eaf1f9;
}




.p-shindan-head__logo {
    display: inline-flex;
    line-height: 0;
}

.p-shindan-head__logo img {
    width: 100px;
    height: auto;
}

@media screen and (min-width: 1024px) {
.p-shindan-head {
    display: flex;
    align-items: center;
     padding: 58px 69px 24px;
    background-color: #eaf1f9;
}

.p-shindan-head__logo img {
    width: 162px;
    height: auto;
}

}

/* ===== ミニマルフッター ===== */
.p-shindan-foot {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 48px 20px 40px;
    background-color: #eaf1f9;
    text-align: center;
}

@media screen and (min-width: 1024px) {
.p-shindan-foot {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 0px 20px 40px;
    background-color: #eaf1f9;
    text-align: center;
}
}

.p-shindan-foot__logo {
    display: inline-flex;
    line-height: 0;
}

.p-shindan-foot__logo img {
    width: 100px;
    height: auto;
}

.page:not(.home) .p-shindan-foot__copyright {
    color: #6e6e6e;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 11px;
    line-height: 1.6;
    margin-block: 24px;
    letter-spacing: 0;
}

@media screen and (min-width: 1024px) {
.p-shindan-foot {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 0px 20px 40px;
    background-color: #eaf1f9;
    text-align: center;
}

.p-shindan-foot__logo img {
    width: 200px;
    height: auto;
}
}


/* ページ内の共通コンテナ幅（各セクションで踏襲） */
.p-shindan__inner,
.p-result__inner {
    width: min(92vw, 940px);
    margin-inline: auto;
}

/* ===== Shindan hero ===== */
/* 青グラデ帯。バナーアートは container-query(cqw) でSP/PC別に絶対配置＝どの幅でも比率一定 */

.p-shindan-hero {
    padding-top:0;
}

@media screen and (min-width: 1024px) {
.p-shindan-hero {
    padding-top: clamp(24px, 6vw, 56px);
}
}

.p-shindan-hero__inner {
    width: min(92vw, 920px);
    margin-inline: auto;
}

.p-shindan-hero__banner {
    position: relative;
    width: 100%;
    aspect-ratio: 355 / 308;
    border-radius: 10px;
    /* WebGLが動くまで（および非対応時）のフォールバック。canvasが乗れば隠れる */
    background: var(--shindan-blue-grad);
    box-shadow: 0 20px 40px rgba(18, 53, 110, 0.18);
    container-type: inline-size;
}

/* WebGLグラデ背景（TOPと同一）。blur/scale分がバッジ等を巻き込まないよう、
   バナー直下の overflow:hidden 枠だけをクリップ範囲にする */
.p-shindan-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

.p-shindan-hero__bg .js-gradient,
.p-shindan-form__bg .js-gradient {
    display: block;
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 1024px) {
    .p-shindan-hero__banner {
        aspect-ratio: 920 / 276;
        border-radius: 19px;
    }
}

.p-shindan-hero__logo {
      position: absolute;
    top: 18cqw;
    left: 48%;
    z-index: 2;
    width: 31.2cqw;
    height: auto;
    transform: translateX(-50%);

}

@media screen and (min-width: 1024px) {
    .p-shindan-hero__logo {
    top: 3.48cqw;
        left: 44.6cqw;
        width: 10.89cqw;
        transform: none;
    }
}

.p-shindan-hero__title {
    position: absolute;
    top: 28.45cqw;
    left: 13.8cqw;
    z-index: 2;
    width: 74.61cqw;
    height: 32.68cqw;
}

.p-shindan-hero__title::before,
.p-shindan-hero__title::after {
    position: absolute;
    z-index: -1;
    border-radius: 1.37cqw;
    background-color: #fff;
    content: "";
}

.p-shindan-hero__title::before {
    top: 0;
    left: 0.51cqw;
    width: 71.11cqw;
    height: 15.93cqw;
}

.p-shindan-hero__title::after {
    top: 17.75cqw;
    left: 0;
    width: 71.83cqw;
    height: 15.93cqw;
}

.p-shindan-hero__title img {
    position: absolute;
    top: 1.91cqw;
    left: 3.66cqw;
    width: 61.73cqw;
    height: auto;
}

.p-shindan-hero__title-img--pc {
    display: none;
}

@media screen and (min-width: 1024px) {
    .p-shindan-hero__title-img--sp {
        display: none;
    }

    .p-shindan-hero__title-img--pc {
        display: block;
    }

    .p-shindan-hero__title {
        top: 7.61cqw;
        left: 33.48cqw;
        width: 33cqw;
        height: 15.65cqw;
    }

    .p-shindan-hero__title::before,
    .p-shindan-hero__title::after {
        border-radius: 0.65cqw;
    }

    .p-shindan-hero__title::before {
        top: 0;
        left: 2.48cqw;
        width: 27.26cqw;
        height: 7.17cqw;
    }

    .p-shindan-hero__title::after {
        top: 8.48cqw;
        left: 0;
        width: 33cqw;
        height: 7.17cqw;
    }

    .p-shindan-hero__title img {
        top: 0.91cqw;
        left: 3.66cqw;
        width: 26.99cqw;
    }
}

.p-shindan-hero__note {
    position: absolute;
    top: 66.04cqw;
    left: 50%;
    z-index: 2;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 3.94cqw;
    font-weight: 500;
    line-height: 1.37;
    text-align: center;
    transform: translateX(-50%);
}

@media screen and (min-width: 1024px) {
    .p-shindan-hero__note {
        top: 24.02cqw;
        font-size: 1.52cqw;
        white-space: nowrap;
    }
}

.p-shindan-hero__badge {
    position: absolute;
    z-index: 4;
    display: grid;
    place-content: center;
    justify-items: center;
    aspect-ratio: 1;
    width: 20.35cqw;
    border-radius: 50%;
    text-align: center;
}

.p-shindan-hero__badge--free {
    top: -2.25cqw;
    left: 60.59cqw;
    padding-top: 1.6cqw;
    background: linear-gradient(180deg, #2e7fe8 0%, #4157b4 100%);
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

.p-shindan-hero__badge-muryo {
    width: 13.15cqw;
    height: auto;
}

.p-shindan-hero__badge-sub {
    margin-top: 1.3cqw;
    color: #fff;
    font-family: "Shippori Mincho", serif;
    font-size: 2.26cqw;
    font-weight: 600;
    line-height: 1.2;
}

.p-shindan-hero__badge--online {
    top: -2.25cqw;
    left: 79.46cqw;
    background: url(../images/banner-badge--online.webp) center / cover no-repeat;
    box-shadow: 0 5px 10px rgba(18, 53, 110, 0.25);
    color: #0771c8;
    font-family: "Shippori Mincho", serif;
    font-size: 5.96cqw;
    font-weight: 500;
    line-height: 1;
}

.p-shindan-hero__badge-online-lead {
    display: block;
    margin-bottom: 0.45cqw;
    font-size: 3.08cqw;
    font-weight: 800;
    letter-spacing: -0.19em;
    line-height: 1;
}

@media screen and (min-width: 1024px) {
    .p-shindan-hero__badge {
        width: 10.97cqw;
    }

    .p-shindan-hero__badge--free {
        top: 2.72cqw;
        left: 70.33cqw;
        padding-top: 0.9cqw;
    }

    .p-shindan-hero__badge-muryo {
        width: 7.08cqw;
    }

    .p-shindan-hero__badge-sub {
        margin-top: 0.7cqw;
        font-size: 1.22cqw;
    }

    .p-shindan-hero__badge--online {
        top: 2.9cqw;
        left: 80.54cqw;
        font-size: 3.21cqw;
    }

    .p-shindan-hero__badge-online-lead {
        font-size: 1.66cqw;
    }
}

.p-shindan-hero__device {
       position: absolute;
    top: 26.07cqw;
    left: 65.5cqw;
    z-index: 2;
    width: 27.89cqw;
    height: auto;

}

@media screen and (min-width: 1024px) {
    .p-shindan-hero__device {
        top: 8.26cqw;
        left: 2.07cqw;
        width: 30.38cqw;
    }
}

.p-shindan-hero__person {
    position: absolute;
    bottom: 0;
    z-index: 4;
    object-fit: cover;
    object-position: bottom;
}

.p-shindan-hero__person--left {
    left: -6.2cqw;
    width: 34.37cqw;
    height: 39.44cqw;
    border-bottom-left-radius: 10px;
}

.p-shindan-hero__person--right {
    left: 70.99cqw;
    width: 28.76cqw;
    height: 39.72cqw;
    border-bottom-right-radius: 10px;
}

@media screen and (min-width: 1024px) {
    .p-shindan-hero__person--left {
        left: 67.5cqw;
        width: 15.43cqw;
        height: 17.77cqw;
        border-bottom-left-radius: 0;
    }

    .p-shindan-hero__person--right {
        left: 79.46cqw;
        width: 13.04cqw;
        height: 17.93cqw;
        border-bottom-right-radius: 19px;
    }
}

/* ===== Shindan lead ===== */

.p-shindan-lead {
    margin-block: 24px 16px;
    text-align: center;
}

.p-shindan-lead__text {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(15px, 4vw, 18px);
    font-weight: 500;
    line-height: 1.7;
}

.p-shindan-lead__accent {
    background: linear-gradient(180deg, #2e7fe8 0%, #4157b4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-size: 1.22em;
    font-weight: 700;
}

/* 「簡単チェック」の下線（クリップテキストは text-decoration が透明になるため border で引く） */
.p-shindan-lead__accent--underline {
    padding-bottom: 1px;
}

/* ===== Shindan form ===== */

/* セクション土台 */
.p-shindan-form {
    padding-block: 8px 56px;
}

.p-shindan-form__inner {
    width: min(92vw, 920px);
    margin-inline: auto;
}

/* ── ③ 設問群（1枚の白カードに Q1〜Q6 を内包）──
   カード下端は青パネルの背後に潜り込み（padding-bottom に潜り分を含む＋パネル負マージン）、
   パネル上辺中央の白い下向きノッチ（__panel::before）でFigmaの連結形状を再現する */
.p-shindan-form__quiz {
    border: 2px solid #2e7fe8;
    border-radius: 16px;
    background-color: #fbfdff;
    padding: 24px 14px 64px;
}

.p-shindan-form__questions {
    display: grid;
    gap: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.p-shindan-form__qhead {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 8px 16px 8px 70px;
    border: 1px solid #b2cdec;
    border-radius: 10px;
    background-color: #eaf1f9;
    max-width: 95%;
    margin-inline: auto;
}

.p-shindan-form__qnum {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    border-radius: 50%;
    background-image: var(--shindan-blue-grad, linear-gradient(203deg, #2e7fe8 11%, #4157b4 67%));
    box-shadow: 0 3px 6px rgba(20, 60, 130, 0.25);
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
}

.p-shindan-form__qtitle {
    color: #000000;
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
}

@media screen and (max-width: 1023px) {
    /* 親テーマ打ち消しルール（.page .p-shindan :is(...) letter-spacing:normal, 詳細度 0,3,1）
       に勝つため、.page .p-shindan を前置して詳細度を合わせる */
    .page .p-shindan .p-shindan-form__qtitle {
        letter-spacing: -0.05em;
    }
}

.p-shindan-form__options {
    display: grid;
    gap: 2px;
    padding: 14px 6px 0;
}

.p-shindan-form__option,
.p-shindan-form__options .wpcf7-list-item > label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 6px;
    cursor: pointer;
}

.p-shindan-form__radio,
.p-shindan-form__options input[type="radio"] {
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 2px solid #b9c6d9;
    border-radius: 50%;
    background-color: #ffffff;
    /* 未選択時もグレーの内ドット（Figma準拠）。選択時は下の:checkedが青ドットで上書き */
    background-image: radial-gradient(circle at center, #d2d9e2 0 34%, transparent 40%);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.p-shindan-form__radio:checked,
.p-shindan-form__options input[type="radio"]:checked {
    border-color: #2e7fe8;
    background-image: radial-gradient(circle at center, #2e7fe8 0 42%, transparent 46%);
}

.p-shindan-form__radio:focus-visible,
.p-shindan-form__options input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(46, 127, 232, 0.3);
}

.p-shindan-form__option-text,
.p-shindan-form__options .wpcf7-list-item-label {
    color: #333333;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* ── ④ 入力フォームパネル（WebGLグラデ背景＋内側ガラス）──
   白カードに負マージンで重なり、::before の白い下向き三角がFigmaのノッチを再現 */
.p-shindan-form__panel {
    position: relative;
    margin-top: -36px;
    border-radius: 16px;
    padding: 46px 12px 18px;
    /* WebGLが動くまで（および非対応時）のフォールバック。canvasが乗れば隠れる */
    background: var(--shindan-blue-grad, linear-gradient(203deg, #2e7fe8 11%, #4157b4 67%));
}

/* WebGLグラデ背景（TOPと同一）。blur/scale分をパネル角丸でクリップ */
.p-shindan-form__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

/* ノッチ・ガラス・注記は canvas(z:0) より前面へ */
.p-shindan-form__panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 17px solid #fbfdff;
}

.p-shindan-form__glass {
    position: relative;
    z-index: 1;
    border-radius: 10px;
    padding: 22px 16px;
    background-color: rgba(238, 238, 238, 0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.p-shindan-form__note {
    position: relative;
    z-index: 1;
}

.p-shindan-form__row {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

/* 必須バッジをラベルの上に置く（Figma準拠） */
.p-shindan-form__label-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.p-shindan-form__label {
    color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
}

.p-shindan-form__required {
    flex-shrink: 0;
    color: #d91919;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}

.p-shindan-form__field {
    width: 100%;
    border: 1px solid #a0a0a0;
    border-radius: 10px;
    padding: 13px 16px;
    background-color: #ffffff;
    color: #333333;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.p-shindan-form__field::placeholder {
    color: #bebebe;
    font-size: 13px;
}

.p-shindan-form__field:focus {
    border-color: #2e7fe8;
    outline: none;
    box-shadow: 0 0 0 2px rgba(46, 127, 232, 0.25);
}

/* .wpcf7 p (0,1,1) / .wpcf7-form p (0,1,1) / style.css の .wpcf7 p (0,1,1) を打ち消すため
   .p-shindan .p-shindan-form__privacy で (0,2,0) にして勝たせる */
.p-shindan .p-shindan-form__privacy {
    margin-top: 4px;
    color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

.p-shindan-form__privacy-link {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.p-shindan-form__submit-wrap {
    position: relative;
    margin-top: 20px;
    text-align: center;
}

/* 送信ボタン左に重なるMacBookイラスト（Figma 30:214）。SPは非表示 */
.p-shindan-form__device {
    display: none;
}

@media (min-width: 1024px) {
    .p-shindan-form__device {
        display: block;
        position: absolute;
        left: calc(50% - 240px);
        top: -24px;
        z-index: 2;
        width: 156px;
        height: auto;
        pointer-events: none;
    }
}

.p-shindan-form__submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 520px;
    min-height: 56px;
    padding: 14px 46px;
    border: 2px solid #ffffff;
    border-radius: 4px;
    background-image: linear-gradient(191deg, #f7d162 11%, #eea118 67%);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    /* 袋文字：input[type=submit]は -webkit-text-stroke が効かないため、
       text-shadow を8方向オフセットで模擬した黒縁取り 1px＋落ち影 */
    text-shadow:
        1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000,
        1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
        0 4px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    /* transition:all はカスタムプロパティを補間しないブラウザがあるため明示指定 */
    transition: --hukuito-grad-c1 0.3s ease, --hukuito-grad-c2 0.3s ease;
}

/* グラデをtransitionで補間するための登録カスタムプロパティ（style.cssと同定義） */
@property --hukuito-grad-c1 {
    syntax: "<color>";
    inherits: false;
    initial-value: transparent;
}

@property --hukuito-grad-c2 {
    syntax: "<color>";
    inherits: false;
    initial-value: transparent;
}

/* .wpcf7 p 系の詳細度(0,1,1)を打ち消すため .p-shindan 前置で (0,2,0) に */
.p-shindan .p-shindan-form__note {
    margin-top: 18px;
    color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 11px;
    line-height: 1.7;
    text-align: center;
}

@media (min-width: 1024px) {
    .p-shindan-form {
        padding-block: 8px 80px;
    }

    .p-shindan-form__quiz {
        border-width: 3px;
        border-radius: 20px;
        /* 下120px = 見えている余白80px ＋ パネル背後に潜る40px */
        padding: 55px 126px 120px;
    }

    .p-shindan-form__questions {
        gap: 40px;
    }

    .p-shindan-form__qhead {
        min-height: 53px;
        padding: 8px 24px 8px 88px;
        border-radius: 75px;
    }

    .p-shindan-form__qnum {
        left: 0;
        width: 65px;
        height: 65px;
        font-size: 27px;
    }

    .p-shindan-form__qtitle {
        font-size: 21px;
    }

    .p-shindan-form__options {
        padding: 23px 0 0 88px;
    }

    .p-shindan-form__option,
    .p-shindan-form__options .wpcf7-list-item > label {
        gap: 18px;
        padding: 5px 6px;
    }

    .p-shindan-form__radio,
    .p-shindan-form__options input[type="radio"] {
        width: 30px;
        height: 30px;
    }

    .p-shindan-form__option-text,
    .p-shindan-form__options .wpcf7-list-item-label {
        font-size: 17px;
        line-height: 30px;
    }

    .p-shindan-form__panel {
        margin-top: -40px;
        border-radius: 19px;
        padding: 91px 20px 45px;
    }

    .p-shindan-form__panel::before {
        border-left-width: 40px;
        border-right-width: 40px;
        border-top-width: 20px;
    }

    .p-shindan-form__glass {
        width: min(100%, 702px);
        margin-inline: auto;
        padding: 58px 58px 53px;
    }

    .p-shindan-form__row {
        grid-template-columns: 168px minmax(0, 388px);
        align-items: center;
        gap: 14px 0;
        margin-bottom: 16px;
    }

    .p-shindan-form__label {
        font-size: 18px;
    }

    .p-shindan-form__field::placeholder {
        font-size: 16px;
    }

    .p-shindan .p-shindan-form__privacy {
        text-align: left;
        padding-left: 168px;
        margin-top: 24px;
        font-size: 16px;
    }

    .p-shindan-form__submit-wrap {
        margin-top: 36px;
    }

    .p-shindan-form__submit {
        max-width: 552px;
        min-height: 57px;
        font-size: 22px;
    }

    .p-shindan .p-shindan-form__note {
        margin-top: 22px;
        font-size: 15px;
    }
}

/* ── CF7出力への適応（フォームID 438）──
   設問カード等の「枠」HTMLはCF7テンプレ本文側にあり、CF7が生成するラッパー
   （.wpcf7-form-control-wrap / .wpcf7-radio / .wpcf7-list-item）を既存デザインに馴染ませる */

/* プラグイン(custom-css-js)が .wpcf7 に当てる 800px枠・padding・灰下地と、
   親utility.css の form margin / letter-spacing(0.15rem継承) を解除 */
.p-shindan-form .wpcf7 {
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.p-shindan-form .wpcf7 form {
    margin: 0;
    letter-spacing: normal;
}

/* 親テーマ utility（.wpcf7 input[type=…] / 詳細度0,2,1）より上から入力欄デザインを適用 */
.p-shindan-form .wpcf7 input.p-shindan-form__field {
    width: 100%;
    max-width: 100%;
    border: 1px solid #a0a0a0;
    border-radius: 10px;
    padding: 13px 16px;
    background-color: #ffffff;
    color: #333333;
    font-size: 16px;
    letter-spacing: normal;
}

@media (min-width: 1024px) {
    .p-shindan-form .wpcf7 input.p-shindan-form__field {
        min-height: 54px;
    }
}

/* ラジオ群: CF7ラッパーを透過して .wpcf7-list-item を __options グリッドの行にする */
.p-shindan-form__options .wpcf7-form-control-wrap,
.p-shindan-form__options .wpcf7-radio {
    display: contents;
}

.p-shindan-form__options .wpcf7-list-item {
    display: block;
    margin: 0;
}

/* テキスト/メール欄: ラッパーをブロック化して __row のグリッドセルを占めさせる */
.p-shindan-form__row .wpcf7-form-control-wrap {
    display: block;
    min-width: 0;
}

/* バリデーションエラー（未入力・未回答）
   親テーマが position:absolute + 幅100% にするため static に戻す（横スクロール・重なり防止） */
.p-shindan-form .wpcf7-not-valid-tip {
    position: static;
    display: block;
    width: auto;
    margin-top: 6px;
    color: #d91919;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

/* 青ガラスパネル内は白背景でないため明るい赤に */
.p-shindan-form__glass .wpcf7-not-valid-tip {
    color: #ffd9d9;
}

/* 親テーマのラジオ用::before（透明ドット）はこちらの radial-gradient と重複するため無効化 */
.p-shindan-form__options input[type="radio"]::before {
    content: none;
}

/* ラジオのサイズ。親utility.css の .wpcf7 input[type=radio]{width:auto}（詳細度0,2,1）が
   後勝ちして width だけ auto に奪われ縦長になるため、.wpcf7 を挟んで 0,3,1 で勝たせて正方形を担保 */
.p-shindan-form .wpcf7 .p-shindan-form__options input[type="radio"] {
    width: 20px;
    height: 20px;
}

@media (min-width: 1024px) {
    .p-shindan-form .wpcf7 .p-shindan-form__options input[type="radio"] {
        width: 30px;
        height: 30px;
    }
}

/* 送信結果メッセージ（フォーム末尾にCF7が自動挿入） */
.p-shindan-form .wpcf7-response-output {
    margin: 20px 0 0;
    padding: 10px 14px;
    border-radius: 8px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

/* 送信中スピナー */
.p-shindan-form .wpcf7-spinner {
    display: block;
    margin: 10px auto 0;
}

/*
 * 送信ボタン。custom-css-js プラグインが「html body .wpcf7-submit」に
 * background / border / border-radius / padding / width / margin を !important で当てているため、
 * デザイン再現に必要なプロパティだけ !important で対抗する（TOPコンタクトと同じ方式）。
 * CF7の [submit] は <input> なので矢印アイコンは background-image で重ねる。
 */
.p-shindan-form .wpcf7 .p-shindan-form__submit {
    width: 100% !important;
    max-width: 520px !important;
    height: auto !important;
    min-height: 56px;
    margin: 0 auto !important;
    border: 2px solid #ffffff !important;
    border-radius: 4px !important;
    padding: 14px 46px !important;
    --hukuito-grad-c1: #f7d162;
    --hukuito-grad-c2: #eea118;
    background:
        url("../images/icon-arrow.svg") right 20px center / 17px 17px no-repeat,
        linear-gradient(191deg, var(--hukuito-grad-c1) 11%, var(--hukuito-grad-c2) 67%) !important;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
    font-size: 18px !important;
    /* プラグイン側の transition 指定に負けないよう !important で明示（色クロスフェード用） */
    transition: --hukuito-grad-c1 0.3s ease, --hukuito-grad-c2 0.3s ease !important;
}

/* プラグインの hover（赤背景・translateY）を打ち消す */
.p-shindan-form .wpcf7 .p-shindan-form__submit:hover {
    transform: none !important;
    opacity: 1;
}

/* ホバー（Figma 2026-281）: 濃いオレンジグラデへ 0.3s クロスフェード。
   背景そのものは触らず色プロパティだけ変える（矢印位置・!important競合を回避） */
@media (hover: hover) {
    .p-shindan-form .wpcf7 .p-shindan-form__submit:hover {
        --hukuito-grad-c1: #fdc72b;
        --hukuito-grad-c2: #d68900;
    }
}

@media (min-width: 1024px) {
    /* MacBookイラストがボタン左に重なるため、テキストを右へ逃がし矢印もテキスト寄りに */
    .p-shindan-form .wpcf7 .p-shindan-form__submit {
        max-width: 552px !important;
        min-height: 57px;
        padding: 14px 60px 14px 170px !important;
        background-position: right 76px center, 0 0 !important;
        font-size: 22px !important;
        letter-spacing: 0.02em;
    }
}

/* パネル右下の人物写真（Figma 30:221）。PCのみ、canvas(z:0)より前面の::afterに重ねる */
@media (min-width: 1024px) {
    .p-shindan-form__panel::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        border-radius: inherit;
        pointer-events: none;
        background:
            url("../images/fv-banner-person-left.webp") right bottom / 149px auto no-repeat,
            url("../images/fv-banner-person-right.webp") right 74px bottom / 126px auto no-repeat;
    }
}

/* どこかのCSSが p::after で1pxの区切り線を注入するため無効化（Figmaに区切り線は無い） */
.p-shindan-form__privacy::after,
.p-shindan-form__note::after {
    content: none !important;
}

/* ===== Result hero ===== */
.p-result-hero {
    padding-top: 44px; /* 人物が帯の上端から飛び出す分の逃げ */
}

.p-result-hero__banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    padding: 18px 20px;
    border-radius: 14px;
    /* WebGLが動くまで（および非対応時）のフォールバック。canvasが乗れば隠れる */
    background: var(--shindan-blue-grad);
    width: min(92vw, 920px);

    margin-inline: auto;
}

/* WebGLグラデ背景（TOP/診断ページと同一）。blur/scale分を角丸内にクリップ */
.p-result-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

.p-result-hero__bg .js-gradient {
    display: block;
    width: 100%;
    height: 100%;
}

.p-result-hero__title {
    position: relative;
    z-index: 1;
    color: #fff;
    font-family: "Shippori Mincho", serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.4;
    text-align: center;
}

/* SP/PCともに人物を表示 */
.p-result-hero__persons {
    display: flex;
    position: absolute;
    right: 6px;
    bottom: 0;
    z-index: 1;
    align-items: flex-end;
    pointer-events: none;
}

.p-result-hero__person {
    display: block;
    width: auto;
    height: auto;
}

/* HTMLは --right → --left の順（result-hero.php）。若干重ねるため 2番目の --left 側に負マージン */
.p-result-hero__person--left {
    width: 75px;
    margin-left: -30px;
}

.p-result-hero__person--right {
    width: 64px;
}

@media (min-width: 1024px) {
    .p-result-hero {
        padding-top: 56px;
    }

    .p-result-hero__banner {
        min-height: 116px;
        padding: 20px 40px;
        border-radius: 19px;
    }

    .p-result-hero__title {
        font-size: 40px;
    }

    .p-result-hero__persons {
        display: flex;
        right: 0;
    }

    .p-result-hero__person--left {
        width: 126px;
z-index: 2;
    }

    .p-result-hero__person--right {
        width: 112px;
        margin-left: -23px;
        transform:translateX(50px);
        z-index: 1;

    }
}

/* ===== Result panel ===== */
/* Figma: 17:242（A表示）/ 14:533（S・B）。モバイルファースト＋@media(min-width:1024px) */

.p-result-panel :where(p, h2, h3, ul, li) {
    margin: 0;
    padding: 0;
    letter-spacing: normal;
}
.p-result-panel__actions {
    list-style: none;
}

.p-result-panel {
    --rp-frame-bg: #f4efe2;
    --rp-frame-border: #ddc686;
    --rp-band: #ddc686;
    --rp-block-border: #f2cd63;
    --rp-title: #bf9727;
    --rp-blue: #2e7fe8;
    --rp-blue-grad: linear-gradient(203deg, #2e7fe8 11%, #4157b4 67%);
    padding: 40px 0 8px;
}

.p-result-panel__inner {
    width: min(92vw, 920px);
    margin-inline: auto;
}

.p-result-panel__frame {
    border: 4px solid var(--rp-frame-border);
    border-radius: 20px;
    background-color: var(--rp-frame-bg);
    overflow: hidden;
}

.p-result-panel__band {
    background-color: var(--rp-band);
    padding: 24px 16px 88px;
    text-align: center;
}

.page .p-result .p-result-panel__company {
    width: min(88%, 688px);
    margin-inline: auto;
    padding: 12px 16px;
    border: 1px solid #000;
    border-radius: 999px;
    background-color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #000;
}

.page .p-result .p-result-panel__heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.4;
    color: #000;
}

.p-result-panel__heading-text{
    transform: translateY(-3px);
}

/* 見出し左右の《 》SVG（images/left-kakko.svg / right-kakko.svg） */
.p-result-panel__bracket {
    display: inline-block;
    width: auto;
    height: 1.3em;
    flex-shrink: 0;
}

.p-result-panel__card {
    margin: -72px 12px 0;
    padding: 0 8px 40px;

}

.p-result-panel__card[hidden] {
    display: none;
}

/* コインを外にはみ出させるため overflow:hidden なし。角丸は左右の子側で別々に */
.p-result-panel__type {
    display: flex;
    align-items: stretch;
    filter: drop-shadow(0 16px 14px rgba(0, 0, 0, 0.05));
}

.p-result-panel__type-badge {
    position: relative;
    flex: 0 0 38%;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.p-result-panel__type-name {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    padding: 16px 14px;
    background-color: #fff;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: 19px;
    line-height: 1.35;
    color: #000;
}

/* ランク別セル背景（Figma準拠のグラデ） */
.p-result-panel__card--s .p-result-panel__type-badge {
    background: linear-gradient(180deg, #ffd4af 0%, #ffa698 100%);
}
.p-result-panel__card--a .p-result-panel__type-badge {
    background: linear-gradient(180deg, #fff1c7 0%, #f2bd23 100%);
}
.p-result-panel__card--b .p-result-panel__type-badge {
    background: linear-gradient(180deg, #ccefff 0%, #387d9b 100%);
}

/* コイン画像（images/rank{s,a,b}.webp）。セルより大きく、上下にはみ出させる */
.p-result-panel__medal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 90px;
    height: auto;
    pointer-events: none;
}

.p-result-panel__blocks {
    display: grid;
    gap: 20px;
    margin-top: 24px;
}

.p-result-panel__block {
    padding: 22px 18px;
    border: 1px solid var(--rp-block-border);
    border-radius: 20px;
    background-color: #fff;
}

.page .p-result .p-result-panel__block-title {
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: 21px;
    line-height: 1.3;
    color: var(--rp-title);
    margin-bottom: 12px;
}

.p-result-panel__block-body {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 15px;
    line-height: 2.1;
    color: #000;
}

.p-result-panel__actions {
    display: grid;
    gap: 4px;
}

.p-result-panel__action {
    position: relative;
    padding-left: 1.1em;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 15px;
    line-height: 2.1;
    color: #000;
}

.p-result-panel__action::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
}

/* overflow:hidden にすると下端V字（::after）がクリップされるため、
   角丸はタイトル帯側の border-radius で処理する */
.p-result-panel__support {
    position: relative;
    margin-top: 8px;
    border: 4px solid var(--rp-blue);
    border-radius: 20px;
    background-color: #f3f8ff;
}

.p-result-panel__support::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -30px;
    transform: translateX(-50%);
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    border-top: 30px solid var(--rp-blue);
}

.p-result-panel__support-title {
    padding: 16px 18px;
    border-radius: 16px 16px 0 0;
    background: var(--rp-blue-grad);
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    color: #fff;
}

.p-result-panel__support-body {
    padding: 18px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 15px;
    line-height: 2.1;
    color: #000;
}

@media (min-width: 1024px) {
    .p-result-panel {
        padding: 46px 0 8px;
    }

    .p-result-panel__band {
        padding: 48px 24px 124px;
    }

    .p-result-panel__company {
        font-size: 16px;
        padding: 12px 20px;
    }

    .page .p-result .p-result-panel__heading {
        gap: 14px;
        margin-top: 48px;
        font-size: 34px;
    }

    .p-result-panel__card {
        max-width: 712px;
        margin: -80px auto  0;
        padding: 0 24px 70px;
    }

    .p-result-panel__type-badge {
        flex-basis: 258px;
        min-height: 127px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .p-result-panel__type-name {
        padding: 20px 28px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        font-size: 28px;
    }

    .p-result-panel__medal {
        width: 145px;
    }

    .p-result-panel__blocks {
        gap: 24px;
        margin-top: 34px;
        /* padding-inline: 16px; */
    }

    .p-result-panel__block {
        padding: 30px 34px 30px 56px;  
    }

    .page .p-result .p-result-panel__block-title,
    .p-result-panel__support-title {
        font-size: 26px;
    }

    .p-result-panel__block-body,
    .p-result-panel__action,
    .p-result-panel__support-body {
        font-size: 16px;
        line-height: 2.24;
    }

    .p-result-panel__support-title {
        padding: 18px 28px 18px 56px;
    }

    .p-result-panel__support-body {
        padding: 26px 28px 26px 56px;
    }
}

/* ===== Result cta ===== */
.p-result-cta {
    padding: 40px 0 8px;
}

.page .p-result .p-result-cta__panel {
    position: relative;
    overflow: hidden;
    padding: 26px 20px 30px;
    border-radius: 16px;
    /* WebGLが動くまで（および非対応時）のフォールバック。canvasが乗れば隠れる */
    background: var(--shindan-blue-grad);
    width: min(92vw, 920px);
    margin-inline: auto;
}

/* WebGLグラデ背景（TOP/診断/結果ヒーローと同一） */
.p-result-cta__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

.p-result-cta__bg .js-gradient {
    display: block;
    width: 100%;
    height: 100%;
}

.p-result-cta__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.p-result-cta__title {
    color: #fff;
    font-family: "Shippori Mincho", serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
}

.p-result-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(100%, 506px);
    min-height: 52px;
    padding: 8px 20px;
    border: 2px solid #fff;
    border-radius: 5px;
    --hukuito-grad-c1: #f7d162;
    --hukuito-grad-c2: #eea118;
    background: linear-gradient(192deg, var(--hukuito-grad-c1) 11%, var(--hukuito-grad-c2) 67%);
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    text-decoration: none;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .25);
    /* transition:all はカスタムプロパティを補間しないブラウザがあるため明示指定 */
    transition: --hukuito-grad-c1 0.3s ease, --hukuito-grad-c2 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* ホバー（Figma 2026-281）: シアン→青グラデへ 0.3s クロスフェード（通常はオレンジのまま）。
   color:#fff は親テーマ .ol-wrapper a:hover の文字色変更への対抗 */
@media (hover: hover) {
    .p-result-cta__button:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 10px rgba(0, 0, 0, .28);
        --hukuito-grad-c1: #6df8f3;
        --hukuito-grad-c2: #2f7fe7;
        color: #fff !important;
    }
}

.p-result-cta__button-arrow {
    flex: none;
    width: 16px;
    height: 16px;
}

/* SPでは非表示（Figma SPデザインに人物なし）、PCで表示 */
.p-result-cta__persons {
    display: none;
}

@media (min-width: 1024px) {
    .p-result-cta__persons {
        position: absolute;
        right: 0px;
        bottom: 0;
        z-index: 0;
        display: flex;
        align-items: flex-end;
        pointer-events: none;
    }
}

.p-result-cta__person {
    display: block;
    width: auto;
    height: auto;
}

.p-result-cta__person--left {
    width: 78px;
    transform: translateX(50px);
    z-index: 1;
}

.p-result-cta__person--right {
    width: 70px;
    margin-left: -18px;
    z-index: 2;
}

.p-result-cta__back {
    margin-top: 26px;
    text-align: center;
}

.p-result-cta__back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 223px;
    min-height: 52px;
    padding: 8px 24px;
    border-radius: 999px;
    background: #fff;
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(41, 67, 130, .08);
    transition: box-shadow .2s ease;
}

@media (hover: hover) {
    .p-result-cta__back-link:hover {
        box-shadow: 0 4px 14px rgba(41, 67, 130, .16);
    }
}

@media (min-width: 1024px) {
    .p-result-cta {
        padding: 35px 0 8px;
    }

    .page .p-result .p-result-cta__panel {
        padding: 94px 40px 100px;
        border-radius: 19px;
    }

    .p-result-cta__body {
        gap: 26px;
    }

    .p-result-cta__title {
        font-size: 27px;
    }

    .p-result-cta__button {
        min-height: 57px;
        font-size: 16px;
    }

    .p-result-cta__person--left {
        width: 126px;
    }

    .p-result-cta__person--right {
        width: 149px;
        margin-left: -23px;
    }

    .p-result-cta__back {
        margin-top: 56px;
        margin-bottom: 100px;
    }

    .p-result-cta__back-link {
        min-height: 56px;
    }
}