@charset "UTF-8";

/* =================================
sub page
================================= */
/* common
--------------------------------- */
/* 白枠コンテンツ */
.blk-white {
  padding: 45px 135px;
  font-size: 1.6rem;
  color: #6B573E;
  background-color: #fff;
  border-radius: 10px;
  text-align: center;
}

.blk-white p {
  line-height: 3.2rem;
}

/* ライン変更 */
.campaign .divider,
.sub .divider {
  margin: 35px auto 40px;
  background-image: radial-gradient(circle, #FFFDBA 20%, transparent 20%), radial-gradient(circle, #FFDBDB 20%, transparent 20%), radial-gradient(circle, #EFF9E5 20%, transparent 20%);
  background-size: 4rem 1.2rem;
  background-position: 0 0, 1.3rem 0, 2.6rem 0;
  height: 1rem;
  display: block;
}


/* Contents Head results / faq */
.ellipse-w {
  position: relative;
  padding: 5rem 0 10rem;
}

.ellipse-w::before {
  z-index: -1;
  position: absolute;
  content: "";
  top: -2px;
  left: 0;
  width: 100%;
  aspect-ratio: 1366/167;
  background: url(../img/parts/parts-bg-curve-2.png) no-repeat top 1px center/cover;
}

.ellipse-w .inner-blk h2 {
  margin-bottom: 10rem;
  font-size: 5rem;
  color: #6B573E;
  text-align: center;
}

.ellipse-w .bg-1 {
  z-index: -1;
  position: absolute;
  top: 20%;
  left: 0;
  width: 43.4rem;
  aspect-ratio: 434/389;
  animation: floatAndScale 12s infinite ease-in-out;
}

.ellipse-w .bg-2 {
  z-index: -1;
  position: absolute;
  top: 40%;
  right: 0;
  width: 57.5rem;
  aspect-ratio: 575/500;
  animation: floatAndScale 15s infinite -3s ease-in-out;
}

@media (max-width: 767px) {

  /* 白枠コンテンツ */
  .blk-white {
    padding: 2rem 1.5rem;
    font-size: min(1.3rem, 18.2px);
    border-radius: 28px;
  }

  .blk-white p {
    line-height: 1.8;
  }

  /* ライン変更 */
  .campaign .divider,
  .sub .divider {
    margin: 1.5rem auto;
  }

  /* Contents Head results / faq */
  .ellipse-w {
    padding: min(4rem, 56px) 0 min(4rem, 56px);
  }

  .ellipse-w .inner-blk {
    width: 100%;
    max-width: 1336px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    max-width: 600px;
  }

  .ellipse-w .inner-blk h2 {
    margin-bottom: min(3rem, 42px);
    font-size: min(3rem, 42px);
  }

  .ellipse-w .bg-1 {
    top: 15%;
    left: -10%;
    width: 60vw;
  }

  .ellipse-w .bg-2 {
    top: 60%;
    right: -20%;
    width: 100vw;
  }
}



/* button
--------------------------------- */
.button-gr a,
.button-pk a {
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items: center;

  margin: 0 auto;
  padding: 1.8rem 2rem 1.8rem 2.5rem;

  color: #fff;
  font-size: 1.8rem;
  font-weight: 500;
  background-color: #FC7C7C;
  box-shadow: 0 0.8rem 0 #E65353;
  border-radius: 4rem;
  transition: 0.2s;
}

.button-gr a:hover,
.button-pk a:hover {
  transform: translateY(3px);
  text-decoration: none;
  box-shadow: 0 0.2rem 0 #E65353;
}

.button-pk a {
  width: min(290px, 35vw);
}

.button-gr a {
  width: min(25vw, 255px);
  background-color: #8DC654;
  box-shadow: 0 0.8rem 0 #55A00A;
}

.button-gr a:hover {
  box-shadow: 0 0.2rem 0 #55A00A;
}

a [class^="icon"] {
  top: 0.2rem;
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  margin-left: 1rem;
}

.icon-link {
  background: url(../img/button/icon-link.png) no-repeat center/contain;
}

.icon-plus {
  background: url(../img/button/icon-link-plus.png) no-repeat center/contain;
}


@media (max-width: 767px) {

  .button-pk a {
    width: 28.8rem;
    font-size: min(1.6rem, 22.4px);
  }

  .button-gr a {
    width: 60vw;
    font-size: min(1.6rem, 22.4px);
    margin-bottom: 1rem;
  }
}



/* main visual
--------------------------------- */
.hero-sub {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 95.9rem;
  aspect-ratio: 1366/959;
}

.hero-block {
  width: 100%;
  height: 100%;
  max-height: 80rem;
  padding-top: max(7rem, 50px);
  background: url(../img/stores/head-mv.jpg) no-repeat top center/cover;
}

.hero-sub .container {
  position: relative;
  width: 100%;
  max-width: 1336px;
  margin: 0 auto;
  height: 100%;
  max-width: 108.4rem;
  border-top: 0.1rem solid transparent;
}

.hero-sub .container .mv-title {
  position: absolute;
  top: 1.6rem;
  left: 50%;
  width: min(70%, 76.9rem);
  height: auto;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 3;
}

.hero-sub .container .mv-title h2 {
  padding: 5.5rem 0 3rem;
  font-size: 3.7rem;
  font-weight: 500;
  text-align: center;
  color: #6B573E;
  background: url(../img/stores/head-title.png) no-repeat top center/cover;
}

.hero-sub .container .mv-lead {
  position: absolute;
  top: 15.5rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 1;
}

.hero-sub .container .mv-lead .lead-blk-l {
  max-width: 42.3rem;
}

.hero-sub .container .mv-lead .lead-blk-l>img:nth-of-type(1) {
  max-width: 36.5rem;
  margin-left: 5.9rem;
}

.hero-sub .container .mv-lead .lead-blk-l>img:nth-of-type(2) {
  max-width: 33.3rem;
}

.hero-sub .container .mv-lead .lead-blk-r {
  max-width: 40.7rem;
  text-align: right;
}

.hero-sub .container .mv-lead .lead-blk-r>img:nth-of-type(1) {
  max-width: 38.1rem;
  margin-right: 2.6rem;
}

.hero-sub .container .mv-lead .lead-blk-r>img:nth-of-type(2) {
  max-width: 37.1rem;
}

.hero-sub .container .mv-mascot {
  position: absolute;
  top: 27rem;
  left: 50%;
  width: 100%;
  max-width: 31.2rem;
  margin: 0 auto;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 2;
}

/* campaign */
.hero-sub .container .campaign {
  position: absolute;
  width: 100%;
  max-width: 104.5rem;
  top: 57rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}


@media (max-width: 767px) {
  .hero-sub {
    height: min(100% - 6.2rem, 100% - 50px);
    max-height: 72.5rem;
    aspect-ratio: 375/725;
  }

  .hero-block {
    max-height: 62em;
    background: url(../img/stores/head-mv-sp.jpg) no-repeat top 6rem center/cover;
  }

  .hero-sub .container {
    border-top: 0.1rem solid transparent;
  }

  .hero-sub .container .mv-title {
    top: 0.1vw;
    width: 100%;
  }

  .hero-sub .container .mv-title h2 {
    position: relative;
    width: 86.7vw;
    margin: 0 auto;
    padding: 3.2rem 0 1rem;
    font-size: 1.6rem;
    line-height: 1.8918918919;
    letter-spacing: 0.05rem;
    background: url(../img/stores/head-title-sp.png) no-repeat top center/cover;
  }

  .hero-sub .container .mv-lead {
    top: 8.4rem;
    width: 96vw;
    margin: 0 2.1vw 0 1.3vw;
  }

  .hero-sub .container .mv-lead .lead-blk-l {
    width: 47.6vw;
  }

  .hero-sub .container .mv-lead .lead-blk-l>img:nth-of-type(1) {
    width: 44.9vw;
    margin-left: 2.6vw;
  }

  .hero-sub .container .mv-lead .lead-blk-l>img:nth-of-type(2) {
    width: 38vw;
  }

  .hero-sub .container .mv-lead .lead-blk-r {
    width: 47vw;
    text-align: right;
  }

  .hero-sub .container .mv-lead .lead-blk-r>img:nth-of-type(1) {
    width: 47vw;
    margin-right: 2.6rem;
    margin-bottom: 0.4rem;
  }

  .hero-sub .container .mv-lead .lead-blk-r>img:nth-of-type(2) {
    width: 40vw;
  }

  .hero-sub .container .mv-mascot {
    top: 65.4vw;
  }


  /* campaign */
  .hero-sub .container .campaign {
    width: 94.6vw;
    top: 111.5vw;
    margin: 0;
    padding: 0;
  }
}

@media (max-width: 960px) and (min-width: 768px) {
  .hero-sub {
    max-height: 98rem;
    aspect-ratio: 1366/980;
  }
}



/* about：recostyleの特徴
--------------------------------- */
.sub .about {
  position: relative;
  padding: 6rem 0 2.2rem;
}

.sub .about .inner-blk {
  max-width: 107.5rem;
  justify-content: space-between;
  column-gap: 8.45rem;
  padding-bottom: 6rem;
}

.about .inner-blk .about-blk-1 {
  margin-top: 4rem;
}

.about .inner-blk .about-blk-2 {
  width: 47rem;
  margin-top: 0;
}

.sub .about .inner-blk .about-blk-2 {
  text-align: center;
}

.sub .about .inner-blk .about-blk-2 .text01 {
  margin-top: 8px;
  font-size: 2.7rem;
  text-align: center;
}

/* 掲載 -------------------------- */
.sub .about .inner-blk_s1 {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1336px;
  column-gap: 6.4rem;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  max-width: 107.6rem;
}

.sub .about .inner-blk_s1>div {
  display: flex;
  flex-direction: column;
  width: 49.1rem;
  height: auto;
  padding-bottom: 30px;
  text-align: center;
  background-color: #ecf5e2;
  border-radius: 20px;
}

.sub .about .inner-blk_s1 div h3 {
  position: relative;
  margin-bottom: 2.5rem;
  /* padding: 10px 0 28px; */
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 5.5rem;
  color: #fff;
  background-color: #8DC654;
  border-radius: 20px 20px 0 0;
}

.sub .about .inner-blk_s1 div h3::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #8DC654;
}

.sub .about .inner-blk_s1 div h4 {
  margin-top: 8px;
  font-size: 3.4rem;
  font-weight: 500;
  line-height: 4.2rem;
  color: #6B573E;
}

.sub .about .inner-blk_s1 div p {
  margin: 20px auto;
  padding: 0 35px;
  font-size: 1.6rem;
  text-align: left;
  line-height: 3.2rem;
  color: #6B573E;
  flex-grow: 1;
}

.sub .about .inner-blk_s1 div p span {
  font-size: 1.4rem;
  font-weight: normal;
}

/* さらに */
.sub .about .arrow {
  max-width: 27rem;
  margin: 4.8rem auto 0;
}

/* back */
.sub .about .bg-3 {
  z-index: -1;
  position: absolute;
  top: 30%;
  left: 0;
  width: 40.4rem;
  aspect-ratio: 404/416;
  animation: floatAndScale 12s infinite ease-in-out;
}

.sub .about .bg-4 {
  z-index: -1;
  position: absolute;
  bottom: 7.2rem;
  right: 0;
  width: 42.4rem;
  aspect-ratio: 424/439;
  animation: floatAndScale 15s infinite -3s ease-in-out;
}

@media (max-width: 767px) {
  .sub .about {
    position: relative;
    padding: 3rem 0 2rem;
  }

  .sub .about .inner-blk {
    padding-bottom: 3rem;
  }

  .about .inner-blk .about-blk-1 {
    margin-top: 1rem;
  }

  .sub .about .inner-blk .about-blk-1 h2 {
    text-align: left;
    margin-bottom: 1.2rem;
  }

  .sub .about .inner-blk .about-blk-1 p {
    text-align: left;
  }

  .sub .about .inner-blk .about-blk-2 img {
    max-width: 80vw;
  }

  .sub .about .inner-blk .about-blk-2 .text01 {
    margin-top: 8px;
    font-size: 1.8rem;
  }

  /* 掲載 */
  .sub .about .inner-blk_s1 {
    flex-direction: column
  }

  .sub .about .inner-blk_s1>div {
    width: 92vw;
    margin: 0 auto 2rem;
    padding-bottom: 20px;
  }

  .sub .about .inner-blk_s1 div h3 {
    margin-bottom: 0.7rem;
    font-size: min(2rem, 28px);
    line-height: 3.7rem;
  }

  .sub .about .inner-blk_s1 div h4 {
    font-size: min(2rem, 28px);
    line-height: 2.9rem;
  }

  .sub .about .inner-blk_s1 div p {
    margin-top: 1rem;
    padding: 0 1.5rem;
    font-size: min(1.3rem, 18.2px);
    line-height: 1.8;
  }

  .sub .about .inner-blk_s1 div p span {
    font-size: 1.4rem;
    font-size: min(1.0rem, 14px);
  }

  /* さらに 矢印*/
  .sub .about .arrow {
    width: 38vw;
    margin: 1.7rem auto 0;
    padding-bottom: 0.8rem;
  }

  /* back */
  .sub .about .bg-3 {
    top: 28%;
    left: -45%;
    width: 66vw;
  }

  .sub .about .bg-4 {
    top: 43%;
    right: -66%;
    width: 110vw;
  }
}



/* リコリスポイント
--------------------------------- */
.sub .use .inner-blk h2 {
  margin-bottom: 4.5rem;
  font-size: 4rem;
  line-height: 7rem;
}

.sub .use .inner-blk h2 span {
  font-size: 4rem;
}

.sub .use .mark1 {
  background: top left / 1em .5em repeat-x radial-gradient(circle, #FFDE00 .10em, rgba(0, 0, 0, 0) .10em);
  padding-top: 1.2rem;
}

.sub .use .icon-up {
  position: relative;
  top: 0.2rem;
  display: inline-block;
  width: 66px;
  height: 38px;
  margin: 0 0.6rem;
  background: url(../img/stores/point-icon-arrow.png) no-repeat center/contain;
}

.sub .use .point-blk-1 {
  display: flex;
  column-gap: 3rem;
  width: 100%;
  margin-bottom: 1.5rem;
  padding-left: 4.5rem;
  align-items: center;
}

.sub .use .point-blk-1>div:nth-of-type(1) {
  max-width: 140px;
}

.sub .use .point-blk-1>div:nth-of-type(2) {
  max-width: 530px;
  text-align: left;
}

.sub .use .point-blk-1>div h3 {
  margin-bottom: 28px;
  font-size: 3rem;
  color: #66D81A;
}

.sub .use .point-blk-1 .icon-recos {
  width: 2.7rem;
  height: 3.6rem;
}

.sub .use .point-img {
  max-width: 724rem;
  margin: 0 auto;
}

.sub .use b {
  font-size: 2rem;
}

@media (max-width: 767px) {
  .sub .use {
    margin-top: 3rem;
    padding-top: 0rem;
  }

  .sub .use .inner-blk {}

  .sub .use {
    margin-top: 3rem;
    padding-top: 0rem;
  }

  .sub .use .inner-blk h2 {
    margin-bottom: 0.5rem;
    font-size: min(2rem, 28px);
    line-height: 2;
  }

  .sub .use .inner-blk h2 span {
    font-size: min(2rem, 28px);
  }

  .sub .use .mark1 {
    background: top left / 1em .5em repeat-x radial-gradient(circle, #FFDE00 .10em, rgba(0, 0, 0, 0) .10em);
    padding-top: 0.6rem;
  }

  .sub .use .icon-up {
    width: 4rem;
    height: 2rem;
  }

  .sub .use .point-blk-1 {
    flex-direction: column;
    padding-left: 0;
  }

  .sub .use .point-blk-1>div {
    max-width: 100%;
    text-align: center;
  }

  .sub .use .point-blk-1>div:nth-of-type(1) {
    margin: 0 auto 1rem;
    text-align: center;
  }

  .sub .use .point-blk-1>div:nth-of-type(1) img {
    max-width: 6.5rem;
  }

  .sub .use .point-blk-1>div h3 {
    margin-bottom: 1rem;
    font-size: min(2rem, 28px);
    text-align: center;
  }

  .sub .use .point-blk-1 .icon-recos {
    width: 2.4rem;
    height: 3.2rem;
  }

  .sub .use .point-img {
    max-width: 590px;
    margin: 0 auto;
  }

  .sub .use b {
    font-size: min(1.4rem, 19.6px);
  }
}


/* manga
--------------------------------- */
.manga.store .inner-blk {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 6rem;
  width: 100%;
  max-width: 1336px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  max-width: 105rem;
  padding: 6rem 0;
}

/* タイトル */
.manga.store .inner-blk .manga-blk-title {
  width: 32.2rem;
}

.manga.store .inner-blk .manga-blk-title h2 {
  margin-bottom: 3rem;
  font-size: 5rem;
  font-weight: 700;
  color: #6B573E;
  text-align: center;
  line-height: 1.2;
}

.manga.store .inner-blk .manga-blk-title .button-pk a {
  width: 32.2rem;
}

.manga.store .inner-blk .manga-blk-book {
  display: flex;
  justify-content: center;
  column-gap: 9.9rem;
}

.manga.store .manga-blk-0 {
  width: 24.4rem;
  text-align: center;
}

.manga.store .manga-blk-0 h3 {
  margin: 2rem auto;
  font-size: 1.6rem;
  color: #6B573E;
}

@media (max-width: 767px) {
  .manga::before {
    border-top: 150vw solid #FFFDBA;
    border-right: 150vw solid transparent;
  }

  /* タイトル */
  .manga.store .inner-blk {
    flex-wrap: wrap;
    flex-direction: column;
    max-width: 500px;
    padding: 3rem 0 min(12rem, 168px);
  }

  .manga.store .inner-blk .manga-blk-title {
    width: 100%;
    margin-bottom: min(1rem, 14px);
  }

  .manga.store .inner-blk .manga-blk-title h2 {
    margin-bottom: 0;
    font-size: min(3rem, 42px);
  }

  .manga.store .inner-blk .manga-blk-title div {
    position: absolute;
    left: 0;
    bottom: min(4rem, 56px);
    width: 100%;
  }

  .manga.store .inner-blk .manga-blk-title .button-pk a {
    width: 28.8rem;
  }


  /* 画像 */
  .manga.store .inner-blk .manga-blk-book {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
  }

  .manga.store .manga-blk-0 {
    width: 66%;
    margin: 2rem auto;
  }

  .manga.store .manga-blk-0 h3 {
    font-size: min(1.6rem, 22.4px);
  }
}


/* 漫画ボタン --------------------------- */
.button-ct a {
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items: center;
  align-items: center;
  margin: 0 auto;
  padding: 1.8rem 2rem 1.8rem;
  /* width: min(35vw, 288px); */
  max-width: 24.8rem;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 500;

  background-color: #8DC654;
  box-shadow: 0 0.8rem 0 #55A00A;
  border-radius: 4rem;
  transition: 0.3s;
  cursor: pointer;
}

.icon-plus {
  top: 0.2rem;
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  margin-left: 1rem;
  background: url(../img/button/icon-link-plus.png) no-repeat center/contain;
}

.button-ct a:hover {
  transform: translateY(3px);
  text-decoration: none;
  box-shadow: 0 0.2rem 0 #55A00A;
}

@media (max-width: 767px) {
  .button-ct a {
    width: min(70vw, 500px);
    font-size: min(1.6rem, 22.4px);

    width: 60vw;
    margin-bottom: 1rem;
  }
}



/* agency
--------------------------------- */
.sub .agency {
  position: relative;
  padding-top: 10rem;
  padding-bottom: 9rem;
  background-color: #8DC654;
  font-size: 1rem;
}

.sub .agency .inner-blk {
  width: 100%;
  max-width: 1336px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  width: 107.8rem;
}

.sub .agency .inner-blk h2 {
  width: 100%;
  margin-bottom: 5.5rem;
  font-size: 4rem;
  text-align: center;
  color: #fff;
}

.mb1 {
  margin-bottom: 1rem;
}

.txt-pb {
  font-size: 1.8rem;
  color: #FC7C7C;
}

/* ボタン */
.agency .inner-blk .blk-white p a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: 6rem;
  margin: 0 auto;
  padding: 0.5rem 7rem 0.5rem 4rem;
  font-size: 2rem;
  font-weight: 500;
  color: #fff;
  background-color: #8DC654;
  border-radius: 4rem;
}

.agency .inner-blk .blk-white p a::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 0;
  transform: translate(-100%, -50%);
  width: 2.4rem;
  height: 2.4rem;
  background: url(../img/button/icon-link-plus.png) no-repeat center/contain;
}

.agency .inner-blk .blk-white p a::before {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: -0.7rem;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #55a00a;
  border-radius: 4rem;
}

@media (max-width: 767px) {
  .sub .agency {
    padding-top: min(4rem, 56px);
    padding-bottom: min(4rem, 56px);
  }

  .sub .agency .inner-blk {
    width: 100%;
    max-width: 1336px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    width: 100%;
    max-width: 600px;
  }

  .sub .agency .inner-blk h2 {
    margin-bottom: 1rem;
    font-size: min(2rem, 28px);
    line-height: 1.6;
  }

  .txt-pb {
    font-size: min(1.6rem, 22.4px);
  }
}


/* results
--------------------------------- */
.results .inner-blk {
  width: 100%;
  max-width: 1336px;
  margin: 0 auto;
  max-width: 115.8rem;
}

.results-blk {
  display: flex;
  justify-content: space-around;
  margin-bottom: 5rem;
}

.results-blk-content {
  position: relative;
  display: flex;
  flex-direction: column;

  width: 30%;
  font-size: 1.6rem;
  font-weight: 500;
  color: #6B573E;
}

.results-blk-content .content-blk-1 {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

.results-blk-content .content-blk-2 {
  margin-top: 18rem;
  z-index: 1;

  flex-grow: 1;
  background-color: #FEFFF1;
  border-radius: 3rem 3rem 0 0;
}


/* コンテンツ内 -------------------------- */
/* 画像 */
.results-blk-content .content-blk-2>div:nth-of-type(1) img {
  border-radius: 20px 20px 0 0;
}

/* 内容 */
.results-blk-content .content-blk-2>div:nth-of-type(2) {
  padding: 16px 24px;
}

.results-blk-content .content-blk-2 h3 {
  margin: 0.5rem auto 1.8rem;
  font-size: 2.6rem;
  font-weight: 500;
  text-align: center;
  line-height: 3.2rem;
  color: #8DC654;
}

.results-blk-content .content-blk-2 .pk-block {
  max-width: 27.8rem;
  margin: 1.8rem auto 0;
  padding: 1.1rem 2.5rem;
  color: #FC7C7C;
  border: dotted 3px #FC7C7C;
  border-radius: 10px;
  background-color: #fff;
}

.results-blk-content .content-blk-2 .pk-block p {
  padding-left: 2rem;
  text-indent: -1.5rem;
  line-height: 1.8;
}


/* 詳細リンク */
.results-blk-content p a {
  position: relative;
  display: flex;
  justify-content: center;
  height: 4.4rem;
  padding-top: 1rem;
  font-size: 1.5rem;
  color: #fff;
  background-color: #FFBA00;
  border-radius: 0 0 20px 20px;
}

.results-blk-content p a:hover {
  opacity: .7;
  transition: .2s;
}

.results-blk-content p a .icon-plus {
  position: relative;
  top: 0;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0 1rem;
  background: url(../img/button/icon-link-plus.png) no-repeat center/contain;
}

@media (max-width: 767px) {
  .ellipse-w .inner-blk h2 {
    margin-bottom: min();
  }

  .results-blk {
    flex-direction: column;
    margin-bottom: 0.5rem;
  }

  .results-blk-content {
    width: 84vw;
    margin: 0 auto;
    margin-bottom: 2rem;

    font-size: min(1.4rem, 19.6px);
  }


  /* コンテンツ内 -------------------------- */
  .results-blk-content .content-blk-2 h3 {
    margin: 0rem auto 1rem;
  }

  .results-blk-content .content-blk-2 .pk-block {
    padding: 1.1rem;
  }

  .results-blk-content .content-blk-2 .pk-block p {
    font-size: min(1.3rem, 18.2px);
  }
}


/* 導入手順 process （use）
--------------------------------- */
.process {
  position: relative;
  margin-top: 16.7rem;
  padding-top: 5rem;
  padding-bottom: 10rem;
  background-color: #8DC654;
}

.process::before {
  position: absolute;
  content: "";
  top: -16.6rem;
  width: 100%;
  height: 16.7rem;
  background: url(../img/parts/parts-bg-curve.png) no-repeat top 1px center/cover;
}

.process .inner-blk {
  width: 100%;
  max-width: 1336px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  width: 87rem;
  max-width: 870px;
  margin-top: -16.7rem;
}

.process .inner-blk h2 {
  z-index: 1;
  position: relative;
  margin-bottom: 10rem;
  font-size: 5rem;
  color: #fff;
  text-align: center;
}

.process .inner-blk h2 span {
  font-size: 4.5rem;
}

.process .inner-blk ul {
  margin-bottom: 6rem;
  display: flex;
  justify-content: space-between;
}

.process .inner-blk ul li {
  position: relative;
  /* width: 24.6rem; */
  width: 26rem;
  padding: 5rem 2rem 4.6rem;
  background-color: #fff;
  border-radius: 2rem;
  text-align: center;
}

.process .inner-blk ul li h4 {
  position: absolute;
  top: -1rem;
  left: -1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 6.4rem;
  height: 6.4rem;
  font-size: 2.6rem;
  font-weight: 500;
  color: #fff;
  background-color: #FFBA00;
  border-radius: 50%;
  text-align: center;
  line-height: 1;
}

.process .inner-blk ul li h4 span {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.process .inner-blk ul li img {
  width: auto;
  height: 7.4rem;
  margin-bottom: 3rem;
}

.process .inner-blk ul li h3 {
  margin-bottom: 1rem;
  font-size: 1.9rem;
  font-weight: 700;
}

.process .inner-blk ul li p {
  padding: 0 1rem;
  font-size: 1.6rem;
  color: #6B573E;
  text-align: left;
  line-height: 1.5;
}


@media (max-width: 767px) {
  .process {
    margin-top: 4rem;
    padding-top: 1rem;
    padding-bottom: min(5rem, 70px);
    background-color: #8DC654;
  }

  .process::before {
    top: -4rem;
    height: 4.1rem;
    background: url(../img/parts/parts-bg-curve.png) no-repeat top 1px center/100%;
  }

  .process .inner-blk {
    width: 100%;
    max-width: 1336px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    width: 100%;
    max-width: 600px;
    margin-top: 0;
  }

  .process .inner-blk h2 {
    margin-bottom: min(4rem, 56px);
    font-size: min(3rem, 42px);
  }

  .process .inner-blk ul {
    flex-direction: column;
    row-gap: min(4rem, 56px);
    margin-bottom: 2.5rem;
  }

  .process .inner-blk ul li {
    margin: 0 auto;
    width: 72vw;
  }

  .process .inner-blk ul li h4 {
    width: min(5.6rem, 78.4px);
    height: min(5.6rem, 78.4px);
    font-size: min(1.8rem, 25.2px);
  }

  .process .inner-blk ul li h4 span {
    font-size: min(1.2rem, 16.8px);
  }

  .process .inner-blk ul li img {
    width: auto;
    height: min(4.8rem, 67.2px);
    margin-bottom: min(2rem, 28px);
  }

  .process .inner-blk ul li h3 {
    margin-bottom: min(1rem, 14px);
    font-size: min(1.8rem, 25.2px);
  }

  .process .inner-blk ul li p {
    font-size: min(1.4rem, 19.6px);
  }
}


/* FAQ
--------------------------------- */
.faq .inner-blk {
  width: 100%;
  max-width: 1336px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  max-width: 78rem;
  font-size: 1.6rem;

  color: #6B573E;
}

.faq .inner-blk .faq-blk-mov {
  position: relative;
  width: 60rem;
  margin: 0 auto 6rem;
  text-align: center;
}

.faq .inner-blk .faq-blk-mov iframe {
  width: 100%;
  aspect-ratio: 600/338;
}

.faq .inner-blk .faq-blk-mov p {
  margin-top: 20px;
}


/* 質問リスト */
.faq-list {
  margin-bottom: 6rem;
}

.faq-list dl {
  margin-bottom: 2rem;
  border-radius: 10px;
  overflow: hidden
}

.faq-list dl dt {
  position: relative;
  margin: 0;
  padding: 1.5rem 2rem;
  color: #fff;
  border-radius: 10px 10px 0 0;
  background-color: #8DC654;
  cursor: pointer;
  transition: 0.2s;
}

.faq-list dl dt:after {
  position: absolute;
  content: "";
  top: 50%;
  right: 2rem;
  width: 2.4rem;
  height: 2.4rem;
  background: url(../img/button/icon-link-minus.png) no-repeat right top / 2.4rem;

  display: inline-block;
  transform: translateY(-50%);
  transition: 0.2s;
}

.faq-list dl dt.selected:after {
  background: url(../img/button/icon-link-plus.png) no-repeat right top / 2.4rem;
  transform: translateY(-50%) rotate(180deg);
  transition: 0.2s;
}

.faq-list dl dd {
  margin: 0;
  padding: 1.5rem 2rem;
  background-color: #FEFFF1;
  border-radius: 0 0 10px 10px;
  display: block;
}


@media (max-width: 767px) {
  .faq .inner-blk {
    font-size: min(1.4rem, 19.6px);
  }

  .faq .inner-blk .faq-blk-mov {
    width: 100%;
    margin-bottom: 2.5rem;
  }

  .faq .inner-blk .faq-list {
    margin-bottom: 2rem;
  }
}