/* --- デザインテーマ: 夏祭りフェスティバル --- */
:root {
    --primary-red: #E60012;
    --strong-blue: #00A0E9;
    --accent-yellow: #FDD100;
    --bg-color: #F0F8FF;
    --text-color: #333;
    --white-color: #FFFFFF;
    --font-display: 'M PLUS Rounded 1c', sans-serif;
    --font-body: 'Noto Sans JP', sans-serif;
}

/* --- 全体スタイル --- */
body {
    font-family: var(--font-body);
    margin: 0;
    background-color: var(--strong-blue);
    background-image: 
        radial-gradient(circle at 10% 20%, var(--accent-yellow, 0.5) 1px, transparent 1px),
        radial-gradient(circle at 80% 30%, #FF8C00 1px, transparent 1px),
        radial-gradient(circle at 90% 80%, #ff6347 1px, transparent 1px),
        linear-gradient(to bottom, var(--strong-blue), #87CEEB);
    background-attachment: fixed;
    color: var(--text-color);
    line-height: 1.7;
}

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

/* ★★★ 新しく追加したタイトル ★★★ */
.page-title {
    font-family: var(--font-display);
    font-size: 1.6em;
    font-weight: 800;
    color: var(--white-color);
    text-align: center;
    padding: 10px;
    margin-bottom: 15px;
    line-height: 1.4;
    text-shadow: 
        2px 2px 0 var(--primary-red), 
        -2px -2px 0 var(--primary-red), 
        2px -2px 0 var(--primary-red), 
        -2px 2px 0 var(--primary-red),
        4px 4px 6px rgba(0,0,0,0.4);
}

.header-banner {
    background-image: url('https://storage.googleapis.com/gemini-prod/images/8410041289139268383_1707525389658.jpg'); /* 提供された画像をヘッダーとして使用 */
    background-size: cover;
    background-position: center;
    height: 180px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    border: 3px solid var(--white-color);
}

section {
    display: none; /* 初期状態では全セクションを非表示 */
    background-color: var(--white-color);
    border-radius: 16px;
    padding: 25px 30px;
    margin-bottom: 25px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    border: 2px solid #ddd;
    animation: fadeIn 0.5s ease-out;
    position: relative;
    overflow: hidden;
}
section::before { /* 提灯の飾り */
    content: '🏮';
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 1.8em;
    opacity: 0.8;
}
section::after { /* 提灯の飾り */
    content: '🏮';
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.8em;
    opacity: 0.8;
    transform: scaleX(-1);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

h1, h2 {
    font-family: var(--font-display);
    text-align: center;
    color: var(--primary-red);
    font-weight: 800;
    text-shadow: 
        -2px -2px 0 var(--white-color),  
         2px -2px 0 var(--white-color),
        -2px  2px 0 var(--white-color),
         2px  2px 0 var(--white-color),
        -3px  3px 0 #000,
         3px  3px 0 #000;
    letter-spacing: 2px;
    margin-top: 20px;
}
h1 { font-size: 2.2em; }
h2 { font-size: 1.8em; }
h3 {
    font-family: var(--font-display);
    font-size: 1.3em;
    color: var(--text-color);
    border-bottom: 3px solid var(--primary-red);
    padding-bottom: 5px;
    margin-bottom: 20px;
}
p { margin-bottom: 1.5em; text-align: center; }

/* --- ボタン --- */
.btn {
    display: block;
    width: 100%;
    padding: 16px;
    font-size: 1.2em;
    font-family: var(--font-display);
    font-weight: 700;
    color: #333;
    background: linear-gradient(to bottom, #FFEB3B, var(--accent-yellow));
    border: 2px solid #A67C00;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 5px 0 #A67C00;
    text-shadow: 1px 1px 1px var(--white-color);
}
.btn:hover {
    background: linear-gradient(to bottom, #FFF176, #FDD835);
}
.btn:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #A67C00;
}

/* --- フォーム要素 --- */
.form-group { margin-bottom: 25px; }
.form-group label { display: block; font-weight: 700; margin-bottom: 10px; }
.form-group label.optional::after { content: '任意'; font-size: 0.8em; font-weight: normal; background-color: #eee; color: #666; padding: 3px 8px; border-radius: 4px; margin-left: 10px; }
.form-group select { width: 100%; padding: 14px; border: 2px solid #ccc; border-radius: 8px; font-size: 1em; font-family: var(--font-body); background-color: #fff; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 16px; }
.form-group .checkbox-group label { display: flex; align-items: center; margin-bottom: 10px; background-color: #f9f9f9; padding: 12px; border-radius: 8px; border: 1px solid #ddd; cursor: pointer; transition: background-color 0.3s; }
.form-group .checkbox-group label:hover { background-color: #f0f0f0; }
.form-group input[type="checkbox"] { margin-right: 12px; width: 1.3em; height: 1.3em; accent-color: var(--primary-red); }

/* --- ガラガラ抽選機 --- */
#garagara-container { text-align: center; padding: 20px 0; }
#garagara-machine {
    width: 220px;
    height: 220px;
    background: linear-gradient(45deg, #f8f8f8, #cccccc);
    border-radius: 12px;
    margin: 0 auto;
    position: relative;
    border: 8px solid #a52a2a;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.4);
    transform: rotate(45deg);
}
#garagara-machine.spinning {
    animation: spin-garagara 0.2s linear infinite;
}
@keyframes spin-garagara {
    100% { transform: rotate(405deg); } /* 45deg + 360deg */
}
#garagara-handle {
    width: 80px;
    height: 20px;
    background: #696969;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.2s;
}
#garagara-handle:hover { background: #888; }
#garagara-handle::after { content: ''; width: 30px; height: 30px; background: #696969; border-radius: 50%; position: absolute; right: -15px; top: -5px;}
#garagara-hole { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); width: 40px; height: 30px; background: #555; border-radius: 5px;}
#result-ball { width: 30px; height: 30px; border-radius: 50%; position: absolute; bottom: -70px; left: 50%; transform: translate(-50%, 20px); opacity: 0; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
#result-ball.show { transform: translate(-50%, 0); opacity: 1; }
.ball-gold { background: radial-gradient(circle at 30% 30%, #fff, #ffd700); }
.ball-red { background: radial-gradient(circle at 30% 30%, #fff, #f00); }
.ball-white { background: radial-gradient(circle at 30% 30%, #fff, #ccc); }

/* --- 結果画面 --- */
.result-icon { font-size: 80px; text-align: center; margin-bottom: 10px; }
.prize-name { font-weight: bold; color: var(--primary-red); font-size: 1.3em; }

.final-promo {
    margin-top: 30px;
    padding: 20px;
    border: 3px dashed var(--primary-red);
    border-radius: 10px;
    background-color: #FFF8E1;
}
.final-promo h3 { text-align: center; border: none; }
.final-promo p { font-size: 0.9em; }

/* --- 個人情報入力 --- */
#winner-form input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
#winner-form label a { color: var(--primary-red); }