@charset "UTF-8";
/* Scss Document */
/* CSS Document */
/*------------------------------font------------------------------*/
.ff_barlow {
  font-family: "Barlow Condensed", sans-serif;
  line-height: 1;
}

.text_grad {
  display: inline-block;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  background-image: linear-gradient(90deg, #C731C5 40%, #6E4DF1);
}

.pink {
  color: #F61C93;
}

/*------------------------------mixin bg------------------------------*/
/*------------------------------mixin flex------------------------------*/
/**/
body {
  font-family: "Noto Sans JP", Helvetica, Arial, "Hiragino Sans", YuGothic, "Yu Gothic medium", sans-serif;
  line-height: 1.69;
  margin: 0;
}

.sp-only {
  display: none;
}
@media only screen and (max-width: 768px) {
  .sp-only {
    display: block;
  }
}

.pc-only {
  display: block;
}
@media only screen and (max-width: 768px) {
  .pc-only {
    display: none;
  }
}

li {
  list-style: none;
}

.body_txt {
  text-align: justify;
  font-size: 1.6rem;
  line-height: 1.8;
}

/**/
h2 {
  text-align: center;
  line-height: 1.2;
  font-weight: 700;
  font-size: 4.8rem;
}
@media only screen and (max-width: 768px) {
  h2 {
    font-size: 3rem;
  }
}

.cv_wrap {
  text-align: center;
  /*@keyframes shiny {
    0% {
      transform: scale(0) rotate(25deg);
      opacity: 0;
    }

    50% {
      transform: scale(1) rotate(25deg);
      opacity: 1;
    }

    100% {
      transform: scale(50) rotate(25deg);
      opacity: 0;
    }
  }*/
}
.cv_wrap .cv-btn {
  margin: 0 auto;
  display: inline-block;
  line-height: 1.2;
  width: 55.5rem;
  max-width: 100%;
  padding: 1em 0;
  background: linear-gradient(to right, #FF8383 0, #F61C93 50%);
  font-size: 2.4rem;
  border-radius: 999rem;
  position: relative;
  box-shadow: 0 0.4rem 0 #914A4A;
  text-align: center;
  position: relative;
  top: 0;
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /*&::after {
    content: '';
    position: absolute;
    top: -20.0rem;
    left: -20.0rem;
    width: 10.0rem;
    height: 10.0rem;
    background-image: linear-gradient(100deg, rgb(255 255 255 / 0) 10%, rgb(255 255 255 / 1) 100%, rgb(255 255 255 / 0) 0%);
    animation-name: shiny;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }*/
}
@media only screen and (max-width: 768px) {
  .cv_wrap .cv-btn {
    width: 100%;
    font-size: 2rem;
  }
}
.cv_wrap .cv-btn::after {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-right: 0.25rem solid #fff;
  border-bottom: 0.25rem solid #fff;
  position: absolute;
  top: 50%;
  right: 3rem;
  transform: rotate(-45deg) translateY(-50%);
}
@media only screen and (max-width: 768px) {
  .cv_wrap .cv-btn::after {
    width: 0.8rem;
    height: 0.8rem;
    border-right: 0.25rem solid #fff;
    border-bottom: 0.25rem solid #fff;
    top: 50%;
    right: 2rem;
  }
}
.cv_wrap .cv-btn p {
  display: inline-block;
  font-size: 2.4rem;
  font-weight: bold;
  color: #fff;
  position: relative;
  filter: drop-shadow(0.1rem 0.1rem 0.2rem rgba(218, 210, 0, 0.4));
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}
@media only screen and (max-width: 768px) {
  .cv_wrap .cv-btn p {
    font-size: 1.8rem;
    white-space: nowrap;
    text-align: center;
  }
}
.cv_wrap .cv-btn p .top {
  font-size: 1.4rem;
  display: inline-block;
}
.cv_wrap .cv-btn:hover {
  transform: translateY(0.3rem);
  box-shadow: 0 0.1rem 0 #914A4A;
}
@media only screen and (max-width: 768px) {
  .cv_wrap .cv-btn:hover {
    transform: translateY(0.3rem);
    box-shadow: 0 0.1rem 0 #914A4A;
  }
}

/*アコーディオン*/
.accordion {
  cursor: pointer;
  position: relative;
  text-align: center;
  font-weight: 600;
  background: #F1EFF1;
  font-size: 1.6rem;
  padding: 0.5em 0;
  border-radius: 6px;
}
@media only screen and (max-width: 768px) {
  .accordion {
    font-size: 1.4rem;
  }
}
.accordion::after {
  content: "";
  width: 1.2em;
  height: 1.2em;
  background: url("../img/icon_down_1.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  right: 1.2em;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (max-width: 768px) {
  .accordion::after {
    right: 1em;
  }
}
.accordion.close {
  border-radius: 6px 6px 0 0;
}
.accordion.close::after {
  transform: translateY(-50%) rotate(180deg);
}

.accordion_box {
  display: none;
  background: #fff;
  padding: 2rem 2rem 2.3rem;
  border-radius: 0 0 6px 6px;
  border-right: solid 1px #F1EFF1;
  border-bottom: solid 1px #F1EFF1;
  border-left: solid 1px #F1EFF1;
}
@media only screen and (max-width: 768px) {
  .accordion_box {
    padding: 1.5rem 1.5rem 1.8rem;
  }
}

/**/
.fv {
  background: url(../img/fv_pc.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media only screen and (max-width: 768px) {
  .fv {
    background: url(../img/fv.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
}
.fv .inner {
  padding: 4rem 0rem 36rem;
}
@media only screen and (max-width: 768px) {
  .fv .inner {
    padding: 1rem 0rem 21rem;
  }
}
.fv .inner .logo {
  width: 23rem;
  margin-left: 7rem;
}
@media only screen and (max-width: 768px) {
  .fv .inner .logo {
    width: 12rem;
    margin-left: 2rem;
  }
}
.fv .inner h1 {
  display: inline-block;
  margin-top: 8rem;
  margin-left: 13rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-size: 9rem;
  color: #fff;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .fv .inner h1 {
    margin-top: 1.8rem;
    margin-left: 2rem;
    font-size: 3.6rem;
  }
}
.fv .inner h1 .small {
  font-size: 8rem;
}
@media only screen and (max-width: 768px) {
  .fv .inner h1 .small {
    font-size: 3rem;
  }
}
.fv .inner h1::before, .fv .inner h1::after {
  content: "";
  background: url(../img/icon_quote.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: -0.5rem;
  width: 3.5rem;
  height: 2.8rem;
}
@media only screen and (max-width: 768px) {
  .fv .inner h1::before, .fv .inner h1::after {
    width: 1.4rem;
    height: 1.4rem;
  }
}
.fv .inner h1::before {
  left: -2rem;
}
@media only screen and (max-width: 768px) {
  .fv .inner h1::before {
    left: -0.5rem;
  }
}
.fv .inner h1::after {
  right: -2rem;
  transform: rotate(180deg);
}
@media only screen and (max-width: 768px) {
  .fv .inner h1::after {
    right: -0.5rem;
  }
}

/*口座振替プランについて*/
.about {
  background: #F1EFF1;
  position: relative;
}
.about::before {
  content: "about";
  position: absolute;
  left: 50%;
  top: 13rem;
  transform: translateX(-50%);
  font-family: "Open Sans", sans-serif;
  font-size: 20rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1;
  z-index: 0;
}
@media only screen and (max-width: 768px) {
  .about::before {
    top: 9rem;
    font-size: 12rem;
  }
}
.about .inner {
  padding: 10rem 20rem;
}
@media only screen and (max-width: 768px) {
  .about .inner {
    padding: 6rem 3rem;
  }
}
.about .title_wrap {
  text-align: center;
}
.about .title_wrap .bubble {
  background: #FDCA14;
  border: #fff solid 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: relative;
  width: 60rem;
  height: 8rem;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .about .title_wrap .bubble {
    width: 26rem;
    height: 6rem;
  }
}
.about .title_wrap .bubble::before {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 50%;
  bottom: -1.5rem;
  border-top: 1.5rem solid #fff;
  border-right: 1.5rem solid transparent;
  border-left: 1.5rem solid transparent;
  transform: translateX(-50%);
}
.about .title_wrap .bubble::after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 50%;
  bottom: -1rem;
  border-top: 1.5rem solid #FDCA14;
  border-right: 1.5rem solid transparent;
  border-left: 1.5rem solid transparent;
  transform: translateX(-50%);
}
.about .title_wrap .bubble .icon {
  width: 3rem;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
  .about .title_wrap .bubble .icon {
    width: 2.5rem;
  }
}
.about .title_wrap .bubble p {
  font-size: 2.4rem;
  margin: 0;
  line-height: 1.2;
}
@media only screen and (max-width: 768px) {
  .about .title_wrap .bubble p {
    font-size: 1.4rem;
  }
}
.about .title_wrap h2 {
  margin-top: 2rem;
  position: relative;
  display: inline-block;
}
.about .title_wrap h2 .parentheses {
  position: absolute;
  font-weight: normal;
  font-size: 2rem;
  left: 8rem;
  bottom: -3rem;
}
@media only screen and (max-width: 768px) {
  .about .title_wrap h2 .parentheses {
    font-size: 1.6rem;
    left: 1.5rem;
    bottom: -2.3rem;
  }
}
.about .list_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  -moz-column-gap: 4rem;
       column-gap: 4rem;
  row-gap: 5rem;
  margin-top: 7rem;
}
@media only screen and (max-width: 768px) {
  .about .list_wrap {
    flex-direction: column;
    gap: 4rem;
    margin-top: 5rem;
  }
}
.about .list_wrap .item {
  background: #fff;
  border-radius: 2rem;
  position: relative;
  padding: 5rem 4rem;
  width: 38rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  height: 32rem;
}
@media only screen and (max-width: 768px) {
  .about .list_wrap .item {
    width: 100%;
    padding: 4rem 2rem;
    height: auto;
  }
}
.about .list_wrap .item::before {
  content: "";
  background: url(../img/check_pink.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 4rem;
  height: 4rem;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
}
.about .list_wrap .item h3 {
  font-size: 2.8rem;
  text-align: center;
  margin: 0;
  font-weight: bold;
  line-height: 1.3;
}
@media only screen and (max-width: 768px) {
  .about .list_wrap .item h3 {
    font-size: 2rem;
  }
}
.about .list_wrap .item h3 .pink {
  font-size: 3.2rem;
  color: #F61C93;
}
@media only screen and (max-width: 768px) {
  .about .list_wrap .item h3 .pink {
    font-size: 2.4rem;
  }
}
.about .list_wrap .item.item_01 {
  padding: 5rem;
  width: 80rem;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .about .list_wrap .item.item_01 {
    width: 100%;
    padding: 4rem 2rem;
  }
}
.about .list_wrap .item.item_01 .pc_flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5%;
  margin-top: 1rem;
}
@media only screen and (max-width: 768px) {
  .about .list_wrap .item.item_01 .pc_flex {
    flex-direction: column;
    gap: 2rem;
    margin-top: 0;
    width: 100%;
  }
}
.about .list_wrap .item.item_01 .pc_flex .body_txt {
  flex: 1;
  width: 40%;
}
@media only screen and (max-width: 768px) {
  .about .list_wrap .item.item_01 .pc_flex .body_txt {
    width: 100%;
  }
}
.about .list_wrap .item.item_01 .pc_flex .structure_wrap {
  width: 55%;
}
@media only screen and (max-width: 768px) {
  .about .list_wrap .item.item_01 .pc_flex .structure_wrap {
    width: 100%;
  }
}
.about .list_wrap .item.item_01 .pc_flex .structure_wrap h4 {
  font-weight: bold;
  text-align: center;
  margin: 0;
  font-size: 1.8rem;
}
@media only screen and (max-width: 768px) {
  .about .list_wrap .item.item_01 .pc_flex .structure_wrap h4 {
    font-size: 1.4rem;
  }
}
.about .list_wrap .item.item_01 .pc_flex .structure_wrap .figure_wrap {
  margin-top: 1rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.8rem;
}
@media only screen and (max-width: 768px) {
  .about .list_wrap .item.item_01 .pc_flex .structure_wrap .figure_wrap {
    gap: 0;
    justify-content: space-between;
  }
}
.about .list_wrap .item.item_01 .pc_flex .structure_wrap .figure_wrap .figure {
  background: #F1EFF1;
  border-radius: 0.6rem;
  width: 12rem;
  height: 13rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
@media only screen and (max-width: 768px) {
  .about .list_wrap .item.item_01 .pc_flex .structure_wrap .figure_wrap .figure {
    width: 8.2rem;
    height: 10rem;
  }
}
.about .list_wrap .item.item_01 .pc_flex .structure_wrap .figure_wrap .figure:nth-child(3)::after {
  content: "";
  background: url(../img/structur_bubble.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 5rem;
  height: 5.4rem;
  position: absolute;
  left: -4rem;
  bottom: 0rem;
}
@media only screen and (max-width: 768px) {
  .about .list_wrap .item.item_01 .pc_flex .structure_wrap .figure_wrap .figure:nth-child(3)::after {
    width: 3.8rem;
    height: 4.1rem;
    left: -3.2rem;
  }
}
.about .list_wrap .item.item_01 .pc_flex .structure_wrap .figure_wrap .figure figure {
  width: 6.5rem;
  margin: 0;
}
@media only screen and (max-width: 768px) {
  .about .list_wrap .item.item_01 .pc_flex .structure_wrap .figure_wrap .figure figure {
    width: 5rem;
  }
}
.about .list_wrap .item.item_01 .pc_flex .structure_wrap .figure_wrap .figure .label {
  font-size: 1.4rem;
  text-align: center;
  font-weight: bold;
  margin: 0;
  line-height: 1.2;
}
@media only screen and (max-width: 768px) {
  .about .list_wrap .item.item_01 .pc_flex .structure_wrap .figure_wrap .figure .label {
    font-size: 1.2rem;
  }
}
.about .list_wrap .item.item_01 .pc_flex .structure_wrap .figure_wrap .figure + li {
  position: relative;
}
.about .list_wrap .item.item_01 .pc_flex .structure_wrap .figure_wrap .figure + li::before {
  content: "";
  background: url(../img/structure_arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 4.8rem;
  height: 2rem;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-80%, -50%);
}
.about .list_wrap .item.item_01 .note {
  font-size: 1.4rem;
}
@media only screen and (max-width: 768px) {
  .about .list_wrap .item.item_01 .note {
    font-size: 1.1rem;
  }
}

/*プラン・オプション・コース*/
.detaile {
  background: linear-gradient(90deg, #C731C5 40%, #6E4DF1);
}
.detaile .inner {
  padding: 10rem 27rem;
}
@media only screen and (max-width: 768px) {
  .detaile .inner {
    padding: 6rem 2.5rem;
  }
}
.detaile .inner section h2 {
  color: #fff;
  margin-bottom: 4rem;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section h2 {
    margin-bottom: 2rem;
  }
}
.detaile .inner section .plan_wrap {
  border-radius: 1rem;
  overflow: hidden;
}
.detaile .inner section .plan_wrap .plan_name {
  font-weight: 700;
  padding: 1.5rem 0;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  color: #fff;
  background: #000018;
  font-size: 2.8rem;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .plan_wrap .plan_name {
    flex-direction: column;
    gap: 0.5rem;
    font-size: 2rem;
  }
}
.detaile .inner section .plan_wrap .plan_name .sub {
  font-size: 1.6rem;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .plan_wrap .plan_name .sub {
    font-size: 1.4rem;
  }
}
.detaile .inner section .plan_wrap .plan_name .main {
  position: relative;
}
.detaile .inner section .plan_wrap .plan_name .main::after {
  position: absolute;
  content: "";
  top: 0;
  left: -2rem;
  height: 100%;
  width: 1px;
  background: #fff;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .plan_wrap .plan_name .main::after {
    background: none;
  }
}
.detaile .inner section .plan_wrap .content {
  background: #fff;
  padding: 3.5rem 5rem 5rem;
  line-height: 1.4;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .plan_wrap .content {
    padding: 2rem 2rem 2.5rem;
  }
}
.detaile .inner section .plan_wrap .content .content_top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}
.detaile .inner section .plan_wrap .content .content_top .text {
  font-weight: 700;
  width: calc(65% - 3rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.detaile .inner section .plan_wrap .content .content_top .text .strengths .bubble {
  background: #F1EFF1;
  position: relative;
  display: inline-block;
  padding: 0.4em 1em;
  border-radius: 0.5rem;
  font-size: 2rem;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .plan_wrap .content .content_top .text .strengths .bubble {
    font-size: 1.2rem;
  }
}
.detaile .inner section .plan_wrap .content .content_top .text .strengths .bubble::after {
  position: absolute;
  content: "";
  background: #F1EFF1;
  width: 3rem;
  height: 1.5rem;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .plan_wrap .content .content_top .text .strengths .bubble::after {
    width: 1.5rem;
    height: 0.75rem;
  }
}
.detaile .inner section .plan_wrap .content .content_top .text .price_wrap {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  font-size: 4.4rem;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .plan_wrap .content .content_top .text .price_wrap {
    font-size: 2rem;
  }
}
.detaile .inner section .plan_wrap .content .content_top .text .price_wrap .monthly {
  writing-mode: vertical-rl;
}
.detaile .inner section .plan_wrap .content .content_top .text .price_wrap .price {
  font-size: 235%;
  display: inline-block;
  margin-bottom: -0.05em;
}
.detaile .inner section .plan_wrap .content .content_top .text .price_wrap .yen {
  position: relative;
}
.detaile .inner section .plan_wrap .content .content_top .text .price_wrap .yen .tax {
  position: absolute;
  font-size: 40%;
  top: -0.7em;
  left: 0.25em;
}
.detaile .inner section .plan_wrap .content .content_top .text .explanation {
  font-size: 2.4rem;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .plan_wrap .content .content_top .text .explanation {
    font-size: 1.2rem;
  }
}
.detaile .inner section .plan_wrap .content .content_top .image {
  width: 35%;
}
.detaile .inner section .plan_wrap .content .content_top + .content_body {
  margin-top: 3.5rem;
  padding-top: 3.5rem;
  border-top: solid 1px #F1EFF1;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .plan_wrap .content .content_top + .content_body {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }
}
.detaile .inner section .plan_wrap .content .content_body {
  font-size: 1.8rem;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .plan_wrap .content .content_body {
    font-size: 1.4rem;
  }
}
.detaile .inner section .plan_wrap .content .content_body dl div dt {
  text-align: center;
  background: #000018;
  color: #fff;
  padding: 0.5em 0;
}
.detaile .inner section .plan_wrap .content .content_body dl div dd {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 1em;
  font-weight: 700;
  border-right: solid 1px #F1EFF1;
  border-bottom: solid 1px #F1EFF1;
  border-left: solid 1px #F1EFF1;
}
.detaile .inner section .plan_wrap .content .content_body dl div dd .ff_barlow {
  font-size: 210%;
}
.detaile .inner section .plan_wrap .content .content_body dl div + div {
  margin-top: 2rem;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .plan_wrap .content .content_body dl div + div {
    margin-top: 1rem;
  }
}
.detaile .inner section .plan_wrap .content .content_body .plus_info {
  text-align: center;
  font-weight: 700;
  margin: 2.5rem 0;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .plan_wrap .content .content_body .plus_info {
    margin: 2rem 0;
  }
}
.detaile .inner section .plan_wrap .content .content_body .plus_info a {
  color: #4A96FF;
  text-decoration: underline;
  cursor: pointer;
}
.detaile .inner section .plan_wrap .content .content_body .plus_info .plus-area_modal_content h4 {
  margin-bottom: 0.5em;
  font-size: 2.4rem;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .plan_wrap .content .content_body .plus_info .plus-area_modal_content h4 {
    font-size: 1.4rem;
  }
}
.detaile .inner section .plan_wrap .content .content_body .plus_info .plus-area_modal_content .card4_map {
  height: 30rem;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .plan_wrap .content .content_body .plus_info .plus-area_modal_content .card4_map {
    height: 25rem;
  }
}
.detaile .inner section .plan_wrap .content .content_body .plus_info .plus-area_modal_content .note_bottom {
  font-size: 2rem;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .plan_wrap .content .content_body .plus_info .plus-area_modal_content .note_bottom {
    font-size: 1.4rem;
  }
}
.detaile .inner section .plan_wrap .content .content_body .plus_info .plus-area_modal_content .note_bottom p {
  margin-top: 1em;
}
.detaile .inner section .plan_wrap .content .content_body .plus_info .plus-area_modal_content .note_bottom p:first-of-type {
  font-weight: 600;
}
.detaile .inner section .plan_wrap .content .content_body .plus_info .plus-area_modal_content .note_bottom p:nth-of-type(2) {
  font-weight: normal;
  text-align: left;
  font-size: 1.4rem;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .plan_wrap .content .content_body .plus_info .plus-area_modal_content .note_bottom p:nth-of-type(2) {
    font-size: 1.2rem;
  }
}
.detaile .inner section .plan_wrap .content .content_body .plan_note {
  font-size: 1.2rem;
  line-height: 1.68;
  margin-top: 2em;
}
.detaile .inner section .option_wrap {
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  padding: 3.5rem 5rem 4rem;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .option_wrap {
    padding: 2.5rem 2rem;
  }
}
.detaile .inner section .option_wrap .option_name {
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .option_wrap .option_name {
    gap: 1.5rem;
  }
}
.detaile .inner section .option_wrap .option_name figure {
  width: 7.5rem;
  height: 7.5rem;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .option_wrap .option_name figure {
    width: 5rem;
    height: 5rem;
  }
}
.detaile .inner section .option_wrap .option_name .text {
  line-height: 1.2;
  font-size: 2.4rem;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .option_wrap .option_name .text {
    font-size: 1.8rem;
  }
}
.detaile .inner section .option_wrap .option_name .text h3 + .price {
  margin-top: 1rem;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .option_wrap .option_name .text h3 + .price {
    margin-top: 0.5rem;
  }
}
.detaile .inner section .option_wrap .option_name .text .price {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.detaile .inner section .option_wrap .option_name .text .price .ff_barlow {
  font-size: 150%;
  display: inline-block;
  margin-bottom: -0.05em;
}
.detaile .inner section .option_wrap .explanation {
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 2em;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .option_wrap .explanation {
    font-size: 1.4rem;
    margin-top: 1em;
    text-align: left;
  }
}
.detaile .inner section .option_wrap .explanation + .accordion {
  margin-top: 2em;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section .option_wrap .explanation + .accordion {
    margin-top: 1em;
  }
}
.detaile .inner section .option_wrap .accordion_box {
  font-size: 1.2rem;
}
.detaile .inner section + section {
  margin-top: 10rem;
}
@media only screen and (max-width: 768px) {
  .detaile .inner section + section {
    margin-top: 5rem;
  }
}
.detaile .more_detail {
  margin-top: 5rem;
}
@media only screen and (max-width: 768px) {
  .detaile .more_detail {
    margin-top: 4rem;
  }
}
.detaile .more_detail .accordion {
  background: #000018;
  color: #FFF;
}
.detaile .more_detail .accordion_box {
  /* クレードル */
}
.detaile .more_detail .accordion_box.all {
  padding: 4rem 4rem 4.5rem;
}
@media only screen and (max-width: 768px) {
  .detaile .more_detail .accordion_box.all {
    padding: 2rem 1.5rem 2.5rem;
  }
}
.detaile .more_detail .accordion_box .device_list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}
@media only screen and (max-width: 768px) {
  .detaile .more_detail .accordion_box .device_list {
    display: block;
  }
}
.detaile .more_detail .accordion_box .device_list .device_list_content {
  width: 50%;
}
@media only screen and (max-width: 768px) {
  .detaile .more_detail .accordion_box .device_list .device_list_content {
    width: 100%;
  }
}
.detaile .more_detail .accordion_box .device_list .device_list_content_header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_header p {
  font-size: 1.4rem;
  background: rgba(0, 0, 24, 0.32);
  color: #fff;
  padding: 0.2em 0.8em;
  border-radius: 0.5rem;
  display: inline-block;
}
@media only screen and (max-width: 768px) {
  .detaile .more_detail .accordion_box .device_list .device_list_content_header p {
    font-size: 1.2rem;
  }
}
.detaile .more_detail .accordion_box .device_list .device_list_content_header h2 {
  font-size: 3.2rem;
  font-weight: 900;
}
@media only screen and (max-width: 768px) {
  .detaile .more_detail .accordion_box .device_list .device_list_content_header h2 {
    font-size: 2.4rem;
  }
}
.detaile .more_detail .accordion_box .device_list .device_list_content_header .communication_service {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_header .communication_service li {
  font-size: 1.2rem;
  padding: 0.4em 1.2em;
  box-shadow: 0 0 0.64em rgba(0, 0, 0, 0.16);
}
.detaile .more_detail .accordion_box .device_list .device_list_content_img {
  margin: 3rem 0;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_img figure {
  text-align: center;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_img figure img {
  width: 70%;
  margin: 0 auto;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_img figure.l13 img {
  width: 50%;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_info {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin: 3.5rem 0 2rem;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_info h3 {
  border-right: solid 1px #000018;
  padding-right: 0.8em;
  margin-right: 0.8em;
  font-size: 2.4rem;
  line-height: 1.1;
  height: 100%;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_info h3 .span1 {
  font-size: 120%;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_info h3 .span2 {
  font-size: 136%;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_info dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  -moz-column-gap: 1em;
       column-gap: 1em;
  font-size: 2rem;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_info dl dt.long {
  display: block;
  width: 100%;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_info dl dd {
  text-align: right;
  flex: auto;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_info dl dd .span1 {
  font-size: 120%;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_info dl dd .span2 {
  font-size: 136%;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_info dl dd .span3 {
  font-size: 128%;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_info dl dd .lan_wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_info dl dd .lan_wrap .lan {
  font-size: 60%;
}
.detaile .more_detail .accordion_box .device_list .device_list_content .pdf_download {
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detaile .more_detail .accordion_box .device_list .device_list_content .pdf_download div {
  width: 49%;
  text-align: center;
  font-size: 1.4rem;
}
.detaile .more_detail .accordion_box .device_list .device_list_content .pdf_download div a {
  text-decoration: underline;
  position: relative;
  padding-right: 1.4em;
}
.detaile .more_detail .accordion_box .device_list .device_list_content .pdf_download div a::after {
  position: absolute;
  content: "";
  width: 1em;
  height: 1em;
  background: url(../img/out_link.svg) no-repeat center/contain;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.detaile .more_detail .accordion_box .device_list .device_list_content_detail {
  margin-top: 4rem;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_detail .accordion {
  font-size: 1.4rem;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_detail table {
  width: 100%;
  font-size: 1.2rem;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_detail table th {
  background: #787979;
  color: #fff;
  text-align: left;
  padding: 0.4em 0.6em;
  white-space: nowrap;
  border-bottom: 1px solid #fff;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_detail table td {
  border: solid 1px #F1EFF1;
  padding: 0.3em 0.6em;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_detail .note {
  font-size: 1.2rem;
}
.detaile .more_detail .accordion_box .device_list .device_list_content_note {
  font-size: 1.2rem;
  margin-top: 1.5em;
}
.detaile .more_detail .accordion_box .device_list_img {
  position: relative;
  width: 50%;
}
.detaile .more_detail .accordion_box .device_list_img figure {
  text-align: center;
}
.detaile .more_detail .accordion_box .device_list_img figure img {
  width: 70%;
  margin: 0 auto;
}
.detaile .more_detail .accordion_box .device_list_img figure.l13 img {
  width: 55%;
}
.detaile .more_detail .accordion_box .cv_wrap {
  margin-top: 2.5rem;
}
.detaile .more_detail .accordion_box .only_credle {
  margin-bottom: 3rem;
}
.detaile .more_detail .accordion_box .pc_credle {
  margin-bottom: 10rem;
}
.detaile .more_detail .accordion_box .device_list_content_cradle {
  padding: 0 2rem 0;
  margin-bottom: 3rem;
  margin-top: 4rem;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .detaile .more_detail .accordion_box .device_list_content_cradle {
    padding: 2rem 0 0;
    margin-bottom: 4rem;
    margin-top: 4rem;
  }
}
.detaile .more_detail .accordion_box .device_list_content_cradle .pc_flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}
.detaile .more_detail .accordion_box .device_list_content_cradle .pc_flex .pc_left {
  width: 28rem;
}
.detaile .more_detail .accordion_box .device_list_content_cradle .term {
  text-align: center;
  font-size: 1.6rem;
  background: #F61C93;
  position: absolute;
  top: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #fff;
  padding: 0 2rem;
  border-radius: 0.5rem;
}
@media only screen and (max-width: 768px) {
  .detaile .more_detail .accordion_box .device_list_content_cradle .term {
    padding: 0 1rem;
  }
}
.detaile .more_detail .accordion_box .device_list_content_cradle .term p {
  display: inline-block;
  position: relative;
}
.detaile .more_detail .accordion_box .device_list_content_cradle .term p::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 43%;
  margin-left: 0.8rem;
  border: 0.8rem solid transparent;
  border-top: 0.8rem solid #F61C93;
}
.detaile .more_detail .accordion_box .device_list_content_cradle .term p .ff_barlow {
  font-size: 2rem;
}
.detaile .more_detail .accordion_box .device_list_content_cradle .term p .small {
  font-size: 1.2rem;
}
.detaile .more_detail .accordion_box .device_list_content_cradle .top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
@media only screen and (max-width: 768px) {
  .detaile .more_detail .accordion_box .device_list_content_cradle .top {
    gap: 0.6rem;
  }
}
.detaile .more_detail .accordion_box .device_list_content_cradle .top .badge {
  background: linear-gradient(135deg, #E7C85D, #FFF699, #E7C85D);
  border-radius: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 7rem;
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.08);
  position: relative;
}
.detaile .more_detail .accordion_box .device_list_content_cradle .top .badge::before {
  content: "";
  display: block;
  width: 6.6rem;
  height: 6.6rem;
  border-radius: 999px;
  border: 0.05rem solid #795000;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.detaile .more_detail .accordion_box .device_list_content_cradle .top .badge p {
  color: #795000;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}
.detaile .more_detail .accordion_box .device_list_content_cradle .top .pink {
  font-weight: bold;
  font-size: 2.4rem;
  white-space: nowrap;
  line-height: 1.4;
}
@media only screen and (max-width: 768px) {
  .detaile .more_detail .accordion_box .device_list_content_cradle .top .pink {
    font-size: 1.6rem;
  }
}
.detaile .more_detail .accordion_box .device_list_content_cradle .top .pink .ff_barlow {
  font-size: 3.6rem;
}
@media only screen and (max-width: 768px) {
  .detaile .more_detail .accordion_box .device_list_content_cradle .top .pink .ff_barlow {
    font-size: 2.2rem;
  }
}
@media only screen and (max-width: 768px) {
  .detaile .more_detail .accordion_box .device_list_content_cradle .line {
    margin: 1.5rem 0;
    display: block;
    width: 100%;
    height: 0.1rem;
    background: #ccc;
  }
}
.detaile .more_detail .accordion_box .device_list_content_cradle picture {
  margin-top: 1rem;
}
@media only screen and (max-width: 768px) {
  .detaile .more_detail .accordion_box .device_list_content_cradle picture {
    display: block;
    margin: 0 auto;
    width: 22rem;
  }
}
.detaile .more_detail .accordion_box .device_list_content_cradle picture img {
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .detaile .more_detail .accordion_box .device_list_content_cradle .toggle {
    margin-top: 1.5rem;
  }
}
.detaile .more_detail .accordion_box .device_list_content_cradle .toggle h4 {
  font-weight: 700;
  line-height: 1.3;
  font-size: 1.6rem;
  border-bottom: solid 0.1rem #ccc;
  padding-bottom: 1rem;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .detaile .more_detail .accordion_box .device_list_content_cradle .toggle h4 {
    font-size: 1.4rem;
    cursor: pointer;
    color: #fff;
    background: #000018;
    position: relative;
  }
}
@media only screen and (max-width: 768px) {
  .detaile .more_detail .accordion_box .device_list_content_cradle .toggle h4::before {
    content: "";
    background: url(../images/icon_down_1.svg) no-repeat center/contain;
    width: 4.427vw;
    height: 4.427vw;
    position: absolute;
    right: 4.167vw;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    transition: 0.4s;
  }
}
.detaile .more_detail .accordion_box .device_list_content_cradle .toggle h4.close::before {
  transform: translate3d(0, -50%, 0) scale3d(-1, -1, -1);
}
.detaile .more_detail .accordion_box .device_list_content_cradle .toggle .toggle_panel {
  padding-top: 1rem;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.8;
}
@media only screen and (max-width: 768px) {
  .detaile .more_detail .accordion_box .device_list_content_cradle .toggle .toggle_panel {
    padding: 1rem 1.5rem;
    border-right: solid 1px #F1EFF1;
    border-left: solid 1px #F1EFF1;
    border-bottom: solid 1px #F1EFF1;
  }
}
.detaile .more_detail .accordion_box .device_list_content_cradle .toggle .toggle_panel .bold {
  margin-top: 0.8rem;
}
.detaile .more_detail .accordion_box .device_list_content_cradle .toggle .toggle_panel ul {
  padding-left: 2rem;
}
.detaile .more_detail .accordion_box .device_list_content_cradle .toggle .toggle_panel ul li {
  position: relative;
}
.detaile .more_detail .accordion_box .device_list_content_cradle .toggle .toggle_panel ul li::before {
  content: "";
  background: url(../img/icon_check_pink.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-120%) translateY(40%);
}
.detaile .more_detail .accordion_box .device_list_content_cradle .note {
  margin-top: 1.2em;
  font-size: 1rem;
}

/*お支払いについて*/
.about_payment {
  position: relative;
}
.about_payment::before {
  content: "payment";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-family: "Open Sans", sans-serif;
  font-size: 20rem;
  font-weight: bold;
  color: #FFF2F9;
  line-height: 0.6;
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .about_payment::before {
    top: 2rem;
    font-size: 8.8rem;
  }
}
.about_payment .inner {
  padding: 10rem 20.4rem;
}
@media only screen and (max-width: 768px) {
  .about_payment .inner {
    padding: 6rem 2.4rem;
  }
}
.about_payment .payment_image {
  position: relative;
  margin-top: 4rem;
  display: flex;
  gap: 1.5rem;
}
.about_payment .payment_image--wrap {
  position: relative;
  background: #FFF2F9;
  border-radius: 0.5rem;
  padding: 4rem 0 2rem;
  width: calc(50% - 0.75rem);
}
.about_payment .payment_image--wrap p {
  text-align: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.about_payment .payment_image--wrap p span {
  display: inline-block;
  padding: 0.25em 1em;
  color: #fff;
  white-space: nowrap;
  background: #F61C93;
  font-size: 1.6rem;
  border-radius: 0 0 0.5rem 0.5rem;
}
@media only screen and (max-width: 768px) {
  .about_payment .payment_image--wrap p span {
    font-size: 1.2rem;
  }
}
.about_payment .payment_image--wrap figure {
  margin: 1rem auto 0 auto;
  height: 12.5rem;
}
@media only screen and (max-width: 768px) {
  .about_payment .payment_image--wrap figure {
    height: 7.2rem;
  }
}
.about_payment .payment_image--wrap.first_month figure {
  width: 20.5rem;
}
@media only screen and (max-width: 768px) {
  .about_payment .payment_image--wrap.first_month figure {
    width: 11.8rem;
  }
}
.about_payment .payment_image--wrap.thereafter figure {
  width: 15.5rem;
}
@media only screen and (max-width: 768px) {
  .about_payment .payment_image--wrap.thereafter figure {
    width: 8.9rem;
  }
}
.about_payment .payment_image--wrap.thereafter .withdrawal {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  content: "";
  top: 2.5rem;
  right: 5rem;
  width: 12rem;
  height: 12rem;
  background: url(../img/star_yellow.svg) no-repeat center/contain;
  line-height: 1.2;
  font-weight: 700;
}
.about_payment .payment_image--wrap.thereafter .withdrawal .text_wrap {
  font-size: 1.2rem;
}
.about_payment .payment_image--wrap.thereafter .withdrawal .text_wrap .number {
  color: #F61C93;
  font-size: 2rem;
}
.about_payment .payment_image--wrap.thereafter .withdrawal .text_wrap .medium {
  font-size: 1.6rem;
}
.about_payment .payment_image::after {
  position: absolute;
  content: "";
  top: 50%;
  left: calc(50% - 1.25rem);
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  background: url(../img/arrow_right.svg) no-repeat center/contain;
}
@media only screen and (max-width: 768px) {
  .about_payment .payment_image::after {
    left: calc(50% - 1.25rem);
  }
}
.about_payment .table_wrap {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
}
@media only screen and (max-width: 768px) {
  .about_payment .table_wrap {
    flex-direction: column;
    position: relative;
  }
}
.about_payment .table_wrap .withdrawal {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  content: "";
  bottom: 8.5rem;
  right: -2.5rem;
  width: 10rem;
  height: 10rem;
  background: url(../img/star_yellow.svg) no-repeat center/contain;
  line-height: 1.2;
  font-weight: 700;
}
.about_payment .table_wrap .withdrawal .text_wrap {
  font-size: 1rem;
}
.about_payment .table_wrap .withdrawal .text_wrap .number {
  color: #F61C93;
  font-size: 1.6rem;
}
.about_payment .table_wrap .withdrawal .text_wrap .medium {
  font-size: 1.2rem;
}
.about_payment .table_wrap table {
  border-collapse: unset;
  border-radius: 0.5rem;
  border: solid 1px #000018;
  overflow: hidden;
  background: #fff;
  font-size: 1.4rem;
  width: calc(50% - 0.75rem);
}
@media only screen and (max-width: 768px) {
  .about_payment .table_wrap table {
    font-size: 1.2rem;
    width: 100%;
  }
}
.about_payment .table_wrap table thead th {
  line-height: 1.2;
  padding: 0.5em 1em;
  text-align: center;
  vertical-align: middle;
  background: #000018;
  color: #fff;
  font-size: 1.6rem;
}
@media only screen and (max-width: 768px) {
  .about_payment .table_wrap table thead th {
    font-size: 1.2rem;
  }
}
.about_payment .table_wrap table tbody th {
  width: 36%;
  text-align: center;
  padding: 0.6em 1em;
  background: #F1EFF1;
  border-top: solid 1px #000018;
  border-right: solid 1px #000018;
}
.about_payment .table_wrap table tbody td {
  width: 64%;
  padding: 0.6em 1em;
  border-top: solid 1px #000018;
}
.about_payment .table_wrap table tbody td .strong {
  font-weight: 600;
}
.about_payment .bond_payment {
  margin-top: 5rem;
  padding-top: 5rem;
  border-top: solid 1px #ddd;
}
@media only screen and (max-width: 768px) {
  .about_payment .bond_payment {
    margin-top: 3rem;
    padding-top: 3rem;
  }
}
.about_payment .bond_payment h3 {
  text-align: center;
}
.about_payment .bond_payment h3 span {
  position: relative;
  display: inline-block;
  font-size: 3.2rem;
  padding-left: 2em;
  font-weight: 600;
}
@media only screen and (max-width: 768px) {
  .about_payment .bond_payment h3 span {
    font-size: 2.4rem;
  }
}
.about_payment .bond_payment h3 span::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  background: url(../img/question_mark.svg) no-repeat center/contain;
  transform: translateY(-50%);
  width: 5rem;
  height: 5.75rem;
}
@media only screen and (max-width: 768px) {
  .about_payment .bond_payment h3 span::before {
    width: 4rem;
    height: 4.6rem;
  }
}
.about_payment .bond_payment .breakdown {
  text-align: center;
  margin: 1em 0 1.45em;
}
.about_payment .bond_payment .breakdown p {
  position: relative;
  color: #F61C93;
  font-size: 2.4rem;
  font-weight: 600;
  display: inline-block;
  padding-bottom: 0.2em;
}
@media only screen and (max-width: 768px) {
  .about_payment .bond_payment .breakdown p {
    font-size: 1.8rem;
  }
}
.about_payment .bond_payment .breakdown p .mark {
  vertical-align: text-top;
  font-size: 1.2rem;
  font-weight: 400;
}
@media only screen and (max-width: 768px) {
  .about_payment .bond_payment .breakdown p .mark {
    font-size: 1rem;
  }
}
.about_payment .bond_payment .breakdown p .note {
  font-weight: 400;
  position: absolute;
  bottom: -2em;
  right: 0;
  margin-top: 1em;
  font-size: 1.2rem;
}
@media only screen and (max-width: 768px) {
  .about_payment .bond_payment .breakdown p .note {
    font-size: 1rem;
  }
}
.about_payment .bond_payment .breakdown p::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  background: #F61C93;
  bottom: 0;
  left: 0;
}
.about_payment .bond_payment--detail {
  position: relative;
  display: flex;
  justify-content: space-around;
  margin-top: 3rem;
}
@media only screen and (max-width: 768px) {
  .about_payment .bond_payment--detail {
    gap: 1.5rem;
  }
}
.about_payment .bond_payment--detail::after {
  position: absolute;
  content: "";
  width: 50%;
  height: 0.3rem;
  background: linear-gradient(90deg, #6E4DF1 0%, #F61C93 100%);
  top: 5rem;
  left: 25%;
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .about_payment .bond_payment--detail::after {
    top: 3.5rem;
  }
}
.about_payment .bond_payment--detail--content {
  margin-top: 8rem;
  padding: 3.5rem 0 3rem;
  position: relative;
  width: 33.3333333333%;
  text-align: center;
  border-radius: 0.5rem;
}
@media only screen and (max-width: 768px) {
  .about_payment .bond_payment--detail--content {
    width: calc(50% - 0.75rem);
    margin-top: 5.6rem;
    padding: 2.5rem 0 2rem;
  }
}
.about_payment .bond_payment--detail--content .period {
  position: absolute;
  top: -8rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: solid 0.4rem #fff;
  width: 5em;
  height: 5em;
  font-size: 2rem;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .about_payment .bond_payment--detail--content .period {
    font-size: 1.4rem;
    top: -5.6rem;
  }
}
.about_payment .bond_payment--detail--content .box {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.about_payment .bond_payment--detail--content .box p {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
  .about_payment .bond_payment--detail--content .box p {
    font-size: 1.6rem;
    min-height: 2.8em;
  }
}
.about_payment .bond_payment--detail--content .box figure {
  margin: 0 auto;
  min-height: 15rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
  .about_payment .bond_payment--detail--content .box figure {
    min-height: 13rem;
  }
}
.about_payment .bond_payment--detail--content.first_month {
  background: #F1EFF1;
}
.about_payment .bond_payment--detail--content.first_month .period {
  background: #6E4DF1;
}
.about_payment .bond_payment--detail--content.first_month .box p {
  color: #6E4DF1;
}
.about_payment .bond_payment--detail--content.first_month .box figure {
  width: 10.8rem;
  height: 11rem;
}
@media only screen and (max-width: 768px) {
  .about_payment .bond_payment--detail--content.first_month .box figure {
    width: 8.5rem;
    height: 8.66rem;
  }
}
.about_payment .bond_payment--detail--content.seven_month {
  background: #FFF2F9;
}
.about_payment .bond_payment--detail--content.seven_month .period {
  background: #F61C93;
}
.about_payment .bond_payment--detail--content.seven_month .box p {
  color: #F61C93;
}
.about_payment .bond_payment--detail--content.seven_month .box figure {
  width: 14.7rem;
  height: 15rem;
}
@media only screen and (max-width: 768px) {
  .about_payment .bond_payment--detail--content.seven_month .box figure {
    width: 12.74rem;
    height: 13rem;
  }
}
.about_payment .bond_payment--explanation {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}
.about_payment .bond_payment--explanation ul li {
  font-size: 1.6rem;
  padding-left: 1.8em;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .about_payment .bond_payment--explanation ul li {
    font-size: 1.4rem;
  }
}
.about_payment .bond_payment--explanation ul li a {
  text-decoration: underline;
}
.about_payment .bond_payment--explanation ul li::before {
  position: absolute;
  content: "";
  background: url(../img/check_pink.svg) no-repeat center/contain;
  width: 1.25em;
  height: 1.25em;
  top: 0.3em;
  left: 0;
}
.about_payment .bond_payment--explanation ul li + li {
  margin-top: 0.4em;
}

/*ご利用までの流れ*/
.flow-of-usage {
  background: #F1EFF1;
  position: relative;
}
.flow-of-usage::before {
  content: "flow";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-family: "Open Sans", sans-serif;
  font-size: 20rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1;
  z-index: 0;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage::before {
    top: 3rem;
    font-size: 12rem;
  }
}
.flow-of-usage .inner {
  position: relative;
  z-index: 1;
  padding: 10rem 20.4rem;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .inner {
    padding: 6rem 2.4rem;
  }
}
.flow-of-usage .flow_list {
  margin-top: 5rem;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list {
    margin-top: 4rem;
  }
}
.flow-of-usage .flow_list li {
  width: calc(100vw - 20.4rem);
  display: flex;
  gap: 4%;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list li {
    width: calc(100vw - 2.4rem);
    padding: 3rem 2.4rem 3.5rem 2.4rem;
    display: block;
  }
}
.flow-of-usage .flow_list li + li {
  margin-top: 3rem;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list li + li {
    margin-top: 1.5rem;
  }
}
.flow-of-usage .flow_list li + .payment_card {
  margin-top: 6rem;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list li + .payment_card {
    margin-top: 5rem;
  }
}
.flow-of-usage .flow_list .image {
  position: relative;
  width: 48%;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list .image {
    width: 100%;
  }
}
.flow-of-usage .flow_list .image .icon {
  text-align: center;
  border-radius: 50%;
  position: absolute;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  border: solid 0.5rem;
  width: 15.5rem;
  height: 15.5rem;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list .image .icon {
    width: 12.5rem;
    height: 12.5rem;
  }
}
.flow-of-usage .flow_list .image .icon img {
  width: 6rem;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list .image .icon img {
    width: 5rem;
  }
}
.flow-of-usage .flow_list .image .icon p {
  line-height: 1.25;
  width: 100%;
  font-weight: 700;
  font-size: 2rem;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list .image .icon p {
    font-size: 1.6rem;
  }
}
.flow-of-usage .flow_list .text {
  width: 48%;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list .text {
    width: 100%;
    margin-top: 1.8rem;
  }
}
.flow-of-usage .flow_list .text .list_heading {
  display: flex;
  align-items: center;
  min-height: 10rem;
  margin-left: 1.5rem;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list .text .list_heading {
    min-height: 7rem;
    margin-left: 1rem;
  }
}
.flow-of-usage .flow_list .text .list_heading .step {
  text-align: center;
  color: #000018;
  width: 7rem;
  height: 7rem;
  background: #F1EFF1;
  border-radius: 3px;
  font-size: 1.5rem;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list .text .list_heading .step {
    width: 5rem;
    height: 5rem;
    font-size: 1.2rem;
  }
}
.flow-of-usage .flow_list .text .list_heading .step .rhombus {
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 7rem;
  height: 7rem;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list .text .list_heading .step .rhombus {
    width: 5rem;
    height: 5rem;
  }
}
.flow-of-usage .flow_list .text .list_heading .step--number {
  width: 100%;
  font-size: 3.4rem;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list .text .list_heading .step--number {
    font-size: 2.4rem;
  }
}
.flow-of-usage .flow_list .text .list_heading h3 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  line-height: 1.6;
  font-weight: 700;
  font-size: 3.2rem;
  margin-left: calc(1.5rem + 0.5em);
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list .text .list_heading h3 {
    font-size: 2.4rem;
    margin-left: calc(1rem + 0.5em);
  }
}
.flow-of-usage .flow_list .text p {
  font-size: 1.6rem;
  margin-top: 1em;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list .text p {
    font-size: 1.4rem;
    margin-top: 1rem;
  }
}
.flow-of-usage .flow_list--customer {
  background: #4A96FF;
  border-radius: 0 5rem 5rem 0;
  margin: 0 0 0 -20.4rem;
  padding: 6rem 6rem 6rem 20.4rem;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list--customer {
    margin: 0 0 0 -2.4rem;
    border-radius: 0 2rem 2rem 0;
  }
}
.flow-of-usage .flow_list--customer .image .icon {
  background: #FDCA14;
  border-color: #fff;
  top: -2rem;
  left: -2rem;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list--customer .image .icon {
    top: -1.5rem;
    left: -1.5rem;
    right: auto;
  }
}
.flow-of-usage .flow_list--customer .text .list_heading h3 {
  color: #fff;
}
.flow-of-usage .flow_list--customer .text p {
  color: #fff;
}
.flow-of-usage .flow_list--customer_center {
  background: #fff;
  border-radius: 5rem 0 0 5rem;
  margin: 0 -20.4rem 0 0;
  padding: 6rem 20.4rem 6rem 6rem;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list--customer_center {
    margin: 0 -2.4rem 0 0;
    border-radius: 2rem 0 0 2rem;
  }
}
.flow-of-usage .flow_list--customer_center .image .icon {
  background: #EBF3FF;
  border-color: #6E4DF1;
  color: #6E4DF1;
  bottom: -2rem;
  right: -2rem;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list--customer_center .image .icon {
    top: -1.5rem;
    left: -1.5rem;
    right: auto;
  }
}
.flow-of-usage .flow_list .payment_card {
  text-align: center;
}
.flow-of-usage .flow_list .payment_card + li {
  margin-top: 6rem;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list .payment_card + li {
    margin-top: 5rem;
  }
}
.flow-of-usage .flow_list .payment_card .speech_bubble {
  display: inline-block;
  position: relative;
}
.flow-of-usage .flow_list .payment_card .speech_bubble::after {
  content: "";
  position: absolute;
  top: -2.8rem;
  left: -3rem;
  width: 4rem;
  height: 4rem;
  background: url(../img/card_payment.svg) no-repeat center/contain;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list .payment_card .speech_bubble::after {
    width: 3rem;
    height: 3rem;
    top: -1.9rem;
    left: -2.1rem;
  }
}
.flow-of-usage .flow_list .payment_card .speech_bubble span {
  display: inline-block;
  position: relative;
  background: #FFF717;
  font-weight: 700;
  border-radius: 1rem;
  padding: 1em 1em 1em calc(1.5em + 4.7rem);
  font-size: 2.4rem;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list .payment_card .speech_bubble span {
    font-size: 1.6rem;
  }
}
.flow-of-usage .flow_list .payment_card .speech_bubble span::before, .flow-of-usage .flow_list .payment_card .speech_bubble span::after {
  content: "";
  position: absolute;
}
.flow-of-usage .flow_list .payment_card .speech_bubble span::before {
  width: 4.7rem;
  height: 4.7rem;
  background: url(../img/payment-01.svg) no-repeat center/contain;
  left: 1em;
  top: 50%;
  transform: translateY(-50%);
}
.flow-of-usage .flow_list .payment_card .speech_bubble span::after {
  border-width: 2rem;
  border-style: solid;
  border-color: #FFF717 transparent transparent transparent;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list .payment_card .speech_bubble span::after {
    border-width: 1.5rem;
  }
}
.flow-of-usage .flow_list + .cv_wrap {
  margin-top: 4rem;
}
@media only screen and (max-width: 768px) {
  .flow-of-usage .flow_list + .cv_wrap {
    margin-top: 3rem;
  }
}

/*よくある質問*/
.faq {
  padding: 10rem 33.6rem 10rem;
  background: #fff;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .faq {
    padding: 6rem 2.4rem 6rem;
  }
}
.faq::before {
  content: "faq";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-family: "Open Sans", sans-serif;
  font-size: 20rem;
  font-weight: bold;
  color: #FFF2F9;
  line-height: 1;
  z-index: 0;
}
@media only screen and (max-width: 768px) {
  .faq::before {
    top: 2rem;
    font-size: 12rem;
  }
}
.faq .inner {
  position: relative;
  z-index: 1;
}
.faq--list {
  margin-top: 5rem;
}
@media only screen and (max-width: 768px) {
  .faq--list {
    margin-top: 4rem;
  }
}
.faq--list dl {
  background: #F1EFF1;
}
.faq--list dl dt {
  text-align: left;
  transition: 300ms;
  font-weight: bold;
  position: relative;
  height: auto;
  line-height: 1.4;
  font-size: 1.6rem;
  padding: 2rem 4rem 2rem 7rem;
  cursor: pointer;
  border-bottom: 3px #fff solid;
}
@media only screen and (max-width: 768px) {
  .faq--list dl dt {
    font-size: 1.4rem;
    padding: 1.5rem 4rem 1.5rem 5.4rem;
  }
}
.faq--list dl dt::before {
  content: "Q.";
  font-size: 2.4rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 3.2rem;
  transform: translateY(-50%);
  color: #6E4DF1;
}
@media only screen and (max-width: 768px) {
  .faq--list dl dt::before {
    font-size: 2.4rem;
    left: 1.6rem;
  }
}
.faq--list dl dt::after {
  content: "";
  font-size: 1.8rem;
  position: absolute;
  top: 50%;
  right: 3.6rem;
  background: url(../img/icon_down_2.svg) no-repeat center/contain;
  width: 1.2em;
  height: 1.2em;
  transform: translateY(-50%) rotate(0);
}
@media only screen and (max-width: 768px) {
  .faq--list dl dt::after {
    font-size: 1rem;
    right: 1.2rem;
  }
}
.faq--list dl .close::after {
  transform: translateY(-50%) rotate(180deg);
}
.faq--list dl dd {
  display: none;
  position: relative;
  padding: 2rem 4rem 2rem 7rem;
  position: relative;
  border: none;
  border-bottom: 3px #fff solid;
  background: #F1EFF1;
}
@media only screen and (max-width: 768px) {
  .faq--list dl dd {
    padding: 2rem 4rem 2rem 5.4rem;
  }
}
.faq--list dl dd::before {
  line-height: 1;
  content: "A.";
  font-size: 2.4rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  position: absolute;
  top: 2.4rem;
  left: 3.2rem;
  color: #F61C93;
}
@media only screen and (max-width: 768px) {
  .faq--list dl dd::before {
    font-size: 2.4rem;
    top: 2rem;
    left: 1.9rem;
  }
}
.faq--list dl dd p {
  font-size: 1.4rem;
  line-height: 1.6;
}

/**/
.footer {
  width: 100%;
  text-align: center;
  padding-top: 6rem;
}
@media only screen and (max-width: 768px) {
  .footer {
    padding-top: 4rem;
  }
}
.footer .logo {
  margin: 0 auto 6rem;
  width: 30rem;
}
@media only screen and (max-width: 768px) {
  .footer .logo {
    margin: 0 auto 4rem;
    width: 20rem;
  }
}
.footer .copyright {
  background: #000018;
  color: #fff;
  padding: 1.5em 0;
  font-size: 1.2rem;
}

/* modal */
.micromodal-slide {
  display: none;
}
.micromodal-slide.is-open {
  display: block;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  z-index: 999;
}

.modal__container {
  background-color: #fff;
  padding: 3rem;
  max-width: 80%;
  max-height: 90vh;
  border-radius: 4px;
  overflow-y: auto;
  box-sizing: border-box;
}
@media only screen and (max-width: 768px) {
  .modal__container {
    padding: 2rem;
  }
}
.modal__container .description {
  text-align: left;
  font-weight: normal;
  margin: 1em 0 2em;
  font-size: 2rem;
}
@media only screen and (max-width: 768px) {
  .modal__container .description {
    font-size: 1.4rem;
  }
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  line-height: 1.25;
  box-sizing: border-box;
  width: 100%;
  font-size: 2.8rem;
}
@media only screen and (max-width: 768px) {
  .modal__title {
    font-size: 1.8rem;
  }
}

.modal__close {
  background: transparent;
  border: 0;
}

.modal__header .modal__close:before {
  content: "✕";
}

.modal__content {
  color: rgba(0, 0, 0, 0.8);
}

.modal__btn-primary {
  background-color: #00449e;
  color: #fff;
}

/**************************\
    Demo Animation Style
  \**************************/
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}
.micromodal-slide[aria-hidden=false] .modal__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=false] .modal__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=true] .modal__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=true] .modal__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}/*# sourceMappingURL=style.css.map */