@charset "utf-8";

@media screen and (max-width: 670px) {

/* 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:2.65vw; letter-spacing:-0.03rem; }
body { color:#564b6d;  word-wrap:break-word; background:#fff;}
body { font-family:'Noto Sans JP',	"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
table { word-break:break-word; } 
img,input[type=image],video { max-width:100%; height:auto; width:auto; vertical-align:bottom; border:none; }
li { list-style-type:none; }
ol li {  margin-left:20px; padding-left:5px; list-style-type:decimal; margin-bottom:0.5em; }
p { margin-bottom:1.5em; line-height:150%; }
p:last-child { margin-bottom:0; }
a { color: inherit; text-decoration: none; }
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; }
.pc { display:none!important; }
.sp { display:block; }
img.sp { display:inline-block; }
.center { text-align:center; }
.right { text-align:right; } 
strong { /* color:#C00; */ }
em { /* color:#960; */ font-weight:bold; font-style:normal; }
* { box-sizing:border-box; }
.container iframe {/*  max-width:100%; height:200px; */ }
iframe[name=google_conversion_frame] { display:none; }


#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 .header-gnav { /* display:none; */ position:absolute; z-index:3; width:100%; background:#ff279b; top:0; padding-top:0px; height:calc(0px); overflow: auto; -webkit-overflow-scrolling: touch; transition:0.5s ease-in-out; }
#header .header-gnav.isopen { height:calc(100vh - 40px); padding-top:40px; /* display:block; */ }
#header .header-gnav > ul { margin:0 9.375%; }
#header .header-gnav > ul > li > a { line-height:140%; display:block; color:#fff; border-bottom:1px solid #fff; padding:2rem 0; font-weight:bold; text-align:center; }
#header .header-gnav > ul > li > a > img {  width:33.65384615384615%; }
#header .header-gnav > ul > li .sub { display:block!important; }
#header .header-gnav > ul > li .sub > ul > li > a { line-height:140%; display:block; color:#fff; background:#3c3c3c; border-bottom:1px solid #444; padding:8px 20px 8px 30px; font-size:12px; }
#header #sp-menu .btn { display:block!important; z-index:4; cursor:pointer; display:block; width:9.0625%; position:absolute; right:10px; top:10px; transition:0.3s ease-in-out; }
#header #sp-menu.isopen .btn { background:url(../img/sp/btn_sp_menu_close.png) no-repeat!important; background-size:cover!important; }
#header #sp-menu.isopen .btn img { opacity:0; }



#footer { position:relative; padding-bottom:14rem; }
#footer .pagetop { position:fixed; z-index:99; right:10px; bottom:9rem; max-width:90px; transform:translateY(360%); transition:0.5s ease-in-out; width:10.9375%; }
#footer .pagetop.show { transform:translateY(0%); }
#footer .pagetop img { width:100%; }
#footer .app-footer { background:#97e966; padding:1.5rem 0; }
#footer .app-footer > .inner { max-width:1100px; margin:0 auto; }
#footer .app-footer .box { position:relative; max-width:59.84375%; 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:10%; margin-right:3.90625%; }
#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:28.75%; margin-right:4%; }
#footer .corp-logo li:nth-child(2) { width:37.65625%; }

#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:3rem; position:relative;  }
.visual-area > .inner { max-width:1020px; margin:0 auto; position:relative; padding-top:1px; }
.visual-area .bg { position: absolute; left:0; top:0; width:100%; height:100%; background:url(../img/bg_main_dot.png) repeat; background-size:auto; }
.visual-area .video-wrapper { position: absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; background:#fff; }
.visual-area .video-wrapper video { max-width:none; position:relative; top:-5px!important; opacity:0.8; }
.visual-area .title { position:relative; margin-top:18rem; }
.visual-area .title01 { width:71.40625%; position:relative; left:1.40625%; transform:translateX(7.5%); transition:0.3s ease-out; }
.visual-area .title01.moved { animation:move-x2 0.2s ease 1s forwards; }
.visual-area .title02 { width:10.625%; position:absolute; left:73.75%; top:-2%; margin-top:0.5rem; }
.visual-area .title02.animated { opacity:1!important; }
.visual-area .title03 { width:11.5625%; position:absolute; left:85.15625%; top:4%; margin-top:-0.5rem; transform:translateX(-60.5%); transition:0.3s ease-out;  }
.visual-area .title03.moved { animation:move-x 0.2s ease 1s forwards; }
.visual-area .title04 { width:63.125%; margin:0.5rem auto; }
.visual-area .title05 { width:29.53125%; margin:0.5rem auto; }
.visual-area .title05.moved { animation:baunce-ex 2s ease 0s forwards; }
.visual-area .catch { width:73.84375%; margin:7rem auto 0; }
.visual-area .notes { width:20.3125%; position:absolute; left:78.901961%; top:0%; margin-top:26rem; }
.visual-area .notes: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; }


.menu-area { display:none; }

.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:0px; bottom:10px; z-index:20; transform:translate(-50%,120%); transition:0.5s ease-in-out; width:93.75%; left:50%;  }
.btn-ticket .btn.show { transform:translate(-50%,0%); }


.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%; }

.cast-area { }
.cast-area > .inner { max-width:1100px; margin:0 auto; position:relative; padding:2rem 0 2rem; }
.cast-area .title { width:78.454545%; margin:0 auto; }
.cast-char-list { position:relative; }
.cast-char-list .item { position:absolute; bottom:0; }
.cast-char-list .item .name { font-size:1.75rem; text-align:center; margin-top:1.5rem; font-weight:300; white-space:nowrap; }
.cast-char-list .item .name span { font-size:0.875rem; display:block; margin:0.4rem 0 0; letter-spacing:1px; }
.cast-char-list .item01 { color:#ff9700; width:18.59375%; position:relative; left:6.5625%; }
.cast-char-list .item02 { color:#e42939; width:20.78125%; left:27.96875%; }
.cast-char-list .item03 { color:#3f9ed3; width:17.34375%; left:54.375%; }
.cast-char-list .item04 { color:#deb41c; width:21.25%; left:73.59375%; }
.cast-char-list .group { position:relative; }
.cast-char-list .item05 { position:relative; color:#7d7ba8; width:16.5625%; position:relative; left:1.25%; }
.cast-char-list .item06 { color:#cc77d1; width:16.5%; left:16.5625%; }
.cast-char-list .item07 { color:#c25e5e; width:12.34375%; left:36.25%; }
.cast-char-list .item08 { color:#b2ac40; width:12.96875%; left:51.71875%; }
.cast-char-list .item09 { color:#77ba5d; width:15%; left:66.875%; }
.cast-char-list .item10 { color:#54bcbc; width:17.8125%; left:81.09375%; }
.cast-char-list .item99 { color:#54bcbc; width:100%; position:relative; left:0%; margin-top:3rem; }
.cast-char-list .item03 .name { margin-left:-1.8rem; }
.cast-char-list .item04 .name { margin-left:-0rem; }
.cast-caption { font-size:0.875rem; margin:2rem 0 0; }

.cast-list { position:relative; margin:1.5rem 0; }
.cast-list .item { position:absolute; bottom:0; width:37.03125%; }
.cast-list .item .name { font-size:2.4rem; text-align:center; margin-top:1rem; font-weight:300; white-space:nowrap; }
.cast-list .item .name span { font-size:1.2rem; display:block; margin:0 0 0.4rem; letter-spacing:1px; }
.cast-list .item01 { color:#ff279b; left:8.28125%; bottom:0; }
.cast-list .item02 { color:#ff279b; position:relative; left:8.28125%; margin-bottom:2rem; }
.cast-list .item03 { color:#ff279b; left:56.71875%; top:0; }
.cast-list .item04 { color:#ff279b; position:relative; left:56.71875%; margin-bottom:2rem; }
.cast-list .item05 { color:#ff279b; position:relative; left:3.28125%; margin-bottom:2rem; }
.cast-list .item07 { color:#ff279b; left:35.75625%; top:0; }
.cast-list .item08 { color:#ff279b; left:68.375%; top:0; }
.cast-list .item09 { color:#ff279b; position:relative; left:20.15625%; margin-bottom:2rem; }
.cast-list .item10 { color:#ff279b; left:52.96875%; }
.cast-list02 .item { width:28.28125%; }
.cast-list02 .item .name { font-size:2rem; }
.ticket-area { }
.ticket-area > .inner { max-width:1100px; margin:0 auto; position:relative; padding:2rem 0 0rem; }
.ticket-area .title { width:78.454545%; margin:0 auto 2rem; }
.ticket-area h3 { width:67.8125%; margin:2rem auto 0; }
.ticket-area .btn { width:68.75%; margin:1.5rem auto; }
.ticket-area .btn:hover { opacity:0.7; }
.ticket-area .txt01 { width:94.21875%; margin:2rem auto; }
.ticket-area .txt02 { width:78.28125%; margin:2rem auto; }
.ticket-area .txt03 { width:93.90625%; margin:2rem auto; }
.ticket-area .notes { width:20.3125%; position:absolute; left:78.90625%; top:3rem; }
.ticket-area .notes:hover { opacity:0.7; }
.cd-info { background:#f5f4f6; width:93.75%; margin:0 auto; padding:3.125%; position:relative; }
.cd-info .thumb { width:25.35714285714286%; }
.cd-info .texts { width:66.25%; position:absolute; top:1.5rem; left:29.75%; }
.ticket-caption { font-size:0.875rem; margin:2rem 0 0; }


.goods-area { }
.goods-area > .inner { max-width:1100px; margin:0 auto; position:relative; padding:2rem 0 4rem; }
.goods-area .title { width:78.454545%; margin:0 auto 2rem; }
.goods-list { position:relative; margin:1.5rem 0 2.5rem; display:flex; flex-wrap: wrap; }
.goods-list:last-child { margin-bottom:0; }
.goods-list .item { position:relative; margin-left:3.90625%; margin-bottom:2rem; width:45.15625%; }
.goods-list .item:nth-child(2n+1) { margin-left:3.125%; }
.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.2rem; font-weight:600; line-height:120%; }
.goods-list .item .size { font-size:0.875rem; text-align:center; margin-bottom:1rem; margin-bottom:0.2rem; 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.2rem;  }
.goods-list .item .price span { font-size:1rem; }
.good-caption { margin-top:-10px; }

.goods-area .box { position:relative; width:93.75%; height:30rem; margin:-1rem 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:73.83333333333333%; }
.goods-area .cs { width:93.75%; 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 { background:#edf833; position:relative; overflow:hidden; }
.special-area .wrapper { background:#edf833; 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 .title { width:78.454545%; margin:0 auto 2rem; }
.special-area .title02 { font-size:1.3rem; color:#564b6d; text-align:center; font-weight:normal; }
.special-area .video { width:93.75%; height:20rem; margin:1.5rem auto 0rem; position:relative; z-index:2; }

.access-area {}
.access-area > .inner { max-width:1100px; margin:0 auto; position:relative; padding:2rem 0 1.5rem; }
.access-area .title { width:78.454545%; margin:0 auto 2rem; }
.access-area .address { text-align:center; line-height:220%; }
.access-area .addr01 { font-size:2.025rem; margin-bottom:0.4rem; font-weight:bold; }
.access-area .addr02 { font-size:1.4rem; }
.access-area .addr03 { font-size:1.3rem; }
.access-area .map iframe { width:93.75%; height:30rem; margin:0 auto; display:block; }

.notes-area { }
.notes-area > .inner { max-width:1100px; margin:0 auto; position:relative; padding:2rem 0 4rem; }
.notes-area .title { width:78.454545%; margin:0 auto 1rem; }
.notes-area p { margin:0 3.63636363636364%; line-height:200%; font-size:1.3rem; }
.notes-area h3 { font-size:1.75rem; color:#ff279b; font-weight:400; margin:2rem 3.63636363636364% 0.6rem; }


}