/*====================================================
////id |  introduction
====================================================*/
.introduction-head {
  letter-spacing: 0.1em;
}

/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
  .introduction-inner {
    padding: min(10vw, 40px) 0;
  }
  .introduction-head {
    font-size: min(6.4vw, 2.8rem);
  }
  .introduction-head-wrapper + .introduction-text {
    margin-top: 1.6em;
  }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
  .introduction-head {
    font-size: min(3.8vw, 3.3rem);
  }
  .introduction-head-wrapper + .introduction-text {
    margin-top: 2.6em;
  }
}

@media (hover: hover) {
}

/*====================================================
////id |  trouble
====================================================*/
#trouble::before {
  background: var(--l_yellow);
  content: "";
  display: block;
  margin: auto;
  position: absolute;
}
.trouble-img-figure {
  border-radius: 15px;
}
.trouble-text {
  font-size: 1.11em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 959.9px) {
  #trouble::before {
    top: 0;
    left: 0;
    width: 97.5%;
    height: min(52vw, 300px);
    max-height: 50%;
  }
  #trouble:has(.trouble-img)::before {
    top: min(30vw, 140px);
  }
  .trouble-inner {
    padding: min(10vw, 40px) 0 min(15vw, 70px);
  }
  .trouble-img {
    margin: 0 0 min(10vw, 40px) auto;
    width: min(90%, 500px);
  }
  .trouble-img-figure {
    padding-top: min(60%, 280px);
  }
  .trouble-head {
    font-size: min(3.8vw, 3.3rem);
    letter-spacing: 0.06em;
    line-height: 1.6;
  }
}
@media screen and (max-width: 769px) {
  .trouble-head {
    font-size: min(6.4vw, 2.8rem);
  }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 960px) {
  #trouble::before {
    top: 0;
    left: 0;
    width: 57%;
    height: 66%;
  }
  .trouble-inner {
    padding: 80px 0;
  }
  .trouble-content {
    display: flex;
    grid-gap: min(4vw, 80px);
  }
  .trouble-head {
    font-size: min(3.8vw, 3.3rem);
    letter-spacing: 0.1em;
  }
  .trouble-img {
    margin-top: min(5vw, 50px);
    width: min(40%, 480px);
  }
  .trouble-img-figure {
    height: 100%;
    padding-top: 100%;
  }
  .trouble-text-wrapper {
    flex: 1;
    padding-bottom: min(5vw, 50px);
  }
}

@media (hover: hover) {
}

/*====================================================
////id |  about
====================================================*/
#trouble + #about .about-inner {
  padding-top: min(3vw, 20px);
}
.about-content + .about-content {
  margin-top: min(10.5vw, 60px);
}
.about-head-wrapper {
  border-bottom: solid 1px var(--green);
  margin-bottom: min(7vw, 40px);
  overflow: hidden;
}
.about-text {
  margin: auto;
  max-width: 1000px;
}
.about-detail {
  background: var(--l_yellow);
  margin: 1.5em auto 0;
  max-width: 1000px;
  padding: 1em;
}
.about-detail dt {
  color: var(--mainColor);
  font-size: 1.1em;
  font-weight: 500;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
  .about-text {
    font-size: min(4.8vw, 2rem);
  }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
  .about-text {
    font-size: min(2.4vw, 2rem);
  }
}

@media (hover: hover) {
}

/*====================================================
////id |  merit
====================================================*/
.merit-list-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: min(8.5vw, 45px);
}
.merit-list {
  background: #fff;
  border: solid 1px var(--green);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.11em;
  font-weight: 500;
  line-height: 1.4;
  min-height: 4.45em;
  padding: 0.3em 0.7em;
  text-align: center;
}
.merit-text.text-2 {
  margin-top: min(8.5vw, 45px);
  font-size: 1.22em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
  .merit-list-wrapper {
    gap: min(4.25vw, 20px);
  }
  .merit-list {
    width: min(100%, 400px);
  }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
  .merit-list-wrapper {
    gap: min(2vw, 26px) min(2.2vw, 33px);
  }
  .merit-list {
    width: calc(100% / 3 - (min(2.2vw, 33px) * 2 / 3));
  }
}
@media screen and (min-width: 769px) and (max-width: 960px) {
  .merit-list {
    font-size: 1.05em;
  }
}

@media (hover: hover) {
}

/*====================================================
////id |  table_list
====================================================*/
#about + #table_list .table_list-inner {
  padding-top: 0;
}
.table_list-content + .table_list-content {
  margin-top: min(17vw, 65px);
}
.table_list-add {
  border: solid 1px var(--mainColor);
  border-radius: 15px;
  margin-top: min(8vw, 40px);
  padding: 0 min(5vw, 1.5em) 1.5em;
  position: relative;
}
.table_list-add-title {
  background: #fff;
  color: var(--mainColor);
  display: inline-block;
  font-size: 1.15em;
  padding: 0.2em 1em;
  transform: translateY(-0.8em);
}
.table_list-add-text {
  margin-top: -0.8em;
}
.table_list-text {
  font-size: 1.22em;
  margin-top: min(10.5vw, 53px);
  text-align: center;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
  .table_list-head {
    font-size: min(5.8vw, 2.6rem);
    letter-spacing: 0.1em;
  }
  .table_list-add-title {
    margin-left: 10px;
    max-width: calc(100% - 20px);
    padding: 0.2em 0.5em;
  }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
  .table_list-head {
    letter-spacing: 0.1em;
  }
  .table_list-table td .deadline {
    text-align: center;
  }
  .table_list-add-title {
    margin-left: 1.5em;
    max-width: calc(100% - 3em);
  }
}

@media (hover: hover) {
}

/*====================================================
////id |  point
====================================================*/
#point::before {
  background: var(--w_green);
  content: "";
  display: block;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
}
.point-list {
  background: #fff;
  border: solid 1px var(--green);
  border-radius: 8px;
  display: flex;
  justify-content: flex-start;
  gap: 0.6em;
  font-weight: 500;
}
#point .point-list::before {
  margin: 0;
  position: relative;
  top: auto;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960px) {
  #point::before {
    width: 77%;
    height: 100%;
  }
  .point-inner {
    max-width: 600px;
    padding: min(13vw, 55px) 0;
  }
  .point-head {
    font-size: min(6.4vw, 3rem);
    letter-spacing: 0.06em;
    margin-bottom: 1.3em;
  }
  #point .point-list {
    font-size: 1.2em;
    padding: 0.5em 4vw;
  }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 960px) {
  #point::before {
    width: 60%;
    height: 100%;
  }
  .point-inner {
    padding: 45px 0;
  }
  .point-head {
    font-size: min(2.8vw, 3.3rem);
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  .point-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: min(1.5vw, 80px);
  }
  #point .point-list-wrapper {
    max-width: 55%;
  }
  #point .point-list {
    font-size: min(1.9vw, 2rem);
    padding: 1em min(2vw, 30px) 1em min(2vw, 60px);
  }
}

@media screen and (min-width: 1200px) {
  #point .point-list {
    padding: 1em min(4vw, 30px) 1em min(4vw, 60px);
  }
}
@media screen and (min-width: 1330px) {
  #point .point-list-wrapper {
    max-width: 660px;
  }
}

@media (hover: hover) {
}

/*====================================================
////id |  message
====================================================*/
.massage-inner {
  padding: min(16.5vw, 88px) 0;
}
#faq + #message .message-inner {
  padding-top: 0;
}
.message-text {
  border: solid 1px var(--mainColor);
  font-weight: 500;
  padding: min(10.5vw, 62px) min(4.2vw, 1em);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
  .message-text {
    font-size: min(5.3vw, 2.2rem);
  }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
  .message-text {
    font-size: min(2.8vw, 2.8rem);
  }
}

@media (hover: hover) {
}

/* =========================
   Fee section
========================= */

#fee {
  margin-top: min(12vw, 110px);
  background: #f6f9f8; /* pointと明確に分離 */
}
#fee .innerBox {
}

/* 見出し */
.fee-head {
  font-size: 1.8em;
}

.fee-lead {
  margin-top: 0.8em;
  font-size: 1em;
  line-height: 1.8;
  text-align: center;
}

/* -------------------------
   無料バッジ（フラット）
------------------------- */

.fee-badge-wrap {
  display: flex;
  justify-content: center;
  gap: 1em;
  margin-bottom: 2em;
}

.fee-badge {
  padding: 0.55em 1.5em;
  border-radius: 999px;
  font-size: 1.2em;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}

.fee-badge.free {
  background: #4caf93;
  color: #fff;
}

/* -------------------------
   料金カード
------------------------- */

.fee-price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5em;
  margin: 2.5em auto 1.5em;
  max-width: 720px;
}

.fee-price-card {
  background: #fff;
  border-radius: 10px;
  padding: 2em 1.5em;
  text-align: center;
}

/* カード内 */
.fee-price-card h3 {
  font-size: 1.05em;
  font-weight: 600;
  margin-bottom: 0.6em;
}

.fee-price {
  margin: 0.2em 0;
}

.fee-price .num {
  font-size: 2.2em;
  font-weight: 700;
  color: #d64545;
}

.fee-price .tax {
  font-size: 0.9em;
  margin-left: 0.2em;
}

.fee-min {
  font-size: 0.85em;
  color: #666;
  margin-top: 0.4em;
}

/* 注記 */
.fee-note-center {
  text-align: center;
  font-size: 0.9em;
  color: #555;
  margin-top: 1.2em;
  line-height: 1.7;
}

/* -------------------------
   SP
------------------------- */

@media (max-width: 768px) {
  #fee {
    margin-top: min(12.8vw, 60px);
  }

  .fee-price-grid {
    grid-template-columns: 1fr;
    gap: 1.2em;
  }

  .fee-badge-wrap {
  margin-bottom: 1em;
}

  .fee-badge {
    font-size: 1.2em;
    padding: 0.5em 1.3em;
  }
  .fee-note-center {
    text-align: start;
  }
}
