@charset "utf-8";

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans CJK JP", "Yu Gothic", sans-serif;
    /* ポスターの背景色と縦縞パターンを薄く適用 */
    background-color: #f0f0f0;
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 15px,
        rgba(0, 0, 0, 0.03) 15px, /* 非常に薄い線の色 */
        rgba(0, 0, 0, 0.03) 17px  /* 非常に細い線 */
    );
    background-size: 30px 100%; /* 線の間隔 */
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* スマホ改行用クラス (PCでは非表示) */
.br-sp {
    display: none;
}

.store-list-container {
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-radius: 8px;
}

/* --- ページタイトルと装飾 (h1) --- */
.page-title {
    text-align: center;
    font-size: 1.8em; 
    font-weight: bold;
    color: #E63984;  /* タイトルをピンクに変更 */
    margin-top: 0; 
    margin-bottom: 1rem; 
    position: relative; 
    padding-bottom: 0.75rem; 
}

/* タイトルの装飾（ピンクの下線）を追加 */
.page-title::after {
    content: '';
    display: block;
    width: 100px; /* 装飾の線の長さ */
    height: 3px;  /* 線の太さ */
    background-color: #E63984; /* ピンク */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* 線を中央揃えにする */
}

/* --- カバー画像用のスタイル --- */
.cover-image {
    width: 100%;  
    height: auto; 
    display: block; 
    margin-bottom: 2rem; 
    border-radius: 8px; 
}

/* --- スタンプラリー案内 --- */
.stamp-rally-promo {
    border: 2px solid #35A544; /* テーマの緑色 */
    background-color: #fafff8; /* 非常に薄い緑 */
    border-radius: 8px;
    padding: 20px;
    margin-top: 1.5rem; /* h1タイトルとのマージン */
    margin-bottom: 30px; /* エリアナビとのマージン */
}

.promo-event-name {
    color: #222;
    font-weight: bold;
    font-size: 1.3em; 
    text-align: center;
    margin: 0 0 1rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px dashed #ccc; /* 説明文との区切り線 */
    line-height: 1.5; 
}
.promo-description {
    font-size: 1em;
    color: #444;
    line-height: 1.6;
    margin: 0 0 1.25rem 0; /* 注意書きとのマージン */
}
.promo-note {
    font-size: 0.9em;
    background-color: #fff8fA; /* 薄いピンク */
    border: 1px solid #E63984; /* ピンクの枠 */
    padding: 10px 15px;
    border-radius: 4px;
    margin: 0;
    color: #333;
}
.promo-note strong {
    color: #222;
}

/* --- スタンプラリー詳細 (賞品・期間) --- */
.promo-details {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px dashed #ccc; /* 案内文との区切り線 */
}

.promo-prizes h4,
.promo-period h4 {
    color: #35A544; /* 緑色 */
    font-size: 1.2em;
    margin: 0 0 0.75rem 0;
    text-align: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    
    /* テーマ側で入る可能性のある左側の装飾をリセット */
    border-left: none;
    padding-left: 0;
    background-image: none;
    position: relative; 
}

/* テーマ側で入る可能性のある ::before 装飾をリセット */
.promo-prizes h4::before,
.promo-period h4::before {
    display: none !important;
    content: none !important;
}


.promo-prizes {
    margin-bottom: 1.5rem;
}

ul.prize-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.prize-list li {
    background-color: #fff;
    border: 1px solid #eee;
    padding: 15px 20px;
    border-radius: 4px;
    margin-bottom: 10px;
    line-height: 1.5;
    text-align: center; 
}

/* 人数のスタイル */
p.prize-count {
    color: #E63984; /* ピンク */
    font-size: 1.5em; /* 大きく */
    font-weight: bold;
    margin: 0 0 0.25rem 0; 
}
/* 賞品名のスタイル */
p.prize-name {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    margin: 0;
}

ul.prize-list li small {
    display: block;
    font-size: 0.85em;
    font-weight: normal;
    color: #555;
    margin-top: 5px;
}

/* 期間のスタイル */
.promo-period p {
    font-size: 1.2em;
    font-weight: bold;
    color: #222;
    text-align: center;
    background-color: #fff;
    border: 1px solid #eee;
    padding: 20px 15px; 
    border-radius: 4px;
    margin: 0;
    line-height: 1.7; 
}
/* 期間の「～」のスタイル (PC/デフォルト) */
span.period-tilde {
    display: inline; /* PCでは改行しない */
    color: #E63984; /* ピンク */
    font-size: 1.1em;
    margin: 0 0.5em; /* 左右の余白 */
}


/* --- エリアナビゲーション --- */
.area-nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0; 
    gap: 12px;
    
    /* li間の空白文字によるレイアウト崩れを防止 */
    font-size: 0;
}

/* li要素でフォントサイズを元に戻す */
.area-nav li {
    font-size: 1rem; 
}

.area-nav li a {
    display: block;
    background-color: #E63984; 
    color: #ffffff;
    text-decoration: none;
    padding: 8px 25px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1em; 
    transition: background-color 0.3s, transform 0.2s;
    
    white-space: nowrap; 
    text-align: center;
}

.area-nav li a:hover {
    background-color: #D02A70; 
    transform: translateY(-2px);
}

/* --- 店舗リストセクション --- */
.store-area {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 90px; 
    padding: 0 25px 20px 25px;
    scroll-margin-top: 20px; 
}

.store-area h2 {
    text-align: center;
    color: #E63984; 
    font-size: 1.75em;
    margin: 15px 0 20px 0; 
    padding-bottom: 15px;
    border-bottom: 2px solid #E63984; 
}

/* --- 各店舗（カード型レイアウト） --- */
.store-item {
    padding: 20px; 
    border: 1px solid #ddd; 
    background-color: #fcfcfc; 
    border-radius: 8px; 
    margin-bottom: 20px; 
}

.store-item:last-child {
    margin-bottom: 0; 
}

/* [修正] 店舗名 h3 のレイアウト */
.store-item h3 {
    font-size: 1.3em;
    margin: 0 0 8px 0;
    color: #35A544; 
    text-decoration: none;
    font-weight: bold;
    /* [修正] display: flex と関連プロパティを削除 */
    /* display: flex; */
    /* align-items: center; */
    /* word-break: break-word; */
    
    /* [追加] 行間を詰める（pタグと揃える） */
    line-height: 1.4;
}
.store-item h3 .municipality {
    font-size: 0.85em;
    color: #333;
    font-weight: normal;
    text-decoration: none;
    margin-left: 8px;
    white-space: nowrap;
}

/* 住所・電話番号の行間とマージンを詰める */
.store-item p {
    margin: 0 0 3px 0;
    font-size: 1em;
    color: #444;
    line-height: 1.4; 
}

.store-item p a[href^="tel:"] {
    color: #E63984; 
    text-decoration: underline; 
    font-weight: bold;
}

/* --- 猪・鹿 ラベル --- */
.store-type {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
    border-radius: 4px;
    margin-right: 10px;
    text-decoration: none; 
    vertical-align: middle;
    white-space: nowrap;
    flex-shrink: 0;
}
.type-boar { background-color: #222; } 
.type-deer { background-color: #35A544; } 
.type-both { background-color: #E63984; } 


/* --- その他 --- */
.stripe-decoration {
    display: none;
}
.stripe-decoration::before {
    display: none;
}
.notice {
    font-size: 0.9em;
    padding: 10px 15px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    border-radius: 4px;
    margin-bottom: 25px;
}

.main, footer {
	background-color: #f0f0f0!important;
}

/* --- レスポンシブ対応 (スマホ) --- */
@media screen and (max-width: 600px) {
    
    /* スマホ改行用クラスを表示 */
    .br-sp {
        display: initial;
    }
    
    .area-nav li a {
        font-size: 0.9em; 
        padding: 8px 18px; 
    }

    .area-nav ul {
        gap: 8px;
    }
    
    /* 期間の「～」をスマホでは改行 */
    span.period-tilde {
        display: block;
        margin: 2px 0;
    }
}