@charset "UTF-8";
/* ============================================================
   人事評価・報酬制度コンサルティング 下層ページ
   メイン本文（hero / sticky-nav / 各節）スタイル

   記述順（coding_css §3.1）：
   1. Base（reset → トークン → base body）
   2. Layout（l_）       l_cont / l_section / l_grid
   3. Module（m_）       3a 構造系 → 3b 共通汎用 → 3c ページ固有
   5. Utility（u_）       横幅 / 余白 / 表示制御

   ※単体で完結する構成。共通CSS（reset・トークン・l_/u_ 等）が別途存在する
     プロジェクトに組み込む場合は、重複するブロック（reset / Base / Layout / Utility）を
     削除して二重定義を避けること。
   ============================================================ */


/* ============================================================
   1. Base
   ============================================================ */
/* 既存CSSのオーバーライド */
#base{
  width: 100%;
}
.m_leafPriceTable{
  overflow: auto;
}
.m_csvDiagramTable table,
.m_leafPriceTable table{
  min-width: 750px;
}
@media screen and (max-width: 768px) {
  div#cont{
    margin: 0;
  }
}
/* ---------- Design Token（DESIGN.md §2〜§5） ----------
   ※共通CSSに既にある場合はこの :root ブロックを削除して二重定義を避ける */
:root {
  /* Color */
  --color-main:    #8F1E35;
  --color-cta:     #ec4062;
  --color-accent:  #2a6cae;
  --color-text:    #333333;
  --color-reverse: #FFFFFF;
  --color-bk:      #ffe9e9;
  --color-bk-sub:  #F0F0F0;
  --color-border:  #cccccc;
  --color-link:    #052674;

  /* Typography */
  --font-base: "Helvetica Neue", "Noto Sans JP", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", sans-serif;

  /* Spacing（固定） */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 40px;

  /* Spacing（流体） */
  --space-fSm: clamp(12px, 2.08vw, 16px);
  --space-fMd: clamp(18px, 3.13vw, 24px);
  --space-fLg: clamp(24px, 4.17vw, 32px);
  --space-fXl: clamp(30px, 5.21vw, 40px);

  /* Shape / Effect */
  --r-btn:   8px;
  --r-badge: 25px;
  --r-card:  2px;
  --transition: 0.2s;

}

/* 固定ヘッダー対応 */
:root:has(.js_stickyNav){
  scroll-padding-top: calc(var(--header-h, 0px) + 16px);
}

/* ---------- base ---------- */
body {
  color: var(--color-text);
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
}
a {
  color: inherit;
}


/* ============================================================
   2. Layout（l_）：器・グリッド・セクション
   coding_css §5.2 / DESIGN.md §7-2・§7-4 準拠。
   ※共通CSSに既にある場合はこのブロックを削除して二重定義を避ける
   ============================================================ */

/* ---- l_cont（コンテンツ全体ラッパー・2層構造） ---- */
.l_cont {
  min-width: 1220px;
  margin-inline: auto;
}
.l_cont__inner {
  max-width: 1200px;
  margin-inline: auto;
}
.l_cont--fix .l_cont__inner {
  width: 1200px;
  max-width: none;
}
.l_cont--2col .l_cont__inner,
.l_cont--3col .l_cont__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.l_cont--2col .l_cont__main {
  width: 930px;
}
.l_cont--3col .l_cont__main {
  width: 750px;
}
.l_cont__left {
  order: -1;
  width: 200px;
  flex-shrink: 0;
}
.l_cont__right {
  order: 2;
  width: 200px;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .l_cont {
    min-width: auto;
    overflow: hidden;
  }
  .l_cont__inner {
    width: 100%;
  }
  .l_cont--fix .l_cont__inner {
    width: 100%;
  }
  .l_cont--2col .l_cont__inner,
  .l_cont--3col .l_cont__inner {
    display: block;
  }
  .l_cont--2col .l_cont__main,
  .l_cont--3col .l_cont__main {
    width: 100%;
  }
  .l_cont__left,
  .l_cont__right {
    display: none;
  }
}

/* ---- l_section（セクション間余白・隣接セレクタ方式） ---- */
.l_section {}
.l_section__item {}
.l_section--primary > .l_section__item + .l_section__item {
  margin-top: var(--space-fXl);
}
.l_section--secondary > .l_section__item + .l_section__item {
  margin-top: var(--space-fLg);
}
.l_section--content > .l_section__item + .l_section__item {
  margin-top: var(--space-sm);
}
.l_section--sideNav > .l_section__item + .l_section__item {
  margin-top: var(--space-md);
}

/* ---- l_grid（横並びグリッド・ガターは Modifier で付与） ---- */
.l_grid {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}
.l_grid__item {
  display: flex;
}
.l_grid__inner {
  display: block;
  width: 100%;
}
.l_grid--gutterSm {
  margin-top: -12px;
  margin-inline: -6px;
}
.l_grid--gutterSm > .l_grid__item {
  padding-top: 12px;
  padding-inline: 6px;
}
.l_grid--gutterMd {
  margin-top: -24px;
  margin-inline: -12px;
}
.l_grid--gutterMd > .l_grid__item {
  padding-top: 24px;
  padding-inline: 12px;
}
.l_grid--gutterLg {
  margin-top: -40px;
  margin-inline: -20px;
}
.l_grid--gutterLg > .l_grid__item {
  padding-top: 40px;
  padding-inline: 20px;
}


/* ============================================================
   3a. Module：構造系（他モジュールの土台）
   ============================================================ */

/* m_hasIco：アイコン付きテキストの構造的土台（DESIGN.md §7-7）
   親 relative / アイコンは絶対配置 / テキストは padding-left で逃がす */
.m_hasIco {
  position: relative;
  display: block;
  width: fit-content;
}
.m_hasIco::before,
.m_hasIco::after,
.m_hasIco__item {
  content: "";
  position: absolute;
  display: block;
}
.m_hasIco::before,
.m_hasIco__item {
  left: 0;
}
.m_hasIco::after {
  right: 0;
}

/* Modifier：疑似要素アイコン（Unicode 文字でフォント非依存） */
.m_hasIco--dot::before {
  content: "・";
}
.m_hasIco--arrow::before {
  content: "\f105";
  font-family: fontAwesome;
}
.m_hasIco--revArrow::before {
  content: "\f104";
  font-family: fontAwesome;
}
.m_hasIco--ast::before {
  content: "※"; /* ＞ U+FF1E */
}
.m_hasIco--dot,
.m_hasIco--ast{
  padding-left: 1em;
}
.m_hasIco--arrow,
.m_hasIco--revArrow{
  padding-left: .8em;
}

/* Modifier：HTML 要素アイコン（SVG）。垂直中央揃え */
.m_hasIco--svg {
  --_icon-size: 16px; /* アイコンの一辺 */
  padding-left: calc(var(--_icon-size) + var(--space-xs));
}
.m_hasIco--svg .m_hasIco__item {
  top: 50%;
  width: var(--_icon-size);
  height: var(--_icon-size);
  transform: translateY(-50%);
}
.m_hasIco--svg .m_hasIco__item svg {
  width: 100%;
  height: 100%;
}


/* ============================================================
   3b. Module：共通汎用系
   ※ m_heading / m_btn は DESIGN.md §7-1 / §7-3 の Global 定義。
     共通CSSに既にある場合は重複削除。ここでは本ページで使う範囲を記載。
   ============================================================ */

/* ---- m_heading（見出し） ---- */
.m_heading__ttl {
  font-weight: 700;
  letter-spacing: 0;
}
.m_heading--primary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-fMd);
  padding: 5px 0 5px 10px;
  border-left: 10px solid var(--color-main);
  border-bottom: 2px solid var(--color-main);
}
.m_heading--primary .m_heading__ttl {
  line-height: 1.4;
  font-size: 18px;

}
.m_heading--primary .m_heading__sub {
  font-size: 14px;
}
/* h3 用 Modifier（左 border 4px・控えめ） */
.m_heading--secondary {
  margin-bottom: var(--space-sm);
}
.m_heading--secondary .m_heading__ttl {
  font-size: 16px;
  line-height: 1.6;
  border-left: 4px solid var(--color-main);
  padding: 2px 0 2px 8px;
}

/* ---- m_btn（ボタン・DESIGN.md §7-3） ---- */
.m_btn {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}
.m_btn--center {
  justify-content: center;
}
.m_btn--right {
  justify-content: flex-end;
}
.m_btn::before {
  content: "";
  display: block;
  width: 0;
  height: 2.5em;
}
.m_btn__target {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(16px, 4.17vw, 32px);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: var(--r-btn);
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition);
}
.m_btn--cta .m_btn__target {
  background: var(--color-cta);
  color: var(--color-reverse);
  border: 2px solid var(--color-cta);
}
.m_btn--cta .m_btn__target:hover {
  opacity: 0.8;
}
.m_btn--accent .m_btn__target {
  background: var(--color-accent);
  color: var(--color-reverse);
  border: 2px solid var(--color-accent);
}
.m_btn--accent .m_btn__target:hover {
  opacity: 0.8;
}

/* ---- m_badge（フルピル小型ラベル・DESIGN.md §7-8） ---- */
.m_badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--r-badge);
  background: var(--color-main);
  color: var(--color-reverse);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.m_badge--accent {
  background: var(--color-accent);
}

/* ---- m_txt（本文テキスト） ---- */
.m_txt {
  font-size: 14px;
  line-height: 1.7;
}

/* ---- m_list（リスト土台。ul/ol 両用、カスタムフィールドのラッパーで使用） ---- */
.m_list {
  list-style: none;
}
.m_list > li {
  font-size: 14px;
  line-height: 1.6;
}
.m_list > li + li {
  margin-top: var(--space-xs);
}
.m_list--emphasis .m_list > li {
  font-weight: 700;
  line-height: 1.5;
}
.m_list--target > li {
  position: relative;
  display: block;
  width: fit-content;
  padding-left: 1em;
}
.m_list--target > li::before{
  content: "・";
  position: absolute;
  left: 0;
  display: block;
}
.m_list--needs > li {
  position: relative;
  display: block;
  width: fit-content;
  padding-left: 1.5em;
  font-weight: 700;
}

.m_list--needs > li::before{
  content: "\f00c";
  position: absolute;
  left: 0;
  display: block;
  color: var(--color-main);
  font-family: FontAwesome;
}
/* ---- m_link（テキストリンク・紺、hover で main） ---- */
.m_link {
  color: var(--color-link);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--transition);
}
.m_link:hover {
  color: var(--color-main);
}

/* ---- m_search（検索フォーム） ---- */
.m_search {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  background: var(--color-reverse);
}
.m_search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.m_search__input {
  flex: 1;
  min-width: 0;
  padding: 0 var(--space-sm);
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 14px;
  line-height: 36px;
}
.m_search__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  border: none;
  background: var(--color-reverse);
  color: var(--color-main);
  cursor: pointer;
}
.m_search__ico {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- m_table（比較表・将来 Global 昇格候補） ---- */
.m_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  line-height: 1.5;
}
.m_table__th,
.m_table__td {
  padding: 6px;
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.m_table__th {
  background: var(--color-bk-sub);
  font-weight: 700;
  text-align: center;
}
.m_table__th--key {
  background: var(--color-bk);
  color: var(--color-main);
}


/* ============================================================
   3c. Module：ページ固有系
   ============================================================ */
/* ---- 節 ---- */
.m_contents{}
.m_contents__header{}
.m_contents__body{}
.m_contents__footer{
  margin-top: var(--space-md);
}

/* ---- カスタムフィールドで出力される複数行テキストボックス ---- */
.m_customFieldTxtbox{
  font-size: 14px;
}
.m_customFieldTxtbox > * + *{
  margin-top: var(--space-sm);
}
.m_customFieldTxtbox > * > * + *{
  margin-top: var(--space-xs);
}
.m_customFieldTxtbox h3{
  margin-bottom: var(--space-sm);
  font-size: 16px;
  line-height: 1.6;
  border-left: 4px solid var(--color-main);
  padding: 2px 0 2px 8px;
}
.m_customFieldTxtbox li:not(:has(a)){
  position: relative;
  padding-left: 1em;
}
.m_customFieldTxtbox li:not(:has(a))::before{
  content: "・";
  position: absolute;
  left: 0;
  display: block;
}
.m_customFieldTxtbox--links{}
.m_customFieldTxtbox--links li > a{
  position: relative;
  display: block;
  width: fit-content;
  padding-left: .8em;
  color: var(--color-link);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--transition);
}
.m_customFieldTxtbox--links li > a:hover{
  color: var(--color-main);
}
.m_customFieldTxtbox--links li > a::before{
  content: "\f105";
  position: absolute;
  left: 0;
  display: block;
  font-family: fontAwesome;
}

/* カスタマイズフィールド内のグリッド */

.m_cfGrid {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: -12px;
  margin-inline: -6px;
}
.m_cfGrid > li {
  display: flex;
  margin: 0 !important;
  padding-top: 12px !important;
  padding-inline: 6px !important;
}
.m_cfGrid > li::before{
  content: none !important;
}
.m_cfGrid > li > :where(a, div) {
  display: block;
  width: 100%;
}
.m_cfGrid--2col > li{
  width: 50%;
}
.m_cfGrid--3col > li{
  width: 33.333%;
}
@media screen and (max-width: 768px) {
  .m_cfGrid > li{
    width: 100%;
  }
}
/* ---- m_txtBox ---- */
.m_txtBox{}
.m_txtBox--hasBorder{
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--r-card);
  background: var(--color-reverse);
}
/* ---- m_onlyImg ---- */
.m_onlyImg{
  line-height: 0;
  text-align: center;
}
.m_onlyImg img{
  max-width: 100%;
  height: auto;
}
.m_onlyImg--yt iframe{
  max-width: 100%;
  aspect-ratio: 16 /9 ;
}
/* ---- m_searchedBox検索後に表示される検索ボックス ---- */
.m_searchedBox{}
.m_searchedBox__body{}
.m_searchedBox__footer{
  margin-top: var(--space-sm);
}


/* ---- m_heroWrap（m_heroのラッパー） ---- */
.m_heroWrap{}
.m_heroWrap__header {
  display: none;
  margin-bottom: var(--space-sm);
}
.m_heroWrap__body{}
@media screen and (max-width: 768px) {
  .m_heroWrap__header {
    display: block;
  }
}


/* ---- m_hero（h1 を内包する演出領域。背景は画像が担う） ---- */
.m_hero{}
.m_hero__inner {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
}
.m_hero__img {
  line-height: 0;
}
.m_hero__img img {
  width: 100%;
  height: auto;
}
.m_hero__body {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--space-fLg);
  color: var(--color-main);
}
.m_hero__ttl {
  font-size: clamp(20px, 3.65vw, 28px);
  font-weight: 700;
  line-height: 1.4;
}
.m_hero__sub {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}
.m_hero__badge + .m_hero__ttl {
  margin-top: var(--space-sm);
}
.m_hero__ttl + .m_hero__sub {
  margin-top: var(--space-xs);
}
@media screen and (max-width: 768px) {
  .m_hero__body {
    position: static;
    padding: 0;
  }
  .m_hero__badge + .m_hero__ttl {
    margin-top: var(--space-xs);
  }
}

/* ---- m_stickyNav（追従ナビ） ---- */
.m_stickyNav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-reverse);
}
.m_stickyNav__top {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
}
.m_stickyNav__search {
  flex: 1;
}
.m_stickyNav__actions {
  display: flex;
  gap: var(--space-sm);
}
.m_stickyNav__bottom {
  border-bottom: 2px solid var(--color-main);
}
.m_stickyNav__list {
  display: flex;
  align-items: center;
}
.m_stickyNav__item {
  width: 100%;
  padding: 1px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .m_stickyNav__top {
    display: block;
  }
  .m_stickyNav__actions {
    gap: var(--space-xs);
    margin-top: var(--space-xs);
  }
  .m_stickyNav__list {
    flex-wrap: wrap;
  }
  .m_stickyNav__item {
    width: 33.333%;
  }
}
@media screen and (max-width: 599px) {
  .m_stickyNav__item {
    width: 50%;
  }
}

/* ---- m_stickyNavLink（追従ナビのリンク・ホバーを持つ独立 Block） ---- */
.m_stickyNavLink{}
.m_stickyNavLink__target {
  display: flex;
  align-items : center;
  justify-content: center;
  width: 100%;
  padding: var(--space-xs);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  background: var(--color-bk-sub);
  transition: color var(--transition);
}
.m_stickyNavLink__target:hover {
  color: var(--color-main);
}
.m_stickyNavLink__target .m_hasIco__item {
  color: var(--color-main);
}
.m_stickyNavLink__target .m_hasIco__item svg {
  fill: currentColor;
}

/* ---- m_courseGrid（等級コースの2カラム） ---- */
.m_courseGrid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
}
.m_courseGrid__col {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 240px;
  text-align: center;
}
.m_courseGrid__colTtl {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
}
.m_courseGrid__box {
  padding: var(--space-xs);
  border: 1px solid var(--color-main);
  border-radius: var(--r-card);
  background: var(--color-bk);
  font-size: 12px;
  font-weight: 700;
}
.m_courseGrid__box--spec {
  border-color: var(--color-border);
  background: var(--color-reverse);
}
.m_courseGrid__box + .m_courseGrid__box {
  position: relative;
  margin-top: var(--space-md);
}
.m_courseGrid__box + .m_courseGrid__box::before {
  content: "";
  position: absolute;
  top: calc(var(--space-md) * -1);
  left: 50%;
  width: 0;
  height: var(--space-md);
  border-left: 2px solid var(--color-main);
  transform: translateX(-50%);
}
.m_courseGrid__col + .m_courseGrid__col {
  position: relative;
}
.m_courseGrid__col + .m_courseGrid__col::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--space-md) * -1);
  width: var(--space-md);
  height: 0;
  border-top: 2px solid var(--color-main);
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .m_courseGrid {
    display: block;
  }
  .m_courseGrid__col + .m_courseGrid__col {
    margin-top: var(--space-md);
  }
  .m_courseGrid__col + .m_courseGrid__col::before {
    top: calc(var(--space-md) * -1);
    left: 50%;
    width: 0;
    height: var(--space-md);
    border-top: none;
    border-left: 2px solid var(--color-main);
    transform: translateX(-50%);
  }
}

/* ---- m_comment（担当コンサルタントのコメント） ---- */
.m_comment {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.m_comment__avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-bk-sub);
  overflow: hidden;
}
.m_comment__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.m_comment__txt {
  font-size: 14px;
  line-height: 1.7;
}
@media screen and (max-width: 599px) {
  .m_comment {
    display: block;
  }
  .m_comment__avatar {
    margin-inline: auto;
  }
  .m_comment__avatar + .m_comment__txt {
    margin-top: var(--space-sm);
  }
}

/* ---- m_flow（導入スケジュール・フロー、カスタムフィールド対応） ---- */
.m_flow {
  counter-reset: flowNum;
}
.m_flow > li{
  counter-increment: flowNum;
  position: relative;
  padding-left: 32px !important;
  font-size: 13px;
  line-height: 1.4;
}
.m_flow > li + li {
  margin-top: var(--space-md);
}
.m_flow > li::before{
  content: counter(flowNum) !important;
  position: absolute;
  left: 0;
  top: calc((1lh - 1em) / 2 - .5em);
  z-index: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-main);
  color: var(--color-reverse);
  font-size: 11px;
  font-weight: 700;
}
.m_flow > li strong {
  color: var(--color-main);
  font-weight: 700;
}
.m_flow__duration {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--color-border);
  color: var(--color-main);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
.m_flow--hasBorder{}
.m_flow--hasBorder li::after{
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  display: block;
  width: 1px;
  height: calc(100% + var(--space-md));
  background: var(--color-main);
}
.m_flow--hasBorder li:last-child::after{
  content: none;
}
/* ---- m_flow（導入スケジュール・フロー） ---- */

/* ---- m_priceWrap（価格表示のラッパー） ---- */
.m_priceWrap {}
.m_priceWrap__body{}
.m_priceWrap__footer{}
.m_priceWrap__notes{}
.m_priceWrap__notes li{
  position: relative;
  font-size: 11px;
  padding-left: 1.5em !important;
}
.m_priceWrap__notes li::before {
  content: "※" !important;
  display: block;
  position: absolute;
  left: 0;
}

/* ---- m_price（価格表示） ---- */
.m_price {
  color: var(--color-main);
  font-size: clamp(24px, 4.69vw, 36px);
  font-weight: 700;
  text-align: center;
}
.m_price__unit {
  font-size: clamp(16px, 2.60vw, 20px);
  font-weight: 500;
  color: var(--color-text);
}

/* ---- m_leafPriceTable（Leaf料金ブログベースの価格表） ---- */
.m_leafPriceTable table {
  width: 100%;
  border-collapse: collapse;
}
.m_leafPriceTable th {
  border: 1px solid;
  padding: 5px;
  text-align: center;
  vertical-align: middle;
  color: var(--color-reverse);
  line-height: 1.6; 
  font-weight: bold;
  background: var(--color-main);
  border: 1px solid #fff;
  padding: 10px 5px;
  font-weight: bold;
}
.m_leafPriceTable td {
  padding: 5px;
  border: 1px solid var(--color-main);
}

/* 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_voice{
  position: relative;
  border: 1px solid var(--color-border);
  border-radius : var(--r-card);
  padding: var(--space-md);
}
.m_voice::before{
  content: "\f0e5";
  position: absolute;
  top: 6px;
  left: 6px;
  display: block;
  color: #ccc;
  line-height: 1;
  font-size: 20px;
  font-family: FontAwesome;
}

.m_voice__footer{
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
  font-weight: bold;
  text-align: right;
  font-size: 12px;
}

/* ============================================================
   5. State（is_ or js_）：状態制御
   ============================================================ */
.js_isHide{
  display: none !important;
}
.js_priceUnit { /* JSで付与する単位クラス */
  font-size: clamp(16px, 2.60vw, 20px);
  font-weight: 500;
  color: var(--color-text);
}
.m_leafPriceTable__data .js_priceUnit{ 
  font-size: 13px;
  font-weight: 400;
  word-break: keep-all;
  white-space: nowrap;
}
/* slickオーバーライド */
.js_commonSlider{
  padding: 0 16px 20px !important;
}

@media screen and (max-width: 768px){
  .js_commonSlider{
    padding: 0 0 18px !important;
  }
  .js_commonSlider .slick-arrow{
    display: none !important;
  }
}

/* ============================================================
   5. Utility（u_）：横幅 / 余白 / 表示制御
   coding_css §5.5 準拠。本ページで使う範囲＋汎用 col 系を同梱。
   ※共通CSSに既にある場合はこのブロックを削除して二重定義を避ける
   ============================================================ */

/* --- 横幅(%) --- */
.u_col1  { width: 8.333%; }
.u_col2  { width: 16.667%; }
.u_col25 { width: 20%; }
.u_col3  { width: 25%; }
.u_col4  { width: 33.333%; }
.u_col5  { width: 41.666%; }
.u_col6  { width: 50%; }
.u_col7  { width: 58.333%; }
.u_col8  { width: 66.666%; }
.u_col9  { width: 75%; }
.u_col10 { width: 83.33%; }
.u_col11 { width: 91.666%; }
.u_col12 { width: 100%; }

@media screen and (max-width: 768px) {
  .u_resMdCol1   { width: 8.333%; }
  .u_resMdCol2   { width: 16.667%; }
  .u_resMdCol3   { width: 25%; }
  .u_resMdCol4   { width: 33.333%; }
  .u_resMdCol5   { width: 41.666%; }
  .u_resMdCol6   { width: 50%; }
  .u_resMdCol7   { width: 58.333%; }
  .u_resMdCol8   { width: 66.666%; }
  .u_resMdCol9   { width: 75%; }
  .u_resMdCol10  { width: 83.33%; }
  .u_resMdCol11  { width: 91.666%; }
  .u_resMdCol12  { width: 100%; }
  .u_resMdHide   { display: none; }
  .u_resMdBlock  { display: block; }
  .u_resMdInline { display: inline; }
}

@media screen and (max-width: 599px) {
  .u_resSmCol6   { width: 50%; }
  .u_resSmCol12  { width: 100%; }
  .u_resSmHide   { display: none; }
  .u_resSmBlock  { display: block; }
  .u_resSmInline { display: inline; }
}

/* --- 余白調整（固定値） --- */
.u_mt32 { margin-top: 32px; }
.u_mb16 { margin-bottom: 16px; }
.u_mxA  { margin-inline: auto; }
.u_mlA  { margin-left: auto; }

/* --- 余白調整（流体値） --- */
.u_mtFLg { margin-top: var(--space-fLg); }
.u_mtFXl { margin-top: var(--space-fXl); }
.u_mbFLg { margin-bottom: var(--space-fLg); }
.u_mbFXl { margin-bottom: var(--space-fXl); }

/* --- 文字・表示制御 --- */
.u_bold { font-weight: 700; }
.u_taC  { text-align: center; }
.u_hide { display: none; }

/* ---  flexでの寄せ --- */
.u_flexCenter{
  display: flex;
  justify-content: center;
}

/* ---  文字サイズ --- */
.u_fs12{
  font-size: 12px;
}
@media screen and (max-width: 599px) {
  .u_resSmFs12{
    font-size: 12px;
  }
}