@charset "UTF-8";

body{
  font-family: 'GenJyuuGothic';
  font-weight: 700;
  color: #703600;
}

#content {
  position: relative;
  background: url(../common/img/bg-blue.png) repeat center / 500px auto;
}
#content::before{
  position: absolute;
  content: "";
  bottom: 0;
  right: clamp(190px, 18.75vw , 300px);
  width: clamp(85px, 8.13vw , 130px);
  aspect-ratio: 260 / 210;
  background: url(../friends/img/friends-bottom02.png) no-repeat center / cover;
}

#globalFooter{
  position: relative;
}
#globalFooter::before{
  position: absolute;
  content: "";
  top: clamp(-130px, -8.45vw, -92px);
  left: 6%;
  width: clamp(142px, 13.44vw , 215px);
  aspect-ratio: 430 / 322;
  background: url(../friends/img/friends-bottom01.png) no-repeat bottom / contain;
}

@media (max-width: 480px) {
  #globalFooter::before{
    top: -62px;
    width: 100px;
  }
  #content{
    background-size: 100px auto;
  }
  #content::before{
    right: 20px;
    width: 65px;
  }
}


/* ----------------------------
ページタイトル
---------------------------- */
.page-head {
  margin-bottom: 60px;
  padding: 6% 20px 12%;
  text-align: center;
  background: url(../common/img/bg-pagettl__white.png) no-repeat center top / 100% 100%;
  box-sizing: border-box;
}
.page-head-ttl {
  position: relative;
  display: inline-block;
  padding-inline: 13.75%;
  font-weight: 900;
  font-family: "M PLUS Rounded 1c", sans-serif;
  color: #703600;
  text-align: center;
  line-height: 1;
}
.page-head-ttl::before,
.page-head-ttl::after {
  position: absolute;
  content: "";
  background: no-repeat center / contain;
}
.page-head-ttl::before {
  top: -15%;
  left: 3.5%;
  width: 15.4%;
  aspect-ratio: 310 / 382;
  background-image: url(./img/page-ttl-deco__left.png);
}
.page-head-ttl::after {
  top: -35%;
  right: 0;
  width: 17.9%;
  aspect-ratio: 358 / 434;
  background-image: url(./img/page-ttl-deco__right.png);
}

.page-head-ttl .ttl-ja {
  font-size: clamp(20px, 2vw , 33px);
  letter-spacing: 0.05em;
}
.page-head-ttl .ttl-en {
  display: block;
  margin-top: 15px;
  font-size: clamp(45px, 4.38vw , 70px);
}

@media (max-width: 480px) {
  .page-head {
    margin-bottom: 30px;
    padding: 10% 20px 20%;
    background-size: cover;
  }
  .page-head-ttl {
    display: block;
    padding-inline: 0;
  }
  .page-head-ttl::before {
    left: -3%;
    top: 80%;
    transform: translateY(-50%);
    width: 18%;
    background-image: url(./img/page-ttl-deco__left-sp.png);
    aspect-ratio: 222 / 510;
  }
  .page-head-ttl::after {
    top: 80%;
    transform: translateY(-50%);
    right: -3%;
    width: 18%;
    background-image: url(./img/page-ttl-deco__right-sp.png);
    aspect-ratio: 246 / 600;
  }

  .page-head-ttl .ttl-ja {
    font-size: 16px;
  }
  .page-head-ttl .ttl-en {
    margin-top: 8px;
    font-size: 34px;
  }
}

/* ----------------------------
ラン＆ラブと仲間たち　トップ
---------------------------- */
.friends{
  padding-block: 0 200px;
  text-align: center;
  z-index: 1;
}
.friends-intro{
  font-size: 18px;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
.friends-list{
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 40px;
}
.friends-item{
  display: flex;
  flex-flow: column;
  width: calc((100% - 102px) / 4);
  border-radius: 15px;
  box-shadow: 7px 7px 0px 0px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: #703600;
}
a.friends-item:hover{
  transform: translateY(-20px);
  opacity: 0.8;
}
.friends-item-img{
  width: 100%;
  border-radius: 15px 15px 0 0;
}
.friends-item-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px 15px 0 0;
}
.friends-item-txtbox{
  min-height: 130px;
  flex: 1;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 10px;
  background: #fff;
  border-radius: 0 0 15px 15px;
  box-sizing: border-box;
  transition: .3s;
}
.friends-name{
  margin-bottom: 10px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  transition: font-size .3s;
}
.friends-name .friends-name-small{
  font-size: 0.75em;
}
.friends-txt{
  font-size: 14px;
  line-height: 1.5;
  transition: .3s;
}


@media (max-width: 480px) {
  .friends{
    padding-block: 0 90px;
  }
  .friends-intro{
    font-size: 14px;
  }
  .friends-list{
    gap: 20px;
    margin-top: 30px;
  }
  .friends-item{
    width: calc((100% - 20px) / 2);
  }
  .friends-item-img{
    border-radius: 10px;
  }
  .friends-item-img img{
    border-radius: 10px;
  }
  .friends-item-txtbox{
    min-height: auto;
    padding: 20px 10px;
    border-radius: 0 0 10px 10px;
  }
  .friends-name{
    font-size: 16px;
  }
  .friends-txt{
    font-size: 12px;
  }
}


/* ----------------------------
ラン＆ラブと仲間たち　詳細
---------------------------- */
.friends-detail{
  padding-block: 0 200px;
  background: url(/runandlove/friends/img/detail-bg-cloud.png) no-repeat top / contain;
}
.detail-profile{
  position: relative;
  padding-inline: 30%;
  padding-bottom: 100px;
}
.detail-profile::before,
.detail-profile::after{
  position: absolute;
  content: "";
  background: no-repeat center / contain;
  animation: fuwafuwa 1s ease-in-out infinite alternate;
}
.detail-profile::before{
  top: 175px;
  left: 5%;
  width: 8.2%;
  aspect-ratio: 164 / 144;
  background-image: url(/runandlove/friends/img/detail-bard.png);
  animation-delay: -1s;
}
.detail-profile::after{
  top: 40px;
  right: 6%;
  width: 10.3%;
  aspect-ratio: 206 / 168;
  background-image: url(/runandlove/friends/img/detail-butterfly.png);
}
.detail-profile-img{
  border-radius: 10px;
  border: solid 3px #fff;
}
.detail-profile-img img{
  border-radius: 10px;
}
.detail-profile-ttl{
  margin-top: 25px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}
.detail-profile-txt{
  margin-top: 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.detail-story{
  position: relative;
  margin-block: 127px 100px;
  padding-inline: 100px;
  background: url(/runandlove/friends/img/detail-story-bg.png) repeat-y center / 100%;
}
.detail-story::before,
.detail-story::after{
  position: absolute;
  content: "";
  left: 0;
  width: 100%;
  background: no-repeat center / contain;
}
.detail-story::before{
  aspect-ratio: 1000 / 127;
  top: -120px;
  background-image: url(/runandlove/friends/img/detail-story-bg__top.png);
}
.detail-story::after{
  aspect-ratio: 1000 / 110;
  bottom: -100px;
  background-image: url(/runandlove/friends/img/detail-story-bg__bottom.png);
}
.story-ttl{
  position: absolute;
  top: -187px;
  left: 0;
  right: 0;
  padding-top: 35px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 900;
  text-align: center;
}
.story-ttl::before,
.story-ttl::after{
  position: absolute;
  content: "";
  bottom: 0;
  background: no-repeat center / contain;
}
.story-ttl::before{
  left: 8.5%;
  width: 13.9%;
  aspect-ratio: 278 / 230;
  background-image: url(/runandlove/friends/img/detail-story-ttl__left.png);
}
.story-ttl::after{
  right: 13.5%;
  width: 10.4%;
  aspect-ratio: 208 / 230;
  background-image: url(/runandlove/friends/img/detail-story-ttl__right.png);
}
.story-ttl .ttl-en{
  display: block;
  font-size: 55px;
  line-height: 1.2;
}
.story-ttl .ttl-jp{
  margin-top: 10px;
  font-size: 22px;
  line-height: 1.3;
}

.story-item{
  position: relative;
  width: 47%;
  margin-top: -60px;
}
.story-item.--main{
  width: 100%;
  margin-top: 50px;
}
.story-item:nth-child(1){
  margin-top: 0;
}
.story-item:nth-child(2n){
  margin-left: auto;
}
.story-item .story-item-img{
  aspect-ratio: 1 / 1;
}
.story-fukidashi{
  position: absolute;
  background: no-repeat center / contain;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px;
  font-size: 22px;
  text-align: center;
  box-sizing: border-box;
  line-height: 1.4;
}
.story-fukidashi.--orange{
  top: 18px;
  right: -210px;
  width: 250px;
  aspect-ratio: 500 / 354;
  transition-delay: 0.5s;
  background-image: url(/runandlove/friends/img/detail-fukidashi-orange.png);
}
.story-fukidashi.--green{
  top: 63px;
  left: -232px;
  width: 258px;
  aspect-ratio: 518 / 388;
  transition-delay: 0.5s;
  background-image: url(/runandlove/friends/img/detail-fukidashi-green.png);
}
.story-fukidashi.--pink{
  top: 73px;
  right: -235px;
  width: 253px;
  aspect-ratio: 506 / 370;
  background-image: url(/runandlove/friends/img/detail-fukidashi-pink.png);
  transition-delay: 0.5s;
}
.story-fukidashi.--blue{
  top: -140px;
  right: 10px;
  width: 250px;
  aspect-ratio: 500 / 330;
  background-image: url(/runandlove/friends/img/detail-fukidashi-blue.png);
  transition-delay: 0.5s;
}

.friends-detail .m-btn{
  padding-top: 60px;
}


@media (max-width: 480px) {
  .friends-detail{
    padding-block: 0 90px;
  }
  .detail-profile{
    padding-bottom: 60px;
    padding-inline: 15%;
  }
  .detail-profile::before{
    top: 130px;
    left: 0;
    width: 10%;
  }
  .detail-profile::after{
    top: 80px;
    right: -4%;
    width: 15%;
  }
  .detail-profile-ttl{
    margin-top: 15px;
    font-size: 24px;
  }
  .detail-profile-txt{
    margin-top: 6px;
    font-size: 15px;
  }
  .detail-story{
    padding-top: 40px;
    padding-bottom: 0;
    padding-inline: 5%;
    margin-block: 7.94vw 6.88vw;
  }
  .detail-story::before{
    top: -11vw;
  }
  .detail-story::after{
    bottom: -9.2vw;
  }
  .story-ttl{
    top: -24.5vw;
  }
  .story-ttl::before,
  .story-ttl::after{
    bottom: -10%;
  }
  .story-ttl::before{
    left: -5%;
    width: 17%;
  }
  .story-ttl::after{
    right: -3%;
    width: 14%;
  }
  .story-ttl .ttl-en{
    font-size: 33px;
  }
  .story-ttl .ttl-jp{
    font-size: 15px;
  }
  .story-item{
    width: 50%;
    margin-top: -10px;
  }
  .story-item.--main{
    margin-top: 60px;
  }
  .story-fukidashi{
    padding: 10px;
    font-size: 13px;
  }
  .story-fukidashi.--orange{
    top: 10px;
    right: -80%;
    width: 90%;
  }
  .story-fukidashi.--green{
    top: 0;
    bottom: 0;
    left: -80%;
    width: 90%;
  }
  .story-fukidashi.--pink{
    top: 20px;
    right: -80%;
    width: 90%;
  }
  .story-fukidashi.--blue{
    top: -70px;
    right: 0;
    width: 45%;
  }
  .friends-detail .m-btn{
    margin-top: 0;
    padding-top: 45px;
  }
}