@charset "utf-8";
/* CSS Document */
.shop-filters{
  display: flex;
  justify-content: center;  /* 横方向の中央に寄せる */
  flex-wrap: wrap;         /* 画面が狭い時に折り返す（スマホ対応） */
  gap: 10px;               /* select同士の間の余白（marginの代わり） */
}

/* セレクトボックスのデフォルト装飾を解除 */
select {
  appearance: none;
  -webkit-appearance: none; /* Safari/Chrome用 */
  -moz-appearance: none;    /* Firefox用 */
  
  /* ここから独自のデザインを書く */
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: right 15px center; /* 右から15px、上下中央 */
  background-size: 18px; /* 矢印の大きさ */
  font-size: 18px;
  margin: 20px 30px 5px;
  padding: 10px 80px 10px 30px;
  border: 1px solid #ccc;
  background-color: #fff;
}
/* 検索結果の表示*/
.count{
  text-align: center;
  padding: 15px auto;
}

/* 検索フィルターと五十音まどの背景色 */
.shop-filters, .kana-index, .search-btn-container {
	background-color: #fdfaf5;
}
.shop-filters {
    padding: 10px;

}
.kana-index {
    top: 55px; /* フィルターの下に固定（環境に合わせて調整） */
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px;
    justify-content: center;
    background-color: #fdfaf5;
	

}

/* 五十音ボタンの調整 */
.kana-index button {
    padding: 8px 12px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}
.kana-index button.active {
    background-color: #c57670;
    color: #fff;
    border-color: #c57670;
    font-weight: bold;
}

/* 店舗リストのグリッド設定（PC3列・スマホ1列） */
.shoplist {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PC3列 */
    gap: 10px;
}


/* カードのデザイン */
.shop {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    background: #fff;
    transition: transform 0.2s;
}
.shop:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.shop-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.shop-header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.category-tag,.shop-area{
    font-size: 0.9rem;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 4px;
    color: #666;
}

.shop-name {
    margin: 8px 0;
    font-size: 1.1rem;
    color: #000;
}

.shop-body {
    font-size: 0.9rem;
    color: #333;
}
.shop-body p { margin: 5px 0; }
.label {
    display: inline-block;
    width: 3.5em;
    color: #888;
    font-size: 0.8rem;
}

/* ボタン */
.shop-footer {
    margin-top: auto; /* 下部に固定 */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.btn-tel, .btn-site {
    text-align: center;
    padding: 10px 5px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.85rem;
}
.btn-tel { background: #c57670; color: #fff; }
.btn-site { border: 1px solid #c57670; color: #c57670; }

/* 電話/HPがない場合のスタイル */
.disabled {
    background: #e0e0e0 !important;
    border-color: #ccc !important;
    color: #888 !important;
    
    /* クリックを完全に無効化 */
    pointer-events: none !important; 
    cursor: default !important;
    text-decoration: none !important;
    
    /* 念のため、見た目でも「押せない感」を出す */
    opacity: 0.6;
}

/* ページネーション全体の囲み */
.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 40px 0;
    padding: 0 10px;
}

/* 数字ボタンの基本デザイン */
.pagination .page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 500;
    color: #444;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* マウスを乗せたとき */
.pagination .page-btn:hover {
    background-color: #f7f7f7;
    border-color: #bbb;
}

/* 今開いているページのボタン（あか抜けデザイン） */
.pagination .page-btn.active {
    color: #fff;
    background-color: #0076cb; /* ★商品券サイトのメインカラーに合わせて自由に変更してください */
    border-color: #0076cb;
    font-weight: bold;
    pointer-events: none;
}


@media (max-width: 1024px) {
    .shoplist {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* タブレット2列 */
    }
}
@media (max-width: 767px) {
	.area{
		width:97%;
		padding:50px 0;
}
	.shop {
	    padding: 10px;
		width: 90%;
}
	.shoplist {
		display: flex;
		flex-direction: column;
		align-items: center;
		width:100%;
		padding:15px 0;
		max-width: 95vw;
		
       /*  display: grid;
        grid-template-columns: 1fr;  デフォルトはスマホ1列 
        gap: 10px; */
}
	.shop-name {
        /* 文字が長くても枠内で折り返す設定 */
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-all;
        margin: 5px 0;
    }
	.shop-card-inner {
        width: 100%;
    }
.position-sticky {
    position: -webkit-sticky; /* iOS用 */
    position: sticky;
    top: 0;
    z-index: 1000;
    
    /* 背景色をここに集約 */
    background-color: #fdfaf5; 
    
    /* 重要：中身がはみ出さないようにしつつ、高さを確保 */
    width: 100%;
    display: block; /* もし flex になっていたら一旦 block に */
    
    /* 影をつけると、浮いている感じが出て背景の切れ目も分かりやすくなります */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
}

/* 中身の余白を調整（marginだと背景が切れるので padding を推奨） */
.search, .search-btn-container, .count {
    margin: 0; 
    padding: 0px 20px; 
}
.button{
  margin: 5px auto;
}
.shop-filters {
    gap: 0px;
	padding: 0px;
}
select {
    margin: 1px 30px 1px;
}
}