@charset "UTF-8";
.sec_01 {
  margin-top: min(176px,calc(176/1400*100vw));
}
.sec_02 a {
  opacity: 1;
  transition: .3s ease;
}
.sec_02 a:hover {
  opacity: .8;
  transition: .3s ease;
}
.sec_03 a {
  opacity: 1;
  transition: .3s ease;
}
.sec_03 a:hover {
  opacity: .8;
  transition: .3s ease;
}

.heading_03 {
    text-align: center;
    margin: 0 0 77px;
    line-height: 1.25;
}
.heading_03__ruby {
    display: block;
    font-family: ryo-text-plusn, serif;
    font-size: 1.6rem;
    margin: 4px 0 15px;
    line-height: 1.6;
    letter-spacing: 2.5px;
}
main .heading_04 {
    font-size: 3.4rem;
    line-height: 1.3;
    letter-spacing: 3px;
    margin-bottom: 40px;
}
main .text--tiny_gray {
  font-size: 1.6rem;
}
button:focus, select:focus {
	outline:0;
}
.text_box .btn--grad__text {
    font-family: "Hiragino Kaku Gothic ProN", sans-serif;
    font-size:1.3rem;
}
.sec_02 {
  margin-top: 11.4rem;
  padding-bottom: 9.6rem;
}
.sec__title {
  text-align: center;
}
.present_wrap {
  max-width: 1000px;
  width: 71.43%;
  display: flex;
  margin: 77px auto 50px;
  gap: 0 40px;
}
.present_wrap .present_item {
  max-width: 480px;
  width: 48%;
  max-height: 480px;
  height: 100%;
  padding: 37px 0;
  background-size: cover;
  background-position: center;
}
.present_wrap .present_item._01 {
  background-image: url(../../img/friendship/present_01_bg.png);
}
.present_wrap .present_item._02 {
  background-image: url(../../img/friendship/present_02_bg.png);
}
.present_wrap .present_item .present_title {
  max-width: 193px;
  width: 38.4%;
  margin: 0 auto;
}
.present_wrap .present_item._01 .present_img {
  max-width: 316px;
  width: 66.6%;
  margin: min(42px,calc(42/1400*100vw)) auto 0;
}
.present_wrap .present_item._02 .present_img {
  max-width: 251px;
  width: 52.2%;
  margin: min(15px,calc(15/1400*100vw)) auto 0;
}
.present_wrap .present_item .present_text {
  font-size: min(18px,calc(18/1400*100vw));
  line-height: calc(30/18);
  text-align: center;
  letter-spacing: 0.12rem;
  padding: 0 min(10px,calc(10/1400*100vw));
}
.present_wrap .present_item .present_text p {
  color: #121212;
}
.present_wrap .present_item._01 .present_text {
  margin-top: min(40px,calc(40/1400*100vw));
}
.present_wrap .present_item._02 .present_text {
  margin-top: min(20px,calc(20/1400*100vw));
}
.sec02__text {
  text-align: center;
}
.sec02__text .main_text {
  font-family: ryo-text-plusn, serif;
  font-size: min(24px,calc(24/1400*100vw));
  line-height: calc(44/24);
  letter-spacing: 2px;
  color: #121212;
  position: relative;
  display: inline; 
  background:linear-gradient(transparent 70%, #f9dcd5 0%);
}
.sec02__text .content_text {
  font-size: min(18px,calc(18/1400*100vw));
  line-height: calc(36/18);
  letter-spacing: 1.5px;
  color: #121212;
}
.sec02__text .content_text a {
  text-decoration: underline;
}

.sec_03 {
  background-color: #f5f5f5;
  padding: 11.6rem 0 7.9rem;
  overflow: hidden;
}
.stepSwiper {
  overflow: visible;
  max-width: 480px;
  width: 34.3%;
  position: relative;
  left: max(-260px,calc(-260/1400*100vw));
}
.step_wrap {
  display: flex;
  margin-top: min(80px,calc(80/1400*100vw));
}
.step_wrap .step_item {
  max-width: 480px;
  width: 34.3%;
  max-height: 453px;
  height: calc(453/1400*100vw);
  background-color: #fff;
}
.step_wrap .step_item .step_title {
  max-width: 80px;
  max-height: 80px;
  width: 16.6%;
  height: auto;
  margin: min(22px,calc(22/1400*100vw))  auto 0;
}
.step_wrap .step_item._01 .step_img {
  max-width: 203px;
  width: 42.2%;
  margin: min(14px,calc(14/1400*100vw)) auto 0;
}
.step_wrap .step_item._02 .step_img {
  max-width: 153px;
  width: 31.8%;
  margin: min(57px,calc(57/1400*100vw))  auto min(47px,calc(47/1400*100vw));
}
.step_wrap .step_item._03 .step_img {
  max-width: 392px;
  width: 81.4%;
  margin: min(19px,calc(19/1400*100vw))  auto max(-4px,calc(-4/1400*100vw));
}
.step_wrap .step_item._04 .step_img {
  max-width: 430px;
  width: 89.3%;
  margin: max(-20px,calc(-40/1400*100vw)) auto 0;
  position: relative;
  left: min(16px,calc(16/1400*100vw));
}
.step_wrap .step_item .step_text {
  padding: 0 min(45px,calc(45/1400*100vw));
  margin-top: min(20px,calc(20/1400*100vw));
}
.step_wrap .step_item .step_text p {
  font-size: min(16px,calc(16/1400*100vw));
  line-height: calc(24/16);
  letter-spacing: 0.12rem;
}
.sec_03 .btn--grad {
  max-width: 316px;
  margin: 93px auto 0;
  padding: 10px 37px 10px 74px;
  display: block;
}
.btn--grad .btn--grad__text {
  font-size: 1.3rem;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", MS PGothic, sans-serif;
}

.sec_04 {
  padding: 11.6rem 0 11rem;
}
.sec_04 .heading_04 {
  font-size: 2.8rem;
  margin-top: 1rem;
}
.qa_area {
  max-width: 1074px;
  width: 76.71%;
  margin: 0 auto;
  position: relative;
  top: 15px;
}

.qa_note {
  max-width: 1000px;
  width: 71.43%;
  margin: 65px auto 0;
  border: 1px solid #c8c8c8;
}
.qa_note .note_title {
  font-size: 18px;
  text-align: center;
  margin: 25px 0 0;
  letter-spacing: 2px;  
}
.qa_note .note_text {
  font-size: 10px;
  line-height: calc(20/10);
  padding: 0 34px;
  margin-top: 19px;
  margin-bottom: 23px;
}
.sec_04 .btn--grad {
  max-width: 316px;
  margin: 58px auto 0;
  padding: 10px 37px 10px 74px;
  display: block;
}

@media screen and (max-width:767px){
  .sec_01 {
    margin-top: calc(148/750*100vw);
  }
  .heading_03 {
    text-align: center;
    margin: 0 0 23px;
    line-height: 1.1;
    font-size: 3.7rem;
  }
  .heading_03__ruby {
    display: block;
    font-family: ryo-text-plusn, serif;
    font-size: 1rem;
    margin: 1px 0 15px;
    line-height: 1.6;
    letter-spacing: 2.5px;
  }
  main .heading_04 {
    font-size: 2.3rem;
    line-height: 1.3;
    letter-spacing: 3px;
    margin-top: 13px;
    margin-bottom: 35px;
  }
  main .text--tiny_gray {
    font-size: 1.6rem;
  }
  button:focus, select:focus {
    outline:0;
  }
  .text_box .btn--grad__text {
    font-family: "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: 1.3rem;
  }
  .sec_02 {
    margin-top: 4.2rem;
    padding-bottom: 7.3rem;
  }
  .sec__title {
    text-align: center;
  }
  .present_wrap {
    max-width: 100%;
    width: calc(534/750*100vw);
    display: flex;
    flex-direction: column;
    margin: 35px auto 32px;
    gap: 25px 0;
    
  }
  .present_wrap .present_item {
    max-width: 100%;
    width: 100%;
    max-height: 100%;
    height: 100%;
    padding: 20px 0;
    background-size: cover;
    background-position: center;
  }
  .present_wrap .present_item._01 {
    background-image: url(../../img/friendship/present_01_bg.png);
  }
  .present_wrap .present_item._02 {
    background-image: url(../../img/friendship/present_02_bg.png);
  }
  .present_wrap .present_item .present_title {
    max-width: 100%;
    width: calc(217/750*100vw);
    margin: 0 auto;
  }
  .present_wrap .present_item._01 .present_img {
    max-width: 100%;
    width: calc(355/750*100vw);
    margin: calc(46/750*100vw) auto 0;
  }
  .present_wrap .present_item._02 .present_img {
    max-width: 100%;
    width: calc(288 / 750 * 100vw);
    margin: calc(16/750*100vw) auto 0;
  }
  .present_wrap .present_item .present_text {
    font-size: calc(20/750*100vw);
    line-height: calc(32/20);
    text-align: center;
    letter-spacing: 0.12rem;
    padding: 0 calc(18/750*100vw);
  }
  .present_wrap .present_item .present_text p {
    color: #121212;
  }
  .present_wrap .present_item._01 .present_text {
    margin-top: calc(42/750*100vw);
  }
  .present_wrap .present_item._02 .present_text {
    margin-top: calc(16/750*100vw);
  }
  .sec02__text {
    text-align: center;
  }
  .sec02__text .main_text {
    font-family: ryo-text-plusn, serif;
    font-size: calc(28/750*100vw);
    line-height: calc(44/28);
    letter-spacing: 1px;
    color: #121212;
    position: relative;
    display: inline; 
    background:linear-gradient(transparent 70%, #f9dcd5 0%);
  }
  .sec02__text .content_text {
    font-size: calc(20/750*100vw);
    line-height: calc(36/20);
    letter-spacing: 1.5px;
    color: #121212;
    margin-top: calc(30/750*100vw);
  }
  .sec02__text .content_text a {
    text-decoration: underline;
  }

  .sec_03 {
    background-color: #f5f5f5;
    padding: 4.1rem 0 5.4rem;
    overflow: hidden;
  }
  .stepSwiper {
    overflow: visible;
    max-width: 100%;
    width: calc(540/750*100vw);
    position: relative;
    left: 0;
  }
  .step_wrap {
    display: flex;
    margin-top: min(80px,calc(80/1400*100vw));
  }
  .step_wrap .step_item {
    max-width: 100%;
    width: calc(540/750*100vw);
    max-height: 100%;
    height: calc(516/750*100vw);
    background-color: #fff;
  }
  .step_wrap .step_item .step_title {
    max-width: 80px;
    max-height: 80px;
    width: 16.6%;
    height: auto;
    margin: calc(27/750*100vw) auto 0;
  }
  .step_wrap .step_item._01 .step_img {
    max-width: 100%;
    width: 42.2%;
    margin: 8px auto 0;
  }
  .step_wrap .step_item._02 .step_img {
    max-width: 153px;
    width: 31.8%;
    margin: calc(54/750*100vw)  auto
  }
  .step_wrap .step_item._03 .step_img {
    max-width: 392px;
    width: 81.4%;
    margin: calc(16/750*100vw)  auto;
  }
  .step_wrap .step_item._04 .step_img {
    max-width: 430px;
    width: 89.3%;
    margin: calc(-22/750*100vw) auto 0;
    position: relative;
    left: calc(22/750*100vw);
  }
  .step_wrap .step_item .step_text {
    padding: 0 calc(54/750*100vw);
    margin-top: calc(20/750*100vw);
  }
  .step_wrap .step_item .step_text p {
    font-size: calc(18/750*100vw);
    line-height: calc(27/18);
    letter-spacing: 0.12rem;
  }
  .sec_03 .btn--grad {
    max-width: 100%;
    width: calc(540 / 750 * 100vw);
    margin: calc(106/750*100vw) 0 0 calc(104/750*100vw);
    padding: calc(22/750*100vw) calc(72/750*100vw) calc(22/750*100vw) calc(106/750*100vw);
    display: block;
  }
  .btn--grad .btn--grad__text {
    font-size: calc(26/750*100vw);
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", MS PGothic, sans-serif;
  }

  .sec_04 {
    padding: 4.6rem 0 7rem;
  }
  .sec_04 .heading_04 {
    font-size: 2.4rem;
    margin-top: 1.2rem;
  }
  .qa_area {
    max-width: 100%;
    width: 82.71%;
    margin: 0 auto;
    position: relative;
    top: -4px;
  }

  .qa_note {
    max-width: 100%;
    width: 82.43%;
    margin: 15px auto 0;
    border: 1px solid #c8c8c8;
  }
  .qa_note .note_title {
    font-size: calc(18/750*100vw);
    text-align: center;
    margin: calc(20/750*100vw) 0 0;
    letter-spacing: 1px;  
  }
  .qa_note .note_text {
    font-size: calc(12/750*100vw);
    line-height: calc(20/12);
    padding: 0 calc(32/750*100vw);
    margin-top: calc(14/750*100vw);
    margin-bottom: calc(20/750*100vw);
    letter-spacing: 0.5px;
  }
  .sec_04 .btn--grad {
    max-width: 316px;
    width: 22.57%;
    margin: 58px auto 0;
    padding: 10px 37px 10px 74px;
    display: block;
  }
}

.is-pc {
  display: block;
}
.is-sp {
  display: none;
}
@media screen and (max-width:767px){
  .is-pc {
    display: none;
  }
  .is-sp {
    display: block;
  }
}

/* swiper */
.swiper-pagination-bullets {
  position: relative;
  top: min(40px,calc(40/1400*100vw))!important;
  left: min(260px,calc(260/1400*100vw))!important;
}
.swiper-pagination-bullet {
  max-width: 12px;
  max-height: 12px;
  width: calc(12/1400*100vw);
  height: calc(12/1400*100vw);
  margin: 0 min(6px,calc(6/1400*100vw))!important;
}
.swiper-pagination-bullet-active {
  background: #e28d93
}
@media screen and (max-width:767px){
  .swiper-pagination-bullets {
    position: relative;
    top: calc(36/750*100vw)!important;
    left: 0!important;
  }
  .swiper-pagination-bullet {
    max-width: 100%;
    max-height: 100%;;
    width: calc(24/750*100vw);
    height: calc(24/750*100vw);
    margin: calc(13/750*100vw)!important;
  }
  .swiper-pagination-bullet-active {
    background: #e28d93
  }
}


/* sec_04 Q&A */
.sec_04 .heading_05 {
  font-size: 1.3rem;
  font-weight: normal;
  margin: 0;
  letter-spacing: 2px;
  text-indent: -44px;
  padding: 0 44px;
}
.sec_04 .heading_05 .question_text {
  font-size: 3rem;
  font-family: linotype-didot, serif;
  letter-spacing: 6px;
  vertical-align: -4px;
}
.sec_04 .heading_05 .text__reg {
  font-size: 1rem;
  vertical-align: 4px;
}
.sec_04 .text_little {
  font-size: 1rem;
}
.sec_04 .btn_container {
  display: flex;
  flex-wrap: wrap;
}
.sec_04 .btn_anchor {
  font-size: 1.2rem;
  text-align: center;
  padding: 12px 0;
  margin: 0 1% 14px 0;
  min-width: 147px;
  width: 19%;
  border: solid 1px #121212;
  letter-spacing: 1px;
  position: relative;
  transition: .5s;
  display: block;
}
.sec_04 .btn_anchor:nth-last-child(1) {
  margin-right: 0;
}
.sec_04 .btn_anchor:hover {
  opacity: .4;
}
.sec_04 .btn_anchor::after {
  content: "";
  background: url("../../img/guide/btn_arrow_bottom.png") no-repeat;
  background-size: cover;
  display: block;
  position: absolute;
  width: 11px;
  height: 6px;
  top: 46%;
  right: 11px;
}
.sec_04 .text_serum_title {
  font-family: ryo-text-plusn, serif;
  font-size: 1.8rem;
  padding-left: 0.5%;
  margin: 1em 0;
}
.sec_04 .under_line_link {
  border-bottom: solid 1px #121212;
  transition: .5s;
  cursor: pointer;
}
.sec_04 .under_line_link:hover {
  opacity: .4;
}
.sec_04 .card_img {
  margin: 6px 0 13px;
  width: 311px;
  display: block;
}
/* toggle */
.toggle_switch {
  background: #f5f5f5;
  padding: 7px 2.1%;
  position: relative;
  margin-bottom: 4px;
  cursor: pointer;
}
.toggle_down {
  position: absolute;
  right: 2px;
  top: 5px;
  width: 12%;
  height: 100%;
}
.toggle_down::before {
  position: absolute;
  content: "";
  display: block;
  top: 25px;
  right: 25px;
  width: 15px;
  height: 1px;
  background: #121212;
}
.toggle_down::after {
  position: absolute;
  content: "";
  display: block;
  top: 18px;
  right: 32px;
  width: 1px;
  height: 16px;
  background: #121212;
  transition: linear .3s;
}
.toggle_down.toggle_up::after {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  background: #424242;
}
.toggle_contents {
  display: none;
}
.toggle_contents .text--disp{
  padding: 16px 6.5% 33px;
  margin: 0;
  line-height: 2.4;
  letter-spacing: 1.5px;
}
/* /toggle */

/* /sec_04 Q&A */


/* ----------------------------------
SP
----------------------------------- */
@media screen and (max-width:767px){
  .sec_04 .heading_05 {
    font-size: 1.1rem;
    text-indent: -29px;
    padding: 0px 12px 0 29px;
    letter-spacing: 1px;
  }
  .sec_04 .heading_05 .question_text {
      font-size: 2.2rem;
      letter-spacing: 3px;
      vertical-align: -2px;
  }

  .sec_04 .btn_anchor {
      font-size: 1rem;
      padding: 9px 0;
      width: 48%;
  }
  .sec_04 .btn_anchor:nth-of-type(2n) {
      margin: 0 0 7px 1%;
  }
  .sec_04 .btn_anchor:nth-of-type(2n-1) {
      margin: 0 1% 7px 0;
  }
  .sec_04 .btn_anchor:hover {
      opacity: 1;
  }
  .sec_04 .btn_anchor::after {
      position: absolute;
      width: 9px;
      height: 5px;
      top: 46%;
      right: 7px;
  }
  .sec_04 .text_serum_title {
      font-size: 1.4rem;
      margin: 0 0 5px;
  }
  .sec_04 .under_line_link:hover {
      opacity: 1;
  }
  .sec_04 .card_img {
      margin: 6px 0 10px;
      width: 84%;
  }
  /* toggle */
  .toggle_switch {
      padding: 6px 4%;
      cursor: unset;
  }
  .toggle_down {
      position: absolute;
      right: 2px;
      top: 3px;
      width: 12%;
      height: 100%;
  }
  .toggle_down::before {
      top: 21px;
      right: 11px;
      width: 11px;
      height: 1px;
      z-index: 2;
  }
  .toggle_down::after {
      top: 16px;
      right: 16px;
      width: 1px;
      height: 11px;
      z-index: 2;
  }
  .toggle_contents .text--disp{
    padding: 8px 0 19px;
    margin: 0;
    line-height: 1.25;
    letter-spacing: 1.5px;
    font-size: 1.2rem;
  }
  /* /toggle */
}

/* IE */
@media all and (-ms-high-contrast: none){
  .sec_04 .heading_04 {
      padding: 102px 0 7px 0;
  }
  .sec_04 .heading_04:nth-of-type(1) {
      padding: 106px 0 7px 0;
  }
}

.swiper-button-prev,
.swiper-button-next {
  display: none;
}

@media (max-width: 767px) {
  .swiper-button-prev,
  .swiper-button-next {
    display: block;
    width: calc(25/750*100vw);
    height: calc(44/750*100vw);
    background-size: contain;
    background-repeat: no-repeat;
  }
  .swiper-button-prev {
    background-image: url(../../img/friendship/sp/arrow_left.png);
    top: 49%;
    left: calc(-68/750*100vw);
  }
  .swiper-button-next {
    background-image: url(../../img/friendship/sp/arrow_right.png);
    top: 49%;
    right: calc(-68/750*100vw);
  }
  .swiper-button-disabled {
    display: none;
  }
}