@charset "UTF-8";

body {
	background-image: url("../image/back.png");
	background-size: 3840px 2160px;
	background-repeat: no-repeat;
	/* background-color: #4e4e4e; */
	width: 3840px;
	height: 2160px;
	overflow: hidden;

}


.logo {
	width: 4%;
	margin-top: 3%;
	margin-left: 8%;
}

.logo img {
	width: 100%;
}

.wrap {
	display: flex;
	margin-left: 25%;
}

.view {
	position: relative;
	overflow: hidden;
	width: 30%;
	margin-top: 2%;
}

.view img {
	position: absolute;
	width: 100%;
	opacity: 0;
	transition: .8s;
}


.view img.show {
	opacity: 1;
}

.explanation {
	width: 30%;
	margin-top: 10%;
	margin-left: 5%;
}

.sub_box {
	width: 90%;
	height: 100%;
	margin-left: 10%;
}

.img_box img {
	margin-top: 7%;
	width: 100%;
}

.share_box {
	display: flex;
	margin-top: 35%;
	width: 100%;
	height: 20%;
}

.share_box .qr {
	height: 100%;
}

.share_box .qr img {
	max-width: 135px;
	height: 100%;
}

.share_box .link_box {
	width: 70%;
	height: 10%;
}

.link_box {
	margin-left: 2%;
	height: 100%;
}

.link_box .img_box {
	width: 70%;
}

.btn_wrap {
	margin-top: 5%;
}

.btn_wrap img {
	width: 40%;
}

.sp {
	display: none;
}

@media screen and (max-width:3200px) {
	body {
		background-size: 3200px 1800px;
		width: 3200px;
		height: 1800px;
	}
}

@media screen and (max-width:2560px) {
	body {
		background-size: 2560px 1440px;
		width: 2560px;
		height: 1440px;
	}
}

@media screen and (max-width:2048px) {
	body {
		background-size: 2048px 1152px;
		width: 2048px;
		height: 1152px;
	}
}

@media screen and (max-width:1920px) {
	body {
		background-size: 1920px 1080px;
		width: 1920px;
		height: 1080px;
	}
}

@media screen and (max-width:1366px) {
	body {
		background-size: 1366px 768px;
		width: 1366px;
		height: 768px;
	}
}

@media screen and (max-width:810px) {
	body {
		background-image: url("../image/back_sp.png");
		background-size: cover;
		background-repeat: no-repeat;
		width: auto;
		overflow: scroll;
	}

	.sp {
		display: block;
	}

	.logo {
		width: 40px;
		margin-top: 40px;
		margin-left: 50px;
	}

	.wrap {
		display: none;
	}

	.sp {
		width: 100%;
		height: 100vh
	}

	.sp .title {
		margin-top: 5%;
		text-align: center;
	}

	.sp .title img {
		width: 50%;
	}


	.sp .view {
		position: static;
		width: 100%;
	}

	.sp .view img {
		width: 80%;
		margin: 10% 10%;
	}

	.sp .btn_wrap {
		margin-top: 120%;
		text-align: center;
	}

	.sp .btn_wrap img {
		width: 30%;
	}
}