@charset "utf-8";

@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');

@media screen and (min-width: 671px) {
/* reset css */
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 { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }body { line-height: 1; }article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }nav ul { list-style: none; }blockquote, q { quotes: none; }blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }/* change colours to suit your needs */ins { background-color: #ff9; color: #000; text-decoration: none; }/* change colours to suit your needs */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; }/* change border colour to suit your needs */hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }input, select { vertical-align: middle; }


/*
 * defaut style
 */
html { height: 100%; overflow-y: scroll; font-size:1.55vw; letter-spacing:-0.03rem; }
body { /* min-height:100%; */  font-size: 100%; color: #564b6d; /* min-width: 1000px; */ overflow: hidden; word-wrap: break-word; }
body { font-family:'Noto Sans JP',	"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
table { word-break: break-word; }
img { max-width: 100%; height: auto; width: auto; vertical-align: bottom; border: none; }
li { list-style-type: none; }
ol { margin-bottom:1.5em; }
ol li {  margin-left:20px; padding-left:5px; list-style-type:decimal; margin-bottom:0.5em; }
p { margin-bottom: 2em; line-height:160%; }
p:last-child { margin-bottom:0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
sup { position: relative; font-size: 100%; top: -5px; }
sub { position: relative; font-size: 100%; bottom: -5px; }
.clearfix { *zoom: 1; }
.clearfix:after { content: ''; display: block; clear: both; height: 0; margin-top: -1px; }
.sp { display: none!important; }
.center { text-align:center; }
.pc-center { text-align:center; }
.right { text-align:right; } 
.pc-right { text-align:right; } 
strong { /* color:#C00; */ }
em { /* color:#960; */ font-weight:bold; font-style:normal; }
* { box-sizing:border-box; }


#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 999;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 29px;
  height: 29px;
  margin-top: -14px;
  margin-left: -14px;
  text-align: center;
  color: #333;
  z-index: 1000;
}


/*
 * header & footer
 */
#container { position:relative; z-index:2; }
body.loading #container { visibility:hidden; }

#header { display:none; }

#footer { position:relative; padding-bottom:3rem; }
#footer .pagetop { position:fixed; z-index:99; right:50px; bottom:20px; max-width:90px; transform:translateY(150%); transition:0.5s ease-in-out; }
#footer .pagetop.show { transform:translateY(0%); }
#footer .pagetop img { width:100%; }
#footer .pagetop a:hover { opacity:0.7; }
#footer .app-footer { background:#f4d120; padding:1.5rem 0; }
#footer .app-footer > .inner { max-width:1100px; margin:0 auto; }
#footer .app-footer .box { position:relative; max-width:34.18181818181818%; margin:0 auto; }
#footer .app-footer .app-icon { width:21.80851063829787%; position:absolute; left:0; top:0; }
#footer .app-footer .app-spec { padding-left:27.65957446808511%; }
#footer .app-footer .app-dl { position:relative; margin-top:1.5rem; }
#footer .app-footer .app-dl li:nth-child(1) { width:46.54255319148936%; }
#footer .app-footer .app-dl li:nth-child(2) { width:49.20212765957447%; position:absolute; right:0; top:0; }
#footer .copy-footer > .inner { max-width:1100px; margin:0 auto; }
#footer .sns { text-align:center; margin:3rem 0 2rem; }
#footer .sns li { width:4.27272727272727%; margin-right:1.5%; }
#footer .sns li:last-child { margin-right:0; }
#footer .corp-logo { display:block; margin:1.5rem 0; text-align:center; }
#footer .corp-logo li { display:inline-block; }
#footer .corp-logo li:nth-child(1) { width:13.18181818181818%; margin-right:2%; }
#footer .corp-logo li:nth-child(2) { width:17.45454545454545%; }

#footer .copyright { text-align:center; }


/*
 * contents
 */
.contents { }
.content-wrapper { }
.main-content {  }


/* anime */
@keyframes move-x {
    0% { transform:translateX( -60.5%); }
  100% { transform:translateX(  0px); }
}

@keyframes move-x2 {
    0% { transform:translateX( 7.5%); }
  100% { transform:translateX(  0px); }
}


@keyframes baunce-ex {
	
  0% {
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  20% {
    transform:  scaleX(1.08) scaleY(1.08) ;
  }
  26% {
    transform:  scaleX(0.90) scaleY(0.90) ;
  }
  35% {
    transform:  scaleX(1.05) scaleY(1.05) ;
  }
  42% {
    transform:  scaleX(0.95) scaleY(0.95) ;
  }
  49% {
    transform:  scaleX(1.03) scaleY(1.03) ;
  }
  55% {
    transform:  scaleX(0.98) scaleY(0.98) ;
  }
	60% {
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
}


/* 汎用 */
.red { color:#e71f19; }
.green { color:#009d42; }
.blue { color:#0099ff; }
.note { line-height:140%; }
.underline { text-decoration:underline; }
.underline:hover { text-decoration:none; }
.btn01 a { display:block; width:62.2%; margin:0rem auto 1.8rem; border:2px solid #76491b; background:#fff; color:#76491b; border-radius:50px; font-size:1.875rem; padding:2rem; position:relative; text-align:center; }
.btn01 a:after { display:block; content:""; background:url(../img/ico_arrow01.png) no-repeat left top; background-size:cover; width:20px; height:22px; position:absolute; right:3.89408099688474%; top:50%; transform:translateY(-50%);	}
.btn01 a:hover { text-decoration:none; opacity:0.7; }

body > .canvas {
    position: fixed;
		z-index:1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
		opacity:0.5;
}

.special-area .canvas2 {
	position: absolute;
	z-index:1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity:1;
}

canvas {
    display: block;
}

/* content */
.sns {position: absolute;top: 15px;right: 0;z-index: 3;}
.sns ul {font-size: 0;}
.sns ul li {display: inline-block;}
.sns ul li:not(:last-of-type) {margin-right: 10px;}
#footer .sns {position: static; }


.visual-area { padding-bottom:2rem; position:relative; height: 652px; }
.visual-area > .inner { max-width:1020px; margin:0 auto; position:relative; padding-top:1px; }
.visual-area .bg { position: absolute; left:0; top: -400px; width:100%; height: 1150px; background:url(../img/bg.jpg) no-repeat; background-size:cover; z-index: -1;}
.visual-area .video-wrapper { position: absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; }
.visual-area .video-wrapper video { max-width:none;  opacity:0.8; }
.visual-area .video-wrapper #video { display: none;  position: absolute; left: 0; top: -400px; min-width: 100%; min-height: 100%; width: auto; height: auto;}
.visual-area h1{ opacity: 0; position: absolute; top: 120px; left: 192px; }
.visual-area .ball{ position: absolute; z-index: 1; top: 162px; left: 786px; }
.visual-area .note{ position: absolute; top: 85px; left: 708px; }
.visual-area .train{ width: 750px;  position: absolute; top: 238px; left: 164px; }
.visual-area .load { width: 750px;  position: absolute; top: 314px; left: 165px; }
.visual-area .catch {position: absolute; top: 386px; left: 285px;}
.visual-area .notes { width:12.94117647058824%; position:absolute; left:76.901961%; top:0%; margin-top:20rem; }
.visual-area .notes a:hover { opacity:0.7; }

.visual-area .title01,
.visual-area .title02,
.visual-area .title03,
.visual-area .title04,
.visual-area .title05,
.visual-area .catch,
.visual-area .notes  { opacity:0; }

#gnav { position: relative; background:#e94c2f; transition:0.5s ease-in-out; }
#gnav.show { transform:translateY(0%); position:fixed; left:0; top:0; width:100%; z-index:15; }

#gnav ul { position:relative; max-width:995px; width:97.64705882352941%; margin:0 auto; padding:1.8rem 0; }
#gnav li { float:left; position:relative; }
#gnav li:before { content:""; background:#fff; width:1px; height:100%; display:block; position:absolute; left:0; top:0; z-index:2; }
#gnav li:nth-child(1) { width:15%; }
#gnav li:nth-child(2) { width:13.9%; }
#gnav li:nth-child(3) { width:15.4%; }
#gnav li:nth-child(4) { width:17.2%; }
#gnav li:nth-child(5) { width:17.6%; }
#gnav li:nth-child(6) { width:17.5%; }
#gnav li:nth-child(6):after { content:""; background:#fff; width:1px; height:100%; display:block; position:absolute; right:0; top:0; z-index:2; }
#gnav img { position:relative; z-index:1; }
#gnav a:hover { opacity:0.7; }

.btn-ticket { /*position:relative; width:100%; margin:0 auto; z-index:20;*/ }
.btn-ticket > .btn { /*position:absolute; right:50px; top:0; width:20%;*/ }
.btn-ticket .btn { position:fixed; right:50px; bottom:6rem; margin-top:0; z-index:20; transform:translateY(160%); transition:0.5s ease-in-out;  }
.btn-ticket .btn.show { transform:translateY(0%); }
.btn-ticket .btn a:hover { opacity:0.7; }


.notice-area {}
.notice-area > .inner { max-width:1100px; margin:0 auto; position:relative; padding:0 0 2rem; }
.notice-area .box { background:#ffc3e3; font-size:1.125rem; margin:1.9rem 1.81818181818182%; padding:2rem 1.81818181818182%; }
.notice-area .box p { line-height:180%; }


.notice{
	position: relative;
	z-index: 10;
	padding-top: 50px;
	background-color: #fff;
}
.notice .inner {
	width: 525px;
	margin: 0 auto;
}
.notice h2{
	margin-bottom: 30px;
	font-size: 24px;
	text-align: center;
}
.notice h2 br{
	display: none;
}
.notice p{
	margin-bottom: 25px;
	text-align: center;
}
	.notice p:last-child {
		margin-bottom: 70px;
	}
.notice::after{
	display: block;
	content: '';
	width: 600px;
	height: 1px;
	background-color: #333;
	margin: 0 auto;
}

.cast-area { padding-top:82px; margin-top:-82px; background-color: #fff; }
.cast-area > .inner { max-width:1100px; margin:0 auto; position:relative; padding:2rem 0 0;}
.cast-area h2 { width:48.72727272727273%; margin:0 auto 20px; }
.cast-area h3 { margin-bottom: 20px; text-align: center;} 
.cast-area ul { font-size: 0; text-align: center;}
.cast-area ul li {display: inline-block;}
.cast-area ul li .name { font-size: 29px; text-align: center; line-height: 1; color: #e94c30;}
.cast-area ul li .name span { display: block; font-size: 16px; line-height: 1.5; letter-spacing:1px;}
.cast-area .list01 { margin-bottom: 100px;}
.cast-area .list01 ul.character {margin-bottom: 10px;}
.cast-area .list01 ul.character li {vertical-align: middle;}
.cast-area .list01 ul.character li:nth-child(1) { margin: 0 52px;}
.cast-area .list01 ul.character li:nth-child(2) { margin: 0 68px;}
.cast-area .list01 ul.character li:nth-child(3) { margin: 0 92px;}
.cast-area .list01 ul.character li:nth-child(4) { margin: 0 35px 0 40px;}
.cast-area .list01 ul.cast li {margin-right: 115px;}
.cast-area .list01 ul.cast li:last-child{ margin-right: 0;}
.cast-area .list02 { margin-bottom: 100px;} 
.cast-area .list02 ul.character {margin-bottom: 25px;}
.cast-area .list02 ul.character li:nth-child(2) { margin-right: 40px;}
.cast-area .list02 ul.character li:nth-child(3) { margin-right: 30px;}
.cast-area .list02 ul.character li:nth-child(4) { margin-right: 25px;}
.cast-area .list02 ul.character li:last-child { margin-left: -2px;}
.cast-area .list02 ul.cast li {margin-right: 20px;}
.cast-area .list02 ul.cast li:nth-child(1) { margin-right: 172px;}
.cast-area .list02 ul.cast li:last-child{ margin-right: 0;}
.cast-area .list03 { margin-bottom: 100px;} 
.cast-area .list03 ul.character {margin-bottom: 20px;}
.cast-area .list03 ul.character li:nth-child(1) { margin-right: 40px;}
.cast-area .list03 ul.cast li:nth-child(1) { margin-right: 112px;}
.cast-area .list04 {padding: 22px 0 18px; background-color: #f5f4f6; border-radius: 25px;}
.cast-area .list04 p {font-size: 36px; color: #564b6d; margin-bottom: 15px; text-align: center;}
.cast-area .list04 li { position: relative; margin: 0 25px; }
.cast-area .list04 li .chara { margin-bottom: 5px;}
.cast-area .list04 li .cast { position: absolute; top: 160px; right: -36px;}
.cast-area .list04 li .name { text-align: left;}
.cast-area .list04 li .name span {font-size: 15px;}
.cast-list { position:relative; margin-bottom: 48px; }
.cast-area #more-text { position: relative; width: 390px; height: 50px;  margin: 0 auto 46px;}
.cast-area #more-text p { position: absolute;}
.cast-area #more-text p.text1 {top: 0; left: -4px;}
.cast-area #more-text p.text2 {top: 0; left: 17px;}
.cast-area #more-text p.text3 {top: 0; left: 38px;}
.cast-area #more-text p.text4 {top: 0; left: 60px;}
.cast-area #more-text p.text5 {top: 0; left: 104px;}
.cast-area #more-text p.text6 {top: 0; left: 140px;}
.cast-area #more-text p.text7 {top: 0; left: 201px;}
.cast-area #more-text p.text8 {top: 0; left: 257px;}
.cast-area #more-text p.text9 {top: 0; left: 300px;}
.cast-area #more-text p.text10 {top: 0; left: 317px;}
.cast-area #more-text p.text11 {top: 0; left: 366px;}
.cast-area #more-text p.text12 {top: 0; right: 0;}
	
.ticket-area { padding-top:178px;}
.ticket-area > .inner { max-width:1100px; margin:0 auto; position:relative;}
.ticket-area h2 { width:48.72727272727273%; margin:0 auto 3rem; }
.ticket-area h3 { width:39%; margin:2rem auto 0; }
.ticket-area .btn { width:39.81818181818182%; margin:1.5rem auto; }
.ticket-area .btn:hover { opacity:0.7; }
.ticket-area .txt04 { padding-top: 20px; margin-bottom: 15px;}
.ticket-area .notes { width:12.90909090909091%; position:absolute; left:83.36363636363636%; top:9rem; }
.ticket-area .notes:hover { opacity:0.7; }
.cd-info { background:#f5f4f6; width:800px; margin:0 auto 50px; padding:2.18181818181818%; position:relative; }
.cd-info .thumb { width:21.33333333333333%; }
.cd-info .texts { width:64.88888888888889%; position:absolute; top:18px; left:26.27939142461964%; }
.ticket-caption { font-size:0.875rem; margin:2rem 0 0; }

.goods-area { padding-top:82px; margin-top:-82px; }
.goods-area > .inner { max-width:1100px; margin:0 auto; position:relative; padding:6rem 0 4rem; }
.goods-area h2 { width:48.72727272727273%; margin:0 auto 4.8rem; text-align: center;}
.goods-list { position:relative; margin:1.5rem 0 2.5rem; display:flex; flex-wrap: wrap; }
.goods-list .item { position:relative; margin-left:4.54545454545455%; margin-bottom:2rem; width:28%; }
.goods-list .item:nth-child(3n+1) { margin-left:3.63636363636364%; }
.goods-list .item:before { display:block; content:""; position:absolute; left:0; top:0; background:url(../img/img_good_lt.png) no-repeat; background-size:auto; width:20px; height:20px; z-index:2; transition:0.1s ease-in-out;}
.goods-list .item:after { display:block; content:""; position:absolute; right:0; top:0; background:url(../img/img_good_rt.png) no-repeat; background-size:auto; width:20px; height:20px; z-index:2; transition:0.1s ease-in-out;}
.goods-list .item .img { position:relative; background:#fff; }
.goods-list .item .img:before { display:block; content:""; position:absolute; left:0; bottom:0; background:url(../img/img_good_lb.png) no-repeat; background-size:auto; width:20px; height:20px; z-index:2; transition:0.1s ease-in-out;}
.goods-list .item .img:after { display:block; content:""; position:absolute; right:0; bottom:0; background:url(../img/img_good_rb.png) no-repeat; background-size:auto; width:20px; height:20px; z-index:2; transition:0.1s ease-in-out;}
.goods-list a.item:hover:before { left:-5px; top:-5px; background:url(../img/img_good_lt_on.png) no-repeat; }
.goods-list a.item:hover:after { right:-5px; top:-5px; background:url(../img/img_good_rt_on.png) no-repeat; }
.goods-list a.item:hover .img:before { left:-5px; bottom:-5px; background:url(../img/img_good_lb_on.png) no-repeat; }
.goods-list a.item:hover .img:after { right:-5px; bottom:-5px; background:url(../img/img_good_rb_on.png) no-repeat; }
.goods-list .item .text { position:absolute; bottom:0; width:100%; }
.goods-list .item .name { font-size:1.125rem; text-align:center; margin-bottom:0.3rem; font-weight:600; line-height:120%; }
.goods-list .item .size { font-size:0.875rem; text-align:center; margin-bottom:1rem; margin-bottom:0.5rem; font-weight:300; letter-spacing:1px; line-height:120%; }
.goods-list .item .size span { font-size:0.75rem; }
.goods-list .item .price { font-size:1.625rem; text-align:center; display:block; margin:0 0 0.4rem;  }
.goods-list .item .price span { font-size:1rem; }
.good-caption { margin-top:-30px; }
.goods-list .coming-soon {width: 100%; text-align: center;}

.goods-area .box { position:relative; width:89.09090909090909%; height:30rem; margin:-2rem auto 0; }
.goods-area .box:before { display:block; content:""; position:absolute; left:0; top:0; background:url(../img/img_good_lt.png) no-repeat; background-size:auto; width:20px; height:20px; z-index:2; }
.goods-area .box:after { display:block; content:""; position:absolute; right:0; top:0; background:url(../img/img_good_rt.png) no-repeat; background-size:auto; width:20px; height:20px; z-index:2; }
.goods-area .box > .inner:before { display:block; content:""; position:absolute; left:0; bottom:0; background:url(../img/img_good_lb.png) no-repeat; background-size:auto; width:20px; height:20px; z-index:2; }
.goods-area .box > .inner:after { display:block; content:""; position:absolute; right:0; bottom:0; background:url(../img/img_good_rb.png) no-repeat; background-size:auto; width:20px; height:20px; z-index:2; }
.goods-area .box > .inner > div { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:60.40816326530612%; }
.goods-area .cs { width:92.81818181818182%; margin:2rem auto 0; }

.modal { border:1px solid #564b6d; background:#fff; }
.modal .bg { position:fixed; left:0; top:0; width:100%; height:100%; z-index:-1; pointer-events:none; background:rgba(255,255,255,0.9);}
.mfp-close-btn-in .mfp-close { color:#564b6d; }

.special-area { padding-top:82px; margin-top:-82px; position:relative; }
.special-area .wrapper { background:#ff9f36; overflow:hidden; position:relative; }
.special-area .wrapper > .inner { max-width:1100px; margin:0 auto; position:relative; padding:2rem 0 4rem; z-index:2; }
.special-area h2 { width:48.72727272727273%; margin:0 auto 3.5rem; }
.special-area h3 {font-size: 30px; font-weight: bold; line-height: 1.4; color: #fff; margin-bottom: 20px;}
.special-area .food {margin-bottom: 70px; text-align: center;}
.special-area .food .block {margin-bottom: 80px;}
.special-area .food .block p {font-size: 22px; color: #fff;}
.special-area .food .block .image { margin-bottom: 40px;}
.special-area .food .block .text {width: 900px; margin: 0 auto; text-align: left;}
.special-area .food .block .text p { text-indent: -1em; padding-left: 1em; margin: 0;}
.special-area .food .block .text p.note { padding-left: 2em; }
.special-area .food .block:nth-of-type(1) .text p:nth-child(2) {text-indent: 0; padding-left: 0; margin-bottom: 20px;}
.special-area .video-box .video { width:87.27272727272727%; height:35rem; margin:1.5rem auto 0rem; position:relative; z-index:2; }

.access-area { padding-top:82px; margin-top:-82px; }
.access-area > .inner { max-width:1100px; margin:0 auto; position:relative; padding:2rem 0 1.5rem; }
.access-area h2 { width:48.72727272727273%; margin:0 auto 2rem; }
.access-area .address { text-align:center; line-height:180%; }
.access-area .addr01 { font-size:1.625rem; margin-bottom:0.4rem; font-weight:bold; }
.access-area .addr02 { font-size:1.25rem; }
.access-area .addr03 { font-size:1rem; }

.notes-area { padding-top:82px; margin-top:-82px; }
.notes-area > .inner { max-width:1100px; margin:0 auto; position:relative; padding:2rem 0 4rem; }
.notes-area h2 { width:48.72727272727273%; margin:0 auto 2rem; }
.notes-area p { margin:0 38px; line-height:2; }
.notes-area h3 { font-size:1.75rem; color:#e94c2f; font-weight:400; margin:2rem 3.63636363636364% 0.6rem; cursor: pointer; border-bottom: 2px dotted; padding-bottom: 16px;}
.notes-area h3 span { position: relative; }
.notes-area h3 span::after { content:"▼"; font-size: 20px; position: absolute; top: 4px; right: -30px;}
.notes-area h3.active span::after { content:"▲"; font-size: 20px; position: absolute; top: 4px; right: -30px;}
.notes-area .box {display: none; }
.notes-area .box p { text-indent: -1rem; padding-left: 1rem;}
.notes-area .box p.text {padding-left: 0; text-indent: 0; margin-bottom: 2rem;}
.notes-area ul { margin: 0 38px; padding-left: 1rem;}
.notes-area ul li { line-height: 2;}


@media screen and (min-width: 1001px) {
	html { font-size:16px; }	
}