@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1&display=swap');
*{
	margin:0;
	padding:0;
}
body{
	margin:0;
	padding:0;
	font-family: 'Shippori Mincho B1', serif;
}
::selection{
	background:#fff;
	color:#9da4b0;
}


/*メニューバーモバイル*/
@media (max-width: 899px) {
#ham-menu {
	background-color: #FFF; 
	box-sizing: border-box;
	height: 100%;
	padding: 10px 30px; 
	position: fixed;
	right: -100%;
	top: 0;
	transition: transform 0.3s linear 0s; 
	width: 100%; 
	z-index: 100;
	opacity:0.8;
}
#menu-background {
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s; 
    width: 100%;
    z-index: -1;
}

#menu-icon {
	color:#EEEEEE;
    border-radius: 0 0 0 10px; 
    cursor: pointer;
    font-size: 50px; 
    height: 50px; 
    line-height: 50px; 
    position: fixed;
    right: 0;
    top: 0;
    width: 50px; 
    transition: all 0.3s linear 0s; 
    z-index: 100;
}
#menu-cl{
	color:#EEEEEE;
    border-radius: 0 0 0 10px; 
    cursor: pointer;
    font-size: 50px; 
    height: 50px; 
    line-height: 50px; 
    position: fixed;
    right: 0;
    top: 0;
    width: 50px; 
    transition: all 0.3s linear 0s; 
	z-index: 99;
	opacity:0;
}
#menuBotan{
	height: 50px;
	width: 50px;
	cursor: pointer;
	background-color:#555
	transition: all 0.3s linear 0s; 
	z-index: 100;
	}
#menu-cb {
    display: none; 
}

#menu-cb:checked ~ #ham-menu,
#menu-cb:checked ~ #menu-icon {
	transform: translate(-81vw); 
}

#menu-cb:checked ~ #menu-icon{
		opacity:0;
}

#menu-cb:checked ~ #menu-cl{
	  transform: translate(-81vw);
		opacity:1;
}
#menu-cb:checked ~ #menu-background {
    opacity: 0.5;
    z-index: 99;
}


ul,li,a,.cycle{
	font-family:"Hiragino Kaku Gothic ProN",Mieryo,sans-serif;
	color: #222;
	font-size:2.1vh;
	letter-spacing:0.8vw;
	line-height:5.5vh;
}
a{
	display: block;
	text-decoration:none;
}
ul{
	list-style:none;
	}
	.menuBox{
	display:none;
}
}

/*メニューバーPC*/
@media (min-width: 900px) {
	.menuBox2{
	display:none;
}
.menuBox{
	position:fixed;
	z-index:6;
	width:100vw;
}
ul.topnav {
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style-type: none;
	--background-color: #1b2538;
}
ul.topnav li {
	float: right;
}
ul.topnav li a {
	display: block;
	padding: 14px 16px;
	text-align: center;
	text-decoration: none;
	color: white;
}
ul.topnav li a:hover:not(.active) {
	background-color: #364e95;
}
.active {
	background-color: #b13425;
}
ul.topnav li.left {
	float: left;
}
@media screen and (max-width: 480px) {
	ul.topnav li.right, ul.topnav li {
		float: none;
	}
	}
}
.topTitle{
	font-size:12px;
	text-align:left;
}
.container{
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	width:100vw;
	margin:auto;
	font-family: 'Shippori Mincho B1', serif;
	overflow: hidden;
	background-color:#e1301c;
}
h2{
	font-size:40px;;
	font-weight:200;
	letter-spacing:8px;
	color:#fff;
	margin-top:20px;
	margin-bottom:5px;
	text-align:center;
}
h3{
	color:#fff;
	letter-spacing:5px;
	margin-bottom:45px;
}
.topEmpty{
		z-index:0;
	height:100vh;
	width:100vw;
}

.topPage{
	z-index:1;
	margin-top:0;
	position:fixed;
	height:100vh;
	width:100vw;
	background-image:url("../images/topImg4.jpg");
	background-size:cover;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;

	}


h1{
	opacity:0;
	position:absolute;
}
.titleImg{
	position:absolute;
	bottom:26vh;
	right:7vw;
	--margin-top:-83vh;
	z-index:2;
	width:68vmin;
	max-width:570px;
}
.backImg{
	width:100vw;
	z-index:1;
	margin-bottom:-1px;
	margin-top:-23vh;
	--opacity:0.8;
}
.storyPage{
	margin-top:0;
	margin-bottom:0;
	z-index:2;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	background-color:#bdc8d2;
	--background: linear-gradient(to bottom, rgba(189, 200, 210, 0.8) 0%, rgba(189, 200, 210, 0.9) 50%, rgba(189, 200, 210, 1) 100%);
	width:100vw;
}
.introImgBox{
	width:100vw;
	max-width:1200px;
	margin-top:40px;
	margin-bottom:20px;
	display:flex;
	justify-content:space-around;
	align-items:center;
	flex-wrap:wrap;
}
.bedImg{
	max-width:500px;
	max-height:300px;
	width:100%;	
	border-radius:50px;
	margin-bottom:30px;
}
.introBox{
	--background-color:#eee;
	max-width:510px;
	width:91vw;
	border-radius:5px;
}
.introTitle{
	--color:#222;	
	color:#085295;
	font-size:29px;
	letter-spacing:6px;
	padding:2px 10px;
}
.introTitle2{
	--color:#222;	
	color:#085295;
	font-size:29px;
	letter-spacing:25px;
	padding:0 10px;

}
.introContent{
	padding:10px;
	color:#085295;
	line-height:28px;
	font-size:15px;
	text-align:center;
	text-align: justify;
	text-justify: inter-ideograph;
}
.waterRun{
	display:flex;
	margin-top:10px;
	margin-bottom:10px;
	justify-content:space-around;
}
.blueCycle{
	height:30px;
	width:30px;
	background-color:#3d5594;
	border-radius:50px;
}
.water{
	max-height:33px;
	height:2.2vw;
	margin:7px 10px auto 10px;
}
.storyBox{
		display:flex;
		margin-bottom:40px;
}
.storyBox>h2{
	margin-top:auto;
	padding-top:14px;
	margin-right:5px;
	color:#222;
	font-size:26px;
	letter-spacing: 50px;
	writing-mode:vertical-rl;
	float:left;
	box-sizing: border-box;
}
.storyPage>h3{
	color:#222;
}
.storyP{
	margin:auto;
	text-align:center;
	color:#222;
	width:80vw;
	max-width:450px;
	line-height:28px;
	font-size:17px;
	text-align: justify;
	text-justify: inter-ideograph;
}
.redCycle{
	height:100px;
	width:100px;
	background-color:#b13425;
	border-radius:50px;
	margin-bottom:5px;	
}
.backBottom{
	margin-top:10px;
	width:100vw;
	z-index:3;
	margin-top:-1px;
	opacity:1;
}
.storyYoutubeBox{
	margin-top:20px;
	margin-bottom:60px;	
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
	width:98vw;
	max-width:1200px;	
}	
.youtubeBox{
	width:100%;
	max-width:500px;
	margin-top:8px;
}
.youtube{
     position: relative;
	width: 100%;
	padding-top: 56.25%;
	z-index:3;
	border-radius:50px;
	overflow: hidden;
}
.youtube iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	}
.fallKei{
	margin-top:90px;
	width:100px;
	border-radius:300px;
}
.commentPage{
	margin-top:-19.7vw;
	z-index:4;
	width:100vw;
	--background-image:url("../images/commentImg.jpg");
	background-size:cover;
	z-index:2;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
.commentPage>h2{
	margin-top:200px;
}
.commentPage>p{
	z-index:2;
	color:#eee;
	max-width:860px;
	width:84vw;
	line-height:27px;
	margin-bottom:50px;
}
.fontWeight{
	font-weight:600;
	z-index:2;
}
.commentBox{
	color:#eee;
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
	align-items:center;
}
.commentEmpty{
	margin-bottom:90px;
}
.backCastImg{
	width:100vw;
	z-index:1;
	margin-bottom:0;
	margin-top:-23vh;
}
.castStaffPage{
	z-index:3;
	width:100vw;
	background-color:#bdc8d2;
	--background: linear-gradient(to bottom, rgba(192, 200, 213, 1) 0%, rgba(192, 200, 213, 0.95) 50%, rgba(192, 200, 213, 0.9) 100%);
	display:flex;
	flex-direction:column;
	align-items:center;
	margin-bottom:-0.3px;

}
.castBox{
	margin-top:30px;
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
	width:70vw;
}
.castBox>p{
	position:relative;
	margin-bottom:30px;
	--overflow: hidden;
}
.castImg{
	width:220px;
	height:220px;
	margin-right:1.3vw;
	margin-bottom:80px;
	transition:1s;
}
.castImg2{
	width:220px;
	height:220px;

}
.castImg:hover{
	opacity:0.4;
}

@keyframes wobble-top{
  16.65% {
    transform: skew(-4deg);
  }
  33.3% {
    transform: skew(3deg);
  }
  49.95% {
    transform: skew(-2deg);
  }
  66.6% {
    transform: skew(1deg);
  }
  83.25% {
    transform: skew(-1deg);
  }
  100% {
    transform: skew(0);
  }
}
.wobble-top {
  display: inline-block;
  transform-origin: 0 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-top:hover {
  animation-name: wobble-top;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}
.waterFont{
	width:10px;
}
.castName{
	font-size:24px;
	color:#085295;
	margin-bottom:5px;
	width:240px;
	z-index:5;
}
.castName2{
	font-size:24px;
	color:#085295;
	margin-top:5px;
	margin-bottom:5px;
	z-index:5;
}
.popupBox{
	width:80vw;
	max-width:600px;
}
.castNameBox{
	display:flex;
	bottom:20px;
	flex-wrap:wrap;
	position:absolute;
	left:-100px;
	box-sizing: border-box;
	opacity:0;
	transition:0.7s;
	text-align:center;
}
.castButton:hover ~ .castNameBox{
	left:0;
	text-align:center;
	opacity:1;
}
.castEmpty{
	height:50px;
}
.backCastImgBottom{
	margin-top:-1px;
	width:100vw;
	z-index:2;
	transform: scale(1, -1);
	--opacity:0.8;
}
.theaterPage{
	z-index:2;
	width:100vw;
	display:flex;
	flex-direction:column;
	align-items:center;
	background-color:#bdc8d2;
	--background: linear-gradient(to bottom, rgba(192, 200, 213, 0.9) 0%, rgba(192, 200, 213, 0.85) 50%, rgba(192, 200, 213, 0.8) 100%);
}
table{
	width:80vw;
	text-align:left;
	margin-bottom:100px;
}
table th:first-child{
  border-radius: 5px 0 0 0;
}
table th:last-child{
  border-radius: 0 5px 0 0;
}
table tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
}

table tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}
table tr:hover td{
  background-color:#e3bfbe;
}
table th{
	background-color:#6a7fa0;
	color:#eee;
	padding:8px 6px;
}
table td{
	background-color:#eee;
	padding:8px 6px;
}
.newsPage{
	z-index:2;
	width:100vw;
	display:flex;
	margin-bottom:0;
	flex-direction:column;
	align-items:center;
	background-color:#bdc8d2;
	--background: linear-gradient(to bottom, rgba(192, 200, 213, 0.8) 0%, rgba(192, 200, 213, 0.8) 50%, rgba(192, 200, 213, 0.8) 100%);
}
.newsContact{
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
	width:91vw;
	max-width:1000px;	
}
.twitterContent{
	display:flex;
	flex-direction:column;
	align-items:center;
	margin-right:25px;
}
.twitterBox{
	--width:91vw;
	display:flex;
	flex-direction:column;
	align-items:center;
	margin-bottom:90px;
}
.contactBox{
	display:flex;
	flex-direction:column;
	align-items:center;
}
.contactForm{
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	align-items:center;
	margin-bottom:110px;
}
.name,.email,.message{
	width:280px;
	margin-bottom:20px;
	padding-left:10px;
	font-size:16px;
	border: none;
	border-radius: 5px;
	font-family:sans-serif;
	transition:0.4s;
}
.name,.email{
	height:35px;
}
.message{
	height:140px;
	padding-top:8px;
}
.name:focus,.email:focus,.message:focus{
	border: 1px solid #ffaa60;
	outline: none;
	box-shadow: 0 0 5px 1px rgba(218,60,65, .5);
}
.formBtn{
	width:100px;
	margin-top:10px;
	padding:8px;
	border:none;
	border-radius: 5px;
	font-size:16px;
	color:white;
	background-color:#085295;
	transition:0.3s;
}
.formBtn:hover{
	opacity:0.6;
}

#backBottomImg{
	z-index:0;
	width:100vw;
	height:100vh;
	background-image:url("../images/footerImg.jpg");
	background-size:cover;
	position:fixed;
}

.container3{
	position: absolute;
	display:flex;
	flex-direction:column;
	align-items:center;
		background-color:#e1301c;
	animation: 40s credits linear infinite;

}
.endrollBox{
		display:flex;
	flex-direction:column;
	align-items:center;
	position: relative;
	--overflow: hidden;
	width:100%;
	height:590px;
	z-index:1;
	margin-bottom:50px;
}
.endroll{
		--animation: 40s credits linear infinite;
position: absolute;
	line-height:30px;
	font-size:min(2.6vw,14px);
	width:100vw;
	margin-top:40px;
	margin-bottom:80px;
}
@keyframes credits{
	0%{
		top:100%;
	}
	100%{
		top:-130%;
	}
}


footer{
	text-align:center;
	z-index:1;
	color:#eee;
}
.copyright{
	width:220px;
	margin-left: auto;
	font-size:12px;
	padding:12px;
	margin-bottom:0;
	right:15px;
	z-index:2;
	color:#eee;
}


.commentFont{
	text-align:center;
	font-size:16px;
	letter-spacing:3px;
	margin-bottom:70px;
	margin-right:50px;
	margin-left:50px;
	max-width:480px;
	width:91vw;
	font-family: "メイリオ" ;

}
.commentColor{
	color:#eedd49;
}


.open {
	cursor:pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
}
#pop-up {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up:checked + .overlay {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
.window {
	width: 90vw;
	max-width: 700px;
	height: 540px;
	background-color: #ffffff;
	border-radius: 6px;
	display: flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	font-size:min(4vw,15px);
}
.text {
	margin: 0;
}
.close {
	cursor:pointer;
	position: absolute;
	top: 4px;
	left: 4px;
	font-size: 20px;
}



#pop-up2 {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay2 {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up2:checked + .overlay2 {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}

#pop-up3 {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay3 {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up3:checked + .overlay3 {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}


#pop-up4 {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay4 {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up4:checked + .overlay4 {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
#pop-up5 {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay5 {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up5:checked + .overlay5 {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
#pop-up6 {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay6 {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up6:checked + .overlay6 {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
#pop-up7 {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay7 {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up7:checked + .overlay7 {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
#pop-up8 {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay8 {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up8:checked + .overlay8 {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
#pop-up9 {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay9 {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up9:checked + .overlay9 {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
#pop-up10 {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay10 {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up10:checked + .overlay10 {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
#pop-up11 {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay11 {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up11:checked + .overlay11 {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
#pop-up12 {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay12 {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up12:checked + .overlay12 {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
#pop-up13 {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay13 {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up13:checked + .overlay13 {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
#pop-up14 {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay14 {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up14:checked + .overlay14 {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
#pop-up15 {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay15 {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up15:checked + .overlay15 {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
#pop-up16 {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay16 {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up16:checked + .overlay16 {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
#pop-up17 {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay17 {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up17:checked + .overlay17 {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
#pop-up18 {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay18 {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up18:checked + .overlay18 {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
#pop-up19 {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay19 {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up19:checked + .overlay19 {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
#pop-up20 {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay20 {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up20:checked + .overlay20 {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}