/* ========================================
  KIDS BANNER
======================================== */

.gift-top {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.gift-top__bg {
  display: block;
  width: 100%;
  height: auto;
}
.gift-top__titles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.gift-top__title {
  position: absolute;
  opacity: 0;
}
.gift-top__title img {
  display: block;
  width: 100%;
  height: auto;
}
.gift-top__title {
  position: absolute;
  opacity: 0;
  animation: giftTitleFade 2s ease forwards;
}

.gift-top__title--01 {
  top: 75.6%;
  left: 6.9%;
  width: 41%;
  animation-delay: 0.2s;
}

.gift-top__title--02 {
  top: 78.8%;
  left: 6.5%;
  width: 59%;
  animation-delay: 0.8s;
}

.gift-top__title--03 {
  left: 7.5%;
  width: 34%;
  bottom: 6.5%;
  animation-delay: 1.4s;
}

.gift-top__title--04 {
  top: 94.4%;
  left: 13%;
  width: 61%;
  animation-delay: 2s;
}

@keyframes giftTitleFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.gift-top__scroll {
    position: absolute;
    right: 4%;
    bottom: 0;
    width: 5%;
    height: 13%;
}
.gift-top__scroll-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: #fff;
}
.gift-top__scroll-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.8vw;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, 0);
  z-index: 2;
  animation: scrollDot 2.2s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}
.gift-top__scroll-text {
    position: absolute;
    top: 0;
    left: 49%;
    font-family: serif;
    font-size: 2.9vw;
    letter-spacing: 0.4vw;
    line-height: 1;
    color: #fff;
    writing-mode: vertical-rl;
}
@keyframes scrollDot {
  0% {
    top: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  85% {
    top: calc(100% - 1.8vw);
    opacity: 0;
  }
  100% {
    top: calc(100% - 1.8vw);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gift-top__title img {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .gift-top__scroll-dot {
    animation: none;
  }
}
/*コンセプト*/
.concept {
  width: 100%;
  background: #fff;
}
.concept__text {
  width: 100%;
  padding: 15vw 5% 10vw;
  box-sizing: border-box;
  text-align: center;
  color: #625d58;
}
.concept__title {
  margin: 0;
  font-family: "Hannari", serif;
  font-size: 5.3vw;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.16em;
}
.concept__description {
  margin: 5.2vw 0 0;
  font-family: "Hannari", serif;
  font-size: 3.1vw;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.3vw;
}
.concept__line {
  display: block;
  opacity: 0;
}
.concept__text.is-show .concept__line {
  animation: conceptFade 1.6s ease forwards;
}
.concept__text.is-show .concept__title .concept__line:nth-child(1) {
  animation-delay: 0.2s;
}
.concept__text.is-show .concept__title .concept__line:nth-child(2) {
  animation-delay: 0.6s;
}
.concept__text.is-show .concept__description .concept__line:nth-child(1) {
  animation-delay: 1.2s;
}
.concept__text.is-show .concept__description .concept__line:nth-child(2) {
  animation-delay: 1.6s;
}
.concept__text.is-show .concept__description .concept__line:nth-child(3) {
  animation-delay: 2s;
}
.concept__text.is-show .concept__description .concept__line:nth-child(4) {
  animation-delay: 2.4s;
}
.concept__text.is-show .concept__description .concept__line:nth-child(5) {
  animation-delay: 2.8s;
}
.concept__text.is-show .concept__description .concept__line:nth-child(6) {
  animation-delay: 3.2s;
}
@keyframes conceptFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.concept__image {
  width: 100%;
}
.concept__image img {
  display: block;
  width: 100%;
  height: auto;
}
/*ボディ*/
/* ========================================
  BODY VISUAL
======================================== */
.gift-visuals,
.gift-pickups {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
}
.gift-visuals {
      padding: 14% 0 8%;
}
.gift-pickups {
    padding: 14.5% 0 13.5%;
}
.gift-visuals__item {
  width: 65.5%;
}
.gift-pickups__item {
  width: 66%;
}
.gift-visuals__link,
.gift-pickups__link {
  display: block;
  width: 100%;
  transition: opacity 0.6s ease;
}
.gift-visuals__item img,
.gift-pickups__img {
  display: block;
  width: 100%;
  height: auto;
}
/* GIFT VISUALS */
.gift-visuals__item--01 {
  margin-left: 4.5%;
}
.gift-visuals__item--02 {
    margin-top: 14%;
    margin-left: auto;
    margin-right: 4.5%;
    margin-bottom: 8%;
}
/* GIFT PICKUPS */
.gift-pickups__item--01 {
  margin-left: 6.5%;
}
.gift-pickups__item--02 {
    margin-top: 13%;
    margin-left: auto;
    margin-right: 4%;
}
.gift-pickups__item--03 {
    margin-top: 14%;
    margin-left: 5%;
}
.inview-blur {
  opacity: 0;
  filter: blur(15px);
}
.inview-blur.is-blur-show {
  animation: imageBlur 1.5s ease forwards;
}
@keyframes imageBlur {
  from {
    opacity: 0;
    filter: blur(15px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}
@media (hover: hover) and (pointer: fine) {
  .gift-visuals__link:hover,
  .gift-pickups__link:hover {
    opacity: 0.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .inview-blur {
    opacity: 1;
    filter: blur(0);
  }

  .inview-blur.is-blur-show {
    animation: none;
  }
}
.gift-dotted-line {
    width: 91%;
    margin: 0% auto 7%;
    border-top: 1px dotted #8f8f8f;
    box-sizing: border-box;
}

@media screen and (min-width: 769px){
.gift-top__title--01 {
  top: 20.9%;
        left: 6.9%;
        width: 20%;
}
.gift-top__title--02 {
        top: 26.1%;
        left: 6.5%;
        width: 30%;
}
.gift-top__title--03 {
        left: 6.8%;
        width: 16%;
        bottom: 51.1%;
}
.gift-top__title--04 {
        top: 51.4%;
        left: 9.3%;
        width: 32%;
        animation-delay: 2s;
}
.gift-top__scroll {
    position: absolute;
    right: 4%;
    bottom: 0px;
    width: 5%;
    height: 18%;
}
.gift-top__scroll-dot{
  width: 1vw;
      left: 35%;
}
.gift-top__scroll-text {
    font-size: 1.3vw;
}
.gift-top__scroll-line {
    position: absolute;
    top: 0;
    left: 35%;
    width: 1px;
    height: 100%;
    background: #fff;
}
.concept__title {
    font-size: 2vw;
}
.concept__description {
    margin: 2.1vw 0 0;
    font-size: 1.2vw;
}
.concept__text {
    padding: 7vw 5% 7vw;
}
.concept__image {
    width: 43%;
    margin: 0 auto;
}
.gift-visuals__item {
    width: 34.5%;
}
  .gift-visuals {
        padding: 8% 8% 3% 8%;
    }
.gift-visuals__item--02 {
        margin-top: -9%;
        margin-bottom: 8%;
}
.gift-pickups__item {
    width: 35%;
}
.gift-pickups {
    padding: 0% 0 13.5%;
}
.gift-pickups__item--01 {
    margin-left: 6.5%;
    margin-top: -10%;
}
.gift-pickups__item--02 {
    margin-top: -6%;
}
.gift-pickups__item--03 {
    margin-top: -13%;
}
}