@charset "utf-8";
/* CSS Document */
/* friend.css */
.content__title {
  padding-bottom: clamp(10px,calc(20 / 750 * 100vw),20px);
}
.friend-catch {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: flex-end;
  align-items: flex-end;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  gap: clamp(0px,calc(25 / 750 * 100vw),25px);
  margin: 0 auto clamp(20px,calc(40 / 750 * 100vw),40px);
}
.friend-catch .friend-catch__dec--01 ,
.friend-catch .friend-catch__dec--02 {
  width: clamp(20px,calc(40 / 750 * 100vw),40px);
  margin: 0;
}
.friend-catch .friend-catch__text {
  --fs: 30;
  font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  line-height: calc(50 / 30 * 1em);
  font-weight: 500;
}
.friend-catch__text span {
  color: #387d39;
}

.friend-exp {
  display: block;
  position: relative;
  margin: 0 auto 0;
  box-sizing: border-box;
  padding: 0 0 clamp(45px,calc(90 / 750 * 100vw),90px);
}
.friend-exp .friend-exp__table {
  width: calc(660 / 750 * 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  border: clamp(2px,calc(4 / 750 * 100vw),4px) solid #387d39;
  border-radius: clamp(10px,calc(20 / 750 * 100vw),20px);
  background: #387d39;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
}
.friend-exp__item {
  width: 50%;
  text-align: center;
  background: #387d39;
  margin: 0;
  box-sizing: border-box;
  padding: clamp(30px,calc(30 / 750 * 100vw),30px) clamp(30px,calc(30 / 750 * 100vw),30px) clamp(25px,calc(50 / 750 * 100vw),50px);
  color: #fff;
}
.friend-exp__item--you {
  background-color: #fff;
  color: #387d39;
}
.friend-exp .friend-exp__table .friend-exp__item dt {
  display: block;
  --fs:30;
  font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  font-weight: 500;
  border-bottom: clamp(1px,calc(2 / 750 * 100vw),2px) solid;
  width: 100%;
  margin: 0 auto;
  padding-bottom:  clamp(5px,calc(10 / 750 * 100vw),10px);
}
.friend-exp__item dd {
  --fs:40;
  font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  font-weight: 500;
  white-space: nowrap;
  word-break: keep-all;
}
.friend-exp__item dd span {
  font-size: calc(70 / 40 * 1em);
  font-weight: 500;
}
.friend-exp .friend-exp__table .friend-exp__item {
  position: relative;
  z-index: 2;
}
.friend-exp .friend-exp__image {
  position: absolute;
  bottom: 0;
  width: clamp(62px,calc(125 / 750 * 100vw),125px);
  z-index: 3;  
}
.friend-exp .friend-exp__image--01 {
  left: calc(145 / 750 * 100%);
}
.friend-exp .friend-exp__image--02 {
  right: calc(145 / 750 * 100%);
}
@media screen and (min-width:750px){
  
  .content__title {
    padding-bottom: 0;
  }
  .content__title .titlespell {
    margin: 20px auto;
  }
  .friend-catch .friend-catch__text {
    font-size: 22px;
  }
  .friend-catch .friend-catch__text br {
    display: none;
  }
  .friend-catch {
    gap: 10px;
    margin-bottom: 20px;
  }
  .friend-catch .friend-catch__dec--01, .friend-catch .friend-catch__dec--02 {
    width: 20px;
  }
  
  .friend-exp {
    max-width: 820px;
    padding-bottom: 80px;
  }
  .friend-exp .friend-exp__table {
    width: 600px;
    border-radius: 20px;
    border-width: 4px;
  }
  .friend-exp .friend-exp__table .friend-exp__item {
    padding: 20px 30px 20px;
  }
  
  .friend-exp .friend-exp__table .friend-exp__item dt {
    font-size: 22px;
    padding-bottom: 10px;
  }
  .friend-exp__item dd {
    font-size: 30px;
  }
  .friend-exp__item dd span {
    font-size: 50px;
  }
  .friend-exp .friend-exp__image--01 {
    left: 0;
    width: clamp(120px,calc(150 / 820 * 100vw),150px)
  }
  .friend-exp .friend-exp__image--02 {
    right: 0;
    width: clamp(120px,calc(150 / 820 * 100vw),150px)
  }
}


/*--------------------------------------------*/
.rewards__box {
  box-sizing: border-box;
  background: #fff;
  width: 100%;
  border-radius: clamp(10px,calc(20 / 750 * 100vw),20px);
  position: relative;
  padding: clamp(25px,calc(50 / 750 * 100vw),50px) clamp(15px,calc(30 / 750 * 100vw),30px);
  margin: clamp(20px,calc(40 / 750 * 100vw),40px) auto;
}
.titlespell + .rewards__box {
  margin-top: clamp(30px,calc(60 / 750 * 100vw),60px);
}
.rewards__box .rewards__title {
  text-align: center;
  border-radius: clamp(5px,calc(10 / 750 * 100vw),10px);
  border: 1px solid #387d39;
  color: #387d39;
  --fs:30;
  font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  padding: clamp(5px,calc(10 / 750 * 100vw),10px);
  font-weight: 500;
}
.rewards__box .rewards__title--friend {
  color: #fff;
  background: #387d39;
}
.rewards__box .rewards__list {
  --fs:26;
  font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  line-height: calc(46 / 26 * 1em);
  margin: clamp(15px,calc(30 / 750 * 100vw),30px) auto;
}
.rewards__box .rewards__list--hasnotes {
  margin-bottom: clamp(10px,calc(20 / 750 * 100vw),20px);
}
.rewards__box .rewards__list li {
  list-style: none;
  text-indent: -1em;
  padding-left: 1em;
  text-align: justify;
}
.rewards__box .rewards__pricetitle {
  text-align: center;
  --fs:26;
  font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  border-bottom: clamp(1px,calc(2 / 750 * 100vw),2px) solid;
  color: #387d39;
  font-weight: 500;
  box-sizing: border-box;
  line-height: 1em;
  padding: clamp(10px,calc(20 / 750 * 100vw),20px);
  margin: clamp(15px,calc(30 / 750 * 100vw),30px) auto;
}
.rewards__box .rewards__price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content:center;
  width: 100%;
  margin: clamp(10px,calc(20 / 750 * 100vw),20px) auto;
}
.rewards__priceitem {
  width: calc(100% / 3);
  box-sizing: border-box;
  border: 1px solid transparent;
  padding: 0 clamp(10px,calc(20 / 750 * 100vw),20px) clamp(10px,calc(20 / 750 * 100vw),20px);
  --setcolor: #387d39;
}
.rewards__priceitem__name {
  position: relative;
  display: block;
  margin: 0 auto;
  border-radius: 100svh;
  background: var(--setcolor);
  color: #fff;
  text-align: center;
 --fs: 24;
 font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  line-height: 1em;
  padding: clamp(5px,calc(10 / 750 * 100vw),10px);
}
.rewards__priceitem--8set {
  --setcolor: #b99642;
}
.rewards__priceitem--12set {
  --setcolor: #d78441;
  border-left: 1px solid #d7cfc6;
  border-right: 1px solid #d7cfc6;
}
.rewards__priceitem--16set {
  --setcolor: #387d39;
}
.rewards__priceitem__text {
  --fs:22;
  font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  line-height: calc(28 / 22 * 1em);
  text-align: center;
  margin: clamp(10px,calc(20 / 750 * 100vw),20px) auto;
}
.rewards__priceitem__text span {
  position: relative;
  display: inline-block;
  margin: 0 auto;
}
.rewards__priceitem__text span:before {
  content: "";
  display: block;
  background: #231815;
  width: 110%;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0) rotate(10deg);
}
.rewards__priceitem__times {
  text-align: center;
  margin: 0 auto clamp(5px,calc(10 / 750 * 100vw),10px);
}
.rewards__priceitem__times span {
  display: inline-block;
  --fs: 24;
  font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  font-weight: 500;
  box-sizing: border-box;
  padding: 0 clamp(5px,calc(10 / 750 * 100vw),10px);
  border-bottom: clamp(1px,calc(2 / 750 * 100vw),2px) solid var(--setcolor);
  color:  var(--setcolor);
}
.rewards__priceitem__price {
  text-align: center;
  color: var(--setcolor);
}
.rewards__priceitem__isshoku {
  --fs:22;
  font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  border: 1px solid;
  display: block;
  margin: 0 auto;
  max-width: clamp(65px,calc(130 / 750 * 100vw),130px);
  box-sizing: border-box;
  padding: .3em 0 .2em;
  font-weight: 500;
  line-height: 1em;
}
.rewards__priceitem__price {
  --fs: 30;
  font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  font-weight: 500;
}
.rewards__priceitem__num {
  --fs:60;
  font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  font-weight: 500;
  line-height: 1.1em;
}
.rewards__box .rewards__notes {
  --fs:18;
  font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  line-height: calc(30 / 18 * 1em);
}
.friend--2nd {
  opacity: 0.68;
  display: block;
  margin: clamp(10px,calc(20 / 750 * 100vw),20px) auto 0;
}
.friend--2nd .rewards__priceitem__times span {
 --fs:20;
}
.friend--2nd .rewards__priceitem__isshoku {
  --fs:20;
  max-width: clamp(55px,calc(110 / 750 * 100vw),110px);
  margin-bottom: clamp(5px,calc(10 / 750 * 100vw),10px);
}
.friend--2nd .rewards__priceitem__price {
  --fs:20;
}
.friend--2nd .rewards__priceitem__num {
  --fs:30;
}



@media screen and (min-width:750px){
  .titlespell + .rewards__box {
    margin-top: 40px;
  }
  .rewards__box {
    padding: 50px;
    border-radius: 20px;
  }
  .rewards__box .rewards__title {
    font-size: 22px;
    line-height: 1em;
    padding: 18px;
  }
  .rewards__box .rewards__list {
    font-size: 16px;
    line-height: calc(36 / 16 * 1em);
    margin: 20px auto;
  }
  .rewards__box .rewards__pricetitle{
    font-size: 20px;
    max-width: 780px;
    margin: 30px auto;
  }
  
  .rewards__box .rewards__price {
    max-width: 850px;
  }
  .rewards__priceitem {
    padding: 0 30px 20px;
  }
  .rewards__priceitem__name {
    font-size: 18px;
    padding: 8px;
  }
  .rewards__priceitem__text {
    font-size: 18px;
    margin: 20px auto 10px;
  }
  .rewards__priceitem__text br {
    display: none;
  }
  .rewards__priceitem__text span {
    display: inline-block;
    margin: 0 auto 0 1em;
  }
  .rewards__priceitem__isshoku {
    font-size: 14px;
    display: inline-block;
    margin: 0 0 4px;
    padding: 6px 10px;
  }
  .rewards__priceitem__price {
    font-size: 22px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: flex-end;
    align-items: flex-end;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    gap: 0px;
  }
  .rewards__priceitem__num {
    font-size: 40px;
    display: inline-block;
    line-height: 1em;
    padding-left: 20px;
    box-sizing: border-box;
  }
  .rewards__box .rewards__notes {
    font-size: 14px;
    line-height: calc(24 / 14 * 1em);
  }
  .rewards__box .rewards__price + .rewards__notes {
    text-align: center;
  }
  .rewards__priceitem__times {
    margin: 0 auto 5px;
  }
  .rewards__priceitem__times span {
    font-size: 18px;
  }
  .friend--2nd .rewards__priceitem__times span {
    font-size: 16px;
  }
  .friend--2nd .rewards__priceitem__isshoku {
    font-size: 12px;
    margin-bottom: 6px;
    padding: 3px 5px;
  }
  .friend--2nd .rewards__priceitem__price {
    font-size: 18px;
  }
  .friend--2nd .rewards__priceitem__num {
    font-size: 34px;
    padding-left: 10px;
  }
}

.flow {
 margin: clamp(40px,calc(80 / 750 * 100vw),80px) auto clamp(5px,calc(10 / 750 * 100vw),10px);
}
.flow__list {
  margin-top: clamp(20px,calc(40 / 750 * 100vw),40px);
}



@media screen and (min-width:750px){
  .flow {
    margin: 100px auto 40px;
  }
  .flow__list {
    margin: 40px auto;
  }
}