:root {
            --tigers-yellow: #ffdd00;
            --tigers-black: #000000;
            --bg-color: #f8f8f8;
            --card-bg: #ffffff;
        }

        body {
            font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
            background-color: var(--bg-color);
            color: var(--tigers-black);
            margin: 0;
            line-height: 1.6;
        }

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

        h1 {
            margin: 0;
            font-size: 1.8rem;
            letter-spacing: 0.1em;
        }

        .intro {
            text-align: center;
            margin-bottom: 10px;
        }

        #message-display {
            position: fixed;   /* 画面に固定 */
            top: 50%;          /* 画面の中央（または下部） */
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10001;    /* オーバーレイより上に */
            background: rgba(0, 0, 0, 0.85);
            color: #fff100;    /* タイガースイエロー */
            padding: 15px 30px;
            border-radius: 30px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            display: none;     /* JSで表示 */
            pointer-events: none; /* クリックの邪魔をしない */
        }
        .stamp-hint {
            text-align: center;
            font-size: 13px;
            color: #555;
            margin: 0 0 8px;
        }
        .stamp-card {
            background-color: var(--card-bg);
            border: 3px solid #000000;
            border-radius: 8px;
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(10, 1fr); 
            gap: 8px;
            list-style: none;
            margin-bottom: 30px;
            overflow: hidden;
            position: relative; 
            z-index: 0;
        }
        
        .stamp-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .stamp-slot:nth-child(10n) {
            border: 2px solid var(--tigers-yellow);
            background-color: #fff9c4;
        }

        .stamp-slot {
            aspect-ratio: 1 / 1;
            border: 1px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            font-size: 0.9rem;
            background-color: #fff;
        }

        .stamp-slot:hover {
            border-color: var(--tigers-yellow);
            background-color: #fffdeb;
        }

        .count-number {
            font-size: 0.75rem;
            color: #999;
            font-weight: bold;
        }

        .stamp-slot.is-stamped::after {
            content: "";
            position: absolute;
            width: 85%;
            height: 85%;
            background-image: var(--stamp-image, url('https://i.daily.jp/Koukoku/Images/daily_logo_200x200.png'));
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
        .is-stamped{
            background-color: unset;
        }

        /* 未到達（まだ試合が始まっていない・勝っていない）スロット */
        .stamp-slot.is-locked {
            background-color: #f0f0f0; /* 薄いグレー */
            border: 1px dashed #ccc;   /* 点線枠 */
            cursor: default;           /* カーソルをポインタにしない */
            opacity: 0.6;
        }

        .stamp-slot.is-locked .count-number {
            color: #aaa; /* 数字も薄く */
        }
        /* 応募ボタン無効時 */
        .apply-btn {
            width: 100%;
            max-width: 500px;
            padding: 15px;
            background: #ccc;
            color: #888;
            border: 2px solid #999;
            border-radius: 50px;
            font-weight: bold;
            cursor: not-allowed;
            margin: 20px auto;
            display: block;
            font-size: 20px
        }

        /* 応募ボタン達成時（JSで active クラスを付与） */
        .apply-btn.active {
            background: var(--tigers-yellow);
            color: #000;
            border: 3px solid #000;
            cursor: pointer;
            box-shadow: 0 0 20px rgba(255, 221, 0, 0.6);
            animation: pulse 2s infinite;
        }
        p.apply-note {
            text-align: center;
        }
        
        #apply-feedback{
            color: #e60012; 
            font-weight: bold; 
            margin-bottom: 10px; 
            min-height: 1.5em;
            text-align: center;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.03); }
            100% { transform: scale(1); }
        }

        footer {
            text-align: center;
            margin-top: 50px;
            padding: 20px;
            font-size: 0.8rem;
            color: #666;
        }

        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }
        .campaign-info {
            margin-top: 40px;
            padding: 25px;
            background-color: #fffdeb;
            border: 2px solid #ffdd00;
            border-radius: 12px;
        }

        .campaign-info h3 {
            margin-top: 0;
            color: #000;
            border-left: 5px solid #000;
            padding-left: 15px;
            font-size: 1.25rem;
        }
        .campaign-content {
            font-size: 16px;
        }
        .campaign-content p {
            margin: 10px 0px 0 10px;
            margin-bottom: 1.2em; /* 段落ごとの間隔を一定にする */
            line-height: 1.8;      /* 行間を広げて読みやすく */
        }

        .prize-box {
            background: #fff;
            padding: 15px;
            border: 1px solid #ddd;
            margin: 15px 0;
            border-radius: 8px;
        }
        .prize-box h4 {
            margin-top: 0;
            color: #d32f2f;
            font-size: 1rem;
        }
        .prize-box ul {
            margin-bottom: 0;
            padding-left: 20px;
        }
        .note {
            font-size: 0.85rem;
            color: #666;
        }
        .banner-sample {
            text-align: center;
            margin: 20px 0;
        }

        .banner-sample img {
            height: auto;
            width: 20%;
            border: 1px solid #ddd;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            border-radius: 10px;
        }
        .sample-label {
            font-size: 0.8rem;
            color: #e60012;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .auth-area {
            background: #f0f0f0;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            margin-bottom: 20px;
        }
        #auth-status{
           margin: 15px 0;
        }
        .small { font-size: 0.75rem; color: #666; }
        .btn-google {
            background: #fff;
            border: 1px solid #ccc;
            padding: 10px 20px;
            font-weight: bold;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        .tigers-extreme-header {
            display: block;
            background: linear-gradient(135deg, #fff100 0%, #000000 50%);
            border-top: 5px solid #000000;
            border-bottom: 5px solid #000000;
            text-align: center;
            font-family: 'Arial Black', sans-serif;
        }

        .tigers-extreme-header::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
        }

        .header-inner {
            position: relative;
            z-index: 1;
        }

        .sub-text {
            display: block;
            margin-bottom: 10px;
            width: 280px;
        }
        .sub-text img{
            width:100%;
        }
        .header-inner::after {
            content: "阪神タイガース承認企画";
            position: absolute;
            top: 120px;
            right: -50px;
            background-color: #ffcc00;
            color: #000;
            font-size: 18px;
            font-weight: bold;
            padding: 5px 50px;
            background-image: linear-gradient(to right, #b38f00 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, #b38f00 50%, rgba(255, 255, 255, 0) 0%);
            background-position: 0 4px, 0 calc(100% - 4px);
            background-repeat: repeat-x;
            background-size: 10px 2px;
            clip-path: polygon(7% 50%, 2% 0%, 98% 0%, 93% 50%, 98% 100%, 2% 100%);
            transform: rotate(24deg);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            z-index: 10;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        h1 {
            margin: 0;
            line-height: 1.1;
            transform: skewX(-10deg);
        }

        .main-title {
            display: block;
            font-size: 2.5rem;
            color: #ffdd00;
            text-shadow: 
                3px 3px 0 #000,
                -1px -1px 0 #000,  
                1px -1px 0 #000,
                -1px 1px 0 #000,
                1px 1px 0 #000,
                0px 0px 20px rgba(255, 221, 0, 0.8);
        }

        .sub-title {
            display: block;
            font-size: 2.0rem;
            color: #ff4500;
            background: linear-gradient(to right, #ff4500, #ff8c00, #fff100);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1))
        }
        .credit {
            display: block;
            text-align: right;
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.7);
            margin-top: 4px;
            letter-spacing: 0.05em;
        }
        .btn-logout {
            background: #000;
            color: #fff;
            border: 2px solid #ffdd00;
            padding: 10px 20px;
            font-weight: bold;
            cursor: pointer;
            border-radius: 4px;
        }
        .btn-logout:hover {
            background: #333;
        }
        .purpose{
            text-align: left;
            margin: 20px;
        }
        h2{
            margin: 15px;
        }
        .login-info{
            margin: 10px;
        }
        .alert{
            background-color: #d32f2f;
            color:#fff;
            font-weight: bold;
        }
        .important-box {
            margin-top: 20px;
            padding: 15px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            text-align: left;
            font-size: 0.8rem;
            color: #444;
        }
        .important-box h3 {
            font-size: 0.9rem;
            margin-bottom: 10px;
            border-bottom: 1px dashed #ccc;
            padding-bottom: 5px;
        }
        .important-box ul {
            margin: 0;
            padding-left: 20px;
        }
        .sponsor-wrapper {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: 8px;
            margin-top: 20px;
            position: relative;
            z-index: 2;
        }

        .presented-by {
            color: #037acc;
            font-size: 1.5rem;
            line-height: 1.2;
            padding-bottom: 2px;
            font-style: italic;
            margin-right: 30px;
        }

        .sponsor-logo {
            width: 250px;
            display: block;
            filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
        }
        .catchphrase{
            font-family: "Arial Black", "Helvetica Bold", sans-serif;
            font-size: 55px;
            font-weight: 600;
            background: linear-gradient(to bottom, #ff4500, #ff8c00, #ffff00);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            -webkit-text-stroke: 1px #000;
            text-shadow: 2px 2px 0px #000, 4px 4px 0px rgba(0,0,0,0.5);
            font-style: italic;
            letter-spacing: -2px;
        }

        /* 既存のlistItemへの干渉を防ぐための微調整 */
        .listItem {
            transition: background-color 0.3s;
        }
        .user-status-card {
            background: #fff;
            border: 2px solid #000;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }
        .progress-section {
            margin: 10px 0;
        }
        .progress-labels {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
            font-size: 0.95rem;
        }
        .progress-bar-container {
            background: #eee;
            height: 16px;
            border-radius: 6px;
            overflow: hidden;
        }
        .progress-bar-fill {
            height: 16px;   /* 少し太く */
            transition: width 1s ease-out, background 0.5s ease;
            border: solid #000 2px;
            border-radius: 6px;
        }

        .progress-bar-fill.is-rainbow {
            background: linear-gradient(
                90deg,
                #e60012, #ff6600, #fff100, #66cc00, #00aaff, #0033cc, #9900cc
            );
            background-size: 200% 100%;
            animation: rainbow-shift 2s linear infinite;
        }

        @keyframes rainbow-shift {
            0%   { background-position: 0% 0%; }
            100% { background-position: 200% 0%; }
        }

        .status-footer {
            font-size: 0.75rem;
            color: #666;
            margin: 0;
        }
        #login-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            filter: grayscale(1); /* 虎の黄色をあえて消して「準備中」を演出 */
        }
        #terms-checkbox{
            -webkit-appearance: checkbox;
        }
        .agreeBox{
            align-items: center;
            margin-top: 10px;
            width: 280px;
            margin: 10px auto;
            padding: 10px 0;
            background-color: #fff9c4;
            border: 1px solid #ffdd00;
        }
        /* 利用規約全体のラッパー */
        .terms-scroll-wrapper {
            border: 2px solid #333;
            border-radius: 8px;
            background: #fff;
            margin: 15px 0;
            overflow: hidden;
            max-width: 100%; /* 親要素を突き抜けないように */
        }

        /* 規約のタイトル（阪神カラーのアクセント） */
        .terms-title {
            background: #ffec00; /* タイガースイエロー */
            color: #000;
            margin: 0;
            padding: 10px;
            font-size: 1rem;
            border-bottom: 2px solid #333;
            font-weight: bold;
            text-align: center;
        }

        /* スクロールボックス本体 */
        .terms-scroll-box {
            height: 250px; /* 150pxだと少し狭いので、読みやすさ重視で250pxに拡張（任意で調整） */
            overflow-y: scroll;
            padding: 20px;
            font-size: 0.85rem;
            line-height: 1.7;
            color: #444;
            text-align: left;
            background: #fdfdfd;
            -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかに */
        }

        /* 条項の見出し */
        .terms-scroll-box h2 {
            font-size: 0.95rem;
            font-weight: 900;
            margin: 20px 0 10px 0;
            padding-bottom: 5px;
            border-bottom: 1px solid #ccc;
            color: #000;
        }

        .terms-scroll-box section:first-child h2 {
            margin-top: 0;
        }

        /* 本文テキスト */
        .terms-scroll-box p {
            margin-bottom: 1em;
            text-align: justify;
        }

        /* リストスタイル（自動数字付与） */
        /* パターンA：通番（1. 2. 3. ...）用 */
        .terms-scroll-wrapper ol.terms-list-number {
            margin: 0 0 1.5em 1.5em; 
            padding: 0;
            list-style-type: decimal;
            list-style: decimal;
        }

        .terms-scroll-wrapper ol.terms-list-number li {
            display: list-item;
            margin-bottom: 0.8em;
            padding-left: 0.3em;
            list-style: unset;
        }

        /* パターンB：中黒（・）用 */
        .terms-scroll-wrapper ul.terms-list-dot {
            margin: 0 0 1.5em 1.5em; 
            padding: 0;
            list-style-type: disc;
            list-style: unset;
        }

        .terms-scroll-wrapper ul.terms-list-dot li {
            display: list-item;
            margin-bottom: 0.5em;
            padding-left: 0.3em;
            list-style: unset;
        }

        /* フッター（以上・制定日） */
        .terms-footer {
            text-align: right;
            margin-top: 30px;
            padding-top: 10px;
            border-top: 1px dashed #ccc;
            font-size: 0.8rem;
            color: #666;
        }
        /* フッター内のpタグも右に寄せる */
        .terms-footer p {
            text-align: right;
            margin: 2px 0;
        }

        #recommend-overlay {
            /* 1. 配置：画面最前面に固定・1000px・中央寄せ */
            position: fixed;
            bottom: -100%;
            left: 50%;
            transform: translateX(-50%);
            width: 1000px;
            max-height: 400px;
            z-index: 10000;

            /* 2. 見た目 */
            background: #ffffff;
            box-shadow: 0 -15px 40px rgba(0,0,0,0.6);
            padding: 20px 40px;
            border-radius: 20px 20px 0 0;
            border-top: 8px solid #fff100;
            border-left: 2px solid #000;
            border-right: 2px solid #000;
            box-sizing: border-box;
            overflow-y: hidden;

            /* 3. 【重要】アニメーション（これを外してはいけなかった） */
            transition: bottom 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        /* 表示された時のクラス */
        #recommend-overlay.is-visible {
            bottom: 0;
        }

        /* レコメンド記事のリスト用デザイン（お好みで） */
        .rec-list-container {
            display: flex;
            gap: 20px;
            justify-content: center;
        }
        .rec-item {
            flex: 1;
            display: flex;
            background: #fdfdfd;
            border: 2px solid #eee;
            border-radius: 12px;
            text-decoration: none;
            overflow: hidden;
            transition: transform 0.2s ease;
        }
        .rec-item:hover {
            transform: translateY(-3px);
            border-color: #fff100;
        }

        .rec-item img {
            width: 80px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
            margin-right: 5px;
        }

        .rec-title {
            font-weight: bold;
            font-size: 14px;
            margin: 0;
        }
        .rec-title-main {
            text-align: center;
            font-size: 24px;
            font-weight: 900;
            margin: 10px 0 20px 0;
            color: #000;

        }
        .rec-title-main span {
            background: linear-gradient(transparent 60%, #fff100 60%);
            padding: 0 10px;
        }
        .rec-count {
            font-size: 12px;
            color: #e60012; /* 激熱レッド */
        }

        .close-btn {
            position: absolute;
            top: 15px;
            right: 20px;
            width: 35px;
            height: 35px;
            background: #000;
            color: #fff100;
            border: none;
            border-radius: 50%;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }
        .close-btn:hover {
            background: #fff100;
            color: #000;
            transform: rotate(90deg); /* ホバーで回ると少し「脳汁」感が出ます */
        }
        /* --------------------------------------------------
        3本の時（子要素が3つの時）だけスタイルを上書き
        -------------------------------------------------- */

        /* 「3枚ある時の、それぞれの記事カード」を特定 */
        .rec-item:nth-last-child(3):first-child,
        .rec-item:nth-last-child(3):first-child ~ .rec-item {
            flex: 1;
            min-width: 0; /* 幅が狭まっても崩れないように */
            gap: 5px;    /* カード内の余白を詰める */
        }

        /* 3枚ある時の「画像」を小さくする */
        .rec-item:nth-last-child(3):first-child img,
        .rec-item:nth-last-child(3):first-child ~ .rec-item img {
            width: 100px !important; /* 120pxから100pxへ */
        }

        /* 3枚ある時の「タイトル文字」を小さくし、3行で切る */
        .rec-item:nth-last-child(3):first-child p,
        .rec-item:nth-last-child(3):first-child ~ .rec-item p {
            font-size: 13px !important;
            line-height: 1.3 !important;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3; /* 3行超えたら「...」 */
            overflow: hidden;
        }
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        #survey-form select {
            background: #fff;
        }
        #survey-form button:hover {
            background: #fbc02d;
            transform: translateY(-2px);
        }
        .x-share-button{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .faq-section {
            margin-top: 40px;
            padding: 25px;
            background-color: #fff;
            border: 2px solid #000;
            border-radius: 12px;
        }

        .faq-section h3 {
            margin-top: 0;
            color: #000;
            border-left: 5px solid #ffdd00;
            padding-left: 15px;
            font-size: 1.25rem;
        }

        .faq-category {
            margin: 20px 0 8px 0;
            font-size: 0.9rem;
            color: #fff;
            background: #000;
            display: inline-block;
            padding: 3px 12px;
            border-radius: 4px;
        }

        .faq-item {
            border-bottom: 1px solid #eee;
        }

        .faq-item:last-of-type {
            border-bottom: none;
        }

        .faq-item summary {
            padding: 12px 35px 12px 10px;
            font-weight: bold;
            font-size: 0.95rem;
            cursor: pointer;
            position: relative;
            list-style: none;
            color: #000;
        }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-item summary::after {
            content: "＋";
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #ffdd00;
            font-size: 1.2rem;
            font-weight: bold;
            background: #000;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .faq-item[open] summary::after {
            content: "－";
        }

        .faq-item summary:hover {
            background-color: #fffdeb;
        }

        .faq-item p {
            margin: 0;
            padding: 10px 10px 15px 10px;
            font-size: 0.9rem;
            color: #444;
            line-height: 1.7;
        }