/* --- 変数定義 --- */
:root {
    /* カラー変更 */
    --primary: #12AFC6;      /* 指定色：ティール */
    --primary-hover: #0d8a9e; /* ホバー時は少し暗く */
    
    --text-main: #373E42;    /* 指定色：ダークグレー */
    --bg-color: #f5f5f5;
    --card-bg: #ffffff;
    --gray-border: #e0e0e0;
}

body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    padding: 20px!important;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* --- ロジック部分（CSS Hack） --- */
input[name="flow"] { display: none; }

.content-box {
    display: none;
    opacity: 0;
    animation: fadeIn 0.4s ease forwards;
}

/* 表示切り替えロジック */
#state-start:checked ~ #diagnosis-card .step-q1 { display: block; }
#state-q2a:checked ~ #diagnosis-card .step-q2a { display: block; }
#state-q2b:checked ~ #diagnosis-card .step-q2b { display: block; }
#state-q3a:checked ~ #diagnosis-card .step-q3a { display: block; }

#state-res-light:checked ~ #diagnosis-card .res-light { display: block; }
#state-res-regular:checked ~ #diagnosis-card .res-regular { display: block; }
#state-res-business:checked ~ #diagnosis-card .res-business { display: block; }
#state-res-pro:checked ~ #diagnosis-card .res-pro { display: block; }


/* --- デザイン部分（大幅調整） --- */

#diagnosis-card {
    background: var(--card-bg);
    width: 100%;
    
    /* 横幅設定：750pxまで広げる */
    max-width: 750px;
    
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    text-align: center;
    position: relative;
    box-sizing: border-box;
    margin: 0 auto; /* 中央寄せ */
}

/* ヘッダー */
.header-area {
    margin-bottom: 30px;
    border-bottom: 3px solid #f0f0f0;
    padding-bottom: 30px;
}
.site-title {
    /* h1 指定サイズ */
    font-size: 2.8rem;
    color: var(--primary);
    margin: 0 0 10px 0;
    font-weight: 800;
    line-height: 1.2;
}
.step-indicator {
    /* step-indicator 指定サイズ */
    font-size: 1.4rem;
    color: #999;
    letter-spacing: 3px;
    font-weight: bold;
}

/* 質問タイトル */
h2.question-title {
    /* h2 指定サイズ */
    font-size: 2.0rem;
    margin-bottom: 30px;
    line-height: 1.4;
    color: var(--text-main);
    font-weight: bold;
}

/* 選択肢ボタンエリア */
.options {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
    max-width: 600px; /* ボタンが間延びしすぎないよう微調整 */
    margin: 0 auto;
}

/* ボタン（Label）のデザイン */
.option-btn {
    display: block;
    background: #fff;
    border: 3px solid var(--gray-border); /* 枠線を少し太く */
    padding: 25px 35px;
    border-radius: 80px;
    
    /* label 指定サイズ */
    font-size: 1.6rem;
    
    font-weight: bold;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    text-align: center;
    line-height: 1.4;
}

/* 矢印アイコン */
/*.option-btn::after {
    content: '>';
    position: absolute;
    right: 30px;
    color: #ccc;
    font-weight: normal;
    font-size: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
}*/

.option-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background-color: #f0fbff; /* 薄いティール */
    box-shadow: 0 8px 20px rgba(18, 175, 198, 0.15);
    transform: translateY(-3px);
}
.option-btn:hover::after {
    color: var(--primary);
}

/* 結果画面のデザイン */
.res-sub {
    /* res-sub 指定サイズ */
    font-size: 1.6rem;
    color: #888;
    margin-bottom: 10px;
}

.plan-name {
    /* plan-name 指定サイズ */
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--primary);
    margin-bottom: 20px;
    line-height: 1.2;
}

.plan-desc {
    background: #fff;
    border: 3px solid #f0f0f0;
    padding: 24px;
    border-radius: 20px;
    text-align: left;
    margin: 0 auto 20px auto;
    max-width: 650px;
}

.plan-desc ul {
    margin: 0;
    padding-left: 0; /* 左パディングをリセットして独自調整 */
    list-style: none;
}
.plan-desc li {
    /* li 指定サイズ */
    font-size: 1.6rem;
    
    margin-bottom: 10px;
    position: relative;
    line-height: 1.6;
    padding-left: 24px; /* チェックマーク分のスペース */
    color: var(--text-main);
}
.plan-desc li::before {
    content: "✔";
    color: var(--primary);
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    font-size: 1.8rem;
}

/* 追加：CTAボタン上のメッセージ 
*/
.cta-msg {
    font-size: 1.6rem; /* 読みやすく少し大きめに */
    font-weight: bold;
    color: var(--text-main);
    margin: 0 0 10px 0; /* ボタンとの距離 */
}

/* CTAボタン */
.cta-btn {
    display: inline-block;
    /*background-color: var(--primary);*/
        background: linear-gradient(180deg, #ff9d00 0, #ff6f00 100%);
    color: white;
    text-decoration: none;
    padding: 25px 80px; /* パディングを増やして大きく */
    border-radius: 60px;
    font-weight: bold;
    
    /* cta-btn 指定サイズ */
    font-size: 1.8rem;
    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, .25);
    transition: all 0.3s;
}
.cta-btn:hover {
    background-color: var(--primary-hover);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

/* 最初に戻るリンク */
.restart-link {
    display: block;
    margin-top: 40px;
    color: #aaa;
    font-size: 1.2rem;
    text-decoration: underline;
    cursor: pointer;
}
.restart-link:hover {
    color: var(--primary);
}

/* アニメーション */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* スマホ対応（画面幅が750px以下になった場合） */
@media (max-width: 768px) {
    #diagnosis-card {
        padding: 40px 20px;
        border-radius: 16px;
    }
    
    /* スマホでは少し文字サイズを落とす（はみ出し防止） */
    .site-title { font-size: 2.0rem; }
    .plan-name { font-size: 2.2rem; }
    .option-btn { font-size: 1.2rem; padding: 20px; }
    h2.question-title { font-size: 1.5rem; }
}

#section-1 {
    display:none;
}

#section-2 label + label {
    margin-left: 0em!important;
}

/* --- プラン詳細リンク（別タブアイコン付き・グレー・中央寄せ） --- */
.plan-detail-link {
    display: flex;           /* 横並び＋配置制御 */
    justify-content: center; /* 中央揃え */
    align-items: center;     /* 垂直方向中央 */
    width: 100%;             /* 横幅いっぱいに広げて中央配置を有効にする */
    margin-top: 20px;        /* 上のリストとの余白 */
    
    font-size: 1.4rem;
    color: #888;             /* 文字色：グレー */
    font-weight: bold;
    text-decoration: underline;
    transition: opacity 0.3s;
}

.plan-detail-link:hover {
    opacity: 0.7;
    text-decoration: none;
}

/* 疑似要素でアイコンを表示 */
.plan-detail-link::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.3em;
    
    /* SVGアイコン（色はグレー #888888 に変更済み） */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
    
    background-size: contain;
    background-repeat: no-repeat;
}