@charset "UTF-8";
/* CSS Document */
html,
body {
    padding: 0;
    margin: 0;
    background: #222;
	width: 100%;
	height: 100%;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 2.5vw;
}

img {
	width: 100%;
	border: none;
}
ul,li {
	list-style: none;
	margin: 0;
	padding: 0;
}
a {
	text-decoration: none;
	color: #000;
}
h1,h2,h3,h4,p {
	margin: 0;
	padding: 0;
}


.js-loader {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: visible;
  opacity: 1;
  background:#fff;
  transition: opacity 1s, visibility 1s;
  z-index: 10000;
}
.is-loaded .js-loader {
  visibility: hidden;
  opacity: 0;
}

.js-loader-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height:100%;
}
.is-loaded .js-loader-progress {
  visibility: hidden;
  opacity: 0;
}
.js-loader-progress-bar.is-reverse {
  background: none;
  height: 100%;
  width: 100%;
  transition: width .4s;
	position: absolute;
	bottom: 0;
	right: 0;
}
.js-loader-progress-bar.is-normal {
  background: #000;
  height: 1px;
  width: 0%;
  transition: width .4s;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -0.5px;
	
}
.js-loader-progress-number {
  text-align: right;
  font-size: 14px;
  width: 100%;
  margin-top: 10px;
	letter-spacing: 2px;
	box-sizing: border-box;
	z-index: 10;
	color: #000;
	position: absolute;
	top: 55%;
	right: 5%;
}
.js-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 10%;
	z-index: 100;
	mix-blend-mode: difference;
}



#br {
	width: 100%;
	height: 100%;
	position: relative;
	transition: 1s all 0s ease;
}

.pcv {
	display: none!important;
}
@media only screen and (min-width: 961px) {
	html,
	body {
		background: #fff;
	}
	.pcv {
		display: block!important;
	}
	.spv {
		display: none!important;
	}
}

.book-swiper {
  padding-right: 2%;
}
.swiper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
	margin:0 auto;
	box-sizing: border-box;
}
.swiper-slide {
	width: 98%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	position: relative;
	pointer-events:none;
}



.swiper-slide-prev {
}
.swiper-slide {
	transform: scale(1);
	filter: blur(0);
	opacity: 0.5;
	transition: 0.3s;
}
.swiper-slide-active {
	transform: scale(1);
	filter: blur(0);
	opacity: 1;
	z-index: 2;
}
.swiper-slide:not(.swiper-slide-active) {
  pointer-events: none;
}

.swiper-slide-active {
  pointer-events: auto;
  z-index: 999 !important;
}

.swiper-slide-prev,
.swiper-slide-next {
	pointer-events: auto!important;;
  z-index: 2;
}
.swiper {
  perspective: 1000px;
}

.swiper-slide {
  transform-style: flat !important;
}
.nav {
	position: fixed;
	bottom: 2vw;
	left: 2vw;
	width: 3vw;
	height: 6vw;
}
.swiper-button-next {
	top: 0!important;
	left: 0;
	right: 0;
	width: 100%;
	margin: 0!important;
	background: url("../img/arrow_next.svg") no-repeat center;
	background-size: 100%;
	
}
.swiper-button-prev {
	top: auto!important;
	bottom: 0!important;
	left: 0;
	right: 0;
	width: 100%;
	margin: 0!important;
	background: url("../img/arrow_prev.svg") no-repeat center;
	background-size: 100%;
	
}
.swiper-button-next svg,.swiper-button-prev svg {
	display: none;
}
.pc_tit {
	position: fixed;
	top: 2vw;
	left: 2vw;
	width: 2vw;
}
@media only screen and (min-width: 961px) {
	.book-swiper {
	  padding-right: 0;
		margin: 0 auto;
	}
/*	.swiper {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 134vh;
		max-width: 100%;
		height: 98%;
	}*/
.swiper {
	position: fixed;
	top: 50%;
	left: auto;
	right:1vh;
	transform: translate(0%, -50%);

	aspect-ratio: 140 / 98;

	width: min(94vw, calc(98vh * (140 / 98)));
	height: auto;
}
	.swiper-slide {
		width: 100%;
		z-index: 999;
		box-sizing: border-box;
	}

	.swiper-slide {
		filter: blur(0);
		opacity: 1;
	}
	.swiper-slide-active {
		filter: blur(0);
	}

	.swiper-slide-prev,
	.swiper-slide-next {
	  z-index: 999;
	}
}

/**/
.top_box .head {
	width: 100%;
	height: 35%;
	position: relative;
}
.top_box h1 {
	width: 65%;
	position: absolute;
	top: -2px;
	left: -6px;
	line-height: 0;
}
.top_box .title {
	width:30%;
	position: absolute;
	bottom: 5%;
	right: 5%;
}
.top_box .title h2 {
	width: 80%;
	margin-bottom: 5%;
	margin-left: 20%;
}
.top_box .title h2 img {
	display: block;
	width: 100%;
	margin-bottom: 10%;
}
.top_box .title h2 span {
	display: block;
	width: 40%;
	margin-left: 60%;
}
.top_box .title p {
	font-size: 11px;
	line-height: 1.8;
	word-break: break-all;

}
@media only screen and (max-width: 767px) {
	.top_box h1 {
		width: 75%;
	}
	.top_box .title {
		width:45%;
	}
	.top_box .title p {
		font-size: 2vw;
		line-height: 1.8;

	}
}
@media only screen and (min-width: 961px) {
	.top_box .head {
		width: 100%;
		height: 30%;
		position: relative;
	}
	.top_box h1 {
		width: 90%;
	}
	.top_box .title {
		width:35%;
		position: absolute;
		right: 10%;
	}
	.top_box .title h2 {
		width: 90%;
		margin-bottom: 5%;
		margin-left: 10%;
	}
	.top_box .title p {
		font-size: 1.1vh;

	}
	
}
.top_box .visual {
	width: 100%;
	height: 65%;
	position: absolute;
	bottom: 0;
	left: 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 4px;
}

.top_box .visual li {
	height: 100%;
	position: relative;
}
.top_box .visual li:nth-of-type(1) {
	background: url("../img/visual_main-01.webp") no-repeat center;
	background-size: cover;
}
.top_box .visual li:nth-of-type(2) {
	background: url("../img/visual_main-02.webp") no-repeat center;
	background-size: cover;
}
.top_box .visual li:nth-of-type(3) {
	background: url("../img/visual_main-03.webp") no-repeat center;
	background-size: cover;
}
.top_box .visual li:nth-of-type(4) {
	background: url("../img/visual_main-04.webp") no-repeat center;
	background-size: cover;
}
.top_box .visual li:nth-of-type(5) {
	background: url("../img/visual_main-05.webp") no-repeat center;
	background-size: cover;
}
.top_box .visual li:nth-of-type(6) {
	background: url("../img/visual_main-06.webp") no-repeat center;
	background-size: cover;
}
.top_box .visual li:nth-of-type(7) {
	background: url("../img/visual_main-07.webp") no-repeat center;
	background-size: cover;
}
.top_box .visual li:nth-of-type(8) {
	background: url("../img/visual_main-08.webp") no-repeat center;
	background-size: cover;
}
.top_box .visual li:nth-of-type(9) {
	background: url("../img/visual_main-09.webp") no-repeat center;
	background-size: cover;
}
@media only screen and (min-width: 961px) {
	.top_box .visual {
		width: 100%;
		height: 65%;
		grid-template-columns: 1fr 1fr;
		grid-gap: 2px;
	}
	
}



.inner .identity {
	position: absolute;
	bottom: 5%;
	left: 5%;
	width: 90%;
	text-align: left;
	color: #FFF;
}

.inner .identity h3 {
	width: 15%;
	margin-bottom: 2%;
}
.inner .identity p {
	font-size: 10px;
	line-height: 2;
	word-break: break-all;
}

.inner .txt h3 {
	position: absolute;
	top: 0%;
	right: 0%;
	width:40%;
	text-align: left;
	color: #FFF;
}
@media only screen and (max-width: 767px) {
	.inner .identity p {
		font-size: 2vw;

	}
}
@media only screen and (min-width: 961px) {
	.inner .identity p {
		font-size: 1.1vh;

	}
	
}

/**/
.top {
	height: 5svh;
	width: 96%;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left:2%;
	z-index: 10

}
.top .logo {
	width: 6svh;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0,-50%);
	line-height: 0;
}
.top .tit {
	width: 8svh;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0,-50%);
	line-height: 0;
}

.bottom {
	margin: 0 auto;
	width: 96%;
	height: 8svh;
	position: absolute;
	bottom: 0;
	left: 2%;
	z-index: 200;
}
.bottom.invert {
	filter: invert(1)
}
.bottom ul {
	position: relative;
	text-align: center;
}
.bottom li {
	display: inline-block;
}

.bottom li a,.bottom li p {
	font-size: 9px;
	padding: 5px 15px 5px 0;
	margin-left: 10px;
	font-weight: 500;
	position: relative;
}
.list li a span, .list li p span{
	font-size:9px;
	position: relative;
	display: inline-block;
	margin-left: 5px;
	font-weight: 400;
}
.bottom li a::before {
	content: "";
	background: url("../img/btn.svg") no-repeat center;
	background-size: 10px 10px;
	width: 10px;
	height: 10px;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0,-50%);
}

.bottom .no {
	text-align: center;
	font-size: 1vh;
	position: absolute;
	bottom: 1vh;
	left: 0;
	width: 100%;
}
@media only screen and (max-width: 767px) {
	.bottom {
		margin: 0 auto;
		width: 96%;
		height: 10svh;
	}
	.bottom li a,.bottom li p {
		font-size: 8px;
	}
	.list li a span, .list li p span{
		font-size:8px;
	}
}
@media only screen and (min-width: 961px) {
	.top .logo {
		width: 5svh;
		position: absolute;
		top: 5%;
		left: 0;
		transform: translate(0);
	}
	.top .tit {
		width: 7svh;
		position: absolute;
		top: 5%;
		right: 0;
		transform: translate(0);
	}
}

.inner {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	box-sizing: border-box;
	padding: 5svh 0 8svh;
	overflow: hidden;
}
.inner.top_box {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	box-sizing: border-box;
	padding: 0;
}
.full {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	box-sizing: border-box;
	padding: 0 0;
}
.inner::before,.full::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("../img/bg.webp");
	background-size: 500px;
	opacity: 0.7;
	mix-blend-mode: multiply;
	z-index: 100

}
.copy {
	width: 80%;
	height: 22%;
	margin: 0 auto;
}
.copy h3 {
	width: 60%;
	margin: 0 auto;
	line-height: 0;
}
.copy h4 {
	font-size: 1.2vh;
	text-align: center;
	margin: 1.8svh auto;
}
.copy p {
	font-size: 1vh;
	line-height: 1.6
}
@media only screen and (max-width: 767px) {
	.inner {
		padding: 5svh 0 8svh;
	}
	.copy {
		width: 90%;
		height: 22%;
		margin: 0 auto;
	}
}
.page {
	position: relative;
	margin: 0 auto 0;
	width: 100%;
	height: 78%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.image {
	position: relative;
	margin:5% 7% 0;
	width: 86%;
	height: 92%;
	box-sizing: border-box;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
@media only screen and (min-width: 961px) {
	.image {
		width: 86%;
		height: 94%;
	}	
}

.full .image {
	position: relative;
	margin:0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.howto {
	position: relative;
	margin:5svh 0% 0;
	width: 100%;
	height: 90svh;
	box-sizing: border-box;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.b_logo {
	width: 90%;
	position: absolute;
	bottom: 0;
	left: 5%;
	line-height: 0;
	filter: invert(1);
	z-index: 10
}
.v_logo {
	width: 15%;
	position: absolute;
	top: 5%;
	right: 5%;
	line-height: 0;
	z-index: 10
}

#page-02 .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("../img/page-13.webp") no-repeat right;
	background-size: cover;
	
	
}
#page-03 .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("../img/page-14.webp") no-repeat left;
	background-size: cover;
	
	
}

#page-16,#page-17 {

	height: 100svh;
	position: relative;
}
#page-16 .info,#page-17 .info {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 45%;
	transform: translate(-50%,-50%);
	z-index: 100
}
#page-16 .info .logo {

}
#page-16 .info .link,#page-17 .info .link {
	width: 30%;
	margin: 15% auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 30%;filter: invert(1)
}
#page-16 .info .copyright,#page-17 .info .copyright {
	color: #000;
	font-size: 9px;
	text-align: center;
}
@media only screen and (max-width: 767px) {
	
	
}