@charset "utf-8";




/* ーーーーーーーーーー
  背景
　　基本設定
ーーーーーーーーーー */

div.background-area {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	padding: 4vw;
	width: 100%;
	height: 100%;
	animation: bgchange 140s linear infinite;
	overflow: hidden;
	& video {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 102%;
		width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
		min-height: 102%;
		height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
		transform: translate( -50%, -50% );
	}
	& div.title-area {
		text-align: center;
		color: var(--Color_W);
		font-size: 4vw;
		font-family: 'RocknRoll One', sans-serif;
		text-transform: uppercase;
		& p {
			font-size: 6vw;
			line-height: 1;
			color: inherit;
			text-shadow: 0px 8px 8px var(--Color_1D040), 0 -2px 1px var(--Color_W);
			letter-spacing: 1px;
		}
	}
	& ul.item-list {
		display: flex;
		flex-direction: column;
		gap: 2vw;
		z-index: 9990;
		& li {
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 2vw;
			padding: 1vw 2vw;
			font-family: 'RocknRoll One', sans-serif;
			white-space: nowrap;
			background: var(--Color_W040);
			border: 1px var(--Color_W100) solid;
			border-radius: var(--Border-radius_S);
			& img {
				flex-basis: 7vw;
				width: 7vw;
				border-radius: var(--Border-radius_L);
				aspect-ratio: 1 / 1;
			}
			& strong {
				flex: 1;
				color: var(--Color_P100);
				font-size: 3vw;
				line-height: 1.2;
			}
			& em {
				flex: 1;
				color: var(--Color_P100);
				font-size: 3vw;
				text-align: right;
			}
		}
	}
}








/* ーーーーーーーーーー
  ウイスキー
ーーーーーーーーーー */

#whisky {
	justify-content: flex-start;
	align-items: stretch;
	gap: 4vw;
	& video {
		position: relative;
		top: 0;
		left: 0;
		min-width: 100%;
		width: 100%;
		height: auto;
		min-height: auto;
		border-radius: var(--Border-radius_M);
		aspect-ratio: 16 / 9;
		transform: translate( 0%, 0% );
	}
	& div.title-area {
		position: absolute;
		top: 4vw;
		left: 4vw;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 4vw;
		width: calc( 100% - 8vw );
		aspect-ratio: 16 / 9;
	}
}








/* ーーーーーーーーーー
  シャンパン
ーーーーーーーーーー */

#champagne {
	justify-content: center;
	align-items: stretch;
	gap: 4vw;
	animation: none;
	& video {
	}
	& div.title-area {
	}
	& ul.item-list {
		& li {
			background: var(--Color_P040);
			border: 1px var(--Color_P100) solid;
			& strong {
				color: var(--Color_W100);
			}
			& em {
				color: var(--Color_W100);
			}
		}
	}
}



















/* ーーーーーーーーーー
   ロゴ 
ーーーーーーーーーー */

#logo {
	gap: var(--Size_24);
	& div {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	& div#logoA {
		& span.logo_bar {
			flex-basis: 100%;
			text-align: center;
			& img {
				width: var(--Header_logoA_width);
			}
		}
	}
	& div#logoB {
		& span {
			width: 12vw;
		}
	}
	& > span {
		position: absolute;
	}
	& > span.logo_flower1 {
		top: 12vw;
		right: 12vw;
		width: 20vw;
		animation: 120s linear infinite logo_turn_right;
	}
	& > span.logo_flower2 {
		bottom: 20vw;
		left: 12vw;
		width: 18vw;
		animation: 120s linear infinite logo_turn_left;
	}
	& > span.logo_flower3 {
		top: 12vw;
		left: 12vw;
		width: 12vw;
		animation: 90s linear infinite logo_turn_right;
	}
	& > span.logo_flower4 {
		bottom: 12vw;
		right: 12vw;
		width: 12vw;
		animation: 100s linear infinite logo_turn_left;
	}
	& > span.logo_peace1 {
		bottom: 40vw;
		right: 12vw;
		width: 12vw;
		animation: 120s linear infinite logo_turn_right;
	}
	& > span.logo_peace2 {
		top: 25vw;
		left: 18vw;
		width: 16vw;
		animation: 180s linear infinite logo_turn_left;
	}
	& span.logo_fuji {
		bottom: 0;
		width: 36vw;
	}
	& span {
		& img {
			width: 100%;
		}
	}
}

@keyframes bgchange {
	0% { background: var(--Color_Y100); }
	25% { background: var(--Color_P100); }
	50% { background: var(--Color_G100); }
	75% { background: var(--Color_E100); }
	100% { background: var(--Color_Y100); }
 }

@keyframes logo_turn_right {
	0%{ transform:rotate(0);}
	100%{ transform:rotate(360deg); }
}

@keyframes logo_turn_left  {
	0%{ transform:rotate(0);}
	100%{ transform:rotate(-360deg); }
}








/* ーーーーーーーーーー
  ビール
　　ハイボール
ーーーーーーーーーー */

#beer {
	gap: 2vw;
	padding: 0;
	background: var(--Color_Y);
	animation: none;
	& .recommend {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 12vw 10vw;
		width: 100%;
		height: calc( calc( 100% - 2vw ) / 2 );
		border-radius: var(--Border-radius_M);
		overflow: hidden;
		& .text_area {
			flex: 1;
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			justify-content: center;
			padding: 10vw 0;
			background: var(--Color_Y080);
			border-radius: var(--Border-radius_M);
			z-index: 20;
			& p {
				text-align: center;
				font-family: 'RocknRoll One', sans-serif;
				opacity: 1;
			}
			& p.item-name {
				font-size: 8vw;
				color: var(--Color_P);
			}
			& p.text {
				font-size: 6vw;;
				color: var(--Color_B);
			}
		}
	}
}








/* ーーーーーーーーーー
  チンチロリンゲーム 
ーーーーーーーーーー */

#game_c {
	align-items: stretch;
	gap: 2vw;
	padding: 0 4vw;
	background-image:
	  linear-gradient(135deg, var(--Color_D040) 25%, transparent 25%),
	  linear-gradient(225deg, var(--Color_D040) 25%, transparent 25%),
	  linear-gradient(45deg, var(--Color_D040) 25%, transparent 25%),
	  linear-gradient(315deg, var(--Color_D040) 25%, var(--Color_W040) 25%);
	background-position: 20px 0, 20px 0, 0 0, 0 0;
	background-size: 40px 40px;
	background-repeat: repeat;
	& .game-title {
		display: flex;
		justify-content: center;
		text-align: center;
		font-size: 10vw;
		color: var(--Color_G);
		font-family: 'RocknRoll One', sans-serif;
	}
	& p {
		padding: 2vw 0;
		text-align: center;
		font-size: 4vw;
		color: var(--Color_W);
		font-family: 'RocknRoll One', sans-serif;
	}
	& .rule {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 2vw;
		z-index: 999;
		& dl {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			padding: 2vw 2vw;
			width: 100%;
			background: var(--Color_W080);
			border-radius: var(--Border-radius_M);
			& dt {
				flex-basis: 26vw;
				text-align: center;
				font-size: 4vw;
				color: var(--Color_G);
				font-family: 'RocknRoll One', sans-serif;
				& span {
					display: inline-block;
					margin: 0 1vw;
					width: 7vw;
					text-align: center;
					font-size: 3.6vw;
					color: var(--Color_W);
					font-family: 'RocknRoll One', sans-serif;
					background: var(--Color_G);
					border-radius: var(--Border-radius_L);
				}
			}
			& dd {
				flex-basis: calc( 100% - 26vw );
				text-align: right;
				font-size: 5vw;
				color: var(--Color_P);
				font-family: 'RocknRoll One', sans-serif;
				& span {
					display: block;
					text-align: right;
					font-size: 3.6vw;
					color: var(--Color_B);
					line-height: 1.1;
					& i {
					}
				}
			}
		}
	}
}








/* ーーーーーーーーーー
  SUZURI 
ーーーーーーーーーー */

#suzuri {
	flex: 1;
	gap: 2vw;
	padding: 4vw 12vw;
	background: var(--Color_G);
	& ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: center;
		gap: 4vw;
		& li {
			flex-basis: calc( calc( 100% - 4vw ) / 2 );
			& img {
				width: 100%;
				border-radius: var(--Border-radius_S);
			}
		}
	}
	& p {
		padding: 0 0;
		text-align: center;
		font-size: 4.4vw;
		color: var(--Color_W);
		font-family: 'RocknRoll One', sans-serif;
		& em {
			font-size: 4vw;
			color: var(--Color_W080);
		}
	}
}








/* ーーーーーーーーーー
  LINE公式 
ーーーーーーーーーー */

#line {
	flex: 1;
	gap: 4vw;
	background: var(--Color_P);
	& figure {
		border-radius: var(--Border-radius_S);
		overflow: hidden;
		& img {
			width: 100%;
		}
	}
	& p {
		padding: 0 0;
		text-align: center;
		font-size: 4.4vw;
		color: var(--Color_W);
		font-family: 'RocknRoll One', sans-serif;
		& em {
			font-size: 4vw;
			color: var(--Color_W080);
		}
	}
}








/* ーーーーーーーーーー
  画伯 
ーーーーーーーーーー */

#gahaku {
	flex: 1;
	gap: 4vw;
	padding: 4vw 12vw;
	background: var(--Color_P);
	& > p {
		padding: .4vw 0 0;
		font-size: 4vw;
		color: var(--Color_W);
		font-family: 'RocknRoll One', sans-serif;
	}
	& ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: center;
		gap: 4vw;
		& li {
			flex-basis: calc( calc( 100% - calc( 4vw * 1 ) ) / 2 );
			& figure {
				& img {
					width: 100%;
					border-radius: var(--Border-radius_S);
				}
			}
			& time {
				display: inline-flex;
				margin: 2vw 0 0;
				padding: 1vw 2vw;
				font-size: 2.4vw;
				color: var(--Color_W);
				background: var(--Color_1D100);
				border-radius: var(--Border-radius_S);
				font-family: 'RocknRoll One', sans-serif;
			}
			& p {
				padding: .4vw 0 0;
				font-size: 3.6vw;
				color: var(--Color_W);
				font-family: 'RocknRoll One', sans-serif;
			}
		}
	}
}








/* ーーーーーーーーーー
  スケジュール 
ーーーーーーーーーー */

#schedule {
	gap: 6vw;
	padding: 4vw 0;
	animation: schedulebgchange 140s linear infinite;
	& figure {
		width: 80%;
		border-radius: var(--Border-radius_S);
		box-shadow: 1.5vw 1.5vw 0px 0px var(--Color_B040);
		overflow: hidden;
		& img {
		}
	}
}

@keyframes schedulebgchange {
	0% { background: var(--Color_G100); }
	50% { background: var(--Color_Y100); }
	100% { background: var(--Color_G100); }
 }








/* ーーーーーーーーーー
   スタッフ紹介
ーーーーーーーーーー */

#cast {
	gap: 4vw;
	padding: 0 4vw;
	animation: schedulebgchange 140s linear infinite;
	& ul {
		display: flex;
		flex-direction: column;
		gap: 2vw;
		& li {
			display: flex;
			align-items: center;
			gap: 4vw;
			& figure {
				position: relative;
				flex-basis: 24vw;
				& img {
					border: 6px var(--Color_P) solid;
					border-radius: var(--Border-radius_M);
					overflow: hidden;
				}
			}
			& .wrap {
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: 1vw;
				& div {
					padding: 4vw 2vw 1vw;
					background: var(--Color_W080);
					border-radius: var(--Border-radius_S);
				}
			}
			& .name {
				position: absolute;
				right: 0;
				bottom: -2vw;
				left: 0;
				margin: auto;
				padding: 1vw 2vw 1vw;
				width: 90%;
				text-align: center;
				font-size: 3vw;
				color: var(--Color_P100);
				background: var(--Color_Y080);
				border-radius: var(--Border-radius_S);
			}
		}
	}
	& .comment {
		font-size: 3vw;
		color: var(--Color_G100);
		line-height: 1.4;
	}
	& span {
		position: absolute;
		bottom: 3vw;
		left: -2vw;
		height: 2vw;
		width: 2vw;
		padding: 0 var(--Size_08) var(--Size_02);
		background: var(--Color_W080);
		clip-path: polygon(0 0, 100% 0, 100% 100%);
	}
	& .music {
		font-size: 3vw;
		color: var(--Color_G100);
	}
	& .comment:before,
	& .music:before {
		position: absolute;
		top: 1vw;
		left: 2vw;
		font-size: 2vw;
		color: var(--Color_P100);
	}
	& .comment::before {
		content: 'コメント';
	}
	& .music::before {
		content: '好きなアーティスト';
	}
}










/* ーーーーーーーーーー
  ギミック
　　スウィング
ーーーーーーーーーー */

.swing-2 {
   animation: swing-2 6s linear infinite;
}

@keyframes swing-2 {
	0% { transform: rotate( 0deg ); }
	25% { transform: rotate( 2deg ); }
	50% { transform: rotate( 0deg ); }
	75% { transform: rotate( -2deg ); }
	100% { transform: rotate( 0deg ); }
}


.swing-6 {
   animation: swing-6 6s linear infinite;
}

@keyframes swing-6 {
	0% { transform:rotate( 0 ); }
	25% { transform:rotate( 6deg ); }
	50% { transform:rotate( 0deg ); }
	75% { transform:rotate( -6deg ); }
	100% { transform:rotate( 0deg ); }
}








/* ーーーーーーーーーー
  背景
　　下から上に泡が出る
ーーーーーーーーーー */

.circles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	& li {
		position: absolute;
		display: block;
		list-style: none;
		width: 20px;
		height: 20px;
		background: var(--Color_W020);
		animation: circles 25s linear infinite;
		bottom: -150px;
	}
	& li:nth-child(1) {
		left: 25%;
		width: 80px;
		height: 80px;
		animation-delay: 0s;
	}
	& li:nth-child(2) {
		left: 10%;
		width: 20px;
		height: 20px;
		animation-delay: 2s;
		animation-duration: 12s;
	}
	& li:nth-child(3) {
		left: 70%;
		width: 20px;
		height: 20px;
		animation-delay: 4s;
	}
	& li:nth-child(4) {
		left: 40%;
		width: 60px;
		height: 60px;
		animation-delay: 0s;
		animation-duration: 18s;
	}
	& li:nth-child(5) {
		left: 65%;
		width: 20px;
		height: 20px;
		animation-delay: 0s;
	}
	& li:nth-child(6) {
		left: 75%;
		width: 110px;
		height: 110px;
		animation-delay: 3s;
	}
	& li:nth-child(7) {
		left: 35%;
		width: 150px;
		height: 150px;
		animation-delay: 7s;
	}
	& li:nth-child(8) {
		left: 50%;
		width: 25px;
		height: 25px;
		animation-delay: 15s;
		animation-duration: 45s;
	}
	& li:nth-child(9) {
		left: 20%;
		width: 15px;
		height: 15px;
		animation-delay: 2s;
		animation-duration: 35s;
	}
	& li:nth-child(10) {
		left: 85%;
		width: 150px;
		height: 150px;
		animation-delay: 0s;
		animation-duration: 11s;
	}
}

@keyframes circles {
	0% { transform: translateY( 0 ) rotate( 0deg ); opacity: 1; border-radius: 0; }
	100% { transform: translateY( -1000px ) rotate( 720deg ); opacity: 0; border-radius: 200px; }
}








/* ーーーーーーーーーー
  背景：下に波
ーーーーーーーーーー */

.wave_wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

.waves {
	position:relative;
	margin-bottom:-7px; /*Fix for safari gap*/
	width: 100%;
	height: 14vh;
}


/* Animation */

.parallax {
	& > use {
		animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
	}
	& > use:nth-child(1) {
		animation-delay: -2s;
		animation-duration: 7s;
	}
	& > use:nth-child(2) {
		animation-delay: -3s;
		animation-duration: 10s;
	}
	& > use:nth-child(3) {
		animation-delay: -4s;
		animation-duration: 13s;
	}
	& > use:nth-child(4) {
		animation-delay: -5s;
		animation-duration: 20s;
	}
}

@keyframes move-forever {
	0% { transform: translate3d( -90px, 0, 0 ); }
	100% { transform: translate3d( 85px, 0, 0 ); }
}