@charset "UTF-8";
/*変数*/
:root {

  /*色*/
  --main-color: #019178;
  --red-color: #CC0C39;
  --faq-color: #E3E6E6;
  --btn-color: #FFCA00;
  --text-color: #333333;
  --border-color: #E3E6E6;

  /*コンテンツ幅*/
  --max-width: 652px;
  --max-width-wrap: 1100px;

  /*ボタンサイズ*/
  --btn_width: 450px;
  --btn_height: clamp(45px, 22.723px + 4.95vw, 55px);
  --btn_font-size: clamp(16px, 2.634px + 2.97vw, 22px);

  /*見出しサイズ*/
  --h2_font-size: clamp(24px, 17.793px + 1.655vw, 36px);
  --h2_height: clamp(55px, 41.034px + 3.724vw, 82px);
  --h3_font-size: 22px;

  /*マージン設定*/
  --margin-bottom_L: clamp(73px, -85.168px + 35.149vw, 144px);
  --margin-bottom_M: clamp(45px, 26.897px + 4.828vw, 80px);
  --margin-bottom_S: 24px;
  --margin-bottom_btn: 13px;
}

/*---------------*/
/*--共通設定------*/
/*---------------*/

p {
  color: var(--text-color);
  font-size: clamp(1rem, 0.939rem + 0.26vw, 1.25rem);
}
.wrap {
  width: 100%;
  max-width: var(--max-width-wrap);
}
.content-wrap {
  margin: 0 auto clamp(73px, -85.168px + 35.149vw, 144px) !important;
}
.content-wrap--marginSML {
  margin: 0 auto clamp(45px, 26.897px + 4.828vw, 80px) !important;
}
.inner-wrap {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}
.mainColor {
  color: var(--main-color);
}
.textColor {
  color: var(--text-color);
}
.redColor {
  color: var(--red-color);
}
.pc-display {
  display: none;
}
@media screen and (max-width:600px ) {
  .pc-display {
    display: inline;
  }
}
.margin-bottom_S {
margin: 0 auto var(--margin-bottom_S);
}
.margin-bottom_M {
margin: 0 auto var(--margin-bottom_M);
}
.margin-bottom_L {
margin: 0 auto var(--margin-bottom_L);
}

/*---------------*/
/*--申込みボタン--*/
/*---------------*/

.moushikomi_btn--wrap a {
  width: 90%;
  max-width: var(--btn_width);
  height: var(--btn_height);
  background-color: var(--btn-color);
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--btn_font-size);
  text-decoration: none;
  color: var(--text-color);
  margin: 0 auto;
}
.moushikomi_btn--wrap a:hover {
  filter: brightness(90%);
}

/*-----------------*/
/*--見出しスタイル--*/
/*-----------------*/
.h2 {
    font-size: var(--h2_font-size) !important;
    font-weight: bold;
    text-align: center;
    color: var(--main-color);
    margin-bottom: var(--margin-bottom_S)!important;
}
.h2--style01 {
  font-size: var(--h2_font-size);
  color: var(--main-color);
  text-align: center;
  position: relative;
  margin-bottom: clamp(33px, -16.010px + 10.891vw, 55px);
}
.h2--style01::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--main-color);
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
span.bg-white {
  background-color: #fff;
  position: relative;
  padding: 5px 20px;
}
.h2--style02 {
  font-size: var(--h2_font-size);
  color: #fff;
  text-align: center;
  background-color: var(--main-color);
  margin-bottom: clamp(33px, -16.010px + 10.891vw, 55px);
  height: var(--h2_height);
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
}
.h2--style02 .h2-bigSize {
  font-size: clamp(1.5rem, -0.066rem + 7.83vw, 3.125rem);
  color: #fff;
}
.h3 {
  font-size: 22px;
}

/*-----------------*/
/*--選ばれています--*/
/*-----------------*/
.choose .inner-wrap {
  width: 90%;
  max-width: 1100px;
}
.choose-cards {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 2px 1px 10px;
  scrollbar-width: thin;
}
.choose-card {
  flex: 0 0 85%;
  border-radius: 5px;
  border: 1px solid var(--main-color);
  box-sizing: border-box;
  padding: 20px 10px;
}
@media screen and (min-width: 601px) {
  .choose-cards {
    overflow-x: hidden;
  }
  .choose-card {
    flex-basis: calc((100% - 40px) / 3);
  }
}
.choose-text {
  font-weight: bold;
  font-size: 22px;
  color: var(--main-color);
}
.choose-img {
  margin: 0 auto 22px;
  width: 42px;
}
/*----------------------*/
/*--業界屈指の格安設定！--*/
/*----------------------*/
.cheap {
  background-color: #f1f4f3;
  padding: 36px 0 1px;
}
.cheap .h2 {
  margin-bottom: 26px !important;
}
.cheap .inner-wrap {
  width: 90%;
  max-width: 520px;
}
.cheap-price-box {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  padding: 17px 10px 12px;
  text-align: center;
}
.cheap-plan {
  color: var(--main-color);
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}
.cheap-price {
  font-size: clamp(18px, 4.2vw, 24px);
  font-weight: bold;
  line-height: 1.2;
}
.cheap-price span {
  color: var(--red-color);
  font-size: clamp(42px, 11vw, 58px);
  line-height: 1;
  margin: 0 3px;
}
.cheap-points {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.cheap-points li {
  position: relative;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  font-size:16px;
  margin-bottom: 7px;
  padding: 8px 8px 8px 45px;
}
.cheap-points li::before {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 15px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--main-color);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
  text-align: center;
  transform: translateY(-50%);
}
.cheap-notes {
  margin: 17px 0 32px;
}
.cheap-notes p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
.cheap .moushikomi_btn--wrap a {
  width: 90%;
}

/*---------------------*/
/*--困ったを丸ごと解決--*/
/*---------------------*/
.problem .h2 {
  margin-bottom: 28px !important;
}
.problem-intro{
  font-weight: bold;
  text-align: center;
  font-size: clamp(15px, 3.9vw, 20px);
  margin-bottom: 12px;
}
.problem-list {
  display: grid;
  gap: 25px;
  max-width: 680px;
}
.problem-card {
  border: 1px solid var(--main-color);
  border-radius: 5px;
  padding: 17px 14px 20px;
}
.problem-card h3 {
  background-color: #f1f4f3;
  border-radius: 5px;
  color: var(--main-color);
  font-size: clamp(20px, 5.3vw, 28px);
  line-height: 1.35;
  margin: 0 0 25px;
  padding: 17px 8px;
  text-align: center;
}
.problem-card-body {
  align-items: center;
  display: grid;
  gap: 13px;
  grid-template-columns: 78px 1fr;
}
.problem-card-body img {
  width: 78px;
}
.problem-card-body p {
  line-height: 1.55;
  margin: 0;
}
.problem-arrow {
  border-top: 35px solid var(--main-color);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  height: 0;
  margin: 35px auto 30px;
  width: 0;
}
.solution-list {
  display: grid;
  gap: 25px;
  margin-bottom: 55px;
}
.solution-card {
  background-color: var(--main-color);
  border-radius: 5px;
  padding: 17px 14px 18px;
  width: 90%;
  margin: 0 auto;
}
.solution-card h3 {
  color: #fff;
  font-size: clamp(18px, 4.8vw, 25px);
  line-height: 1.35;
  margin: 0 0 13px;
  text-align: center;
}
.solution-card p {
  background-color: #fff;
  border-radius: 5px;
  color: var(--text-color);
  line-height: 1.6;
  margin: 0;
  padding: 17px 8px;
}
.problem-solution + .moushikomi_btn--wrap {
  margin-bottom: 0 !important;
}
@media screen and (min-width: 601px) {
  .solution-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .solution-card {
    padding: 22px 15px 20px;
    width: 100%;
  }
  .solution-card h3 {
    font-size: 20px;
  }
  .solution-card p {
    font-size: 16px;
  }
}
/*-----------------*/
/*--補償内容----*/
/*-----------------*/
.compensation {
  background-color: #f1f4f3;
  padding: 45px 0 clamp(73px, -85.168px + 35.149vw, 144px);
}
.compensation-inner {
  margin: 0 auto;
  max-width: 652px;
  width: 90%;
}
.compensation-heading,
.compensation-subheading,
.compensation-reason-heading {
  color: var(--main-color);
  font-weight: bold;
}
.compensation-heading {
  font-size: clamp(24px, 6vw, 36px);
  margin: 0 0 44px;
  text-align: center;
}
.compensation-subheading {
  font-size: clamp(20px, 5.2vw, 30px);
  margin: 0 0 20px;
  text-align: center;
}
.compensation-tabs {
  display: grid;
  gap: 7px;
}
.compensation-tab {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.compensation-tab summary {
  cursor: pointer;
  font-weight: bold;
  list-style: none;
  padding: 13px 42px 13px 15px;
  position: relative;
  color:var(--text-color);
  font-size:clamp(1rem, 0.939rem + 0.26vw, 1.25rem);
}
.compensation-tab summary::-webkit-details-marker {
  display: none;
}
.compensation-toggle {
  border-bottom: 2px solid #333;
  border-right: 2px solid #333;
  font-size: 0;
  height: 9px;
  position: absolute;
  right: 18px;
  top: 45%;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.2s ease;
  width: 9px;
}
.compensation-tab[open] .compensation-toggle {
  top: 55%;
  transform: translateY(-50%) rotate(225deg);
}
.compensation-tab p {
  line-height: 1.55;
  margin: 0;
  padding: 0 15px 13px;
}
.compensation-reason-heading {
  font-size: clamp(20px, 5.2vw, 30px);
  line-height: 1.35;
  margin: 58px 0 20px;
}
.compensation-reason {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  padding: 28px 15px;
}
.compensation-reason p {
  line-height: 1.6;
  margin: 0 0 24px;
}
.compensation-reason p:last-child {
  margin-bottom: 0;
}
/*-----------------*/
/*--よくある質問----*/
/*-----------------*/
.faq-item {
  background-color: var(--faq-color);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  overflow: hidden;
}

.faq-question {
  display: flex;
  align-items: center;
  font-size: clamp(1rem, 0.639rem + 1.81vw, 1.375rem);
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  gap: 10px;
  color:var(--text-color);
}

.faq-q {
  font-size: 1.5em;
  margin-right: 10px;
}

.faq-toggle-icon {
  margin-left: auto;
  font-size: 1.5em;
  color: #333;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  padding-top: 0;
}

.faq-answer p {
  margin: 0;
  padding-top: 10px;
}

.faq-item.active .faq-answer {
  max-height: 2000px;
  padding-top: 15px;
}

.faq-toggle-icon .fa-plus,
.faq-toggle-icon .fa-minus {
  transition: opacity 0.3s ease;
}

/*-----------------*/
/*--ご加入の流れ----*/
/*-----------------*/
.flow-box {
  display: grid;
  grid-template-columns: clamp(6.688rem, 4.037rem + 13.25vw, 9.438rem) auto;
  align-items: center;
  gap: clamp(1.25rem, 0.648rem + 3.01vw, 1.875rem);
  margin-bottom: 30px;
}
p.flow-title {
  color: var(--main-color);
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
}
.arrow {
  width: clamp(3.375rem, 1.628rem + 8.73vw, 5.188rem);
  margin: 30px auto;
}
.date8 {
  width: clamp(11rem, 5.94rem + 25.3vw, 16.25rem);
  margin: 30px auto 10px;
}
img {
    width: 100%;
    display: block;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}