@keyframes scrollbar {
  0% {
    transform: translateY(-5rem);
  }
  100% {
    transform: translateY(10rem);
  }
}
html {
  scroll-padding-top: 100px;
  body#top {
    background-color: var(--bodycolor-);
    overflow: inherit;
    header {
      .logo {
        img {
          filter: invert(20%) sepia(18%) saturate(1098%) hue-rotate(169deg) brightness(95%) contrast(88%);
        }
      }
    }
    main.top {
      /* background-image: url(../images/nts/bg.webp);
      background-position: center;
      background-attachment: fixed;
      background-size: cover; */
      background-color: transparent;
      #mw {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 8888;
        width: 100vw;
        height: 100vh;
        > div {
          .close {
            position: absolute;
            top: -2.5rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: .5rem;
            width: 4em;
            color: var(--bodycolor);
            cursor: pointer;
            &:hover {
              ol {
                li {
                  &:nth-child(1) {
                    transform: rotate(15deg);
                  }
                  &:nth-child(2) {
                    transform: rotate(-15deg);
                  }
                }
              }
            }
            ol {
              width: 100%;
              li {
                display: block;
                width: 90%;
                height: 1px;
                background-color: var(--bodycolor);
                transition: var(--all);
                &:nth-child(1) {
                  transform: rotate(25deg);
                }
                &:nth-child(2) {
                   transform: rotate(-25deg);
                   margin-top: -1px;
                }
              }
            }
          }
          a {
            &:hover {
              opacity: unset;
            }
          }
        }
        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          z-index: 0;
          width: 100%;
          height: 100%;
          background-color: #4B4B4B80;
          -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
        }
      }
      &.active {
        #hv {
          &::after {
            opacity: 1;
          }
        }
      }
      #hv {
        position: relative;
        min-height: 200vh;
        background-color: var(--bodycolor);
        #fb {
          display: flex;
          flex-direction: column;
          gap: 2rem;
          position: fixed;
          right: 5px;
          top: unset;
          bottom: 140px;
          z-index: 5;
          width: 240px;
          background-color: unset;
          border: unset;
          .close {
            position: absolute;
            left: unset;
            right: 0;
            top: -1.6rem;
            width: 1.6rem;
            height: 1.6rem;
            font-size: 1.6rem;
            line-height: 1em;
          }
          > div {
            position: relative;
            border: var(--bodycolor) solid 1px;
            img {
              width: 100%;
            }
          }
        }
        > .container {
          max-width: 80%;
        }
        .swiper {
          position: sticky;
          left: 0;
          top: 0;
          z-index: 0;
          width: 100%;
          .swiper-wrapper {
            .swiper-slide {
              figure {
                width: 100%;
                height: 100vh;
                background-position: center;
                background-size: cover;
                figcaption {
                  position: absolute;
                  left: 10px;
                  bottom: 10px;
                  z-index: 2;
                  font-size: .7rem;
                }
              }
              &.hv1 {
                figure {
                  background-image: url(../images/top/hv1.webp);
                }
              }
              &.hv2 {
                figure {
                  background-image: url(../images/top/hv2.webp);
                }
              }
              &.hv3 {
                figure {
                  background-image: url(../images/top/hv3.webp);
                }
              }
              &.hv4 {
                figure {
                  background-image: url(../images/top/hv4.webp);
                }
              }
              &.hv5 {
                figure {
                  background-image: url(../images/top/hv5.webp);
                }
              }
              &.hv6 {
                figure {
                  background-image: url(../images/top/hv6.webp);
                }
              }
            }
          }
          .scroll {
            position: absolute;
            top: calc(65% - 4.5rem);
            z-index: 2;
            p {
              font-family: auto;
              font-family: "Alumni Sans SC", sans-serif;
              font-size: 1rem;
              text-align: center;
              transform: rotate(90deg);
            }
            span {
              display: block;
              position: relative;
              top: 1rem;
              width: 100%;
              height: 8rem;
              overflow: hidden;
              &::before {
                content: "";
                display: block;
                position: absolute;
                width: 1px;
                height: 100%;
                top: 0;
                left: 0;
                right: 0;
                background: #333;
                margin: auto;
              }
              &::after {
                content: "";
                display: block;
                position: absolute;
                width: .5rem;
                height: .5rem;
                top: 0;
                left: 0;
                right: 0;
                background-color: var(--maincolor);
                border-radius: 50%;
                animation: scrollbar 2.0s ease-in-out infinite;
                margin: auto;
              }
            }
          }
        }
        img.f {
          position: absolute;
          left: 4vw;
          top: 5%;
          width: 10vw;
          max-width: 150px;
        }
        .container {
          z-index: 1;
          .mt1 {
            position: relative;
            margin-top: -55vh;
            figure {
              width: 28vw;
              max-width: 480px;
            }
          }
          .mt2 {
            margin-top: 20vw;
            figure {
              width: 27vw;
              max-width: 480px;
            }
          }
          .mt3 {
            margin-top: 10vw;
            figure {
              width: 48vw;
              max-width: 640px;
            }
          }
          .price {
            margin-top: 5vw;
            padding-bottom: 10vw;
            figure {
              width: 36vw;
              max-width: 480px;
            }
          }
        }
        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background:
            linear-gradient(242.44deg, rgba(255, 255, 255, 0) 28.06%, rgba(97, 140, 174, 0.3) 92.33%),
            linear-gradient(284.54deg, rgba(255, 255, 255, 0) 58.02%, rgba(97, 140, 174, 0.3) 93.79%),
            linear-gradient(248.54deg, rgba(97, 140, 174, 0.5) -1.29%, rgba(255, 255, 255, 0) 23.95%),
            linear-gradient(0deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85));
          transition: var(--all);
          opacity: 0;
        }
      }
      #usp {
        .devider {
          padding: 2rem 0;
          border-bottom: var(--leadcolor) solid 1px;
        }
        .merit {
          display: flex;
          background-color: var(--bodycolor);
          li {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 0 4rem;
            width: 25%;
            cursor: pointer;
            button {
              position: absolute;
              right: 1rem;
              bottom: 1rem;
              width: 8rem;
              padding: .5rem 1rem;
              font-family: inherit;
              color: var(--bodycolor);
              text-align: justify;
              background-color: var(--themecolor);
              border-radius: 5px;
              border: var(--themecolor) solid 1px;
              transition: var(--button);
              pointer-events: none;
              &::after {
                content: "\e902";
                position: absolute;
                right: .5rem;
                top: 50%;
                font-family: "ar", serif;
                font-size: .6rem;
                line-height: 0;
              }
            }
            &:nth-child(n+2) {
              border-left: var(--subcolor-) solid 1px;

            }
            &:hover {
              button {
                color: var(--themecolor);
                background-color: var(--bodycolor);
              }
            }
          }
        }
        .information {
          display: flex;
          gap: 3rem;
          align-items: flex-start;
          justify-content: flex-start;
          padding: 3rem;
          /* max-width: 720px; */
          text-align: justify;
          white-space: nowrap;
          .title {
            font-family: "Alumni Sans SC", sans-serif;
            font-size: 1rem;
            color: var(--maincolor-);
          }
          div {
            .cfa {
              margin-bottom: .5em;
              padding: unset;
              font-size: 2rem;
              letter-spacing: .2rem;
              line-height: 1.5em;
              color: var(--leadcolor);
              background: unset;
              span {
                display: block;
                font-size: 30%;
                letter-spacing: .1rem;
                line-height: 1em;
                color: var(--maincolor);
                &.ib {
                  display: inline-block;
                  padding-left: .5rem;
                }

              }
            }
            .explanation {
              font-size: .9rem;
              color: var(--maincolor-);
            }
            .close {
              margin-top: 1rem;
              padding: 1rem;
              font-size: .8rem;
              letter-spacing: 0;
              background-color: var(--bodycolor);
              span {
                display: block;
                margin-bottom: .2rem;
                padding-bottom: .2rem;
                font-size: 110%;
                letter-spacing: .1rem;
                border-bottom: var(--subcolor-) solid 1px;
              }
            }
            .buttons {
              display: flex;
              gap: .5rem;
              justify-content: space-between;
              margin-top: 2rem;
              a {
                display: block;
                position: relative;
                padding: 1rem 0;
                width: calc(50% - .5rem);
                color: var(--bodycolor);
                text-align: center;
                background: linear-gradient(270deg, var(--themecolor-) 0%, var(--themecolor) 100%);
                border-radius: 5px;
                &::after {
                  content: "\e902";
                  position: absolute;
                  right: 1rem;
                  top: 50%;
                  font-family: "ar", serif;
                  font-size: .6rem;
                  line-height: 0;
                  color: #e6bc76;
                }
              }
            }
            .banners {
              display: flex;
              flex-direction: column;
              gap: 4rem;
              margin: 3rem 0 2rem 0;
              a {
                display: block;
                position: relative;
                span {
                  position: absolute;
                  right: 0;
                  top: calc(-1em - 1rem);
                  padding: .5rem;
                  line-height: 1em;
                  color: var(--bodycolor);
                  background-color: #AB0F12;
                }
                p {
                  position: absolute;
                  left: 50%;
                  bottom: -1.8rem;
                  z-index: 1;
                  transform: translateX(-50%);
                  padding: 1rem 0;
                  width: calc(50% - .5rem);
                  color: var(--themecolor);
                  text-align: center;
                  background-color: var(--bodycolor);
                  border: #888888 solid 1px;
                  border-radius: 5px;
                  &::after {
                    content: "\e902";
                    position: absolute;
                    right: .5rem;
                    top: 50%;
                    font-family: "ar", serif;
                    font-size: .6rem;
                    line-height: 0;
                  }
                }
                /* &:hover {
                  p {
                    color: var(--bodycolor);
                    background-color: var(--themecolor);
                  }
                } */
              }
            }
          }
        }
        .multiaccess {
          margin: auto;
          padding: 3rem;
          h2 {
            font-size: 2rem;
            letter-spacing: .2rem;
            font-weight: 400;
            color: var(--themecolor-);
            text-align: center;
          }
          .explanation {
            margin-top: 1.5rem;
            font-size: .9rem;
            line-height: 2rem;
            color: var(--maincolor-);
            text-align: center;
          }
          figure {
            position: relative;
            margin-top: 3rem;
            width: 100%;
            overflow: hidden;
            button {
              position: absolute;
              bottom: 1.5rem;
              right: 1.5rem;
              width: 18rem;
              padding: 1rem 0;
              font-family: inherit;
              font-size: .9rem;
              letter-spacing: .1rem;
              color: var(--bodycolor);
              text-align: center;
              background:
                linear-gradient(270deg, #601E1E 0%, #982B2B 100%);
              border: var(--bodycolor) solid 1px;
              border-radius: 2px;
              transition: var(--button);
              cursor: pointer;
              transition: var(--all);
              &::after {
                content: "\e902";
                position: absolute;
                right: .5rem;
                top: 50%;
                font-family: "ar", serif;
                font-size: .6rem;
                line-height: 0;
                color: #e6bc76;
              }
              &:hover {
                opacity: .6;
              }
            }
          }
        }
        .campaign {
          margin: 2rem 0;
          padding: 3rem;
          text-align: justify;
          white-space: nowrap;
          > div:not(.swiper) {
            display: flex;
            gap: 3rem;
            align-items: flex-start;
            justify-content: center;
            max-width: 720px;
            .title {
              font-family: "Alumni Sans SC", sans-serif;
              font-size: 1rem;
              color: var(--maincolor-);
            }
            > div {
              .cfa {
                padding: unset;
                font-size: 2rem;
                letter-spacing: .2rem;
                line-height: 1em;
                color: var(--leadcolor);
                background: unset;
              }
              .explanation {
                margin-top: 1rem;
                font-size: .9rem;
                color: var(--maincolor-);
              }
              ul {
                display: flex;
                flex-direction: column;
                gap: 1.5rem;
                margin-top: 4rem;
                padding-bottom: 2.5rem;
              }
            }
          }
          /* .swiper {
            margin-top: 4rem;
            padding-bottom: 2.5rem;
            
            .swiper-button-prev {
              left: 0;
              top: unset;
              bottom: 0;
              width: 2rem;
              height: 2rem;
              background-color: var(--bodycolor);
              border-radius: 8%;
              &::after {
                content: "\e904";
                font-family: "ar", serif;
                font-size: .6rem;
                line-height: 0;
                color: var(--themecolor);
              }
            }
            .swiper-button-next {
              left: 2.5rem;
              top: unset;
              bottom: 0;
              width: 2rem;
              height: 2rem;
              background-color: var(--bodycolor);
              border-radius: 8%;
              &::after {
                content: "\e902";
                font-family: "ar", serif;
                font-size: .6rem;
                line-height: 0;
                color: var(--themecolor);
              }
            }
          } */
        }
      }
      #ideal {
        &.active {
          .bg {
            &::after {
              opacity: 1;
              -webkit-backdrop-filter: blur(5px);
              backdrop-filter: blur(5px);
            }
          }
        }
        .bg {
          position: relative;
          > figure {
            position: sticky;
            left: 0;
            top: 0;
            z-index: 0;
            overflow: hidden;
            picture {
              img {
                display: block;
                position: relative;
                width: 100%;
                min-height: 100dvh;
                object-fit: cover;
              }
              figcaption {
                position: absolute;
                right: 5px;
                bottom: 5px;
                font-size: .6rem;
                text-align: right;
                color: var(--bodycolor);
              }
            }
          }
          > div {
            position: relative;
            z-index: 1;
            min-height: 50vh;
            color: var(--bodycolor);
            text-align: center;
            .container {
              .title {
                font-family: "Alumni Sans SC", sans-serif;
                font-size: 1rem;
                line-height: 1.3rem;
                figure {
                  width: 32vw;
                }
              }
              h2 {
                margin-top: 1rem;
                font-size: 3rem;
                font-weight: 400;
                letter-spacing: .1rem;
                span {
                  display: block;
                  font-size: 40%;
                  letter-spacing: 1rem;
                }
              }
              .explanation {
                margin-top: 2rem;
                font-size: .8rem;
                letter-spacing: .2rem;
                line-height: 2rem;
                span {
                  display: block;
                  margin-bottom: 1rem;
                }
              }
            }
            ol {
              position: absolute;
              top: 4rem;
              width: 100%;
              li {
                position: absolute;
                left: 50%;
                top: 0;
                display: block;
                transform: translateX(-50%);
                figure {
                  position: absolute;
                  width: 100%;
                  figcaption {
                    position: absolute;
                    right: 5px;
                    bottom: 5px;
                    font-size: .6rem;
                  }
                }
                &:nth-child(1) {
                  width: 245px;
                  figure {
                    left: 25rem;
                    top: 0;
                  }
                }
                &:nth-child(2) {
                  width: 225px;
                  figure {
                    right: 25rem;
                    top: 6rem;
                  }
                }
                &:nth-child(3) {
                  width: 125px;
                  figure {
                    right: 20rem;
                    top: 18rem;
                  }
                }
                &:nth-child(4) {
                  width: 170px;
                  figure {
                    left: 20rem;
                    top: 20rem;
                  }
                }
              }
            }
            button {
              position: relative;
              margin: 4rem auto;
              width: 20rem;
              padding: 1rem 2rem;
              font-family: inherit;
              font-size: .9rem;
              letter-spacing: .1rem;
              color: var(--themecolor);
              text-align: center;
              background-color: var(--bodycolor);
              border: none;
              border-radius: 2px;
              transition: var(--button);
              cursor: pointer;
              &::after {
                content: "\e902";
                position: absolute;
                right: .5rem;
                top: 50%;
                font-family: "ar", serif;
                font-size: .6rem;
                line-height: 0;
              }
              &:hover {
                color: var(--bodycolor);
                background-color: var(--themecolor);
              }
            }
          }
          &::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(253.17deg, rgba(56, 95, 127, 0.95) 2.24%, rgba(97, 135, 174, 0.95) 98.11%);
            transition: var(--all);
            opacity: 0;
          }
        }
        .banners {
          padding: 6rem 0;
          border-bottom: var(--themecolor) solid 1px;
          ol {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            align-items: center;
            justify-content: center;
            li {
              position: relative;
              display: block;
              width: 90%;
              &.new {
                a {
                  &::after {
                    content: "NEW";
                    position: absolute;
                    left: 0;
                    top: 0;
                    padding: .5rem 1rem;
                    font-size: 1rem;
                    line-height: 1em;
                    color: var(--bodycolor);
                    background-color: #e03636;
                  }
                }
              }
            }
          }
        }
        .other {
          margin: 4rem 0;
          padding: 3rem;
          text-align: justify;
          white-space: nowrap;
          > div:not(.swiper) {
            display: flex;
            gap: 3rem;
            align-items: flex-start;
            justify-content: center;
            max-width: 720px;
            .title {
              font-family: "Alumni Sans SC", sans-serif;
              font-size: 1rem;
              line-height: 1.3rem;
              color: var(--maincolor-);
            }
            > div {
              .cfa {
                padding: unset;
                font-size: 2rem;
                letter-spacing: .2rem;
                line-height: 1em;
                color: var(--leadcolor);
                background: unset;
              }
              .explanation {
                margin-top: 1rem;
                font-size: .9rem;
                color: var(--maincolor-);
              }
            }
          }
          .swiper {
            margin-top: 4rem;
            padding-bottom: 1.5rem;
            .swiper-wrapper {
              .swiper-slide {
                a {
                  cursor: pointer;
                  figure {
                    figcaption {
                      margin-top: .5rem;
                      font-size: .7rem;
                      text-align: right;
                    }
                  }
                }
              }
            }
            .swiper-button-prev {
              left: 0;
              top: unset;
              bottom: .5rem;
              width: 2rem;
              height: 2rem;
              background-color: var(--bodycolor);
              border-radius: 8%;
              &::after {
                content: "\e904";
                font-family: "ar", serif;
                font-size: .6rem;
                line-height: 0;
                color: var(--themecolor);
              }
            }
            .swiper-button-next {
              left: 2.5rem;
              top: unset;
              bottom: .5rem;
              width: 2rem;
              height: 2rem;
              background-color: var(--bodycolor);
              border-radius: 8%;
              &::after {
                content: "\e902";
                font-family: "ar", serif;
                font-size: .6rem;
                line-height: 0;
                color: var(--themecolor);
              }
            }
          }
        }
      }
      #topNavigation {
        padding: 4rem 0;
        background: linear-gradient(253.17deg, rgba(56, 95, 127, 0.95) 2.24%, rgba(97, 135, 174, 0.95) 98.11%);
        nav {
          display: flex;
          flex-direction: column;
          gap: 4rem;
          > div {
            display: flex;
            align-items: flex-start;
            gap: 4rem;
            align-items: center;
            justify-content: center;
            > div {
              display: flex;
              position: relative;
              width: calc(40% - 4rem);
              color: var(--bodycolor);
              > div {
                width: fit-content;
                .title {
                  font-size: .6rem;
                  letter-spacing: .2rem;
                  span {
                    display: block;
                    font-family: "Alumni Sans SC", sans-serif;
                    font-size: 3.5rem;
                    font-weight: 600;
                    line-height: 3rem;
                  }
                }
                .explanation {
                  margin-top: 1rem;
                  line-height: 1.5rem;
                  letter-spacing: .2rem;
                }
                button {
                  position: relative;
                  top: 2rem;
                  width: 20rem;
                  padding: 1rem 2rem;
                  font-family: inherit;
                  font-size: .9rem;
                  letter-spacing: .1rem;
                  text-align: center;
                  color: var(--bodycolor);
                  background: linear-gradient(270deg, var(--themecolor-) 0%, var(--themecolor) 100%);
                  border: none;
                  border-radius: 2px;
                  transition: var(--button);
                  cursor: pointer;
                  &::after {
                    content: "\e902";
                    position: absolute;
                    right: 1rem;
                    top: 50%;
                    font-family: "ar", serif;
                    font-size: .6rem;
                    line-height: 0;
                    color: #e6bc76;
                  }
                  &:hover {
                    color: var(--themecolor);
                    background: var(--bodycolor);
                  }
                }
              }
            }
            > figure {
              width: 60%;
              overflow: hidden;
              figcaption {
                position: absolute;
                right: 5px;
                bottom: 10px;
                font-size: .6rem;
                line-height: 1em;
                color: var(--bodycolor);
              }
            }
            &.reverse {
              flex-direction: row-reverse;
              > div {
                justify-content: flex-end;
                > div {
                }
              }
            }
          }
        }

      }
    }
  }
}


@media (max-width: 1080px) {

}


@media (max-width: 768px) {
  html {
    body#top {
      header {
        .logo {
          img {
          }
        }
      }
      main.top {
        &.active {
          #hv {
            &::after {
            }
          }
        }
        #hv {
          #fb {
            bottom: calc(2.2rem + 9vw);
            width: 100%;
            opacity: 0;
            pointer-events: none;
            .close {
            }
            > div {
              img {
              }
            }
            &.scroll {
              opacity: 1;
              pointer-events: all;
            }
          }
          > .container {
            max-width: 90%;
          }
          .swiper {
            .swiper-wrapper {
              .swiper-slide {
                figure {
                  height: calc(100dvh - 2.2rem - 9vw);
                  figcaption {
                    left: unset;
                    right: 5px;
                    bottom: 5px;
                    text-align: right;
                  }
                }
                &.hv1 {
                  figure {
                    background-image: url(../images/top/hv1_s.webp);
                  }
                }
                &.hv2 {
                  figure {
                    background-image: url(../images/top/hv2_s.webp);
                  }
                }
                &.hv3 {
                  figure {
                    background-image: url(../images/top/hv3_s.webp);
                    figcaption {
                      color: var(--bodycolor);
                    }
                  }
                }
                &.hv4 {
                  figure {
                    background-image: url(../images/top/hv4_s.webp);
                    figcaption {
                      color: var(--bodycolor);
                    }
                  }
                }
                &.hv5 {
                  figure {
                    background-image: url(../images/top/hv5_s.webp);
                  }
                }
                &.hv6 {
                  figure {
                    background-image: url(../images/top/hv6_s.webp);
                  }
                }
              }
            }
            .scroll {
              p {
              }
              span {
                &::before {
                }
                &::after {
                }
              }
            }
          }
          img.f {
            left: 8%;
            top: 18dvh;
            width: 30%;
            max-width: unset;
          }
          .container {
            .mt1 {
              position: relative;
              left: 46%;
              margin-top: -76dvh;
              width: 50%;
              figure {
                width: 100%;
                max-width: unset;
              }
            }
            .mt2 {
              margin-top: 30rem;
              figure {
                width: 75%;
                max-width: unset;
              }
            }
            .mt3 {
              margin-top: 5rem;
              figure {
                width: 76%;
                max-width: unset;
              }
            }
            .price {
              margin-top: 3rem;
              padding-bottom: 20vw;
              figure {
                width: 100%;
                max-width: unset;
              }
            }
          }
          &::after {
          }
        }
        #usp {
          overflow: hidden;
          .merit {
            flex-direction: column;
            li {
              display: flex;
              gap: 1rem;
              padding: .5rem 1rem;
              width: 100%;
              figure {
                width: calc(60% - 1rem);
              }
              button {
                position: relative;
                right: unset;
                bottom: unset;
                width: 40%;
                &::after {
                }
              }
              &:nth-child(n+2) {
                border-left: unset;
                border-top: var(--subcolor-) solid 1px;
              }
              &:hover {
                button {
                }
              }
            }
          }
          .information {
            flex-direction: column;
            gap: 1rem;
            padding: 1rem;
            overflow: hidden;
            .title {
            }
            div {
              width: 100%;
              .cfa {
                font-size: 1.2rem;
                letter-spacing: 0;
              }
              .explanation {
                font-size: .7rem;
              }
              .close {
                padding: .5rem;
                font-size: .7rem;
                span {
                }
              }
              .buttons {
                flex-direction: column;
                a {
                  padding: .75rem 0;
                  width: 100%;
                  border-radius: 0.2rem;
                  &::after {
                  }
                }
              }
              .banners {
                a {
                  p {
                    width: calc(90% - .5rem);
                  }
                }
              }
            }
          }
          .multiaccess {
            padding: 0 1rem;
            overflow: hidden;
            h2 {
              font-size: 1.5rem;
            }
            .explanation {
              line-height: 1.5rem;
              text-align: justify;
            }
            figure {
              margin-top: 2rem;
              button {
                bottom: 0.5rem;
                right: 0.5rem;
                padding: .5rem 0;
                width: 8rem;
                font-size: 0.6rem;
                &::after {
                }
                &:hover {
                }
              }
            }
          }
          .campaign {
            margin: 2rem 0;
            padding: 1rem;
            overflow: hidden;
            > div:not(.swiper) {
              flex-direction: column;
              gap: 1rem;
              .title {
                font-family: auto;
                font-size: .8rem;
                transform: scale(0.8, 1);
                transform-origin: 0;
              }
              > div {
                .cfa {
                  font-size: 1.5rem;
                }
                .explanation {
                }
                ul {
                  gap: 1rem;
                  margin-top: 2rem;
                  padding-bottom: 2rem;
                }
              }
            }
            .swiper {
              .swiper-button-prev {
                &::after {
                }
              }
              .swiper-button-next {
                &::after {
                }
              }
            }
          }
        }
        #ideal {
          &.active {
            .bg {
              &::after {
              }
            }
          }
          .bg {
            > figure {
              picture {
                img {
                }
                figcaption {
                }
              }
            }
            > div {
              margin-top: unset;
              min-height: unset;
              .container {
                overflow: hidden;
                .title {
                  figure {
                  }
                }
                h2 {
                  span {
                  }
                }
                .explanation {
                  span {
                  }
                }
              }
              ol {
                position: relative;
                top: 3rem;
                li {
                  position: relative;
                  figure {
                    position: relative;
                    left: unset !important;
                    right: unset !important;
                    top: unset !important;
                    figcaption {
                    }
                  }
                  &:nth-child(1) {
                    width: 50%;
                    figure {
                      left: 25vw !important;
                    }
                  }
                  &:nth-child(2) {
                    width: 33%;
                    figure {
                      top: -4rem !important;
                      left: -20vw !important;
                    }
                  }
                  &:nth-child(3) {
                    width: 25%;
                    figure {
                      top: -4rem !important;
                      left: 16vw !important;
                    }
                  }
                  &:nth-child(4) {
                    width: 45%;
                    figure {
                      top: -6rem !important;
                      left: -27vw !important;
                    }
                  }
                }
              }
              button {
                margin: 0 auto 2rem;
                &::after {
                }
                &:hover {
                }
              }
            }
            &::after {
            }
          }
          .banners {
            padding: 2rem 0;
            ol {
              li {
                width: 100%;
                &.new {
                  a {
                    &::after {
                      left: unset;
                      right: 0;
                      padding: .4rem .6rem;
                      font-size: .7rem;
                    }
                  }
                }
              }
            }
          }
          .other {
            margin: 2rem 0;
            padding: 1rem;
            overflow: hidden;
            > div:not(.swiper) {
              flex-direction: column;
              gap: 1rem;
              .title {
              }
              > div {
                .cfa {
                  font-size: 1.5rem;
                }
                .explanation {
                }
              }
            }
            .swiper {
              .swiper-wrapper {
                .swiper-slide {
                  a {
                    figure {
                      figcaption {
                      }
                    }
                  }
                }
              }
              .swiper-button-prev {
                &::after {
                }
              }
              .swiper-button-next {
                &::after {
                }
              }
            }
          }
        }
        #topNavigation {
          padding: 2rem 0;
          nav {
            > div {
              flex-direction: column;
              gap: 2rem;
              > div {
                flex-direction: column;
                width: 80%;
                > div {
                  width: 100%;
                  .title {
                    font-size: .5rem;
                    span {
                      padding-top: .5rem;
                      font-size: 3rem;
                      line-height: 2.5rem;
                    }
                  }
                  .explanation {
                    font-size: .75rem;
                  }
                  button {
                    top: 1.5rem;
                    width: 100%;
                    padding: .5rem 1rem;
                    font-size: .8rem;
                    &::after {
                    }
                    &:hover {
                    }
                  }
                }
              }
              > figure {
                align-self: flex-start;
                width: 90%;
                figcaption {
                }
              }
              &.reverse {
                flex-direction: column;
                > div {
                  > div {
                  }
                }
                 > figure {
                  align-self: flex-end;
                 }
              }
            }
          }
        }
      }
    }
  }
}