@charset "utf-8";

/* タイトルアイコン */
.title-shop{
	display:block;
	width:100px;
	height:80px;
	margin:10px auto;
	background:url("../image/icon_bird1.png") no-repeat center/contain;
	opacity:0.9;
}

/* ★修正: .shop-list はPC・タブレット共通で横並び中央揃え */
.shop-list{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:flex-start;
	gap:28px;
	list-style:none;
	padding:0 0 30px;
	margin:0 auto;
}

/* PCは固定幅2枚 */
.shop-list li{
	flex:0 0 280px;
}

.shop-card{
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;

	width:100%;
	max-width:280px;
	padding-top:80%;

	background:url("../image/bg_frame1.png") center no-repeat;
	background-size:contain;

	color:#3a3a3a;
	text-decoration:none;
}
.shop-card .shop-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.shop-card > span {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}

.shop-card:hover .shop-name,
.shop-card:hover .shop-sub{
	opacity:0.6;
	transition:opacity .3s ease;
}

.shop-name{
	font-size: 13px;
	letter-spacing:0.1em;
	margin-bottom:8px;
	padding-top:5px;
}

.shop-sub{
	font-size: 11px;
	letter-spacing:0.08em;
	position:relative;
}

.shop-sub::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-3px;
	width:0;
	height:1px;
	background:#2b2b2b;
	transition:width .6s ease;
}
.shop-card:hover .shop-sub:hover{
	opacity:0.6;
}
.shop-card:hover .shop-sub::after{
	width:100%;
}

/* クリックだけ無効化 */
.shop-card.disabled{
	pointer-events:none;
	opacity:.6;
	filter:grayscale(.3);
}

/* ★iPad mini対応 (769px以下): 横並び維持・中央揃え */
@media(max-width:769px){

	.shop-list{
		/* ★flex-direction:row のまま（縦にしない） */
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:center;
		align-items:flex-start;
		gap:20px;
		/* ★左右paddingで中央に収める */
		padding:0 24px 30px;
		box-sizing:border-box;
		/* ★幅を明示してセンタリングを確実に */
		width:100%;
	}

	/* ★カード1枚の幅: 画面幅の45%でちょうど2枚横並び */
	.shop-list li{
		flex:0 0 auto;
		width:calc(50% - 34px); /* gap:20px + padding:24px考慮 */
		max-width:220px;
	}

	.shop-card{
		max-width:100%;
		/* padding-topで縦横比を維持（aspect-ratioのフォールバック） */
		padding-top:72%;
	}
}

/* ★スマホ小画面 (480px以下): 縦並び中央揃え */
@media(max-width:480px){

	.shop-list{
		flex-direction:column;
		align-items:center;
		gap:18px;
		padding:0 0 30px;
	}

	.shop-list li{
		width:80%;
		max-width:280px;
	}

	.shop-card{
		padding-top:72%;
	}
}