@charset "UTF-8";
@font-face {
  font-family: "Caslon";
  src: url("/assets/common/font/caslon-bold.otf") format("opentype");
}
@font-face {
  font-family: "Noto Sans JP Regular";
  src: url("/assets/common/font/NotoSansJP-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Noto Sans JP Medium";
  src: url("/assets/common/font/NotoSansJP-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Noto Sans JP Bold";
  src: url("/assets/common/font/NotoSansJP-Bold.otf") format("opentype");
}
@font-face {
  font-family: "Noto Sans JP Black";
  src: url("/assets/common/font/NotoSansJP-Black.otf") format("opentype");
}
.mv__box {
  background-image: url(../img/bg_ss_mv_sp.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: clamp(75px, 13.0208333333vw, 150px);
  padding-bottom: clamp(180px, 31.25vw, 360px);
}
@media (min-width: 768px) {
  .mv__box {
    background-image: url(../img/bg_ss_mv_pc.jpg);
    padding-top: clamp(120px, 20.8333333333vw, 240px);
    padding-bottom: clamp(125px, 21.7013888889vw, 250px);
  }
}

.mv__box__inner {
  width: min(100%, 1400px);
  padding: 0 clamp(25px, 4.3402777778vw, 50px);
  margin: 0 auto;
  width: min(100%, 1640px);
}
@media (max-width: 767px) {
  .mv__box__inner {
    padding-right: 0;
    padding-left: clamp(15px, 2.6041666667vw, 30px);
  }
}

.mv__title__box {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media (min-width: 768px) {
  .mv__title__box {
    margin-bottom: clamp(12.5px, 2.1701388889vw, 25px);
  }
}

.mv__sub__title {
  display: block;
  background-color: #0019FF;
  color: #ffffff;
  font-size: clamp(1.2rem, 0.7454545455rem + 0.9090909091vw, 2.2rem);
  font-weight: bold;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-top: 2px;
  padding-right: clamp(6px, 1.0416666667vw, 12px);
  padding-bottom: 2px;
  padding-left: clamp(6px, 1.0416666667vw, 12px);
  margin-bottom: 5px;
  opacity: 0;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .mv__sub__title {
    margin-left: clamp(2.5px, 0.4340277778vw, 5px);
  }
}

.mv__title--big {
  display: inline-block;
  color: #ffffff;
  font-family: Caslon, sans-serif;
  font-size: clamp(6.5rem, 4.4545454545rem + 4.0909090909vw, 11rem);
  line-height: 1;
  opacity: 0;
}
.mv__title--big:nth-of-type(4) {
  padding-left: clamp(11px, 1.9097222222vw, 22px);
}

.mv__title--small {
  display: inline-block;
  color: #ffffff;
  font-family: Caslon, sans-serif;
  font-size: clamp(5rem, 3.4090909091rem + 3.1818181818vw, 8.5rem);
  line-height: 1;
  opacity: 0;
}

.mv__title {
  color: #ffffff;
  font-family: Caslon, sans-serif;
  font-size: clamp(5rem, 3.4090909091rem + 3.1818181818vw, 8.5rem);
  line-height: 1;
  opacity: 0;
}
@media (min-width: 768px) {
  .mv__title {
    margin-bottom: clamp(12.5px, 2.1701388889vw, 25px);
  }
}
.mv__title span {
  font-size: clamp(6.5rem, 4.4545454545rem + 4.0909090909vw, 11rem);
}

.mv__title02 {
  position: absolute;
  color: #ffffff;
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: clamp(1.5rem, 1.2727272727rem + 0.4545454545vw, 2rem);
  bottom: clamp(38px, 6.0763888889vw, 70px);
  right: clamp(5px, 1.7361111111vw, 20px);
  opacity: 0;
}
@media (min-width: 768px) {
  .mv__title02 {
    bottom: clamp(45px, 4.7743055556vw, 55px);
    right: clamp(15px, 2.6041666667vw, 30px);
  }
}
@media (min-width: 1200px) {
  .mv__title02 {
    bottom: 60px;
    right: clamp(20px, 3.4722222222vw, 40px);
  }
}
@media (min-width: 1400px) {
  .mv__title02 {
    bottom: 68px;
  }
}

.mv__text {
  color: #3A382E;
  font-size: clamp(1.8rem, 0.9818181818rem + 1.6363636364vw, 3.6rem);
  font-weight: bold;
  line-height: clamp(3rem, 1.6363636364rem + 2.7272727273vw, 6rem);
  padding-top: clamp(30px, 3.0381944444vw, 35px);
  padding-bottom: clamp(30px, 3.4722222222vw, 40px);
  opacity: 0;
}
@media (max-width: 767px) {
  .mv__text {
    text-align: center;
  }
}
@media (min-width: 768px) {
  .mv__text {
    background-color: rgba(58, 56, 46, 0.5);
    color: #ffffff;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding-top: clamp(10px, 1.7361111111vw, 20px);
    padding-right: clamp(15px, 2.6041666667vw, 30px);
    padding-bottom: clamp(10px, 1.7361111111vw, 20px);
    padding-left: clamp(10px, 1.7361111111vw, 20px);
  }
}

.animation--is .mv__sub__title {
  -webkit-animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
          animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.animation--is .mv__title--big,
.animation--is .mv__title--small,
.animation--is .mv__title02 {
  -webkit-animation: fadeup 1s 0.25s cubic-bezier(0.33, 1, 0.68, 1) forwards;
          animation: fadeup 1s 0.25s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.animation--is .mv__text {
  -webkit-animation: fadeup 1s 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
          animation: fadeup 1s 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.nav {
  background-color: #EEEEE7;
}

.nav__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
}

.nav__item {
  position: relative;
}
.nav__item a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #727267;
  font-size: clamp(1.3rem, 1.1636363636rem + 0.2727272727vw, 1.6rem);
  line-height: clamp(1.8rem, 1.5272727273rem + 0.5454545455vw, 2.4rem);
  text-align: center;
  height: 100%;
  padding-top: clamp(6px, 1.0416666667vw, 12px);
  padding-bottom: clamp(6px, 1.0416666667vw, 12px);
}
@media (min-width: 768px) {
  .nav__item a {
    padding-top: clamp(11.5px, 1.9965277778vw, 23px);
    padding-bottom: clamp(11.5px, 1.9965277778vw, 23px);
  }
}
.nav__item a::after {
  opacity: 0;
  visibility: hidden;
  transition-property: opacity, visibility;
  transition-duration: 0.4s;
}
@media (hover: hover) {
  .nav__item a:hover {
    opacity: 1;
  }
  .nav__item a:hover::after {
    background-color: #44E3BE;
    width: clamp(40px, 6.9444444444vw, 80px);
    height: clamp(1.5px, 0.2604166667vw, 3px);
    bottom: clamp(7.5px, 1.3020833333vw, 15px);
    left: 50%;
    margin-left: clamp(-40px, -3.4722222222vw, -20px);
    opacity: 1;
    visibility: visible;
  }
}

@media (min-width: 768px) {
  .nav__item:first-of-type::before {
    background-color: #d4d4ca;
    width: 1px;
    height: clamp(38px, 3.4722222222vw, 40px);
    top: 50%;
    left: 0;
    margin-top: clamp(-20px, -1.7361111111vw, -19px);
  }
}

.nav__item:nth-of-type(n+2)::before {
  background-color: #d4d4ca;
  width: 1px;
  height: clamp(38px, 3.4722222222vw, 40px);
  top: 50%;
  left: 0;
  margin-top: clamp(-20px, -1.7361111111vw, -19px);
}

@media (min-width: 768px) {
  .nav__item:last-of-type::after {
    background-color: #d4d4ca;
    width: 1px;
    height: clamp(38px, 3.4722222222vw, 40px);
    top: 50%;
    right: 0;
    margin-top: clamp(-20px, -1.7361111111vw, -19px);
  }
}

.screen {
  padding-top: clamp(37.5px, 6.5104166667vw, 75px);
  padding-bottom: clamp(30px, 6.9444444444vw, 80px);
}
@media (min-width: 768px) {
  .screen {
    padding-top: clamp(52.5px, 9.1145833333vw, 105px);
  }
}

.screen__inner {
  width: min(100%, 1400px);
  padding: 0 clamp(25px, 4.3402777778vw, 50px);
  margin: 0 auto;
}

.screen__title {
  text-align: center;
  margin-bottom: clamp(20px, 3.4722222222vw, 40px);
}

.screen__text {
  margin-bottom: clamp(25px, 4.3402777778vw, 50px);
}
@media (min-width: 768px) {
  .screen__text {
    text-align: center;
  }
}

.screen__sub__title {
  text-align: center;
  margin-bottom: clamp(22.5px, 3.90625vw, 45px);
}
.screen__sub__title span {
  background: linear-gradient(transparent 50%, #E8E8DB 50% 90%, transparent 90%);
  font-size: clamp(1.6rem, 1.2363636364rem + 0.7272727273vw, 2.4rem);
  font-weight: bold;
  line-height: clamp(3px, 0.3472222222vw, 4px);
}
@media (min-width: 768px) {
  .screen__sub__title span {
    background: linear-gradient(transparent 55%, #E8E8DB 55% 100%);
  }
}

.screen__box {
  margin-bottom: clamp(30px, 6.9444444444vw, 80px);
}

.screen__title__box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: clamp(5px, 0.8680555556vw, 10px);
}

.screen__box__title {
  flex: 1 1 50%;
  font-size: clamp(1.2rem, 0.8363636364rem + 0.7272727273vw, 2rem);
  text-align: center;
}
.screen__box__title:nth-of-type(2) {
  font-size: clamp(1.5rem, 0.8181818182rem + 1.3636363636vw, 3rem);
  font-weight: bold;
}

.screen__image__box {
  margin-bottom: clamp(10px, 1.3020833333vw, 15px);
}
@media (max-width: 767px) {
  .screen__image__box {
    width: 100%;
    aspect-ratio: 651/732;
  }
}
@media (max-width: 767px) {
  .screen__image__box img {
    -o-object-fit: cover;
       object-fit: cover;
    height: clamp(366px, 63.5416666667vw, 732px);
    aspect-ratio: 651/732;
  }
}

@media (max-width: 767px) {
  .twentytwenty-handle {
    width: clamp(22px, 3.8194444444vw, 44px);
    height: clamp(22px, 3.8194444444vw, 44px);
    border-width: clamp(1.5px, 0.2604166667vw, 3px);
    margin-top: clamp(-22px, -1.9097222222vw, -11px);
    margin-left: clamp(-22px, -1.9097222222vw, -11px);
  }
}

@media (max-width: 767px) {
  .twentytwenty-horizontal .twentytwenty-handle:after,
.twentytwenty-horizontal .twentytwenty-handle:before {
    width: clamp(1px, 0.1736111111vw, 2px);
    margin-left: clamp(-1px, -0.0868055556vw, -0.5px);
  }
}

@media (max-width: 767px) {
  .twentytwenty-horizontal .twentytwenty-handle:before {
    margin-bottom: clamp(13px, 2.1701388889vw, 25px);
  }
}

@media (max-width: 767px) {
  .twentytwenty-horizontal .twentytwenty-handle:after {
    margin-top: clamp(13px, 2.1701388889vw, 25px);
  }
}

@media (max-width: 767px) {
  .twentytwenty-left-arrow,
.twentytwenty-right-arrow {
    border: 4px inset transparent;
  }
}

@media (max-width: 767px) {
  .twentytwenty-right-arrow {
    border-left: 6px solid #fff;
    margin-top: -4px;
    margin-right: -12px;
  }
}

@media (max-width: 767px) {
  .twentytwenty-left-arrow {
    border-right: 6px solid #fff;
    margin-top: -4px;
    margin-left: -12px;
  }
}

.screen__box__list {
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: clamp(10px, 1.7361111111vw, 20px);
       column-gap: clamp(10px, 1.7361111111vw, 20px);
  margin-bottom: clamp(15px, 2.1701388889vw, 25px);
}

.screen__box__text {
  font-size: clamp(1.1rem, 0.7818181818rem + 0.6363636364vw, 1.8rem);
  text-align: center;
}

.screen__box__item {
  flex: 0 1 clamp(40px, 6.9444444444vw, 80px);
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 0.6;
  cursor: pointer;
  transition-property: opacity;
  transition-duration: 0.4s;
}
@media (hover: hover) {
  .screen__box__item:hover {
    opacity: 1;
  }
}

.screen__box__item--active {
  background-color: transparent;
  opacity: 1;
}

.screen__box02 {
  margin-bottom: clamp(40px, 6.9444444444vw, 80px);
}

.screen__box02__list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  row-gap: clamp(30px, 5.2083333333vw, 60px);
}

.screen__box02__item {
  flex: 1 1 320px;
}
@media (min-width: 768px) {
  .screen__box02__item {
    padding-left: clamp(35px, 6.0763888889vw, 70px);
  }
}

.screen__box02__text,
.screen__box02__text02 {
  font-size: clamp(1.3rem, 0.8rem + 1vw, 2.4rem);
  font-weight: bold;
  text-align: center;
  margin-bottom: clamp(15px, 1.7361111111vw, 20px);
}

@media (min-width: 768px) {
  .screen__box02__text {
    width: 78%;
  }
}

@media (min-width: 768px) {
  .screen__box02__text02 {
    width: 78%;
    margin-left: 5.5%;
  }
}

.screen__box02__image {
  width: min(86.155%, 560px);
}
@media (min-width: 768px) {
  .screen__box02__image {
    width: min(83.795%, 486px);
  }
}

.screen__box02__image02 {
  width: min(97.235%, 632px);
}
@media (min-width: 768px) {
  .screen__box02__image02 {
    width: min(94.66%, 549px);
    margin-left: auto;
  }
}

.screen__box03__list {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr;
  align-items: flex-end;
  -moz-column-gap: clamp(15px, 2.6041666667vw, 30px);
       column-gap: clamp(15px, 2.6041666667vw, 30px);
  row-gap: clamp(15px, 2.6041666667vw, 30px);
  margin-bottom: clamp(15px, 2.6041666667vw, 30px);
}
@media (min-width: 768px) {
  .screen__box03__list {
    grid-template-columns: 1fr 2fr 3fr 4fr;
    -moz-column-gap: clamp(33px, 5.7291666667vw, 66px);
         column-gap: clamp(33px, 5.7291666667vw, 66px);
    margin-bottom: clamp(40px, 6.9444444444vw, 80px);
  }
}

.screen__box03__image {
  margin-bottom: clamp(7.5px, 0.8680555556vw, 10px);
}

.screen__box03__text {
  font-size: clamp(1rem, 0.5454545455rem + 0.9090909091vw, 2rem);
  font-weight: bold;
  text-align: center;
}

@media (max-width: 767px) {
  .screen__box03__item:nth-of-type(4) {
    grid-column: 1/4;
  }
}
@media (max-width: 767px) {
  .screen__box03__item:nth-of-type(4) .screen__box03__image {
    width: min(60.31%, 392px);
    margin-right: auto;
    margin-left: auto;
  }
}

.screen__box03__text02 {
  color: #BC0000;
  font-size: clamp(2rem, 1.2727272727rem + 1.4545454545vw, 3.6rem);
  font-weight: bold;
  line-height: clamp(2.6rem, 1.4181818182rem + 2.3636363636vw, 5.2rem);
  text-align: center;
}

.optimal {
  background-color: #F2F2EF;
  padding-top: clamp(40px, 6.9444444444vw, 80px);
  padding-bottom: clamp(40px, 6.9444444444vw, 80px);
}

.optimal__inner {
  width: min(100%, 1400px);
  padding: 0 clamp(25px, 4.3402777778vw, 50px);
  margin: 0 auto;
}

.optimal__title {
  margin-bottom: clamp(20px, 3.0381944444vw, 35px);
}

.optimal__text {
  margin-bottom: clamp(25px, 4.7743055556vw, 55px);
}
@media (min-width: 768px) {
  .optimal__text {
    text-align: center;
  }
}

.optimal__list {
  display: grid;
  grid-template-columns: unset;
  -moz-column-gap: clamp(20px, 2.6041666667vw, 30px);
       column-gap: clamp(20px, 2.6041666667vw, 30px);
  row-gap: clamp(20px, 2.6041666667vw, 30px);
}
@media (min-width: 768px) {
  .optimal__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.optimal__item {
  background-color: #ffffff;
  padding-bottom: clamp(10px, 1.7361111111vw, 20px);
}

.optimal__image {
  margin-bottom: clamp(15px, 2.6041666667vw, 30px);
}

.optimal__item__title {
  font-size: clamp(1.8rem, 1.6181818182rem + 0.3636363636vw, 2.2rem);
  font-weight: bold;
  text-align: center;
  margin-bottom: clamp(13px, 1.7361111111vw, 20px);
}

.optimal__item__text {
  font-size: clamp(1.3rem, 1.1636363636rem + 0.2727272727vw, 1.6rem);
  line-height: clamp(2.3rem, 2.1636363636rem + 0.2727272727vw, 2.6rem);
  padding-right: clamp(10px, 1.7361111111vw, 20px);
  padding-left: clamp(10px, 1.7361111111vw, 20px);
}

.scene {
  padding-top: clamp(40px, 6.9444444444vw, 80px);
  padding-bottom: clamp(40px, 6.9444444444vw, 80px);
}

@media (min-width: 768px) {
  .scene__inner {
    max-width: 1915px;
    padding-right: clamp(22.5px, 3.90625vw, 45px);
    padding-left: clamp(22.5px, 3.90625vw, 45px);
    margin-right: auto;
    margin-left: auto;
  }
}

.scene__title {
  margin-bottom: clamp(20px, 3.4722222222vw, 40px);
}

.scene__text {
  width: min(100%, 1400px);
  padding: 0 clamp(25px, 4.3402777778vw, 50px);
  margin: 0 auto;
  margin-bottom: clamp(20px, 4.7743055556vw, 55px);
}
@media (min-width: 768px) {
  .scene__text {
    text-align: center;
  }
}

.scene__box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -moz-column-gap: clamp(4.5px, 0.4340277778vw, 5px);
       column-gap: clamp(4.5px, 0.4340277778vw, 5px);
  row-gap: clamp(3.5px, 0.4340277778vw, 5px);
  text-align: center;
}
@media (min-width: 768px) {
  .scene__box {
    grid-template-columns: repeat(6, 1fr);
  }
}

.scene__box__text {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3A382E;
}

.scene__box__list {
  color: #F2F2EF;
  padding-right: clamp(5px, 0.8680555556vw, 10px);
  padding-left: clamp(5px, 0.8680555556vw, 10px);
}
.scene__box__list dt {
  font-size: clamp(1.6rem, 0.8727272727rem + 1.4545454545vw, 3.2rem);
  font-weight: bold;
  line-height: 1;
  text-align: center;
  margin-bottom: clamp(17.5px, 3.0381944444vw, 35px);
}
@media (min-width: 768px) {
  .scene__box__list dt {
    font-size: clamp(1.1rem, 1.0090909091rem + 0.1818181818vw, 1.3rem);
    margin-bottom: clamp(5px, 0.8680555556vw, 10px);
  }
}
@media (min-width: 1200px) {
  .scene__box__list dt {
    font-size: clamp(1.3rem, 1.0307692308rem + 0.5384615385vw, 2rem);
    margin-bottom: clamp(10px, 1.7361111111vw, 20px);
  }
}
@media (min-width: 1600px) {
  .scene__box__list dt {
    font-size: clamp(1.3rem, 0.8rem + 1vw, 2.6rem);
    margin-bottom: clamp(17.5px, 3.0381944444vw, 35px);
  }
}
.scene__box__list dd {
  font-size: clamp(1.3rem, 0.7090909091rem + 1.1818181818vw, 2.6rem);
  line-height: clamp(1.95rem, 1.0636363636rem + 1.7727272727vw, 3.9rem);
  text-align: center;
}
@media (min-width: 768px) {
  .scene__box__list dd {
    font-size: clamp(1rem, 0.9090909091rem + 0.1818181818vw, 1.2rem);
    line-height: clamp(1.2rem, 1.0636363636rem + 0.2727272727vw, 1.5rem);
  }
}
@media (min-width: 1200px) {
  .scene__box__list dd {
    font-size: clamp(1rem, 0.7692307692rem + 0.4615384615vw, 1.6rem);
    line-height: clamp(1.4rem, 0.8615384615rem + 1.0769230769vw, 2.8rem);
  }
}
@media (min-width: 1600px) {
  .scene__box__list dd {
    font-size: clamp(0.9rem, 0.5538461538rem + 0.6923076923vw, 1.8rem);
  }
}
.scene__box__list dd p:nth-last-of-type(n+2) {
  margin-bottom: clamp(7.5px, 1.3020833333vw, 15px);
}
@media (min-width: 768px) {
  .scene__box__list dd p:nth-last-of-type(n+2) {
    margin-bottom: clamp(5px, 0.8680555556vw, 10px);
  }
}
@media (min-width: 1200px) {
  .scene__box__list dd p:nth-last-of-type(n+2) {
    margin-bottom: clamp(7.5px, 1.3020833333vw, 15px);
  }
}

.scene__image01 {
  grid-row: 1/3;
  transition-delay: 0.6s;
}

.scene__image02 {
  transition-delay: 0.5s;
}
@media (min-width: 768px) {
  .scene__image02 {
    transition-delay: 1.1s;
  }
}

.scene__image03 {
  transition-delay: 0.75s;
}
@media (min-width: 768px) {
  .scene__image03 {
    transition-delay: 0.4s;
  }
}

.scene__box__text02 {
  transition-delay: 0.25s;
}

.scene__image04 {
  transition-delay: 0.75s;
}

.scene__image05 {
  transition-delay: 0.15s;
}

.scene__box__text03 {
  grid-column: 1/3;
  transition-delay: 0.4s;
}
@media (max-width: 767px) {
  .scene__box__text03 {
    aspect-ratio: 750/360;
  }
}
@media (min-width: 768px) {
  .scene__box__text03 {
    grid-column: 3/5;
  }
}

.scene__image06 {
  transition-delay: 1s;
}

.scene__image08 {
  transition-delay: 0.25s;
}
@media (max-width: 767px) {
  .scene__image08 {
    order: 7;
  }
}

.scene__box__text04 {
  transition-delay: 0.5s;
}
@media (max-width: 767px) {
  .scene__box__text04 {
    order: 6;
  }
}

.scene__image09 {
  transition-delay: 0.75s;
}
@media (max-width: 767px) {
  .scene__image09 {
    order: 8;
  }
}

@media (max-width: 767px) {
  .scene__box__text05 {
    order: 9;
  }
}

.scene__image10 {
  grid-column: 5/7;
  transition-delay: 0.8s;
}

.scene__image,
.scene__box__text {
  opacity: 0;
  visibility: hidden;
  transition-property: opacity, visibility;
  transition-duration: 2s;
}

.animation--is .scene__image,
.animation--is .scene__box__text {
  opacity: 1;
  visibility: visible;
}

.scene__image {
  position: relative;
  overflow: hidden;
}

.animation--is .scene__image--01,
.animation--is .scene__image--02 {
  position: absolute;
  width: 100%;
  aspect-ratio: 1/1;
  top: 0;
  left: 0;
}

.scene__image--00 {
  position: relative;
  z-index: -1;
}

.animation--is .scene__image02 .scene__image--01 {
  -webkit-animation: imageLeft 12s ease-in-out 10.5s infinite both;
          animation: imageLeft 12s ease-in-out 10.5s infinite both;
}
@media (min-width: 768px) {
  .animation--is .scene__image02 .scene__image--01 {
    -webkit-animation: imageLeft 24s ease-in-out 12s infinite both;
            animation: imageLeft 24s ease-in-out 12s infinite both;
  }
}
.animation--is .scene__image02 .scene__image--02 {
  -webkit-animation: imageLeft 12s ease-in-out 4.5s infinite both;
          animation: imageLeft 12s ease-in-out 4.5s infinite both;
}
@media (min-width: 768px) {
  .animation--is .scene__image02 .scene__image--02 {
    -webkit-animation: imageLeft 24s ease-in-out infinite both;
            animation: imageLeft 24s ease-in-out infinite both;
  }
}

.animation--is .scene__image03 .scene__image--01 {
  -webkit-animation: imageDown 12s ease-in-out 7.5s infinite both;
          animation: imageDown 12s ease-in-out 7.5s infinite both;
}
@media (min-width: 768px) {
  .animation--is .scene__image03 .scene__image--01 {
    -webkit-animation: imageDown 24s ease-in-out 22.5s infinite both;
            animation: imageDown 24s ease-in-out 22.5s infinite both;
  }
}
.animation--is .scene__image03 .scene__image--02 {
  -webkit-animation: imageDown 12s ease-in-out 1.5s infinite both;
          animation: imageDown 12s ease-in-out 1.5s infinite both;
}
@media (min-width: 768px) {
  .animation--is .scene__image03 .scene__image--02 {
    -webkit-animation: imageDown 24s ease-in-out 10.5s infinite both;
            animation: imageDown 24s ease-in-out 10.5s infinite both;
  }
}

.animation--is .scene__image04 .scene__image--01 {
  -webkit-animation: imageLeft 24s ease-in-out 16.5s infinite both;
          animation: imageLeft 24s ease-in-out 16.5s infinite both;
}
.animation--is .scene__image04 .scene__image--02 {
  -webkit-animation: imageLeft 24s ease-in-out 4.5s infinite both;
          animation: imageLeft 24s ease-in-out 4.5s infinite both;
}

.animation--is .scene__image05 .scene__image--01 {
  -webkit-animation: imageRight 24s ease-in-out 21s infinite both;
          animation: imageRight 24s ease-in-out 21s infinite both;
}
.animation--is .scene__image05 .scene__image--02 {
  -webkit-animation: imageRight 24s ease-in-out 9s infinite both;
          animation: imageRight 24s ease-in-out 9s infinite both;
}

.animation--is .scene__image06 .scene__image--01 {
  -webkit-animation: imageUp 24s ease-in-out 13.5s infinite both;
          animation: imageUp 24s ease-in-out 13.5s infinite both;
}
.animation--is .scene__image06 .scene__image--02 {
  -webkit-animation: imageUp 24s ease-in-out 1.5s infinite both;
          animation: imageUp 24s ease-in-out 1.5s infinite both;
}

.animation--is .scene__image07 .scene__image--01 {
  -webkit-animation: imageDown 24s ease-in-out 19.5s infinite both;
          animation: imageDown 24s ease-in-out 19.5s infinite both;
}
.animation--is .scene__image07 .scene__image--02 {
  -webkit-animation: imageDown 24s ease-in-out 7.5s infinite both;
          animation: imageDown 24s ease-in-out 7.5s infinite both;
}

.animation--is .scene__image08 .scene__image--01 {
  -webkit-animation: imageRight 12s ease-in-out 6s infinite both;
          animation: imageRight 12s ease-in-out 6s infinite both;
}
@media (min-width: 768px) {
  .animation--is .scene__image08 .scene__image--01 {
    -webkit-animation: imageRight 24s ease-in-out 15s infinite both;
            animation: imageRight 24s ease-in-out 15s infinite both;
  }
}
.animation--is .scene__image08 .scene__image--02 {
  -webkit-animation: imageRight 12s ease-in-out infinite both;
          animation: imageRight 12s ease-in-out infinite both;
}
@media (min-width: 768px) {
  .animation--is .scene__image08 .scene__image--02 {
    -webkit-animation: imageRight 24s ease-in-out 3s infinite both;
            animation: imageRight 24s ease-in-out 3s infinite both;
  }
}

.animation--is .scene__image09 .scene__image--01 {
  -webkit-animation: imageUp 12s ease-in-out 9s infinite both;
          animation: imageUp 12s ease-in-out 9s infinite both;
}
@media (min-width: 768px) {
  .animation--is .scene__image09 .scene__image--01 {
    -webkit-animation: imageUp 24s ease-in-out 18s infinite both;
            animation: imageUp 24s ease-in-out 18s infinite both;
  }
}
.animation--is .scene__image09 .scene__image--02 {
  -webkit-animation: imageUp 12s ease-in-out 3s infinite both;
          animation: imageUp 12s ease-in-out 3s infinite both;
}
@media (min-width: 768px) {
  .animation--is .scene__image09 .scene__image--02 {
    -webkit-animation: imageUp 24s ease-in-out 6s infinite both;
            animation: imageUp 24s ease-in-out 6s infinite both;
  }
}

@-webkit-keyframes imageUp {
  0% {
    transform: translateY(100%);
    z-index: 1;
    opacity: 0;
  }
  2% {
    transform: translateY(0);
    z-index: 1;
    opacity: 1;
  }
  50% {
    transform: translateY(0);
    z-index: 0;
    opacity: 1;
  }
  52% {
    transform: translateY(0);
    z-index: 0;
    opacity: 1;
  }
  53% {
    transform: translateY(100%);
    z-index: 0;
    opacity: 0;
  }
  100% {
    transform: translateY(100%);
    z-index: 0;
    opacity: 0;
  }
}

@keyframes imageUp {
  0% {
    transform: translateY(100%);
    z-index: 1;
    opacity: 0;
  }
  2% {
    transform: translateY(0);
    z-index: 1;
    opacity: 1;
  }
  50% {
    transform: translateY(0);
    z-index: 0;
    opacity: 1;
  }
  52% {
    transform: translateY(0);
    z-index: 0;
    opacity: 1;
  }
  53% {
    transform: translateY(100%);
    z-index: 0;
    opacity: 0;
  }
  100% {
    transform: translateY(100%);
    z-index: 0;
    opacity: 0;
  }
}
@-webkit-keyframes imageRight {
  0% {
    transform: translateX(100%);
    z-index: 1;
    opacity: 0;
  }
  2% {
    transform: translateX(0);
    z-index: 1;
    opacity: 1;
  }
  50% {
    transform: translateX(0);
    z-index: 0;
    opacity: 1;
  }
  52% {
    transform: translateX(0);
    z-index: 0;
    opacity: 1;
  }
  53% {
    transform: translateX(100%);
    z-index: 0;
    opacity: 0;
  }
  100% {
    transform: translateX(100%);
    z-index: 0;
    opacity: 0;
  }
}
@keyframes imageRight {
  0% {
    transform: translateX(100%);
    z-index: 1;
    opacity: 0;
  }
  2% {
    transform: translateX(0);
    z-index: 1;
    opacity: 1;
  }
  50% {
    transform: translateX(0);
    z-index: 0;
    opacity: 1;
  }
  52% {
    transform: translateX(0);
    z-index: 0;
    opacity: 1;
  }
  53% {
    transform: translateX(100%);
    z-index: 0;
    opacity: 0;
  }
  100% {
    transform: translateX(100%);
    z-index: 0;
    opacity: 0;
  }
}
@-webkit-keyframes imageDown {
  0% {
    transform: translateY(-100%);
    z-index: 1;
    opacity: 0;
  }
  2% {
    transform: translateY(0);
    z-index: 1;
    opacity: 1;
  }
  50% {
    transform: translateY(0);
    z-index: 0;
    opacity: 1;
  }
  52% {
    transform: translateY(0);
    z-index: 0;
    opacity: 1;
  }
  53% {
    transform: translateY(-100%);
    z-index: 0;
    opacity: 0;
  }
  100% {
    transform: translateY(-100%);
    z-index: 0;
    opacity: 0;
  }
}
@keyframes imageDown {
  0% {
    transform: translateY(-100%);
    z-index: 1;
    opacity: 0;
  }
  2% {
    transform: translateY(0);
    z-index: 1;
    opacity: 1;
  }
  50% {
    transform: translateY(0);
    z-index: 0;
    opacity: 1;
  }
  52% {
    transform: translateY(0);
    z-index: 0;
    opacity: 1;
  }
  53% {
    transform: translateY(-100%);
    z-index: 0;
    opacity: 0;
  }
  100% {
    transform: translateY(-100%);
    z-index: 0;
    opacity: 0;
  }
}
@-webkit-keyframes imageLeft {
  0% {
    transform: translateX(-100%);
    z-index: 1;
    opacity: 0;
  }
  2% {
    transform: translateX(0);
    z-index: 1;
    opacity: 1;
  }
  50% {
    transform: translateX(0);
    z-index: 0;
    opacity: 1;
  }
  52% {
    transform: translateX(0);
    z-index: 0;
    opacity: 1;
  }
  53% {
    transform: translateX(-100%);
    z-index: 0;
    opacity: 0;
  }
  100% {
    transform: translateX(-100%);
    z-index: 0;
    opacity: 0;
  }
}
@keyframes imageLeft {
  0% {
    transform: translateX(-100%);
    z-index: 1;
    opacity: 0;
  }
  2% {
    transform: translateX(0);
    z-index: 1;
    opacity: 1;
  }
  50% {
    transform: translateX(0);
    z-index: 0;
    opacity: 1;
  }
  52% {
    transform: translateX(0);
    z-index: 0;
    opacity: 1;
  }
  53% {
    transform: translateX(-100%);
    z-index: 0;
    opacity: 0;
  }
  100% {
    transform: translateX(-100%);
    z-index: 0;
    opacity: 0;
  }
}
/*.animation--is .scene__image--right .scene__image--01,
.animation--is .scene__image--right .scene__image--02 {
  transform-origin: bottom right;
}

.animation--is .scene__image--left .scene__image--01,
.animation--is .scene__image--left .scene__image--02 {
  transform-origin: bottom left;
}

.animation--is .scene__image02 {

  .scene__image--01 {
    animation: imageRight 40s ease 24s infinite both;
  }

  .scene__image--02 {
    animation: imageRight 40s ease 4s infinite both;
  }
}

.animation--is .scene__image03 {

  .scene__image--01 {
    animation: imageLeft 40s ease 40s infinite both;
  }

  .scene__image--02 {
    animation: imageLeft 40s ease 20s infinite both;
  }
}

.animation--is .scene__image04 {

  .scene__image--01 {
    animation: imageLeft 40s ease 36s infinite both;
  }

  .scene__image--02 {
    animation: imageLeft 40s ease 16s infinite both;
  }
}

.animation--is .scene__image05 {

  .scene__image--01 {
    animation: imageRight 40s ease 40s infinite both;
  }

  .scene__image--02 {
    animation: imageRight 40s ease 20s infinite both;
  }
}

.animation--is .scene__image06 {

  .scene__image--01 {
    animation: imageLeft 40s ease 24s infinite both;
  }

  .scene__image--02 {
    animation: imageLeft 40s ease 4s infinite both;
  }
}

.animation--is .scene__image07 {

  .scene__image--01 {
    animation: imageRight 40s ease 30s infinite both;
  }

  .scene__image--02 {
    animation: imageRight 40s ease 10s infinite both;
  }
}

.animation--is .scene__image08 {

  .scene__image--01 {
    animation: imageRight 40s ease 36s infinite both;
  }

  .scene__image--02 {
    animation: imageRight 40s ease 16s infinite both;
  }
}

.animation--is .scene__image09 {

  .scene__image--01 {
    animation: imageLeft 40s ease 30s infinite both;
  }

  .scene__image--02 {
    animation: imageLeft 40s ease 10s infinite both;
  }
}

@keyframes imageRight {
  0% {
    transform: rotate(90deg);
    z-index: 1;
  }
  2% {
    transform: rotate(0);
    z-index: 1;
  }
  50% {
    z-index: 0;
  }
  59% {
    transform: rotate(0);
    z-index: 0;
  }
  60% {
    transform: rotate(90deg);
    z-index: 0;
  }
  100% {
    transform: rotate(90deg);
    z-index: 0;
  }
}

@keyframes imageLeft {
  0% {
    transform: rotate(-90deg);
    z-index: 1;
  }
  2% {
    transform: rotate(0);
    z-index: 1;
  }
  50% {
    z-index: 0;
  }
  59% {
    transform: rotate(0);
    z-index: 0;
  }
  60% {
    transform: rotate(-90deg);
    z-index: 0;
  }
  100% {
    transform: rotate(-90deg);
    z-index: 0;
  }
}*/
.set {
  background-color: #F2F2EF;
  padding-top: clamp(40px, 6.9444444444vw, 80px);
  padding-bottom: clamp(40px, 6.9444444444vw, 80px);
}

.set__inner {
  width: min(100%, 1400px);
  padding: 0 clamp(25px, 4.3402777778vw, 50px);
  margin: 0 auto;
}

.set__title {
  margin-bottom: clamp(20px, 3.4722222222vw, 40px);
}

.set__text {
  margin-bottom: clamp(25px, 5.2083333333vw, 60px);
}
@media (min-width: 768px) {
  .set__text {
    text-align: center;
  }
}

.set__box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  -moz-column-gap: clamp(30px, 5.2083333333vw, 60px);
       column-gap: clamp(30px, 5.2083333333vw, 60px);
  row-gap: clamp(20px, 3.4722222222vw, 40px);
}

.set__image {
  flex: 1 1 410.5px;
}
@media (min-width: 768px) {
  .set__image {
    order: 2;
  }
}

.set__example__box {
  flex: 1 1 250.5px;
}
@media (min-width: 768px) {
  .set__example__box {
    order: 1;
  }
}

.set__example__title {
  background-color: #BC0000;
  color: #ffffff;
  font-size: clamp(1.3rem, 1.0727272727rem + 0.4545454545vw, 1.8rem);
  font-weight: bold;
  text-align: center;
  padding-top: clamp(4px, 0.4340277778vw, 5px);
  padding-bottom: clamp(4px, 0.4340277778vw, 5px);
  margin-bottom: clamp(15px, 1.7361111111vw, 20px);
}

.set__example__list {
  border-bottom-width: clamp(1px, 0.1736111111vw, 2px);
  border-bottom-color: #C1C1C1;
  padding-bottom: clamp(15px, 1.7361111111vw, 20px);
  margin-bottom: clamp(10px, 1.0850694444vw, 12.5px);
}
@media (min-width: 1200px) {
  .set__example__list {
    padding-right: clamp(10px, 1.7361111111vw, 20px);
    padding-left: clamp(10px, 1.7361111111vw, 20px);
  }
}

.set__example__item {
  position: relative;
  font-size: clamp(1.4rem, 1.2181818182rem + 0.3636363636vw, 1.8rem);
  font-weight: bold;
  line-height: clamp(2.3rem, 1.7090909091rem + 1.1818181818vw, 3.6rem);
  padding-left: 1em;
}
.set__example__item::before {
  content: "・";
  top: 0;
  left: 0;
}

.set__example__price {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  -moz-column-gap: clamp(10px, 1.3020833333vw, 15px);
       column-gap: clamp(10px, 1.3020833333vw, 15px);
  margin-bottom: clamp(15px, 1.7361111111vw, 20px);
}
@media (min-width: 1200px) {
  .set__example__price {
    padding-right: clamp(10px, 1.7361111111vw, 20px);
    padding-left: clamp(10px, 1.7361111111vw, 20px);
  }
}
.set__example__price dt {
  font-size: clamp(1.2rem, 0.9272727273rem + 0.5454545455vw, 1.8rem);
  font-weight: bold;
}
.set__example__price dd {
  font-size: clamp(1.75rem, 1.1818181818rem + 1.1363636364vw, 3rem);
  font-weight: bold;
}
.set__example__price dd span {
  font-size: clamp(2.1rem, 1.4181818182rem + 1.3636363636vw, 3.6rem);
}

.set__example__text {
  font-size: clamp(1.2rem, 0.9272727273rem + 0.5454545455vw, 1.8rem);
  line-height: clamp(1.5rem, 0.8181818182rem + 1.3636363636vw, 3rem);
}
@media (min-width: 1200px) {
  .set__example__text {
    padding-right: clamp(10px, 1.7361111111vw, 20px);
    padding-left: clamp(10px, 1.7361111111vw, 20px);
  }
}