@charset "utf-8";

:root {

}

@media screen and (max-width:480px) {
	:root {

		/* ようこそ */
		--Welcome_Figure_flex-basis: 100%;

		/* 料金 */
		--Fee_DivFee_flex-basis: calc( calc( 100% - calc( var(--Size_06) * 1 ) ) / 2 );

		/* 支払い方法 */
		--DivCard_height: auto;

	}
}

@media screen and (min-width:481px) and (max-width: 768px) {
	:root {

		/* ようこそ */
		--Welcome_Figure_flex-basis: 36%;

		/* 料金 */
		--Fee_DivFee_flex-basis: calc( calc( 100% - calc( var(--Size_06) * 2 ) ) / 3 );

		/* 支払い方法 */
		--DivCard_height: auto;

	}
}

@media screen and (min-width:769px) and ( max-width:1024px) {
	:root {

		/* ようこそ */
		--Welcome_Figure_flex-basis: 36%;

		/* 料金 */
		--Fee_DivFee_flex-basis: calc( calc( 100% - calc( var(--Size_06) * 3 ) ) / 4 );

		/* 支払い方法 */
		--DivCard_height: auto;

	}
}

@media screen and (min-width:1025px) and ( max-width:1440px) {
	:root {

		/* ようこそ */
		--Welcome_Figure_flex-basis: 36%;

		/* 料金 */
		--Fee_DivFee_flex-basis: calc( calc( 100% - calc( var(--Size_06) * 3 ) ) / 4 );

		/* 支払い方法 */
		--DivCard_height: var(--Size_48);

	}
}

@media screen and (min-width:1440px) {
	:root {

		/* ようこそ */
		--Welcome_Figure_flex-basis: 24%;

		/* 料金 */
		--Fee_DivFee_flex-basis: calc( calc( 100% - calc( var(--Size_06) * 3 ) ) / 4 );

		/* 支払い方法 */
		--DivCard_height: var(--Size_48);

	}
}








/* ーーーーーーーーーーーーーーーーーーーー
   ようこそ
ーーーーーーーーーーーーーーーーーーーー */

#welcome {
	display: flex;
	flex-wrap: wrap;
	flex-direction: var(--Flex-direction_CCRRRR);
	align-items: flex-start;
	gap: var(--Size_06);
	margin: var(--Width_M);
	& p {
		flex: 1;
		padding: 0 0 var(--Size_12);
	}
	& figure {
		flex-basis: var(--Welcome_Figure_flex-basis);
		padding: 0 0 var(--Size_12);
		& img {
			border-radius: var(--Border-radius_S);
		}
	}
}












/* ーーーーーーーーーーーーーーーーーーーー
   料金等リスト
ーーーーーーーーーーーーーーーーーーーー */

section#contents ul#list {
	display: flex;
	flex-wrap: wrap;
	flex-direction: var(--Flex-direction_CCRRRR);
	justify-content: flex-start;
	gap: var(--Size_06);
	margin: var(--Width_M);
	& li {
		position: relative;
		flex-basis: var(--Fee_DivFee_flex-basis);
		display: flex;
		padding: 0;
		border-radius: var(--Border-radius_S);
		& div.wrap {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: stretch;
			gap: var(--Size_04);
			padding: var(--Size_10) var(--Size_06) var(--Size_06);
			width: 100%;
			background: var(--Color_1D000);
			border-radius: var(--Border-radius_S);
			& div.icon {
				position: absolute;
				top: -1px;
				left: -1px;
				padding: var(--Size_02) 0 0 var(--Size_04);
				width: var(--Size_30);
				height: var(--Size_30);
				color: var(--Color_FF100);
				clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
				border-radius: var(--Border-radius_S) 0 0 0;
				& i {
					color: var(--Color_FF100);
					animation: icon 1s linear infinite alternate;
					
				}
			}
			& em,
			& strong {
				display: flex;
				flex-wrap: wrap;
				align-items: baseline;
				color: var(--Color_FF100);
			}
			& em {
				justify-content: flex-start;
				gap: var(--Size_04);
				font-weight: 400;
				& span {
					color: var(--Color_FF080);
					font-size: var(--Size_08);
				}
			}
			& em.em1 {
				padding: 0 0 var(--Size_06) var(--Size_24);
				font-size: var(--Size_10);
				line-height: 1;
			}
			& em.em2 {
				padding: 0 0 var(--Size_06);
				font-size: var(--Size_08);
				line-height: 1.4;
			}
			& strong {
				justify-content: flex-end;
				gap: var(--Size_02);
				font-size: var(--Size_14);
				font-weight: 600;
				line-height: 1.4;
				& span {
					color: var(--Color_FF060);
					font-size: var(--Size_10);
				}
			}
			& p {
				padding: 0 0 var(--Size_24);
			}
		}
		& div.wrap:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: url('https://rokuten.jp/wp-content/themes/Rokuten/svg/mon_ff.svg');
			background-repeat: no-repeat;
			background-position: right bottom;
			background-size: 120px;
			opacity: .04;
		}
	}
	& li:hover {
		& div.wrap {
			background: var(--Color_1D100);
		}
	}

}

.kanda {
	& ul#list {
		& li {
			& div.wrap {
				border: var(--Border_K060);
				& div.icon {
					background: var(--Color_K100);
					& i {
					}
				}
				& em {
					border-bottom: var(--Border_K040);
				}
			}
		}
	}
}

.osaka {
	& ul#list {
		& li {
			& div.wrap {
				border: var(--Border_O060);
				& div.icon {
					background: var(--Color_O100);
					& i {
					}
				}
				& em {
					border-bottom: var(--Border_O040);
				}
			}
		}
	}
}

.naha {
	& ul#list {
		& li {
			& div.wrap {
				border: var(--Border_N060);
				& div.icon {
					background: var(--Color_N100);
					& i {
					}
				}
				& em {
					border-bottom: var(--Border_N040);
				}
			}
		}
	}
}

@keyframes icon {
	0% { transform: rotate( -20deg );transform-origin: center;  }
	100% { transform: rotate( 20deg );transform-origin: center; }
}








/* 支払い方法 */

section#contents {
	& div#card {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--Size_06);
		margin: var(--Width_M);
		& div {
			position: relative;
			width: var(--Size_30);
			height: var(--Size_30);
			& figure {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: var(--Size_06);
				width: var(--Size_30);
				height: var(--Size_30);
				background: var(--Color_FF100);
				border-radius: var(--Border-radius_S);
				transition: all .5s ease;
				& img {
					width: 100%;
				}
			}
			& span {
				display: block;
				visibility: hidden;
				position: absolute;
				left: var(--Size_04);
				top: 0;
				z-index: 1000;
				padding: var(--Size_02) var(--Size_04);
				font-size: var(--Size_08);
				color: var(--Color_FF100);
				white-space: nowrap;
				background: var(--Color_A100);
				border-radius: var(--Border-radius_S);
				opacity: 0;
				transition: all .5s ease;
				transform: rotate(0deg);
				transform-origin: top left;
			}
		}
		& div:hover {
			z-index: 9999;
			& figure {
				width: var(--Size_40);
				height: var(--Size_40);
				transform: rotate(12deg);
				transform-origin: top left;
			}
			& span {
				display: block;
				visibility: visible;
				opacity: 1;
				transform: rotate(-12deg);
				transition: all .5s ease;
			}
		}
	}
}

.kanda {
	& section#contents {
		& div#card {
			& div {
				& figure {
					& img {
					}
				}
				& span {
					background: var(--Color_K100);
				}
			}
		}
	}
}

.osaka {
	& section#contents {
		& div#card {
			& div {
				& figure {
					& img {
					}
				}
				& span {
					background: var(--Color_O100);
				}
			}
		}
	}
}

.naha {
	& section#contents {
		& div#card {
			& div {
				& figure {
					& img {
					}
				}
				& span {
					background: var(--Color_N100);
				}
			}
		}
	}
}








/* ーーーーーーーーーーーーーーーーーーーー
   日本酒紹介リンクボタン
ーーーーーーーーーーーーーーーーーーーー */

.btn {
	display: flex;
	justify-content: center;
	padding: 0 0 var(--Size_24);
}

.btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--Size_12) var(--Size_24);
	font-size: var(--Size_12);
	font-weight: 600;

	--tile: var(--Size_24);
	background-color: var(--Color_A020);
	background-image: url("https://rokuten.jp/wp-content/themes/Rokuten/svg/pattern_rokuten_006.svg");
	background-repeat: repeat;
	background-size: var(--tile);
	background-position: 0 0;

	border: var(--Border_A060);
	border-radius: var(--Border-radius_S);
	backdrop-filter: var(--backdrop-filter_blur);
	-o-backdrop-filter: var(--backdrop-filter_blur);
	-moz-backdrop-filter: var(--backdrop-filter_blur);
	-webkit-backdrop-filter: var(--backdrop-filter_blur);
	animation: SakePatternLeft 2s linear infinite;
}

.btn a:hover {
	background: url("https://rokuten.jp/wp-content/themes/Rokuten/svg/pattern_rokuten_006.svg"), var(--Color_A080);
	background-size: var(--Size_24);
}


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

/* 優しさ対応（動きが苦手な人向け） */
@media (prefers-reduced-motion: reduce){
	h2{ animation: none !important; }
}