/* =============================================================
   price-table.css
   「金額テーブル・料金ボックスの中身の装飾」専用。
   レイアウト・余白・ページ構造は price-page.css へ。
   読み込み順：共通CSS → price-table.css → price-page.css
============================================================= */


/* =============================================================
   m_tableNote
   price_notes() が出力する <ul><li> の※注釈装飾。
   page側の m_price__footer（margin-top）とマルチクラスで使用。
============================================================= */
.m_tableNote li {
  position: relative;
  font-size: 11px;
  padding-left: 1.5em;
}
.m_tableNote li::before {
  content: "※";
  display: block;
  position: absolute;
  left: 0;
}


/* =============================================================
   m_leafPriceTable ベース
============================================================= */
.m_leafPriceTable table {
  width: 100%;
  border-collapse: collapse;
}
.m_leafPriceTable th,
.m_leafPriceTable td {
  border: 2px solid #fff;
  padding: 10px 5px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  word-break: break-word;
}
.m_leafPriceTable thead th {
  background-color: #0E4BA5;
  color: #fff;
}
.m_leafPriceTable td.m_leafPriceTable__ttl {
  background-color: #0E4BA5;
  color: #fff;
}
.m_leafPriceTable td.m_leafPriceTable__data {
  background-color: #F5F7F8;
  font-size: 18px;
}
.m_leafPriceTable td.m_leafPriceTable__empty {
  background-color: #f2f2f2;
}
/* JS（PriceFormatter）が付与するサブテキスト */
.m_leafPriceTable__sub {
  display: block !important;
  font-size: 12px !important;
}

@media screen and (max-width: 768px) {
  .m_leafPriceTable th,
  .m_leafPriceTable td {
    font-size: 12px;
    padding: 8px 3px;
  }
  .m_leafPriceTable td.m_leafPriceTable__data {
    font-size: 14px;
  }
}


/* =============================================================
   m_leafPriceTable--lightningAsp
============================================================= */
.m_leafPriceTable--lightningAsp thead tr:first-child th:nth-child(2),
.m_leafPriceTable--lightningAsp thead tr:nth-child(2) th:nth-child(n+3) {
  background-color: #D14700;
}

.m_leafPriceTable--lightningAsp thead tr:nth-child(2) th:nth-child(1) {
  width: 138px;
}
.m_leafPriceTable--lightningAsp thead tr:nth-child(2) th:nth-child(2) {
  width: 198px;
}
.m_leafPriceTable--lightningAsp thead tr:nth-child(2) th:nth-child(3) {
  width: 173px;
}

.m_leafPriceTable--lightningAsp tbody td:nth-child(2) {
  background-color: #fff;
}
.m_leafPriceTable--lightningAsp tbody td:nth-child(3) {
  background-color: #FCFAEE;
  font-size: 18px;
}
.m_leafPriceTable--lightningAsp tbody td:nth-child(4) {
  background-color: #FCFAEE;
  font-size: 16px;
  text-align: left;
  padding: 10px 16px;
}
.m_leafPriceTable--lightningAsp tbody td[rowspan]:nth-child(3) {
  background-color: #FFF29E;
  font-size: 16px;
  padding: 0 12px;
}
.m_leafPriceTable--lightningAsp thead tr:first-child th:nth-child(2),
.m_leafPriceTable--lightningAsp thead tr:nth-child(2) th:nth-child(n+3) {
  background-color: #D14700;
}
@media screen and (max-width: 768px) {
  .m_leafPriceTable--lightningAsp thead tr:nth-child(2) th {
    width: auto;
  }
  .m_leafPriceTable--lightningAsp thead tr:nth-child(2) th:nth-child(1) {
    width: 26%;
  }
  .m_leafPriceTable--lightningAsp thead tr:nth-child(2) th:nth-child(2) {
    width: calc((100% - 26%) / 2);
  }
  .m_leafPriceTable--lightningAsp thead tr:nth-child(2) th:nth-child(3) {
    width: calc((100% - 26%) / 2);
  }
  .m_leafPriceTable--lightningAsp thead tr:nth-child(2) th:nth-child(4),
  .m_leafPriceTable--lightningAsp tbody td:nth-child(4) {
    display: none;
  }
  .m_leafPriceTable--lightningAsp tbody td:nth-child(3) {
    font-size: 13px;
  }
}


/* =============================================================
   m_leafPriceTable--basicAsp
============================================================= */
.m_leafPriceTable--basicAsp thead th,
.m_leafPriceTable--basicAsp td.m_leafPriceTable__ttl {
  background: #00C77F;
  word-break: keep-all;
  white-space: nowrap;
}
.m_leafPriceTable--basicAsp tbody td:nth-child(2) {
  word-break: keep-all;
  white-space: nowrap;
}
.m_leafPriceTable--basicAsp tbody td:nth-child(3) {
  font-size: 12px;
  text-align: left;
}
/* PHP出力 <li> への例外的タイプセレクタ */
.m_leafPriceTable--basicAsp tbody td:nth-child(3) li {
  position: relative;
  padding-left: 1em;
}
.m_leafPriceTable--basicAsp tbody td:nth-child(3) li::before {
  content: "・";
  position: absolute;
  left: 0;
}
.m_leafPriceTable--basicAsp tbody td:nth-child(3) ~ td {
  color: #00C77F;
}

@media screen and (max-width: 768px) {
  .m_leafPriceTable--basicAsp thead th:nth-child(n+3),
  .m_leafPriceTable--basicAsp tbody td:nth-child(n+3) {
    display: none;
  }
}

/* =============================================================
   m_leafPriceTable--stress
============================================================= */
.m_leafPriceTable--stress thead{
  display: none;
}
.m_leafPriceTable--stress tbody td:nth-child(1) {
  text-align: left;
  font-size: 14px;
}
.m_leafPriceTable--stress tbody td:nth-child(2) {
  text-align: right;
  font-size: 20px;
  word-break: keep-all;
  white-space: nowrap;
}
.m_leafPriceTable--stress tbody .m_leafPriceTable__data{
  background: #fff;
}
.m_leafPriceTable--stress tbody .m_leafPriceTable__row:nth-child(odd) .m_leafPriceTable__data{
  background: #f2f2f2;
}

/* =============================================================
   m_leafPriceTable--eval
============================================================= */
.m_leafPriceTable--eval thead th{
  background-color: #4260ad;
}
.m_leafPriceTable--eval thead tr:first-child th:first-child,
.m_leafPriceTable--eval thead tr:nth-child(2) th:nth-child(1),
.m_leafPriceTable--eval thead tr:nth-child(2) th:nth-child(2){
  background-color: #00C77F;
}

.m_leafPriceTable--eval thead tr:nth-child(2) th:nth-child(1) {
  width: 120px;
}
.m_leafPriceTable--eval tbody td:nth-child(1) {
  background-color: #00C77F;
}
@media screen and (max-width: 768px) {
  .m_leafPriceTable--eval thead tr:nth-child(2) th:nth-child(1) {
    width: auto;
  }
}

/* =============================================================
   m_leafPriceTable--eva
============================================================= */
.m_leafPriceTable--eva thead th{
  background-color: #4260ad;
}
.m_leafPriceTable--eva thead th:nth-child(1){
  width: 120px;
}
.m_leafPriceTable--eva tbody td:nth-child(1) {
  background-color: #4260ad;
}
@media screen and (max-width: 768px) {
  .m_leafPriceTable--eva thead th:nth-child(1){
    width: auto;
  }
}
/* =============================================================
   m_lmsOpt（SP用オプション補足DL）
============================================================= */
.m_lmsOpt__cont {
  margin-top: 10px;
}
.m_lmsOpt__cont--sp {
  display: none;
}
.m_lmsOpt__ttl {
  font-size: 14px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  background-color: #D14700;
}
.m_lmsOpt__txt {
  padding: 14px 5px 12px;
  font-size: 14px;
  font-weight: bold;
  background-color: #FCFAEE;
}

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


/* =============================================================
   m_priceTable（SP補足DL）
   page側の m_priceTable（display:flex等）とマルチクラスで使用。
   ここは色・文字の装飾のみ担当。
============================================================= */
.m_priceTable__ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 5px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  letter-spacing: .1em;
  line-height: 1.5;
  background-color: #0e4ba5;
}
.m_priceTable__ttl--green {
  background-color: #00C77F;
}
.m_priceTable__data {
  flex-grow: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 5px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 2;
  background-color: #f5f7f8;
}
.m_priceTable__data--limitless {
  padding: 40px 20px;
  color: #0e4ba5;
  font-size: 20px;
  letter-spacing: .1em;
}
.m_priceTable__data--basic {
  color: #00c77f;
}

@media screen and (max-width: 768px) {
  .m_priceTable__data {
    padding: 30px 25px;
  }
  .m_priceTable__data--limitless {
    padding: 15px 20px;
  }
}


/* =============================================================
   m_priceCont--lightningAsp
   PHP price_notes() が出力するクラスなし h3/ul/li のスコープラッパー。
   このdivだけHTMLに残す。中身の装飾はタイプセレクタで管理。
============================================================= */
.m_priceCont--lightningAsp h3 {
  margin-bottom: 20px;
  color: #143BAD;
  text-align: center;
  font-weight: bold;
  line-height: 1;
  font-size: 36px;
}
.m_priceCont--lightningAsp ul + ul {
  margin-top: 24px;
}
.m_priceCont--lightningAsp li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  font-weight: bold;
}
.m_priceCont--lightningAsp li::before {
  content: "・";
  position: absolute;
  left: 0;
}
/* strong を含む li → チェックマーク */
.m_priceCont--lightningAsp li:has(strong) {
  display: block;
  font-size: 20px;
}
.m_priceCont--lightningAsp li:has(strong)::before {
  content: "";
  top: calc((1lh - 1em) / 2 - 3px);
  width: 8px;
  height: 16px;
  border-bottom: 3px solid #143BAD;
  border-right: 3px solid #143BAD;
  transform: rotate(45deg);
}
.m_priceCont--lightningAsp li:has(strong) + li {
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .m_priceCont--lightningAsp h3 {
    line-height: 1.4;
    font-size: 22px;
  }
  .m_priceCont--lightningAsp li:has(strong) {
    font-size: 16px;
  }
}