@charset "UTF-8";
html {
  scroll-behavior: smooth;
  scroll-padding: 48px; }
  @media screen and (max-width: 767px) {
    html {
      scroll-behavior: auto;
      scroll-padding: 0; } }

.box {
  display: grid;
  min-height: calc(100vh - 48px - 115px); }
  @media screen and (max-width: 767px) {
    .box {
      min-height: calc(100vh - 48px - 60px);
      margin-bottom: 0; } }
  .box:has(> .embed-responsive) {
    align-items: center; }
  .box#title {
    min-height: calc(100vh - 148px - 115px); }
    .box#title::before {
      opacity: 0; }
    @media screen and (max-width: 767px) {
      .box#title {
        min-height: calc(100vh - 48px - 60px); }
        .box#title::before {
          opacity: 1; } }
    .box#title .wrap {
      align-items: flex-start; }
    .box#title .bg {
      transform-origin: top; }
      @media screen and (max-width: 767px) {
        .box#title .bg {
          background-size: cover; } }
    @media screen and (max-width: 767px) {
      .box#title .title-cont h1 {
        font-size: 6.6vw; } }
  .box .wrap {
    display: grid;
    align-items: center;
    width: 100%;
    padding-top: 100px;
    padding-bottom: 180px; }
    @media screen and (max-width: 767px) {
      .box .wrap {
        padding-top: 60px !important;
        padding-bottom: 50px !important;
        padding-bottom: 60px !important; } }
    .box .wrap:is(#kanki-2 *) {
      padding-top: clamp(50px, calc(50px + (100vh - 800px) / 100 * 60), 110px);
      padding-bottom: clamp(140px, calc(150px + (100vh - 800px) / 100 * 140), 280px); }
      @media screen and (max-width: 767px) {
        .box .wrap:is(#kanki-2 *) {
          padding-bottom: 0 !important; } }
    .box .wrap:is(#hepa-1 *) {
      padding-top: 110px;
      padding-bottom: 190px; }
      @media screen and (max-width: 767px) {
        .box .wrap:is(#hepa-1 *) {
          padding-top: 240px !important; } }
    .box .wrap:is(#hepa-3 *) {
      padding-bottom: 160px; }
    .box .wrap:is(#joka-2 *) {
      padding-top: clamp(50px, calc(50px + (100vh - 800px) / 100 * 60), 110px);
      padding-bottom: clamp(140px, calc(150px + (100vh - 800px) / 100 * 190), 330px); }
      @media screen and (max-width: 767px) {
        .box .wrap:is(#joka-2 *) {
          padding-bottom: 0 !important; } }
    .box .wrap:is(#joka-3 *) {
      padding-bottom: 160px; }
      .box .wrap:is(#joka-3 *) .e-cont-inner {
        margin-top: 30px; }
        @media screen and (max-width: 767px) {
          .box .wrap:is(#joka-3 *) .e-cont-inner {
            margin-top: 0; } }
    @media screen and (max-width: 767px) {
      .box .wrap:is(#joka-5 *) {
        padding-bottom: 300px !important; } }
    .box .wrap:is(#joka-5 *) .r-am {
      margin-bottom: 0; }
    .box .wrap > div {
      padding: 0 !important; }
      .box .wrap > div.title-cont {
        padding-top: 5vh !important; }
        @media screen and (max-width: 767px) {
          .box .wrap > div.title-cont {
            padding-top: 0 !important; } }
    .box .wrap .e-cont h2 {
      font-size: 26px; }
      @media screen and (max-width: 767px) {
        .box .wrap .e-cont h2 {
          font-size: 4.76vw; } }
  .box .embed-responsive > a {
    cursor: pointer;
    transform: scale(1); }
  .box .embed-responsive > div {
    width: 100%;
    max-height: calc(100vh - 48px - 115px);
    aspect-ratio: 16 / 9;
    padding: 0 !important; }
    @media screen and (max-width: 767px) {
      .box .embed-responsive > div {
        height: calc(100vh - 48px - 60px); } }
    .box .embed-responsive > div iframe {
      position: relative !important;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .box .scroll-btn {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    z-index: 10; }
    @media screen and (max-width: 767px) {
      .box .scroll-btn {
        display: none; } }
    .box .scroll-btn a {
      background: none !important;
      transition: 0.3s all; }
      .box .scroll-btn a:hover {
        opacity: 0.7; }
      .box .scroll-btn a img {
        width: 100%; }
    .box .scroll-btn:is(.embed-responsive:has(> div) + *) {
      display: none; }

.ft_banner {
  height: 115px; }
  @media screen and (max-width: 767px) {
    .ft_banner {
      height: 60px; } }

body {
  overflow: visible; }
  @media screen and (max-width: 767px) {
    body {
      overflow: none; } }

#page {
  overflow: visible; }
  @media screen and (max-width: 767px) {
    #page {
      overflow: none; } }

@media screen and (max-width: 767px) {
  #hepa-1 .bg {
    transform: scale(1.07); } }

#hepa-2 .embed-responsive, #joka-4 .embed-responsive {
  height: fit-content !important; }

#hepa-2 iframe, #joka-4 iframe {
  height: 100% !important; }

#kanki-2 figure, #joka-2 figure {
  top: 48%; }
  @media screen and (max-width: 767px) {
    #kanki-2 figure, #joka-2 figure {
      position: relative;
      top: 0;
      left: 0; } }
  #kanki-2 figure img, #joka-2 figure img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 0.5s all; }
    #kanki-2 figure img:nth-child(1), #kanki-2 figure img:nth-child(5), #joka-2 figure img:nth-child(1), #joka-2 figure img:nth-child(5) {
      position: relative;
      opacity: 1; }
    #kanki-2 figure img.show, #joka-2 figure img.show {
      opacity: 1; }

/* animation
============================================================ */
@media screen {
  /* 画面外にいる状態
  ---------------------------------------- */
  .fadeinN,
  .fadeinNauto {
    opacity: 0;
    transform: translate(0, 0);
    transition: all .6s; }

  .fadeinL,
  .fadeinLauto {
    opacity: 0;
    transform: translate(-300px, 0);
    transition: all 1.5s; }

  .fadeinR,
  .fadeinRauto {
    opacity: 0;
    transform: translate(300px, 0);
    transition: all .9s; }

  .fadeinB,
  .fadeinBauto {
    opacity: 0;
    transform: translate(0, 100px);
    transition: all .9s; }

  .fadeinT,
  .fadeinTauto {
    opacity: 0;
    transform: translate(0, -100px);
    transition: all .9s; }

  .delay01 {
    transition-delay: .3s; }

  .delay02 {
    transition-delay: .5s; }

  .delay03 {
    transition-delay: .8s; }

  .delay04 {
    transition-delay: 1.1s; }

  .delay05 {
    transition-delay: 1.5s; }

  /* 画面内に入った状態
  ---------------------------------------- */
  .fadeinN.scrollin,
  .fadeinL.scrollin,
  .fadeinR.scrollin,
  .fadeinB.scrollin,
  .fadeinT.scrollin,
  .fadeinNauto.scrollin,
  .fadeinLauto.scrollin,
  .fadeinRauto.scrollin,
  .fadeinBauto.scrollin,
  .fadeinTauto.scrollin {
    opacity: 1;
    transform: translate(0, 0); } }
@media screen and (max-width: 768px) {
  .fadeinT,
  .fadeinTauto {
    opacity: 0;
    transform: translate(0, 0px); }

  .fadeinT.scrollin,
  .fadeinTauto.scrollin {
    opacity: 1;
    transform: translate(0, 0); }

  .delay03 {
    transition-delay: 0s; }

  .delay04 {
    transition-delay: 0s; }

  .delay05 {
    transition-delay: 0s; } }