@charset "utf-8";

:root {
	--Gap: calc( 1 * var(--Size) );

}

@media screen and (max-width:480px) {
	:root {
		/* 店舗遷移 */
		--Bar_align-items: stretch;
		--Bar_padding: calc( 6 * var(--Size) ) 0;
		--Bar_A_flex-basis: 100%;
	}
}

@media screen and (min-width:481px) {
	:root {
		/* 店舗遷移 */
		--Bar_align-items: stretch;
		--Bar_padding: 0;
		--Bar_A_flex-basis: calc( calc( 100% - calc( 2 * var(--Gap) ) ) / 3 );
	}
}








/* ーーーーーーーーーーーーーーーーーーーー
   トップ
ーーーーーーーーーーーーーーーーーーーー */

section#contents {
	justify-content: center;
	div#bar {
		display: flex;
		flex-direction: var(--Flex-direction_CRRRRR);
		justify-content: center;
		align-items: var(--Bar_align-items);
		gap: var(--Gap);
		margin: var(--Width_0);
		padding: var(--Bar_padding);
		a {
			position: relative;
			flex-basis: var(--Bar_A_flex-basis);
			display: flex;
			flex-direction: column;
			padding: var(--Size_24) var(--Size_12) var(--Size_12);
			--tile: var(--Size_60);
			border-radius: var(--Border-radius_S);
			transition: var(--Transition_04s);
			-webkit-transition: var(--Transition_04s);
			backdrop-filter: var(--backdrop-filter_blur);
			-webkit-backdrop-filter: var(--backdrop-filter_blur);
			animation: ShopPatternLeft 8s linear infinite;

			figure {
				display: flex;
				justify-content: center;
				z-index: 1;
				img {
					width: calc( 10 * var(--Size) );
				}
			}

			p {
				padding: 0;
				font-size: var(--Size_10);
				color: var(--Color_FF100);
				font-weight: 400;
				z-index: 1;

				&.name {
					padding: var(--Size_12) 0 var(--Size_04);
					font-size: var(--Size_16);
					font-weight: 600;
					border-bottom: 1px var(--Color_FF040) solid;
				}
				&.address {
					flex: 1;
					padding: var(--Size_04) 0 0;
				}
				&.tel {
					text-align: right;
				}
			}

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: var(--Border-radius_S);
				transition: var(--Transition_04s);
				-webkit-transition: var(--Transition_04s);
			}

			/* 各店舗の共通設定（背景の敷き方） */
			&.kanda, &.osaka, &.naha {
				background-color: var(--Color_1D080);
				background-size: var(--tile);
				background-position: 0 0;
				&::before {
					background: linear-gradient(to top, var(--Color_3D020), var(--Color_3D100));
					background: -webkit-linear-gradient(bottom, var(--Color_3D020), var(--Color_3D100));
				}
				&:hover {
					&::before {
						background: linear-gradient(to top, var(--Shop-Color-Hover-020, var(--Color_K020)), var(--Shop-Color-Hover-100, var(--Color_K100)));
						background: -webkit-linear-gradient(bottom, var(--Shop-Color-Hover-020, var(--Color_K020)), var(--Shop-Color-Hover-100, var(--Color_K100)));
					}
				}
			}

			/* 個別の画像とホバー時のカラー切り替え */
			&.kanda {
				background-image: url("https://rokuten.jp/wp-content/themes/Rokuten/svg/pattern_kanda_006.svg");
				&:hover {
					background-color: var(--Color_K100);
					background-image: url("https://rokuten.jp/wp-content/themes/Rokuten/svg/pattern_kanda_006.svg");
				}
			}
			&.osaka {
				background-image: url("https://rokuten.jp/wp-content/themes/Rokuten/svg/pattern_osaka_006.svg");
				&:hover {
					background-color: var(--Color_O100);
					background-image: url("https://rokuten.jp/wp-content/themes/Rokuten/svg/pattern_osaka_006.svg");
					&::before {
						background: linear-gradient(to top, var(--Color_O020), var(--Color_O100));
						background: -webkit-linear-gradient(bottom, var(--Color_O020), var(--Color_O100));
					}
				}
			}
			&.naha {
				background-image: url("https://rokuten.jp/wp-content/themes/Rokuten/svg/pattern_naha_006.svg");
				&:hover {
					background-color: var(--Color_N100);
					background-image: url("https://rokuten.jp/wp-content/themes/Rokuten/svg/pattern_naha_006.svg");
					&::before {
						background: linear-gradient(to top, var(--Color_N020), var(--Color_N100));
						background: -webkit-linear-gradient(bottom, var(--Color_N020), var(--Color_N100));
					}
				}
			}
		}
	}
}

/* 右→左へ、タイル1枚分だけ移動（継ぎ目が出にくい） */
@keyframes ShopPatternLeft {
	to { background-position: calc(var(--tile) * -1) 0; }
}

/* 優しさ対応（動きが苦手な人向け） */
@media (prefers-reduced-motion: reduce) {
	/* 元コードで h2 になっていたため、必要であれば a や全体のアニメーション停止に変更してください */
	div#bar a { animation: none !important; }
}