@import url('//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css');
@import url('//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css');
@import url('//fonts.googleapis.com/css?family=Noto+Sans+JP:500&display=swap');

html,
body {
	height: 100vh;
	overflow: hidden;
}
html.show,
body.show {
	height: auto;
	overflow: auto;
	overflow-x: hidden;
}
body {
	background: url(../img/diamond_bg.png);
}
@media screen and (max-width: 767px) {
	body {
		background-size: 30%;
	}
}

.loading {
	position: fixed;
	display: block;
	width: 99vw;
	height: 100vh;
	overflow: hidden;
	background: url(../img/loading.gif) no-repeat center 43%;
	animation: loadingIn 1s ease-in 0s 1 normal forwards;
}
.loading.hide {
	opacity: 0;
	animation: loadingOut 1.5s ease-in 0s 1 normal forwards;
}
@media screen and (max-width: 767px) {
	.loading {
		background-size: 75%;
	}
}
@keyframes loadingIn {
	99%,to { opacity: 1; }
}
@keyframes loadingOut {
	0% { opacity:1; }
	99%,to { opacity:0; display:none; visibility:hidden; }
}

.slideWrap {
	height: 100vh;
	/* position: relative; */
	overflow-x: hidden;
}
header .dlApp {
	position: absolute;
	right: 3px;
	top: 3px;
	width: 20vw;
	z-index: 10000;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	opacity: 0;
}
header .dlApp.show {
	opacity: 1;
	transition: opacity 2.5s ease-out 1s;
}
header .dlApp a {
	width: 50%;
	display: block;
	text-align: center;
	max-width: 134px;
}
header .dlApp .externalBnr {
	width: 100%;
	margin-top: 2px;
	margin-right: 2px;
	display: block;
	z-index: 10000;
	max-width: 264px;
}
header .dlApp .externalBnr.fixed {
	position: fixed;
	top: 3px;
	right: 3px;
	animation: extBnr 1s ease 0s 1 normal forwards;
	width: 34vw;
}
header .dlApp .externalBnr a {
	width: 100%;
	max-width: 100%;
}
header .dlApp .externalBnr .sns {
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding-right: .5vw;
}
header .dlApp .externalBnr .sns li {
	padding: .75vw 0 0 0;
	flex-basis: auto;
}

@media screen and (max-width: 767px) {
	header .dlApp {
		/* width: 62vw; */
		width: 42vw;
	}
	header .dlApp .externalBnr {
		width: 20vmax;
		/* width: 30vmax; */
	}
	header .dlApp .externalBnr .sns li {
		padding: 1.25vw 0 0 0;
		width: 25%;
	}
}
@keyframes extBnr {
	0% {
		transform: translate3d(0,-9vw,0);
	}
	99%,to {
		transform: translate3d(0,0,0);
	}
}

.main_logo {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: 8vh;
	width: 90vmin;
	z-index: 2;
	text-align: center;
	opacity: 0;
	transform: translate3d(0,20px,0);
}
.main_logo.show {
	opacity: 1;
	transform: translate3d(0,0,0);
	transition: opacity 2s ease-out 1.5s,
				transform 2s ease-out 1.5s;
}

.copy_open {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	top: 50vh;
	width: 100vmin;
	z-index: 2;
	opacity: 0;
	transform: translate3d(0,20px,0);
}
.copy_open.show {
	opacity: 1;
	transform: translate3d(0,0,0);
	transition: opacity 2.5s ease-out 1.5s,
				transform 2.5s ease-out 1.5s;
}

.btn {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: 63vh;
	width: 53vmin;
	z-index: 2;
	opacity: 0;
	transform: translate3d(0,20px,0);
	cursor: pointer;
}
.btn.show {
	opacity: 1;
	transform: translate3d(0,0,0);
	transition: opacity 2.5s ease-out 1.5s,
				transform 2.5s ease-out 1.5s;
}

.slide {
	display: none;
}
.slide .item {
	width: 34.55vh;
	min-width: 34.55vh;
	margin: 2px 2px 2px 2px;
	height: calc( 20vh - 2px - 2px );
	border-radius: 5px;
	opacity: 0;
	animation: fade 3s ease .5s normal forwards;
	/* animation: blur 3s ease .5s normal forwards; */
}

.message {
	height: 20vh;
	margin: 0 auto;
	display: flex;
	align-items: center;
	opacity: 0;
}
.message.show {
	opacity: 1;
	transition: opacity 2.5s ease-out 1s;
}
.message img {
	display: block;
	margin: 0 auto;
	max-height: 17vh;
}
@media screen and (max-width: 767px) {
	.main_logo {
		top: 22vh;
		width: 90vmin;
	}
	.copy_open {
		top: 53vh;
		width: 94vmin;
	}
	.btn {
		top: 65vh;
		width: 66vmin;
	}
	.message {
		width: 94%;
	}
}
@keyframes fade {
	0% { opacity: 0; }
	99%,to { opacity: .45; }
}
@keyframes blur {
	0% { opacity: 0; filter: blur(50px);}
	99%,to { opacity: .45; filter: blur(0);}
}

article {
	width: 100%;
	opacity: 0;
	z-index: 0;
}
article.show {
	opacity: 1;
	transition: opacity 2.5s ease-out 1s;
}
article > .headline {
	display: flex;
	align-items: flex-start;
	margin-top: -1%;
	margin-bottom: -1%;
}
article > .headline:nth-of-type(1) {
	margin-top: 0;
}
article > .headline::before,
article > .headline::after {
	content: '';
	margin-top: 9px;
	display: block;
	background: #0980e5;
	height: 67px;
	width: auto;
	flex-basis: auto;
	flex-grow: 1;
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;
}
@media screen and (max-width: 767px) {
	article > .headline {
		/* margin-top: -2%; */
	}
	article > .headline {
		height: 8.5vw;
	}
}

.sec {
	width: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 2%;
	padding-bottom: .005%;
}
.func1 { background-image: url(../img/pc/func1/func1_bg.png); }
.func2 { background-image: url(../img/pc/func2/func2_bg.png); }
.func3 { background-image: url(../img/pc/func3/func3_bg.png); }
.func4 { background-image: url(../img/pc/func4/func4_bg.png); }
.func5 { background-image: url(../img/pc/func5/func5_bg.png); padding-bottom: 2%; }
@media screen and (max-width: 767px) {
	.func1 { background-image: url(../img/sp/func1/func1_bg.png); }
	.func2 { background-image: url(../img/sp/func2/func2_bg.png); }
	.func3 { background-image: url(../img/sp/func3/func3_bg.png); }
	.func4 { background-image: url(../img/sp/func4/func4_bg.png); }
}

.sec > .headline {
	text-align: center;
	display: block;
	margin: 0 auto;
}
.sec > .headline .title {
	display: block;
	margin: 0 auto;
}
.sec.func5 > .headline .title {
	margin: -1% 0;
}

.sec > .desc {
	text-align: center;
	display: block;
	margin: 1% auto 1% auto;
}
.sectionInner {
	width: 75%;
	max-width: 1272px;
	margin: 0 auto;
	position: relative;
}
@media screen and (max-width: 767px) {
	.sec {
		padding-top: 3%;
	}
	.func5 { padding-bottom: 7%; }

	.sec > .headline picture img {
		height: 100%;
	}
	.sec > .headline .title {
		height: 15vw;
	}
	.sec > .headline .titleBar {
		height: 2.2vw;
	}
	.sec > .desc {
		width: 85%;
		margin: 5% auto 1% auto;
	}
	.sectionInner {
		width: 94%;
	}
}

.func1 .sectionInner { margin: 5% auto 6% auto; }
.func2 .sectionInner { margin: 7% auto 12% auto; }
.func3 .sectionInner { margin: 9% auto 5% auto; }
.func4 .sectionInner { margin: 7% auto 5.5% auto; }
.func5 .sectionInner { margin: 3% auto 0% auto; }
@media screen and (max-width: 767px) {
	.func1 .sectionInner { margin: 16% auto 13% auto; }
	.func2 .sectionInner { margin: 13% auto 18% auto }
	.func3 .sectionInner { margin: 25% auto 18% auto }
	.func4 .sectionInner { margin: 20% auto 16% auto; }
	.func5 .sectionInner { margin: 9% auto 5% auto }
}

.sectionInner .bub {
	position: absolute;
	z-index: 1;
	width: 32%;
	display: block;
}
.func1 .sectionInner .bub1 { top:-13%; left:-1%; }
.func1 .sectionInner .bub2 { bottom:-9%; right:0; }
.func2 .sectionInner .bub1 { top:-15%; left:-2%; }
.func2 .sectionInner .bub2 { bottom:-13%; right:-.5%; width:36%; }
.func3 .sectionInner .bub1 { top: -19%; left: -2%; }
.func3 .sectionInner .bub2 { top:-15%; right: -1.5%; }
.func3 .sectionInner .bub3 { bottom:-7%; right: 0; }
.func4 .sectionInner .bub1 { top:-18%; left: -2%; }
.func4 .sectionInner .bub2 { bottom:-9%; right: -2%; }
@media screen and (max-width: 767px) {
	.func1 .sectionInner .bub1 { top:-22%; left:-3%; width:49%; }
	.func1 .sectionInner .bub2 { bottom:-11%; right:-3%; width:50%; }
	.func2 .sectionInner .bub1 { top:-21%; left:-4%; width:43%; }
	.func2 .sectionInner .bub2 { bottom:-21%; right:-3%; width:56%; }
	.func3 .sectionInner .bub1 { top:-34%; left:-2.5%; width:49%; }
	.func3 .sectionInner .bub2 { top:-30%; right:-3%; width:53%; }
	.func3 .sectionInner .bub3 { bottom:-22%; right:-3%; width:60%; }
	.func4 .sectionInner .bub1 { top:-25%; left:-4%; width:49%; }
	.func4 .sectionInner .bub2 { bottom:-20%; right:-4%; width:57%; }
}

.content {
	display: block;
	position: absolute;
}
.content.vid {
	margin: 2% 0 0 3%;
	width: 88%;
	padding: 0;
}
.content.vid::before {
	content: '';
	display: block;
	padding-top: calc( 100% / 16 * 9 );
}
.content.vid iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
.content.carousel {
	margin: 2% 0 0 3%;
	width: 88%;
	padding: 0;
}

.slick-dots {
	bottom: 1.5vw
}
.slick-dots li button:before {
	font-size: 14px;
	color: #fff;
	opacity: .75;
	filter: drop-shadow(0px 0px 3px rgba(0,0,0,.5));
}
.slick-dots li.slick-active button:before {
	filter: drop-shadow(0px 0px 3px rgba(255,255,255,.75));
}

.func2 .slick-dots li.slick-active button:before {
	color: #0980e5;
}
.func3 .slick-dots li.slick-active button:before {
	color: #a5821c;
}
.func4 .slick-dots li.slick-active button:before {
	color: #fc9500;
}

.indev {
	width: 25%;
	margin-left: 3%;
}
@media screen and (max-width: 767px) {
	.indev {
		width: 40%;
		margin-left: 3%;
	}
}

.func0 .sectionInner {
	margin: 3% auto 1% auto;
}
.func0 .content.comingsoon {
	margin: 2% 0 0 3%;
	width: 88%;
	padding: 0;
}
.func0 .notes {
	width: 75%;
	margin: 0 auto;
	display: block;
	padding: 0 15% 0 0;
}
@media screen and (max-width: 767px) {
	.func0 .notes {
		width: 94%;
		padding: 0 29% 0 0;
	}
}

footer {
	margin: 0 auto;
	position: relative;
	padding: 7% 0 7% 0;
}
footer .headline {
	text-align: center;
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 50%;
}
footer .detail {
	margin: 0 auto;
	width: 100%;
	max-width: 86%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5% 0 5% 0;
}
footer .ico {
	padding-right: 1.5%;
	display: inline-block;
	width: 20vmin;
	text-align: center;
}
footer .detail ul {
	list-style: none;
	line-height: 1.65;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2vmin;
}
footer .dlApp {
	display: flex;
	justify-content: center;
	margin: 0 auto;
}
footer .dlApp a {
	margin: 0 1%;
}

@media screen and (max-width: 767px) {
	footer {
		padding: 13% 0 10% 0;
	}
	footer .detail {
		padding: 9% 0 2.5% 0;
	}
	footer .detail ul {
		font-size: 2.5vmin;
	}
	footer .ico {
		width: 17vmin;
	}
	footer .dlApp {
		width: 60%;
	}
}