/* ==========================================
   E4saleal.css : セール・ポイント・その他 共通CSS
   ========================================== */

/* 全体共通コンテナ */
.sale-container, .point-container, .etc-container {
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto;
}

/* 見出し：共通スタイル */
.sale-section-head, .point-section-head, .etc-section-head {
    margin: 40px 0 20px 0;
    border-bottom: 2px solid #333;
    padding: 8px 0 12px 52px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 40px 40px;
    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;
}

/* --- アイコン出し分け --- */

/* セール（オレンジ/赤） */
.sale-section-head {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff5722"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zM13 10h2V7h3V5h-3V2h-2v3h-3v2h3v3z"/></svg>');
}

/* ポイント（ゴールド/イエロー） */
.point-section-head {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fbc02d"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v2h-2zm0 4h2v5h-2z"/></svg>');
}

/* その他・ギフト（グリーン） */
.etc-section-head {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232e7d32"><path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.65-.5-.65C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 12 7.4l3.38 4.6L17 10.83 14.92 8H20v6z"/></svg>');
}

/* --- グリッドレイアウト共通 --- */
.sale-grid-list, .point-grid-list, .etc-grid-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: -8px; 
}

.sale-grid-item, .point-grid-item, .etc-grid-item {
    box-sizing: border-box;
    padding: 8px;
    width: 25%;
}

.sale-grid-item a, .point-grid-item a, .etc-grid-item a {
    display: block;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.sale-grid-item a:hover, .point-grid-item a:hover, .etc-grid-item a:hover {
    opacity: 0.8;
    transform: translateY(-4px);
}

.sale-grid-item img, .point-grid-item img, .etc-grid-item img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #eee;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
    .sale-section-head, .point-section-head, .etc-section-head {
        font-size: 24px;
        padding-left: 44px;
        background-size: 34px 34px;
    }
    .sale-grid-item, .point-grid-item, .etc-grid-item {
        width: 50%;
    }
}