@charset "UTF-8";
body{
    overflow-x: hidden;
}
header,
 header.hide{
    transform: translateY(0);
	transition: all ease 1.2s;
}
.nav {
    position: fixed;
    right: 0;
    top: 0;
   transform: translateY(-100%);
    width: 100%;
    height: 100vh;
    background-color: var(--main);
    transition: all .6s;
    z-index: 200;
    overflow-y: auto; /* メニューが多くなったらスクロールできるように */
  }
  .hamburger {
    position: fixed;
    right: 0;
    top: 0;
    width: 100px; /* クリックしやすい幅 */
    height: 60px; /* クリックしやすい高さ */
    cursor: pointer;
    z-index: 300;
  }

  .hamburger_border {
    position: absolute;
    left: 25%;
    width: 50%;
    height: 2px;
    background-color: var(--main);
    transition: all .5s;
  }
  .hamburger_border_top {
    top: 35%;
  }
  .hamburger_border_bottom {
    top: auto;
    bottom: 40%;
  }
  .black_bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: var(--main);
    opacity: 0;
    visibility: hidden;
    transition: all .5s;
    cursor: pointer;
  }

  /* 表示された時用のCSS */
  .nav-open .nav {
    transform: translateY(0);
  }
  .nav-open .black_bg {
    opacity: .8;
    visibility: visible;
  }

  .nav-open .hamburger_border{
    background-color: var(--wh);
  }
  .nav-open .hamburger_border_top {
    transform: rotate(35deg);
    top: 50%;
    transition: all .5s;
  }
  .nav-open .hamburger_border_bottom {
    transform: rotate(-35deg);
    bottom: 45%;
    transition: all .5s;
  }

  header nav{
	background: none;
    }
  #gl_nv{
    flex-direction: column;
    justify-content: center;
    height: 100svh;
    gap: 60px 0;
  }
  #gl_nv a{
    display: table;
    margin: 0 auto;
    color: var(--wh);
    }

    main h2{
      font-size: 1.8em;
    }


    #visual{
      min-height: auto;
    }
    #visual figure.pararaxItem img{
      max-height: 500px;
    }
    #visual .txt_wrap{
      gap: 0 40px;
    }
    #visual aside{
      font-size: 0.8em;
    }
    .banner{
      max-width: 100%;
    }
    .banner h2 span{
      display: block;
    }

    #featured .featured_top{
      flex-direction: column-reverse;
      gap: 40px 0;
    }
    #featured .featured_top > .img_box{
      width: 100%;
    }
    #featured .featured_top > .txt_box{
      width: 50%;
    }
    .featured_img .sm{
      width: 40%;
    }
    .featured_img .lg{
      width: 55%;
    }
    .featured_long{
      padding: 40px 8%;
    }
    .featured_long .fl_box{
      flex-direction: column;
      align-items: flex-start;
    }
    .featured_long dt{
      font-size: 2em;
      margin-bottom: 1em;
    }
    .featured_long dd{
      font-size: 1em;
    }

    #about_sz{
      flex-direction: column;
      gap: 40px 0;
      align-items: flex-start;
    }
    #about_sz .img_box{
      width: 70%;
    }
    #about_sz .txt_box{
      width: 100%;
    }

    #story .parallax_box{
      min-height: auto;
      height: auto;
    }
    #story .txt_wrap{
      width: 80%;
    }
    #story .parallax_content{
      background-attachment: scroll;
      aspect-ratio: 16 / 9;
    }

    #line-up .line-up_item{
      flex-direction: column;
    }
    #line-up .line-up_item article{
      width: 100%;
    }
    #line-up .line-up_item dt{
      font-size: 1.2em;
    }
    #line-up .line-up_item dd{
      font-size: 0.8em;
    }

    #guide section{
      flex-direction: column;
      gap: 40px 0;
    }

    #access .section_img{
      height: auto;
      aspect-ratio: 16 / 9;
    }

    footer .fl_box{
      flex-direction: column;
    }
    footer .wrap{
      padding: 60px 0;
    }
    footer .fl_box > .txt_box,
    footer .fl_box > .img_box{
      width: 100%;
    }

    footer .f_top{
      align-items: flex-start;
      width: 80%;
      gap: 40px 0;
    }
    footer .f_top .txt_box{
      font-size: 1.4em;
    }

    footer .info{
      align-items: flex-start;
      gap: 40px 0;
      font-size: 0.8em;
    }
    footer .info small{
      font-size: 0.7em;
    }

#pagetop{
    display: none;
}
a.tel{
	pointer-events:all;
}