// ヘッダー＆サブメニュー＆ファーストビューのスタイル

@keyframes rotateCircle {
  to {
    transform: rotate(1turn);
  }
}
.loading {
  position: fixed;
  z-index: 10000;
  @include flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: white;
  &_logo {
    width: 80%;
  }
}
.news{
  &_special{
    position:absolute;
    width: 100%;
    z-index:997;
      top:0;
      left: 0;
    padding-top: calc( 13vh + 10px );
    padding-left: 0;
    padding-bottom: 10px;
    margin-bottom: -13vh;
    z-index: 10;
    background: $mainColorXLight;
    .news{
      &_item {
        position: relative;
        a{
          padding-left: 50px;
          padding-right: 20px;
        }
      }
      &_block {
        @include flex;
        align-items: center;
        margin-bottom: 5px;
      }
      &_date {
        margin-right: 10px;
        width: 100px;
        font-size: $xSmallFontSize;
        color: $mainColorMid;
      }
      &_category {
        padding: 2px 10px;
        font-size: $xSmallFontSize;
        color: $mainColorMid;
        border: 1px solid $mainColorMid;
      }
      &_title {
        font-size: $mediumFontSize;
        flex: 1;
      }
    }
    .special_item::before{
      display: block;
      content: '';
      height:20px;
      width: 20px;
      border-radius: 50%;
      position: absolute;
      left: 20px;
      top:12px;
      margin-top: -10px;
      background: $accentColor01Dark;
    }
    .special_item::after{
      font-size: $smallFontSize;
      display: block;
      content: '!';
      height:14px;
      position: absolute;
      left: 28px;
      top:12px;
      margin-top: -8px;
      color: white;
      line-height: 1;
      text-align: center;
    }

  }
}
@include mq(middle) {
  .news{
    &_special{
      padding-top: 20px;
      padding-left:calc( 4vw + 20px );
      padding-bottom: 20px;
      margin-bottom: 0;
      .news{
        &_list {
        }
        &_item {
          a{
            @include flex;
            flex-wrap: nowrap;
            align-items: center;
            &:hover{
              opacity: .5;
            }
          }
          &:last-child {
            margin-bottom: 0;
          }
        }
        &_block {
          margin: 0 20px 0 0;
        }
        &_btn {
          a {
            @include btnEffect(white, $mainColorDark);
          }
        }
      }
      .special_item::before,
      .imp_item::before{
        top:50%;
        margin-top: -10px;
      }
      .special_item::after,
      .imp_item::after{
        top:50%;
        margin-top: -8px;
      }
    }
  }
}
.info {
  position: absolute;
  z-index:997;
  top: calc( 13vh + 20px );
  left: 5%;
      @include flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  width: 105px;
  height: 105px;
    overflow: hidden;
  &.top_down{
    top:36%;
  }
  svg {
    position: absolute;
    left: 0;
    top:0;
    width: 105px;
    height: 105px;
    animation: rotateCircle 20s infinite linear;
    path {
      fill: none;
      stroke: white;
      stroke-miterlimit: 10;
    }
  }
  &_text {
    line-height: 1;
    padding-left: 3px;
    text-align: center;
    font-weight: bold;
    color: white;

    p {
      &:first-child {
        margin-bottom: 6px;
        font-size: $smallFontSize;
      }
      &:nth-child(2) {
        margin-bottom: 4px;
        font-size: $mediumFontSize;
      }
    }
  }
}
.header {
  position: fixed;
  z-index: 998;
  top: 0;
  left: 0;
  width: 100%;
  height: 13vh;
  background: white;
  &_inner {
    @include flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 13vh;
  }
  &_logo {
    width: 70%;
    height: auto;
    max-width: 360px;
   @include mq(small) {
      width: 30%;
    }
    a {
      display: block;
    }
  }
  &_nav {
    display: none;
  }
  &_bg_layer {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100vw;
    height: 100vh;
    background: $mainColorDark;
    opacity: .6;
    z-index: 1000;
  }

}
.subMenu {
  position: fixed;
  z-index: 1998;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 56px;
  background: $mainColorDark;
  &_block {
    width: inherit;
    height: inherit;
  }
  &_list {
    @include flex;
    justify-content: space-around;
    align-items: center;
    width: inherit;
    height: inherit;
    overflow: hidden;
  }
  &_item {
    width: auto;
    height: 4vh;

    a {
      display: block;
      width: inherit;
      height: inherit;
      svg {
        width: 30px;
        height: 30px;
        .st0 {
          fill: white;
          stroke-miterlimit: 10;
        }
        .st1 {
          fill: white;
        }
      }
      &::after{
        content: '';
        display: none;
        position: fixed;
        left: 4vw;
        margin-top: -10px;
        height: 1px;
        width: 30px;
        background: $mainColorDark;
        z-index: 1000;
      }
      &.active::after{
        display: block;
      }
      &.menuBtn::after{
        margin-left: 0;
      }
      @include mq(middle) {
        &.active::after{
          display: block;
        }
      }

    }
    @include mq(middle) {
      a {
        svg {
          width: 24px;
          height: 24px;
        }
      }
    }
    &_access{
      > a{
        height: 30px;
        @include mq(middle) {
          height: 24px;
        }
      }
    }

    &MenuBtn {
      position: relative;
      &::before {
        content: '';
        position: absolute;
        z-index: -1;
        top: 50%;
        left: 50%;
        display: block;
        padding: 10vw;
        background: #222;
        border-radius: 50%;
        transform: translateY(-50%) translateX(-50%);
      }
      .menuBtn {
        position: relative;
        @include flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 25px;
        height: 13px;
        cursor: pointer;
        span {
          position: absolute;
          display: block;
          width: 25px;
          height: 1px;
          background: white;
          &:nth-child(1) {
            top: 0;
          }
          &:nth-child(2) {
            top: 6px;
          }
          &:nth-child(3) {
            top: 12px;
          }
        }
        &_text {
          top: 18px;
          width: auto!important;
          height: auto!important;
          line-height: 1;
          color: white;
          font-size: 1rem;
          background: none!important;
        }
      }
    }
    &_block{
      position: absolute;
      display: none;
      background: $mainColorXLight;
      top:auto;
      bottom: 56px;
      left: 0;
      width: 100%;
      padding-top: 50px;
      max-height: calc( 100vh - 56px );
      overflow: auto;
      &_frame{
        @include flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        text-align: center;
      }
      &_inner{
        position: relative;
        ul{
          list-style-image: url(data:0);
          li{
            list-style-image: url(data:0);
          }
        }
      }
    }
    @include mq(middle) {
      &_block{
        top: 0;
        bottom: auto;
        left: 4vw;
        width: auto;
        padding-top: 0;
        max-height: 100vh;
        &_frame{
          width: 300px;
          height: 100vh;
          overflow: auto;
        }
      }
    }

    &_logo{
      width: 100%;
      margin-bottom: 30px;
      svg {
        margin: 0 auto;
        max-height: 40px;
        max-width: 40px;
        .st0{
          fill: $mainColorDark;
        }
        .st1 {
          fill: $mainColorDark;
        }
        .st2 {
          fill: none;
          stroke: $mainColorDark;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-miterlimit: 10;
        }
      }
    }
    &_title{
      font-size: $smallFontSize;
      font-weight: bold;
      margin-bottom: 10px;
    }
    &_date{
      font-weight: bold;
      font-size: $largeFontSize;      
      span{
        display: block;
        font-size: $xxLargeFontSize;
      }
    }
    .btn_base{
      margin-top: 20px;
      a{
        margin-bottom: 0;
      }
    }
    .btn_base:last-child{
      a{
        margin-bottom: 80px;
      }
    }
    @include mq(middle) {
      .btn_base{
        a{
          margin-bottom: 0;
        }
      }
    }
    &_cap{
      font-size: $smallFontSize;
      margin-top: 20px;
      p{
        line-height: 1.3;
        small{
          font-size: $xSmallFontSize;
        }
      }
    }
    &_open{
      .subMenu_item_block_inner{
        margin-bottom: 80px;
        @include mq(middle) {
          margin-bottom: 0;
        }
      }
    }
    &_access{
      .subMenu_item_cap{
        p{
          margin-bottom: 20px;
          font-size: $smallFontSize;
        }
      }
    }
    &_sns{
      display: none;
    }
    @include mq(middle) {
      &_sns{
        display: block;
      }
    }
    &_snsList{
      margin-top: 60px;
    }
    &_snsItem{
      margin-bottom: 30px;
      a{
        svg {
          margin: 0 auto 5px;
          height: 28px;
          width: 28px;
        }
        font-size: $xSmallFontSize;
        font-weight:bold;
        @include mq(middle) {
          &:hover{
            color: $subColorDark;
            svg path{
              fill: $subColorDark;
            }
          }
        }
      }
    }
    &_snsList_sp{
      @include flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 40px;
      .subMenu_item{
        &_snsItem{
          margin: 0 20px;
          a{
            svg {
              height: 28px;
              width: 28px;
            }
          }
        }
      }
    }

    &_lngs{
      /*display: none;*/
      .subMenu_item_block_inner{
        margin-bottom: 40px;
        @include mq(middle) {
          margin-bottom: 0;
        }
      }
    }
    &_lng{
      margin-top: 30px;
      &_sp{
        text-align: center;
        border-bottom:1px solid $mainColorLight;
        margin-bottom: 20px;
      }
      &Item{
        margin-bottom: 15px;
        display: inline-block;
        a{
          position: relative;
          display: block;
          padding: 0 5px;
          margin: 0 10px;
        }
        &.active{
          a{
            color: white;
            background: $mainColorDark;
          }
        }
      }
      @include mq(middle) {
        &Item {
          @include textEffect($mainColorDark);
          display: block;
        }
      }
    }
    @include mq(middle) {
      &_lngs{
        display: block;
      }
    }

    &_search{
      .search_filter{
        .searchfield{
          border-bottom: 1px solid $mainColorDark;
          padding: 0 20px;
          text-align: center;
          margin: 30px auto 20px;
          display: block;
          max-width: 210px;
          height: 30px;
        }
        .btn_base {
          font-size: $mediumFontSize;
          margin-left: auto;
          margin-right: auto;
          width: 110px;
          @include ff_japanese_thin_gothic_bold;
          input {
            position: relative;
            width: 110px;
            margin: 0 auto 80px;
            display: block;
            padding: 10px 0;
            text-align: center;
            border: 1px solid $mainColorDark;
          }
        }
        @include mq(middle) {
          .btn_base {
            @include btnEffect(white, $mainColorDark);
            z-index: 100;
            input {
              margin: 0 auto ;
            }
          }
        }

      }
      .search_filter{
        display: block;
        }
    }
    &_tipped{
      display: none;
      position: fixed;
      left: 4.8vw;
      top: auto;
      margin-top: -27px;
      padding: 7px 10px;
      font-size: $xSmallFontSize;
      background: white;
      z-index: 1100;
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -10px;
        margin-top: -5px;
        border: 5px solid transparent;
        border-right: 5px solid white;
      }
    }
    &.subMenu_item{
      .active{
        svg{
          .st2{
            stroke: $mainColorLight;
          }
          .st0{
            fill: $mainColorLight;
          }
        }
      }
    }
    /*
    &.subMenu_item_open{
      .active{
        svg{
          .st0{
            stroke: $accentColor02Dark;
          }
        }
      }
      .subMenu_item_block{
        background: $accentColor02Dark;
      }
    }
    */

  }
  &_gnavi{
    display: none;
    position: fixed;
    top: 100%;
    left: 0;
    width: 100%;
    height: 92vh;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    background: white;
    padding: 0 8vw 40px;
    z-index: 1100;
    transition: $transition_c5s;
    .subMenu{
      &_logo{
        width: 80%;
        padding: 18px 0;
        margin: 0 auto;
      }
      &_nav{
        &_list{
          border-bottom:1px solid $mainColorLight;
          margin-bottom: 20px;
        }
        &_item{
          text-align: center;
          > a{
            padding: 16px 0;
            display: block;
            border-top:1px solid $mainColorLight;
            position: relative;
            font-size: $mSmallFontSize;
            &::before,
            &::after{
              display: block;
              content: "";
              position: absolute;
              top: 27px;
              right: 10px;
              width: 15px;
              height: 1px;
              background: $mainColorLight;
            }
            &::before {
            }
            &::after {
              transform: rotate(90deg);
            }
            &.active::after {
              display: none;
            }
            &.direct::before,
            &.direct::after {
              display: none;
            }

          }
        }
        &_menu{
          display: none;
          margin-bottom: 18px;
          &_block{
            
            h4{
              color: $mainColorLight;
              font-size: $smallFontSize;
              padding-top: 10px;
              margin-bottom: 18px;
            }
            ul{
              li{
                a{
                  margin-bottom: 10px;
                }
              }
            }
          }
        }
      }
      &_nav{
        
      }

    }
  }
  &_close{
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;

    span::before,
    span::after{
      display: block;
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 1px;
      background: $mainColorDark;
      margin-left: -10px;
    }
    span::before {
      transform: rotate(-45deg);
    }
    span::after {
      transform: rotate(45deg);
    }
  }
  @include mq(middle) {
    &_close{
      display: none;
    }
  }

}
.mvSp {
  position: relative;
  height: calc(100vh - 56px);
  padding-top: 13vh;
  &_split {
    width: 100%;
    z-index: 0;
    position: relative;
    height: 100%;
    .kvSwiper{
      display: none;
      .swiper-slide{
        overflow: hidden;
          height: calc(100vh - 13vh - 56px);
        img{
          position: absolute;
          top: 0;
          left: -30px;
          text-align: right;
          width: auto;
          height: 100%;
        }
        &.swiper-slide-next{
          img{
            left: -30px;
          }
        }
        &.swiper-slide-active{
          img{
            animation: slide 7s linear 0s 1 normal both;
          }
          &.slide01{
            img{
              animation: slide 5s linear 0s 1 normal both;
            }
          }
        }
      }
    }

    &_item {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 50%;
      &Top {
        position: relative;
        &_layer {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, .3);
        }
      }
    }
  }
}
@keyframes slide {
  0% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(0);
  }
}

.mvPc {
  width: 100%;
  height: calc(100vh - 11vh); /* 変数をサポートしていないブラウザのフォールバック */
  height: calc(var(--vh, 1vh) * 100 - 11vh);
  overflow: hidden;
  display: none;
  &_split {
    @include flex;
    width: 100%;
    height: 100%;
    padding-left: 4vw;
      &_video{
        position: relative;
        width: 100%;
        height: 100%;
        opacity: 0;
        video {
          position: absolute;
          width: auto;
          height: auto;
          top: 50%;
          left: 50%;
          min-height: 100%;
          min-width: 100%;
          -ms-transform: translateX(-50%) translateY(-50%);
          -moz-transform: translateX(-50%) translateY(-50%);
          -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
        }
        @supports ( object-fit: cover ) {
          video {
            position: static;
            min-height: 100%;
            width: 100%;
            left: 0;
            -o-object-fit: cover;
            object-fit: cover;
            top: 0;
            -ms-transform: none;
            -moz-transform: none;
            -webkit-transform: none;
            transform: none;
          }
        }
      }
      &_layer {
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        width: 100%;
        height: 100%;
      }
  }
}

@include mq(middle) {
  .loading {
    &_logo {
      width: 30%;
    }
  }
  .info {
    bottom: 13vh;
    top: auto;
    left: auto;
    right: 50px;

    width: 140px;
    height: 140px;
    &.top_down{
      top: auto;
    }

    svg {
      width: 140px;
      height: 140px;
    }
    &_text {
      p {
        color: white;
        &:first-child {
          margin-bottom: 8px;
          font-size: $mSmallFontSize;
        }
        &:nth-child(2) {
          margin-bottom: 6px;
          font-size: $largeFontSize;
        }
      }
    }
  }
  .lang_en .info,
  .lang_kr .info,
  .lang_tw .info,
  .lang_cn .info{
    bottom: 22vh;
  }
  .header {
    top: auto;
    bottom: 0;
    height: 11vh;
    background: none;
    padding-left: 4vw;
    z-index: 1998;
    &_block {
      width: 100%;
      height: 100%;
      opacity: 0;
      background: white;
    }
    &_inner {
      justify-content: space-between;
      height: 100%;
      padding: 0 5%;
    }
    &_logo {
      width: 20%;
    }
    &.fixed{
      .header_logo{
        width: 200px;
      }
    }
    &_nav {
      display: block;
      &_list {
        @include flex;
      }
      &_item {
        margin-right: 40px;
        &:last-child {
          margin-right: 0;
        }
        a {
          @include textEffect($mainColorDark);
        }
      }
      &_block{
        display: none;
        position: absolute;
        left: 0;
        bottom:auto;
        top: 100%;
        width: 100%;
        height: 240px;
        padding-left:4vw;
        background: $mainColorXLight;
        &_inner {
          @include flex;
          h3{
            width: 40%;
            text-align: center;
            font-size: $h1FontSize;
            padding-top: 80px;
            i{
              display: block;
              font-style: normal;
              font-size: $xSmallFontSize;
            }
          }
          .header_nav_menu{
            @include flex;
            &_block{
              margin-right: 60px ;
              padding-top: 40px;
              h4{
                font-size: $smallFontSize;
                color: $mainColorMid;
                margin-bottom: 20px;
              }
              ul{
                list-style-image: url(data:0);
                li{
                  list-style-image: url(data:0);
                }
              }
            }
          }
        }
      }
    }
    &.fixed{
      height: 60px;
    }
  }
  .bottom_open .header_nav_block{
    top: auto;
    bottom: 100%;
  }
  .lower .header {
    top: 0;
    bottom: auto;
    padding-left: 4vw;
  }
  .subMenu {
    width: 4vw;
    min-width:46px;
    height: 100vh;
    background: none;
    &_block {
      width: inherit;
      min-width:50px;
      height: inherit;
      background: $mainColorDark;
      opacity: 0;
    }
    &_list {
      width: inherit;
      min-width:50px;
      height: inherit;
      justify-content: center;
      flex-direction: column;
      &Top {
        height: 100%;
      }
      &Bottom {
        height: 30%;
      }
    }
    &_item {
      width: 24px;
      height: auto;
      padding: 0 0 40px;
      margin: 0 auto;
      > a {
        svg {
          .st2{
            fill: none;
            stroke: $subColorDark;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-miterlimit: 10;
          }
          .st0{
            fill: $subColorDark;
          }
          line,
          rect,
          polygon,
          path,
          circle,
          ellipse {
            transition: $transition_c5s;
          }
        }
        &:hover {
          svg {
            line,
            rect,
            polygon,
            path,
            circle,
            ellipse {
              fill: white;
            }
          }
        }
      }
      &:nth-child(2) {
        a {
          svg {
            path {
              transition: $transition_c5s;
            }
          }
          &:hover {
            svg {
              path {
              }
            }
          }
        }
      }
      &MenuBtn {
        display: none;
      }
    }
    &_layer {
      position: absolute;
      top: 0;
      left: 0;
      display: none;
      width: 100%;
      height: 100%;
      background: $mainColorMid;
    }
  }
  .mvSp {
    display: none;
  }
  .mvPc {
    display: block;
  }
}