@charset "utf-8";

/*---------------------------------
*
*topページ
*
----------------------------------*/
:root {
  --section-inner-z-index: 6;
}

.l-main {
  /* background:url(../img/bg_circle.png) left 50.6% top repeat-y,url(../img/main_bg.png),#fff;
  background-size: 10px auto, 100% auto, auto; */
  container-name: lmain;
  container-type: inline-size;
}

.l-section {
  position: relative;
  z-index: 1;
}

.l-section-inner {
  position: relative;
}

.top-bg {
  /* background: #5BB148; */
  padding-top: 8%;
  background-image: url(../img/top_grass.webp),linear-gradient(to bottom,#fff 0%,#fff 3.5%,#5BB148 3.5%,#5BB148 100%);
  background-color: #000;
  background-repeat: no-repeat;
  background-position: center top;
}


.top-h1 img{
  width: 78.9%;
  margin: 0 auto;
}

/*--------------------
道回り
--------------------*/
.bg-sec-0 {
  padding-top: 8%;
  background-image: url(../img/top_grass.webp),linear-gradient(to bottom,#fff 0%,#fff 50%,#5BB148 50%,#5BB148 100%);
  background-color: #000;
  background-repeat: no-repeat;
  background-position: center top;
}

.bg-road {
  position: relative;
  /* overflow: hidden; */
}

/* .road svg{
  width:603px;
  height:14021px;
} */
.road svg {
  width: 100%;
  height: auto;
}

.road {
  width: 80.4%;
  position: absolute;
  /* top: -2.5%; */
  /* top: 0; */
  left: 9.8%;
  z-index: 1;
  margin-top: -12%;
  /* overflow: hidden; */
}


.road-svg {
  overflow: hidden;
}
.road-svg-sp {
  display: block;
}
.road-svg-pc {
  display: none;
}
@media (max-width: 359px) {
  .road {
    width: 82%;
  }
}

/* @media (min-width: 1100px) {
  .road {
    height: 8500px;
  }
}
@media (min-width: 1600px) {
  .road {
    height: 12000px;
  }
} */

@media (min-width: 1100px) {
  /* .road svg{
    width:603px;
    height:12875px;
  } */
  .road-svg-sp {
    display: none;
  }
  .road-svg-pc {
    display: block;
  }
}

/*--------------------
SNS
--------------------*/
.l-section.sec-top-share {
  /* padding-top: 14%;
  margin-top: -39%;
  margin-bottom: 11.2%; */
  /* background: url(../img/main_bg_first_pc.png) no-repeat  center top / 100% auto; */
}

.intro-share-box {
   width: 82%;
   padding: 7% 5%;
   background: var( --accent-color);
   border-radius: min(9vw,70px) min(2vw,16px) min(9vw,70px) min(2vw,16px);
   border:min(0.8vw,6px) solid var(--border-color);
    position: relative;
}

.intro-share-box .sns-list {
  width: 77%;
}

.intro-share-deco {
  width: 30%;
  position: absolute;
  right: 5%;
  top: 0;
  margin-top: -10%;
}

.share-emphasis {
  font-size: 1.5em;
  color: #ED1955;
  -webkit-text-stroke: max(6px,0.8vw) #fff;
  -webkit-text-fill-color: #ED1955;
  paint-order: stroke fill;
}


.sec-top-share p {
  color: #fff;
  font-size: 1.2rem;
  font-size: clamp(1.4rem,3.4cqw,2.6rem);
  text-align:center;
  line-height: 1.7;
}

.sec-top-share .emphasis {
  color: #fff;
  font-weight: bold;
  font-size: 1.5rem;
  font-size: var(--font-size-16);
  text-align:center;
}

.sec-top-share .sns-list {
  margin: 16px auto 0;
  gap: 8px;
}


@media (min-width: 1100px) {
  .sec-top-share .lets-share-wrap,
  .sec-top-share .sns-list {
    display: none;
  }

  .lets-share-text {
    width: 70%;
    max-width: 227px;
  }

  .sec-about-ttl--sub2 .text{
    font-size: clamp(17px, 2.1vw, 26px);
  }
}/*media*/




@media (min-width: 1100px) {
  .l-main {
    /*overflow: hidden;道の調整のため*/
    /* background:url(../img/bg_circle.png) left 50.6% top repeat-y,url(../img/main_bg_first_pc.png) left top 1080px no-repeat, #fff;
    background-size: 20px auto, 100% auto, auto; */
  }
  .top-bg {
    /* background: url(../img/main_bg.png) center top / 100% auto; */
  }

}/*media*/


/*--------------------
イントロ
--------------------*/
.story-intro {
  width: 86.2%;
  padding-top: 6.4%;
  margin: 0 auto 0;
}

.intro-welcome {
  position: relative;
  background: #5BB148;
}

.intro-bg {
  position: relative;
  z-index: 1;
}

.intro-back-bg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}


.intro-welcome-text {
  width: 100%;
  position: absolute;
  top: 33%;
  left: 0;
  z-index: 4;
  aspect-ratio: 750 / 177;
}

/* .sec-story {
    -webkit-perspective: 1000;
} */

.anim-pota--walk {
  width: 14.4%;
  position: absolute;
  left: 8%;
  top: 22.9789%;
  z-index: 1;
  background: url(../img/pota_anim_walk.webp) top left / auto 100% no-repeat;
  animation: pota_walk 0.7s linear infinite alternate;
  animation-timing-function: steps(6,jump-none);
  aspect-ratio: 122 / 190;
  /* -webkit-transform-style: preserve-3d; */
}

.anim-pota--walk-2 {
  width: 14.4%;
  position:absolute;
  z-index: 2;
  /*たまに横でまったりしていることがあるので記載*/
  top: 76%;
  left: 40%;
  background: url(../img/pota_anim_walk.webp) top left / auto 100% no-repeat;
  animation: pota_walk 0.7s linear infinite alternate;
  animation-timing-function: steps(6,jump-none);
  aspect-ratio: 122 / 190;
}

.anim-pota--walk-3 {
  background: url(../img/pota_anim_walk_campaign.webp) top left / auto 100% no-repeat;

}

@keyframes pota_walk {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top left 100%;
  }
}

/*--------------------
各イベント
--------------------*/

.top-bg .l-section {
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: repeat;
  position: relative;
  z-index: unset;
}

.top-sec-ttl {
  width: 69.3%;
  margin: 0 auto;
  overflow: hidden;
}

.l-section-inner--bg {
  position: relative;
  z-index: 0;
}

.top-sec-group {
  position: relative;
}


.top-sec-group .top-sec-ttl{
  position: relative;
  z-index: 1;
}

.logo-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.top-sec-group .border-box{
  width: 81%;
  padding: 10% 0 0;
  margin: -9% auto 3%;
  position: relative;
  z-index: 0;
}

.term-text .text {
  padding-bottom: 5%;
}


/*-----------------
キャンペーン募集*/
.sec-campaign {
  margin-top: -1px;
  background: url(../img/grass.webp);
  aspect-ratio: 750 / 1506;
}

.sec-campaign::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: url(../img/road_campaign.svg) center top / 100% auto no-repeat; */
  z-index: -1;
}

.l-section-inner--bg--campaign-bottom {
  /* margin-top: -38%; */
  z-index: 0;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.l-section-inner--bg--campaign-bottom img:last-child{
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;

}
.sec-campaign .l-section-inner {
  position: relative;
  z-index: var(--section-inner-z-index);
  padding-bottom: 0;
  margin-top: -81%;
}

.sec-campaign .top-sec-group {
  margin-top: -48%;
}

@media (min-width: 1100px) {
  .l-section-inner--bg--campaign-bottom {
    margin-top: -30%;
  }
}

/*-----------------
ナンバーワン*/

.sec-no1 {
  margin-top: -1px;
  background: url(../img/top_no1_grass_body.webp);
  aspect-ratio: 750 / 1571;
}


.sec-no1 .l-section-inner {
  /* background: url(../img/top_no1_bg_3.webp) center bottom / 100% auto no-repeat; */
  z-index: var(--section-inner-z-index);
  margin-top: -154%;
  /* aspect-ratio: 750 / 543;; */
}

.sec-no1 .l-section-inner--bg {
  /* margin-top: -14%; */
}

.sec-no1 .top-sec-group {
  margin-bottom: 5%;
}

.l-section-inner--bg--no1-bottom {
  z-index: 0;
  margin-top:  -9%;
}

.l-section-inner--bg--no1-bottom img:last-child {
  margin-top: -4%;
}

@media (min-width: 1100px) {
  .l-section-inner--bg--no1-bottom {
    margin-top: -2%;
  }
}
/*-----------------
セール*/
.top-bg .sec-sale {
  margin-top: -1px;
  background: url(../img/top_sale_grass.svg);
  background-color: #FFDB26;
  background-position: center top;
  background-size: 100% auto;
  aspect-ratio: 750 / 1488;
}


.sec-sale .l-section-inner {
  margin-top: -61%;
  z-index: var(--section-inner-z-index);
}

.l-section-inner--bg--sale-bottom {
  margin-top: -21%;
  z-index: 0;
}

/*-----------------
ログインミッション*/
.sec-login {
  margin-top: -1px;
  background: url(../img/top_login_grass_body.webp);
  aspect-ratio: 750 / 1667;
}

.sec-login .l-section-inner--bg--login-top {
  margin-top: 0;
}

.l-section-inner--bg--login-top img:nth-child(2) {
  margin-top: -5%;
}

.sec-login .l-section-inner {
  margin-top: -21%;
  z-index: var(--section-inner-z-index);
  background: url(../img/top_login_bg_3.webp) center top / 100% auto no-repeat;
  aspect-ratio: 750 / 521;
}

.l-section-inner--bg--login-bottom {
  width: 100%;
  margin-top: -53%;
  z-index: 0;
  position: absolute;
  bottom: 0;
  left: 0;
}
@media (min-width: 1100px) {
  .l-section-inner--bg--login-bottom {
  margin-top: -45%;
  }
}
/*-----------------
グッズ*/
.sec-goods {
  background-color: #FF4901;
  aspect-ratio: 750 / 1682;
}

.sec-goods .l-section-inner {
  margin-top: -4%;
  z-index: var(--section-inner-z-index);
  background: url(../img/top_goods_bg_2.webp) center top / 100% auto no-repeat;
  aspect-ratio: 750 / 789;
}

.l-section-inner--bg--goods-bottom {
  width: 100%;
  margin-top: -36%;
  z-index: 0;
  position: absolute;
  bottom: 0;
  left: 0;
}

.l-section-inner--bg--goods-bottom img:last-child {
  position: relative;
  margin-top: -5%;
}

@media (min-width: 1100px) {
  .l-section-inner--bg--goods-bottom {
  margin-top: -49%;
  }
}
/*-----------------
新サービス*/

.sec-service {
  margin-top: -1px;
  background: url(../img/top_service_grass_body.webp);
  aspect-ratio: 750 / 1648;
}


.sec-service .l-section-inner {
  /* margin-top: -21%; */
  padding-bottom: 10%;
  z-index: var(--section-inner-z-index);
  background: url(../img/top_service_bg_2.webp) center top / 100% auto no-repeat;
  aspect-ratio: 750 / 1147;
}

.l-section-inner--bg--service-bottom {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

@media (min-width: 1100px) {
  .sec-service .l-section-inner {
      aspect-ratio: auto;
      padding-bottom: 19%;
  }
  .sec-service .l-section-inner--bg {
    padding-top: 0;
  }
}

@media (min-width: 1600px) {
    .sec-service .l-section-inner--bg {
        padding-top: 5%;
    }
}

/*-----------------
招待キャンペーン*/
.sec-invitation {
  margin-top: -1px;
  background: #FFFCC8;
  aspect-ratio: 750 / 1758;
}


.sec-invitation .l-section-inner--bg img:first-child{
 padding-top: 4%;
}
.sec-invitation .l-section-inner--bg img:last-child{
 margin-top: -10%;
}


.sec-invitation .l-section-inner {
  z-index: var(--section-inner-z-index);
  /* background: url(../img/top_invitation_bg_2.webp) center top / 100% auto no-repeat; */
  aspect-ratio: 750 / 1098;
  margin-top: -144%;
}
.l-section-inner--bg--invitation-bottom {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

@media (min-width: 1100px) {
  .sec-invitation .l-section-inner {
    padding-bottom: 0;
  }
}

@media (min-width: 1600px) {
    .sec-invitation .l-section-inner--bg img:first-child {
        padding-top: 7%;
    }
}

/*-----------------
soon*/
.sec-soon {
  margin-top: -1px;
    background: #ff8801;
}

.sec-soon .l-section-inner {
  z-index: var(--section-inner-z-index);
}

.sec-soon .top-sec-group {
  z-index: 1;
}

.sec-soon .term-text{
  padding-bottom: 5%;
}

.l-section-inner--bg--soon-bottom {
  position: static;
}

@media (min-width: 1100px) {
  .sec-soon .l-section-inner{
    padding-top: 8%;
    padding-bottom: 8%;
  }
}

@media (min-width: 1100px) {
  .top-bg .sec-about {
    position: fixed;
  }
}


/*--------------------------
ローディング
---------------------------*/
.loading {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #F7F8C1;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row nowrap;
  opacity: 0;
  visibility: hidden;
    transition: 1s opacity 0s linear, 0.5s visibility 0.9s linear;

}

.loading.is-active {
  display: flex;
  opacity: 1;
  visibility: visible;
}


.loading-inner {
  display: inline-block;
  width: 115px;
  height: 135px;
  position: relative;
}

.loading-img {
  width: 115px;
  margin-top: 10px;
}

.loading-text {
  width: 62px;
  position: absolute;
  right: 0;
  top: 0;
  animation: loading-text 1s 0s step-end infinite;
  transform: translateX(100%);
}

@keyframes loading-text {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.loading-inner.is-end {
  width: auto;
  height: auto;
}

.loading-inner.is-end .loading-text {
  display:none;
}

.loading-inner.is-end .loading-img {
  width: 115px;
  margin-top: 0;
  animation: loading-end 1.5s 0s linear 1;
  animation-fill-mode: both;
}

@keyframes loading-end {
  0% {
    transform: rotate(0deg) scale(1);
  }

  100% {
    transform: rotate(720deg) scale(2.5);
  }
}