@charset "utf-8";
/* =========================================================
   サイズ診断エリア 最終調整
   - 既存のsiza-check-1.webp上部を前置きとして表示
   - CTAは元デザイン（白カード＋黄色ボタン＋右矢印）
   - CTA文言は元画像に近い丸ゴシック体で表示
   ========================================================= */

#wrapper .ucc-diag {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding: 0 0 7%;
    box-sizing: border-box;
    /* 前置き画像の背景色と合わせる */
    background: #d9cec5;
}

/* siza-check-1.webpの上部だけを表示。
   下側に含まれる白いフォーム枠が見える前でクロップする */
#wrapper .ucc-diag-lead-image {
    width: 100%;
    aspect-ratio: 750 / 365;
    overflow: hidden;
    background: #d9cec5;
}

#wrapper .ucc-diag-lead-image img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: top center;
}

/* 白い角丸カードでCTAの視認性を確保 */
#wrapper .ucc-diag-inner {
    position: static;
    overflow: visible;
    width: 94%;
    margin: 5% auto 0;
    padding: 6% 3% 5%;
    box-sizing: border-box;
    text-align: center;
    border: 2px solid #dbe5ee;
    border-radius: 34px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(71, 88, 106, .10);
}

#wrapper .ucc-diag-inner::before,
#wrapper .ucc-diag-inner::after {
    display: none !important;
    content: none !important;
}

/* 黄色CTA：文字を大きく、矢印はテキストの右隣に配置 */
#wrapper .ucc-diag-open,
#wrapper .ucc-diag-open.ucc-diag-open--final {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 94%;
    max-width: 640px;
    min-height: 0;
    margin: 0 auto;
    padding: 22px 26px;
    border: 0;
    border-radius: 999px;
    background: #f7d342;
    color: #183552;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 10px 0 #a5a5a5;
    animation: uccDiagFinalPulse 2.4s ease-in-out infinite;
    transform-origin: center;
    filter: none;
}

#wrapper .ucc-diag-open::after {
    content: "⟶";
    flex: 0 0 auto;
    color: #183552;
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
}

#wrapper .ucc-diag-open:hover {
    filter: brightness(1.02);
}

#wrapper .ucc-diag-open:active {
    box-shadow: 0 3px 0 #a5a5a5;
    transform: translateY(7px);
}

#wrapper .ucc-diag-open__sub,
#wrapper .ucc-diag-open__arrow {
    display: none !important;
}

/* 元画像のCTAに近い丸ゴシック体を指定 */
#wrapper .ucc-diag-open__main {
    position: static;
    display: block;
    width: auto;
    padding: 0;
    margin: 0;
    color: #183552;
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro",
        "ヒラギノ丸ゴ ProN W4", "Rounded Mplus 1c", "Zen Maru Gothic",
        "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
    font-size: 33px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.3;
    white-space: nowrap;
}

@keyframes uccDiagFinalPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }
}

#wrapper .ucc-diag-note {
    position: static;
    margin: 30px 0 0;
    color: #7f8b9b;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
    font-size: 13px;
    line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
    #wrapper .ucc-diag-open { animation: none; }
}

@media screen and (max-width: 750px) {
    #wrapper .ucc-diag { padding-bottom: 8vw; }

    #wrapper .ucc-diag-inner {
        width: 94%;
        margin-top: 6vw;
        padding: 7vw 2.5vw 6vw;
        border-width: .4vw;
        border-radius: 7vw;
        box-shadow: 0 3vw 6vw rgba(71, 88, 106, .10);
    }

    #wrapper .ucc-diag-open,
    #wrapper .ucc-diag-open.ucc-diag-open--final {
        width: 94%;
        gap: 2.4vw;
        padding: 4.4vw 3.4vw;
        box-shadow: 0 2vw 0 #a5a5a5;
    }

    #wrapper .ucc-diag-open::after {
        font-size: 5.6vw;
    }

    #wrapper .ucc-diag-open__main {
        font-size: 5.6vw;
    }

    #wrapper .ucc-diag-note {
        margin-top: 6vw;
        padding: 0 3vw;
        font-size: 3.1vw;
        line-height: 1.8;
    }
}