@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:#97e966; 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; }
.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;  opacity:0.8; }
.visual-area .title { position:relative; margin-top:8.5rem; }
.visual-area .title01 { width:64.50980392156863%; position:relative; left:7.25490196078431%; 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:9.50980392156863%; position:absolute; left:72.84313725490196%; top:0%; margin-top:0.5rem; }
.visual-area .title02.animated { opacity:1!important; }
.visual-area .title03 { width:10.68627450980392%; position:absolute; left:83.23529411764706%; top:0%; 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:57.05882352941176%; margin:0.5rem auto; }
.visual-area .title05 { width:26.56862745098039%; margin:0.5rem auto; }
.visual-area .title05.moved { animation:baunce-ex 2s ease 0s forwards; }
.visual-area .catch { width:46.86274509803922%; margin:2rem auto 0; }
.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 { background:#ff279b; 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.17587939698492%; }
#gnav li:nth-child(2) { width:14.07035175879397%; }
#gnav li:nth-child(3) { width:17.28643216080402%; }
#gnav li:nth-child(4) { width:17.78894472361809%; }
#gnav li:nth-child(5) { width:17.68844221105528%; }
#gnav li:nth-child(6) { width:17.98994974874372%; }
#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 input: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%; }

.cast-area { padding-top:82px; margin-top:-82px; }
.cast-area > .inner { max-width:1100px; margin:0 auto; position:relative; padding:2rem 0 2rem; }
.cast-area .title { width:48.72727272727273%; 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:12.09090909090909%; position:relative; left:8.363636%; }
.cast-char-list .item02 { color:#e42939; width:13.45454545454545%; left:31.363636%; }
.cast-char-list .item03 { color:#3f9ed3; width:11.18181818181818%; left:57.090909%; }
.cast-char-list .item04 { color:#deb41c; width:13.72727272727273%; left:79%; }
.cast-char-list .item05 { color:#7d7ba8; width:13.81818181818182%; position:relative; left:8.45454545454545%; }
.cast-char-list .item06 { color:#cc77d1; width:13.36363636363636%; left:22.63636363636364%; }
.cast-char-list .item07 { color:#c25e5e; width:10.63636363636364%; left:39%; }
.cast-char-list .item08 { color:#b2ac40; width:11.09090909090909%; left:51.90909090909091%; }
.cast-char-list .item09 { color:#77ba5d; width:12.63636363636364%; left:64.36363636363636%; }
.cast-char-list .item10 { color:#54bcbc; width:15%; left:77%; }
.cast-char-list .item99 { color:#54bcbc; width:87.54545454545455%; position:relative; left:7.363636%; margin-top:3rem; }
.cast-char-list .item03 .name { margin-left:-2rem; }
.cast-char-list .item04 .name { margin-left:-3rem; }
.cast-char-list .item07 .name { margin-left:-2rem; }

.cast-list { position:relative; margin:1.5rem 0; }
.cast-list .item { position:absolute; bottom:0; width:14%; }
.cast-list .item .name { font-size:2.25rem; text-align:center; margin-top:1rem; font-weight:300; white-space:nowrap; width:120%; transform:translateX(-50%); left:50%; position:relative; }
.cast-list .item .name span { font-size:1rem; display:block; margin:0 0 0.4rem; letter-spacing:1px; }
.cast-list .item01 { color:#ff279b; position:relative; left:7.18181818181818%; }
.cast-list .item02 { color:#ff279b; left:31.27272727272727%; }
.cast-list .item03 { color:#ff279b; left:55.18181818181818%; }
.cast-list .item04 { color:#ff279b; left:79.27272727272727%; }
.cast-list .item05 { color:#ff279b; position:relative; left:8.45454545454545%; }
.cast-list .item07 { color:#ff279b; left:36.72727272727273%; }
.cast-list .item08 { color:#ff279b; left:50.81818181818182%; }
.cast-list .item09 { color:#ff279b; left:65%; }
.cast-list .item10 { color:#ff279b; left:79.18181818181818%; }
.cast-list02 .item { width:12.63636363636364%; }
.cast-list02 .item .name { font-size:1.8rem; }

.cast-caption { font-size:0.875rem; margin:2rem 0 0; }


.ticket-area { padding-top:82px; margin-top:-82px; }
.ticket-area > .inner { max-width:1100px; margin:0 auto; position:relative; padding:2rem 0 0rem; }
.ticket-area .title { 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 .txt01 { width:64.18181818181818%; margin:2rem auto; }
.ticket-area .txt02 { width:46.3636363636364%; margin:2rem auto; }
.ticket-area .txt03 { width:54.72727272727273%; margin:2rem auto; }
.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:65.72727272727273%; margin:0 auto; padding:2.18181818181818%; position:relative; }
.cd-info .thumb { width:21.33333333333333%; }
.cd-info .texts { width:64.88888888888889%; position:absolute; top:1.5rem; 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:2rem 0 4rem; }
.goods-area .title { width:48.72727272727273%; margin:0 auto 3rem; }
.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-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:#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:48.72727272727273%; margin:0 auto 2rem; }
.special-area .title02 { font-size:1.875rem; color:#564b6d; text-align:center; font-weight:normal; }
.special-area .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 .title { 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 .title { width:48.72727272727273%; margin:0 auto 2rem; }
.notes-area p { margin:0 3.63636363636364%; line-height:200%; }
.notes-area h3 { font-size:1.75rem; color:#ff279b; font-weight:400; margin:2rem 3.63636363636364% 0.6rem; }



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