@charset "UTF-8";
*,*:after,*:before { -webkit-box-sizing:border-box; box-sizing:border-box; }

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video,button,svg { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:middle; background:transparent; -webkit-box-sizing:border-box; box-sizing:border-box; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
nav,ul,li { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:""; content:none; }
a { text-decoration:none; color:inherit; margin:0; padding:0; font-size:100%; vertical-align:baseline; background:rgba(0, 0, 0, 0); }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration:line-through; }
abbr[title],dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input,select { vertical-align:middle; }
img { vertical-align:middle; }
::-moz-selection { color:#ffffff; background:#e60026; text-shadow:none; }
::selection { color:#ffffff; background:#e60026; text-shadow:none; }
html { width:100%; height:100%; font-size:62.5%; font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; color:#ffffff; scroll-behavior: smooth; }
body { width:100%; height:100%; background-color:#000000; }
p,li,h1,h2,h3,h4,h5,h6 { letter-spacing: 1px; }

/******/
/* SP */
/******/

header        { width:100%; height:150vw; background:url("../images/bg_mv750.jpg") center top no-repeat; background-size:contain; position:relative;}
header h1     { position:absolute; top:0; left:0; width:100%; text-align: center;}
header h1 img { width:98%;}
header .parco { position:absolute; width:30%; top:3%; left:3%;}
header .copy  { width:100%; position:absolute; left:0;text-align: center; }
header .copy img { width:35%;}
header .language { position:absolute; width:30%; top:3%; right:8%; text-align:right;}
header .language a {font-size: 15px; letter-spacing:4px; text-decoration:underline; font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;}

main { max-width:750px; margin:0 auto; overflow: hidden;}

h2 { width:100%; text-align:center; z-index:1; position: relative; }
h2 img { width:40%; margin-bottom:64px;}

/* mission */
.mission { width:100%; background:url("../images/bg_mission.jpg") center top no-repeat; background-size:100% auto; position:relative; padding-bottom: 32px; padding: 80px 0; }
.mission p { padding:0 24px; display:block; text-align: center;}
.mission p img { width: 70%;}
.mission .hand      { position:absolute; z-index:0; width:30% ; top:60px; right:0; padding:0; }
.mission .hand2     { position:absolute; z-index:2; width:30% ; top:70px; left:-10px; padding:0; }
.mission .hand img  { width:100%; } 
.mission .hand2 img { width:100%; }

/* story */
.story { width:100%; background:url("../images/bg_story.jpg") center top no-repeat; background-size:100% auto; position:relative; padding-bottom: 32px; padding: 80px 0; }
.story p { padding:0 16%; margin-bottom:32px; display:block; font-size: 16px; line-height:2.4; font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; }
.story p img { width: 70%;}
.story .hand      { position:absolute; z-index:2; width:40% ; top:24px; right:0; }
.story .hand2     { position:absolute; z-index:0; width:40% ; top:28px; left:-10px; }

/* outline */
.outline    { width:100%; position:relative; padding-bottom: 32px; }
.outline .icon { width: 60%; margin-bottom:40px;}
.outline h3 { font-size: 18px; padding:4px 0; color:#000; background: #FFF; text-align: center; width:30%; margin: 0 auto 16px auto; font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; border-radius:4px; }
.outline .hand      { position:absolute; z-index:2; width:40% ; top:-30px; right:0; }
.outline .hand2     { position:absolute; z-index:0; width:40% ; top:-30px; left:-10px; }
.outline p  { text-align:center; font-size:16px; margin-bottom: 32px; font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; letter-spacing:2px; }
.outline .day        { font-size:24px; }
.outline .time       { font-size:26px; }
.outline .notice     { font-size:14px; }
.outline .attention2 { font-size:12px; text-align:left; padding: 0 8%; line-height:2; letter-spacing: 1px; }
.outline .attention2 li      { border-bottom: 1px dashed #333333; margin-bottom: 8px; padding-bottom: 8px; }
.outline .attention2 li span { font-size:12px; padding-left: 4%; display: block; color: #AAAAAA; }
.outline .attention2 li a { color: #0070ef;}

/* ticket */
.ticket    { width:100%; position:relative; padding-top: 80px; }
.ticket h3 { font-size:4vw; text-align:center; color:#fdb300; margin:8px 0; letter-spacing:1px; }
.ticket h4 { font-size:3.5vw; color:#fdb300; letter-spacing:1px; }
.ticket .icon { width: 60%; margin-bottom:40px;}
.ticket p  { font-size:16px; text-align:center; }
.ticket .hand      { position:absolute; z-index:2; width:40% ; top:24px; right:0; }
.ticket .hand2     { position:absolute; z-index:0; width:40% ; top:28px; left:-10px; }
.ticket .day       { font-weight:bold; font-size:18px; z-index:100; margin-bottom:24px;  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;}
.ticket .day span  { color:#fdb300; font-size:24px; vertical-align:baseline; }
.ticket .title     { text-align: center; }
.ticket .title .day{ display:inline-block; background: #FFF; color: #000; border-radius:4px; padding: 4px 16px; }
.ticket .time      { font-weight:bold; font-size:16px; z-index:100; }
.ticket .explain   { font-size:14px; padding-top:44%; margin-bottom: 16px; font-weight:bold; }
.ticket .explain2  { font-size:14px; width:88%; position:absolute; top:12%; left:50%; margin-bottom:16px; font-weight:bold;
                     background: #fdb300; line-height: 1; color: #000000; border-radius: 4px; padding: 8px 0;
                      transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0); }
.ticket .attention { text-align:left; border:1px solid #FFFFFF; padding:4%; margin:16px 5% 32px 5%; border-radius:4px; font-size:14px; line-height:2; background:rgba(0,0,0,0.5); }

.ticket ul            { margin:0 5%; }
.ticket ul li         { background:#FFFFFF; border-radius:4px; color:#333333; padding:4% 3%; margin-top:8px; position:relative; }
.ticket ul li figure  { width:18%; border:1px solid #CCC; float:left; }
.ticket ul li .info   { width:82%; float:left; position:relative; font-weight:bold; padding-left:8px; }
.ticket ul li .info p { font-size:4vw; text-align:left; }
.ticket ul li  a      { font-size:2.6vw; max-width: 28%; position:absolute; right:2%; top:50%; display:block; font-weight:bold; border:2px solid #174591;
                        transform:translate(0, -50%); -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%);
                        color:#174591; text-decoration:none; padding:3% 8% 3% 2%; border-radius:4px; line-height:1; background:url("../images/link.png") right 4px center no-repeat; }
.ticket .tel          { font-size:2.5vw; color:#FFFFFF; background:#003555; padding:4px 6px; border-radius:4px; margin-right:4px; }

.special       { font-size:12px; text-align:left; border:1px solid #FFFFFF; margin:24px 5%  0 5%; border-radius:4px; line-height:2; }
.special h3    { font-size:16px; padding:12px 0; margin:0 0 16px 0; color: #000000; background: #FFFFFF; text-align:center; }
.special h4    { font-size:14px; padding-left:16px; }
.special ul    { padding:4%; }
.special ul li { font-size:14px; background:none; color:#FFFFFF; padding:0; margin:0 0 12px 0; line-height:1.7; }
.special ul li:last-child { margin-bottom:16px; }

/* scary */
.scary    { width:100%; background:url("../images/bg_points.jpg") center top no-repeat; background-size:100% auto; position:relative; padding-top:80px; }
.scary .icon { width: 60%; margin-bottom:48px;}
.scary dl { padding:0 8% 10% 8%;}
.scary dt { text-align: center; width: 90%;}
.scary dd { padding: 0 8% 10% 8%; font-size:15px; line-height:170%;}
.scary .map { display: block; width: 80%; margin: 0 auto; }

/* yami */
.yami-gomi { margin-top: 80px;
 padding: 8% 8% 0 8%;
 background-color: #121d3b;
 background-image:url("../images/yami_bg_b.jpg"),url("../images/yami_bg_t.jpg");
 background-repeat:no-repeat,no-repeat;
 background-position:center bottom ,center top;
 background-size:contain,contain;
 }
.yami-gomi h2 img { width: 50%; }
.yami-gomi h3 { font-size:16px; text-align: center; color:#fdb300; margin-bottom:16px; }
.yami-gomi h4 { font-size:16px; text-align: center; font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; margin-bottom: 16px; }
.yami-gomi h4 span {font-size:16px; ;text-decoration: underline; text-underline-offset:0.4rem;}
.yami-gomi p  { font-size:14px; text-align:left; margin-bottom: 8%;}

.event    { width:100%; background:url("../images/event_bg.jpg") center top no-repeat; background-size:100% auto; position:relative; }
.event h2 img { width: 64%; margin-bottom: 0; }
.event h3 { font-size:18px; color:#fdb300; margin:12px 0 0 0; letter-spacing:1px; }
.event h4 { font-size:20px; letter-spacing:1px; margin:4px 0 0 0; line-height: 1.3;}
.event p  { font-size:14px; margin:8px 0 0 0; letter-spacing:0px; }
.event li { position: relative; padding:0 0 20px 0; margin:20px 0 0 0;}
.event li span {font-size:12px; padding:2px 8px; font-weight:bold; margin-left: 8px;/* position:absolute; z-index:100; top:12px; left:3%;*/ color:#000; border-radius:9999px; background-color:#fdb300; vertical-align: text-bottom; }
.event .menu {display: flex; align-items: center;}
.event .takeout { color:#000; border-radius:4px; padding:4px; text-align:center; width:50%; }
.event .on  {background-color:#fdb300; }
.event .off {background-color:#555555; }
.event .price { font-size:16px; letter-spacing:1px; font-weight:bold; }
.event .long {font-size: 14px; }
.event .hand      { position:absolute; z-index:2; width:40% ; top:24px; right:0; }
.event .hand2     { position:absolute; z-index:0; width:40% ; top:28px; left:-10px; }

.tab_container {  padding-top:40px;  margin: 0 5%;}
.tab_item {  width: calc(96%/2);  padding:4px 0 2px 0;  border: 1px solid #fdb300 ;  background-color: none;  text-align: center;  color: ##fdb300 ;  display: block;  float: left;  text-align: center; font-size:20px;  font-weight: bold;  border-radius: 8px;  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;}
.tab_item:hover {  /*opacity: 0.75;*/}
input[name="tab_item"] {  display: none;}
.tab_container .tab_item:nth-of-type(2) { margin-left: 4%;}
.tab_content { display: none; padding:5%; clear: both; overflow: hidden; border: 1px solid #fdb300 ; border-radius:0 0 8px 8px; }
.tab_content img {width: 100%;}
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content {  display: block;}
.tab_container input:checked + .tab_item {  background-color: #fdb300 ;  color: #000;  border-radius: 8px 8px 0 0;  padding:12px 0 10px 0; }

footer            { width:100%; position:relative; padding-top: 64px; }
footer h2 img     { width: 70%; padding-bottom:40px; }
footer h3         { text-align:center; color:#fdb300; padding-top:80px; }
footer p          { font-size:4.5vw; text-align:center; }
footer .organizer { font-weight: bold; margin-bottom: 64px; }
footer .info      { margin-bottom: 64px; }
footer .rogo      { margin:0 auto 64px auto; width: 50%; padding-bottom:40%;}
footer .copy      { font-size:2vw; padding-bottom: 24px; z-index: 100; position: absolute; bottom:0; text-align: center; width: 100%; }
footer .seyanen   { position: absolute; bottom: 0; left: 0; z-index: 1;}
footer .flag_l    { position: absolute;  width:40%; bottom:15%; left: -5%; z-index: 0;}
footer .flag_r    { position: absolute;  width:30%; top:   -5%; right:0; z-index: 0;}

/* micro clearfx */
.cf:before, .cf:after {
    content:"";
    display:table
}
.cf:after { clear:both }

@media screen and (min-width:751px) {
  main,footer {
    max-width:480px; margin:0 auto;
  }
}


@media screen and (min-width:751px) {
header.pc     { max-width:1080px; height:78.2608vw; max-height: 845px; margin: 0 auto; background:url("../images/bg_mv_pc.jpg") no-repeat; background-size:contain; }
header h1     { width:54.3%; margin:0 auto; left:50%; transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0); }
header .parco { width:150px; margin: 0 auto; }
header .hand  { width:54%; max-width:750px; left:50%; transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0); }
header .copy  { width:100%; text-align: center; }
header .copy img  { width:16%; }
header .seyanen  { width:37%; left: 22%; bottom:2%; }
header .wave  { width:100%; max-width:480px; position: absolute; left:50%; bottom: 0; transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0); }

/*.outline    { padding-bottom: 64px; }
.outline h2 { top:40px; left:50%; }
.outline h3 { margin-top:32px; }
.outline p  { font-size:18px; }
.outline .hand       { top:32px; left:0;}
.outline .day        { font-size:24px; padding-top:200px; }
.outline .day span   { font-size:32px; }
.outline .time       { font-size:24px; }
.outline .time span  { font-size:16px; }
.outline .attention  { font-size:14px; border:1px solid #FFFFFF; padding:3%; margin:24px 12%  0 12%; }
.outline .attention2 { font-size:14px; }
.outline .attention2 li span { font-size:12px; padding-left:12px; }

.ticket h2 { top:32px; }
.ticket h3 { font-size:18px; margin:8px 0 16px 0; }
.ticket h4 { font-size:14px; }
.ticket p  { font-size:20px; }
.ticket .hand      { top:56px; }
.ticket .hand2     { top:56px; }
.ticket .day       { font-size:20px; letter-spacing:1px; }
.ticket .day span  { font-size:32px; }
.ticket .explain   { font-size:20px; padding-top:240px; margin-bottom:16px; }
.ticket .explain2  { font-size: 16px; top: 15%; }
.ticket .attention { font-size:12px; margin:16px 4% 32px 4%; border-radius:8px; }


.special       { font-size:12px;margin:24px 8%  0 8%; }
.special ul    { padding: 0 4%; margin: 0; }
.special ul li { font-size:12px; }

.yami-gomi h3 { font-size:20px; margin-bottom: 16px; }
.yami-gomi h4 { font-size:18px; margin-bottom: 16px; }
.yami-gomi h4 span {font-size:24px; }
.yami-gomi p  { font-size:16px; margin-bottom: 8%; line-height: 1.8;}

.event h3 { font-size:16px;  }
.event h4 { font-size:18px; }
.event p  { font-size:14px; }
.event li span {font-size:12px;  }
.tab_item {font-size: 20px;}
.event .price { font-size: 16px; letter-spacing:1px; font-weight:bold; }
.event .long {font-size: 16px; }
*/

.ticket ul { margin:0 4%; }
.ticket ul li .info p { font-size:16px; padding-bottom:4px;}
.ticket ul li a       { font-size:14px; max-width:30%; padding:3% 10% 3% 2%; }
.ticket ul li a:hover { color:#FFFFFF; background:#174591; padding:3% 6% 3% 6%; }
.ticket .tel { font-size:16px; }

footer p  { font-size:18px; }
footer .copy { font-size: 12px; }
}

/* Move */
.sa            { opacity: 0; transition: all 1.5s ease; }
.sa.show       { opacity: 1; transform: none;}  
.sa--lr        { transform: translate(-15px, 0);}  
.sa--rl        { transform: translate(15px, 0);}  
.sa--up        { transform: translate(0, 15px);}  
.sa--down      { transform: translate(0, -15px);}  
.sa--scaleUp   { transform: scale(.5); }
.sa--scaleDown { transform: scale(1.5); }
.sa--rotateL   { transform: rotate(180deg);}  
.sa--rotateR   { transform: rotate(-180deg); }


h3 { font-size:5.33333vw; line-height:1.56; font-weight:bold; }

@media screen and (min-width:751px) {
  h3 { font-size:2.5vh; }
}

img {  width:100%;}

@media screen and (max-width:750px) {
  .pc { display:none !important; }
}

@media screen and (min-width:751px) {
  .sp { display:none !important; }
}

.bold { font-weight:bold !important; }

a { text-decoration: underline;}

@media screen and (min-width:751px) {
  section .anchor { top:-5vh; }
}