@charset "UTF-8";
:root { --center-width:415px; }
@media (min-width:1200px) {
  :root { --center-width:500px; }
}

.pos_ac { text-align:center; }

html,body { overflow-x:hidden; }
body{font-family:"Noto Sans JP","Meiryo UI","メイリオ",Meiryo,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro",Avenir,"Helvetica Neue",Arial,Verdana,Roboto,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;color: #ffff;}img { max-width:100%; height:auto; }
main,.footer{background-color: #000;}
.img_title{text-align: center;}
li{list-style-type: none;}
.wrap{width: var(--center-width);max-width: 100%;margin: 0 auto;}
.long_back{background-image: url(../image/long_back.png);background-size: var(--center-width) 100%;/* box-shadow: inset 0px -25px 36px -36px #b9b9b9;*/position: relative;}
.long_back::before{content: "";height: 50px;width: 100%;display: block;position: absolute;bottom: 0;background: linear-gradient(to top,#ffffff1d,transparent);z-index: 1;}
.long_back > *{z-index: 2;position: relative;}
.back{width: 100%;height: 100%;object-fit: cover;position: fixed;z-index: -10;}
.left_list{position: fixed;left:calc((100% - var(--center-width))/5);z-index: 1;top: 50%;transform:translateY(-50%);}
.left_img{position: fixed;left: 10px;top: 10px;}
.left_img img{margin:-10%;width: 20vw;}
.left_list li{list-style: none;text-align: center;margin-bottom: 20px;}
.left_list a{font-size: 20px;color: #fff;text-decoration: none;padding:10px;display: block;text-transform: uppercase;letter-spacing: 0.1em;font-weight: bold;}
.left_btn{position: fixed;top: 50%;left: 70%;z-index: 1;margin: 0 auto;display: flex;justify-content: center;align-items: center;width: 300px;height: 50px;border-radius: 40px;background: linear-gradient(to right, #EB8961,#A54394);transform:translateY(-50%);}
.left_btn img{z-index: 1;width: 23px;height: 13px;}
.left_btn p{font-size: 20px;}
.ticket_btn a,.left_btn a{display: flex;justify-content: center;align-items: center;height: 100%;width: 100%;}
.ticket_btn p,.left_btn p{padding-left: 5px;}
.left_text{position: fixed;bottom: 2%;right: 2%;font-size: 13px;text-align: right;}
a{text-decoration: none;color: #ffff;}
.footer a{text-decoration: none;color: #aaaaaa;}

.hl_1 { text-align:center; margin-bottom:30px; padding-top:30px; }
.hl_1 .main { position:relative; display:inline-block; border-bottom:1px solid #fff; padding-bottom:5px; letter-spacing:1px; text-indent:1px; }
.hl_1._black .main { color:#0F0F0F; border-color:#0F0F0F; }

.fs_small { font-size:.9em; }

/*
header------------------------------*/
.head{background-image:url(../image/header3.jpg);background-size:cover;background-position:center center;height: 670px;position: relative;width: 100%;}
/*.head:not(._top){background:url(../image/header4.jpg) no-repeat center center / cover;height: 480px;}*/
.head:not(._top){background:url(../image/header4.jpg) no-repeat center center / cover;height: 420px;}
.small{position: absolute;top: 180px;left: 50%;transform:translateX(-50%);max-width:100%;}
.logo{width: 100%;position: absolute;top: 250px;left: 50%;transform:translateX(-50%);}
.head:not(._top) .logo{ top:30px; }

.head .ticket_btn_wrap { position:absolute; left:50%; top:75%; max-width:calc(100% - 60px); transform:translateX(-50%); }
.head .ticket_btn { height:50px; margin-bottom:10px; }
.head .ticket_btn p { font-size:17px; }
/*.head:not(._top) .ticket_btn_wrap { top:56%; }
@media (max-width:1200px) {
  .head .ticket_btn_wrap { top:70%; }
  .head:not(._top) .ticket_btn_wrap { top:56%; }
  .head:not(._top) .logo { top:70px; }
}*/
.head:not(._top) .ticket_btn_wrap { top:68%; }
@media (max-width:1200px) {
  .head .ticket_btn_wrap { top:70%; }
  .head:not(._top) .ticket_btn_wrap { top:67%; }
  .head:not(._top) .logo { top:70px; }
}*

.head._type2 { position:relative; }
.head._type2 .bg_video { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }
.head._type2 .bg_video::before { content:""; width:100%; height:100%; background:#000; opacity:.1; position:absolute; z-index:2; display:block; }
.head._type2 .bg_video video { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; }
.head._type2._top .logo { filter:drop-shadow(0px 0px 1px #fff) drop-shadow(0px 0px 5px rgba(0,0,0,0.7)); opacity: 0;}

/*menu
-------------------------------*/
.openbtn{position: fixed;cursor: pointer;width: 50px;height:50px;border-radius: 5px;top: 10px;left: calc(50% + var(--center-width) / 2 - 60px);z-index: 1000;filter:drop-shadow(0 0 2px rgba(0,0,0,.8));}
@media (max-width:500px) {
  .openbtn { left:auto; right:10px; }
}
.openbtn span{display: inline-block;transition: all .4s;position: absolute;left: 14px;height: 2px;background: #fff;width: 50%;}
.openbtn span:nth-of-type(1){top: 10px;}
.openbtn span:nth-of-type(2){top: 20px;width: 20px;}
.openbtn span:nth-of-type(3){top: 30px;}
.openbtn.active span:nth-of-type(1) {top: 18px;left: 18px;transform: translateY(6px) rotate(-45deg);width: 60%;}
.openbtn.active span:nth-of-type(2) {opacity: 0;}
.openbtn.active span:nth-of-type(3){top: 30px;left: 18px;transform: translateY(-6px) rotate(45deg);width: 60%;}

#g-nav{position:fixed;z-index: -1;opacity: 0;top:0;width:var(--center-width);height: 100%;background:#000000e3;transition: all 0.3s;}
#g-nav .img_nav{position: absolute;width: 150px;top: 15px;left: 10px;}
#g-nav .img_nav img{top:auto;margin:-10% 0;}
#g-nav p{display: block;position: absolute;bottom: 10%;left: 21%;font-size: 10px;}
#g-nav-list img{margin: 2px 0 -1px 3px;}
#g-nav.panelactive{opacity: 1;z-index:999;}
#g-nav.panelactive #g-nav-list{position: fixed;z-index: 999;width: var(--center-width);max-width: 100%;height: 100vh;overflow: auto;-webkit-overflow-scrolling: touch;}
#g-nav ul {display: none;position: absolute;z-index: 999;top:50%;left:50%;transform: translate(-50%,-50%);}
#g-nav.panelactive ul {display: block;}
#g-nav li{list-style: none;text-align: center;margin-bottom: 20px;}
#g-nav li a{color: #ffffff;text-decoration: none;padding:10px;display: block;text-transform: uppercase;letter-spacing: 0.1em;font-weight: bold;}

/*about
--------------------------------*/
.text_title{text-align: center;margin-bottom: 20px;}
.about_img img{width: 100%;height: 300px;object-fit: cover;}
.about_img{margin-bottom: 20px;}
.about_list:before{content: ""!important;}
.text_list{width: 100%;max-width:calc(var(--center-width) - 25px);padding:0 20px;margin: 0 auto 60px auto;}
.text_list p{font-size: 18px;margin-bottom: 30px;}

/*voice
----------------------------*/
.voice{background-image: url(../image/comment_back.png);background-size:cover;background-position:center;padding-bottom: 50px;background-color: #fff;}
.voice._type2 { padding-top:20px; }
.pop{padding-top: 20px;margin-bottom: 10px;}
.pop ul{display: flex;flex-wrap: nowrap;justify-content: space-evenly;}
.pop ul li{padding:0 5px;}
.pop ul li img{width: 120px;}
.comment_wrap {max-width:calc(var(--center-width) - 25px);width:100%;margin:0 auto;}
.comment{margin: 0 auto 20px auto;padding: 17px;background-color: #ffff;width: calc(100% - 35px);border-radius: 5px;position: relative;filter: drop-shadow(1px 1px 1px #aaaaaa);}
.comment:nth-child(odd)::before{content: "";position: absolute;top: 75%;left: 99%;margin-top: -15px;}
.comment:nth-child(odd)::after{content: '';position: absolute;display: block;width: 0;height: 0;left: 99%;top: 64%;border-left: 14px solid #ffffff;border-top: 14px solid transparent;border-bottom: 14px solid transparent;}
.comment:nth-child(even)::before {content: "";position: absolute;top: 75%;left: 30%;margin-top: -15px;}
.comment:nth-child(even)::after{content: '';position: absolute;display: block;width: 0;height: 0;left: -3%;top: 64%;border-right: 14px solid #ffffff;border-top: 14px solid transparent;border-bottom: 14px solid transparent;}
.comment p{color: #000;font-size: 15px;letter-spacing:1px;margin-bottom: 15px;}
.star{display: flex;justify-content: space-between;}
.star img{width: 111px;height: 18px;}
.comment .profile { text-align:right; }
.comment .profile p { background:#F5F5F5; padding:2px 10px; border-radius:15px; color:#969696; font-weight:500; margin-bottom:0; display:inline-block; font-size:.8em; }

/*image_list
------------------------------------------------*/
.image_list{position: relative;height: 450px;}
.photo1{position: absolute;width:308px;top: 40px;left: 25px;z-index: 999;}
.photo2{width: 245px;position: absolute;top: 230px;right: 25px;}

/*next
-----------------------*/
.day{margin: 10px 0;font-size: 20px;font-family: "Jost", sans-serif;}
.okayama{font-size: 20px;font-weight: bold;}
.place{font-size: 20px;margin-bottom: 20px;}
.song{font-weight: bold;font-size: 20px;margin: 0 15px 13px 15px;padding-bottom:13px;border-bottom: 1px dashed #fff;}
.price{font-size: 17px;font-weight: bold;}
.netticket_btn{width: 200px;height: 40px;background-color: #fff;border-radius: 40px;position: relative;display: inline-block;margin-top: 15px;}
.netticket_btn p{position: absolute;top: 8px;left: 60px;color: #000;font-weight: bolder;text-align: center;}

.ticket_wrap { position:relative; width:400px; max-width:calc(100% - 40px); margin-left:auto; margin-right:auto; margin-bottom:30px; padding:30px 10px 40px; }
.ticket_wrap::before,
.ticket_wrap::after { content:""; display:block; width:100%; height:100%; border:1px solid #fff; position:absolute; z-index:1; }
.ticket_wrap::before { top:-2px; left:2px; }
.ticket_wrap::after { top:2px; left:-2px; }
.ticket { text-align:center; position:relative; z-index:2; }

/*ticket
--------------------------------*/
.ticket_btn{margin: 0 auto 50px auto;display: flex;justify-content: center;align-items: center;width: 350px;max-width: calc(100% - 10px);height: 60px;border-radius: 40px;background: linear-gradient(to right, #EB8961,#A54394);}
.ticket_btn img{width: 23px;height: 13px;}
.ticket_btn p{font-size: 20px;}
/*.ticket_btn._day { background:linear-gradient(to right bottom, #82CFF4, #626CE2); }*/
.ticket_btn._day { background:linear-gradient(to right bottom, #82CFF4, #5b3ba9); }
.ticket_btn._day img { width:17px; height:auto; }
.ticket_btn._tel { background:linear-gradient(to right bottom, #5ECB86, #51C1C6); }
.ticket_btn._tel img { width:14px; height:auto; }


/*program
----------------------------*/
.program_wrap{text-align: center;width: 350px;max-width:calc(100% - 30px);margin: 0 auto;border-bottom: 1px dashed #ffffff;}
.program p{font-size: 15px;margin-top: 8px;margin-bottom: 30px;}
.program h2{margin-bottom: 15px;}

/*faq
---------------------------------*/
.faq_wrap{width: 100%;max-width:calc(var(--center-width) - 25px);padding:0 20px;margin: 0 auto 50px auto;}
.faq{border-bottom: 1px solid #ffffff;margin-bottom: 10px;}
.question{position: relative;cursor: pointer;}
.question::before,.question::after{position: absolute;content: '';width: 15px;height: 2px;background-color: #ffffff;}
.question::before{top: 48%;right: 0;transform: rotate(0deg);}
.question::after{top: 48%;right: 0;transform: rotate(90deg);}
.question.close::before{transform: rotate(0deg);}
.question.close::after{display: none;}
.answer{display: none;}
.question,.answer{margin-bottom: 10px;}
.question_in,.answer_in{display: flex;}
.text{padding-top: 3px;padding-right:15px;width: calc(100% - 30px);}
.q{padding-top: 3px;text-align: center;margin-right: 5px;width: 30px;height: 30px;border-radius: 50px;background-color: #ffffff;color: #000;}
.a{padding-top: 3px;text-align: center;margin-right: 5px;width: 30px;height: 30px;border-radius: 50px;background: linear-gradient(to right, #EB8961,#A54394);color: #ffffff;}

/*message
---------------------------------------*/
.message{padding-bottom: 30px;}
.message_text{width:100%;max-width:calc(var(--center-width) - 25px);margin:0 auto;padding:0 20px;}
.message_list{position: relative;max-width:calc(var(--center-width) - 25px);margin:0 auto;height: 380px;}
.message_img{width: 100%;}
.message h3{text-align: center;margin-bottom: 20px;}
.p_list{font-size: 17px;margin: 0 auto 25px auto;}
.ma_photo1{width: 270px;position: absolute;top: 0;right: 15px;}
.ma_photo2{width: 190px;position: absolute;top: 100px;left: 20px;}
.ma_photo3{width: 130px;position: absolute;top: 210px;right: 30px;}
.footer{padding: 20px 0 40px 0;}
.img_footer{text-align: center;margin-bottom: 20px;}
.img_footer img{width: 250px;}
.footer p{text-align: center;font-size: 13px;color: #8b8b8b;}

/*d
-------*/
.d_next{position: relative;padding:30px 0 0;}
.detail{margin-bottom: 10px;}
.performance{margin-top: 30px;margin-bottom: 20px;}
.performance_text {text-align: center;margin-bottom: 30px;padding:0 20px;}
.performance_text h3{margin-bottom: 20px;font-size: 23px;}
.performance_text .from{margin-top: 10px;}
.performance_text2 h3{text-align: center;margin: 20px 0 15px 0;}
.performance_text2{width: 380px;max-width:calc(100% - 40px);margin: 0 auto;}
.performance_text2 p{margin-bottom: 20px;font-size: 15px;}
.seat_img{margin: 0 auto;padding-top: 10px;width: 380px;max-width:100%;background-color: #fff;}
.seat{margin-bottom: 20px;}
.seat p{text-align: center;}
.ve_text{text-align: center;margin-bottom: 20px;}
.venue{width: 360px;max-width:calc(100% - 40px);margin: 0 auto;}
.ticket_btn{margin-bottom: 30px;}
.ve_p{font-size: 13px;}
.attention{width: 380px;max-width:calc(100% - 40px);margin: 0 auto 40px auto;}
.attention p{margin-bottom: 5px;}
.ma{height: 200px;}
.back_btn{width: 150px;height: 50px;border: 1px solid #ffffff;border-radius: 50px;margin: 0 auto;}
.back_btn p{text-align: center;padding-top: 12px;}
.back_btn a{color: #fff;text-decoration: none;}
@media (max-width:1440px) {
  .left_list{position: fixed;left:calc((100% - var(--center-width))/6);z-index: 1;}
  .left_btn{left: 72%;width: 280px;}
}
@media (max-width: 1200px) {
  .text_list p{font-size: 14.5px;}
}
@media (max-width:1024px) {
  .left_list{position: fixed;left:calc((100% - var(--center-width))/9);z-index: 1;}
  .left_btn,.left_text{display: none;}
}
@media (max-width:768px) {
  .left_img,.left_list{display: none;}
}
@media (max-width:385px) {
  .text_list p{font-size: 13px;}
}

.youtube_wrap { position:relative; width:100%; height:0; padding-bottom:177.778%; }
.youtube_wrap iframe { position:absolute; width:100%; height:100%; display:block; top:0; left:0; }

.mb10 { margin-bottom:10px; }
.mb20 { margin-bottom:20px; }
.mb30 { margin-bottom:30px; }
.mb40 { margin-bottom:40px; }
.mb50 { margin-bottom:50px; }

.wrapper, .wrapper-t { padding-top:40px; }
.wrapper, .wrapper-b { padding-bottom:40px; }

.fw_300 { font-weight:300; }
.fw_normal { font-weight:normal; }
.fw_500 { font-weight:500; }
.fw_bold { font-weight:bold; }

.mincho { font-family:"Zen Old Mincho", serif; }
.klee { font-family:"Klee One", cursive; font-weight:400; font-style:normal; }