@charset "utf-8";
/* CSS Document */
/******************************************************************************
 Default CSS Reset
******************************************************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,figure{
 margin:0;
 padding:0;
}
table{
 border-collapse:collapse;
 table-layout:fixed;
}
fieldset,img{
 border:0;
}
address,caption,cite,code,dfn,em,strong,th,var{
 font-style:normal;
 font-weight:normal;
}
ol,ul{
 list-style:none;
}
caption{
 text-align:left;
}
h1,h2,h3,h4,h5,h6{
 font-size:100%;
 font-weight:normal;
}
img {
 vertical-align: bottom;
 /* chormeで画像のぼやけ回避 */
 -webkit-backface-visibility: hidden; 
}
#wrapper img {
 width: 100%;
 height: auto;
}
/******************************************************************************
 General Setting
******************************************************************************/
body {
 margin:0;
 padding:0;
 font-family: 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 color: #FFF;
 word-wrap : break-word;
 -webkit-font-smoothing: antialiased;
 position: relative;
 background: #000000;
 line-height: 1.3;
}
a {
 color: #FFF;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 text-decoration: none;
}
/*** align ***/
.ar { text-align:right;}
.al { text-align:left;}
.ac { text-align:center;}
/*** clearfix ***/
.cf:after{
 content: "."; 
 display: block; 
 height: 0; 
 font-size:0; 
 clear: both; 
 visibility:hidden;
}

/*** font ***/
.jp {
 font-family: 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", sans-serif;
 font-weight: 400;
}
.en{
 font-family: 'Anton', sans-serif;
 line-height:1.5em;
 font-weight:normal;
}
.robot{
 font-family: 'Roboto', sans-serif;
}
.robocon{
 font-family: 'Roboto Condensed', sans-serif;
}

/*** text color ***/
.red { color:#e60012;}
.blue { color:#008DDC}
.yellow {color: #f0b93c;}
.shadow {
 text-shadow: 0 5px 5px rgba(0,0,0,1);
}
.gold {
 color: #f8d05c;
background: -webkit-linear-gradient(top, #f8d05c 32%,#ffff81 48%,#f8d05c 65%); /* Chrome10-25,Safari5.1-6 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff81', endColorstr='#f8d05c',GradientType=0 ); /* IE6-9 */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.sky {
color: #6dc3ff;  
background: -webkit-linear-gradient(top, #6dc3ff 2%,#99ffff 48%,#6dc3ff 98%); /* Chrome10-25,Safari5.1-6 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99ffff', endColorstr='#6dc3ff',GradientType=0 ); /* IE6-9 */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/********************************************************************************************************

********************************************************************************************************/
.pc_none { display: none !important;}
.sp_none { display: block!important;}
@media screen and (max-width: 767px) {
 .pc_none { display: block!important;}
 .sp_none { display: none !important;}
}
a:not(.nolink):hover {
 color: #f0b93c;
 -webkit-transition:all .3s ease-in-out;
 transition:all .3s ease-in-out;
}
a:hover img {
 opacity: 0.8;
 filter: alpha(opacity=80);
 -webkit-transition:opacity 0.3s ease-in-out;
 transition:opacity 0.3s ease-in-out;
}

.linkBtn a{
 display: block;
 width: 100%;
 box-sizing: border-box;
 border: 2px solid #f0b93c;
 text-align: center;
 font-size: 128.57%;
 font-weight: 900;
 position: relative;
}
.linkBtn a:hover{
 color: #000;
 background: #f0b93c;
}
.linkBtn a p{
 width: 100%;
 height: 56px;
 text-align: center;
}
.linkBtn a p span {
 position: absolute;
 text-align: center;
 top:50%;
 left: 50%;
 transform: translate(-50%,-50%);
} 




/* flexbox ****************************************************/
.flexwrap{
 display: -webkit-flex;
 display: flex;
 flex-wrap:wrap;
 -webkit-flex-wrap:wrap;
 justify-content:space-between;
 -webkit-box-pack:justify;
 -webkit-justify-content:space-between;
 align-items:center; 
 -webkit-box-align:center;
 -webkit-align-items:center;
}
.nowrap{
 flex-wrap:nowrap;
  -webkit-flex-wrap:nowrap;
}
.reverse{
 flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse; 
  -webkit-box-direction:reverse;
}
.js-center {
 justify-content: center;
 -webkit-box-pack:center;
 -webkit-justify-content:center;
}
.js-start {
 justify-content: flex-start;
 -webkit-box-pack:start;
 -webkit-justify-content:flex-start;
}
.al-stretch {
 align-items:stretch;
 -webkit-box-align:stretch;
 -webkit-align-items:stretch;
}
.al-start {
 align-items:flex-start;
 -webkit-box-align:flex-start;
 -webkit-align-items:flex-start;
}

/******************************************************************************
 swiper
******************************************************************************/
.swiper-button-next, 
.swiper-button-prev {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  z-index: 10;
  cursor: pointer;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
 .swiper-button-next, 
 .swiper-button-prev {
  width: 30px;
  height: 30px;
  margin-top: 17px;
 }
}
.swiper-button-prev, 
.swiper-container-rtl .swiper-button-next {
 background-image: url("../images/common/btn_prev.png");
 background-size: 100% 100%;
 left: 35px;
 right: auto;
}
.swiper-button-next, 
.swiper-container-rtl .swiper-button-prev {
 background-image: url("../images/common/btn_next.png");
 background-size: 100% 100%;
 right: 35px;
 left: auto;
}
.swiper-container-horizontal > .swiper-pagination-bullets {
 text-align: right;
}
.swiper-pagination-bullet {
 width: 40px;
 height: 6px;
 border-radius: 0;
 background: #989797;
 opacity: 1;
}
.swiper-pagination-bullet-active {
 opacity: 1;
 background: #e70315;
}

/******************************************************************************
 slick
******************************************************************************/
.slick-prev::before,
.slick-next::before{
 content: '';
}
.slick-prev, .slick-next {
 width: 50px;
 height: 50px;
 z-index: 2;
}
@media screen and (max-width: 767px) {
 .slick-prev, .slick-next {
  width: 30px;
  height: 30px;
 }
}
.slick-prev {
 left: -75px;
}
.slick-next {
 right: -75px;
}
@media screen and (max-width: 767px) {
 .slick-prev {
  left: -30px;
 }
 .slick-next {
  right: -30px;
 }
}
/******************************************************************************
 modal
******************************************************************************/
.modal-video-close-btn {
 right: 0;
}
/******************************************************************************
 keyframes
******************************************************************************/
/* animation ****************************************************/
.mvMove{
 -webkit-transition:
  margin 0.4s ease-out,
  opacity 0.4s ease-out;
 transition:
  margin 0.4s ease-out,
  opacity 0.4s ease-out;
 opacity: 0;
}
.mvLogo{
 -webkit-transition:margin 0.8s ease-in,opacity 0.4s ease-out;
 transition:margin 0.8s ease-in,opacity 0.4s ease-out;
 opacity: 0;
}
.scrMove,
.fvMove{
 -webkit-transition: 0.4s ease-out;
 transition: 0.4s ease-out;
 opacity: 0;
}
.mvMove.on,
.scrMove.on,
.fvMove.on{
 opacity:1;
 display:block;
 -webkit-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:0.4s;
 animation-duration:0.4s;
 visibility: visible !important;
}