@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@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;
*/

/* CSS Document */
article, aside, section, nav, header, footer { display: block; }
* { margin: 0; padding: 0; font-size: 100%;}
*, *:after, *::before { box-sizing: border-box; }
body {
	position: relative;
	z-index: 0;
	color: #787C95;
	font-family: 'M PLUS Rounded 1c', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', 'Osaka', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	
/*	font-size: clamp(1.2rem, 0.937rem + 1.32vw, 2.5rem);*/
	font-weight: 400;
	line-height: 1;
	background-color: #fff;
	background: url(images/bg_1.jpg) fixed;
}
img:not(.nrs) {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
}
a {
	color: #1879CB;
	text-decoration: none;
	transition: .2s;
}
a:hover {
	color: #F6FA00;
}
a img {
	transition: .2s;
}
a:hover:not(.roll) img {
	opacity: .5;
	transition: .2s;
}

a.btn {
	position: relative;
	z-index: 0;
	display: inline-block;
	min-width: min(20vw, 6rem);
	padding: max(0.5vw, 5px);
	color: #fff;
	font-size: clamp(1rem, 0.939rem + 0.3vw, 1.3rem);
	font-weight: 700;
	text-align: center;
	background-color: #E95477;
	border-radius: 3px;
/*	&:hover {
		color: #E95477;
	}*/
	&::after {
		display: block;
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 0;
		height: 100%;
		background: #333;
		transition: .3s;
		border-radius: 3px;
	}
	&:hover::after {
		width: 100%;
	}
}
/*a.btn:hover {
	color: #1879CB;
	background-color: #F6FA00;
}:/

.nolink {
    color: #54464f;
    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; } 


.lace {
	position: relative;
	padding: 0;
	
	&::before, &::after {
		content: "";
		position: absolute;
		z-index: 1;
		display: block;
		width: min(100%, 1500px);
		height: min(1.8vw, 14px);
		background-image: url(images/deco_lace.png);
		background-repeat: repeat-x;
		background-size: contain;
	}
	&::before {
		top: max(-1.7vw, -14px);
	}
	&::after {
		bottom: max(-1.7vw, -14px);
		transform: scale(1, -1);
	}
}

dl {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	gap: 5vw;
	padding: 0 1vw;
/*	border: 1px dashed gray;*/

	dt {
/*		border: 1px solid red;*/
		> span {
			display: inline-block;
			min-width: 7rem;
			font-size: clamp(1rem, 0.797rem + 1.01vw, 2rem);
			font-weight: 800;
			padding: 0.5rem 1rem;
			text-align: center;
			color: #DE7AA7;
			border-radius: 30px;
			background-color: #F6FA00;
		}
	}
	dd {
		font-size: clamp(1.4rem, 1.076rem + 1.62vw, 3rem);
	}

}

/*///////////////////////////////////////////////////////////////
	teaser
/////////////////////////////////////////////////////////////////*/
#wrapper {
	width: min(90vw, 1500px);
	margin: 0 auto;
	background-color: #fff;
}

#mainImg {
	position: relative;
	
	&::after {
		position: absolute;
		top: 3%;
		left: 2%;
		content: "";
		display: block;
		width: clamp(65px, 11vw, 154px);
		height: min(60%, 644px);
		background-image: url(images/teaser/copy_text.png);
		background-repeat: no-repeat;
		background-position: top center;
		background-size: contain;
	}
	
	#openDate {
		position: absolute;
		top: 35%;
		right: max(-3.5vw, -50px);
		width: min(30vw, 430px);
		
	}
}
#outline {
	padding: 0.1px;

	dl#credit {
		margin: min(8vw, 80px) auto;	
	}
	#release {
		margin-top: min(10vw, 50px);
		text-align: center;
		font-weight: 800;
		.product_type {
			display: flex;
			justify-content: center;
			gap: 1vw;
			> div {
				display: inline-block;
				padding: 0.2rem 0.5rem;
				font-size: clamp(0.8rem, 0.658rem + 0.71vw, 1.5rem);
				font-weight: 500;
				color: #3CC3AB;
				border: 2px solid #3CC3AB;
			}
		}
		.release_date {
			margin: min(2vw, 20px) 0;
			font-size: clamp(1.3rem, 0.956rem + 1.72vw, 3rem);
		}
		.os {
			font-size: clamp(1rem, 0.797rem + 1.01vw, 2rem);
		}
	}
	a#brandLink {
		display: block;
		width: min(30vw, 190px);
		margin: min(10vw, 50px) auto;
	}
	#snsLink {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1.5vw;
		margin: min(5vw, 50px) auto;
	}
}

/*///////////////////////////////////////////////////////////////
	Footer
/////////////////////////////////////////////////////////////////*/
#footer {
	width: 100%;
	padding: 3vw 1vw 2vw;
	background-color: #DE7AA7;

	footer {
		text-align: center;
		color: #fff;
		font-size: clamp(0.7rem, 0.619rem + 0.41vw, 1.1rem);
	}
}

@media(667px <= width < 960px){
/*	Tablet -- 667px ~ 959px	*/
	body {
	}
	/*/////////// ■common class■ ///////////*/
	.t-sm {
		font-size: 80%;
	}
}/*	Tablet -- 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; }
	
	.t-sm {
		font-size: 70%;
		line-height: 1.5;
	}
	
	dl {
		width: 80%;
		flex-direction: row;
		gap: 2.5vw 3vw;
		
		dt {
			width: 35%;
			text-align: right;
		}
		dd {
			width: calc(65% - 3vw);
		}
	}
	/*/////////// ■teaser■ ///////////*/
	
	
	/*/////////// ■Footer■ ///////////*/
	#footer {
	}
	
}/*	PC -- end */