@charset "UTF-8";
/* CSS Document */

:root {
  --color_green: #c6eb82;
  --color_yellow: #fdf873;
  --color_sky: #e8f9fa;
  --color_blue: #19a7e7;
  --color_navy: #2e344c;
  --color_purple: #4362b5;
  --color_red: #e83828;
}

html, body {
  padding: 0;
  margin: 0;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
}
*,*:before,*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
img {
  max-width: 100%;
  display: inline-block;
}

main {
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
}

.swing {
  animation-name: floating;
  animation-duration: 3000ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transform-origin: 50% 50% 0;
}
.swing2 {
  animation-name: floating;
  animation-duration: 3000ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transform-origin: 0 50%;
}
@keyframes floating {
   0% {
    transform: translateY(0)rotate(-10deg);
  }
  50% {
    transform: translateY(max(-2vw,-20px))rotate(10deg);
  }
  100% {
    transform: translateY(0)rotate(-10deg);
  }
}

.updown {
    animation-name:updown1;
    animation-delay:0s;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite; 
}

@keyframes updown1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(max(-2vw,-20px));
  }
  100% {
    transform: translateY(0);
  }
}

.eng {
  position: relative;
  top: 0;
  left: 0;
  z-index: 0;
}
.eng img {
  position: absolute;
  top: 0;
  left: 0px;
  width: min(12vw, 100px) !important;
  z-index: 0;
}

.FV {
  background-image: url(../images/FV-bg.webp);
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
}
.FV-main {
  position: relative;
  z-index: 1;
  width: 100%;
}
.FV-logo {
  position: absolute;
  top: 71.5913px;
  top: min(8.4225vw, 60px);
  left: 50%;
  transform: translate(-50%);
  width: min(32.5476vw, 276.6547px);
  aspect-ratio: 554 / 182;
  z-index: 2;
}
.FV-text {
  width: 100%;
  position: relative;
  left: 0;
  top: 0;
  margin-top: max(-13vw, -130px);
  z-index: 3;
}
.FV_img01 {
  position: absolute;
  top: min(135vw, 1150px);
  right: min(5.8824vw, 50px);
  width: min(45.2104vw, 384.2882px);
  aspect-ratio: 770 / 797;
  z-index: 5;
}
.FV_clouds {
  position: absolute;
  top: min(150vw,1250px);
  left: 0;
  width: 100%;
  z-index: 4;
  mix-blend-mode:multiply;
}
.FV_clouds-color {
  position: absolute;
  top: min(4vw, 80px);
  left: max(-14.1176vw, -140px);
  z-index: 0;
  width: min(47.565vw, 404.3025px);
}
.FV_clouds-right {
  position: absolute;
  right: max(-12.1176vw, -120px);
  z-index: 1;
  width: min(43.5946vw, 370.5538px);
}
.FV_clouds-left {
  position: absolute;
  top: min(15vw, 130px);
  left: min(20vw, 115px);
  z-index: 2;
  width: min(22.0947vw, 187.8048px);
}

.movie {
  text-align: center;
  position: relative;
  margin-bottom: min(5vw, 50px);
}
.movie video {
  margin: 0 auto;
  -o-object-fit: cover;
    object-fit: cover;
    max-width: 100%;
  width: 100%;
  background-color: lightgray;
  text-align: center;
}
.movie span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cta-item {
  position: relative;
}
.cta-item:not(.set) {
  z-index: 1;
}
.cta-btn {
  position: absolute;
  bottom: min(8vw, 70px);
  left: 50%;
  transform: translateX(-50%);
  width: min(72vw, 650px);
  aspect-ratio: 1300 / 281;
}
.cta-btn2 {
  position: absolute;
  bottom: min(8vw, 70px);
  left: 50%;
  transform: translateX(-50%);
  width: min(72vw, 650px);
  aspect-ratio: 1300 / 281;
}
.cta-item.set {
  z-index: 2;
  margin-top: max(-6.8vw, -52px);
}
.last-cta {
  background-color: var(--color_sky);
}

.about {
  background-color: var(--color_green);
}
.about-gradient {
  width: 100%;
  height: min(18.7449vw, 159.332px);
  background: linear-gradient(0deg, var(--color_green) 50%, white 100%);
}
.about-title {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: min(56.4706vw, 480px);
  position: relative;
}
.about-title img {
  width: min(70.0732vw, 595.6221px);
  aspect-ratio: 1192 / 151;
}

.about-item {
  position: relative;
}
.about-text {
  position: relative;
  z-index: 0;
  display: block;
}
.about-img {
  width: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  text-align: center;
}
.about-img-01 {
  width: min(79.9039vw, 679.1835px);
  aspect-ratio: 1360 / 1309;
}
.about-img-02 {
  width: min(92.68vw, 787.7797px);
  aspect-ratio: 1360 / 1309;
  animation-delay:1s;
}
.about-img-03 {
  width: min(71.1413vw, 604.7009px);
  aspect-ratio: 1211 / 1474;
  animation-delay:2s;
}

.scenes-illust {
  background: linear-gradient(0deg, white 40%, var(--color_green) 40%);
  position: relative;
  text-align: center;
}
.scenes-illust::before, 
.scenes-illust::after {
  width: calc((100% - min(22.1353vw, 188.1503px)) / 2);
  content: '';
  position: absolute;
  top: 60%;
  height: min(3vw, 15px);
  transform: translateY(-50%);
  background-color: transparent;
  background-image: radial-gradient(circle, #000000 min(.5vw,2px), transparent min(.5vw,3px));
  background-position: 0 0;
  background-size: min(3vw, 15px) min(3vw, 15px);
  -webkit-text-size-adjust: 100%;
  font-size: 0;
  line-height: 0;
}
.scenes-illust::before {
  left: 0;
}
.scenes-illust::after {
  right: 0;
}
.scenes-illust img {
  width: min(22.1353vw, 188.1503px);
  aspect-ratio: 770 / 797;
  margin: 0 auto;
}
.scenes-title {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: min(36.4706vw, 310px);
  position: relative;
}
.scenes-title img {
  width: min(78.3466vw, 665.9463px);
  aspect-ratio: 1333 / 291;
}
.scenes-item {
  text-align: center;
  background: linear-gradient(0deg, var(--color_yellow) 20%, white 95%);
}
.scenes-item img {
  width: min(90.5882vw, 770px);
  aspect-ratio: 1603 / 1459;
  margin: 0 auto;
  margin-left: 1.2%;
}

.highlights {
  background-color: var(--color_yellow);
  position: relative;
}
.highlights-triangle {
  position: relative;
  height: min(23.5294vw, 200px);
  width: 100%;
  left: 0;
  top: 0;
  z-index: 0;
}
.highlights::before {
  content:'';
  background-image: url(../images/highlights-bg.webp);
  background-size: cover;
  width: 100%;
  height: 100%;
  position:absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  mix-blend-mode: multiply;
}
.highlights-title {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: min(36.4706vw, 310px);
  position: relative;
}
.highlights-title img {
  width: min(58.3088vw, 495.625px);
  aspect-ratio: 992 / 152;
}
.highlights-item {
  text-align: center;
  padding-bottom: min(4.7059vw, 40px);
  position: relative;
  z-index: 2;
}
.highlights-item img {
  width: min(90.5882vw, 770px);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.highlights-item.point::before, 
.highlights-item.point::after {
  content:'';
  position: absolute;
  z-index: -1;
}
.highlights-item.point1::before {
  top: 0;
  right: 0;
  width: min(28.5551vw, 242.7182px);
  aspect-ratio: 486 / 511;
  background-image: url(../images/highlights-cloud01.webp);
  background-size: 100%;
  background-position: center center;
  transform: translateY(-25%);
}
.highlights-item.point1::after {
  bottom: 0;
  left: 0;
  width: min(19.2651vw, 163.7535px);
  aspect-ratio: 329 / 442;
  background-image: url(../images/highlights-cloud02.webp);
  background-size: 100%;
  background-position: center center;
  transform: translateY(45%);
}
.highlights-item.point3 {
  z-index: 3;
}
.highlights-item.point4::before {
  top: 0;
  right: 0;
  width: min(29.8019vw, 253.316px);
  aspect-ratio: 507 / 575;
  background-image: url(../images/highlights-cloud03.webp);
  background-size: 100%;
  background-position: center center;
  transform: translateY(-25%);
}
.highlights-item.point4::after {
  bottom: 0;
  left: 0;
  width: min(38.1428vw, 324.2135px);
  aspect-ratio: 650 / 492;
  background-image: url(../images/highlights-cloud04.webp);
  background-size: 100%;
  background-position: center center;
  transform: translateY(45%);
}
.highlights-footer {
  position: relative;
  z-index: 3;
  margin-top: min(15vw, 150px);
}
.highlights-footer img {
  display: block;
  vertical-align: bottom;
}

.usage-title {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: min(36.4706vw, 310px);
  position: relative;
}
.usage-title img {
  width: min(31.9086vw, 271.2232px);
  aspect-ratio: 545 / 291;
}
.usage-imgs img {
  width: min(90.5882vw, 770px);
  margin: 0 auto;
  display: block;
  vertical-align: bottom;
  position: relative;
  z-index: 1;
}
.type-title {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: min(36.4706vw, 310px);
  position: relative;
}
.type-title img {
  width: min(49.4327vw, 420.1777px);
  aspect-ratio: 841 / 291;
}
.type-imgs img {
  width: min(90.5882vw, 770px);
  margin: 0 auto;
  display: block;
  vertical-align: bottom;
  margin-bottom: min(3.5294vw, 30px);
}

.voice-illust {
  position: relative;
  text-align: center;
  height: min(34.1176vw, 290px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.voice-illust::before, 
.voice-illust::after {
  width: calc((100% - min(22.1353vw, 188.1503px)) / 2);
  content: '';
  position: absolute;
  top: 50%;
  height: min(3vw, 15px);
  transform: translateY(-50%);
  background-color: transparent;
  background-image: radial-gradient(circle, #000000 min(.5vw,2px), transparent min(.5vw,3px));
  background-position: 0 0;
  background-size: min(3vw, 15px) min(3vw, 15px);
  -webkit-text-size-adjust: 100%;
  font-size: 0;
  line-height: 0;
}
.voice-illust::before {
  left: 0;
}
.voice-illust::after {
  right: 0;
}
.voice-illust img {
  width: min(17.8175vw, 151.449px);
  aspect-ratio: 304 / 98;
  margin: 0 auto;
}

.voice-title {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: start;
  width: 100%;
  height: min(36.4706vw, 310px);
  position: relative;
}
.voice-title img {
  width: min(68.7134vw, 584.0635px);
  aspect-ratio: 1169 / 404;
}

.txt-slide {
  padding: min(8.2353vw, 70px) 0;
  margin-bottom: min(20vw, 200px) !important;
}
.txt-slide .slick-list {
  margin-bottom: min(4vw, 30px);
}
.txt-slide .slick-dots {
  bottom: 0;
}
.txt-slide .slick-dots li {
  width: min(5vw, 20px);
  height: min(5vw, 20px);
  margin: 0 5px;
  padding: 0;
}
.txt-slide .slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: 0;
  background: 0 0;
  padding: 0;
}
.txt-slide .slick-dots li button:before {
  border: min(.5vw, 1.5px) solid black;
  border-radius: 100%;
  padding: min(1.5vw, 5px);
  width: min(2vw, 10px) !important;
  height: min(2vw, 10px) !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  content: '';
  font-size: 0;
  line-height: 0;
}
.txt-slide .slick-dots li.slick-active button:before {
  background-image: url("../images/icon-fish.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: min(6vw, 30px);
  width: min(6vw, 30px) !important;
  height: min(6vw, 30px) !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border: 0;
  border-radius: 0;
}
.txt-slide .slick-dots li.slick-active, 
.txt-slide .slick-dots li.slick-active button {
  width: min(6vw, 30px);
  height: min(6vw, 30px);
}
.txt-slide .slick-track {
  display: flex;
  align-items: flex-end;
}
.txt-slide .slide {
  padding: 0 10px;
}
.txt-slide .slick-next, .txt-slide .slick-prev {
  top: unset;
  bottom: 0;
  width: min(3vw, 17px);
  height: min(3vw, 17px);
  z-index: 3;
  -webkit-text-size-adjust: 100%;
}
.txt-slide .slick-next {
  right: 20px;
}
.txt-slide .slick-prev {
  left: 20px;
}
.txt-slide .slick-next:before, 
.txt-slide .slick-prev:before {
  background-image: url(../images/icon-arrow.webp);
  background-size: auto min(3vw, 17px);
  background-repeat: no-repeat;
  width: min(3vw, 17px);
  height: min(3vw, 17px);
  display: block;
  content: '';
  -webkit-text-size-adjust: 100%;
  font-size: 0;
  line-height: 0;
}
.txt-slide .slick-next:before {
  transform: rotateY(180deg);
}

.color-illust {
  background: linear-gradient(0deg, var(--color_purple) 40%, white 40%);
  position: relative;
  text-align: center;
}
.color-illust::before, 
.color-illust::after {
  width: calc((100% - min(22.1353vw, 188.1503px)) / 2);
  content: '';
  position: absolute;
  top: 60%;
  height: min(.8vw, 4px);
  max-height: min(.8vw, 4px);
  border-radius: min(1vw, 5px);
  transform: translateY(-50%);
  background-color: #000000;
  -webkit-text-size-adjust: 100%;
  font-size: 0;
  line-height: 0;
}
.color-illust::before {
  left: 0;
}
.color-illust::after {
  right: 0;
}
.color-illust img {
  width: min(17.3109vw, 147.1427px);
  aspect-ratio: 296 / 395;
  margin: 0 auto;
}

.color {
  text-align: center;
  background-color: var(--color_purple);
}
.color-img {
  width: min(90.5882vw, 770px);
  margin: min(4vw, 40px) auto;
}
.size-title {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: min(30.5882vw, 260px);
  position: relative;
}
.size-title img {
  width: min(74.1176vw, 630px);
  aspect-ratio: 1271 / 279;
}
.size-img {
  width: min(85.6575vw, 728.0886px);
  aspect-ratio: 1541 / 2301;
}
.color-footer {
  position: relative;
  z-index: 3;
  margin-top: min(15vw, 150px);
}
.color-footer img {
  width: 100%;
  display: block;
  vertical-align: bottom;
}


.faq {
  background-color: var(--color_sky);
}
.faq-title {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: min(30.5882vw, 260px);
  position: relative;
}
.faq-title img {
  width: min(47.4671vw, 403.4707px);
  aspect-ratio: 808 / 292;
}
.faq-list {
  list-style: none;
  width: min(90.5882vw, 770px);
  margin: 0 auto;
  padding: 0;
  padding-bottom: min(8vw, 80px);
}
.faq-list li {
  border: 1px solid var(--color_blue);
  font-family:'Zen Maru Gothic';
}
.faq-list li:not(:last-child) {
  margin-bottom: min(2.3529vw, 20px);
}
.faq-question {
  padding: min(2.5vw, 15px) min(2.3529vw, 20px);
  color: white;
  font-weight: 500;
  font-size: min(4vw, 32px);
  position: relative;
  background-color: var(--color_blue);
}
.faq-question span {
  font-family: 'Zen Maru Gothic';
  font-weight: bold;
  display: inline-block;
  margin-right: min(1vw, 10px);
}
.faq-question i {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all .3s ease;
  font-size: 0;
  line-height: 0;
  width: min(4vw, 20px) !important;
  height: min(4vw, 20px) !important;
  max-height: min(4vw, 20px) !important;
  right:  min(2.3529vw, 20px);
  background-image: url(../images/icon-plus.svg);
  background-size: contain !important;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
.faq-question.active i {
  background-image: url(../images/icon-minus.svg);
  background-position: center center;
  background-size: contain !important;
}
.faq-answer {
  position: relative;
  background-color: white;
  font-weight: 500;
  transition: all .3s ease;
  font-size: min(3.5vw,22px);
  padding: 0 min(1.7647vw, 15px) 0 min(8vw, 70px);
}
.faq-answer:not(.active) {
  opacity: 0;
  max-height: 0;
}
.faq-answer.active {
  padding-top: min(2.3529vw, 20px);
  padding-bottom: min(2.3529vw, 20px);
  max-height: none;
  opacity: 1;
}
.faq-answer span {
  position: absolute;
  top: min(2.3529vw, 20px);
  left: min(3.5vw, 30px);
  color: var(--color_red);
}

.message {
  padding: 0;
  text-align: center;
  position: relative;
}
.message img {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}

footer {
  background-color: white;
  text-align: center;
}
footer img {
  width: 45%;
  max-width: 356px;
  aspect-ratio: 356.1729/59.5098;
  margin: min(7vw, 60px) auto;
}
footer ul {
  padding: 0;
  margin: 0;
  list-style: none;
  margin-bottom: min(5vw, 40px);
  display: flex;
  justify-content: center;
}
footer ul li:not(:last-child) {
  border-right: 1px solid black;
}
footer ul li a {
  display: block;
  padding: 0 min(2vw, 20px);
  font-size: min(3vw, 18px);
  text-decoration: none;
  font-weight: bold;
  color: black;
}
footer .copyright {
  border-top: 3px solid #7fdaf1;
  text-align: center;
  font-weight: bold;
  font-size: min(3vw, 18px);
  padding: min(3vw, 20px);
  margin: 0 auto;
}

.pagetop {
  position: absolute;
  bottom: min(4vw, 20px);
  right: min(4vw, 20px);
  background-color: white;
  width: min(20vw, 80px);
  height: min(20vw, 80px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  border-radius: min(20vw, 50px);
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  font-family: 'Zen Maru Gothic';
  font-weight: normal;
  font-size: min(4vw, 20px);
  color: gray;
  font-weight: bold;
  text-decoration: none;
  transition: all .2s ease;
}
.pagetop:hover {
  transform: translate(1px, 1px);
}

@media screen and (max-width:480px) {
  main {
    width: 100%;
    overflow-x: hidden;
  }
}