@charset "UTF-8";
/*
///////////////////////////////////////////
common
Made by Tomoka Uemura
/////////////////////////////////////
*/

.clearfix:after{display: block;clear: both;content: "";}
html *{box-sizing: border-box;}
img{vertical-align:bottom;}
a:hover{opacity:0.8;transition:opacity .2s ease;}
.t-center{text-align:center;}
.t-right{text-align:right;}
.clearfix::after{content: "";clear: both;display: block;}
html,body{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";}

#loader{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #150301 0%,#000000 100%);z-index:121;transition:all .5s ease;}
#loader > span{display:inline-block;width:100%;text-align:center;color:#999;position:fixed;top:40%;font-family:"Times New Roman", Times, "serif";}
#loader.remove{opacity:0;height:0;top:-1px;}

/* PC */
@media screen and (min-width: 1000px) {
    html,body{background:#150301;}
    header{height:40px;width:100%;background:url(../img/pc/header.png) 50% 0 #fff;box-shadow:0 0 20px rgba(0,0,0,1);position:relative;z-index:99;}
    header .wrap{width:1000px;margin:0 auto;}
    header h1{width:70px;height:40px;float:left;}
    header h1 a{display:inline-block;width:100%;height:100%;font-size:0;text-indent:200%;overflow:hidden;white-space:nowrap;}
    #sns{width:50%;float:right;padding-top:10px;padding-right:10px;}
    #sns>div{float:right;margin-left:12px;}
    #contents{position:relative;}
    #bg{background:url(../img/pc/bg.png) 0 0 repeat #150301;position:fixed;top:40px;left:0;width:100%;min-width:1000px;height:3000px;z-index:50;}
    br.sp{display:none;}
    
    /* MVエリア */
    #mv{background:#150301;height:850px;position:relative;}
    #mv .wrap{width:974px;height:100%;margin:0 auto;position:relative;}
    #mv .mv{opacity:0;position:absolute;transition:all .2s ease;z-index:51;}
    #mv .mv.title,
    #mv .mv.date,
    #mv .mv.lead,
    #mv .mv.copyright{z-index:52;}
    #mv .mv.keiji{background:url(../img/pc/mv-chara.png) 0 0 no-repeat;background-size:1700px auto;top:0;left:0;width:100%;min-width:1000px;max-width:1600px;height:850px;}
    #mv .mv.keiji.animate{background-position:-30% 0;}
    #mv .mv.date{top:52px;left:0;height:222px;width:0;overflow:hidden;}
    #mv .mv.date.animate{width:638px;}
    #mv .mv.title{top:170px;left:-20px;height:365px;width:725px;z-index:53;}
    #mv .mv.title.animate{animation:mv_title .2s ease-out 0s;}
    #mv .mv.lead{top:516px;left:0;height:376px;width:728px;}
    #mv .mv.lead.animate{top:476px;left:30px;}
    #mv .mv.copyright{top:753px;left:508px;height:16px;width:278px;}
    @keyframes mv_title{
        0%{opacity:1;transform:scale(3);}
        71%{transform:rotate(0deg);}
        72%{transform:rotate(30deg);}
        82%{transform:rotate(-30deg);}
        92%{transform:rotate(20deg);}
        98%{transform:rotate(-10deg);}
        100%{transform:scale(1),rotate(0deg);}
    }
    #mv .mv.animate{opacity:1;}
    
    #contents > .base{position:relative;z-index:60;margin-top:-140px;}
    /* 概要エリア */
    #outline{background:url(../img/pc/outline-bg-flash.png) 50% 0 repeat;width:94%;min-width:1000px;max-width:1520px;margin:0 auto;margin-top:130px;border:5px solid #000;}
    #outline h1{position:relative;margin:0 auto;margin-top:-54px;background:url(../img/pc/outline-title.png) 0 0 no-repeat;width:830px;height:104px;font-size:0;text-indent:200%;overflow:hidden;white-space:nowrap;}
    #outline .flash{padding-top:35px;padding-bottom:60px;background:url(../img/pc/outline-flash-bg-white.png) 50% -290px no-repeat;overflow:hidden;position:relative;}
    #outline .flash .txt{opacity:0;transition:all .2s ease;position:relative;top:30px;z-index:51;}
    #outline .flash .txt.animate{opacity:1;top:0;}
    #outline .flash .txt .lead{font-size:24px;color:#fff;text-align:center;line-height:150%;}
    #outline .flash .txt .lead+.lead{margin-top:0.4em;}
    #outline .flash .flow{height:375px;width:990px;margin:0 auto;margin-top:50px;position:relative;z-index:51;}
    #outline .flash .flow>*{position:absolute;opacity:0;transition:all .2s ease;}
    #outline .flash .flow.animate>*{opacity:1;}
    #outline .flash .flow .flow_1{left:20px;top:10px;transition-delay:0s;}
    #outline .flash .flow .flow_2{right:20px;top:10px;transition-delay:.6s;}
    #outline .flash .flow.animate .flow_1,
    #outline .flash .flow.animate .flow_2{top:0;}
    #outline .flash .flow .flow_arrow{left:378px;top:74px;transition-delay:.3s;}
    #outline .flash .flow.animate .flow_arrow{left:398px;}
    #outline .flash .flow .flow_baloon{right:4px;top:-109px;transition-delay:.9s;}
    #outline .flash .flow.animate .flow_baloon{animation:outline_flash_flow_baloon .2s ease-out 0s;animation-delay:.9s;}
    @keyframes outline_flash_flow_baloon{
        0%{opacity:1;transform:rotate(-5deg);}
        50%{transform:rotate(5deg) scale(1.1);top:-114px;right:14px;}
        100%{transform:rotate(0deg) scale(1);}
    }
    #outline .flash .bg{position:absolute;z-index:40;top:0;overflow:hidden;width:100%;height:100%;}
    #outline .flash .bg>*{position:absolute;display:inline-block;transition:all .6s ease;}
    #outline .flash .bg .chara{top:0px;left:-180px;z-index:43;transition-delay:.3s;}
    #outline .flash .bg.animate .chara{top:-60px;left:-100px;}
    #outline .flash .bg .ink1{top:160px;left:-100px;z-index:41;transition-delay:0;}
    #outline .flash .bg.animate .ink1{top:42px;left:-60px;}
    #outline .flash .bg .ink2{top:322px;right:-90px;z-index:42;transition-delay:.1s;}
    #outline .flash .bg.animate .ink2{top:262px;right:0px;}
    #outline .instagram{background:url(../img/pc/outline-bg-instagram.png) 50% 0 no-repeat;margin-top:-112px;padding-top:152px;padding-bottom:30px;position:relative;z-index:52;overflow:hidden;}
    #outline .instagram .txt{opacity:0;transition:all .2s ease;position:relative;top:30px;z-index:51;padding-top:50px;width:990px;margin:0 auto;}
    #outline .instagram .txt.animate{opacity:1;top:0;}
    #outline .instagram .txt .lead{font-size:24px;color:#fff;text-align:center;line-height:150%;z-index:53;position:relative;}
    #outline .instagram .txt .card{position:absolute;top:-80px;left:-110px;z-index:52;opacity:0;transition:all .3s ease;transition-delay:.4s;}
    #outline .instagram .txt.animate .card{top:-100px;opacity:1;}
    #outline .instagram .flow{height:539px;width:990px;margin:0 auto;margin-top:30px;position:relative;z-index:51;}
    #outline .instagram .flow>*{position:absolute;opacity:0;transition:all .2s ease;}
    #outline .instagram .flow.animate>*{opacity:1;}
    #outline .instagram .flow .flow_1{top:20px;left:-108px;padding-top:68px;z-index:53;transition-delay:0;}
    #outline .instagram .flow .flow_2{top:20px;right:0;z-index:53;transition-delay:.9s;}
    #outline .instagram .flow.animate .flow_1,
    #outline .instagram .flow.animate .flow_2{top:0;}
    #outline .instagram .flow .flow_arrow{top:306px;left:252px;z-index:54;transition-delay:.4s;width:200px;}
    #outline .instagram .flow .flow_arrow img{width:100%;}
    #outline .instagram .flow.animate .flow_arrow{left:284px;}
    
    /* イベント情報エリア */
    #event{color:#fff;position:relative;width:94%;min-width:1000px;max-width:1520px;margin:0 auto;margin-top:130px;border:5px solid #000;}
    #event .wrap{background:#2a2a2a;}
    #event .wrap>h1{position:relative;margin:0 auto;top:-54px;background:url(../img/pc/event-title.png) 0 0 no-repeat;width:620px;height:104px;font-size:0;text-indent:200%;overflow:hidden;white-space:nowrap;}
    #event article{position:relative;border-top:5px solid #000;padding:60px 0;}
    #event article .content{opacity:0;top:30px;transition:all .4s ease;position:relative;}
    #event article.animate .content{opacity:1;top:0;}
    #event h1+article{border-top:0;padding-top:0;}
    #event article>div{width:994px;margin:0 auto;padding-left:20px;overflow:hidden;}
    #event article h1,
    #event article .date,
    #event article .text{width:507px;}
    #event article.noimg h1,
    #event article.noimg .date,
    #event article.noimg .text{width:100%;}
    #event article .t{float:left;display:flex;flex-direction:column;}
    #event article .t>*{line-height:160%;}
    #event article .i{float:right;width:427px;}
    #event article.noimg .t{float:none;}
    #event article h1{font-size:24px;margin-top:2px;order:2;}
    #event article .date{font-size:16px;order:1;}
    #event article .text{font-size:16px;margin-top:10px;order:3;}
    #event article .img{margin-right:20px;}
    #event article .img img{max-width:427px;width:100%;}
    
    /* イベント個別？今後増える可能性 */
    #event article.ev-photoevent{}
    #event article.ev-photoevent h1,
    #event article.ev-photoevent .date{text-align:center;}
    #event article.ev-photoevent h1{font-size:36px;margin-bottom:.6em;}
    #event article.ev-photoevent .text{overflow:hidden;}
    #event article.ev-photoevent .text>div{float:left;width:50%;}
    #event article.ev-photoevent .text dl{display:table;}
    #event article.ev-photoevent .text dl+dl{margin-top:0.4em;}
    #event article.ev-photoevent .text dl>*{display:table-cell;font-size:18px;}
    #event article.ev-photoevent .text dl dt{width:4.1em;font-weight:bold;}
    #event article.ev-photoevent .text dl dd{padding-left:1em;text-indent:-1em;}
    #event article.ev-photoevent .text dl dd::before{content:"：";}
    #event article.ev-photoevent .text .map{float:none;clear:both;padding-top:20px;width:100%;}
    #event article.ev-photoevent .text .map iframe{width:100%;height:360px;}
    
    /* バナーエリア */
    #banner{padding:60px 0;}
    #banner .content{width:100%;text-align:center;}
    #banner .content a{display:inline-block;position:relative;}
    #banner .content a::after{content:"";display:inline-block;width:970px;height:490px;background:#fff;position:absolute;top:24px;left:50%;margin-left:-485px;opacity:0;transition:opacity .2s ease;}
    #banner .content a:hover{opacity:1;}
    #banner .content a:hover::after{opacity:0.4;}
    
    /* pagetop */
    #pagetop{position:fixed;z-index:91;bottom:-131px;right:30px;transition:bottom .8s ease;}
    #pagetop.view{bottom:0px;}
    #pagetop a{display:inline-block;}
    
    footer{background:#3B3B3B;text-align:center;position:relative;z-index:90;padding:.6em 0;}
    footer small{color:#fff;}
}
@media screen and (min-width: 1000px) and (max-width: 1399px) {
    #mv .mv.keiji.animate{background-position:20% 0;}
}
@media screen and (min-width: 1400px) and (max-width: 1599px){
    #mv .mv.keiji.animate{background-position:-20% 0;}
}
@media screen and (min-width: 1600px){
    #mv .mv.keiji{left:50%;margin-left:-800px;}
    #mv .mv.keiji.animate{background-position:-80% 0;}
}





/* SP */
@media screen and (max-width: 999px) {
    html,body{background:url(../img/pc/bg.png) 0 60px repeat,linear-gradient(to bottom, #150301 0%,#000000 100%);background-size:1000px auto;}
    header{height:60px;width:100%;background:#000;border-bottom:10px solid #cc0100;background:url(../img/sp/header.png) 50% 0 no-repeat #000;background-size:auto 100%;}
    header .wrap{width:100%;height:100%;}
    header h1{width:100%;height:100%;}
    header h1 a{display:inline-block;width:100%;height:100%;font-size:0;text-indent:200%;overflow:hidden;white-space:nowrap;}
    #sns{display:none;}
    #contents{position:relative;}
    #bg{display:none;}
    br.pc{display:none;}
    
    /* MVエリア */
    #mv{background-size:auto 70%;overflow:hidden;position:relative;padding-top:30vw;transition:all .2s ease;}
    #mv .wrap{width:100%;position:relative;padding-top:0;display:flex;flex-direction:column;}
    #mv .mv{opacity:0;position:absolute;transition:all .2s ease;z-index:51;}
    #mv .mv.title,
    #mv .mv.date,
    #mv .mv.lead,
    #mv .mv.copyright{z-index:52;width:100%;max-width:640px;position:relative;text-align:center;display:block;margin:0 auto;}
    #mv .mv.title img,
    #mv .mv.date img,
    #mv .mv.lead img,
    #mv .mv.copyright img{width:100%;max-width:640px;}
    #mv .mv.keiji{background:url(../img/pc/mv-chara.png) -80vw -4vw no-repeat;background-size:180vw auto;top:0;left:0;width:100%;height:100%;}
    #mv .mv.keiji.animate{background-position:-60vw -4vw;}
    #mv .mv.date{width:100%;overflow:hidden;order:1;padding-left:2%;margin-top:0;}
    #mv .mv.title{width:100%;order:2;margin-top:-11vw;z-index:53;}
    #mv .mv.title.animate{animation:mv_title .2s ease-out 0s;}
    #mv .mv.lead{left:0;order:3;margin-top:-5vw;padding-left:6vw;padding-right:4vw;}
    #mv .mv.copyright{left:0;width:100%;height:auto;order:4;margin-bottom:2vw;padding-right:4%;position:relative;text-align:right;}
    #mv .mv.copyright img{width:40%;min-width:200px;}
    @keyframes mv_title{
        0%{opacity:1;transform:scale(3);}
        71%{transform:rotate(0deg);}
        72%{transform:rotate(30deg);}
        82%{transform:rotate(-30deg);}
        92%{transform:rotate(20deg);}
        98%{transform:rotate(-10deg);}
        100%{transform:scale(1),rotate(0deg);}
    }
    #mv .mv.animate{opacity:1;}
    
    #contents > .base{position:relative;z-index:60;}
    /* 概要エリア */
    #outline{background:url(../img/pc/outline-bg-flash.png) 50% 0 repeat;}
    #outline h1{position:relative;background:url(../img/sp/outline-title.png) 50% 50% no-repeat #e51721;height:92px;border-top:5px solid #000;border-bottom:5px solid #000;font-size:0;text-indent:200%;overflow:hidden;white-space:nowrap;}
    #outline .flash{background:url(../img/pc/outline-flash-bg-white.png) 50% -290px no-repeat;overflow:hidden;position:relative;height:150vw;}
    #outline .flash .txt{opacity:0;transition:all .2s ease;position:relative;top:30px;z-index:51;}
    #outline .flash .txt.animate{opacity:1;top:0;}
    #outline .flash .txt .lead{font-size:4vw;color:#fff;text-align:center;line-height:150%;}
    #outline .flash .txt .lead:first-child{margin-top:1.6em;}
    #outline .flash .txt .lead+.lead{margin-top:0.4em;}
    #outline .flash .flow{margin-top:14vw;position:relative;z-index:51;}
    #outline .flash .flow>*{position:absolute;opacity:0;transition:all .2s ease;}
    #outline .flash .flow>* img{width:100%;}
    #outline .flash .flow.animate>*{opacity:1;}
    #outline .flash .flow .flow_1{left:20px;top:10px;transition-delay:0s;width:38%;}
    #outline .flash .flow .flow_2{right:20px;top:10px;transition-delay:.6s;width:38%;}
    #outline .flash .flow.animate .flow_1,
    #outline .flash .flow.animate .flow_2{top:0;}
    #outline .flash .flow .flow_arrow{left:30vw;top:3vw;transition-delay:.3s;width:24vw;max-width:220px;min-height:22vw;background:url(../img/sp/outline-flash-img-arrow.png) 0 0 no-repeat;background-size:100% auto;}
    #outline .flash .flow .flow_arrow>img{display:none;}
    #outline .flash .flow.animate .flow_arrow{left:39vw;}
    #outline .flash .flow .flow_baloon{right:4px;top:-14vw;transition-delay:.9s;width:40vw;max-width:288px;}
    #outline .flash .flow.animate .flow_baloon{animation:outline_flash_flow_baloon .2s ease-out 0s;animation-delay:.9s;}
    @keyframes outline_flash_flow_baloon{
        0%{opacity:1;transform:rotate(-5deg);}
        50%{transform:rotate(5deg) scale(1.1);top:-16vw;right:14px;}
        100%{transform:rotate(0deg) scale(1);}
    }
    #outline .flash .bg{position:absolute;z-index:40;bottom:0;overflow:hidden;width:100%;height:100%;}
    #outline .flash .bg>*{position:absolute;display:inline-block;transition:all .6s ease;}
    #outline .flash .bg .chara{bottom:-30vw;left:0;z-index:45;transition-delay:.3s;width:100vw;}
    #outline .flash .bg.animate .chara{bottom:-30vw;left:0;}
    #outline .flash .bg .chara img{width:101vw;position:relative;left:50vw;margin-left:-50vw;}
    #outline .flash .bg .ink1 img,
    #outline .flash .bg .ink2 img{width:100%;}
    #outline .flash .bg .ink1{bottom:-20vw;left:-28vw;z-index:41;transition-delay:0;width:68vw;}
    #outline .flash .bg.animate .ink1{bottom:10vw;left:-6vw;}
    #outline .flash .bg .ink2{bottom:-20vw;right:-24vw;z-index:44;transition-delay:.1s;width:47vw;}
    #outline .flash .bg.animate .ink2{bottom:10vw;right:0vw;}
    #outline .instagram{background:url(../img/sp/outline-bg-instagram.png) 50% 0 no-repeat;background-size:100% auto;margin-top:-20vw;padding-top:63px;height:137vw;position:relative;z-index:52;}
    #outline .instagram .txt{opacity:0;transition:all .2s ease;position:relative;top:30px;z-index:51;}
    #outline .instagram .txt.animate{opacity:1;top:0;}
    #outline .instagram .txt .lead{font-size:4vw;color:#fff;text-align:center;line-height:150%;}
    #outline .instagram .txt .lead:first-child{margin-top:2.4em;}
    #outline .instagram .txt .card{display:none;}
    #outline .instagram .flow{margin-top:5vw;height:81vw;position:relative;z-index:51;}
    #outline .instagram .flow>*{position:absolute;opacity:0;transition:all .2s ease;}
    #outline .instagram .flow>* img{display:none;}
    #outline .instagram .flow.animate>*{opacity:1;}
    #outline .instagram .flow .flow_1{width:38vw;left:3vw;transition-delay:0s;background:url(../img/sp/outline-insta-img1.png) 0 12vw no-repeat;z-index:44;}
    #outline .instagram .flow .flow_2{width:50vw;right:3vw;transition-delay:.6s;background:url(../img/sp/outline-insta-img2.png) 0 0 no-repeat;z-index:42;}
    #outline .instagram .flow .flow_1,
    #outline .instagram .flow .flow_2{height:81vw;top:10px;background-size:100% auto;}
    #outline .instagram .flow.animate .flow_1,
    #outline .instagram .flow.animate .flow_2{top:0;}
    #outline .instagram .flow .flow_arrow{left:24vw;top:39vw;transition-delay:.3s;width:22vw;height:14vw;max-width:220px;background:url(../img/sp/outline-insta-img-arrow.png) 0 0 no-repeat;background-size:100% auto;z-index:43;}
    #outline .instagram .flow.animate .flow_arrow{left:31vw;}
    
    /* イベント情報エリア */
    #event{background:#2a2a2a;color:#fff;}
    #event .wrap>h1{position:relative;background:url(../img/sp/event-title.png) 50% 50% no-repeat #e51721;height:92px;border-top:5px solid #000;border-bottom:5px solid #000;font-size:0;text-indent:200%;overflow:hidden;white-space:nowrap;}
    #event article{position:relative;padding:7vw 4vw;border-top:5px solid #000;}
    #event article .content{opacity:0;top:30px;transition:all .4s ease;position:relative;}
    #event article.animate .content{opacity:1;top:0;}
    #event article .t{display:flex;flex-direction:column;}
    #event article .t>*{line-height:160%;}
    #event article h1{order:2;font-size:5vw;}
    #event article .date{order:1;font-size:3vw;}
    #event article .text{order:3;font-size:3vw;}
    #event article .img{order:4;margin-top:4vw;}
    #event article .img img{width:100%;}
    
    /* イベント個別？今後増える可能性 */
    #event article.ev-photoevent{}
    #event article.ev-photoevent h1{font-size:7vw;}
    #event article.ev-photoevent .date{font-size:4vw;}
    #event article.ev-photoevent .text{overflow:hidden;}
    #event article.ev-photoevent .text dl{margin-top:1em;}
    #event article.ev-photoevent .text dl>*{font-size:4vw;line-height:160%}
    #event article.ev-photoevent .text dl dt{font-weight:bold;}
    #event article.ev-photoevent .text dl dt::after{content:"：";}
    #event article.ev-photoevent .text dl dd{}
    #event article.ev-photoevent .text .map{padding-top:4vw;width:100%;}
    #event article.ev-photoevent .text .map iframe{width:100%;height:50vw;}
    
    /* バナーエリア */
    #banner{}
    #banner .content{width:100%;text-align:center;}
    #banner .content a{display:inline-block;position:relative;padding:4%;}
    #banner .content a:hover{opacity:1;}
    #banner .content a img{width:100%;}
    
    /* pagetop */
    #pagetop{display:none;}
    
    footer{background:#3B3B3B;text-align:center;position:relative;z-index:90;padding:.6em 0;}
    footer small{color:#fff;}
}
@media screen and (max-width: 640px) {/* SP640 */
    #mv .mv.title{margin-top:-14vw;}
    #outline h1{background-size:570px auto;height:80px;}
    #event .wrap>h1{background-size:320px auto;height:80px;}
}
@media screen and (max-width: 480px) {/* SP480 */
    #outline h1{background-size:440px auto;height:70px;}
    #event .wrap>h1{background-size:240px auto;height:70px;}
}
@media screen and (max-width: 390px) {/* SP390 */
    #mv{max-height:660px;}
    #outline h1{background-size:350px auto;height:60px;}
    #event .wrap>h1{background-size:195px auto;height:60px;}
}
@media screen and (max-width: 340px) {/* SP340 */
    #mv{max-height:600px;}
    #outline h1{background-size:290px auto;height:50px;}
    #event .wrap>h1{background-size:170px auto;height:50px;}
}