@charset "utf-8";

/* ==========================================
   eE4reslot.css : 予約・システム上書き・抽選販売
   ========================================== */

/* --- 1. システム自動表示エリアの見出し上書き --- 
   URL先の「承り中のゲームソフト」等の自動生成タイトルに適用 */
h2.block-top-event--header.josefin {
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #333 !important;
    padding: 8px 0 12px 48px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%230066cc"><path d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-10 7H8v3H6v-3H3v-2h3V8h2v3h3v2zm4.5 2c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4-3c-.83 0-1.5-.67-1.5-1.5S18.67 9 19.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 36px 36px !important;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif !important;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #333 !important;
    line-height: 1.4 !important;
    display: block !important;
}

/* システム側の擬似要素（既存アイコン等）を非表示化 */
h2.block-top-event--header.josefin::before {
    display: none !important;
}

/* --- 2. 共通見出し（手動設置用） --- */
.custom-cosme-title, 
.lottery-section-head {
    margin-top: 40px;
    margin-bottom: 20px;
    border-bottom: 2px solid #333;
    padding: 8px 0 12px 48px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 36px 36px;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
}

/* コスメアイコン（ピンク） */
.custom-cosme-title {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23d81b60"><path d="M7 14c-1.1 0-2 .9-2 2v5h4v-5c0-1.1-.9-2-2-2zm12-7h-3V3c0-1.1-.9-2-2-2s-2 .9-2 2v4h-3c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm-1-11h-2v-2h2v2zm0-4h-2v-2h2v2z"/></svg>');
}

/* 抽選アイコン（オレンジ） */
.lottery-section-head {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e44d26"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-10 16H4v-2h16v2H4zm0-5H4V8h5.08L7 10.83 8.62 12 12 7.4l3.38 4.6L17 10.83 14.92 8H20v6z"/></svg>');
}

/* --- 3. 抽選販売なしメッセージ --- */
.no-lottery-message {
    padding: 60px 20px;
    text-align: center;
    background-color: #f9f9f9;
    border: 1px dashed #ccc;
    border-radius: 4px;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #666;
    margin-bottom: 40px;
}

/* タイトルとメッセージが連続する場合の微調整 */
.custom-cosme-title + .no-lottery-message,
.lottery-section-head + .no-lottery-message,
h2.block-top-event--header.josefin + .no-lottery-message {
    margin-top: -10px; /* 見出し下の余白を詰めて一体感を出す */
}

/* --- 4. バナーグリッド共通 --- */
.lottery-banner-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: -8px;
}

.lottery-banner-item {
    box-sizing: border-box;
    padding: 8px;
    width: 25%;
}

.lottery-banner-item img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.lottery-banner-item a:hover img {
    transform: translateY(-4px); /* ホバー時に少し浮く演出 */
}

/* --- 5. スマホ用レスポンシブ設定 --- */
@media screen and (max-width: 768px) {
    h2.block-top-event--header.josefin,
    .custom-cosme-title,
    .lottery-section-head {
        font-size: 24px !important;
        padding-left: 42px !important;
        background-size: 32px 32px !important;
        margin-top: 30px;
    }
    
    .no-lottery-message {
        font-size: 20px;
        padding: 40px 15px;
    }
    
    .lottery-banner-item {
        width: 50%; /* スマホでは2カラム表示 */
    }
}