@charset "shift_jis";
/* CSS Document */


.ct_box {
background: #000;
}

.ct_inbox {
width: 100%;
max-width: 1600px;
margin: 0 auto;
}




.mainimg_box {
background: url(../images/mainimg_bg.jpg) top center no-repeat;
background-size: cover;
margin: 0 auto 30px;
}
.mainimg_inbox {
position: relative;
height: 930px;
}

@media (max-width: 1600px) {
.mainimg_inbox {
position: relative;
height: 58.2vw;
}
/* max-width: 1600px */}


.mainimg_inbox .main_controller {
position: absolute;
width:36.94%; height:71.08%; left:0.00%; top:0.00%;
z-index: 101;
opacity: 0;
}
.mainimg_inbox .main_controller.is-show {
animation: main_controller 0.4s ease-out forwards;
}
@keyframes main_controller {
  0.0%{
    transform: translate(-100%,0);
    opacity: 0;
  }
  100%{
    transform: translate(0,0);
    opacity: 1;
  }
  20%{
    opacity: 1;
  }
}
.mainimg_inbox .main_pika {
position: absolute;
width:50.81%; height:74.41%; left:23.31%; top:2.69%;
z-index: 102;
opacity: 0;
}
.mainimg_inbox .main_pika.is-show {
animation: main_pika 0.3s ease-in 0.5s forwards;
}
@keyframes main_pika {
  0% {
    clip-path: circle(0 at 20% 10%);
    -webkit-clip-path: circle(0 at 20% 10%);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40% {
    clip-path: circle(60% at 60% 20%);
    -webkit-clip-path: circle(60% at 60% 20%);
    opacity: 1;
  }
  100% {
    clip-path: circle(200% at 80% 20%);
    -webkit-clip-path: circle(200% at 80% 20%);
    opacity: 1;
  }
}


.mainimg_inbox .main_txt {
position: absolute;
width:48.25%; height:26.77%; left:50.75%; top:34.62%;
z-index: 103;
opacity: 0;
}
.mainimg_inbox .main_txt.is-show {
animation: main_txt 0.2s ease-in 0.7s forwards;
}
@keyframes main_txt {
  0.0%{
    transform: translate(70%,-40%);
    opacity: 0;
  }
  80%{
    transform: translate(-10%,5%);
    opacity: 1;
  }
  100%{
    transform: translate(0,0);
    opacity: 1;
  }
}


.mainimg_inbox .main_logo {
position: absolute;
width:69.19%; height:42.04%; left:17.06%; bottom:0%;
z-index: 105;
opacity: 0;
}
.mainimg_inbox .main_logo.is-show {
animation: main_txt 0.2s ease-in 1s forwards;
}
@keyframes main_logo {
  0.0%{
    transform: translate(70%,-40%);
    opacity: 0;
  }
  80%{
    transform: translate(-10%,5%);
    opacity: 1;
  }
  100%{
    transform: translate(0,0);
    opacity: 1;
  }
}
.mainimg_inbox .main_logo .main_logo_thunder {
position: absolute;
left:0%; top:0%;
z-index: 106;
opacity: 0;
}
.mainimg_inbox .main_logo .main_logo_thunder.is-show {
animation: main_logo_thunder 0.2s ease-in 1.3s forwards;
}
@keyframes main_logo_thunder {
  0% {
    clip-path: circle(0 at 0% 50%);
    -webkit-clip-path: circle(0 at 0% 50%);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    clip-path: circle(200% at 0% 50%);
    -webkit-clip-path: circle(200% at 0% 50%);
    opacity: 1;
  }
}
.mainimg_inbox .main_logo .main_logo_txt {
position: absolute;
left:0%; top:0%;
z-index: 107;
opacity: 0;
}
.mainimg_inbox .main_logo .main_logo_txt.is-show {
animation: main_logo_thunder 0.2s ease-in 1.2s forwards;
}






.price_box {

width: 90%;
max-width: 1200px;
margin: 0 auto;

display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;

align-items: center;

}
.price_box .price_txt{
max-width: 830px;
width: 80%;
}
.price_box .btn_mall {
display: block;
width: 50%;
max-width: 307px;
}

/* .price_box .price_inbox .btn_mall .btn {
display: inline-block;
font-weight: bold;
line-height: 1.5;
color: #212529;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem 2rem;
font-size: 18px;
width: 180px;
border-radius: 6px;
}
.price_box .price_inbox .btn_mall .btn.btn-light {
display: block;
color: #fff;
background-color: #FF8811;
border-color: #FF8811;
} */



.fadeup {
opacity: 0;
transition: 0.2s;
}

.fadeup.is-show {
  animation: fadeUp 0.2s ease-in 0.5s forwards;
}

@keyframes fadeUp {
  0.0%{
    transform: translate(0,20%);
    opacity: 0;
  }
  100%{
    transform: translate(0,0);
    opacity: 1;
  }
  80.0%{
    transform: translate(0,-5%);
    opacity: 1;
  }
}

.slideleft {
opacity: 0;
transition: 0.2s;
}

.slideleft.is-show {
  animation: slideLeft 0.2s ease-in 0.5s forwards;
}
@keyframes slideLeft {
  0.0%{
    transform: translate(-70%,0);
    opacity: 0;
  }
  100%{
    transform: translate(0,0);
    opacity: 1;
  }
  80.0%{
    transform: translate(10%,0);
    opacity: 1;
  }
}


.slideright {
opacity: 0;
transition: 0.2s;
}
.slideright.is-show {
  animation: slideRight 0.2s ease-in 0.5s forwards;
}
@keyframes slideRight {
  0.0%{
    transform: translate(70%,0);
    opacity: 0;
  }
  100%{
    transform: translate(0,0);
    opacity: 1;
  }
  80.0%{
    transform: translate(-10%,0);
    opacity: 1;
  }
}


#contents .youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#contents .youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


.movie_area {
max-width: 1255px;
width: 100%;
max-height:738px;
height:59vw;
margin:0 auto 30px;
background: url(../images/movie_bg.png) no-repeat top center;
background-size: 100% auto;
padding: 110px 0 0;
}

@media (max-width: 1200px) {
.movie_area {
padding-top: 11vw;
}
/* max-width: 120px */}

.promo_movie_box {
width: 96%;
max-width: 980px;
margin: 0 auto;
}


.action_box {
background: url(../images/action_bg.jpg) center center no-repeat;
background-size: 100% auto;
}

.action_box .action_img {
max-width: 980px;
width: 90%;
margin: 0 auto;
}


.waza_box {
background: url(../images/waza_bg.jpg) center bottom no-repeat;
background-size: 100% auto;
margin-bottom: 30px;
}

.waza_box .waza_ttlbg_box {
background: url(../images/waza_ttl_bg.png) top center no-repeat;
background-size:100% auto;
}
.waza_box .waza_ttlbg_box .waza_ttl_inbox {
max-width: 1086px;
width: 96%;
margin: 0 auto;
}

.waza_movie_area {
max-width: 980px;
width: 100%;
margin: 0 auto 20px;

display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
}

.waza_movie_area .waza_movie_box {
width: 48%;
}

.waza_inbox {
max-width: 1156px;
width: 100%;
margin: 0 auto 50px;
}

.waza_inbox .clearfix{
clear: both;
}
.waza_inbox_left {
max-width: 578px;
width: 50%;
float: left;
}
.waza_inbox_right {
max-width: 578px;
width: 50%;
float: right;
padding-top: 200px;
}


.wazattlright {
opacity: 0;
transition: 0.2s;
}
.wazattlright.is-show {
  animation: wazattlright 0.2s ease-in 0.6s forwards;
}
@keyframes wazattlright {
  0.0%{
    transform: translate(40%,0);
    opacity: 0;
  }
  100%{
    transform: translate(0,0);
    opacity: 1;
  }
  80.0%{
    transform: translate(-10%,0);
    opacity: 1;
  }
}
.wazatxtright,
.wazatxtright2,
.wazatxtright3  {
opacity: 0;
transition: 0.2s;
}
.wazatxtright.is-show {
  animation: wazatxtright 0.2s ease-in 0.9s forwards;
}
.wazatxtright2.is-show {
  animation: wazatxtright 0.2s ease-in 1.1s forwards;
}
.wazatxtright3.is-show {
  animation: wazatxtright 0.2s ease-in 1.3s forwards;
}
@keyframes wazatxtright {
  0.0%{
    transform: translate(20%,0);
    opacity: 0;
  }
  100%{
    transform: translate(0,0);
    opacity: 1;
  }
  80.0%{
    transform: translate(-5%,0);
    opacity: 1;
  }
}
.wazattlleft {
opacity: 0;
transition: 0.2s;
}
.wazattlleft.is-show {
  animation: wazattlleft 0.2s ease-in 0.6s forwards;
}
@keyframes wazattlleft {
  0.0%{
    transform: translate(-40%,0);
    opacity: 0;
  }
  100%{
    transform: translate(0,0);
    opacity: 1;
  }
  80.0%{
    transform: translate(5%,0);
    opacity: 1;
  }
}
.wazatxtleft {
opacity: 0;
transition: 0.2s;
}
.wazatxtleft.is-show {
  animation: wazatxtleft 0.2s ease-in 0.9s forwards;
}
@keyframes wazatxtleft {
  0.0%{
    transform: translate(-20%,0);
    opacity: 0;
  }
  100%{
    transform: translate(0,0);
    opacity: 1;
  }
  80.0%{
    transform: translate(5%,0);
    opacity: 1;
  }
}




.waza_inbox .waza_each_box {
max-width: 578px;
width: 100%;
position: relative;
}
.waza_inbox .waza_each_box .waza_txt {
position: absolute;
z-index: 110;
}
.waza_inbox .waza_each_box .waza_txt2 {
position: absolute;
z-index: 112;
}
.waza_inbox .waza_each_box .waza_txt3 {
position: absolute;
z-index: 113;
}
.waza_inbox .waza_each_box .waza_ttl {
position: absolute;
z-index: 120;
}


.cation_txt {
text-align: center;
}
.cation_txt p {
display: inline-block;
text-align: left;
font-size: 12px;
color:#fff;
}


.twitter_box {
background: url(../images/twitter_bg.jpg) center center;
background-size: 100% auto;
margin-bottom: 40px;
}

.twitter_box .twitter_img{
width: 100%;
max-width: 1256px;
margin: 0 auto;
}





.other_box {
background: url(../images/other_bg.jpg) center top no-repeat;
background-size: cover;
}

.other_ttl {
max-width: 1063px;
width: 100%;
margin: 0 auto 20px;
}
.other_inbox {
max-width: 1063px;
width: 100%;
margin: 0 auto 60px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.other_inbox>div {
width: 32%;
max-width: 323px;
}


.usb_img {
max-width: 1059px;
width: 94%;
margin: 0 auto 20px;
}

.usb_img p {
color:#fff;
font-size: 14px;
line-height: 1.4;
padding-top: 15px;
}



.other_box .btn_mall {
display: block;
width: 50%;
max-width: 307px;
margin: 60px auto 20px;
}

.SNS_share_box {
padding-bottom: 60px;

}