@charset "UTF-8";
/*--------------------
	top_2024
---------------------*/
/*$color-keycolor: #dac0a3;*/
/*.Header.-top.-scrolledCompany {
  background-color: inherit;
}*/
::selection {
  color: #333;
  background-color: #ccc; }

#header {
  z-index: 10;
  /*opacity: 0;
  &.fadein {
    opacity: 1;
  }*/ }

.Header.-top.-scrolledCompany {
  background: #cdae8c; }

@media screen and (min-width: 768px) {
  .-scrolledCompany #mv .site-name {
    top: 100px !important; } }

.Footer {
  z-index: 100; }

.top {
  background: #cdae8c;
  /* main ここまで */
  /* modal ここまで */ }
  .top .LayoutContent {
    background: #cdae8c;
    padding-bottom: 100px; }
  .top #momentumscroll-area {
    padding-top: 0 !important; }
  .top p {
    line-height: 2; }
    @media screen and (max-width: 767px) {
      .top p {
        font-size: 3.6vw; } }
    @media screen and (min-width: 768px) {
      .top p {
        font-size: 15px; } }
  .top a {
    color: #fff; }
  .top main {
    color: #fff;
    padding-bottom: 200px;
    /* #mv ここまで */
    /* #vision ここまで */
    /* #why ここまで */
    /* #how ここまで */
    /* #business-cont ここまで */
    /* #future ここまで */
    /* #other ここまで */ }
    .top main .inner {
      padding: 0 25px; }
      @media screen and (min-width: 768px) {
        .top main .inner {
          padding: 0;
          width: 800px;
          margin: 0 auto; } }
    .top main .cont {
      position: relative;
      /*contain: paint;*/ }
      @media screen and (max-width: 767px) {
        .top main .cont + .cont {
          margin-top: 20%; } }
      @media screen and (min-width: 768px) {
        .top main .cont + .cont {
          margin-top: 120px;
          max-width: 1280px;
          min-width: 1280px;
          width: 1280px;
          margin-right: auto;
          margin-left: auto;
          padding: 0 140px; } }
      .top main .cont .inner {
        position: relative; }
      @media screen and (min-width: 768px) {
        .top main .cont .ttl-wrap {
          /*position: sticky;
          top: 165px;*/
          position: sticky;
          top: 120px; } }
      .top main .cont .en-ttl {
        line-height: 1;
        /*position: sticky;*/
        font-family: ab-shoutenkaku, sans-serif;
        font-style: normal;
        font-weight: 400; }
        @media screen and (max-width: 767px) {
          .top main .cont .en-ttl {
            font-size: 7.0vw;
            margin-bottom: 5%;
            padding: 0 25px;
            position: relative;
            z-index: 2; } }
        @media screen and (min-width: 768px) {
          .top main .cont .en-ttl {
            font-size: 40px;
            margin-bottom: 40px;
            /*position: fixed;*/
            position: sticky;
            top: 120px;
            transition: all 1s cubic-bezier(0.33, 1, 0.68, 1);
            opacity: 0;
            z-index: -1; } }
        @media screen and (min-width: 768px) {
          .top main .cont .en-ttl.active {
            opacity: 1;
            z-index: 2; } }
        .top main .cont .en-ttl span {
          display: block; }
          @media screen and (max-width: 767px) {
            .top main .cont .en-ttl span {
              font-size: 2.2vw; } }
          @media screen and (min-width: 768px) {
            .top main .cont .en-ttl span {
              font-size: 11px; } }
      @media screen and (min-width: 768px) {
        .top main .cont .detail-list > ul {
          /*display: flex;
          justify-content: space-between;
          gap: 50px;*/ } }
      @media screen and (min-width: 768px) {
        .top main .cont .detail-list > ul > li {
          /*flex: 1;
          display: flex;
          flex-direction: column;*/ } }
      @media screen and (min-width: 768px) {
        .top main .cont .detail-list > ul > li h3 .txt-link {
          margin-top: 10px; } }
      @media screen and (min-width: 768px) {
        .top main .cont .detail-list > ul > li p {
          flex-grow: 1; } }
      @media screen and (max-width: 767px) {
        .top main .cont .-sp-inner {
          padding: 0 10%;
          border-left: 1px solid #000;
          border-right: 1px solid #000; } }
      .top main .cont h2 {
        z-index: -1; }
        @media screen and (max-width: 767px) {
          .top main .cont h2 {
            /*font-size: 10vw;
            -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
            text-orientation: upright;
            letter-spacing: 0.1em;*/ } }
        @media screen and (min-width: 768px) {
          .top main .cont h2 {
            font-size: 48px;
            position: relative;
            /*top: 0;
            left: 50%;
            transform: translate(-50%,0);*/
            line-height: 1.5; } }
      @media screen and (max-width: 767px) {
        .top main .cont h3 {
          font-size: 4.8vw;
          margin-bottom: 10%; } }
      @media screen and (min-width: 768px) {
        .top main .cont h3 {
          font-size: 24px;
          margin-bottom: 40px; } }
      .top main .cont .kakukaku-anime img {
        display: none; }
      .top main .cont .kakukaku-anime .anime-img01 {
        display: block; }
    @media screen and (min-width: 768px) {
      .top main .cont2 {
        display: flex;
        justify-content: space-between;
        /*align-items: flex-end;*/
        min-height: 600px; } }
    @media screen and (min-width: 768px) {
      .top main .cont2 .ttl-wrap {
        flex: 1; } }
    @media screen and (max-width: 767px) {
      .top main .cont2 .ttl-wrap .en-ttl {
        margin-bottom: -9%; } }
    @media screen and (min-width: 768px) {
      .top main .cont2 .ttl-wrap .en-ttl {
        position: sticky;
        top: 120px; } }
    @media screen and (max-width: 767px) {
      .top main .cont2 .ttl-wrap .ttl-area {
        display: flex;
        padding: 0 25px;
        justify-content: space-between;
        margin-bottom: 15%; } }
    @media screen and (min-width: 768px) {
      .top main .cont2 .ttl-wrap .ttl-area {
        height: 100%; } }
    .top main .cont2 .ttl-wrap .ttl-area h2 {
      transition: all 1s cubic-bezier(0.33, 1, 0.68, 1);
      opacity: 0;
      transition-delay: .2s; }
      @media screen and (max-width: 767px) {
        .top main .cont2 .ttl-wrap .ttl-area h2 {
          margin-top: 0;
          order: 2;
          margin-left: -15%;
          margin-bottom: 15%;
          z-index: 5;
          width: 30%; } }
      @media screen and (min-width: 768px) {
        .top main .cont2 .ttl-wrap .ttl-area h2 {
          margin-top: 0;
          /*position: fixed;*/
          position: sticky;
          top: 200px;
          z-index: -1;
          width: 380px; } }
      .top main .cont2 .ttl-wrap .ttl-area h2.active {
        opacity: 1;
        z-index: 2; }
    @media screen and (max-width: 767px) {
      .top main .cont2 .ttl-wrap .ttl-area .main-img {
        width: 85%;
        order: 1;
        margin-top: auto; } }
    @media screen and (min-width: 768px) {
      .top main .cont2 .ttl-wrap .ttl-area .main-img {
        width: 260px;
        /*margin-top: 70px;*/ } }
    @media screen and (max-width: 767px) {
      .top main .cont2 .inner {
        width: 100%; } }
    @media screen and (min-width: 768px) {
      .top main .cont2 .inner {
        margin: 0;
        padding-bottom: 2px;
        /*flex: 1;*/
        flex: 0.7; } }
    .top main .cont2 .inner .detail-list > ul > li + li {
      margin-top: 60px; }
    @media screen and (min-width: 768px) {
      .top main .cont2 .inner .detail-list h3 {
        margin-bottom: 20px; } }
    .top main #mv {
      /*overflow-x: hidden;*/ }
      .top main #mv .mv-area {
        height: 100vh;
        position: relative;
        transition: all 0.2s cubic-bezier(0.33, 1, 0.68, 1);
        margin: 0 0 0; }
        @media screen and (min-width: 768px) {
          .top main #mv .mv-area.small-window {
            margin: 50px 0 70px; } }
        .top main #mv .mv-area .site-name {
          color: #fff;
          z-index: 10;
          transition: all 1s cubic-bezier(0.33, 1, 0.68, 1);
          opacity: 0;
          font-family: ab-shoutenkaku, sans-serif;
          font-style: normal;
          font-weight: 400;
          position: absolute; }
          @media screen and (max-width: 767px) {
            .top main #mv .mv-area .site-name {
              font-size: 2vw;
              top: 10%;
              left: 25px; } }
          @media screen and (min-width: 768px) {
            .top main #mv .mv-area .site-name {
              min-width: 1280px;
              max-width: 1280px;
              font-size: 12px;
              top: 120px;
              left: 50%;
              transform: translate(-50%, 0);
              padding: 0;
              /*&.active {
                padding: 0 140px;
              }*/ } }
          .top main #mv .mv-area .site-name.none {
            opacity: 0;
            z-index: -5; }
        .top main #mv .mv-area .logo {
          width: 50%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 5; }
        .top main #mv .mv-area .mv-slide {
          overflow: inherit !important; }
          .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide {
            position: relative;
            height: 100vh;
            /*overflow: hidden;*/
            background: #cdae8c;
            z-index: 1; }
            .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide .slide-inner {
              width: 1280px;
              height: 100%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%); }
            .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide .img {
              position: absolute; }
              .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide .img img {
                /*mix-blend-mode: multiply;*/ }
            .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide p {
              position: absolute;
              font-size: 22px;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              text-align: center;
              z-index: 100; }
            .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide.slide01 .img01 {
              top: 90px;
              left: -60px;
              /*opacity: 0;
              transition: $transition;
              transition-delay: 0.6s;
              transform: translate(30px,0);*/
              opacity: 0; }
            .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide.slide01 .img02 {
              top: -40px;
              right: -20px;
              z-index: 2;
              opacity: 0; }
              .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide.slide01 .img02 img {
                animation: spin 2s linear infinite; }
            .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide.slide01 .img03 {
              top: 400px;
              right: 0px;
              width: 360px;
              z-index: 3;
              opacity: 0;
              /*opacity: 0;
              transition: $transition;
              transition-delay: 1.2s;
              transform: translate(30px,0);*/ }
            .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide.slide02 .img01 {
              top: 160px;
              left: -60px;
              opacity: 0; }
            .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide.slide02 .img02 {
              top: 150px;
              left: 360px;
              opacity: 0; }
            .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide.slide02 .img02-2 {
              top: 150px;
              left: 520px;
              opacity: 0; }
            .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide.slide02 .img03 {
              top: 330px;
              left: 340px;
              opacity: 0; }
              .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide.slide02 .img03 img {
                animation: walk 2s linear infinite; }
            .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide.slide02 .img04 {
              top: 150px;
              right: -110px;
              opacity: 0; }
          .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide-active.slide01 .img01 {
            animation: slide01 5s ease-out  forwards; }
          .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide-active.slide01 .img02 {
            animation: slide01 5s ease-out 0.5s forwards; }
          .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide-active.slide01 .img03 {
            animation: slide01 5s ease-out 0.8s forwards; }
          .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide-active.slide02 .img01 {
            animation: slide01 5s ease-out  forwards; }
          .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide-active.slide02 .img02 {
            animation: slide01 5s ease-out 0.3s forwards; }
          .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide-active.slide02 .img02-2 {
            animation: slide01 5s ease-out 0.4s forwards; }
          .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide-active.slide02 .img03 {
            animation: slide01 5s ease-out 0.5s forwards; }
          .top main #mv .mv-area .mv-slide .swiper-wrapper .swiper-slide-active.slide02 .img04 {
            animation: slide01 5s ease-out 0.8s forwards; }
        .top main #mv .mv-area #mv-img {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          margin-top: 50px;
          transition: all 0.2s cubic-bezier(0.33, 1, 0.68, 1);
          z-index: 2; }
          @media screen and (max-width: 1400px) {
            .top main #mv .mv-area #mv-img {
              margin-top: 0; } }
          @media screen and (max-width: 767px) {
            .top main #mv .mv-area #mv-img {
              position: relative;
              transform: translate(0, 0);
              margin-top: 0;
              top: inherit;
              left: inherit; } }
          @media screen and (min-width: 768px) {
            .top main #mv .mv-area #mv-img .inner {
              width: 1400px;
              height: 650px; } }
          @media screen and (max-width: 767px) {
            .top main #mv .mv-area #mv-img .inner {
              /*height: 100vh;*/
              height: 170vw; } }
          .top main #mv .mv-area #mv-img .img {
            position: absolute;
            height: auto; }
            @media screen and (min-width: 768px) {
              .top main #mv .mv-area #mv-img .img {
                transition: all 1s cubic-bezier(0.33, 1, 0.68, 1);
                opacity: 0; } }
            @media screen and (max-width: 767px) {
              .top main #mv .mv-area #mv-img .img {
                opacity: 0; } }
            .top main #mv .mv-area #mv-img .img.mv_main {
              /*.frame {
                animation: switch_main 2s infinite;
                &:nth-child(1) {
                  animation-delay: 0s;
                }
                &:nth-child(2) {
                  animation-delay: 1s;
                }
              }*/ }
              @media screen and (max-width: 767px) {
                .top main #mv .mv-area #mv-img .img.mv_main {
                  /*top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);*/
                  top: 30vw;
                  left: 50%;
                  transform: translate(-50%, 0);
                  height: auto;
                  width: 90vw;
                  aspect-ratio: 10 / 13;
                  /*margin-top: 3vh;*/ } }
              @media screen and (min-width: 768px) {
                .top main #mv .mv-area #mv-img .img.mv_main {
                  top: 0;
                  left: 50%;
                  transform: translate(-50%, 0);
                  height: 650px;
                  width: 500px;
                  opacity: 1; } }
            @media screen and (min-width: 768px) {
              .top main #mv .mv-area #mv-img .img.mv_tree {
                top: 0;
                left: 0;
                transform: translate(0, 20px);
                animation-delay: 0.2s !important; } }
            @media screen and (max-width: 767px) {
              .top main #mv .mv-area #mv-img .img.mv_tree {
                /*display: none;*/
                top: 30vw;
                left: 25px;
                width: calc(100% - 50px);
                animation-duration: 4.8s !important;
                animation-delay: 0.2s !important; } }
            @media screen and (min-width: 768px) {
              .top main #mv .mv-area #mv-img .img.mv_man {
                left: 0;
                bottom: 0;
                transform: translate(-20px, 0); } }
            @media screen and (max-width: 767px) {
              .top main #mv .mv-area #mv-img .img.mv_man {
                /*display: none;*/
                top: 85vw;
                left: 25px;
                width: 64vw;
                animation-duration: 4.6s !important;
                animation-delay: 0.4s !important; } }
            .top main #mv .mv-area #mv-img .img.mv_fire {
              /*.frame {
                animation: switch_fire 2s linear infinite;
                &:nth-child(1) {
                  animation-delay: 0s;
                }
                &:nth-child(2) {
                  animation-delay: 0.66s;
                }
                &:nth-child(3) {
                  animation-delay: 1.3333s;
                }
              }*/ }
              @media screen and (min-width: 768px) {
                .top main #mv .mv-area #mv-img .img.mv_fire {
                  left: 320px;
                  bottom: 0;
                  width: 162px;
                  height: 402px;
                  transform: translate(0, -20px); } }
              @media screen and (max-width: 767px) {
                .top main #mv .mv-area #mv-img .img.mv_fire {
                  /*display: none;*/
                  top: 85vw;
                  right: 25px;
                  width: 27vw;
                  aspect-ratio: 1 / 2.4;
                  animation-duration: 4.4s !important;
                  animation-delay: 0.6s !important; } }
            @media screen and (min-width: 768px) {
              .top main #mv .mv-area #mv-img .img.mv_woman {
                right: 175px;
                bottom: 0;
                transform: translate(-20px, 0); } }
            @media screen and (max-width: 767px) {
              .top main #mv .mv-area #mv-img .img.mv_woman {
                /*display: none;*/
                left: 25px;
                top: 73vw;
                width: 48vw;
                animation-duration: 4.6s !important;
                animation-delay: 0.4s !important; } }
            @media screen and (min-width: 768px) {
              .top main #mv .mv-area #mv-img .img.mv_horse {
                top: 0;
                right: 230px;
                transform: translate(20px, 0); } }
            @media screen and (max-width: 767px) {
              .top main #mv .mv-area #mv-img .img.mv_horse {
                /*display: none;*/
                top: 30vw;
                left: 25px;
                width: 41vw;
                animation-duration: 4.8s !important;
                animation-delay: 0.2s !important; } }
            @media screen and (min-width: 768px) {
              .top main #mv .mv-area #mv-img .img.mv_broom {
                top: 0;
                right: 80px;
                transform: translate(0, -20px); } }
            @media screen and (max-width: 767px) {
              .top main #mv .mv-area #mv-img .img.mv_broom {
                /*display: none;*/
                top: 30vw;
                right: 22vw;
                width: 29vw;
                animation-duration: 4.4s !important;
                animation-delay: 0.6s !important; } }
            @media screen and (min-width: 768px) {
              .top main #mv .mv-area #mv-img .img.mv_kokeshi {
                top: -6px;
                right: 0;
                transform: translate(0, -20px); } }
            @media screen and (max-width: 767px) {
              .top main #mv .mv-area #mv-img .img.mv_kokeshi {
                /*display: none;*/
                top: 30vw;
                right: 25px;
                width: 11.8vw;
                animation-duration: 4.6s !important;
                animation-delay: 0.4s !important; } }
            @media screen and (min-width: 768px) {
              .top main #mv .mv-area #mv-img .img.mv_ochoko {
                right: 20px;
                bottom: 215px;
                transform: translate(20px, 0); } }
            @media screen and (max-width: 767px) {
              .top main #mv .mv-area #mv-img .img.mv_ochoko {
                /*display: none;*/
                top: 86vw;
                right: 10vw;
                width: 26vw;
                animation-duration: 4.2s !important;
                animation-delay: 0.8s !important; } }
            @media screen and (min-width: 768px) {
              .top main #mv .mv-area #mv-img .img.mv_wappa {
                right: 0;
                bottom: 0;
                transform: translate(0, 20px); } }
            @media screen and (max-width: 767px) {
              .top main #mv .mv-area #mv-img .img.mv_wappa {
                /*display: none;*/
                right: 25px;
                top: 112vw;
                width: 42vw;
                animation-duration: 4.8s !important;
                animation-delay: 0.2s !important; } }
            .top main #mv .mv-area #mv-img .img .frame {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              /*opacity: 0;*/ }
            @media screen and (max-width: 767px) {
              .top main #mv .mv-area #mv-img .img.fadein {
                animation: slide-anime 5s ease-in-out; } }
      .top main #mv .lead-txt {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap; }
        @media screen and (max-width: 767px) {
          .top main #mv .lead-txt {
            padding: 0 25px;
            margin-top: 5%;
            width: 100%; } }
        @media screen and (min-width: 768px) {
          .top main #mv .lead-txt {
            margin-top: 0;
            /*padding: 0 5%;*/
            z-index: 3;
            width: 1200px;
            margin: 0 auto; } }
        @media screen and (max-width: 767px) {
          .top main #mv .lead-txt .logo {
            margin: 0 0 15%;
            width: 50%; } }
        @media screen and (min-width: 768px) {
          .top main #mv .lead-txt .logo {
            order: 2;
            margin: 0 60px;
            min-width: 240px; } }
        @media screen and (min-width: 768px) {
          .top main #mv .lead-txt p {
            -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
            font-feature-settings: initial;
            height: 280px; }
            .top main #mv .lead-txt p:first-of-type {
              order: 3; }
            .top main #mv .lead-txt p:last-of-type {
              order: 1; } }
        @media screen and (max-width: 767px) {
          .top main #mv .lead-txt p:last-of-type {
            margin-top: 10%; } }
        .top main #mv .lead-txt figure {
          margin: 5% 0; }
    @media screen and (min-width: 768px) {
      .top main #vision {
        padding-bottom: 60px;
        margin-top: 300px;
        margin-bottom: 200px; } }
    @media screen and (max-width: 767px) {
      .top main #vision .inner {
        padding: 0; } }
    .top main #vision .en-ttl {
      /*padding-top: 10px;*/ }
    .top main #vision .ttl-area {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2; }
      @media screen and (max-width: 767px) {
        .top main #vision .ttl-area {
          width: 100%;
          padding: 40% 0; } }
      @media screen and (min-width: 768px) {
        .top main #vision .ttl-area {
          margin-top: 100px; } }
      @media screen and (max-width: 767px) {
        .top main #vision .ttl-area h2 {
          width: 35vw; } }
      @media screen and (min-width: 768px) {
        .top main #vision .ttl-area h2 {
          /*font-size: 150px;
          font-weight: 100;
          line-height: 1.25;*/
          width: 760px; } }
    .top main #vision .main-img {
      position: relative;
      z-index: -1; }
      @media screen and (min-width: 768px) {
        .top main #vision .main-img {
          text-align: center;
          position: absolute; } }
      @media screen and (max-width: 767px) {
        .top main #vision .main-img.img01 {
          position: absolute;
          top: 7%;
          margin: 0; } }
      @media screen and (min-width: 768px) {
        .top main #vision .main-img.img01 {
          top: -170px;
          left: 50%;
          transform: translate(-50%, 0);
          width: 480px; } }
      @media screen and (max-width: 767px) {
        .top main #vision .main-img.img02 {
          width: 30%;
          margin: 10% auto 0; } }
      @media screen and (min-width: 768px) {
        .top main #vision .main-img.img02 {
          bottom: 0;
          right: 140px;
          width: 200px; } }
      .top main #vision .main-img img {
        mix-blend-mode: multiply;
        /*@include pc {
          min-width: 1280px;
        }*/ }
    @media screen and (max-width: 767px) {
      .top main #vision .detail-list {
        margin-top: 10%; } }
    @media screen and (min-width: 768px) {
      .top main #vision .detail-list {
        margin-top: 260px; } }
    @media screen and (max-width: 767px) {
      .top main #vision .detail-list ul li + li {
        margin-top: 30%; } }
    .top main #vision .detail-list .lead-txt {
      text-align: center; }
    @media screen and (max-width: 767px) {
      .top main #why .ttl-wrap .ttl-area .main-img .kakukaku-anime {
        width: 75%; } }
    @media screen and (max-width: 767px) {
      .top main #why .detail-list {
        margin-top: 15%; } }
    @media screen and (min-width: 768px) {
      .top main #how {
        margin-top: 200px; } }
    @media screen and (max-width: 767px) {
      .top main #how .detail-list {
        margin-top: 15%; } }
    .top main #how .detail-list ul li {
      position: relative;
      /*& > div {
        @include pc {
          flex-grow: 1;
        }
        @include sp {
          width: 55%;
        }
      }*/ }
      .top main #how .detail-list ul li h3 span {
        display: block; }
        @media screen and (max-width: 767px) {
          .top main #how .detail-list ul li h3 span a {
            font-size: 4.2vw; } }
        @media screen and (min-width: 768px) {
          .top main #how .detail-list ul li h3 span a {
            font-size: 20px; } }
      @media screen and (max-width: 767px) {
        .top main #how .detail-list ul li figure {
          position: absolute;
          z-index: -1;
          width: 75%;
          right: 0;
          bottom: 0; } }
      @media screen and (min-width: 768px) {
        .top main #how .detail-list ul li figure {
          margin-top: 40px; } }
    @media screen and (min-width: 768px) {
      .top main #how.cont2 .ttl-wrap .ttl-area .main-img {
        width: 360px; } }
    .top main #business-cont {
      background: #cdae8c;
      max-width: inherit;
      min-width: inherit;
      width: inherit; }
      @media screen and (max-width: 767px) {
        .top main #business-cont {
          padding: 20% 0; } }
      @media screen and (min-width: 768px) {
        .top main #business-cont {
          margin-top: 300px;
          padding: 150px 0 200px; } }
      @media screen and (max-width: 767px) {
        .top main #business-cont dl {
          padding: 0 25px; }
          .top main #business-cont dl.-sp-inner {
            margin-top: 20%;
            padding: 0 5%;
            margin-right: 25px;
            margin-left: 25px; } }
      @media screen and (min-width: 768px) {
        .top main #business-cont dl {
          width: 1200px;
          margin: 0 auto; } }
      .top main #business-cont dl dt {
        text-align: center; }
        @media screen and (max-width: 767px) {
          .top main #business-cont dl dt {
            font-size: 4.8vw;
            margin-bottom: 15%;
            color: #000; } }
        @media screen and (min-width: 768px) {
          .top main #business-cont dl dt {
            font-size: 24px;
            margin-bottom: 80px;
            color: #cdae8c;
            /*&::before, &::after {
              content: "";
              flex-grow: 1;
              height: 1px;
              background: #fff;
            }
            &::before {
              margin-right: 30px;
            }
            &::after {
              margin-left: 30px;
            }*/ } }
      .top main #business-cont dl dd .organogram .dots {
        -ms-writing-mode: initial !important;
        writing-mode: initial !important;
        line-height: 1 !important;
        font-family: sans-serif; }
      @media screen and (max-width: 767px) {
        .top main #business-cont dl dd .organogram .o-ttl {
          margin-bottom: 8%;
          text-align: center;
          font-size: 6.8vw;
          color: #cdae8c; }
          .top main #business-cont dl dd .organogram .o-ttl .sub {
            display: block;
            font-size: 3.0vw; }
        .top main #business-cont dl dd .organogram .o-cont {
          display: grid;
          grid-column-gap: 2%; }
          .top main #business-cont dl dd .organogram .o-cont.first {
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: repeat(5, 1fr); }
            .top main #business-cont dl dd .organogram .o-cont.first .div1 {
              grid-area: 1 / 1 / 2 / 7; }
            .top main #business-cont dl dd .organogram .o-cont.first .div2 {
              grid-area: 2 / 1 / 3 / 7; }
              .top main #business-cont dl dd .organogram .o-cont.first .div2 .-vt {
                height: 100%; }
            .top main #business-cont dl dd .organogram .o-cont.first .div3 {
              grid-area: 3 / 1 / 4 / 7; }
            .top main #business-cont dl dd .organogram .o-cont.first .div4 {
              grid-area: 4 / 1 / 5 / 7; }
            .top main #business-cont dl dd .organogram .o-cont.first .div5 {
              grid-area: 5 / 1 / 6 / 4; }
            .top main #business-cont dl dd .organogram .o-cont.first .div6 {
              grid-area: 5 / 4 / 6 / 7; }
          .top main #business-cont dl dd .organogram .o-cont.second {
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: repeat(7, 1fr); }
            .top main #business-cont dl dd .organogram .o-cont.second .div1 {
              grid-area: 1 / 1 / 2 / 7; }
            .top main #business-cont dl dd .organogram .o-cont.second .div2 {
              grid-area: 2 / 1 / 3 / 7; }
            .top main #business-cont dl dd .organogram .o-cont.second .div3 {
              grid-area: 3 / 1 / 4 / 4; }
            .top main #business-cont dl dd .organogram .o-cont.second .div4 {
              grid-area: 3 / 4 / 4 / 7; }
            .top main #business-cont dl dd .organogram .o-cont.second .div5 {
              grid-area: 4 / 1 / 5 / 4;
              width: 70%; }
            .top main #business-cont dl dd .organogram .o-cont.second .div6 {
              grid-area: 4 / 4 / 5 / 7;
              width: 70%; }
            .top main #business-cont dl dd .organogram .o-cont.second .div7 {
              grid-area: 5 / 1 / 8 / 2; }
            .top main #business-cont dl dd .organogram .o-cont.second .div8 {
              grid-area: 5 / 2 / 8 / 3; }
            .top main #business-cont dl dd .organogram .o-cont.second .div9 {
              grid-area: 5 / 3 / 8 / 4; }
            .top main #business-cont dl dd .organogram .o-cont.second .div10 {
              grid-area: 5 / 4 / 8 / 5; }
            .top main #business-cont dl dd .organogram .o-cont.second .div11 {
              grid-area: 5 / 5 / 8 / 6; }
            .top main #business-cont dl dd .organogram .o-cont.second .div12 {
              grid-area: 5 / 6 / 8 / 7; }
          .top main #business-cont dl dd .organogram .o-cont.third {
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-column-gap: 2%;
            grid-row-gap: 5%; }
            .top main #business-cont dl dd .organogram .o-cont.third .div13 {
              grid-area: 1 / 1 / 2 / 2; }
            .top main #business-cont dl dd .organogram .o-cont.third .nkg .o-item {
              /*background: #fff;
              color: $color-keycolor;
              border-color: $color-keycolor;
              padding: 4.5% 5%;*/ }
          .top main #business-cont dl dd .organogram .o-cont .div1 .o-item {
            /*padding: 2% 5%;*/ }
          .top main #business-cont dl dd .organogram .o-cont + .o-cont {
            margin-top: 20%; }
          .top main #business-cont dl dd .organogram .o-cont .div > a {
            display: flex;
            justify-content: center;
            align-items: center; }
            .top main #business-cont dl dd .organogram .o-cont .div > a::after {
              content: "→";
              font-size: 3.0vw;
              display: inline-block;
              position: absolute;
              right: 15px;
              top: 50%;
              transform: translate(0, -50%);
              line-height: 1; }
        .top main #business-cont dl dd .organogram .o-item {
          width: 100%;
          border: 1px solid #cdae8c;
          border-radius: 10px;
          position: relative;
          text-align: center;
          padding: 6% 5%;
          line-height: 1.5;
          height: 100%;
          background: #cdae8c;
          color: #fff;
          font-size: 3.6vw; }
          .top main #business-cont dl dd .organogram .o-item .sub {
            display: block;
            padding: 0 15px;
            font-size: 3.0vw; }
        .top main #business-cont dl dd .organogram .line {
          width: 50%;
          margin: 0 auto;
          position: relative; }
          .top main #business-cont dl dd .organogram .line span {
            position: absolute;
            display: block; }
            .top main #business-cont dl dd .organogram .line span.-vt {
              width: 1px;
              height: 50%;
              border-right: 1px solid #cdae8c;
              position: absolute; }
            .top main #business-cont dl dd .organogram .line span.-hr {
              width: 100%;
              height: 1px;
              border-bottom: 1px solid #cdae8c;
              position: absolute;
              top: 50%;
              left: 0; }
            .top main #business-cont dl dd .organogram .line span.-c {
              top: 50%;
              left: 50%; }
            .top main #business-cont dl dd .organogram .line span.-l {
              top: 50%;
              left: 0; }
            .top main #business-cont dl dd .organogram .line span.-r {
              top: 50%;
              left: calc(100% - 1px); }
            .top main #business-cont dl dd .organogram .line span:first-of-type.-c {
              top: 0; }
        .top main #business-cont dl dd .organogram .-detail.-vt-txt {
          align-items: flex-start !important;
          padding: 30% 0;
          height: 100%;
          /*max-height: 150px;*/
          letter-spacing: normal; }
          .top main #business-cont dl dd .organogram .-detail.-vt-txt span {
            -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl; }
        .top main #business-cont dl dd .organogram .-detail::after {
          left: 50%;
          right: inherit !important;
          top: inherit !important;
          bottom: 15px !important;
          transform: translate(-50%, 0) !important; } }
      @media screen and (min-width: 768px) {
        .top main #business-cont dl dd .organogram {
          display: grid;
          grid-template-columns: repeat(12, 1fr);
          grid-template-rows: repeat(12, 1fr);
          grid-column-gap: 2%;
          grid-row-gap: 0px;
          /* PC表示での指定 */
          /*.div {
            & > div {
              &.o-item {
                border-radius: inherit;
              }
            } 
          }*/
          /*.div2 {
            grid-area: 2 / 3 / 3 / 11;
            margin: 0 90px;
          }*/
          /*.div5 {
            grid-area: 4 / 1 / 7 / 7;
            margin: 0 140px;
            .-hr {
              top: 41px!important;
            }
            .-c {
            }
            .-l {
              top: 41px!important;
              height: 206px!important;
            }
            .-r {
              top: 41px!important;
              height: 206px!important;
            }
            :first-of-type {
              &.-c {
                height: 41px!important;
              }
            }
          }*/ }
          .top main #business-cont dl dd .organogram .o-ttl {
            color: #000;
            font-weight: bold;
            font-size: 46px;
            text-align: center;
            line-height: 1; }
            .top main #business-cont dl dd .organogram .o-ttl .sub {
              display: block;
              font-size: 16px;
              margin-bottom: 20px; }
          .top main #business-cont dl dd .organogram .o-item {
            width: 100%;
            border: 1px solid #cdae8c;
            border-radius: 8px;
            padding: 20px 0;
            font-size: 20px;
            text-align: center;
            color: #fff;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #cdae8c;
            transition: all 0.2s cubic-bezier(0.33, 1, 0.68, 1); }
            .top main #business-cont dl dd .organogram .o-item .sub {
              display: inline-block;
              font-size: 14px;
              margin-right: 1em; }
          .top main #business-cont dl dd .organogram a.o-item:hover {
            background: #fff;
            color: #cdae8c;
            border-color: #cdae8c; }
          .top main #business-cont dl dd .organogram a.o-item::after {
            content: "→";
            font-size: 14px;
            display: inline-block;
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translate(0, -50%);
            line-height: 1; }
          .top main #business-cont dl dd .organogram .-detail {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            text-align: left; }
            .top main #business-cont dl dd .organogram .-detail::after {
              left: 50%;
              right: inherit !important;
              top: inherit !important;
              bottom: 15px !important;
              transform: translate(-50%, 0) !important; }
            .top main #business-cont dl dd .organogram .-detail span {
              -ms-writing-mode: tb-rl;
              writing-mode: vertical-rl;
              text-orientation: upright; }
          .top main #business-cont dl dd .organogram .div1 {
            grid-area: 1 / 1 / 2 / 13; }
          .top main #business-cont dl dd .organogram .div3 {
            grid-area: 3 / 1 / 4 / 7; }
          .top main #business-cont dl dd .organogram .div4 {
            grid-area: 3 / 7 / 4 / 13; }
          .top main #business-cont dl dd .organogram .div5 {
            grid-area: 4 / 1 / 5 / 7; }
            .top main #business-cont dl dd .organogram .div5 .-c {
              height: 100% !important; }
          .top main #business-cont dl dd .organogram .div6 {
            grid-area: 4 / 7 / 4 / 13;
            margin: 0 140px; }
          .top main #business-cont dl dd .organogram .div7 {
            grid-area: 5 / 7 / 6 / 10; }
          .top main #business-cont dl dd .organogram .div8 {
            grid-area: 5 / 10 / 6 / 13; }
          .top main #business-cont dl dd .organogram .div9 {
            grid-area: 6 / 7 / 6 / 10;
            margin: 0 40px; }
          .top main #business-cont dl dd .organogram .div10 {
            grid-area: 6 / 10 / 6 / 13;
            margin: 0 40px; }
          .top main #business-cont dl dd .organogram .div11 {
            grid-area: 7 / 1 / 10 / 4; }
          .top main #business-cont dl dd .organogram .div12 {
            grid-area: 7 / 4 / 10 / 7; }
          .top main #business-cont dl dd .organogram .div13 {
            grid-area: 7 / 7 / 10 / 8; }
          .top main #business-cont dl dd .organogram .div14 {
            grid-area: 7 / 8 / 10 / 9; }
          .top main #business-cont dl dd .organogram .div15 {
            grid-area: 7 / 9 / 10 / 10; }
          .top main #business-cont dl dd .organogram .div16 {
            grid-area: 7 / 10 / 10 / 11; }
          .top main #business-cont dl dd .organogram .div17 {
            grid-area: 7 / 11 / 10 / 12; }
          .top main #business-cont dl dd .organogram .div18 {
            grid-area: 7 / 12 / 10 / 13; }
          .top main #business-cont dl dd .organogram .div19 {
            grid-area: 10 / 1 / 11 / 13; }
          .top main #business-cont dl dd .organogram .div20 {
            /*grid-area: 11 / 1 / 12 / 13;*/
            grid-area: 11 / 1 / 12 / 7;
            margin-top: 15px; }
          .top main #business-cont dl dd .organogram .div21 {
            grid-area: 5/ 1 / 6 / 7;
            /*margin: 0 140px;*/ }
          .top main #business-cont dl dd .organogram .div22 {
            grid-area: 6 / 1 / 7 / 7;
            margin: 0 140px; }
          .top main #business-cont dl dd .organogram .div23 {
            grid-area: 12 / 1 / 12 / 13;
            margin-top: 15px; }
          .top main #business-cont dl dd .organogram .div24 {
            grid-area: 11 / 7 / 12 / 13;
            margin-top: 15px; }
          .top main #business-cont dl dd .organogram .div25 {
            grid-area: 12 / 1 / 13 / 7;
            margin-top: 15px; }
          .top main #business-cont dl dd .organogram .div26 {
            grid-area: 12 / 7 / 13 / 13;
            margin-top: 15px; }
          .top main #business-cont dl dd .organogram .line {
            text-align: center;
            position: relative; }
            .top main #business-cont dl dd .organogram .line span {
              position: absolute;
              display: block; }
              .top main #business-cont dl dd .organogram .line span.-vt {
                width: 1px;
                height: 50%;
                border-right: 1px solid #cdae8c;
                position: absolute; }
              .top main #business-cont dl dd .organogram .line span.-hr {
                width: 100%;
                height: 1px;
                border-bottom: 1px solid #cdae8c;
                position: absolute;
                top: 50%;
                left: 0; }
              .top main #business-cont dl dd .organogram .line span.-c {
                top: 50%;
                left: 50%; }
              .top main #business-cont dl dd .organogram .line span.-l {
                top: 50%;
                left: 0; }
              .top main #business-cont dl dd .organogram .line span.-r {
                top: 50%;
                left: calc(100% - 1px); }
              .top main #business-cont dl dd .organogram .line span:first-of-type.-c {
                top: 0; } }
      @media screen and (max-width: 767px) {
        .top main #business-cont dl dd figure {
          margin-top: 10%; } }
      @media screen and (min-width: 768px) {
        .top main #business-cont dl dd figure {
          margin-top: 0;
          flex: 0 0 600px; } }
      @media screen and (min-width: 768px) {
        .top main #business-cont dl dd.-flex {
          display: flex;
          justify-content: space-between;
          gap: 100px; }
          .top main #business-cont dl dd.-flex .detail-box h3 {
            text-align: left; } }
      .top main #business-cont dl .detail-box h3 {
        text-align: center; }
      .top main #business-cont.animate {
        background: #fff; }
    @media screen and (min-width: 768px) {
      .top main #future {
        margin-top: 200px; } }
    .top main #future .ttl-area {
      position: relative;
      display: flex;
      justify-content: center; }
      @media screen and (max-width: 767px) {
        .top main #future .ttl-area {
          margin-bottom: 15%;
          margin-top: 15%; } }
      @media screen and (min-width: 768px) {
        .top main #future .ttl-area {
          margin: 60px 0 80px; } }
      @media screen and (max-width: 767px) {
        .top main #future .ttl-area h2 {
          width: 27%; } }
      @media screen and (min-width: 768px) {
        .top main #future .ttl-area h2 {
          width: 760px; } }
      .top main #future .ttl-area .main-img {
        position: relative;
        text-align: center;
        margin-top: 0px;
        /*position: absolute;
        top: 250px;
        left: 50%;
        transform: translate(-50%, 0);
        width: 1200px;*/
        margin: -110px auto -200px; }
        @media screen and (min-width: 768px) {
          .top main #future .ttl-area .main-img {
            text-align: center; } }
        .top main #future .ttl-area .main-img img {
          mix-blend-mode: multiply; }
    @media screen and (max-width: 767px) {
      .top main #future .detail-box {
        width: 100%;
        text-align: center; } }
    @media screen and (max-width: 767px) {
      .top main #future .detail-box .lead-txt {
        text-align: left; } }
    @media screen and (min-width: 768px) {
      .top main #future .detail-box .lead-txt {
        text-align: center; } }
    .top main #future .detail-box .txt-link {
      text-align: center; }
    .top main #future .main-img {
      display: flex;
      align-items: center; }
      @media screen and (max-width: 767px) {
        .top main #future .main-img {
          justify-content: center;
          flex-wrap: wrap;
          gap: 5%;
          margin-top: 15%; } }
      @media screen and (min-width: 768px) {
        .top main #future .main-img {
          justify-content: space-between;
          gap: 20px;
          margin-top: 60px;
          margin-right: -140px;
          margin-left: -140px; } }
      @media screen and (max-width: 767px) {
        .top main #future .main-img > li {
          width: 40%; } }
      @media screen and (max-width: 767px) {
        .top main #future .main-img > li:nth-child(1) {
          order: 2; }
        .top main #future .main-img > li:nth-child(2) {
          order: 1;
          width: 100%;
          padding: 0 28%;
          margin-bottom: 5%; }
        .top main #future .main-img > li:nth-child(3) {
          order: 3; } }
    @media screen and (max-width: 767px) {
      .top main #other {
        padding-left: 25px;
        padding-right: 25px;
        padding-top: 15%; } }
    @media screen and (min-width: 768px) {
      .top main #other {
        border: none; } }
    .top main #other .cont h3 {
      font-size: 34px;
      text-align: center; }
    .top main.fadein #mv .mv-area .site-name {
      opacity: 1; }
    @media screen and (min-width: 768px) {
      .top main.fadein #mv #mv-img .img {
        opacity: 1; }
        .top main.fadein #mv #mv-img .img.mv_main {
          transition-delay: 0s; }
        .top main.fadein #mv #mv-img .img.mv_tree {
          transition-delay: 0.5s;
          transform: translate(0, 0); }
        .top main.fadein #mv #mv-img .img.mv_man {
          transition-delay: 0.6s;
          transform: translate(0, 0); }
        .top main.fadein #mv #mv-img .img.mv_fire {
          transition-delay: 0.7s;
          transform: translate(0, 0); }
        .top main.fadein #mv #mv-img .img.mv_horse {
          transition-delay: 0.8s;
          transform: translate(0, 0); }
        .top main.fadein #mv #mv-img .img.mv_broom {
          transition-delay: 0.9s;
          transform: translate(0, 0); }
        .top main.fadein #mv #mv-img .img.mv_kokeshi {
          transition-delay: 1.0s;
          transform: translate(0, 0); }
        .top main.fadein #mv #mv-img .img.mv_woman {
          transition-delay: 1.1s;
          transform: translate(0, 0); }
        .top main.fadein #mv #mv-img .img.mv_ochoko {
          transition-delay: 1.2s;
          transform: translate(0, 0); }
        .top main.fadein #mv #mv-img .img.mv_wappa {
          transition-delay: 1.3s;
          transform: translate(0, 0); } }
  .top .modal-area {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    padding: 40px 20px;
    overflow: auto;
    z-index: 100; }
    .top .modal-area .modal-cont {
      max-width: 1200px;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #cdae8c;
      width: 750px; }
      @media screen and (max-width: 767px) {
        .top .modal-area .modal-cont {
          width: 90%; } }
      .top .modal-area .modal-cont .modal-close {
        color: #fff;
        position: absolute;
        top: -30px;
        right: 0;
        cursor: pointer; }
      .top .modal-area .modal-cont .modal-inner {
        text-align: center;
        padding: 20px; }
  .top .modal-open {
    cursor: pointer; }

/* .top ここまで */
/*@keyframes switch_main {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@keyframes switch_fire {
  0%, 33% { opacity: 1; }
  34%, 100% { opacity: 0; }
}*/
html.lenis, html.lenis body {
  height: auto; }

.lenis.lenis-smooth {
  scroll-behavior: auto !important; }

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain; }

.lenis.lenis-stopped {
  overflow: hidden; }

.lenis.lenis-scrolling iframe {
  pointer-events: none; }

@keyframes slide-anime {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }
