@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@400;500;700&family=M+PLUS+Rounded+1c:wght@400;500;700;800;900&display=swap');
/*
  font-family: 'Kaisei Decol', serif;
  font-family: 'M PLUS Rounded 1c', sans-serif;
*/
/*///////////////////////////////////////////////////////////////
	var
/////////////////////////////////////////////////////////////////*/
:root {
	--sp-1: min(1vw, 10px);
	--sp-2: min(2vw, 20px);
	--sp-3: min(3vw, 30px);
	--sp-4: min(4vw, 40px);
	--sp-5: min(5vw, 50px);
	--sp-6: min(6vw, 60px);
	--sp-7: min(7vw, 70px);
	--wd-1000: min(95vw, 1000px);
	--wd-800: min(85vw, 800px);
	--color-red: #ee184b;
	--color-terracotta: #df5f4f;
	--color-brown: #68565a;
	--color-rgba-w: rgba(255,255,255,0.5);
	--fontsize-xr: clamp(0.7rem, 0.639rem + 0.3vw, 1rem);
	--fontsize-r: clamp(0.8rem, 0.734rem + 0.33vw, 1.125rem);
	--fontsize-m: clamp(0.8rem, 0.684rem + 0.58vw, 1.375rem);
	--fontsize-ml: clamp(0.9rem, 0.778rem + 0.61vw, 1.5rem);
	--fontsize-l: clamp(0.9rem, 0.627rem + 1.37vw, 2.25rem);
	--fontsize-xl: clamp(2rem, 1.519rem + 2.41vw, 4.375rem);
	--shadow-pink-10:
		1px 0px 10px var(--color-pink),
		0px 1px 10px var(--color-pink),
		1px 1px 10px var(--color-pink),
		-1px 0px 10px var(--color-pink),
		0px -1px 10px var(--color-pink),
		-1px -1px 10px var(--color-pink),
		0px 0px 10px var(--color-pink);
	--shadow-white-2: 
		1px 0px 1px #fff, 0px 1px 1px #fff,
		1px 1px 1px #fff, -1px 0px 1px #fff,
		0px -1px 1px #fff, -1px -1px 1px #fff,
		2px 0px 2px #fff, 0px 2px 2px #fff,
		2px 2px 2px #fff, -2px 0px 2px #fff,
		0px -2px 2px #fff, -2px -2px 2px #fff;
	--shadow-ivory-2: 
		1px 0px 1px #f9eee2, 0px 1px 1px #f9eee2,
		1px 1px 1px #f9eee2, -1px 0px 1px #f9eee2,
		0px -1px 1px #f9eee2, -1px -1px 1px #f9eee2,
		2px 0px 2px #f9eee2, 0px 2px 2px #f9eee2,
		2px 2px 2px #f9eee2, -2px 0px 2px #f9eee2,
		0px -2px 2px #f9eee2, -2px -2px 2px #f9eee2;
}

/*///////////////////////////////////////////////////////////////*/
/* CSS Document */
article, aside, section, nav, header, footer { display: block; }
* { margin: 0; padding: 0; font-size: 100%;}
*, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body {
	position: relative;
	z-index: 0;
	color: var(--color-brown);
	font-family: 'M PLUS Rounded 1c', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', 'Osaka', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-weight: 500;
	line-height: 1.1;
	background-image: url(images/bg_cloud_left.png), url(images/bg_cloud_right.png), url(images/bg_sqdia.png), url(images/bg_dia.png),
	linear-gradient(to bottom, #f1e369, #fbdb83, #ffd693, #ffd1b1, #ffcec2, #ffcbd1);
	background-position: 0% 25%, 100% 5%, 50% 93%, 0% 0%, 0% 0%;
	background-attachment: scroll, scroll, scroll, fixed, fixed;
	background-repeat: no-repeat, no-repeat, repeat-x, repeat, repeat;
	background-size: 30vw, 30vw, auto, auto, auto;
}

img:not(.nrs) {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
}
a {
	color: var(--color-blue);
	text-decoration: none;
	transition: .2s;
	
	&:hover {
		color: var(--color-pink);
	}
}
a.btn {
	display: inline-block;
	min-width: 4rem;
	padding: 0.5rem 1rem;
	color: #fff;
	font-weight: 800;
	text-align: center;
	line-height: 1;
	background-color: var(--color-red);
	text-decoration: none;
	transition: .2s;
}
a.btn:hover {
	background-color: var(--color-mauvetaupe);
}
a img {
	transition: .2s;
}
a:hover:not(.roll):not(.menu_cs) img {
	opacity: .5;
	transition: .2s;
}

.nolink {
    color: var(--color-brown);
    pointer-events: none;
    text-decoration: none;
}

/*///////////////////////////////////////////////////////////////
	common class
/////////////////////////////////////////////////////////////////*/
/* mobile display none */
.mdn { display: none; }
.mdnbr br { display: none; } 
br.nbr { display: none; }
/* mobile display visible */
.mdv { display: block; }
.mdvbr br { display: inline; }

.t_s {
	display: inline-block;
	font-size: 80%;
	line-height: 1.1;
}
.t_bold {
	font-weight: 700;
}
.t_strong {
	font-weight: 900;
}
.t_blc span {
	display: inline-block;
}
.t_red {
	color: var(--color-red);
}

hr.line_ribbon {
	display: block;
	width: 100%;
	height: min(12vw, 58px);
	margin-bottom: var(--sp-5);
	border: 0;
	background: url(images/ic_ribbon.png) no-repeat 50% 50%;
	background-size: contain;
}

#wrapper {
	width: var(--wd-1000);
	margin: 0 auto;
	
	> * {
		display: grid;
		justify-items: center;
		width: 100%;
		
		> * {
			width: var(--wd-800);
		}
	}
}

#topImg_area {
	position: relative;
	
	#topImg {
		position: relative;
	
		a#linkAnim {
			position: absolute;
			top: 1.8%;
			left: 2%;
			width: min(20%, 100px);
		}
	}
	
	&::before, &::after {
		content: "";
		position: absolute;
		z-index: 2;
		width: min(20%, 173px);
		height: min(10%, 50px);
		background-repeat: no-repeat;
		background-size: contain;
	}
	&::before {
		top: 32%;
		left: 0;
		background-image: url(images/ic_clowd_left.png);
		background-position: 0 0;
	}
	&::after {
		top: 25%;
		right: 0;
		background-image: url(images/ic_clowd_right.png);
		background-position: 0 0;
	}
	
	#topCopy {
		position: absolute;
		top: 52%;
		left: 0%;
		width: min(60%, 500px);
		transform: rotate(-8deg);
	}
	#topOpendate {
		position: absolute;
		top: 40%;
		right: 0;
		width: min(38%, 282px);
	}
}

#bottom_area {
	position: relative;
	
	&::before, &::after {
		content: "";
		position: absolute;
		bottom: 0;
		z-index: 0;
		display: block;
		height: min(80%, 490px);
		background-repeat: no-repeat;
		background-size: contain;
	}
	&::before {
		left: 0;
		width: min(40%, 324px);
		background-image: url(images/teaser/silhouette_left.png);
		background-position: 0% 50%;
	}
	&::after {
		right: 0;
		width: min(35%, 257px);
		background-image: url(images/teaser/silhouette_right.png);
		background-position: 100% 50%;
	}
	
	> div {
		display: grid;
		justify-items: center;
		background-color: #fff;
		
		> * {
			z-index: 1;
		}
	}
	
	#releaseDate {
		font-size: clamp(1.2rem, 0.727rem + 2.36vw, 2.5rem);
		font-weight: 900;
		text-shadow: var(--shadow-white-2);
	}
	#credit {
		dl {
			margin: var(--sp-7) var(--sp-1) var(--sp-3);
			text-align: center;
			
			dt {
				display: inline-block;
				min-width: 7rem;
				margin-bottom: var(--sp-3);
				padding: var(--sp-1) var(--sp-3);
				color: #fff;
				font-size: clamp(1rem, 0.864rem + 0.68vw, 1.375rem);
				background-color: var(--color-terracotta);
				border-radius: 30px;
			}
			
			dd {
				margin-bottom: var(--sp-4);
				font-size: clamp(1.3rem, 1.091rem + 1.05vw, 1.875rem);
				font-weight: 900;
				line-height: 1.5;
				text-shadow: var(--shadow-white-2);
			}
			
		}
		> figure {
			padding-bottom: var(--sp-7);
		}
	}
}

#footer {
	> * {
		display: grid;
		justify-items: center;
		background-color: #fff;
	}
	.sns_link {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--sp-2);
		padding-top:  var(--sp-3);
		
		a.btn {
			font-size: clamp(1rem, 0.864rem + 0.68vw, 1.375rem);
		}
	}
	> footer {
		padding: var(--sp-5) var(--sp-1) var(--sp-3);
		text-align: center;
		font-size: clamp(0.7rem, 0.545rem + 0.77vw, 1.125rem);
	}
}


@media(667px <= width < 959px){
/*	Tablet -- 667px ~ 959px	*/

	/*/////////// ■common class■ ///////////*/
	
	
}/*	Tablet -- end */

@media(667px <= width){
/*	Tablet&PC -- 667px ~	*/
	#bottom_area {
		&::before, &::after {
			height: min(100%, 490px);
		}
		#credit {
			dl {
				dd {
					display: flex;
					flex-direction: column;
					justify-content: center;
					gap: 0.5rem;
					
					> div {
						display: flex;
						justify-content: center;
						gap: 2rem;
					}
				}
			}
		}
	}

}/*	Tablet&PC -- end */

@media(960px <= width){
/*	PC -- 960px ~	*/
	body {}
	/*/////////// ■common class■ ///////////*/
	
	/* mobile display none */
	.mdn { display: block; }
	.mdnbr br { display: inline; } 
	br.nbr { display: inline; }
	.mdnsp { display: inline; }
	/* mobile display visible */
	.mdv { display: none; }
	.mdvbr br { display: none; }
	
	/*/////////// ■Teaser■ ///////////*/
	#topImg_area {
	
		#topCopy {
			left: 6%;
		}
	}
	
	/*/////////// ■Footer■ ///////////*/
	#footer {
	}
}/*	PC -- end */


/*///////////////////////////////////////////////////////////////
	Animation
/////////////////////////////////////////////////////////////////*/
@-webkit-keyframes flash {
	from, 50%, to { opacity: 1; }
	 25%, 75% { opacity: 0.2; }
}
@keyframes flash {
	from, 50%, to { opacity: 1; }
	 25%, 75% { opacity: 0.2; }
}