/* ---------------------------------------------
    Mainvisual
--------------------------------------------- */
.mainvisual {
  height: 100vh;
  overflow: hidden;
}

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

.slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  height: 100vh;
}

.slider__slide:first-child {
  position: relative; /* 高さの基準 */
}

.slider__slide.is-active {
  opacity: 1;
}

.slider__slide img {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-position: center;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media only screen and (max-width: 860px) {
  .mainvisual {
    height: 100vh;
  }

  .mainvisual img {
    height: 100vh;
    object-fit: cover;
    width: 100%;
  }
}

/* ---------------------------------------------
    About
--------------------------------------------- */
.about {
  border-top: 20px solid var(--color-gray);
  padding: 80px 0 100px;
}

.about__concept {
  display: flex;
  justify-content: center;
}

.about__concept img {
  width: 158px;
}

.about__art {
  margin: 0 calc(50% - 50vw);
  position: relative;
  top: -48px;
}

.about__ship {
  position: absolute;
  bottom: -8.5vw;
  right: 32px;
  width: 58.5vw;
  object-fit: cover;
  animation: ship-float 6.5s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes ship-float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(1.2deg);
  }
}

@keyframes ship-float-sm {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(0.8deg);
  }
}

.picture__tuki {
  bottom: -10vw;
  left: 11vw;
  position: relative;
  width: 10vw;
}

.picture__tuki img {
  width: 7.24vw;
}

.picture__img {
  position: relative;
  width: 100vw;
  overflow: hidden;
}

.about__message {
  margin-top: 40px;
  position: relative;
}

.anime-drip {
  position: absolute;
  right: -7vw;
  top: 3vw;
}

.about__messageText {
  font-size: 17px;
  line-height: 1.8;
}

.about__img {
  margin-top: 40px;
}

@media only screen and (max-width: 860px) {
  .about {
    border-top: 10px solid var(--color-gray);
    padding: 80px 0;
  }

  .about__concept img {
    width: 32vw;
  }

  .anime-drip {
    display: none;
  }

  .about__art {
    position: relative;
    top: -8px;
  }

  .about__ship {
    right: -20px;
    bottom: -9.2vw;
    width: 59vw;
    animation-name: ship-float-sm;
  }

  .picture__tuki {
    bottom: -20vw;
    height: auto;
    left: 11vw;
    width: 6vw;
  }

  .picture__tuki img {
    width: 6vw;
  }

  .picture__img {
    margin-top: 40px;
  }

  .about__message {
    margin-top: 40px;
  }

  .about__messageText {
    font-size: 15px;
    line-height: 2;
  }

  .about__img {
    margin: 48px -20px 0;
  }

  .about__img img {
    height: 220px;
    object-fit: cover;
  }
}

/* ---------------------------------------------
    Concept
--------------------------------------------- */
.concept {
  background: linear-gradient(to bottom, #3e5477 65%, #f7f4ed 35%);
  overflow: hidden;
  padding-top: 100px;
  position: relative;
}

.concept .inner {
  max-width: 58vw;
}

.waves img {
  width: 12.5vw;
}

.anime-waves--1,
.anime-waves--2,
.anime-waves--3 {
  position: absolute;
}

.anime-waves--1 {
  left: 30vw;
  top: 3vw;
}

.anime-waves--2 {
  right: 0;
  top: 7vw;
}

.anime-waves--3 {
  left: -2vw;
  top: 26vw;
}

.pop-up {
  bottom: 19vw;
  position: absolute;
  right: 1.5vw;
}

.pop-up img {
  width: 8.33vw;
}

.concept__item {
  display: grid;
  justify-content: right;
  position: relative;
}

.concept__item:nth-of-type(2) {
  justify-content: left;
  margin-top: -40px;
}

.concept__item:nth-of-type(3) {
  margin-top: -100px;
}

.concept__itemImg {
  aspect-ratio: 16 / 9;
  width: 28vw;
}

.concept__itemWord {
  color: #fff;
  display: flex;
  font-size: 17px;
  justify-content: center;
  line-height: 1.7;
  margin-top: 16px;
}

.concept__itemWord--blue {
  color: var(--color-blue-500);
}

.concept__itemImg--clothing::after {
  background: url(../images/icon_clothing.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 2vw;
  content: "";
  height: 5vw;
  position: absolute;
  right: -30px;
  width: 5vw;
}

.concept__itemImg--residence::after {
  background: url(../images/icon_food.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 4vw;
  content: "";
  height: 5vw;
  position: absolute;
  right: -30px;
  width: 5vw;
}

.concept__itemImg--food::after {
  background: url(../images/icon_residence.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 5vw;
  left: -30px;
  position: absolute;
  top: -3vw;
  width: 5vw;
}

@media only screen and (max-width: 860px) {
  .concept {
    background: linear-gradient(to bottom, #3e5477 55%, #f7f4ed 45%);
    padding: 80px 0 40px;
  }

  .concept .inner {
    max-width: 100%;
  }

  .waves img {
    width: 80px;
  }

  .anime-waves--1 {
    left: 16px;
    top: 40px;
  }

  .anime-waves--2 {
    right: 8px;
    top: 88vw;
  }

  .anime-waves--3 {
    bottom: 92vw;
    left: 16px;
    top: unset;
  }

  .pop-up {
    bottom: 4vw;
    right: 16px;
  }

  .pop-up img {
    width: 50px;
  }

  .concept__item {
    display: grid;
    grid-template-columns: 100%;
    justify-content: center;
  }

  .concept__item:nth-of-type(2) {
    justify-content: center;
    margin-top: 40px;
  }

  .concept__item:nth-of-type(3) {
    margin-top: 40px;
  }

  .concept__itemImg {
    width: 100%;
  }

  .concept__itemWord {
    font-size: 17px;
    margin-top: 16px;
  }

  .concept__itemImg--clothing::after {
    bottom: unset;
    height: 50px;
    right: -20px;
    top: -5vw;
    width: 50px;
  }

  .concept__itemImg--food::after {
    bottom: unset;
    height: 50px;
    left: unset;
    right: -16px;
    top: -5vw;
    width: 50px;
  }

  .concept__itemImg--residence::after {
    bottom: unset;
    height: 50px;
    right: -16px;
    top: -5vw;
    width: 50px;
  }
}

/* ---------------------------------------------
    Store
--------------------------------------------- */
.store {
  padding-top: 100px;
  position: relative;
}

.store .inner {
  position: relative;
}

.anime-grass {
  left: 2vw;
  position: absolute;
  top: -12vw;
  transform: rotate(25deg);
}

.anime-jug {
  left: -120px;
  position: absolute;
  top: 30vw;
}

.store__img img {
  width: 100%;
}

.store__address {
  margin-top: 40px;
}

.store__overview {
  margin-top: 24px;
}

.store__overviewTitle {
  font-size: 20px;
  width: 100%;
}

.store__overviewInner {
  column-gap: 30px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 24px;
}

.store__map {
  margin-top: 32px;
}

.store__mapArea {
  display: flex;
  justify-content: center;
}

.store__mapArea iframe {
  aspect-ratio: 16 / 9;
  height: 300px;
  width: 100%;
}

.store__mapText {
  margin-top: 16px;
}

@media only screen and (max-width: 860px) {
  .store {
    padding-top: 64px;
  }

  .anime-grass {
    top: -16vw;
  }

  .grass-illust {
    width: 74px;
  }

  .anime-jug {
    left: 20px;
    top: 70vw;
  }

  .anime-jug img {
    width: 32px;
  }

  .store__img {
    margin: 0 -20px;
  }

  .store__img img {
    height: 220px;
    object-fit: cover;
  }

  .store__address {
    margin-top: 64px;
  }

  .store__addressTitle {
    font-size: 16px;
    text-align: center;
  }

  .store__overview {
    flex-direction: column;
    margin-top: 24px;
    row-gap: 20px;
  }

  .store__overviewInner {
    column-gap: 0;
    display: grid;
    font-size: 16px;
    grid-template-columns: 100%;
    justify-content: center;
    margin-top: 0;
    row-gap: 16px;
    text-align: center;
  }

  .store__overviewTitle {
    font-size: 20px;
    text-align: center;
  }

  .store__overviewInner p {
    margin-top: 32px;
    text-align: center;
  }

  .store__overviewInner p:not(:first-of-type) {
    margin-top: 0;
  }

  .store__map {
    margin-top: 48px;
  }

  .store__mapArea iframe {
    height: 250px;
  }

  .store__mapText {
    line-height: 1.8;
    margin-top: 16px;
  }
}

/* ---------------------------------------------
    Banner Online Store
--------------------------------------------- */
.banner-online-store {
  position: fixed;
  bottom: 0;
  display: none;
  left: 0;
  width: 100%;
  z-index: 1;
  transition: filter 0.2s;
}

@media (any-hover: hover) {
  .banner-online-store:hover {
    filter: brightness(0.8);
  }
}

.banner-online-store img {
  width: 100%;
}

@media (max-width: 860px) {
  .banner-online-store {
    display: block;
  }
}