@charset "UTF-8";
@import "https://www.1101.com/ns_entoan_jimbocho/swiper-bundle.min.css";

/* CSS Document */
body{
	font-family: "Jun 34";
	color:#2b75cc;
}
#yodogawa.bd_t.bd_none {
    border-radius: 10px;
}
#yodogawa, .content_wrap section {
    padding: 20px;
    background-color: #ffe3fa;
	margin: 1.6em;
}
.komidashi{
	font-size:1.3em;
	font-family: "Jun 501";
}
.profile_inner, .modal_content_inner {
    background-color: #ffe3fa;
    border-radius: 16px;
}
.bd_b {
    border-color: #ffe3fa;
    border-top: 3px solid #ffe3fa;
    border-bottom: 3px solid #ffe3fa;
}
.bd_t {
    border-top: 0px solid transparent;
}

@media (min-width: 641px) {
  #yodogawa.bd_t.bd_none {
      margin: 0 auto;
      width: 500px;
  }
	.content_wrap section,.content_wrap section#information_free {
    width: 500px;
    margin: auto;
    border-radius: 16px;
	 margin-bottom: 60px;
  }
  #information li, #information_free li {
    margin:0px;
    padding:0px;
  }
}
@media (max-width: 640px) {
  #yodogawa.bd_t.bd_none {
      margin-top: 0;
  }
}

/**  cooolshop  **/

@keyframes sway {
  0% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(4px);
  }
}

@keyframes sway-half {
  0% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(2px);
  }
}

@keyframes bounds {
  0% {
    transform: translateY(-100%);
  }
  72% {
    transform: translateY(-40%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes zoom {
  0% {
    transform: scale(.98);
  }
  100% {
    transform: scale(1);
  }
}

.btn_profile a{
  background-image: url(https://www.1101.com/ns_as/ns_hobocooolshop/images/btn-profile.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 6em;
  display: block;
  color: transparent;
}

.mv {
  min-width: 100%;
  aspect-ratio: 1200 / 800;
  background-image: url(https://www.1101.com/ns_as/ns_hobocooolshop/images/hero-bg-pc.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  position: relative;
}

.mv::before {
  content: "";
  position: absolute;
  width: 5vw;
  height: auto;
  aspect-ratio: 55 / 236;
  top: 0;
  right: 6vw;
  background-image: url(https://www.1101.com/ns_as/ns_hobocooolshop/images/item04.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transform: translateY(-100%);
  animation: bounds 1s cubic-bezier(.2, 1.35, .32, 1) 1.5s forwards;
}

.mv-title {
  position: absolute;
  top: 16vw;
  left: 0;
  right: 0;
  z-index: 0;
  width: 54vw;
  margin-inline: auto;
  pointer-events: none;
}

.mv-title::after {
  content: "";
  position: absolute;
  width: 6vw;
  height: auto;
  aspect-ratio: 72 / 42;
  bottom: -8vw;
  left: 6vw;
  background-image: url(https://www.1101.com/ns_as/ns_hobocooolshop/images/item02.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  animation: sway 3s ease-in-out infinite alternate-reverse;
}

.mv-title::before {
  content: "";
  position: absolute;
  width: 8vw;
  height: auto;
  aspect-ratio: 115 / 100;
  bottom: -12vw;
  right: 6vw;
  background-image: url(https://www.1101.com/ns_as/ns_hobocooolshop/images/item03.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  animation: sway 3s ease-in-out infinite alternate;
}

.mv-logo {
  position: absolute;
  top: 6vw;
  right: 6vw;
  z-index: 2;
  width: 15vw;
  pointer-events: none;
}

.mv-swiper {
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-theme-color: #fff;
  padding-bottom: 6vw;
}

.mv-swiper::after {
  content: "";
  position: absolute;
  width: 8vw;
  height: auto;
  aspect-ratio: 197 / 121;
  left: 32vw;
  bottom: 4vw;
  background-image: url(https://www.1101.com/ns_as/ns_hobocooolshop/images/item01.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  animation: sway 2s ease-in-out infinite alternate;
}

.swiper-free-mode>.swiper-wrapper,
.swiper-wrapper {
  transition-timing-function: linear!important;
  align-items: flex-end;
}

.swiper-slide {
  margin: 8px 0;
  display: flex;
  justify-content: center;
}

.swiper-slide picture {
  animation: zoom 2s ease-in-out infinite alternate;
}

#kv .swiper-slide img {
  width: calc(100% - 8vw);
  height: auto;
}

.swiper-slide.swiper-slide-odd img {
  animation: sway 2s ease-in-out infinite alternate;
}

.swiper-slide.swiper-slide-even img {
  animation: sway 2s ease-in-out infinite alternate-reverse;
}

.swiper-slide.swiper-slide-last img {
  animation: sway 3s ease-in-out infinite alternate-reverse;
}

#modal .btn_close {
  background-image: url(https://www.1101.com/ns_as/ns_hobocooolshop/images/close.png);
}

@media (max-width: 640px) {
  .mv {
    flex-direction: column;
    aspect-ratio: 400 / 800;
    justify-content: flex-end;
    background-image: url(https://www.1101.com/ns_as/ns_hobocooolshop/images/hero-bg-sp.webp);
  }
  .mv::before {
    width: 12vw;
    right: 12vw;
  }
  .mv-title {
    position: relative;
    top: 0;
    width: 84vw;
  }
  .mv-title::before {
    width: 24vw;
    bottom: -54vw;
    right: -4vw;
  }
  .mv-title::after {
    width: 18vw;
    bottom: -58vw;
    left: -2vw;
  }

  .mv-logo {
    position: static;
    margin-inline: auto;
    padding-block: max(24px, 1.8vw);
    width: max(68px, 4.9vw);
  }

  #kv .swiper-slide img {
    width: calc(100% - 24vw);
    height: auto;
  }

    .mv-swiper {
    padding-bottom: 18vw;
  }
  .mv-swiper::after {
    width: 24vw;
    left: 8vw;
    bottom: 14vw;
  }
  .swiper-slide {
    align-items: flex-end;
  }
  #modal .overlay {
    background-color: rgba(0, 0, 0, .25);
  }
  .profile_inner {
    position: relative;
  }
  #modal .btn_close {
    position: absolute;
    top: 4px;
    right: 0;
    background-color: transparent;
    background-image: url(https://www.1101.com/ns_as/ns_hobocooolshop/images/close.png);
  }
}