@charset "utf-8";

p,
h2,
h3,
a,
footer {
  font-family: "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック",
    "MS PGothic", sans-serif !important;
}
html,
body {
  overscroll-behavior: none;
}
a {
  text-decoration: none;
  all: unset;
  cursor: pointer;
}

h1 a {
  display: block;
  width: 100px;
  margin: 0 auto;
}
.bg {
  object-fit: contain;
  position: fixed;

  top: 0;
  width: 100%;
  height: auto;
  margin: 0 auto;
  z-index: -1;
}
header {
  background-color: #faebd7;
  padding: 10px 0;
  z-index: 3;
  position: relative;
}
.firstview {
  background-image: url(../img/top_bg.webp);
  background-size: cover;
  padding-top: 4%;
  position: relative;
  padding-bottom: 10%;
}
.scroll-infinity__item img {
  box-shadow: 8px 8px 0px 0px rgb(0 0 0 / 62%);
}

main {
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: -1px -1px 20px 4px rgba(0, 0, 0, 0.4);
}

/* フワッと */
.fadein {
  /* 最初は非表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 0.5s, visibility 0.5s, transform 0.5s;
}
.fadein2 {
  transform: translateY(0px);
}
.delay1 {
  transition: opacity 1s, visibility 1s, transform 1s;
}
.delay2 {
  transition: opacity 1.5s, visibility 1.5s, transform 1.5s;
}
/* フェードイン時に入るクラス */
.is-fadein {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* トップ画像スクロール */
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0;
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 20s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: 450px;
  margin-right: 2%;
  transform: rotate(6deg);
  padding: 30px 0;
}
.scroll-infinity__item > img {
  width: 100%;
  box-shadow: 3px 4px 0px 0px rgba(0, 0, 0, 0.4);
}

.firstview .flower1 {
  width: 25%;
  position: absolute;
  right: 0;
  top: -7%;
}
.firstview .flower2 {
  width: 30%;
  position: absolute;
  left: -4%;
  bottom: -5%;
  transform: rotate(150deg);
  /* z-index: 3; */
}
.firstview .grass {
  width: 70%;
  position: absolute;
  right: -30%;
  bottom: -30%;
}
video {
  width: 100%;
  padding-bottom: 30%;
}
.video {
  position: relative;
}
.waku {
  position: absolute;
  top: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 950px;
}
.aboutwrapper {
  background-image: url(../img/moala_about_bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center; /* ← ここがポイント */
  margin-top: -7%;
  z-index: 2;
  position: relative;
  padding-top: 20%;
}
.aboutwrapper::after {
  content: "";
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 20%,
    #17685c 30%,
    #17685c 100%
  );
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.aboutwrapper p {
  text-align: center;
  color: white;
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 2em;
  margin-top: 5%;
  font-weight: 800;
  text-shadow: 2px 3px 3px rgb(0 0 0 / 41%);
}
.logo2 {
  width: 50%;
  margin: 0 auto;
  display: block;
}
.momoatitle {
  z-index: 2;
  position: relative;
  width: 90%;
  margin: 4% auto -10% auto;
}

/* ぽよん */

.anim-box.poyoyon2.is-animated {
  animation: poyoyon2 1s ease-in-out forwards;
  animation-duration: 1s;
}

@keyframes poyoyon2 {
  0% {
    transform: scale(1, 1) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1) translate(0, 8px);
  }
  50% {
    transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1, 1) translate(0, 0);
  }
  0%,
  100% {
    opacity: 1;
  }
}

.moala {
  background-image: url(../img/wave_bg.webp);
  width: 120%;
  /* margin-right: 10%; */
  background-size: cover;
  border-top-left-radius: 1000px 300px;
  border-top-right-radius: 1000px 300px;
  margin-top: -20%;
  transform: translateX(-8%);
  position: relative;
  z-index: 3;
  padding-bottom: 40%;
}
.moala1 {
  background-color: #1da298;
}
.moala > div {
  width: 83%;
  margin: 0 auto;
  padding-top: 20%;
}
.mojiright {
  width: 40%;
  position: absolute;
  right: 15%;
  top: -3%;
  filter: brightness(110%);
}
.mojileft {
  width: 40%;
  position: absolute;
  left: 12%;
  top: -3%;
  filter: brightness(110%);
}
.mojiright::before {
  content: "";
  display: block;
  width: 16%;
  aspect-ratio: 1 / 1;
  background-image: url(../img/diamond1.webp);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: -18%;
  transform: rotate(-1deg);
  bottom: 40%;
}
.mojiright::after {
  content: "";
  display: block;
  width: 20%;
  aspect-ratio: 1 / 1;
  background-image: url(../img/diamond1.webp);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: -13%;
  bottom: -20%;
  transform: rotate(210deg);
}
.mojileft::before {
  content: "";
  display: block;
  width: 16%;
  aspect-ratio: 1 / 1;
  background-image: url(../img/diamond1.webp);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: -12%;
  transform: rotate(220deg);
  bottom: -40%;
}
.mojileft::after {
  content: "";
  display: block;
  width: 20%;
  aspect-ratio: 1 / 1;
  background-image: url(../img/diamond1.webp);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: -30%;
  bottom: 10%;
  transform: rotate(50deg);
}
.moalaflex {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding-right: 7%;
  position: relative;
}
.moalaflex .moalabun {
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: white;
  font-size: 20px;
  height: 500px;
  text-align: center;
  padding-left: 4%;
  font-weight: 700;
  top: 100px;
  right: -3%;
  letter-spacing: 2px;
}
.moalaflex h2 {
  position: relative;
  color: white;
  font-weight: 900;
  font-size: 60px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  overflow: hidden;
  letter-spacing: 1px;
}
.moalaflex .h2sub {
  letter-spacing: 2px;
  position: relative;
  color: white;
  font-weight: 900;
  font-size: 40px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  overflow: hidden;
  font-size: 26px;
  text-align: end;
  position: relative;
  right: -20px;
  bottom: -200px;
}

/* 擬似要素で背景を伸ばす */
.moalaflex h2::before {
  content: "";
  position: absolute;
  /* top: 5%; */
  left: 0;
  width: 100%;
  height: 0%;
  background-color: #f57700;
  z-index: -1;
  transition: height 1s ease;
}
.moalaflex .h2sub::before {
  content: "";
  position: absolute;
  /* top: 0; */
  top: 5%;
  left: 0;
  width: 100%;
  height: 0%;
  background-color: #f57700;
  z-index: -1;
  transition: height 1s ease;
  transition-delay: 0.3s;
}

/* アニメーションを発火させるクラス */
.moalaflex h2.animate-bg::before {
  height: 100%;
}
.moalaflex .h2sub.animate-bg::before {
  height: 90%;
}
.imageleft {
  width: 60%;

  padding-left: 3%;
}
.imageleft img {
  box-shadow: 8px 8px 0px 0px rgb(0 0 0 / 62%);
  transform: rotate(-5deg);
}
.grass2 {
  position: absolute;
  bottom: -47%;
  right: -3%;
  transform: rotate(-30deg);
  z-index: 2;
}

.grass3 {
  position: absolute;
  top: -50%;
  left: -40%;
  transform: rotate(180deg);
  z-index: 2;
  width: 60%;
}
.grass4 {
  position: absolute;
  bottom: -52%;
  right: -30%;
  transform: rotate(-10deg);
  z-index: 0;
}
.grass5 {
  position: absolute;
  bottom: -30%;
  right: -30%;
  transform: rotate(294deg);
  z-index: 0;
}
.itemflex {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}
.backimg {
  filter: drop-shadow(8px 8px 0px rgb(0 0 0 / 62%));
  z-index: 2;
  width: 55%;
}
.moala2 .backimg {
  padding-right: 4%;
  width: 50%;
}
.moalaitem {
  padding-top: 90px;
  width: 40%;
  position: relative;
}

.morebtn {
  background-color: white;
  color: black;
  width: 170px;
  margin: 0 auto;
  display: block;
  text-align: center;
  padding: 7px 0;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 12px;
  line-height: 1em;
  margin-top: 10%;
}
.flower3 {
  position: absolute;
  bottom: 3%;
  width: 30%;
  left: -5%;
  transform: rotate(60deg);
}
.flower4 {
  position: absolute;
  top: 5%;
  width: 40%;
  right: -7%;
  transform: rotate(60deg);
}
.moalaflex2 {
  padding-left: 5%;
}
.moalaflex2 .imageleft img {
  transform: rotate(5deg);
}
.moalaflex2 .imageleft {
  padding-left: 0;
  margin-left: 3%;
}
.moalaflex2 .h2sub {
  left: -22px;
}
.moalaflex2 .moalabun {
  padding-left: 0;
}

.moala2 {
  background-color: #42c0c7;
}
.moala3 {
  background-color: #00a69e;
}
.moala4 {
  background-color: #48c5ca;
}
.itemflex2 .h2sub::before {
  background-color: #ee617d;
}
.itemflex2 h2::before {
  background-color: #ee617d;
}
.itemflex3 .h2sub::before {
  background-color: #31d7ac;
}
.itemflex3 h2::before {
  background-color: #31d7ac;
}
.itemflex4 .h2sub::before {
  background-color: #acacac;
}
.itemflex4 h2::before {
  background-color: #acacac;
}
.moalalast .h2sub::before {
  background-color: #000000;
}
.moalalast h2::before {
  background-color: #000000;
}
.moalalast {
  background-color: #21bfb3;
}
.backimgleft {
  width: 60%;
  margin-top: -2%;
}
.moala2 .moalaitem {
  padding-right: 2%;
}
.moala4 .moalaitem {
  padding-right: 2%;
}
.arrow {
  position: absolute;
  bottom: -13%;
  z-index: 3;
  width: 16%;
  right: 34%;
}
.arrow2 {
  position: absolute;
  bottom: -5%;
  z-index: 3;
  width: 16%;
  right: 49%;
}
.moala3 .moalaitem {
  padding-right: 3%;
}
.moala3 .backimgleft {
  margin-left: 3%;
}
.moalalast .moalaitem {
  padding-right: 2%;
}
.moalalast::after {
  content: "";
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0) 90%,
    #0f4c44 100%
  );
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}
/* レコメンド部分 */
.allitem {
  background-color: #004c44;
  padding-bottom: 30px;
}
.allflex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.allflex a {
  width: 45%;
  margin: 2%;
}
.name {
  text-align: center;
  color: white;
  font-size: 9px;
  margin-top: 5px;
}
.price {
  color: white;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}
.price small {
  font-size: 0.6em;
}
.snswrapper {
  background-image: url(../img/moala_sns_bg.webp);
  padding-top: 15%;
  background-size: cover;
  background-repeat: repeat;
  margin-bottom: 8%;
}
.snsbtn {
  border: 2px solid white;
  width: 250px;
  margin: 30px auto;
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
  font-size: 14px;
  padding: 3px 0;
  letter-spacing: 2px;
}
.momoawrapper {
  display: flex;
  width: 95%;
  justify-content: space-evenly;
  color: white;
}

.momoaimg {
  width: 45%;
  height: fit-content;
}
.momoawrapper h3 {
  text-align: center;
  font-size: 40px;
  letter-spacing: 4px;
  line-height: 1.1em;
  padding-top: 10px;
  margin-bottom: 40px;
  font-weight: 800;
}
.momoawrapper h3 small {
  font-size: 0.5em;
}
.momoawrapper a {
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  margin-bottom: 15px;
}
.momoawrapper a .id {
  background-color: #6bc7a0;
  color: black;
  margin-left: 5%;
  font-size: 13px;
  width: 130px;
  padding-left: 10px;
  display: inline-block;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}
.momoawrapper a p {
  display: inline-block;
  font-weight: 600;
}
.icon {
  margin-right: 3%;
}
.momoawrapper a p .label {
  display: inline-block;
  width: 80px;
  text-align: center;
}

footer {
  background-color: #ffe1b5;
  text-align: center;
  color: #0f4c44;
  font-weight: 600;
  font-size: 10px;
}
/* VISUMO */
.grid_one .ecbn-selection-snap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100% !important;
  height: auto !important;
}
.grid_one .ecbn-selection-snap .ecbn-selection-item:nth-child(1) {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.grid_one .ecbn-selection-snap .ecbn-selection-item:nth-child(2) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.grid_one .ecbn-selection-snap .ecbn-selection-item:nth-child(3) {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
.grid_one .ecbn-selection-snap .ecbn-selection-item:nth-child(4) {
  grid-column: 2 / 4;
  grid-row: 4 / 6;
}
.grid_one .ecbn-selection-snap .ecbn-selection-item {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1;
  top: auto !important;
  left: auto !important;
  overflow: hidden;
}
.grid_one .ecbn-selection-snap .ecbn-selection-item:nth-child(7) {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}
.vsm-tile .ecbn-selection-page-wrapper .ecbn-selection-item video {
  height: auto !important;
}
.snstitle {
  background-color: #093c35c9;
  text-align: center;
  padding: 3% 0;
  color: white;
  font-weight: 900;
  letter-spacing: 3px;
  margin-bottom: 20px;
  margin-top: 20px;
}
.moalasnswrapper a {
  display: flex;
  color: white;
  align-items: center;
  margin-top: 3%;
  margin-left: 210px;
  letter-spacing: 2px;
  font-weight: 800;
}
.moalasnswrapper .icon {
  margin-right: 3%;
}
.footer_info {
  text-align: center;
  margin-top: 20px;
}
.footer_info a {
  font-size: 8px;
  display: inline-block;
  color: white;
  border-bottom: 1px solid;
  text-decoration: dashed;
}
.moala1 .h2sub {
  text-shadow: 1px 0px rgb(245, 119, 0), -1px 0px rgb(245, 119, 0),
    0px 1px rgb(245, 119, 0), 0px -1px rgb(245, 119, 0),
    1px 1px rgb(245, 119, 0), -1px -1px rgb(245, 119, 0),
    1px -1px rgb(245, 119, 0), -1px 1px rgb(245, 119, 0);
}
.moala4 .h2sub {
  text-shadow: 1px 0px #acacac, -1px 0px #acacac, 0px 1px #acacac,
    0px -1px #acacac, 1px 1px #acacac, -1px -1px #acacac, 1px -1px #acacac,
    -1px 1px #acacac;
}
.moala3 .h2sub {
  text-shadow: 1px 1px #31d7ac, -1px 1px #31d7ac, 1px -1px #31d7ac,
    -1px -1px #31d7ac, 1px 0px #31d7ac, -1px 0px #31d7ac, 0px 1px #31d7ac,
    0px -1px #31d7ac;
}
.moalalast .h2sub {
  text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000,
    -1px -1px 1px #000, 1px 0px 1px #000, -1px 0px 1px #000, 0px 1px 1px #000,
    0px -1px 1px #000, 2px 0px 1px #000, -2px 0px 1px #000, 0px 2px 1px #000,
    0px -2px 1px #000, 2px 2px 1px #000, -2px -2px 1px #000, 2px -2px 1px #000,
    -2px 2px 1px #000;
}
.moala4 .mojileft::after {
  bottom: 30%;
}
.moala4 .mojileft::before {
  bottom: -30%;
}
@media screen and (max-width: 768px) {
  .scroll-infinity__item {
    width: 250px;
  }
  .moalaflex h2 {
    font-size: 9vw;
  }
  .moalaflex .h2sub {
    font-size: 4vw;
    bottom: -20vw;
    right: -2vw;
    letter-spacing: 0.5vw;
  }
  .moalaflex .moalabun {
    font-size: 3vw;
    height: 70vw;
  }
  .grass2 {
    width: 75vw;
    bottom: -46vw;
  }
  .grass4 {
    bottom: -57%;
    right: -30vw;
    width: 60vw;
  }
  .grass5 {
    bottom: -25vw;
    right: -50vw;
    width: 80vw;
  }
  .moalaitem {
    padding-top: 15vw;
  }
  .moalaflex2 .h2sub {
    left: -2vw;
  }
  .momoawrapper {
    margin-left: 2vw;
    width: 90%;
  }
  .momoawrapper h3 {
    font-size: 5vw;
    padding-top: 0vw;
    margin-bottom: 1vw;
    line-height: 1em;
  }
  .icon {
    width: 6vw;
    margin-right: 0;
    margin-bottom: -1vw;
  }
  .momoawrapper a p .label {
    width: 18vw;
    font-size: 3vw;
  }
  .momoawrapper a .id {
    font-size: 2.6vw;
    width: 27vw;
  }
  .momoaimg {
    width: 40%;
    margin-right: 3vw;
  }
  .momoawrapper a {
    margin-bottom: 2vw;
  }
  .waku {
    height: 127vw;
  }
  .moalasnswrapper a {
    margin-left: 19vw;
    letter-spacing: 0.3vw;
    font-size: 3vw;
  }
}