@charset "UTF-8";

html {
overflow-y: scroll;
overflow-x: hidden;
}

body {
color: #222222;
margin: 0px;
padding: 0px;
font-size: 19px;
line-height: 2;
font-family:"IBM Plex Sans JP", "Noto Sans JP", 'Barlow', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3",  sans-serif;
font-style: normal;
height: 100%;
background-color:#ECD8AA;
position: relative;
-webkit-text-size-adjust:100% !important
}

body::before,
body::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0; 
  width: 80px;
  height: auto;
  background-image: url("img/film.svg");
  background-repeat: repeat-y;
  background-size: 80px 80px;
  z-index: 100;
}

body::before {
  left: 0;
}

body::after {
  right: 0;
}

main {
margin: 1em auto 1em auto;
padding:0;
text-align: left;
max-width: 60em;
}

/*リンク*/
a{
color:#7b0e12;
text-decoration: none;
font-weight: 900;
}
a:hover {
color: #9B0F14;
text-decoration: none;
}

/*ヘッダー*/
header {
width: 100%;
z-index: 999;
height:4em;
position: fixed;
left: 0;
top: 0;
background:#7b0e12;
box-shadow: 0px 0px 4px 3px rgba(72,42,0,.3);
-webkit-box-shadow: 0px 0px 4px 3px rgba(72,42,0,.3);
-moz-box-shadow: 0px 0px 4px 3px rgba(72,42,0,.3);
}
.logo{
display:inline-block;
height:3.5em;
margin-top:0.3em;
margin-left:0.5em;
}
#menusp ul{
text-align: right;
margin: 0.3em 1em;
list-style: none;
width: auto;
display: block;
position: absolute;
bottom: 0;
right: 0;
}
#menusp li{
display:inline-block;
vertical-align: middle;
width:auto;
margin: 0;
padding-bottom:0.7em;
padding-right:1.2em;
padding-left:1.2em;
line-height: 0.7; 
font-size:15px;
}
#menusp li a{
display: block; 
text-decoration: none;
font-weight: 700;
font-size:13px;
color: #C8B29C;
margin: 0;
text-align: center;
letter-spacing: 0.03em;
position: relative;
}
#menusp li :hover{
color: #ffffff;
opacity: 3;
}
#menusp .line{
border-right:1px solid #c0c0c0;
}
#menusp .line.now.s{
border-right:0px;
}
.nownow{
color:#ffffff;
}
#one,#two,#three,#four,#five{
font-weight: 900;
}
#one::before{
font-family: Font Awesome\ 5 Free;
content: '\e131';
font-size:24px;
}
#two::before{
font-family: Font Awesome\ 5 Free;
content: '\f0eb';
font-size:24px;
}
#three::before{
font-family: Font Awesome\ 5 Free;
content: '\f630';
font-size:24px;
}
#four::before{
font-family: Font Awesome\ 5 Free;
content: '\f075';
font-size:24px;
}
#five::before{
font-family: Font Awesome\ 5 Free;
content: '\f239';
font-size:24px;
}

/*MV*/
.mv{
display: block;
width: calc(100vw - 160px);
max-width: 100%;
height: auto;
margin:0 auto;
padding-top:4em;
}

/*タイトル*/
.title{
margin-top:1em;
text-align:center;
font-size:45px;
font-family: "Dela Gothic One", sans-serif;
line-height: 1.1;
}


/*見出し*/
.h1img {
display:block;
height: 70px;
width: auto;
margin: 0 auto;
margin-top: 3.5em;
}

.h1s{
text-align: center;
margin-top:0.8em;
line-height:0.5; 
font-weight:bold;
margin-bottom:2em;
}

/*強調*/
.kyocho {
background: linear-gradient(transparent 87%,#C74719 30%);
font-weight: 700; 
}

/*概要*/
#aboutp{
font-size: 17px;
margin: 0 auto;
max-width:80%;
padding:20px 30px;
border: 5px solid #942825;
border-radius: 20px;
background-color: #F4E080;
}

/*コンテンツ*/
.contents{
padding:2em 0 0 0;
}
.more_contents{
background-color:#942825;
margin:10px auto 0 auto;
width:30%;
text-align:center;
padding:5px;
border-radius:50px;
}
.more_contents a{
color:#FFFFFF;
line-height:0.9;
font-weight: 600;
}
.more_contents:hover{
background-color:#A7312E;
transition-duration: 0.2s;
}
.husen {
display: inline-block;
position: relative;
font-size:23px;
min-width: 160px;
text-align:center;
padding: .3em 1em .3em 1em;
background-color: #C85E5C;
color: #FFFFFF;
font-weight: 700;
margin: 0.5em 0 1em 0;
}
.husen::before {
position: absolute;
bottom: -1px;
right: 9px;
z-index: -1;
transform: rotate(5deg);
width: 70%;
height: 50%;
background-color: #3C3939;
content: "";
filter: blur(4px);
}

/*コンテンツSP*/
.all_content{
display:flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
}
.each_content{
display:flex;
flex-direction: column;
align-content: flex-start;
width:38%;
margin:5px 25px 10px;
}
.each_content img{
width:100%;
padding:0;
box-shadow: 0px 0px 4px 2px rgba(72,42,0,.5);
}
a.each_content_img{
padding:0;
margin:0;
line-height:1.5;
}
.name{
width: 100%;
text-align: left;
padding:6px 0 10px 3px;
font-weight: bold;
line-height:1.2;
}
a.detail{
width: 100%;
text-align: center;
padding:3px 1px;
margin-bottom:20px;
color: #FFFFFF;
background-color:#942825;
font-weight: 500;
}
a.detail:hover{
color: #FFFFFF;
background-color:#A7312E;
transition-duration: 0.2s;
}

/*コンテンツ詳細*/
.content{
margin:0em auto;
display:flex;
flex-direction: column;
width:90%;
}
.content_mv{
display: block;
width: calc(100vw - 160px);
max-width: 100%;
height: auto;
margin:0 auto;
padding-top:4em;
}
.content_title{
font-size:55px;
margin-top:22px;
font-weight: 700;
line-height: 0.7;
}
.content_copy{
font-size:20px;
}
.content_icon{
width:95%;
margin:35px auto 10px;
border: 5px solid #942825;
border-radius: 20px;
background-color: #F4E080;
display:flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
}
.content_icon_each{
display:flex;
flex-direction: column;
width:12%;
text-align:center;
margin:20px 25px;
font-weight:600;
}
.content_icon_title{
font-size:16px;
}
.content_icon_detail{
font-size:21px;
line-height: 1.1;
}
.content_detail{
margin-top:0.3em;
margin-left:1em;
line-height: 1.8;
margin-bottom:1.2em;
}
.content_eximg{
display:block;
margin:0 auto;
margin-top:1em;
width:50%;
}
.notes_big{
font-size:22px;
font-weight: 500;
margin-top:6px;
margin-bottom:3px;
padding-left:7px;
border-left: 3px solid #222222;
}
.notes_small{
font-size:16px;
line-height: 1.8;
margin-bottom:0px;
padding-bottom: 0px;
}
h2{
display: inline-block;
position: relative;
font-family: "Lexend Deca", sans-serif;
font-optical-sizing: auto;
font-weight: 600;
font-size:45px;
padding:30px 0 5px;
margin:0;
line-height:1;
}
h2::after{
content: '';
display: inline-block;
position: absolute;
top: 65%;
height: 3px;
background-color: #222222;
right:0;
}
h2.content_about::after {
width: 82%;
}
h2.content_story::after {
width: 83%;
}
h2.content_schedule::after {
width: 74%;
}
h2.content_ticket::after {
width: 81%;
}
h2.content_notes::after {
width: 82%;
}
h2.content_share::after {
width: 82%;
}
.money{
font-size:30px;
line-height: 1.5;
font-weight:500;
}
.ticketsite{
width:90%;
margin:12px auto 0;
border:2px solid #942825;
background-color:#942825;
border-radius: 20px;
text-align:center;
padding: 1.5px;
font-weight: normal;
color:#ffffff;
}
.ticketsite:hover{
background-color:#A7312E;
color:#ffffff;
transition-duration: 0.2s;
}
#ticlet_sta{
padding-top:10px;
}
a.back{
margin: 20px auto 15px;
width: 15%;
text-align: center;
padding:5px 0px;
border-radius:50px;
color: #FFFFFF;
background-color:#942825;
font-weight: normal;
}
a.back:hover{
background-color:#A7312E;
color: #FFFFFF;
transition-duration: 0.2s;
}

/*ニュース*/
dl{
font-size:17px;
border: 5px solid #942825;
border-radius: 20px;
background-color: #F4E080;
padding:22px 30px 10px;
width:65%;
overflow-y: scroll;
overflow-x: hidden;
margin:0 auto;
height:auto;
max-height:110px;
}
dt{
background-color:#942825;
color:#ffffff;
padding-right:5px;
padding-left:5px;
width:120px;
float:left;
margin-right:20px;
margin-left:15px;
margin-bottom:7px;
text-align:center;
}
dd{
margin-bottom:8px;
padding-bottom:8px;
border-bottom: 2px dashed #942825;
margin-left:0px;
margin-right:10px;
}
#ddf{
border-bottom:none;
}
dl::after {
content: '';
display: block;
clear: both;
}

/*マップ*/
.map{
display: flex;
justify-content: center;
}
#map{
width: 90%;
height: 350px;
border: 5px solid #942825;
border-radius: 20px;
}
#maps{
text-align: center;
margin-top:0.8em;
line-height:1.5;
font-weight:bold;
}
.access{
font-size:15px;
font-weight:normal;
}

/*シェア*/
.sharemenu{
text-align: center;
margin-top:0.5em;
margin-bottom:3em;
}
.sharelink{
display: inline-block;
position: relative;
font-weight: 900;
font-size:1.8em;
border: solid 2.5px;
top:0;
color:#7b0e12;
}
.sharelink:hover{
color:#fff5f2;
border-color: #7b0e12;
background-color:#7b0e12;
transition:0.2s;
}
.sharetw{
border-radius: 50%;
padding: 1.2px 18px 0px;
margin-right:0.5em;
}
.sharefb{
border-radius: 60%;
padding: 1px 24px 1.3px;
margin-right:0.4em;
}
.shareli{
border-radius: 60%;
padding: 1px 18px;
}

/*フッター*/
footer{
bottom:0;
text-align: center;
font-size:80%;
background-color: #544c4e;
color: #FFFFFF;
padding: 1em;
margin:0;
z-index:1;
}
footer a{
color: #FFFFFF;
font-weight: bold;
}
footer a:hover{
color: #CFCFCF;
}
.pagetop{
z-index: 101;
width:100px;
position:fixed;
right:1em;
bottom:0em;
}

/*ポップアップ*/
.modal-wrapper {
z-index: 120;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0 auto;
}
.modal-wrapper:not(:target) {
opacity: 0;
visibility: hidden;
transition: opacity .3s, visibility .3s;
}
.modal-wrapper:target {
opacity: 1;
visibility: visible;
transition: opacity .4s, visibility .4s;
}
.modal-wrapper::after {
display: inline-block;
height: 100%;
margin-left: -.05em;
vertical-align: middle;
content: "";
}
.modal-wrapper .modal-window {
box-sizing: border-box;
display: block;
text-align:center;
z-index: 100;
position: relative;
width:70%;
max-height: 70%;
overflow-x: scroll;
padding: 1.8em 1.5em 1.2em 1.5em;
background: #fff;
color: #000000;
font-size:18px;
line-height: 1.7;
top:55%;
left:50%;
transform: translate(-50%, -50%);
}
.modal-wrapper img{
width: 55%;
margin:15px 0px 0px;
}
.modal-overlay {
z-index: 10;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .8);
}
.modal-close{
position: absolute;
top: 0;
right: 16px;
text-decoration: none;
transition: 0.5s ease-in-out;
font-size:1.6em;
color:#000000;
}
.nazotitle{
padding:0 100px 2px;
font-size:22px;
border-bottom: 1px #222222 solid;
}

/*ポップアップ2*/
.modal-wrapper .modal-window2 {
box-sizing: border-box;
display: block;
text-align:center;
z-index: 100;
position: relative;
width:70%;
max-height: 70%;
overflow-x: scroll;
padding: 1.8em 1.5em 1.2em 1.5em;
color: #000000;
font-size:18px;
line-height: 1.7;
top:55%;
left:50%;
transform: translate(-50%, -50%);
}
.modal-close2{
position: absolute;
top: 0;
right: 16px;
text-decoration: none;
transition: 0.5s ease-in-out;
font-size:1.6em;
color:#FFFFFF;
}

/*アコーディオン*/
.accordion {
margin:10px auto 0 auto;
max-width: 700px;
background-color: #f2f2f2;
border-radius: 8px;
}
.accordion summary {
display: flex;
align-items: center;
position: relative;
font-size:15px;
padding: 0.5em 1.5em;
color: #333333;
cursor: pointer;
}
.accordion summary::-webkit-details-marker {
display: none;
}
.accordion summary::after {
transform: translateY(-25%) rotate(45deg);
width: 7px;
height: 7px;
margin-left:14px;
border-bottom: 3px solid #c2c2c2;
border-right: 3px solid #c2c2c2;
content: '';
transition: transform .3s;
}
.accordion[open] summary::after {
transform: rotate(225deg);
}
.accordion p {
transform: translateY(-10px);
font-size:13px;
text-align: left;
opacity: 0;
margin: 0;
padding: .3em 2em 1.5em;
color: #333333;
transition: transform .5s, opacity .5s;
}
.accordion[open] p {
transform: none;
opacity: 1;
}

/*その他*/
.pc_unshown{
display: none;
}
.nav_unshown{
display: none;
}

/*smartphones-------smartphones-------smartphones-------smartphones-------*/
@media screen and (max-width: 768px) {
body {
max-width: 100%;
font-size: 15px;
line-height: 1.8; 
overflow-x: hidden;
}
body::before,
body::after {
display: none;
}
main{
max-width: none;
margin: 0em 0.8em 0em 0.8em;
}
	
/*ヘッダー*/
header {
height:4.5em;
}
.logo{
display:inline-block;
margin-top:-12%;
padding:0;
width:60%;
height:auto;
padding-left:23%;
}
#nav-drawer {
display: block;
position: relative;
}
#nav-input{
display: none;
}
#nav-input:checked ~ #nav-close {
display: block;
opacity: 0.3;
}
#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);
box-shadow: 6px 0 25px rgba(0,0,0,0.15);
}
#nav-open {
padding:17px 0px 0px 20px;
margin:0;
display: inline-block;
position: relative;
}
.humberger {
color: #F4E080;
}
.nav-closed{
display:none;
position:fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:black;
opacity:0;
transition: .3s ease-in-out;   
}
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 997;
width: 60%;
height: 100%;
background-color: #EFCCCB;
transition: .3s ease-in-out;
-webkit-transform: translateX(-105%);
transform: translateX(-105%);
}
#menusp ul{
top: 0;
bottom: auto;
margin: 0; 
padding:0; 
width:100%;
}
#menusp li{ 
padding:0.1em;
margin: 0;
width:100%;
clear: left;
display:inline-block;
vertical-align: middle;
}
#menusp li :hover{
color: #ffffff;
opacity: 1;
animation-duration: 6s;
}
#menusp li a{
letter-spacing: 0;
display: block; 
padding: 0.2em 0.8em 0.1em;
text-decoration: none;
color: #333;
margin: 0px;
text-align: left;
font-size:20px;
}
#menusp li a:hover{
color: #333;
}
.menusp_close{
font-weight: 700;
padding: 0.8em 0;
position: fixed;
bottom: 0;
text-align: center;
color: #ffffff;
background-color: #544c4e;
width: 100%;
letter-spacing: 0.3em;
}
.menusp_moji{
font-size:1.5em;
color: #942825;
font-weight: 700;
padding: 1em 0 0.5em 0.8em;
text-align: left;
margin-bottom:0.5em;
}
.nownow{
color:#ffffff;
}
.line.now{
background-color:#942825;
}
#one,#two,#three,#four,#five{
font-size:15px;
display:inline-block;
vertical-align: middle;
}
#one::before{
padding-right:18px;
padding-left:4px;
}
#two::before{
padding-right:26px;
padding-left:9px;
}
#three::before{
padding-right:17px;
padding-left:4px;
}
#four::before{
padding-right:22px;
padding-left:6px;
}
#five::before{
padding-right:24px;
padding-left:7px;
}
	
/*MV*/
.mv{
display: block;
position: relative;
width: 100%;
height: auto;
margin:0 auto;
padding-top:4.5em;
}

/*タイトル*/
.title{
margin-top:1em;
font-size:24px;
line-height: 1.3;
}
	
/*見出し*/
.h1img {
height: 50px;
max-height:55px;
width: auto;
margin-top: 3.5em;
}

.h1s{
font-size:13px;
}
	
/*概要*/
#aboutp{
font-size: 14px;
max-width:70%;
}
	
/*コンテンツ*/
.more_contents{
margin:15px auto 0 auto;
width:60%;
}
.husen {
font-size:17px;
min-width: 120px;
margin: 0.5em 0 1.5em 0;
}
	
/*コンテンツSP*/
.each_content{
width:80%;
margin:5px 25px 5px;
}

/*コンテンツ詳細*/
.content_title{
font-size:30px;
margin-top:15px;
line-height: 1.1;
}
.content_mv{
width: 100%;
padding-top:4.5em;
}
.content_icon{
width:95%;
margin:35px auto 15px;
border-radius: 15px;
padding:10px 0px;
}
.content_icon_each{
display:flex;
flex-direction: column;
width:25%;
text-align:center;
margin:10px 25px;
}
.content_icon_title{
font-size:11px;
}
.content_icon_detail{
font-size:16px;
line-height: 1.1;
}
.content_detail{
line-height: 1.6;
}
.notes_big{
font-size:17px;
font-weight: 500;
padding-bottom:2px;
}
.notes_small{
font-size:12px;
line-height: 1.8;
}
h2{
font-size:35px;
}
h2::after{
top: 68%;
}
h2.content_about::after {
width: 57%;
}
h2.content_story::after {
width: 63%;
}
h2.content_schedule::after {
width: 38%;
}
h2.content_ticket::after {
width: 54%;
}
h2.content_notes::after {
width: 58%;
}
h2.content_share::after {
width: 58%;
}
.money{
font-size:23px;
}
.ticketsite{
width:90%;
margin:12px auto 0;
border-radius: 35px;
text-align:center;
padding: 3px 15px;
font-size:14px;
margin-left:-0.5em;
}
a.back{
margin: 10px auto 20px;
width: 25%;
}
.content_eximg{
margin-top:1em;
width:100%;
margin-left:-0.5em;
}
	
/*ニュース*/
dl{
font-size:13px;
border-radius: 15px;
padding:15px 30px 15px;
width:60%;
max-height:120px;
}
dt{
width:100px;
display: block;
margin-left:0px;
}
dd{
margin-bottom:8px;
padding-bottom:10px;
clear: both;
}
#ddf{
border-bottom:none;
padding-bottom:0px;
margin-bottom:0px;
}
	
/*マップ*/
#map{
width: 80%;
height: 350px;
}
#maps{
line-height:1.2;
}
.access{
font-size:9px;
font-weight:normal;
}
	
/*シェア*/
.sharetw{
border-radius: 60%;
padding: 1px 12px;
margin-right:0.5em;
}
.sharefb{
border-radius: 60%;
padding: 1px 17px;
margin-right:0.4em;
}
.shareli{
border-radius: 60%;
padding: 1px 13px;
}
	
/*フッター*/
footer{
font-size:50%;
}
.pagetop{
width:70px;
}
	
/*ポップアップ*/
.modal-wrapper .modal-window {
width:80%;
max-height: 80%;
overflow-x: scroll;
padding: 1.2em 1.5em 1.2em 1.5em;
font-size:18px;
}
.modal-wrapper img{
width: 90%;
margin:15px 0px 0px;
}
.modal-close{
right: 13px;
font-size:1.2em;
}
.nazotitle{
padding:0 15px 2px;
font-size:15px;
border-bottom: 1px #222222 solid;
}

/*正誤判定*/
input.answerbox{
width: 50%;
font-size: 18px;
margin-top:15px;
}
input.sendbox{
width: 20%;
}
.nazo1clear{
margin-top:20px;
margin-bottom:10px;
font-weight: bold;
display:none;
}
.nazo2clear{
margin-top:20px;
margin-bottom:10px;
font-weight: bold;
display:none;
}
.nazoclear_share{
font-size:14px;
width:80%;
}

/*アコーディオン*/
.accordion summary {
padding: 0.5em 1em;
}

/*その他*/
.pc_unshown{
display: block;
}
.smartphone_unshown{
display:none;
}
}

/*tablets-------tablets-------tablets-------tablets-------*/
@media screen and (min-width: 768px) and (max-width: 1200px) { 
body::before,
body::after {
display: none;
}
	
.mv{
width: 100%;
}
	
.logo.smartphone_unshown{
display:inline-block;
height:3.5em;
margin-top:0.3em;
margin-left:4em;
}
#nav-drawer {
display: block;
position: relative;
}
#nav-input{
display: none;
}
#nav-input:checked ~ #nav-close {
display: block;
opacity: 0.3;
}
#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);
box-shadow: 6px 0 25px rgba(0,0,0,0.15);
}
#nav-open {
display: inline-block;
position:absolute;
padding:1em 0px 0px 20px;
margin:0;
}
.humberger {
color: #F4E080;
}
.nav-closed{
display:none;
position:fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:black;
opacity:0;
transition: .3s ease-in-out;   
}
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 997;
width: 40%;
height: 100%;
background-color: #EFCCCB;
transition: .3s ease-in-out;
-webkit-transform: translateX(-105%);
transform: translateX(-105%);
}
#menusp ul{
top: 0;
bottom: auto;
margin: 0; 
padding:0; 
width:100%;
}
#menusp li{ 
padding:0.1em;
margin: 0;
width:100%;
clear: left;
display:inline-block;
vertical-align: middle;
}
#menusp li :hover{
color: #ffffff;
opacity: 1;
animation-duration: 6s;
}
#menusp li a{
letter-spacing: 0;
display: block; 
padding: 0.2em 0.8em 0.1em;
text-decoration: none;
color: #333;
margin: 0px;
text-align: left;
font-size:25px;
}
#menusp li a:hover{
color: #333;
}
.menusp_close{
font-weight: 700;
padding: 0.8em 0;
position: fixed;
bottom: 0;
text-align: center;
color: #ffffff;
background-color: #544c4e;
width: 100%;
letter-spacing: 0.3em;
}
.menusp_moji{
font-size:1.5em;
color: #942825;
font-weight: 700;
padding: 1em 0 0.5em 0.8em;
text-align: left;
margin-bottom:0.5em;
}
.nownow{
color:#ffffff;
}
.line.now{
background-color:#942825;
}
#one,#two,#three,#four,#five{
font-size:15px;
display:inline-block;
vertical-align: middle;
}
#one::before{
padding-right:18px;
padding-left:4px;
}
#two::before{
padding-right:26px;
padding-left:9px;
}
#three::before{
padding-right:17px;
padding-left:4px;
}
#four::before{
padding-right:22px;
padding-left:6px;
}
#five::before{
padding-right:24px;
padding-left:7px;
}
.content_mv{
width:100%;
padding-top:4em;
}
	
.content_eximg{
margin-left:-0.5em;
padding-top:1em;
margin:0 auto;
width:80%;
}
.content_icon_title{
font-size:13px;
}
.content_icon_detail{
font-size:21px;
line-height: 1.1;
}

h2.content_about::after {
width: 74%;
}
h2.content_story::after {
width: 74%;
}
h2.content_schedule::after {
width: 60%;
}
h2.content_ticket::after {
width: 70%;
}
h2.content_notes::after {
width: 72%;
}
h2.content_share::after {
width: 72%;
}
}