/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 05 2025 | 05:55:08 */
/* リセットと基本設定 */
* {
    box-sizing: border-box;
    margin: 0; /* 全てのマージンをリセット */
    padding: 0;
}

body {
    font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f9;
    color: #333;
    margin-top: 0; /* bodyの上部マージンを0に */
}

.container {
    max-width: 650px;
    margin: 0 auto;
    padding: 0 20px 20px 20px;
}

/* メインビジュアル */
.hero {
    text-align: center;
    margin-bottom: 20px; /* 下部の余白削除 */
    padding-top: 0; /* 上部の余白削除 */
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 0;
    padding-right: 0;
    margin-top: 0; /* 上部の余白削除 */
}

.main-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-visual img {
    width: 100%; 
    height: auto; /* 高さをautoに変更 (推奨) */
    object-fit: contain; 
    background-color: white; 
    border-radius: 0; 
    margin-bottom: 0; /* 画像の下の余白削除 */
    border: none;
}

/* キャッチコピー画像 */
.hero-heading-image {
    margin-left: 20px; 
    margin-right: 20px;
    width: auto;
    max-width: 90%; 
    height: auto;
    display: block; 
    margin: 0 auto 0 auto; /* 上下左右のマージンを0に */
}

/* アンケートセクション */
.survey-section {
    background-color: white;
    padding: 30px 10px 30px 10px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-top: 0; /* アンケートセクション上部の余白削除 */
}
.survey-section h3 {
    text-align: center;
    color: #07194d; /* カラー変更済み */
    font-size: 1.2em;
    margin-bottom: 10px;
    padding-bottom: 10px;}

/* --- ★ 質問ブロックのレイアウト ★ --- */

.question-block {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 5px;
    
    /* 質問番号と質問文を中央に、選択肢は左に配置するための設定 */
    display: flex;
    flex-direction: column;
    align-items: center; 
}

/* 質問番号 (Q1, Q2, ...) のボックスデザイン */
.question-number {
    font-weight: bold;
    color: #ffffff; /* 文字を白に */
    background-color: #dc143c; /* 赤の背景色 */
    padding: 5px 15px; /* ボックスのパディング */
    border-radius: 5px; /* 角を少し丸める */
    
    font-size: 1.2em;
    margin-bottom: 10px; /* 質問文との間隔 */
    display: inline-block; /* テキストの幅に合わせる */
}

/* 質問文 */
.question-text {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 15px;
    text-align: center; /* 質問文は中央揃えを維持 */
    max-width: 450px;
}

/* 選択肢のラッパー */
.options {
    width: 100%;
    max-width: 500px; /* 選択肢の最大幅 */
    align-self: center; /* question-blockの中心に配置される */
}

/* --- ★ 選択肢のカスタムデザイン ★ --- */

/* 1. inputタグを非表示にする */
.options input[type="radio"],
.options input[type="checkbox"] {
    display: none; 
}

/* 2. inputタグの直後に来るlabelにスタイルを適用 */
.options label {
    position: relative; 
    display: block; 
    background-color: #fff;
    padding: 12px 12px 12px 45px; 
    margin-bottom: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    line-height: 20px; 
    text-align: left; /* 選択肢のテキストは左寄せを維持 */
}

.options label:hover {
    background-color: #e0f2f1;
}

/* 3. カスタムアイコンを作成 (丸型のベース) */
.options label::before {
    content: '';
    display: block; 
    position: absolute;
    left: 15px; 
    top: 50%;
    transform: translateY(-50%); 
    
    width: 20px;
    height: 20px;
    border: 2px solid #07194d; 
    background-color: white;
    border-radius: 50%; 
    
    transition: all 0.2s;
}

/* 4. 選択されたときのスタイル (Q1〜Q4共通) */
.options input:checked + label::before {
    background-color: #07194d; 
    border-color: #07194d; /* カラー変更済み */
    box-shadow: inset 0 0 0 5px white; 
}


/* --- ★ 選択肢の見た目の修正ここまで ★ --- */


/* CTA画像ボタンのラッパー */
.cta-button-wrap {
    text-align: center;
}

/* CTA画像ボタン */
.cta-image-button {
    display: inline-block; 
    width: 90%; 
    max-width: 400px; 
    margin: 30px auto 0; 
    cursor: pointer; 
    height: auto; 
    border: none; 
}

.note {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 0.9em;
    color: #777;
}

/* ★ 追加スタイル: is-importantクラスで文字を赤くする ★ */
.note .is-important {
    color: #dc143c; /* 赤文字に設定 */
    font-weight: bold; /* さらに強調 */
    font-size: 1.0em;
}

/* --- ★ 追加した画像セクションのスタイル ★ --- */

/* コンテナのパディングを相殺し、左右いっぱいに広げるためのクラス */
.full-width-section {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 30px; /* 上部に少し余白を追加 */
    margin-bottom: 30px; /* 下部に少し余白を追加 */
}

/* result-promoセクション内の画像 */
.result-promo .promo-image {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom; /* 画像の下にできるわずかな隙間をなくす */
}

/* フッター */
.footer {
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
    border-top: 1px solid #eee;
    color: #999;
    font-size: 0.8em;
}

.footer-links {
    margin-bottom: 10px; 
    font-size: 0.9em;
}

.footer-links a {
    color: #777; 
    text-decoration: none; 
    padding: 0 5px; 
}

.footer-links a:hover {
    text-decoration: underline;
}

.footer-links span {
    color: #ccc; 
}