@charset "utf-8";

/************************************************/

:root {
  --cntent_w: 780px;
  --cntent_w_sp: 100vw;
  --cntent_w_inner: 650px;
  --cntent_w_inner_sp: 84vw;
  --btn_home_size: 80px;
  --btn_home_size_sp: 10vw;
  --btn_home_inset: 25px;
  --btn_home_inset_sp: 2.8vw;
  --font_size: 20px;
  --font_size_sp: 3.0vw;
  --color_strong: #728c3e;
}

/************************************************/

  #WaModern {
    background: url(../images/bg_img.png);
    font-family: 'Noto Serif JP', serif;
    font-size: var(--font_size) !important;
    line-height: 1.8;
    color: #000;
    letter-spasing: 0;

    /********************************************/

    & a {
      transition: 1.0s;
    }

    & ul {
      margin: unset;
      padding: unset;

      & li {
        margin: unset;
        padding: unset;
      }
    }

    /********************************************/

    & .wa_modern_wrap {
      position: relative;
      inline-size: var(--cntent_w);
      margin-inline: auto;
      background: #fff;
      border-inline: solid 1px #999;
      box-shadow: 10px 0 30px -5px rgba(0, 0, 0, 0.15);
    }

    /********************************************/

    & header {
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: 0;
      inline-size: var(--cntent_w);
      z-index: 50;

      & .logo {
        inline-size: calc(var(--cntent_w) * 0.35);
        padding: calc(var(--cntent_w) * 0.06);
      }

      & .btn_home {
        position: fixed;
        inset-block-start: var(--btn_home_inset);
        inset-inline-end: calc(50% - (var(--cntent_w) / 2) + var(--btn_home_inset));
        inline-size: var(--btn_home_size);
        block-size: var(--btn_home_size);

        & a {
          display: block;
          inline-size: var(--btn_home_size);
          block-size: var(--btn_home_size);
        }
      }
    }

    /********************************************/

    & article {

      /*----------------------------------------*/

      & .hero {
        position: relative;
        inline-size: 100%;

        & .movie_fv-video {
          position: absolute;
          inline-size: var(--cntent_w);
          z-index: 0;
        }

        & h1 {
          position: relative;
          z-index: 10;
          padding-block-start: calc(var(--cntent_w) * 0.24);
          margin: 0;
        }

        & .button {
          position: relative;
          z-index: 10;
          margin-block: -4% 1%;

          & a {
            display: block;
            margin-inline: auto;
            background: url(../images/fv_btn.svg) no-repeat center center / cover;
            text-indent: -9999px;
            inline-size: calc(var(--cntent_w) * 0.6418);
            block-size: calc(var(--cntent_w) * 0.1646);

            &:hover {
              background-image: url(../images/fv_btn_hover.svg);
            }
          }
        }

        & .next {
          position: relative;
          z-index: 10;
          margin-block: 4% 7%;
        }
      }

      /*----------------------------------------*/

      & .intro {

        & .infinite-slider {
          overflow: hidden;
          inline-size: 100%;

          & .slide-track {
            display: flex;
            inline-size: calc(var(--cntent_w) * 2.69 * 2);
            animation: infinite-slider-scroll 40s linear infinite; /* 20秒かけて左に無限ループ */

            margin: 0;

            /* 一時停止のオプション: マウスホバー時に止める */
            &:hover {
              /*animation-play-state: paused;*/
            }

            & li {
              margin: 0;
            }
          }
        }
      }

      /*----------------------------------------*/

      & .points {

        & .howto {

          & .scroll {
            margin-block-end: 1.8em;

            & ul {
              inline-size: var(--cntent_w_inner);
              margin-inline: auto;
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              gap: calc(var(--cntent_w_inner) * 0.046);
            }
          }
        }

        & .point_01 {
        }

        & .point_02 {
        }

        & .point_03 {
        }

        & .why {
          margin-block-start: calc(var(--cntent_w) * 0.115);
        }

        & .firststep {
        }
      }

      /*----------------------------------------*/

      & .philosophy {
        margin-block-start: calc(var(--cntent_w) * 0.115);

        & > div {
          margin-block-end: calc(var(--cntent_w) * 0.115);
        }
      }

      /*----------------------------------------*/

      & .cta {

        & a {
          display: block;
          background: url(../images/cta_btn.svg) no-repeat center center / cover;
          text-indent: -9999px;
          inline-size: calc(var(--cntent_w) * 1.00);
          block-size: calc(var(--cntent_w) * 0.256);

          &:hover {
            background-image: url(../images/cta_btn_hover.svg);
          }
        }
      }

      /*----------------------------------------*/

    }

    /********************************************/

    & footer {
      padding-block: 2.8em;

      & .inner {
        inline-size: var(--cntent_w_inner);
        margin-inline: auto;
        padding-block-end: 2.8em;
      }

      & .logo_sui {
        padding-block-end: 0.8em;

        & a {
          display: block;
          background: url(../images/logo_bk.svg) no-repeat center center / cover;
          text-indent: -9999px;
          inline-size: calc(var(--cntent_w) * 0.276);
          block-size: calc(var(--cntent_w) * 0.078);
        }
      }

      & address {
        font-style: normal;

        & span {
          color: var(--color_strong);
        }
      }

      & .logo_nh {
        background: #000;
        inline-size: 100%;
        padding-block: 1.8em;

        & a {
          display: block;
          background: url(../images/nh_logo_wh.svg) no-repeat center center / cover;
          text-indent: -9999px;
          inline-size: calc(var(--cntent_w) * 0.363);
          block-size: calc(var(--cntent_w) * 0.034);
          margin-inline: auto;
        }
      }
    }

    /********************************************/

    & .swiper {

      & .swiper-wrapper {
        transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
      }

      & .swiper-button-prev {
        background: url(../images/slide_btn_l.svg) no-repeat center center / contain;
        inline-size: calc(var(--cntent_w_inner) * 0.0692);
        block-size: calc(var(--cntent_w_inner) * 0.0692);
        transform: translateY(10px);

        &::after {
          content: none;
        }
      }

      & .swiper-button-next {
        background: url(../images/slide_btn_r.svg) no-repeat center center / contain;
        inline-size: calc(var(--cntent_w_inner) * 0.0692);
        block-size: calc(var(--cntent_w_inner) * 0.0692);
        transform: translateY(10px);

        &::after {
          content: none;
        }
      }

      &.slider_point_01_pict {
        inline-size: var(--cntent_w_inner);
      }

      &.slider_point_02_pict {
        inline-size: var(--cntent_w_inner);
      }

      &.slider_point_03_pict {
        inline-size: var(--cntent_w_inner);
      }

      & .swiper-slide {

        & img {
          inline-size: 100%;
        }
      }
    }

    /********************************************/

  }

/************************************************/

@media screen and (width <=767px) {

  #WaModern {
    font-size: var(--font_size_sp) !important;

    /********************************************/

    & .wa_modern_wrap {
      inline-size: var(--cntent_w_sp);
      border-inline: unset;
      box-shadow: unset;
    }

    /********************************************/

    & header {
      inline-size: var(--cntent_w_sp);

      & .logo {
        inline-size: calc(var(--cntent_w_sp) * 0.35);
        padding: calc(var(--cntent_w_sp) * 0.06);
      }

      & .btn_home {
        inset-block-start: var(--btn_home_inset_sp);
        inset-inline-end: var(--btn_home_inset_sp);
        inline-size: var(--btn_home_size_sp);
        block-size: var(--btn_home_size_sp);

        & a {
          inline-size: var(--btn_home_size_sp);
          block-size: var(--btn_home_size_sp);
        }
      }
    }

    /********************************************/

    & article {

      /*----------------------------------------*/

      & .hero {

        & .movie_fv-video {
          inline-size: var(--cntent_w_sp);
        }

        & h1 {
          padding-block-start: calc(var(--cntent_w_sp) * 0.24);
        }

        & .button {

          & a {
            inline-size: calc(var(--cntent_w_sp) * 0.6418);
            block-size: calc(var(--cntent_w_sp) * 0.1646);
          }
        }
      }

      /*----------------------------------------*/

      & .intro {

        & .infinite-slider {

          & .slide-track {
            inline-size: calc(var(--cntent_w_sp) * 2.69 * 2);
          }
        }
      }

      /*----------------------------------------*/

      & .points {

        & .howto {

          & .scroll {

            & ul {
              inline-size: var(--cntent_w_inner_sp);
              gap: calc(var(--cntent_w_inner_sp) * 0.046);
            }
          }
        }

        & .point_01 {
        }

        & .point_02 {
        }

        & .point_03 {
        }

        & .why {
          margin-block-start: calc(var(--cntent_w_sp) * 0.115);
        }

        & .firststep {
        }
      }

      /*----------------------------------------*/

      & .philosophy {
        margin-block-start: calc(var(--cntent_w_sp) * 0.115);

        & > div {
          margin-block-end: calc(var(--cntent_w_sp) * 0.115);
        }
      }

      /*----------------------------------------*/

      & .cta {

        & a {
          inline-size: calc(var(--cntent_w_sp) * 1.00);
          block-size: calc(var(--cntent_w_sp) * 0.256);
        }
      }

      /*----------------------------------------*/

    }

    /********************************************/

    & footer {

      & .inner {
        inline-size: var(--cntent_w_inner_sp);
      }

      & .logo_sui {

        & a {
          inline-size: calc(var(--cntent_w_sp) * 0.276);
          block-size: calc(var(--cntent_w_sp) * 0.078);
        }
      }

      & .logo_nh {

        & a {
          display: block;
          inline-size: calc(var(--cntent_w_sp) * 0.363);
          block-size: calc(var(--cntent_w_sp) * 0.034);
        }
      }

    }

    /********************************************/

    & .swiper {

      & .swiper-button-prev {
        inline-size: calc(var(--cntent_w_inner_sp) * 0.0692);
        block-size: calc(var(--cntent_w_inner_sp) * 0.0692);
      }

      & .swiper-button-next {
        inline-size: calc(var(--cntent_w_inner_sp) * 0.0692);
        block-size: calc(var(--cntent_w_inner_sp) * 0.0692);
      }

      &.slider_point_01_pict {
        inline-size: var(--cntent_w_inner_sp);
      }

      &.slider_point_02_pict {
        inline-size: var(--cntent_w_inner_sp);
      }

      &.slider_point_03_pict {
        inline-size: var(--cntent_w_inner_sp);
      }
    }

    /********************************************/

  }

}

/************************************************/

  @keyframes infinite-slider-scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      /* リスト要素の全幅（-50%）分だけ移動 */
      transform: translateX(-50%);
    }
  }

/************************************************/