@charset "UTF-8";
.wow {
  width: 146px;
  aspect-ratio: 73/29;
  --angle:15deg;
  transition: var(--animationDuration) transform cubic-bezier(0.6, -0.28, 0.735, 0.045), var(--animationDuration) opacity; }
  .wow::before {
    content: "";
    width: 100%;
    height: 100%;
    background: url("../images/common/wow.png") no-repeat center center;
    background-size: contain;
    transform: rotate(var(--angle));
    display: block; }
  .wow.animate:not(.active) {
    transform: scale(2);
    opacity: 0;
    filter: Alpha(opacity=0); }

#contents {
  padding-top: 0px !important; }
  #contents > .section {
    position: relative;
    z-index: 1; }
    #contents > .section .section_title_wrap .wow {
      margin-left: auto;
      margin-right: auto; }
    #contents > .section:not(#mv):not(#about) {
      width: 100svw;
      overflow-x: hidden; }
    #contents > .section:not(#mv_bottom):not(#explanation)::before {
      width: 100%;
      height: 100%;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1; }
    #contents > .section:not(#mv_bottom):not(#explanation) > * {
      position: relative;
      z-index: 2; }
    #contents > .section:not(#mv_bottom):not(#explanation)#mv::before {
      --gradientAngle:40deg;
      background: linear-gradient(var(--gradientAngle), var(--gradientStartColor), var(--gradientEndColor)); }
    #contents > .section:not(#mv_bottom):not(#explanation)#about, #contents > .section:not(#mv_bottom):not(#explanation)#shinshu_round, #contents > .section:not(#mv_bottom):not(#explanation)#tokyo_round, #contents > .section:not(#mv_bottom):not(#explanation)#tv {
      color: #FFF; }

#mv {
  height: 300svh; }
  #mv .inner {
    position: sticky !important;
    top: 0 !important;
    z-index: 1;
    height: 100svh;
    display: flex;
    flex-direction: column;
    grid-gap: var(--space4);
    align-items: center; }
    #mv .inner .inner_inner {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      grid-gap: var(--space4);
      align-items: center;
      overflow: hidden; }
    #mv .inner .logo_wrap,
    #mv .inner .title {
      bottom: calc( var(--buttonHeight) + var(--space4) ); }
    #mv .inner .logo_wrap {
      max-width: 298px;
      height: 208px; }
      #mv .inner .logo_wrap:not(.active) .logo .piece {
        transform: scale(1.5);
        opacity: 0;
        filter: Alpha(opacity=0); }
      #mv .inner .logo_wrap .logo {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center; }
        #mv .inner .logo_wrap .logo .piece {
          transition: var(--animationDuration) transform cubic-bezier(0.22, 0.62, 0.69, 1.19), var(--animationDuration) opacity; }
          #mv .inner .logo_wrap .logo .piece.piece_1 {
            aspect-ratio: 270/59;
            width: 91%; }
          #mv .inner .logo_wrap .logo .piece.piece_2 {
            aspect-ratio: 298/79;
            width: 100%; }
          #mv .inner .logo_wrap .logo .piece.piece_3 {
            aspect-ratio: 197/68;
            width: 66%; }
      #mv .inner .logo_wrap.active .logo .piece.piece_2 {
        transition-delay: 0.2s; }
      #mv .inner .logo_wrap.active .logo .piece.piece_3 {
        transition-delay: 0.4s; }
    #mv .inner .title {
      width: 48px;
      height: 305px;
      display: flex;
      flex-direction: column;
      align-items: center; }
      #mv .inner .title .piece {
        transition: calc( var(--animationDuration) * 3 ) filter, calc( var(--animationDuration) * 3 ) opacity;
        aspect-ratio: 1/1; }
        #mv .inner .title .piece:not(:last-child) {
          margin-bottom: -10px; }
        #mv .inner .title .piece.piece_1, #mv .inner .title .piece.piece_3, #mv .inner .title .piece.piece_4, #mv .inner .title .piece.piece_6, #mv .inner .title .piece.piece_8 {
          width: 100%; }
        #mv .inner .title .piece.piece_2, #mv .inner .title .piece.piece_5, #mv .inner .title .piece.piece_7, #mv .inner .title .piece.piece_9 {
          width: 75%; }
      #mv .inner .title.active .piece.piece_2 {
        transition-delay: 0.1s; }
      #mv .inner .title.active .piece.piece_3 {
        transition-delay: 0.2s; }
      #mv .inner .title.active .piece.piece_4 {
        transition-delay: 0.3s; }
      #mv .inner .title.active .piece.piece_5 {
        transition-delay: 0.4s; }
      #mv .inner .title.active .piece.piece_6 {
        transition-delay: 0.5s; }
      #mv .inner .title.active .piece.piece_7 {
        transition-delay: 0.6s; }
      #mv .inner .title.active .piece.piece_8 {
        transition-delay: 0.7s; }
      #mv .inner .title.active .piece.piece_9 {
        transition-delay: 0.8s; }
      #mv .inner .title.active.vanish .piece {
        transition-delay: 0s !important; }
      #mv .inner .title:not(.active) .piece, #mv .inner .title.vanish .piece {
        filter: blur(20px);
        opacity: 0;
        filter: Alpha(opacity=0); }
  #mv .scroll {
    --barHeight:60px;
    --h:140px;
    position: absolute;
    bottom: calc( var(--buttonHeight) + var(--space2) ); }
    #mv .scroll .a {
      flex-direction: column-reverse; }
    #mv .scroll .txt::before {
      content: "scroll" !important; }

#mv_bottom {
  margin-top: calc( -1 * 11svw);
  padding-bottom: var(--space5); }
  #mv_bottom .wow#mv_wow_02 {
    margin-left: auto;
    transition-delay: 0.2s; }
  #mv_bottom .wow#mv_wow_02, #mv_bottom .wow#mv_wow_04 {
    --angle:-15deg; }
  #mv_bottom .wow#mv_wow_03 {
    margin-left: calc( 50svw - 160px );
    transition-delay: 0.4s; }
  #mv_bottom .wow#mv_wow_04 {
    margin-left: auto;
    margin-right: calc( 50svw - 160px );
    transition-delay: 0.6s; }
  #mv_bottom .memo {
    font-size: var(--fontSize_ll);
    margin-top: var(--space3);
    margin-bottom: var(--space3);
    position: relative; }
    #mv_bottom .memo p {
      position: relative; }
      #mv_bottom .memo p::after {
        width: 100%;
        height: 100%;
        background: #FFF;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: right center;
        transition: var(--animationDuration) transform; }
      #mv_bottom .memo p.active::after {
        transform: scaleX(0); }
    #mv_bottom .memo#mv_memo_02 p {
      text-align: right; }
    #mv_bottom .memo#mv_memo_03 p:last-child {
      text-align: right; }
      #mv_bottom .memo#mv_memo_03 p:last-child::after {
        transition-delay: 0.33s; }

#outline,
#flow {
  padding-top: var(--space5); }
  #outline::before,
  #flow::before {
    width: calc( 100% - var(--cont_margin) * 2 ) !important;
    height: calc( 100%  - var(--cont_margin) * 2 ) !important;
    top: var(--cont_margin) !important;
    left: var(--cont_margin) !important; }
  #outline .box_wrap,
  #flow .box_wrap {
    width: calc( 100% - var(--cont_margin) * 2 * 2 ); }

#outline {
  overflow-y: visible !important; }
  #outline::before {
    height: calc( 100%  - var(--cont_margin) * 2 - var(--space4) ) !important;
    top: calc( var(--cont_margin) + var(--space4) ) !important; }
  #outline::after {
    width: calc( 100% - var(--cont_margin) * 2 ) !important;
    content: "";
    position: absolute;
    bottom: calc( 100%  - var(--cont_margin) * 2 - var(--space4) - var(--space2) ) !important;
    background: #FFF;
    height: 12vw;
    left: 0;
    right: 0;
    margin: auto;
    transform-origin: center bottom;
    transform: skewY(-5deg); }

#outline::before {
  background: #FFF !important; }
#outline .list_wrap.list_judge_wrap {
  margin-top: var(--space1); }
  #outline .list_wrap.list_judge_wrap .list {
    --labelWidth:96px;
    --contWidth:calc( 100% - ( var(--labelWidth) + var(--listGap) ) ); }
    #outline .list_wrap.list_judge_wrap .list .inner {
      flex-direction: row;
      align-items: center; }
      #outline .list_wrap.list_judge_wrap .list .inner .thumb {
        width: var(--labelWidth);
        aspect-ratio: 1/1; }

#flow {
  margin-top: -1px; }
  #flow::before {
    background: #F0F7FF !important;
    /*height:calc( 100%  - var(--cont_margin) * 2 - var(--space4) ) !important;
    top:calc( var(--cont_margin) + var(--space4) ) !important;*/ }
  #flow .boxes {
    display: flex;
    flex-direction: column;
    grid-gap: var(--space4); }
    #flow .boxes .box {
      width: 100%;
      display: flex;
      flex-direction: column;
      grid-gap: var(--space1);
      align-items: center;
      font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, Meiryo, sans-serif;
      font-optical-sizing: auto;
      font-weight: 800;
      font-style: normal;
      position: relative; }
      #flow .boxes .box .border {
        width: 100%;
        box-sizing: border-box;
        padding: var(--space1);
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid var(--colorBlack);
        background: #FFF; }
      #flow .boxes .box:not(:last-child)::after {
        content: "";
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        width: 12px;
        height: 6px;
        background: var(--colorBlack);
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: calc( 100% + var(--space4) / 2 - 3px ); }

#shinshu_round,
#tokyo_round,
#tv {
  margin-top: -1px; }
  #shinshu_round .section_title_wrap .title_img,
  #tokyo_round .section_title_wrap .title_img,
  #tv .section_title_wrap .title_img {
    margin-bottom: var(--space2); }
  #shinshu_round .wow,
  #tokyo_round .wow,
  #tv .wow {
    pointer-events: none;
    --angle:-15deg;
    opacity: 0.2;
    filter: Alpha(opacity=20); }
    #shinshu_round .wow::before,
    #tokyo_round .wow::before,
    #tv .wow::before {
      background-image: url("../images/home/wow.png"); }

.bridge {
  height: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 3; }
  .bridge .wow {
    margin-top: calc( var(--space4) * 1.5 ); }
