@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 screen and (orientation: portrait) {
#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;
	}
.topPage{
	z-index:1;
	margin-top:0;
	position:fixed;
	height:100vh;
	width:100vw;
	background-image:url("../images/topImg4B.jpg");
	background-size:cover;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	}	
#backBottomImg{
	z-index:0;
	width:100vw;
	height:100vh;
	background-image:url("../images/endImg2.jpg");
	background-size:cover;
	position:fixed;
    animation: ugoki 15s linear infinite alternate;
	}
@keyframes ugoki{
	0%{
		opacity: 0;
	}
	40%{
		opacity:0;	
	}
	60%{
		opacity: 1;
		}  
	80%{
		opacity: 1;
	}
}
.backBottomImg2{
	z-index:0;
	width:100vw;
	height:100vh;
	background-image:url("../images/endImg4.jpg");
	background-size:cover;
	position:fixed;
		--position:relative;
	}
.storyPage{
	z-index:2;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	background-image:url("../images/footerImg2.jpg");
	background-size:cover;
	background-color:#ffd640;
	width:100vw;
}
	#commentImg{
	z-index:0;
	width:100vw;
	height:100vh;
	background-image:url("../images/commentimg2.jpg");
	background-size:cover;
	position:fixed;
	}
.theaterFont{
	line-height:40px;
	font-size:14px;
	font-family: "メイリオ" ;
	letter-spacing:0.5px;
	}
.catchCopy{
	position:absolute;
	bottom:53vh;
	right:7vw;
	z-index:2;
	writing-mode: vertical-rl; 
	font-size:16px;

	line-height:32px;
	letter-spacing:1px;
	color:#fff;
	}
.laurelImg{
	position:absolute;
	bottom:4vh;
	left:7vw;
	z-index:2;
	width:55vmin;
	max-width:480px;
	min-width:240px;	
	opacity:0;
	}
.laurelImg2{
	position:absolute;
	bottom:5vh;
	left:7vw;
	z-index:2;
	width:24vmin;
	max-width:570px;
	min-width:250px;
	opacity:1;
	}
.titleImg{
	position:absolute;
	bottom:30px;
	left:7vw;
	z-index:2;
	width:56vmin;
	max-width:560px;
	}
.suporterPage{
	z-index:3;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	background-image:url("../images/supporterImg2.jpg");
	background-size:cover;
	background-color:#ffd640;
	width:100vw;		
	}
}
/*メニューバーPC*/
@media screen and (orientation: landscape) {
	.menuBox2{
	display:none;
}
.menuBox{
	position:fixed;
	z-index:7;
	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;
	}
	}
.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;
	}
.backBottomImg{
	z-index:0;
	width:100vw;
	height:100vh;
	background-image:url("../images/endImg.jpg");
	background-size:cover;
	position:fixed;
    animation: ugoki 15s linear infinite alternate;
	}
@keyframes ugoki{
	0%{
		opacity: 0;
	}
	40%{
		opacity:0;	
	}
	60%{
		opacity: 1;
		}  
	80%{
		opacity: 1;
	}
}
.backBottomImg2{
	z-index:0;
	width:100vw;
	height:100vh;
	background-image:url("../images/endImg3.jpg");
	background-size:cover;
	position:fixed;
		--position:relative;
	}
.storyPage{
	z-index:2;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	background-image:url("../images/footerImg.jpg");
	background-size:cover;
	background-color:#ffd640;
	width:100vw;
}
#commentImg{
	z-index:0;
	width:100vw;
	height:100vh;
	background-image:url("../images/commentimg.jpg");
	background-size:cover;
	position:fixed;
	}
.catchCopy{
	position:absolute;
	top:25vh;
	right:5vw;
	z-index:2;
	writing-mode: vertical-rl; 
	font-size:18px;
	line-height:40px;
	letter-spacing:1px;
	color:#fff;
	}
.laurelImg{
	position:absolute;
	bottom:4vh;
	left:7vw;
	z-index:2;
	width:55vmin;
	max-width:480px;
	min-width:240px;
	opacity:1;	
	}
.laurelImg2{
	position:absolute;
	bottom:1vh;
	left:7vw;
	z-index:2;
	width:55vmin;
	max-width:570px;
		min-width:250px;
	opacity:0;
	}
.titleImg{
	position:absolute;
	bottom:1vh;
	left:7vw;
	z-index:2;
	width:55vmin;
	max-width:570px;
	min-width:250px;
	}
.suporterPage{
	z-index:3;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	background-image:url("../images/supporterImg.jpg");
	background-size:cover;
	background-color:#ffd640;
	width:100vw;
	}

}
.topTitle{
	font-size:10px;
	text-align:left;
}
.container{
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	width:100vw;
	margin-bottom:0;
	font-family: 'Shippori Mincho B1', serif;
	overflow: hidden;
	background-color:#ffd640;
}
h2{
	margin-top:56px;
	font-size:32px;
	letter-spacing:1px;
	font-weight:200;
	color:#fff;
	margin-bottom:4px;
	text-align:center;
}
h3{
	color:#fff;
	letter-spacing:5px;
	margin-bottom:28px;
}
.topEmpty{
	z-index:2;
	position:relative;
	height:100vh;
	width:100vw;
	min-height:600px;
}

h1{
	opacity:0;
	position:absolute;
}
.storyPage>h2{
	margin-top:56px;
	font-size:32px;
	letter-spacing:1px;
}
.introImgBox{
	width:88vw;
	max-width:1096px;
	margin-bottom:16px;
	display:flex;
	justify-content:space-around;
	align-items:center;
	flex-wrap:wrap;
	column-gap:40px;
}
.youtubeBox{
	width:84vw;
	max-width:488px;
	margin-bottom:32px;
}
.youtube{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	z-index:3;
	overflow: hidden;
}
.youtube iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	}
.introBox{
	width:92vw;
	max-width:552px;
}
.introTitle{
	--color:#222;	
	color:#ffd640;
	font-size:20px;
	font-weight:bold;
	line-height:40px;
	font-family:"游ゴシック体";
	margin:0 8px;
	text-decoration:underline 1px;
	text-underline-offset:3px;	
}
.introContent{
	padding:10px;
	color:#fff;
	line-height:28px;
	letter-spacing:0.05;
	font-size:15px;
	text-align:center;
	text-align: justify;
	font-weight:lighters;
	font-family: "メイリオ" ;
}
@keyframes infinity-scroll-left{
	from{
		transform:translateX(50%);
	}
	to{
		transform:translateX(-50%);
	}
}
.scroll-infinity__wrap{
	margin-top:32px;
	display:flex;
	overflow:hidden;
}
.scroll-infinity__list{
	display:flex;
	list-style:none;
	padding:0;
}
.scroll-infinity__list--left{
	animation:infinity-scroll-left 75s infinite linear 0.5s both;
}
.scroll-infinity__item{
	width:calc(100vw/3);
	max-width:300px;
}
.scroll-infinity__item>img{
	width:100%;
}
.storyContainer{
	width:88vw;
	max-width:1096px;
	margin-top:40px;
	margin-bottom:80px;
	display:flex;
	justify-content:space-around;
	align-items:center;
	flex-wrap:wrap;
	column-gap:40px;
}
.storyBox{
	max-width:558px;
	width:92vw;
}
.storyTitle{
	color:#ffd640;
	font-size:20px;
	font-family:"游ゴシック体";
	letter-spacing:1px;
	font-weight:bold;
	margin:0 10px;
	text-decoration:underline 1px;
	text-underline-offset:3px;	
	margin-top:8px;
}
.storyP{
	padding:10px;
	color:#fff;
	line-height:28px;
	font-size:15px;
	letter-spacing:0.05;
	text-align:center;
	text-align: justify;
	font-weight:lighters;
	text-justify: inter-ideograph;
	font-family: "メイリオ" ;
}
.bedImg{
	width:84vw;
	max-width:488px;
	margin-top:32px;
	margin-bottom:32px;
}
.fallKei{
	margin-top:90px;
	width:100px;
	border-radius:300px;
}
.commentPage{
	z-index:4;
	width:100vw;
	background-size:cover;
	z-index:2;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
.commentPage>h2{
	margin-top:56px;
	font-size:32px;
	letter-spacing:1px;
}

.fontWeight{
	font-family:"游ゴシック体";
	font-weight:600;
	z-index:2;
}
.commentBox{
	width:88vw;
	max-width:1096px;
	color:#eee;
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
	align-items:center;
	column-gap:40px;
}
.commentEmpty{
	margin-bottom:25px;
}

.commentFont{
	padding:10px;
	text-align:center;
	text-align: justify;
	text-justify: inter-ideograph;
	font-size:15px;
	letter-spacing:0.05;
	line-height:28px;
	margin-bottom:70px;
	max-width:480px;
	width:91vw;
	font-weight:lighters;
	font-family: "メイリオ" ;
}
.commentColor{
	color:#ffd640;
}
.castStaffPage{
	z-index:6;
	width:100vw;
	background-color:#ffd640;
	display:flex;
	flex-direction:column;
	align-items:center;
	margin-bottom:-0.3px;
}
.castNameBox2{
	display:flex;
	align-items: flex-end;
	margin-bottom:16px;
}
.castName23{
	display: flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
}
.snsIconBox{
	margin-left:16px;
}
.snsIconBox3{
		display: flex;
}
.snsPro{
	display: inline-block;
	width:40px;
	margin-top:16px;
	margin-right:6px;
}
.castBox{
	margin-top:24px;
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
	width:70vw;
}
.castBox>p{
	position:relative;
	margin-bottom:32px;
}
.castImg{
	width:220px;
	height:220px;
	margin-right:1.3vw;
	margin-bottom:80px;
	transition:1s;
}
.castImg2{
	width:200px;
	height:200px;

}
.castImg:hover{
	opacity:0.4;
}

.waterFont{
	width:10px;
}
.castName0{
	font-size:15px;
	color:#fff;
	width:240px;
	z-index:5;
	font-family: "メイリオ" ;
	text-align:center;
}
.castName{
	font-size:22px;
	color:#fff;
	width:240px;
	z-index:5;
	font-family: "メイリオ" ;
	letter-spacing:1px;
		text-align:center;
}
.castName2{
	font-size:15px;
	color:#000;
	margin-top:16px;
	z-index:5;
	font-family: "メイリオ" ;
}
.castName3{
	font-size:20px;
	color:#000;

	z-index:5;
	font-family: "メイリオ" ;
}
.popupBox{
	width:80vw;
	max-width:560px;
	font-family: "メイリオ" ;
	line-height:26px;
	letter-spacing:0.05;
}
.castNameBox{
	display:flex;
	bottom:8px;
	flex-wrap:wrap;
	position:absolute;
	text-align:center;
	transition:0.7s;
	text-align:center;
	left:-8px;
}
.castEmpty{
	height:50px;
}
.backCastImgBottom{
	margin-top:-1px;
	width:100vw;
	z-index:2;
	transform: scale(1, -1);
	--opacity:0.8;
}
.suporterBox{
	color:#eee;
	margin-bottom:480px;
		z-index:3;
}
.suporterFont{
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
	align-items:center;w
	padding:10px;
	text-align:center;
	letter-spacing:0.05;
	line-height:28px;
	width:88vw;
	max-width:1096px;
	font-family: "メイリオ" ;
}
.suporterTitle{
		display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
	align-items:center;
	margin-top:48px;
	font-size:19px;
	letter-spacing:1px;
	margin-bottom:16px;
	font-family: "メイリオ" ;
}
.suporterCont{
	max-width:558px;
	width:92vw;
	padding:10px;
	margin-bottom:16px;
	display:flex;
	justify-content:space-around;
	align-items:center;
	flex-wrap:wrap;
	column-gap:10px;
	font-size:15px;
	line-height:28px;
	letter-spacing:1px;
	
}
.theaterPage{
	z-index:3;
	width:100vw;
	display:flex;
	flex-direction:column;
	align-items:center;
	background-color:#ffd640;
}
table{
	text-align:left;
	max-width:800px;
	width:88vw;
	line-height:40px;
	font-size:14px;
	margin-bottom:88px;
	font-family: "メイリオ" ;
	letter-spacing:0.05;
}
th{
	font-size:13px;
}
th,td{
	padding: 5px 6px;
}
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;
}
table td{
	background-color:#eee;
}

.newsPage{
	z-index:5;
	width:100vw;
	display:flex;
	margin-bottom:0;
	flex-direction:column;
	align-items:center;
	background-color:#ffd640;
	--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:15px;
	color:white;
	background-color:#085295;
	transition:0.3s;
}
.formBtn:hover{
	opacity:0.6;
}
.container3{
	position: absolute;
	display:flex;
	flex-direction:column;
	align-items:center;
	background-color:#e1301c;
	animation: 40s credits linear infinite;

}
footer{
	z-index:3;
	color:#eee;
	width:100vw;
	height:100vh;
	position: relative;
	background-size:cover;
	min-height:680px;
}
.endTitle{
	position:absolute;
	bottom:320px;
	left:5vw;
	width:180px;
}
.endrollBox{
	width:100vw;
	height:100vh;
	z-index:3;
	background-size:cover;
}
.endroll{
	position:absolute;
	line-height:24px;
	font-size:12px;
	bottom:5vh;
	left:5vw;
	width:100vw;
	max-width:570px;
	font-family: "メイリオ" ;
}
.snsBox{
	display:flex;
	position:absolute;
	bottom:0.1vh;
	left:5vw;
}
.xIcon{
	width:20px;
	margin-right:8px;
	margin-bottom:1px;
}
.instIcon{
	width:20px;
}
@keyframes credits{
	0%{
		top:100%;
	}
	100%{
		top:-130%;
	}
}

.copyright{
	width:220px;
	margin-left: auto;
	font-size:12px;
	padding:12px;
	margin-bottom:0;
	right:2vw;
	z-index:2;
	color:#eee;
}


.open {
	cursor:pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
	z-index: 9999;
}
#pop-up {
	display: none; /* label でコントロールするので input は非表示に */
			z-index: 9999;
}
.overlay {
	display: none; /* input にチェックが入るまでは非表示に */
	z-index: 9999;
}
#pop-up:checked + .overlay {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
.window {
	width: 98vw;
	max-width: 800px;
	height: 98vh;
	max-height: 740px;
	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: 99999;
	font-size:min(4vw,13.5px);
}
.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;
}
#pop-up21 {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay21 {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up21:checked + .overlay21 {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}