#top header {
  opacity: 0;
}
/* --------------------------------------------- */
/* ▼opening */
/* --------------------------------------------- */
#opening,
#loading {
  width: 100%;
  height: 100vh;
  background-image: url("/assets/images/logo_gate.svg");
  background-repeat: no-repeat;
  background-size: 5% 5%;
  background-position: 50% 50%;
  margin-bottom: 30vh;
  position: relative;
  overflow: hidden;
}
#loading {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 99999;
}
.isLoaded #loading {
  display: none;
}
.openingTxt,
.loadingTxt {
  font-size: 2rem;
  margin: 0 auto;
  display: block;
  position: absolute;
  top: 56%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%); /* Safari用 */
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: .6s
}
.openingTxt.isHide {
  opacity: 0;
}
.loadingTxtBar {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: #fff;
  opacity: .5;
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}
@keyframes slidein {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}
.openingArrow {
  display: block;
  position: absolute;
  top: 85vh;
  left: 50%;
  width: 2px;
  height: 30px;
  background: #333;
  opacity: 0;
  transition: .6s;
}
.openingArrow:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 1px;
  left: 0;
  width: 2px;
  height: 7px;
  background: #333;
  transform: rotate(45deg);
  transform-origin: bottom right;
  opacity: 0;
}
.openingArrow.isShow,
.openingArrow.isShow:after {
  display: block;
  opacity: 1;
}
/* --------------------------------------------- */
/* ▼TOP */
/* --------------------------------------------- */
#top main {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    min-width: 1280px
  }
/* --------------------------------------------- */
/* ▼HERO */
/* --------------------------------------------- */
  .heroArea {
    position: relative;
  }
  .heroContents {
    height: auto;
  }
  .heroContents:before {
    content: "";
    display: block;
    padding-top: 60%;
  }
  .heroContents li {
    width: 300px;
    height: 225px;
    position: absolute;
    overflow: hidden;
  }
  .hero-bg-video {
    height: 100%;
  }
  .heroContents li img{
    max-width: 100%;
  }
  .heroContents li:nth-child(1){
    top:0;
    right: 20px;
  }
  .heroContents li:nth-child(2){
    top:30px;
    left: 20px;
  }
  .heroContents li:nth-child(3){
    top:260px;
    left: 40%;
  }
  .heroContents li:nth-child(4){
    top:445px;
    right: 20px;
  }
  .heroContents li:nth-child(5){
    top:480px;
    left: 20px;
  }
  .heroContents li:nth-child(6){
    top:705px;
    left: 40%;
  }
  .heroContents li:nth-child(7){
    top:890px;
    right: 20px;
  }
  .heroContents li:nth-child(8){
    top:970px;
    left: 20px;
  }
  .heroAreaBg {
    background-image: url(/images/hero_bg_01.png), url(/images/hero_bg_02.png), url(/images/hero_bg_03.png), url(/images/hero_bg_04.png);
    background-position: left 15% top 0, left 70% top 15%, left 15% top 60%, left 70% top 80%;
    background-size: 18%, 18%, 18%, 18%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  }
  .heroArea h2 {
    font-size: 8rem;
    width: 80%;
    font-weight: bold;
    letter-spacing: 0.8px;
    position: absolute;
    top: 30%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%); /* Safari用 */
    transform: translate(-50%, -50%);
    z-index: 999;
  }
/* --------------------------------------------- */
/* ▼STATEMENT */
/* --------------------------------------------- */
  .statementLink {
    background-color: #222222;
    position: relative;
    padding: 120px 0px;
    z-index: 2;
    margin-bottom: 180px;
  }
  .statementLinkInner {
    margin: 0 auto 0 19.5%;
    /* width: fit-content; */
    position: relative;
  }
  .statementTxt span {
    opacity: 0;
  }
  .statementLink .grid {
    position: absolute;
  }
  .statementLink h2 {
    font-size: 8rem;
    font-weight: bold;
    color:#FFF;
    letter-spacing: 0.8px;
    line-height: 1.4em;
    position: relative;
  }
  .statementLinkInner:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 10px;
  right: calc(50% - 10px);
  width: 60px;
  height: 8px;
  border: none;
  border-right: 2px solid #FFF;
  border-bottom: 1px solid #FFF;
  transform: skew(45deg);
  transition: .3s;
  opacity: 0;
  }
  .statementLinkInner.show:after {
    opacity: 1;
  }
  .statementLinkInner:hover::after{
    right: calc(50% - 30px);
  }
/* --------------------------------------------- */
/* ▼MOVIE */
/* --------------------------------------------- */
  #movie {
    width: 100%;
    margin: 160px auto;
    text-align: center;
  }
  .movieInner {
    display: inline-block;
    text-align: center;
  }
  .movieText {
    font-size: 7.8rem;
    font-weight: bold;
    white-space: nowrap
  }
  .movieMainText strong {
    font-weight: bold;
    color: #c8102e;
  }
  .movieSubText span {
    opacity: 0;
  }
/* --------------------------------------------- */
/* ▼AWARD BRAND */
/* --------------------------------------------- */
  .awardBrandWrap {
    width: 1280px;
    padding: 0 20px;
    margin: 0 auto 160px auto;
  }
  .awardBrandWrap h2{
    font-size: 8rem;
    font-weight: bold;
    color: transparent;
    -webkit-text-stroke: 2px #222;
    text-stroke: 2px #222;
    letter-spacing: 5px;
    line-height: 0.75em;
    text-align: right;
    position: relative;
    z-index: 10;
  }
  .awardBrandWrap h2 span{
    font-size: 2.8rem;
    font-weight: normal;
    color: #222;
    letter-spacing: initial;
  }
  .awardBrandWrap h2:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -4rem;
    right: 1rem;
    width: 60px;
    height: 8px;
    border: none;
    border-right: 2px solid #B82B35;
    border-bottom: 2px solid #B82B35;
    transform: skew(45deg);
    transition: .3s;
  }
  .awardBrandWrap h2:hover::after{
    right: calc(1rem - 30px);
  }
  .awardBrandInner {
    margin-top: -110px;;
  }
  .awardmovie {
    display: flex;
    justify-content: flex-start;
  }
  .awardmovie li {
    flex-basis:calc((100% - 200px) / 3);
    margin-right: 40px;
    overflow: hidden;
    height: 630px;
    position: relative;
  }
  .bg-video {
    height: 100%;
    margin: 0 -100%
  }
/* --------------------------------------------- */
/* ▼ONLINE SHOP */
/* --------------------------------------------- */
  .onlinshopLink {
    text-align: center;
    position: relative;
    margin: 350px 0;
  }
  .onlinshopLink h2 {
    font-size: 10rem;
    font-weight: bold;
    letter-spacing: 5px;
  }
  .onlinshopLink h2 span {
    color: #FFF;
    -webkit-text-stroke: 2px #B82B35;
    text-stroke: 2px #B82B35;
  }
  .onlinshopLink p {
    font-size: 2.4rem;
  }
  .onlinshopLink::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 516px;
    height: 516px;
    box-shadow: 4px 12px 36px #0000003D;
  }
/* --------------------------------------------- */
/* ▼COUNTDOWN */
/* --------------------------------------------- */
  .countdownArea {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto 130px auto;
  }
  .countdownArea h2,
  .applicationArea h2 {
    font-size: 2rem;
    font-weight: bold;
    width: 400px;
    border-bottom: 1px solid #222222;
    padding-bottom: 0.5rem;
    margin-bottom: 80px;
    letter-spacing: 0.4px;
  }
  .countdownArea h3 {
    font-size: 3.2rem;
    font-weight: bold;
    margin-bottom: 50px;
  }
  .countdownArea .yycountdown-box {
    font-size: 12rem;
    font-weight: bold;
    display: inline-grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: 220px 220px 220px 220px;
  }
  .countdownArea .yyc-day,
  .countdownArea .yyc-hou,
  .countdownArea .yyc-min,
  .countdownArea .yyc-sec {
    position: relative;
  }
  .countdownArea .yyc-hou::after,
  .countdownArea .yyc-min::after {
    content: ":";
    position: absolute;
    top: -5px;
    right: -1.4rem;
  }
  .countdownArea .yyc-day-text,
  .countdownArea .yyc-hou-text,
  .countdownArea .yyc-min-text,
  .countdownArea .yyc-sec-text {
    font-size: 2rem;
    font-weight: normal;
    margin-bottom: 20px;
  }
  .countdownArea .arrowLink {
    position: relative;
    padding-right: 80px;
    font-weight: 400;
    font-size: 2rem;
  }
  .countdownArea .arrowLink::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 7px;
    right: 0;
    width: 60px;
    height: 8px;
    border: none;
    border-right: 3px solid #222222;
    border-bottom: 3px solid #222222;
    transform: skew(45deg);
    transition: .3s;
  }
  .countdownArea .arrowLink:hover::after{
    right: -10px;
  }
/* --------------------------------------------- */
/* ▼APPLICATION */
/* --------------------------------------------- */
  .applicationArea {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto 260px auto;
  }
@media screen and (max-width: 767px) {
  #opening,
  #loading {
    background-size: 8% 8%;
  }
  #top main {
    min-width: auto;
  }
  #top .wrapper {
    padding: 0;
  }
  #top #navTimer {
    right: -12vw;
  }
  .heroArea {
    height: 90vh;
    padding: 0 20px;
    width: 100%;
  }
  .heroArea h2 {
    font-size: 3.5rem;
    width: 100%;
    top: 40%;
  }
  .heroContents:before {
    padding-top: 80vh;
  }
  .heroContents li {
    width: 35%;
    height: 18%;
  }
  .heroContents li:nth-child(1){
    top: 105vw;
    right: 20px;
  }
  .heroContents li:nth-child(2){
    top: 120vw;
    left: 20px;
  }
  .heroContents li:nth-child(3){
    top: 149vw;
    right: 20px;
    left: unset;
  }
  .heroContents li:nth-child(4){
    top: 164vw;
    left: 20px;
  }
  .heroContents li:nth-child(5){
    top: 189vw;
    right: 20px;
    left: unset;
  }
  .heroContents li:nth-child(6){
    top: 207vw;
    left: 20px;
  }
  .heroContents li:nth-child(7){
    top: 229vw;
    right: 20px;
  }
  .heroContents li:nth-child(8){
    top: 246vw;
    left: 20px;
  }
  .heroAreaBg {
    background-image: url(/images/hero_bg_01.png), url(/images/hero_bg_02.png), url(/images/hero_bg_03.png), url(/images/hero_bg_04.png);
    background-position: left 33% top 0, left 33% top 33%, left 33% top 66%, left 33% top 100%;
    background-size: 32%, 32%, 32%, 32%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  }
  .hero-bg-video {
    margin: 0 -15%;
  }
  .statementLink h2 {
    font-size: 3.5rem;
  }
  .statementLinkInner {
    margin: 0 auto 0 20px;
  }
  .statementLinkInner:after {
    right: calc(38% - 10px);
  }
  #movie {
    width: 100%;
  }
  .movieInner {
    padding: 0 15px;
  }
  .movieText {
    font-size: 3.5rem;
  }
  .movieText + .movieText {
    margin-top: 10px;
  }
  .awardBrandWrap {
    width: 100%;
    padding: 0 20px;
    display: flex;
    flex-flow: column-reverse;
    margin-bottom: 100px;
  }
  .awardBrandInner {
    margin-top: 0;
  }
  .awardmovie {
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .awardmovie img {
    max-width: 100%;
  }
  .awardmovie li {
    flex-basis: 30%;
    height: 35vh;
    margin-right: 10px;
  }
  .awardmovie li:last-child {
    margin-right: 0;
  }
  .bg-video {
    margin: 0 -180%;
  }
  .awardBrandWrap h2 {
    font-size: 3.8rem;
    -webkit-text-stroke: 1px #222;
    text-stroke: 1px #222;
    letter-spacing: 1px;
    line-height: 0.8em;
  }
  .awardBrandWrap h2 span {
    font-size: 1.6rem;
  }
  .awardBrandWrap h2:after {
    bottom: -3rem;
    right: 0.5rem;
  }
  #shopAnker {
    width: 1px;
    height: 1px;
    display: block;
  }
  .onlinshopLink h2 {
    font-size: 4rem;
  }
  .onlinshopLink h2 span {
    -webkit-text-stroke: 1px #B82B35;
    text-stroke: 1px #B82B35;
  }
  .onlinshopLink p {
    font-size: 1.6rem;
    margin-top: 1rem;
  }
  .onlinshopLink {
    margin: 120px 0 240px 0;
  }
  .onlinshopLink::after {
    width: 64vw;
    height: 64vw;
  }
  .countdownArea,
  .applicationArea {
    width: 100%;
    padding: 0 20px;
  }
  .countdownArea h2,
  .applicationArea h2 {
    width: 100%;
  }
  .countdownArea .yycountdown-box {
    display: flex;
    flex-flow: column;
  }
  .countdownArea .yyc-hou::after, .countdownArea .yyc-min::after {
    content: "";
    transform: rotate(90deg);
    bottom: -12rem;
    right: 50%;
  }
  .yyc-day-text, .yyc-hou, .yyc-hou-text, .yyc-min, .yyc-min-text {
    margin-right: 0;
  }
}
@media screen and (max-width: 320px){
  .awardBrandWrap h2 {
      font-size: 3.2rem;
  }
}
/* --------------------------------------------- */
/* ▼RESULT */
/* --------------------------------------------- */
.resultArea {
  width: 100%;
  max-width: 1220px;
  margin: 260px auto 190px auto;
  position: relative;
}
.resultArea h2 {
  font-size: 16rem;
  font-weight: bold;
  color: transparent;
  -webkit-text-stroke: 3px#222;
  text-stroke: 3px #222;
  letter-spacing: 4px;
  z-index: 10;
}
.resultArea h2 span:first-child {
  position: absolute;
  top: -18%
}
.resultArea h2 span:nth-child(2) {
  position: absolute;
  -webkit-text-stroke: 3px#C8102E;
  text-stroke: 3px #C8102E;
  bottom: -18%;
  right: 0;
}
.resultArea video{
  width: 100%;
  max-width: 1080px;
}
@media screen and (max-width: 767px) {
  .resultArea {
    margin: 60px auto 130px auto;
  }
  .resultArea h2 {
    font-size: 20VW;
    -webkit-text-stroke: 2px#222;
    text-stroke: 2px #222;
  }
  .resultArea h2 span:first-child {
    top: -15vw;
  }
  .resultArea h2 span:nth-child(2) {
    bottom: -15vw;
    -webkit-text-stroke: 2px#C8102E;
    text-stroke: 2px #C8102E;
  }
  .resultArea video{
    width: 100%;
  }
}