@charset "UTF-8";
/*-------------------------------------------
共通
--------------------------------------------*/
html {
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
  background-size: cover;
  scroll-behavior: smooth;
}
img {
  width: 100%;
  height: auto;
}
body {
  margin: 0 auto;
}
p {
  font-size: 2.5vw;
  line-height: 2;
}
a {
  cursor: pointer;
}
.main-contents-wrapper {
  max-width: 500px;
  margin: 0 auto;
  overflow: hidden;
  z-index: 1;
}
.top-view {
  background-image: url(../images/index/back/back_01.webp);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}
.area {
  position: relative;
  display: block;
  background-color: transparent;
}
.content-warpper {
  position: relative;
}
.area-contents {
  width: 100%;
  height: auto;
  position: absolute;
  display: block;
  top: 0;
}
.area .decolation {
  position: absolute;
  width: auto;
  height: auto;
}
/*-------------------------------------------
紙吹雪（画面全体）
--------------------------------------------*/
.confetti canvas {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
/*-------------------------------------------
左右エリア
--------------------------------------------*/
.bg {
  position: fixed;
  top: 0;
  width: calc((100% - 500px) / 2);
  z-index: 0;
  height: 100%;
  display: grid;
  grid-auto-flow: column;
  height: 100vh;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  .bg-main {
    background-color: none;
    display: grid;
    /* place-items: center; */
    height: 100vh;
    /* position: relative; */
    /* padding: 0 30px; */
    .band-warraper {
      width: auto;
      display: flex;
    }
  }
}
.bg.left {
  left: 0;
  background-image: url(../images/common/side_background/back_01.jpg);
  grid-template-columns: 50px 1fr;
  .decolation-carafull-01 {
    position: absolute;
    bottom: 10%;
    left: 28%;
    max-width: 220px;
    pointer-events: none;
    /* width: 80%; */
  }
  .decolation-cloud-01 {
    position: absolute;
    top: 14%;
    left: 22%;
    max-width: 220px;
    pointer-events: none;
  }
}
.bg.right {
  right: 0;
  background-image: url(../images/common/side_background/back_02.jpg);
  grid-template-columns: 1fr 50px;
  .decolation-carafull-01 {
    position: absolute;
    top: 14%;
    right: 22%;
    max-width: 220px;
    pointer-events: none;
  }
  .decolation-cloud-02 {
    position: absolute;
    bottom: 10%;
    right: 28%;
    max-width: 220px;
    pointer-events: none;
  }
}
/*---------------------------------------------------------
index.html
---------------------------------------------------------*/
.top-view {
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
.scrollDown {
  width: 2px;
  height: 25%;
  top: 73%;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  overflow: hidden;
}
.scrollDown::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #05609d;
  transform-origin: top;
  animation: scroll-down 2s ease infinite;
}
@keyframes scroll-down {
  0% {
    transform: scaleY(0);
    transform-origin: top;
    opacity: 1;
  }
  40% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }
  60% {
    transform: scaleY(1);
    transform-origin: bottom;
    opacity: 1;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: 1;
  }
}
/*---------------------------------------------------------
ファーストビュー
---------------------------------------------------------*/
.top-view {
  position: relative;
  .oshi {
    position: absolute;
    width: 5.9%;
    top: 2.4%;
    right: 4%;
  }
  .fammily {
    position: absolute;
    width: 66%;
    top: 41.5%;
    left: 9.5%;
  }
  .circle-deco {
    position: absolute;
    width: 57%;
    top: 16%;
    left: 25%;
  }
  .kabe {
    position: absolute;
    width: 100%;
    top: 56.5%;
    left: 0%;
  }
  .human_01 {
    width: 28%;
    top: 32%;
    right: -1.5%;
  }
  .human_02 {
    width: 41%;
    top: 43.5%;
    left: -9.5%;
  }
  .human_03 {
    width: 60%;
    top: -12.5%;
    right: -21%;
  }
  .human_04 {
    width: 32%;
    top: 47.5%;
    right: -5.5%;
  }
  .human_05 {
    width: 36%;
    top: 22%;
    left: -12.5%;
  }
  .human_06 {
    width: 26%;
    top: -6.5%;
    left: 6.5%;
  }
  .human_07 {
    width: 46%;
    top: -18%;
    left: -26.5%;
  }
  .human_08 {
    width: 55%;
    top: -9%;
    left: 30%;
  }
}
.main-logo-02 {
  position: relative;
  .decolation-cloud-01 {
    position: absolute;
    width: 12%;
    top: 3%;
    left: 3%;
  }
  .decolation-cloud-02 {
    position: absolute;
    width: 16%;
    bottom: 40%;
    right: 3%;
  }
  .decolation-familly {
    position: absolute;
    width: 35%;
    bottom: 8%;
    left: -0.5%;
  }
}
/*---------------------------------------------------------
サブタイトル
---------------------------------------------------------*/
.sub-title {
  /* position: relative; */
  .plane {
    /* position: absolute; */
    width: 20%;
    top: -20%;
    right: 12%;
  }
  .sub-title--confetti_01 {
    width: 3%;
    top: -12%;
    right: 4%;
  }
  .sub-title--confetti_02 {
    width: 9%;
    top: 68%;
    left: 9%;
  }
  .sub-title--cloud_01 {
    width: 12%;
    top: 14%;
    right: -1%;
  }
  .sub-title--cloud_02 {
    width: 12%;
    bottom: 62%;
    left: -1%;
  }
}
/*---------------------------------------------------------
イチオシTOPICS
---------------------------------------------------------*/
.topic-icon {
  position: relative;
  .topic-icon--cloud_01 {
    width: 15%;
    bottom: 32%;
    right: -0.5%;
  }
  .topic-icon--baloon {
    width: 11%;
    top: -18%;
    right: 15%;
  }
}
/*---------------------------------------------------------
TOPICS 01 見出し
---------------------------------------------------------*/
.new_shop_icon {
  position: relative;
}
.new_shop_icon .new_shop_icon--sweater {
  width: 17%;
  top: 13%;
  right: 4%;
}
.new_shop_icon .new_shop_icon--confettie_01 {
  /* position: absolute; */
  width: 6.4%;
  top: 1%;
  right: 6%;
}
.new_shop_icon .new_shop_icon--confettie_02 {
  width: 2.5%;
  top: 30%;
  right: 23%;
}
.new_shop_icon .new_shop_icon--bread {
  width: 7%;
  top: 5%;
  right: 19%;
}
.new_shop_icon .new_shop_icon--confettie_03 {
  width: 2.7%;
  top: -3.5%;
  left: 26.5%;
}
.new_shop_icon .new_shop_icon--cloud_01 {
  width: 11%;
  bottom: 7%;
  left: -2%;
}
.new_shop_icon .new_shop_icon--human {
  width: 39%;
  bottom: 52%;
  left: -6%;
}
.new_shop_icon .new_shop_icon--kabe {
  width: 100%;
  top: 23%;
  left: 0%;
}
#new_shop {
  top: -17%;
  left: 48%;
  opacity: 0;
  visibility: hidden;
}
/*-------------------------------------------
TOPICS 01 ショップリスト
--------------------------------------------*/
.shop-list {
  display: block;
  width: 100%;
  position: relative;
  z-index: 2;
}
.shop-list.small {
  width: 90%;
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(2, 1fr);
  height: auto;
  box-sizing: border-box;
  column-gap: 5%;
  row-gap: 3.6%;
}
.shop-list.middle {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 6%;
  .shop-list__logo {
    margin: 0 auto;
    width: 90%;
  }
}
.shop_small .shop_small--human {
  width: 57%;
  bottom: -16%;
  right: -13%;
}
.shop_small .shop_small--kabe {
  width: 100%;
  bottom: -23%;
  left: 0%;
}
.shop-list_btn {
  position: absolute;
  width: 60%;
  height: auto;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
}
/*---------------------------------------------------------
TOPICS 02 テラス
---------------------------------------------------------*/
.terrace .terrace--human_01 {
  width: 19%;
  top: 22%;
  left: 3%;
}
.terrace .terrace--confetti_01 {
  width: 24%;
  top: 21%;
  left: 4%;
}
.terrace .terrace--confetti_02 {
  width: 2.5%;
  top: 24%;
  right: 25%;
}
.terrace .terrace--human_02 {
  width: 34%;
  top: 25%;
  right: -3%;
}
.terrace .terrace--confetti_03 {
  width: 2.6%;
  bottom: 32%;
  right: 8%;
}
.terrace .terrace--speechBubble_01 {
  width: 38%;
  top: -4%;
  right: 2%;
}
.terrace .terrace--speechBubble_02 {
  width: 31%;
  bottom: 2%;
  left: -3%;
}
.terrace .terrace--human_03 {
  width: 17.5%;
  top: -4%;
  left: 10%;
}
.terrace .terrace--human_04 {
  width: 18%;
  top: 8%;
  left: 32%;
}
.terrace .terrace--confetti_04 {
  width: 18%;
  top: -11%;
  right: 31%;
}
.terrace .terrace--human_05 {
  width: 49%;
  top: -3%;
  right: -3%;
}
.terrace .terrace--kabe {
  width: 100%;
  top: 60%;
  left: 0%;
}
#terrace {
  top: 10%;
  left: 48%;
  opacity: 0;
  visibility: hidden;
}
.terrace_btn {
  position: absolute;
  width: 49.4%;
  height: auto;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
}
/*---------------------------------------------------------
遊び場
---------------------------------------------------------*/
.playground {
  position: relative;
  .decolation-cloud-01 {
    position: absolute;
    width: 18%;
    bottom: 19%;
    right: 0.5%;
  }
  .decolation-cloud-02 {
    position: absolute;
    width: 11.5%;
    top: 7%;
    left: 1%;
  }
}
/*-------------------------------------------
TOPICS 03 イベント
--------------------------------------------*/
.event_btn {
  width: 50%;
  bottom: -14%;
  left: 50%;
  transform: translateX(-50%);
}
/* swiper-event */
.swiper-event {
  width: 77%;
  max-width: 385px;
  height: auto;
  margin: 0 auto;
}
.swiper-event-wrapper {
  /* max-width: 385px; */
  width: 100%;
  display: flex;
  justify-content: center;
}
.swiper-event-wrapper img {
  max-width: 385px;
  /* width: 100%;
  height: auto; */
}
.event .event--human_03 {
  width: 17%;
  bottom: -40%;
  left: 12%;
}
.event .event--human_01 {
  width: 29%;
  bottom: 35%;
  left: 69%;
}
.event .event--human_02 {
  width: 31%;
  bottom: 35%;
  left: 0%;
}
.event .event--human_04 {
  width: 18%;
  bottom: -49%;
  left: 32%;
}
.event .event--confetti_04 {
  width: 17%;
  bottom: -27%;
  right: 31%;
}
.event .event--human_05 {
  width: 44%;
  bottom: -74%;
  right: 4%;
}
.event .event--kabe {
  width: 100%;
  bottom: -64.2%;
  right: 0%;
}
.event .event--house {
  width: 43%;
  bottom: -49%;
  left: -13%;
}
/*---------------------------------------------------------
ループアニメーション 左右帯
---------------------------------------------------------*/
@keyframes loop_animation_vertical {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0%);
  }
}
.right {
  padding-right: 15px;
  /* animation: loop_animation_vertical 30s linear infinite; */
}
/*---------------------------------------------------------
サイド ループアニメーション 左 縦
---------------------------------------------------------*/
@keyframes loop {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-100%);
  }
}
/*---------------------------------------------------------
サイド ループアニメーション 左 縦
---------------------------------------------------------*/
.side-loop__wrap {
  overflow: hidden;
  display: flex;
}
.side-loop__wrap__inner {
  width: 172%;
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  animation: 40s linear 0s infinite normal none running loop;
}
.side-loop__wrap.band-warraper {
  flex-direction: column;
  .side-loop__wrap__inner {
    flex-direction: column;
    width: 130%;
    animation: 40s linear 0s infinite normal none running loop_animation_vertical;
  }
}
.left .side-loop__wrap.band-warraper .side-loop__wrap__inner {
  animation: 40s linear 0s infinite reverse none running loop_animation_vertical;
}
.loop__wrap {
  width: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.loop__wrap__inner {
  width: 172%;
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  animation: 40s linear 0s infinite normal none running loop;
}
.loop__wrap__inner.logo {
  width: 280%;
  width: 172%;
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  animation: 40s linear 0s infinite normal none running loop;
}
.loop__wrap.band-warraper {
  flex-direction: column;
  .loop__wrap__inner {
    flex-direction: column;
    width: 130%;
    animation: 40s linear 0s infinite normal none running loop_animation_vertical;
  }
}
/* .left .loop__wrap.band-warraper .loop__wrap__inner {
  animation: 40s linear 0s infinite reverse none running loop_animation_vertical;
} */
/*---------------------------------------------------------
サイド 左 スクロールに応じて回転するロゴ
---------------------------------------------------------*/
.bg-main {
  align-items: center;
  justify-content: center;
}
.c-character {
  perspective: 1000px;
  height: calc(100vh - 55%);
}
.c-character.item-left {
  align-items: center;
  justify-content: center;
  /* display: flex; */
}
.lotate-logo-warraper {
  width: 18vw;
  max-width: 440px;
  height: calc(100vh - 60%);
}
.rotate-logo {
  width: 100%;
  height: calc(100vh - 60%);
  z-index: 0;
  transform-style: preserve-3d;
  transition: transform 1s ease-in-out;
}
.rotate-logo img {
  position: absolute;
  width: 100%;
  height: auto;
  backface-visibility: hidden;
}
.rotate-logo .back {
  transform: rotateY(180deg);
}
@media only screen and (max-width: 1980px) {
  .c-character {
    height: calc(100vh - 60%);
  }
}
@media only screen and (max-width: 1560px) {
  .c-character {
    height: calc(100vh - 70%);
  }
}
@media only screen and (max-width: 1300px) {
  .c-character {
    height: calc(100vh - 72%);
  }
}
@media only screen and (max-width: 1126px) {
  .c-character {
    height: calc(100vh - 76%);
  }
}
/*---------------------------------------------------------
レスポンシブ
---------------------------------------------------------*/
.pc {
  display: block;
}
.sp {
  display: none;
}
@media only screen and (max-width: 1024px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}
@media only screen and (max-width: 960px) {
  .tab {
    display: none;
  }
  .sp {
    display: block;
  }
  .bg .bg-main {
    padding: 0;
  }
}
#page-top {
  width: 15vw;
  position: fixed;
  right: 3vw;
  bottom: 28vw;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}
#page-top.is-show {
  opacity: 1;
  visibility: visible;
}
@media screen and (min-width: 501px) {
  #page-top {
    width: 80px;
    position: fixed;
    right: 100px;
    bottom: 26px;
    z-index: 1;
  }
}
@media screen and (max-width: 500px) {
  .right {
    padding-right: 0px;
  }
}
@media screen and (max-width: 1440px) {
  .bg {
    .bg-main {
      padding: 0px;
    }
  }
}