@charset "UTF-8";
/* CSS Document */
.wrap{
  transition: all 0.6s ease;
	-webkit-transition: all 0.6s ease;
  opacity:0;
}
.wrap.active{
  opacity:1;
}
.slick-slide{
  outline:none;
}
img{
	vertical-align: top;
	width: 100%;
	height: auto;
}
.loading{
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);
	width: 8vw;
	height:  8vw;
}

html {
	width: 100%;
  height: 100%;
	padding:0;
	margin:0;
  font-size: 62.5%;
  position: relative;
}
body {
  height: 100%;
	background: #000;
	margin: 0;
	padding: 0;
	color:#fff;
	line-height:2;
	letter-spacing: 0.1em;
	font-family: ro-nikkatsu-sei-kai-std, serif;
  overflow: hidden;
  position: relative;
}
body.en{
	font-family: minion-3-display, serif;
}
div,article{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	width:100%;
	position: relative;
}
.w100p{
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
h1,h2,h3{
	font-family: ro-nikkatsu-sei-kai-std, serif;
	position: relative;
	z-index: 10;
	font-weight: 300;
  font-size: 3vw;
  margin-bottom: 0vw;
  padding: 0;
  line-height: 1.5;
}
.en h1,
.en h2,
.en h3{
  font-family: minion-3-display, serif;
  font-size: 2.4vw;
}
h2 strong{
  font-size: 4vw;
  font-weight: 300;
}

p{
	position: relative;
  font-family: ro-nikkatsu-sei-kai-std, serif;
  font-size: 1.4vw;
  margin: 1.2vw 0;
  line-height: 2;
  letter-spacing: 0.3rem;
}

p strong{
	font-size: 2.4vw;
  font-weight: 300;
}

.en p{
  font-size: 1.5vw;
  font-family: minion-3-display, serif;
}

.en p span{
	font-family: minion-3-display, serif;
}
em{
	font-style:normal;
}

.scrollify.current{
	
}
.w50p{
	width:50%;
}
.w55p{
	width:55%;
}
.w60p{
	width:60%;
}
.w70p{
	width:70%;
}
.w100p{
	width:100%;
}
.fc-black{
	color: #000;
}
.align-center{
	text-align: center;
}
.position-center{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);
}

.body-qr>div{
  position: relative;
  width: 100%;
  height: 100vh;
}
.body-qr h1{
  text-align: center;
  color: #fff;
  letter-spacing: 0.1em;
	font-family: ro-nikkatsu-sei-kai-std, serif;
  font-size: 4rem;
  position: absolute;
  top: 25%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.box-qr{
  display: grid;
  grid-template-columns: 1fr 1fr ;
  grid-template-rows:1fr;
  gap:100px;
  width: 30%;
  position: absolute;
  top: 50%;
   	left: 50%;
   	-webkit-transform: translate(-50%, -50%);
   	transform: translate(-50%, -50%);
}
.box-qr span{
    display: block;
    color: #fff;
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    border:solid 1px #ccc;
    padding: 5px;
    position: relative;
}
.box-qr span i{
    position: absolute;
    right: 10px;
    top: 50%;
	  -webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.box-qr a{
  text-decoration: none;
}
@keyframes img-show {
	0% {
		opacity: 0;
		width: 60vw;
	height: auto;
	}
	100% {
		opacity: 1;
		width: 50vw;
	height: auto;
	}
}
@keyframes show {
	0% {
		opacity: 0;
		
	}
	100% {
		opacity: 1;
	}
}
@keyframes hide {
	0% {
		opacity: 1;
		
	}
	100% {
		opacity: 0;
	}
}

@keyframes show-logo {
	0% {
		opacity: 0;
		filter: blur(2px);
	}
	100% {
		opacity: 0.65;
   filter: blur(0px);
	}
}
@keyframes show-logo2 {
	0% {
		opacity: 0;
		filter: blur(2px);
    width: 30vw;
	}
	100% {
		opacity: 0.6;
   filter: blur(0px);
    width: 20vw;
	}
}
@keyframes show-up {
	0% {
		opacity: 0;
    filter: blur(4px);
		-webkit-transform: translateY(100%);
	 transform: translateY(100%);
	}
  50% {
		opacity: 0;
    filter: blur(3px);
		-webkit-transform: translateY(50%);
	 transform: translateY(50%);
	}
	100% {
    filter: blur(0px);
		opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
	}
}
@keyframes page04anime{
  	0% {
		top:-20%;
	}
	100% {
		top:0%;
	}
}
@keyframes page06anime{
  	0% {
		bottom:-20%;
	}
	100% {
		bottom:0%;
	}
}
@keyframes bg-show {
	0% {
		transform: scale(1,1);
	}
	100% {
		transform: scale(1.25,1.25);
	}
}
@keyframes zoom-out {
	0% {
		transform: scale(1.25,1.25);
	}
	100% {
		transform: scale(1,1);
	}
}
@keyframes zoom-in {
	0% {
    transform: scale(1,1);
	}
	100% {
		transform: scale(1.15,1.15);
	}
}
@keyframes brightness {
	0% {
		 filter: brightness(100%);
	}
	100% {
     filter: brightness(250%);
	}
}

@keyframes story {
	0% {
		left:-15%;
	}
	100% {
		left:0%;
	}
}

.fs-2vw{
	font-size: 2vw;
}
.en .fs-2vw{
	font-size: 1.8vw;
}
.fs-3vw{
	font-size: 2.5vw;
}
.en .fs-3vw{
	font-size: 1.6vw;
}
.en .page-08 .fs-3vw{
	font-size: 2.4vw;
}
.text{
	position: absolute;
	z-index: 10;
}
.text span{
  opacity:0;
}
.anime .text span{
  animation-name:show;
  animation-duration:3s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
}

.en .text{
	font-size: 1.6vw;
	font-family: minion-3-display, serif;
}
.text.left-bottom{
	bottom: 5%;
	left: 5%;
}
.text.left-bottom7{
	bottom: 7%;
	left: 5%;
}
.text.left-bottom10{
	bottom: 10%;
	left: 10%;
}
.en .text.left-bottom7{
	bottom: 10%;
}
.text.left-top{
	top: 5%;
	left: 5%;
}
.text.left-center{
	top: 50%;
	left: 5%;
	-webkit-transform: translate(0%, -50%); /* Safari用 */
	transform: translate(0%, -50%);
}
.text.right-center{
	top: 50%;
	right: 5%;
	width: 100%;
	text-align: right;
	-webkit-transform: translate(0%, -50%); /* Safari用 */
	transform: translate(0%, -50%);
}
.text.center-center{
	text-align: center;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);
}

.text.right-bottom{
	bottom: 7%;
	text-align: right;
	right: 5%;
}
.en .text.right-bottom{
	bottom: 10%;
	text-align: right;
	right: 5%;
}
.text.right-top{
	top: 5%;
	right: 5%;
	text-align: right;
}
.text.center-bottom{
	text-align: center;
	width: 100%;
	bottom: 10%;
}

.text.shadow{
	text-shadow:0px 0px 0.8vw rgba(0,0,0,0.8),0px 0px 3vw rgba(0,0,0,0.6),0px 0px 1vw rgba(0,0,0,0.4);
}
.text.shadow-blue{
	text-shadow:0px 0px 0.5vw rgba(0,55,160,1),0px 0px 1vw rgba(0,55,160,1),0px 0px 1.5vw rgba(0,155,160,1);
}
.display-block{
	display: block;
}
.slider {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  list-style: none;
 }
.slide{
  overflow: hidden;
  width: 100%;
  height: 100vh;
  position: relative;
 }
.img-wrap{
 position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.imgLiquid{
  position: absolute;
  left: 0;
  top:0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.logo-text{
	width: 18vw;
	height: auto;
	z-index: 15;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);
  opacity:0;
}
.audio{
  width: 24px;
  height: 24px;
  z-index: 50;
  position: absolute;
  right: 20px;
  top:20px;
   background: url(/images/iconmonstr-sound-off-thin.svg) no-repeat;
  background-size: cover;
  opacity:0.8;
  cursor: pointer;
  transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
  opacity:1;
}
.audio.active{
  background: url(/images/iconmonstr-sound-thin.svg) no-repeat;
}
.audio.hide{
  opacity:0;
}
.page01 .logo-text.active{
  animation-name:show-logo;
  animation-duration:1.6s;
  animation-delay:0.4s;
  animation-timing-function:ease-out;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
}

.deSVG path {
  fill:#053456;
}
.logo-text .deSVG{
  width: 100%;
  height: auto;
}
.video-wrap{
  width: 100%;
  height: 113%;
  position: absolute;
   	top: 50%;
   	left: 50%;
   	-webkit-transform: translate(-50%, -50%);
   	transform: translate(-50%, -50%);
  z-index: 0;
}

.slide:not(#page01){
  opacity:0;
}
.slide.anime{
  animation-name:show;
  animation-duration:3s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
  will-change: transform;
}
.slide.page02.anime{
  animation-name:show;
  animation-duration:2s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  will-change: transform;
}
.slide.page07.anime{
  animation-name:show;
  animation-duration:2s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  will-change: transform;
}
/*page2*/

.page02 h1 {
	width: 60px;
  height: 500px;
	z-index: 10;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);
  transition: all 2s ease;
	-webkit-transition: all 2s ease;
  transition-delay: 0.6s;
	-webkit-transition-delay: 0.6s;
  opacity: 1;
}

.page02 h1{
  font-size: 4.4rem;
  color: #fff;
  text-shadow:0px 0px 0.5vw rgba(0,0,0,0.6),0px 0px 1vw rgba(0,0,0,0.4),0px 0px 1.5vw rgba(0,0,0,0.25);
}
.page02 h1 span{
  position: absolute;
  opacity: 0;
}
.page02 h1 .t1{
  top:0;
  left: 0;
}
.page02 h1 .t2{
  top:70px;
  left: 0;
}
.page02 h1 .t3{
  top:140px;
  left: 0;
}
.page02 h1 .t4{
  top:210px;
  left: 0;
}
.page02 h1 .t5{
  top:280px;
  left: 0;
}
.page02 h1 .t6{
  top:350px;
  left: 0;
}
.page02.anime h1 span{
  animation-name:show-up;
  animation-duration:2s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
  animation-delay: 23.5s;
  will-change: transform;
}

.en .page02 h1 {
  top: 45%;
  text-align: center;
	width: 100%;
  height: 60px;
	z-index: 10;
  font-size: 5rem;
  letter-spacing: -0.1rem;
  
}
.en h1 span{
  display: inline-block;
  position: relative;
  top:0!important;
  left: 0!important;
  -webkit-transform: translateY(25%);
	 transform: translateY(25%);
}
.en .page02 .anime h1 span{
  animation-name:show-up;
  animation-duration:2s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
  animation-delay: 23.5s;
  will-change: transform;
}
.en .page02 h1 .t7{
  letter-spacing: 2rem;
}
.page02 h1 img{
  filter: drop-shadow(0 0px 10px rgba(255, 255, 255, .9)) drop-shadow(0 0px 5px rgba(255, 255, 255, .9));
}
.page02 .anime h1{
  opacity: 1;
}
/*page3*/

.jp .page03 ul {
  position: absolute;
  top: 50%;
  	left: 48%;
  	-webkit-transform: translate(-50%, -50%);
   	transform: translate(-50%, -50%);
  z-index: 30;
  writing-mode: vertical-rl;
  text-orientation: upright;
  list-style: none;
}
.jp .page03 ul li .tate{
  text-orientation: mixed;
}
.jp .page03 ul li{
  white-space: nowrap;
  font-size: 1.7vw;
  min-width: 15px;
  line-height: 1.8;
  text-shadow:0px 0px 10px rgba(0,0,0,1),0px 0px 8px rgba(0,0,0,1),0px 0px 3px rgba(0,0,0,1);
  /*text-shadow:0px 0px 0.8vw rgba(0,0,0,0.8),0px 0px 3vw rgba(0,0,0,0.6),0px 0px 1vw rgba(0,0,0,0.4);*/
  opacity: 0;
  
}
.en .page03 ul {
  position: absolute;
  width: 90%;
  top: 50%;
  	left: 50%;
  	-webkit-transform: translate(-50%, -50%);
   	transform: translate(-50%, -50%);
    z-index: 30;
    list-style: none;
}
.en .page03 ul li{
  text-align: center;
  white-space:normal;
  font-size: 1.7vw;
  min-width: 15px;
  line-height: 1.8;
  text-shadow:0px 0px 10px rgba(0,0,0,1),0px 0px 8px rgba(0,0,0,1),0px 0px 3px rgba(0,0,0,1);
  /*text-shadow:0px 0px 0.8vw rgba(0,0,0,0.8),0px 0px 3vw rgba(0,0,0,0.6),0px 0px 1vw rgba(0,0,0,0.4);*/
  opacity: 0;
}
.page03.anime ul li{
  animation-name:show;
  animation-duration:3s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
}
.page03 ul li span{
  font-size: 2.5vw;
}


.page03 .img-wrap{
  position: absolute;
  width: 130%;
  height: 100%;
  left: -15%;
  top:0%;
  position: relative;
}

.page03.anime .img-wrap{
  animation-name:story;
  animation-duration:40s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
  will-change: transform;
}
/*page4*/
.img-wrap{
  width: 100%;
  height: 100%;
  position: relative;
}
.page04 .img-wrap .imgLiquid{
  position: absolute;
  left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
  top:-20%;
  height: 120%;
  width: 100%;
  will-change: transform;
}

.page04.anime .img-wrap .imgLiquid{
  animation-name:page04anime;
  animation-duration:20s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
  will-change: transform;
}
/*page5*/
.page05 .shadow-mask{
  display: block;
  position: absolute;
  left: 0;
  top:0;
  z-index: 6;
  width: 100%;
  height: 100%;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.8+1,0.6+25,0+50 */
background: -moz-linear-gradient(45deg,  rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 1%, rgba(0,0,0,0.6) 25%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 1%,rgba(0,0,0,0.6) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 1%,rgba(0,0,0,0.6) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.page05 .img-wrap{
  width: 100%;
  height: 100%;
  transform: scale(1.25,1.25);
}
.page05.anime .img-wrap{
  animation-name:zoom-out;
  animation-duration:20s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
  will-change: transform;
}
/*page6*/
.page06 .shadow-mask{
  display: block;
  position: absolute;
  left: 0;
  top:0;
  z-index: 6;
  width: 100%;
  height: 100%;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.8+1,0.6+35,0+60 */
background: -moz-linear-gradient(45deg,  rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 1%, rgba(0,0,0,0.6) 35%, rgba(0,0,0,0) 60%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 1%,rgba(0,0,0,0.6) 35%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 1%,rgba(0,0,0,0.6) 35%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
.page06 .img-wrap{
  position: absolute;
  left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
  bottom:-20%;
  height: auto;
  width: 100%;
  height: 120%;
  will-change: transform;
}
.page06.anime .img-wrap{
  animation-name:page06anime;
  animation-duration:20s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
  will-change: transform;
}
/*
/*page8*/
.page08 .img-wrap{
  width: 100%;
  height: 100%;
  position: relative;
}
.page08.anime .img-wrap{
  animation-name:zoom-in;
  animation-duration:20s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
  will-change: transform;
}
.page08 .img-wrap img{
  min-width: 100%;
  min-height: 100%;
  position: absolute;
   	top: 50%;
   	left: 50%;
   	-webkit-transform: translate(-50%, -50%);
   	transform: translate(-50%, -50%);
}
.page08.anime .img-wrap img{
  animation-name:brightness;
  animation-duration:10s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
  will-change: transform;
}
/*page9*/
.page09.anime .logo-text{
  animation-name:show-logo;
  animation-duration:1.6s;
  animation-delay:1s;
  animation-timing-function:ease-out;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
  will-change: transform;
}
.page08 p{
	position: relative;
  font-family: ro-nikkatsu-sei-kai-std, serif;
  font-size: 1.8vw;
  margin: 1.2vw 0;
  line-height: 2;
  letter-spacing: 0.3rem;
}
.en .page08 p{
  font-size: 1.8vw;
  margin: 1.2vw auto;
  width: 55%;
  display: block;
}
.btn-prev{
  width: 100%;
  height: 30%;
  z-index: 30;
  top:0;
  left: 0;
  position: fixed;
  border: none;
  background: 0;
  outline:none;
}
.btn-next{
  width: 100%;
  height: 30%;
  z-index: 30;
  bottom:0;
  left: 0;
  position: fixed;
    border: none;
  background: 0;
  outline:none;
}
.sp-note{
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
  display: none;
  left: 0;
  top:0;
  z-index: 100;
}
.sp-note.active{
  display: block;
}
.sp-note span{
  display: block;
  text-align: center;
  position: absolute;
   	top: 50%;
   	left: 0%;
  width: 100%;
   	-webkit-transform: translate(0%, -50%);
   	transform: translate(0%, -50%);
  color: #fff;
}
@media screen and (max-width: 768px) {
  .video-wrap{
  width: 240%;
  height: 80vh;
  position: absolute;
   	top: 50%;
   	left: 50%;
   	-webkit-transform: translate(-50%, -50%);
   	transform: translate(-50%, -50%);
  z-index: 0;
}
  .page02 h1{
    top:55%;
  }
  .page02 h1 .t1{
  top:0;
  left: 0;
}
.page02 h1 .t2{
  top:60px;
  left: 0;
}
.page02 h1 .t3{
  top:120px;
  left: 0;
}
.page02 h1 .t4{
  top:180px;
  left: 0;
}
.page02 h1 .t5{
  top:240px;
  left: 0;
}
.page02 h1 .t6{
  top:300px;
  left: 0;
}
  .page02 h1{
    font-family: ro-nikkatsu-sei-kai-std, serif;
  }
  .en .page02 h1{
    font-size: 3rem;
    font-size: 8vw;
    letter-spacing: -0.2rem;
    text-shadow:0px 0px 2vw rgba(0,0,0,0.6),0px 0px 3vw rgba(0,0,0,0.4),0px 0px 5vw rgba(0,0,0,0.25);
  }
  .en .page02 h1 .t7{
    letter-spacing: 1rem;
  }
  .loading{
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%); /* Safari用 */
    transform: translate(-50%, -50%);
    width: 28vw;
    height:  28vw;
  }

  .logo-text{
    width: 40vw;
  }
  .body-qr h1{
    width: 100%;
  text-align: center;
  color: #fff;
  letter-spacing: 0.1em;
	font-family: ro-nikkatsu-sei-kai-std, serif;
  font-size: 7vw;
  position: absolute;
  top: 25%;
   	left: 50%;
   	-webkit-transform: translate(-50%, -50%);
   	transform: translate(-50%, -50%);
}
.box-qr{
  display: grid;
  grid-template-columns: 1fr 1fr ;
  grid-template-rows:1fr;
  gap:10%;
  width: 80%;
  position: absolute;
  top: 50%;
   	left: 50%;
   	-webkit-transform: translate(-50%, -50%);
   	transform: translate(-50%, -50%);
}
  .box-qr .w100p{
    width: 100%;
  }
  .bg{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top:0;
    background: rgba(0,0,0,0.5);
    z-index: 1;
  }
  .jp .page03 ul {
    position: absolute;
    width: 94%;
    top: 50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
    z-index: 30;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    list-style: none;
    padding: 0;
    margin: 0;
    
  }
  .jp .page03 ul li .tate{
    text-orientation: mixed;
  }
  .jp .page03 ul li{
    white-space:normal;
    font-size: 3.5vw;
    min-width: 100%;
    line-height: 1.8;
    margin: 0;
    display: inline;
    letter-spacing: 0rem;
    font-family: 'Noto Serif JP', serif;

    text-align: left;
  }
    .en .page03 ul {
    position: absolute;
    width: 94%;
    top: 50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
    z-index: 30;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    list-style: none;
    padding: 0;
    margin: 0;
    
  }
  .en .page03 ul li{
    
  }
  .page03.anime .img-wrap{
  animation-name:story;
  animation-duration:20s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
  will-change: transform;
}
  .jp .page03 ul li.sp-br{
    display: block;
    margin-bottom: 2vw;
  }
  .en .page03 ul {
    position: absolute;
    width: 90%;
    top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      z-index: 30;
      list-style: none;
  }
  .en .page03 ul li{
    white-space:normal;
    font-size: 4vw!important;
    min-width: 100%;
    line-height: 1.6;
    margin: 0;
    display: inline;
    letter-spacing: 0rem;
    text-align: left;
    text-shadow:0px 0px 10px rgba(0,0,0,1),0px 0px 8px rgba(0,0,0,1),0px 0px 3px rgba(0,0,0,1);
  }
  .page03 ul li span{
    font-size: 5vw;
  }
  .btn-prev{
    width: 100%;
    height: 5%;
    z-index: 30;
    top:0;
    left: 0;
    position: fixed;
    border: none;
    background: 0;
    outline:none;
  }
  .btn-next{
    width: 100%;
    height: 5%;
    z-index: 30;
    bottom:0;
    left: 0;
    position: fixed;
      border: none;
    background: 0;
    outline:none;
  }
  h1,h2,h3{
    font-family: 'Noto Serif JP', serif;
    font-size: 5vw;
  }
  h2 strong{
  font-size: 6vw;
}
  .en h1,
  .en h2,
  .en h3{
    font-size: 5vw;
  }
  .text{
    width: 90%;
  }
  .text p{
    font-size: 3.2vw;
    font-family: 'Noto Serif JP', serif;
    margin-bottom: 4vw;
  }
  .en .text{
    font-size: 3.3vw!important;
   line-height: 1.5!important;
    letter-spacing: 0;
    
  }
   .en .text p{
    font-size: 3.3vw!important;
    margin-bottom: 4vw;
     line-height: 1.5!important;
  }
  .text p br{
    display: none;
  }
  .en .text p br{
    display: none!important;
  }
  .page05 .shadow-mask{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.6+57,0.8+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 57%, rgba(0,0,0,0.8) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 57%,rgba(0,0,0,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 57%,rgba(0,0,0,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 ); /* IE6-9 */

}
  /*page6*/
.page06 .shadow-mask{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.6+57,0.8+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 57%, rgba(0,0,0,0.8) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 57%,rgba(0,0,0,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 57%,rgba(0,0,0,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 ); /* IE6-9 */

}
  .page08 p strong{
    font-size: 5vw;
  }
  .page08 p br.sp{
    display: block;
  }
  .en .page08 p{
    width: 95%;
    font-size: 4.2vw;
  }
  .en .page08 .text{
	font-size: 3.3vw!important;
	text-align: center;
 line-height: 1.5!important;
}
}