@charset "utf-8";

/*カスタムモーダルデザイン*/

/* 1. 画面全体を覆う黒背景（座布団） */
.custom-modal {
    display: none; 
    position: fixed !important; 
    z-index: 999999 !important; 
    left: 0;
    top: 0;
    width: 100vw;           /* 画面の横幅いっぱいに固定 */
    height: 100vh;          /* 画面の縦幅いっぱいに固定 */
    background-color: rgba(0,0,0,0.7); 
    
    /* ★ここが重要：中身が画面より長くなったら、この黒背景の中でスクロールさせる */
    overflow-y: auto;       
    -webkit-overflow-scrolling: touch; /* スマホでのスクロールを滑らかにする */
    
    /* ★上下左右の中央に配置するための設定 */
    align-items: center;
    justify-content: center;
}

/* 2. 中の白いボックス */
.modal-content {
    background: #fff;
    padding: clamp(24px, 5vw, 40px) clamp(16px, 4vw, 32px);
    width: 90%;             /* スマホを考慮して少し広めに設定（最大500pxまで広がる） */
    max-width: 500px;
    position: relative;
    border-radius: 8px;
    box-sizing: border-box;
    
    /* ★はみ出しを防ぐ高さの設定 */
    margin: 40px auto;      /* 上下に適度な余白を作って、スクロールしたときに綺麗に見せる */
    height: auto;           /* 要素が少なければ縮み、多ければ伸びる */
    max-height: calc(100vh - 80px); /* ★画面の高さから上下の余白（計80px）を引いたサイズを限界値にする */
    
    /* ★もし白枠の「中だけ」をスクロールさせたい場合は以下を有効に（お好みで） */
    overflow-y: auto;       
}

.close-btn { position: absolute; right: 20px; cursor: pointer; font-size: 24px; }


/* ==========================================================================
   2列キープ＆レスポンシブ対応フレックスコンテナ（綺麗に統合済み）
   ========================================================================== */

/* 3つ以上の要素を綺麗に折り返して2列にするための親コンテナ */
.flex-container {
    display: flex !important;
    flex-wrap: wrap !important;       /* ★3つ目以降の要素を次の段に折り返す設定 */
    justify-content: flex-start !important; /* 左詰めで綺麗に並べる */
    gap: 15px !important;             /* ★縦・横共通で15pxの隙間を空ける（これで上下のmarginも解決） */
    width: 100% !important;
    margin-top: 15px !important;
    box-sizing: border-box !important;
}

/* 各選択肢のボックス（PC〜スマホまで常に2列キープ） */
.choice-box {
    /* ★隙間（gap:15px）を考慮して、常に画面のぴったり半分の幅に固定（1列に落ちない） */
    flex: 0 0 calc(50% - 7.5px) !important; 
    max-width: calc(50% - 7.5px) !important;
    
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    background: #fff !important;
    padding: 12px 10px !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

/* モーダル内の質問タイトル */
.modal-content h3 {
    /* ★右側の×ボタンとの衝突を防ぐ余白（前回の設定） */
    padding-right: 35px; 
    
    /* 💡 ぶら下げインデントの設定（Q1. などの幅に合わせる） */
    padding-left: 2.2em;      /* 全体を文字数分（約2.2文字分）右にずらす */
    text-indent: -2em;     /* 1行目だけマイナスで左に戻す */

    /* その他の見栄え調整（お好みで） */
    font-size: clamp(16px, 4.5vw, 18px);
    line-height: 1.5;        /* 改行されたときに見やすい行間 */
    margin-top: 0;
    margin-bottom: 20px;
}

/* 選択肢全体の文字サイズとレイアウト調整 */
.choice-box label {
    display: block; /* または flex。全体をクリック可能にする */
    cursor: pointer;
    line-height: 1.4;
    text-align: left; /* ★ここがポイント！スマホ時は左寄せにすると格段に読みやすくなります */
    
    /* 💡 スマホ〜PCのレスポンシブ文字サイズ調整 */
    /* スマホ（画面幅が狭い時）は13px相当、広がるにつれて16pxに自動調整 */
    font-size: clamp(11px, 3.5vw, 16px)!important; 
}

/* 💡 ラジオボタンと改行テキストの縦ラインを綺麗に揃える設定 */
.choice-box label input[type="radio"] {
    margin-right: 5px; /* ボタンと文字の隙間 */
    vertical-align: middle;
}

/* 📱 スマホ特有の調整（画面幅480px以下など） */
@media screen and (max-width: 480px) {
    .choice-box label {
        /* ラジオボタンの丸ポチ（約20px分）を左に固定し、2行目以降を綺麗に右へ寄せる */
        padding-left: 22px;
        text-indent: -22px;
        
        /* 1文字ずつの変な改行（禁則事項）を防ぎ、単語の区切りを綺麗にする */
        word-break: normal;
        overflow-wrap: anywhere;
    }
    
    /* 改行用の <br> をスマホの時だけ一時的に無効化（1行〜2行の自然な流れに任せる） */
    .choice-box label br {
        display: none;
    }
}

/* 選択肢のテキスト全体への指定 */
.label-text {
    /*display: inline-block;*/
    vertical-align: middle;
}

/* 1. 単語のブツ切りを防ぐ共通設定 */
.label-text span {
    display: inline-block; 
    word-break: keep-all;  
    overflow-wrap: break-word; 
}

/* 2. 💡 優先度を上げて（ハンドリフト）を確実に強制改行させる */
.label-text span.sub-text {
    display: block !important; /* ★span.sub-text と指定し、!important で確実に上書きします */
    font-size: 0.85em; 
    opacity: 0.75;     
    margin-top: 4px; /* 視認性を上げるため、隙間を少し広めに調整しました */
}

/* 💡 ラベル全体のインデント（ズレ）を完全にリセットして左寄せにする */
.choice-box label {
    text-align: left !important;     /* 全体を左寄せに */
    text-indent: 0 !important;       /* 1行目だけ突き出す設定を完全にリセット */
    padding-left: 0 !important;      /* 余計な左余白があればリセット */
}

/* 💡 2行目の「トラック」もインラインブロックとして綺麗に左に詰める */
.choice-box label span {
    display: inline-block;
    text-indent: 0 !important;       /* span個別のインデントもリセット */
}

/* 💡 3行目の「（ハンドリフト）」の設定（前回の20pxを維持） */
.choice-box label span.sub-text {
    display: block !important;       /* 確実に改行 */
    padding-left: calc(16px + 5px + 2em);   /* ラジオボタンの幅を避けて綺麗に縦並び */
    text-indent: 0 !important;
    font-size: 0.85em;
    opacity: 0.75;
    margin-top: 4px;
}

/* 💡 2番目のspan（トラック）を常に改行させて余白を作る */
.choice-box label span:nth-of-type(2) {
    display: block !important;       /* 常に強制改行 */
    text-indent: 0 !important;
    text-align: left;
}
    
/* ラジオボタンがチェックされた時の見た目 */
.choice-box:has(input[type="radio"]:checked) {
    border-color: #cc3333 !important;
    background-color: #fff8f8 !important;
}

/* ラベル全体をクリッカブルにして中央揃えに */
.choice-box label {
    display: block !important;
    width: 100% !important;
    cursor: pointer !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 0;
    font-weight:bold;
}

/* 正方形の画像枠 */
.img-wrapper {
    width: 100% !important;
    /*aspect-ratio: 1 / 1 !important;    強制的に正方形を維持 */
    overflow: hidden !important;
    border-radius: 4px !important;
    background: #fdfdfd !important;   /* 背景を少し明るく */
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

/* ラジオボタンの位置調整 */
/* ラジオボタン自体のサイズを「16px」に完全固定する */
.choice-box input[type="radio"] {
    width: 16px;
    height: 16px !important;
    margin: 5px 4px 5px 0 !important;
    vertical-align: middle !important;
}

/* ボタンが16px ＋ 右マージンが4px ＝ 計20px の幅になるので、5px足して「25px」で完全固定 */
.choice-box label span:nth-of-type(2),
.choice-box label span.sub-text {
    display: block !important;
    padding-left: calc(16px + 5px + 1.5em); /* PCでもスマホでも、1pxもズレずに縦が揃います */
    text-indent: 0 !important;
    text-align: left !important;
}

@media screen and (max-width: 600px) {
    .choice-box input[type="radio"] {
    width: 12px;
    height: 12px;
}
    
    .choice-box label span:nth-of-type(2), .choice-box label span.sub-text {
    display: block !important;
    padding-left: calc(12px + 5px + 2em);
    text-indent: 0 !important;
    text-align: left !important;
}
}

/* ★文字サイズレスポンシブ対応の名称テキスト */
.choice-name {
    display: inline-block !important;
    color: #333333 !important;
    font-weight: bold !important;
    vertical-align: middle !important;
    line-height: 1.3 !important;
    word-break: break-all !important;  /* 長い文字でもボックス内で自動折り返し */
    margin-left: 5px !important;
    
    /* 画面幅に合わせて文字サイズを自動で変化させる設定 */
    font-size: clamp(12px, 3.2vw, 15px) !important; 
    /* 最小12px 〜 スマホ時は画面幅の3.2%分 〜 最大15px で滑らかに縮小します */
}

/* 【装飾】マウスを乗せたときの変化 */
.choice-box:hover {
    background-color: #f4f9fc !important;
    border-color: #0073aa !important;
}

a#product-page-link img {
    height: 250px!important;
    width: auto;
}

/* 赤い四角の角丸ボタンのデザイン */
#contact-link.button,
a#product-page-link.button,
.show-result-btn {
    /* ★中央揃えにするための記述 */
    display: block;       /* inline-block から block に変更 */
    margin: 30px auto 0;  /* 左右を auto にすることで中央に配置されます（上側に30pxの余白） */
    
    background-color: #cc3333; 
    color: #ffffff !important;   
    font-weight: bold;          
    padding: 12px 30px;         
    border-radius: 8px;         
    text-decoration: none;      
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    transition: all 0.3s ease;  
    text-align: center;
    border: none;
    cursor: pointer;
    
    /* ★サイズ調整 */
    width: fit-content;   /* 文字の長さに合わせてボタン幅をフィットさせます */
    min-width: 240px;     /* 最低限の横幅を少し広げて押しやすくします */
}

/* マウスを乗せたときの動き（ホバー効果も維持） */
#contact-link.button:hover,
a#product-page-link.button:hover,
.show-result-btn:hover {
    background-color: #b32d2d;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* ★ラジオボタン選択前のグレーアウト状態（disabled） */
.show-result-btn.disabled,
.show-result-btn:disabled {
    background-color: #cccccc !important; /* グレーに変更 */
    color: #888888 !important;             /* 文字色を薄いグレーに */
    cursor: not-allowed !important;        /* マウスを乗せたときに禁止マークにする */
    transform: none !important;            /* 浮き上がる動きなどを無効化 */
    box-shadow: none !important;           /* 影を消す */
}


div#product-image-area {
    width: 300px;
    height: auto;
    margin: auto!important;
}

/* ==========================================================================
   右下追従ポップアップ（#floating-result-box）のスタイル
   ========================================================================== */
#floating-result-box {
    display: none; 
    position: fixed; 
    bottom: 80px; 
    right: 20px; 
    z-index: 99999; 
    background: #ffffff; 
    padding: 15px; 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
    max-width: 280px; 
    border: 1px solid #eeeeee;
    box-sizing: border-box; /* 枠線を含めたサイズ計算にするお守り */
}

/* ポップアップを閉じる「×」ボタン */
#close-floating {
    position: absolute; 
    top: 5px; 
    right: 8px; 
    background: none; 
    border: none; 
    font-size: 16px; 
    cursor: pointer; 
    color: #aaaaaa;
    line-height: 1;
    padding: 5px;
}

#close-floating:hover {
    color: #333333; /* マウスを乗せたときに少し濃くする */
}

/* 「前回の診断結果」の小見出しテキスト */
#floating-result-box p {
    margin: 0 0 8px 0; 
    font-size: 12px; 
    color: #666666; 
    font-weight: bold;
}

/* 製品名を表示する部分 */
#floating-product-name {
    font-weight: bold; 
    font-size: 14px; 
    margin-bottom: 12px; 
    color: #333333;
    line-height: 1.4;
}

/* ポップアップ内の問い合わせボタン（赤色） */
#floating-contact-btn {
    display: block; 
    background: #cc3333; 
    color: #ffffff !important; /* テーマのAタグの色に負けないように強制 */
    text-align: center; 
    padding: 10px; 
    border-radius: 4px; 
    text-decoration: none; 
    font-size: 13px; 
    font-weight: bold;
    transition: background-color 0.2s ease;
}

#floating-contact-btn:hover {
    background: #b32d2d; /* マウスを乗せたときは少し暗い赤に */
    text-decoration: none;
}


/* 診断開始ボタン（青色の角丸デザイン） */
#open-diagnostic {
    /* ★中央寄せと上下の余白（上下に30px、左右は自動で真ん中） */
    display: block;             /* inline-block から block に変更 */
    margin: 5px auto 30px;          /* 上下に30pxの余白を空けて中央揃え */
    
    background-color: #1976d2;  /* 赤に映える綺麗なコバルトブルー */
    color: #ffffff !important;   /* 文字色は白に固定 */
    font-size: 16px;            /* 押しやすい文字サイズ */
    font-weight: bold;          /* 文字を太字に */
    padding: 14px 36px;         /* ボタンの内側の余白（上下、左右） */
    border: none;               /* 枠線を消す */
    border-radius: 8px;         /* 角丸（8px） */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽めの立体感（影） */
    cursor: pointer;
    transition: all 0.3s ease;  /* マウスを乗せたときの動きを滑らかに */
    text-align: center;
    text-decoration: none;
    
    /* ★ボタンが横いっぱいに広がらないための設定 */
    width: fit-content;         /* 文字の長さに合わせてボタンの横幅をフィットさせる */
    min-width: 240px;           /* スマホでも押しやすい最低限の横幅 */
}

/* マウスを乗せたとき（ホバー時）の動き */
#open-diagnostic:hover {
    background-color: #1565c0;  /* 少し深みのある上品な青に変わる */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 影を少し強く */
    transform: translateY(-2px); /* ボタンが2px上に少し浮く */
}


/* ==========================================================================
   診断モーダル内 戻る・リセットボタンのデザイン
   ========================================================================== */

/* ボタンを囲むコンテナ */
.modal-navigation-btns {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 25px; /* 選択肢ボックスとの間隔 */
    padding-top: 15px;
    border-top: 1px dashed #eee; /* 上部にうっすら区切り線 */
    width: 100%;
}

/* 両ボタン共通のベーススタイル */
.prev-step-btn,
.reset-diagnostic-btn {
    flex: 1; /* 均等な幅で並べる */
    font-size: 12px;
    font-weight: bold;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    box-sizing: border-box;
}

/* 「1つ前に戻る」ボタン（落ち着いたグレー） */
.prev-step-btn {
    background-color: #f5f5f5;
    color: #666666;
    border: 1px solid #dddddd;
}
.prev-step-btn:hover {
    background-color: #e8e8e8;
    color: #333333;
}

/* 「最初からやり直す」ボタン（すこし引いた白背景×赤文字） */
.reset-diagnostic-btn {
    background-color: #ffffff;
    color: #cc3333;
    border: 1px solid #cc3333;
}
.reset-diagnostic-btn:hover {
    background-color: #fff5f5;
    /* サイトメインの赤に合わせたホバー感 */
}


.diagnostic-btn-container {
    text-align: center;
    /*margin: 45px 0 20px;*/
    position: relative;
}

/* 吹き出しのデザイン */
.diagnostic-lead-text {
    position: relative;
    display: inline-block;
    background: #ffec3d; /* 吹き出しの背景色（例：目立つ黄色） */
    color: #222;         /* 文字色 */
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 50px; /* 丸みのある可愛い形 */
    margin-bottom: 20px; /* 三角の矢印があるため少し広めに */
    font-size: clamp(15px, 3.5vw, 20px); /* レスポンシブサイズ */
    
    /* フワフワ浮かぶアニメーション（3秒周期） */
    animation: bounceFloating 3s infinite ease-in-out;
}

/* 吹き出しのしたの三角矢印（下向きの突起） */
.diagnostic-lead-text::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 10px 10px 0;
    border-color: #ffec3d transparent transparent; /* 背景色と合わせる */
}

/* フワフワ動くアニメーションの定義 */
@keyframes bounceFloating {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}