@charset "utf-8";
/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■      

  ■■■■                               ■
 ■   ■■                              ■
■        ■■■  ■■■■    ■■■  ■ ■ ■■■   ■
■       ■  ■  ■■  ■  ■  ■  ■■  ■  ■  ■
■   ■■■ ■   ■ ■   ■  ■   ■ ■    ■■■  ■
■     ■ ■■■■■ ■   ■  ■■■■■ ■  ■■  ■  ■
 ■    ■ ■     ■   ■  ■     ■  ■   ■  ■
  ■■■■   ■■■  ■   ■   ■■■  ■   ■■■■  ■

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- fonts ---- */
body{font-family:YakuHanJP,'Noto Sans JP', sans-serif, serif;}


/* ---- common style ---- */
a,a:visited {color: #f2e461;}
a:hover,a:active {color: #f2e461; }
a.hv_fade{ opacity: 1; }
a.hv_fade:hover{ opacity: 0.7; cursor: pointer; }

.ac-color1{color:#f2e461;}

/* responsive display */
.hide{ display: none;}
.hide-pc{ display: none; }
.hide-sp{ display: inherit;}

/* youtube embed responsive */
.video-embed {position: relative;height: 0;padding: 30px 0 56.25%;overflow: hidden;}
.video-embed iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/* colorbox customize */
#cboxOverlay{background:#FFF;}
#cboxContent{margin-top:60px;background:#FFF;}
#cboxLoadedContent{border:5px solid #FFF; background:#fff;}
#cboxClose{top:-55px; right:5px; display:block; background:url(../images/lib/colorbox/close.png) no-repeat top center; width:50px; height:50px; }
#cboxClose:hover{ background-position: top center; }
#cboxPrevious{top:-55px; left:5px; display:block; background:url(../images/lib/colorbox/prev.png) no-repeat top center; width:50px; height:50px; }
#cboxPrevious:hover{ background-position: top center; }
#cboxNext{top:-55px; left:65px; display:block; background:url(../images/lib/colorbox/next.png) no-repeat top center; width:50px; height:50px; }
#cboxNext:hover{ background-position: top center; }

/* twitter iOS fix */
.twitter-container iframe { width: 740px !important; }

/* slick fix */
.slick-list,.slick-slide {outline: none !important;}/* Chromeでフォーカス時の枠線を消す */
/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 

 ■■■  ■                    ■                   
■     ■                    ■                   
■    ■■■■ ■ ■ ■   ■   ■■■ ■■■■ ■   ■  ■ ■  ■■■ 
 ■■   ■   ■■  ■   ■  ■■ ■  ■   ■   ■  ■■  ■  ■ 
  ■■■ ■   ■   ■   ■  ■     ■   ■   ■  ■   ■   ■
    ■ ■   ■   ■   ■  ■     ■   ■   ■  ■   ■■■■■
■   ■ ■   ■   ■  ■■  ■■    ■   ■  ■■  ■   ■    
■■■■  ■■  ■    ■■ ■   ■■■  ■■   ■■ ■  ■    ■■■ 

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- Structure ---- */

body{ font-size: 17px; line-height: 1.8; color: #fff; background: linear-gradient(#990000, #000000); background-size: 100% 5%; background-repeat: no-repeat; background-color: #000;} 
/*
body{ font-size: 17px; line-height: 1.8; color: #fff; background:#000 url(../images/main-bg.png) no-repeat center top; } 
*/
.wrapper{ width:100%; position: relative;}
.upper{ width: 100%; position: relative;}
.upper > .inner{ width: 100%; max-width: 1520px; margin: 0 auto;  position: relative;}
.middle{ width: 100%; max-width: 1520px; margin: 0 auto; position: relative;}
.middle > .inner{ width: 100%; padding:4.16% ; position: relative;}
header,article,section,footer{ position: relative;  }

header{  }
article{  }
footer{ width:100%; position: relative; background: linear-gradient(#000000, #990000); background-size: 100% 100%; background-repeat: no-repeat; background-color: #000; height: 100px;}
footer{ position: relative; text-align: center;  padding: 0; }
.ft-copyrihgt{ font-size: 0.611em; margin: 0; color: #f2e461;}
#PageTop{ width: 2.6em; height: 2.6em; position: fixed; bottom:2em; right:2em; }


/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 

              ■                 ■                
■             ■  ■       ■      ■               ■
■             ■                 ■               ■
■  ■■■■    ■■■■  ■ ■   ■ ■   ■■■■  ■   ■  ■■■   ■
■  ■■  ■  ■■ ■■  ■  ■  ■ ■  ■■ ■■  ■   ■  ■  ■  ■
■  ■   ■  ■   ■  ■  ■ ■  ■  ■   ■  ■   ■   ■■■  ■
■  ■   ■  ■   ■  ■  ■ ■  ■  ■   ■  ■   ■ ■■  ■  ■
■  ■   ■  ■■ ■■  ■   ■■  ■  ■■ ■■  ■  ■■ ■   ■  ■
■  ■   ■   ■■■■  ■   ■   ■   ■■■■   ■■ ■  ■■■■  ■

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/

.sc-main{ position: relative; }
/*.sc-main .spc{ position: relative; }*/
.sc-main .spc{ position: relative; height: 10em; }
.sc-main .vis{ position: absolute; top:0; }
.sc-main .logo{ position: relative; top:20em; width: 100%; max-width: 1000px; margin: auto; }

.sc-catch{ margin-bottom: 2.5em; padding-top: 18em; }
.sc-catch > .inner{ text-align: center; }

.news-movie{ margin-bottom: 2.5em; display: flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content: space-between; }
.sc-news,.sc-movie{ width: 48.1%; }
/*
.sc-news{ width: 70%; margin: auto; }
*/

.sc-movie > .inner{ border: #f2e461 solid 1px; }
.sc-news > .inner{ border: #f2e461 solid 1px; background-color: #333; height: 100%; max-height: 329px;}
.sc-news .ttl{ margin-bottom: .5em; }
.news-container{ height: 80%; }
.news-headline { height: 100%; overflow-y: auto; }
.news-headline dl{ font-size: 1.0em; margin: 0 .5em 1em .5em;}
.news-headline dl{ padding-bottom: 1em; border-bottom: 1px dotted #fff; }
.news-headline dl:last-child{ margin-bottom: 0; padding-bottom: 0; border: none; }
.news-headline dl dt{ font-size: 0.77em; font-weight: normal; margin-bottom: 0; letter-spacing: 0.05em; }
.news-headline dl dd{ font-size: 1em; line-height: 1.4; }

.sc-products{ margin-bottom: 2.5em; }
.sc-products .ttl{ text-align: center; margin-bottom: .9em; }

.products-container{margin-bottom: 1em;}
/*
.products-container{ display: flex; flex-wrap: nowrap; justify-content: space-between; margin-bottom: 1em;}
.products-container > .left{ width: 37%; }
.products-container > .right{ width: 61.5%;}
*/ 

.products-jkt { text-align: center; margin-bottom: 1em; }
.products-jkt img { width: 40%; }

.products-data-table{ border-collapse:separate; border-spacing: 2px; margin-bottom: .5em; margin: auto; width: 100%; }
.products-data-table th{ padding:0.3em 0.5em; vertical-align: top; background-color: #333; border-left: #f2e461 solid .277em;}
.products-data-table td{ padding:0.3em 0.5em; vertical-align: top; background-color: #555; font-weight: bold; position: relative;}
.products-data-table td.colspc{ background: none; padding: 0; height: .5em; line-height: 0; }
.products-attmsg{ color: #f2e461; border: #f2e461 solid 1px; padding: .5em; text-align: center; }


.products-table { width: 50%; margin: auto; }


.sc-products ol { padding: 0;}
.sc-products ol li { margin-left: 2.5em; }

.sc-monster-list{ margin-bottom: 2.5em; }
.sc-monster-list .ttl{ text-align: center; margin-bottom: .9em; }
.monster-list-copy{ text-align: center; }
.monster-list-container{ text-align: center; 
 display: flex;
 justify-content: center;
 flex-wrap: wrap;}
.monster-list-container > div{ margin: 1em; }



.pc-dur1{ animation-duration: 0;}
/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■      

                     ■                                                     
 ■■    ■■            ■  ■             ■■■                     ■            
 ■■    ■■            ■               ■   ■                                 
 ■■■  ■ ■   ■■■   ■■■■  ■  ■■■      ■     ■  ■   ■   ■■■  ■ ■ ■   ■■■  ■■■ 
 ■ ■  ■ ■  ■  ■  ■■ ■■  ■  ■  ■     ■     ■  ■   ■  ■  ■  ■■  ■  ■  ■  ■   
 ■ ■  ■ ■  ■   ■ ■   ■  ■   ■■■     ■     ■  ■   ■  ■   ■ ■   ■  ■   ■ ■■  
 ■  ■■  ■  ■■■■■ ■   ■  ■ ■■  ■     ■     ■  ■   ■  ■■■■■ ■   ■  ■■■■■   ■■
 ■  ■■  ■  ■     ■■ ■■  ■ ■   ■      ■  ■■   ■  ■■  ■     ■   ■  ■        ■
 ■      ■   ■■■   ■■■■  ■  ■■■■       ■■■■■   ■■ ■   ■■■  ■   ■   ■■■  ■■■ 

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* Custom 1920 ----------------------------------------------------------------------------- */
@media (max-width: 1919px) {

}
/* Custom 1440 ----------------------------------------------------------------------------- */
@media (max-width: 1439px) {
/* body{ font-size: calc((100vw / 1440) * 18); } */

}
/* Custom 1280 ----------------------------------------------------------------------------- */
@media (max-width: 1279px) {
body{ font-size: calc((100vw / 1280) * 18); }

}
/* LG ----------------------------------------------------------------------------- */
@media (max-width: 1199px) {
.sc-main .spc{ height: 15em; }

}
/* MD ----------------------------------------------------------------------------- */
@media (max-width: 991px) {

}
/* SM ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
.pcbr {display: none;}
.pcbr:before {content: "" ;}
.spbr:before {content: "\A" ;white-space: pre ;}
.pc-dur1{ animation-duration: 1.0s;}

.sc-catch{ padding-top: 10em; }
.products-table { width: 100%; }
.products-jkt img { width: 60%; }

.sc-main .logo{ top:10em; }
.sc-main .spc{ height: 18em; }

/* ---- Structure ---- */
body{ font-size: calc((100vw / 960) * 28);}
/* body{ font-size: calc((100vw / 640) * 16); } */
footer{ height: 50px;}

.sc-news,.sc-movie{ width: 100%; }
.sc-movie{ margin-bottom: 1.5em; }

.sc-news > .inner{ max-height: 250px; }

.products-container{ flex-wrap: wrap; }
.products-container > .left{ width: 100%; text-align: center; margin-bottom: 1.5em; }
.products-container > .right{ width: 100%;}


.benefits-container{ display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 1em;}
.benefits-container > .item-col{ width: 45%; margin: 2%; }
.benefits-container .shop{ padding: .5em; text-align: center; background-color:#333; }
.benefits-container .thumb{ padding: .9em; text-align: center; border-top: #f2e461 solid 1px;border-bottom: #f2e461 solid 1px; }
.benefits-container .name{ padding: .5em; text-align: center;  }


.monster-list-copy{ display: block; max-width: 500px; /*width: 100%;*/ margin: 0 auto 1em auto;}

.monster-list-container > div{ margin-bottom: 1.5em; }

.kyBtn img { max-width: 200px; }

}
/* XS ----------------------------------------------------------------------------- */
@media (max-width: 543px) {
	
}

/* pc - large ----------------------------------------------------------------------------- */
@media (min-width: 768px) {
.spbr {display: none;}
.spbr:before {content: "" ;}
}
/* pc - xlarge ----------------------------------------------------------------------------- */
@media (min-width: 1200px) {
}


/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■      

   ■           ■                  ■   ■              
   ■                              ■                  
  ■ ■   ■■■■   ■  ■■■ ■■■   ■■■  ■■■■ ■   ■■■   ■■■■ 
  ■ ■   ■■  ■  ■  ■  ■■  ■  ■  ■  ■   ■  ■■ ■■  ■■  ■
 ■   ■  ■   ■  ■  ■  ■   ■   ■■■  ■   ■  ■   ■  ■   ■
 ■■■■■  ■   ■  ■  ■  ■   ■ ■■  ■  ■   ■  ■   ■  ■   ■
 ■   ■  ■   ■  ■  ■  ■   ■ ■   ■  ■   ■  ■■ ■■  ■   ■
■     ■ ■   ■  ■  ■  ■   ■  ■■■■  ■■  ■   ■■■   ■   ■

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
.dly-5{ animation-delay: 0.5s;}
.dly1{ animation-delay: 1.0s;}
.dly1-5{ animation-delay: 1.5s;}
.dly2{ animation-delay: 2.0s;}
.dly3{ animation-delay: 3.0s;}
.dly4{ animation-delay: 4.0s;}
.dly5{ animation-delay: 5.0s;}
.dur-5{ animation-duration: 0.5s;}
.dur1{ animation-duration: 1.0s;}
.dur1-5{ animation-duration: 1.5s;}
.dur2{ animation-duration: 2.0s;}
.dur3{ animation-duration: 3.0s;}
.dur4{ animation-duration: 4.0s;}
.dur5{ animation-duration: 5.0s;}

@-webkit-keyframes fadeInDownSM {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -15%, 0);
    transform: translate3d(0, -15%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDownSM {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -15%, 0);
    transform: translate3d(0, -15%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDownSM {
  -webkit-animation-name: fadeInDownSM;
  animation-name: fadeInDownSM;
}

@-webkit-keyframes fadeInUpSM {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 15%, 0);
    transform: translate3d(0, 15%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpSM {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 15%, 0);
    transform: translate3d(0, 15%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUpSM {
  -webkit-animation-name: fadeInUpSM;
  animation-name: fadeInUpSM;
}