@charset "UTF-8";

/*
======== table of content. ===============

summary:ワイヤーフレーム要素

==========================================
*/
.forsp { display:none; }
.forpc { display:block; }
.forpc_inline { display: inline-block; }
.onlysp { opacity: 0; height: 0; }

/*----------------------------------------
ベースリンクカラー
------------------------------------------*/
#wrapper a { color:#000; text-decoration:none; transition: opacity .7s cubic-bezier(0.230, 1.000, 0.320, 1.000), background .7s cubic-bezier(0.230, 1.000, 0.320, 1.000), color .7s cubic-bezier(0.230, 1.000, 0.320, 1.000); }
#wrapper a.line { text-decoration:underline; }
#wrapper a:hover { color:#999; }

/*----------------------------------------
html
------------------------------------------*/
html { font-size: 62.5%; }

@font-face {
font-family: 'furura';
font-style: normal;
font-weight: normal;
src: local('furura'), url('../fonts/futura.ttf') format('truetype');
}

/*----------------------------------------
body
------------------------------------------*/
body { font-family:'Helvetica','Lucida Grande','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',meiryo,'ＭＳ Ｐゴシック',sans-serif; font-size:1.2rem; line-height: 1.5; -webkit-text-size-adjust: 100%; }

/* wrapper */
#wrapper { width:100%; opacity: 0; transition: opacity 1s cubic-bezier(0.390, 0.575, 0.565, 1.000); overflow-x: hidden; }
#wrapper.on { opacity: 1; }
#wrapper img { width:100%; height: auto; vertical-align: middle; }

.sec_wide,.sec_left,.sec_right,.sec_half,.sec_mov_top { margin-bottom: -1px; }

.sec_wide,.sec_wide_index { }
.sec_left,.sec_right,.sec_half { display: flex; }
 

.sec_main { width: 66.65%; }

/*
#sec_07 .sec_main { margin-right: -1px; }
#sec_10 .sec_main { margin-left: -1px; }
*/


.sec_sub { width: 33.35%; }
.sec_col_half { width:50%; }


#main { position: relative; }
#logo { position: absolute; left: 47px; top:35px; width:10%; }
h1 { position: absolute; width:100%; top: 48%; left: 50%; -webkit-transform: translate(-50%, -50%); /* Safari用 */transform: translate(-50%, -50%); color:#001d32; font-family:'furura',sans-serif; font-size: 4.5vw; font-weight: 600; letter-spacing: 0.02em; text-align: center; }
.ie h1 { font-family: 'Hind', sans-serif; }
h1 span { display: block; font-family: "Gotham A", "Gotham B"; font-style: normal; font-weight: 600; font-size: 1.4vw; letter-spacing: 0.05em; }

#last { position: relative; }
.sec_last { position: absolute; width:100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -45%); /* Safari用 */transform: translate(-50%, -50%); text-align: center; }


#sec_05,#sec_slope { position: relative; padding-top: 46.16%; overflow: hidden; }
#sec_05 img,
#sec_slope img { position: absolute; top:0; left: 0; }

/*アニメーション*/
#main_photo { opacity: 0; transform: scale(1.1); transition: opacity 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940),transform 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940); }
#main_photo.addanim { opacity: 1; transform: scale(1); }
.txt_main { opacity: 0; transition: opacity 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940),transform 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940); }
.txt_main.addanim { opacity: 1; transition-delay: 1s; }

.sec_wide,
.sec_left,
.sec_right,
.sec_half,
#sec_slope { opacity: 0; filter: blur(5px); transform: /*scale(0.98) */translatey(0); transition: filter 2s cubic-bezier(0.230, 1.000, 0.320, 1.000),opacity 2s cubic-bezier(0.230, 1.000, 0.320, 1.000),transform 1s cubic-bezier(0.250, 0.460, 0.450, 0.940); }



.sec_wide.addanim,
.sec_left.addanim,
.sec_right.addanim,
.sec_half.addanim,
#sec_slope.addanim { opacity: 1; filter: blur(0); transform: scale(1) translatey(0); }

.sec_mov { position: relative; width:100%; padding-top:69.248826291%; }
.sec_mov video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100.1%;
  height: 100.1%;
  z-index: 100;
}

/****** 文字要素設定 ******/
.sec_credit { position: absolute; left: 2%; font-family: "Gotham A", "Gotham B"; font-style: normal; font-size: 1.1rem; letter-spacing: 0.06em; }
#wrapper .credit p a { display: block; padding-bottom: 0.2em; color:#fff; }

.sec_credit#credit_1,
.sec_credit#credit_3 { bottom:2.8%; }

.sec_credit#credit_2 { top:2.8%; }

.sec_credit img { display: none; }

.txt_season { margin-bottom: 30px; color:#001d32; font-family: "Gotham A", "Gotham B"; font-style: normal; font-weight: 500; font-size: 1.4vw; letter-spacing: 0.15em; }

.logo_last { width:15%; margin: 0 auto 30px; }

/* スタクレ */
.txt_staff { margin: 0 auto; line-height: 150%; text-align: center; }
.txt_staff p { color:#001d32; font-size: 0.8rem; font-family: "Gotham A", "Gotham B"; font-style: normal; letter-spacing: 0.05em; text-transform: uppercase; }


/* クレジット */
#txt_copyright { padding: 30px; font-family: 'Adobe Caslon Pro Regular',serif; font-size: 1rem; letter-spacing: 0.06em; text-align: center; }

.more { display: none; }

/****** その他要素設定 ******/
.venobox { cursor: default; }


/*----------------------------------------
wrapper
------------------------------------------*/

/*----------------------------------------
ヘッダー
------------------------------------------*/

/* easing 
$linear: cubic-bezier(0.250, 0.250, 0.750, 0.750);
$ease: cubic-bezier(0.250, 0.100, 0.250, 1.000);
$ease-in: cubic-bezier(0.420, 0.000, 1.000, 1.000);
$ease-out: cubic-bezier(0.000, 0.000, 0.580, 1.000);
$ease-in-out: cubic-bezier(0.420, 0.000, 0.580, 1.000);

$easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
$easeInCubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
$easeInQuart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
$easeInQuint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
$easeInSine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
$easeInExpo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
$easeInCirc: cubic-bezier(0.600, 0.040, 0.980, 0.335);
$easeInBack: cubic-bezier(0.600, -0.280, 0.735, 0.045);

$easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
$easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
$easeOutQuart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
$easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
$easeOutSine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
$easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
$easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000);
$easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);

$easeInOutQuad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
$easeInOutQuart: cubic-bezier(0.770, 0.000, 0.275, 1.000);
$easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
$easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
$easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860);
$easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550);
*/


.loading { display: flex; align-items: center; justify-content: center; background-color: #fff;
opacity: 1;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1040;
transform: translateZ(1000px);
transform-style: preserve-3d;
transition: opacity 0.5s; text-align: center; }

.loading.body_init { opacity: 0; z-index: -1; }

/*ローディング*/	
.spinner {
  width: 40px;
  height: 40px;
  position: relative;
}


.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #000;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}