@charset "utf-8";

/* =====================================================================
  contents-area グリッドパターン
  ===================================================================== */
#index.contents-area {
  background-image:
    linear-gradient(to right, #f1f5f9 1px, transparent 1px),
    linear-gradient(to bottom, #f1f5f9 1px, transparent 1px);
  background-size: 68px 68px;
}

/* =====================================================================
  メインビジュアル（MV）スタイル
  ===================================================================== */
.mainvisual {
  background-image: url("img/mv.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--s8) 0 20rem;
  position: relative;
}

.mainvisual .l-container {
  position: relative;
  z-index: 1;
}

.mv-logo {
  margin-bottom: var(--s4);
  width: 28rem;
}

.mv-title {
  font-size: var(--fs-xxl);
  font-weight: bold;
  color: var(--pri-dark);
  line-height: 1.6;
  margin-bottom: var(--s7);
}

.mv-title__sub {
  font-size: 1.2em;
}

.mv-text {
  color: var(--txt);
  line-height: 1.8;
  max-width: 51%;
}

/* =====================================================================
  下層メインビジュアル（MV）スタイル
  ===================================================================== */
.mainvisual-lower {
  position: relative;
  background-image: url("img/mv-low.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4) 0;
}

.mainvisual-lower .mv-logo {
  margin: 0;
  transition: opacity 0.3s;
}

.mainvisual-lower .mv-logo:hover {
  opacity: 0.6;
}

/* =====================================================================
  詳細訴求セクション（.c-sec--detail）スタイル
  ===================================================================== */

/* セクション背景 */
.c-sec--detail.l-sec {
  background: var(--cE);
  position: relative;
}

/* 詳細訴求セクションの疑似要素背景（左右反転） */
.c-sec--detail.l-sec::before {
  content: "";
  position: absolute;
  top: 22.8rem;
  right: 0;
  width: calc(50% + 60rem + 6.4rem);
  height: calc(100% - 22.8rem);
  background: var(--txt);
  border-top-left-radius: 3.2rem;
  z-index: 0;
  opacity: 0.1;
}

/* コンテンツを背景の上に表示 */
.c-sec--detail.l-sec .l-container {
  position: relative;
  z-index: 1;
}

/* 詳細訴求セクションのh2を白に */
.c-sec--detail .c-h2 {
  color: var(--white);
}

/* 詳細訴求セクションのh2に画像を疑似要素で追加 */
.c-sec--detail .c-h2::before {
  content: "";
  position: absolute;
  left: -10rem;
  top: -17rem;
  width: 28rem;
  height: 26rem;
  background-image: url("img/h2-icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 詳細訴求セクションのh2の下の線を--c1に */
.c-sec--detail .c-h2::after {
  background: var(--c1);
}

/* h2内のspanを0.9emに */
.c-h2 span {
  font-size: 0.9em;
}
/* バッジコンポーネント */
.c-badge {
  text-align: center;
  border-radius: var(--r-md);
  padding: var(--s1) var(--s4);
  background: var(--pri);
  color: var(--white);
  font-size: var(--fs-xl);
  font-weight: bold;
  margin-bottom: 0;
  /* ギャップなしの縦積みのため */
}

/* 吹き出しラベル（.c-badge--detail） */
.c-badge--detail {
  background: var(--pri);
  color: var(--white);
  font-weight: bold;
  padding: var(--s1) var(--s8);
  font-size: var(--fs-2xl);
  position: absolute;
  top: calc(var(--s4) * -1);
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0;
  width: max-content;
}

/* 吹き出しの三角形の尾（共通スタイル） */
.c-badge--detail::after,
.c-sec--recommended .c-card-wrapper .c-badge::after {
  content: "";
  position: absolute;
  bottom: calc(var(--s2) * -0.6);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid var(--pri);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.c-sec--detail .acc-more-btn {
  margin: 0 auto;
}

/* =====================================================================
  汎用プレースホルダー用スタイル
  ===================================================================== */
/* 見出しスタイル */
.c-h2 {
  font-size: var(--fs-xxl);
  font-weight: bold;
  text-align: center;
  color: var(--pri-dark);
  position: relative;
  margin-bottom: var(--s2);
}

.c-h2::after {
  content: "";
  display: block;
  width: 11rem;
  height: 4px;
  background: var(--pri-mid);
  border-radius: 2px;
  margin: var(--s2) auto 0;
}

.c-h3 {
  font-size: var(--fs-l);
  font-weight: bold;
  color: var(--txt);
  text-align: center;
}

.c-h4 {
  font-size: var(--fs-m);
  font-weight: bold;
  padding: var(--s2) var(--s3);
  background: var(--sub);
  color: var(--white);
}

/* 詳細訴求セクションの冒頭h4スタイル */
.c-sec--detail .c-card--large>.c-h4 {
  background: transparent;
  color: var(--pri-dark);
  padding: 0;
  text-align: center;
  font-size: var(--fs-xl);
}

.c-sec--detail .c-card--large>.c-h4 span {
  font-size: var(--fs-l);
  color: var(--txt);
}

.c-sec--detail .c-card--large>.c-h4 span::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: var(--acc-dark);
  margin: var(--s2) 0;
  opacity: 0.5;
}

.c-h5 {
  font-size: var(--fs-l);
  font-weight: bold;
  line-height: 1.6;
  padding: var(--s2) var(--s3);
  background: url(img/bg-tit.jpg) no-repeat right center / cover var(--c1);
  width: 100%;
  border-radius: calc(var(--s1) / 2);
}

/* 見出し内リンク */
.c-hlink {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  padding: 0 var(--s5);
  background: url("./img/arrow-s.svg") no-repeat center right / auto 0.8em;
  transition: opacity 0.2s ease;
}

.c-hlink:hover {
  text-decoration: none;
  opacity: 0.6;
}

/* テキストユーティリティ */
.c-lead {
  margin-bottom: var(--s3);
  color: var(--txt);
  font-size: var(--fs-md);
  line-height: 1.6;
}

.c-desc {
  margin: auto;
  max-width: 90rem;
  color: var(--txt);
}

/* カードコンポーネント */
.c-card {
  background: var(--white);
  padding: var(--s3);
  border-radius: var(--s2);
}

.c-card--large {
  padding: var(--s4);
}

/* 詳細訴求セクション内のカードスタイル */
.c-sec--detail .c-card--large {
  padding: var(--s8) calc((100% - 100rem) / 2);
  background: var(--white);
  position: relative;
  border-radius: var(--s3);
}

.c-card--small {
  padding: var(--s2);
}

.c-cardTitle {
  font-size: var(--fs-m);
  font-weight: 400;
  color: var(--pri-dark);
  line-height: 1.6;
}

.c-cardTitle span {
  display: block;
  font-size: var(--fs-l);
  font-weight: bold;
  color: var(--pri-dark);
  margin-bottom: var(--s1);
}

/* 簡易訴求セクション内のスタイル調整 */
.c-sec--recommended .c-cardTitle {
  font-size: var(--fs-l);
  font-weight: bold;
  text-align: center;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
}

.c-sec--recommended .c-cardTitle>span:first-of-type {
  display: block;
  font-size: calc(var(--fs-m) - 0.05rem);
  color: var(--txt);
  padding-bottom: var(--s1);
  border-bottom: 1px solid #edb598;
  grid-row: 1;
}

.c-sec--recommended .c-cardTitle span.small {
  border: none;
  color: var(--pri-dark);
}

/* span以降の社名部分（.company-name）を高さ揃え */
.c-sec--recommended .c-cardTitle .company-name {
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--s1);
  min-height: 4.8rem;
  /* 社名部分の最小高さ（必要に応じて調整） */
  flex-direction: column;
}

.company-name .small {
  font-size: 0.75em;
}

/* テーブルコンポーネント */
.c-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.c-table th,
.c-table td {
  text-align: left;
}

.c-table th {
  font-weight: bold;
  color: var(--txt);
  width: 20%;
  text-align: center;
}

/* =============================================================
  簡易訴求カード subgrid 対応
============================================================= */

/* カードラッパー（バッジ + カード）の縦積みレイアウト */
.c-card-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
  /* バッジとカードの間のギャップを除去 */
}

/* カード自体を縦フレックスにして汎用化（可変要素対応） */
.c-card--grid {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  flex: 1;
  /* 残りの高さを全て使用 */
}

/* 下部ブロック（おすすめする理由） */
.c-cardReason {
  display: grid;
  gap: var(--s1);
  padding: var(--s2);

  background: var(--c2);
}

.c-cardReason__text {
  color: var(--txt);
  line-height: 1.8;
}

/* 下部ブロック（キャッチ + p）2種 */
.c-cardCatch {
  display: grid;
  grid-template-rows: auto 1fr;
  /* キャッチは自動、説明文は残りスペース */
  gap: var(--s-2);
  padding: var(--s2);
}

.c-cardCatch--b {
  background: var(--c1);
}

.c-cardCatch__lead {
  font-weight: bold;
  color: var(--txt);
  font-size: var(--fs-m);
}

.c-cardCatch__desc {
  margin: 0;
  color: var(--txt);
  align-self: start;
  /* 説明文を上端に配置 */
}

/* 下部領域（理由・キャッチ群）を一括ラップし、最下段へ押し下げ */
.c-cardFooter {
  display: grid;
  gap: var(--s2);
  margin-top: auto;
}

/* =====================================================================
  簡易訴求セクション（.c-sec--recommended）スタイル
  ===================================================================== */

/* セクション背景 */
.c-sec--recommended.l-sec {
  background: transparent;
  padding-top: 0;
  position: relative;
  padding-bottom: calc(var(--s14) + var(--s6));
}

/* 簡易訴求セクションの疑似要素背景 */
.c-sec--recommended.l-sec::before {
  content: "";
  position: absolute;
  top: 10rem;
  left: 0;
  width: calc(50% + 60rem + 6.4rem);
  height: calc(100% - 10rem);
  background: url(img/bg-rec.webp) no-repeat right bottom / cover;
  border-top-right-radius: 3.2rem;
  z-index: 0;
}

/* コンテンツを背景の上に表示 */
.c-sec--recommended.l-sec .l-container {
  position: relative;
  z-index: 1;
}

/* カードラッパーとバッジ */
.c-sec--recommended .c-card-wrapper .c-badge {
  background: var(--pri);
  color: var(--white);
  font-size: var(--fs-l);
  margin-bottom: calc(var(--s2) * -1);
  position: relative;
  width: 80%;
  margin: 0 auto -3.2rem;
  z-index: 1;
  padding: var(--s2) var(--s3);
  line-height: 1.4;
}

.c-sec--recommended .c-card--grid {
  background: var(--white);
  border-radius: var(--r-md);
  padding: var(--s7) var(--s3) var(--s3);
}

/* カード高さ統一のためのグリッド調整 */
.c-sec--recommended .l-grid-3 {
  align-items: stretch;
  /* カードラッパーの高さを統一 */
}

/* 画像とキャプションを囲むラッパー */
.c-sec--recommended .c-card-img-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* subgrid 対応: カード要素の行整列 */
@supports (grid-template-rows: subgrid) {

  /* 6行のsubgrid設定（バッジ1行 + カード要素5行：タイトル2行 + 画像1行 + リスト1行 + ボタン1行） */
  .c-sec--recommended .l-grid-3 {
    grid-template-rows: repeat(6, auto);
  }

  /* カードラッパーとカードをsubgridに設定 */
  .c-sec--recommended .l-grid-3>.c-card-wrapper {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 6;
  }

  .c-sec--recommended .c-card--grid {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 2 / span 5;
    gap: var(--s2);
  }

  /* 下部要素をフラット化 */
  .c-sec--recommended .c-cardFooter {
    display: contents;
  }

  /* 行マッピング */
  .c-sec--recommended .c-card-wrapper>.c-badge {
    grid-row: 1;
  }

  .c-sec--recommended .c-card-wrapper>.c-card--grid>.c-cardTitle {
    grid-row: 1 / span 2;
    display: grid;
    grid-template-rows: subgrid;
  }

  /* c-cardTitle内のspan（キャッチコピー）とcompany-name（社名）を行分け */
  .c-sec--recommended .c-card-wrapper>.c-card--grid>.c-cardTitle>span:first-of-type {
    grid-row: 1;
  }

  .c-sec--recommended .c-card-wrapper>.c-card--grid>.c-cardTitle>.company-name {
    grid-row: 2;
  }

  .c-sec--recommended .c-card-wrapper>.c-card--grid>.c-card-img-wrapper {
    grid-row: 3;
  }

  .c-sec--recommended .c-card-wrapper>.c-card--grid>ul {
    grid-row: 4;
  }

  .c-sec--recommended .c-card-wrapper>.c-card--grid>.btn-web {
    grid-row: 5;
  }
}

/* c-featureCard コンポーネント*/
.c-featureCard {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--s1);
  padding: var(--s3);
  background: var(--c2);
  position: relative;
  border-radius: var(--s2);
}

.c-featureCard__icon {
  position: absolute;
  top: 8px;
  left: -8px;
  width: 3rem;
}

.c-featureCard__lead {
  font-weight: bold;
  color: var(--pri-dark);
  font-size: var(--fs-m);
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--pri);
  align-content: center;
}

/* =============================================================
  c-featureCard subgrid 対応（leadの高さ揃え）
============================================================= */

/* subgrid 対応: featureCard要素の行整列 */
@supports (grid-template-rows: subgrid) {

  /* 2行のsubgrid設定（lead + p） */
  .l-grid-2:has(.c-featureCard) {
    grid-template-rows: repeat(2, auto);
    align-items: stretch;
  }

  /* featureCardをsubgridに設定 */
  .l-grid-2:has(.c-featureCard) .c-featureCard {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 2;
    gap: var(--s1);
  }

  /* 行マッピング */
  .l-grid-2:has(.c-featureCard) .c-featureCard__lead {
    grid-row: 1;
  }

  .l-grid-2:has(.c-featureCard) .c-featureCard>p {
    grid-row: 2;
  }
}

/* コンサルティング事例 */
.c-case-item {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4) var(--s3);
  background: var(--c2);
  border-radius: var(--s2);
  position: relative;
}

.c-case-item h6 {
  font-size: var(--fs-m);
  font-weight: bold;
  color: var(--pri-dark);
  line-height: 1.6;
  position: relative;
}

.c-case-item h6::before {
  content: "";
  position: absolute;
  left: calc(var(--s3) * -1);
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--pri);
}

.c-case-item .l-left-img-box {
  margin: 0;
}

.c-case-catch {
  font-size: var(--fs-m);
  font-weight: bold;
  color: var(--txt);
  margin: 0 0 var(--s2);
  line-height: 1.6;
}

/* 事例情報タグスタイル */
.c-case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  justify-content: flex-start;
  margin-top: var(--s1);
}

.c-case-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s1) var(--s2);
  background-color: white;
  border-radius: calc(var(--s1) / 2);
  font-size: var(--fs-s);
}

#low-page .c-case-tag{
  background-color: var(--inv);
}

.c-case-tag__label {
  font-weight: bold;
  color: var(--pri-dark);
}

.c-case-tag__value {
  color: var(--txt);
}

.more-content {
  display: none;
}

.more-content.is-open {
  display: block;
}

/* アコーディオンボタン */
.acc-more-btn {
  width: 46rem;
  max-width: 95%;
  margin: 0 auto;
  padding: var(--s2) var(--s6) var(--s2) var(--s3);
  text-align: center;
  position: relative;
  transition: opacity 0.3s;
  cursor: pointer;
  background: var(--c1);
  color: var(--txt);
  border-radius: 9999px;
  font-weight: bold;
}

.acc-more-btn::before {
  content: "";
  width: var(--s2);
  height: calc(var(--s1) / 4);
  background: var(--txt);
  position: absolute;
  top: 50%;
  right: var(--s3);
  transform: translate(0, -50%);
}

.acc-more-btn::after {
  content: "";
  width: calc(var(--s1) / 4);
  height: var(--s2);
  background: var(--txt);
  position: absolute;
  top: 50%;
  right: calc(var(--s3) + var(--s1) - calc(var(--s1) / 4));
  transform: translate(0, -50%);
  transition: transform 0.3s;
}

.acc-more-btn:hover {
  opacity: 0.6;
}

.acc-more-btn.is-open::after {
  transform: translate(0, -50%) rotate(90deg);
}

/* =============================================================
  会社一覧カード subgrid 対応
============================================================= */

/* 会社カードの基本レイアウト */
.c-company-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  background: var(--c2);
  border-radius: var(--s2);
  height: 100%;
}

.c-company-card .c-hlink{
  display: block;
  padding: 0 var(--s3);
}

.c-company-card table {
  font-size: var(--fs-s);
  margin: 0;
}

.c-company-card table th {
  width: 30%;
}

/* 会社一覧グリッドの高さ統一 */
.l-sec:has(.c-company-card) .l-grid-3 {
  align-items: stretch;
}

/* subgrid 対応: 会社カード要素の行整列 */
@supports (grid-template-rows: subgrid) {

  /* 親グリッドの列設定を維持し、行構造を定義（subgrid用） */
  .l-sec:has(.c-company-card) .l-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-rows: auto;
  }

  /* 会社カードをsubgridに設定（親グリッドの行を継承） */
  .c-company-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: var(--s2);
  }

  /* 行マッピング */
  .c-company-card>.c-h3 {
    grid-row: 1;
    align-content: center;
  }

  .c-company-card>p {
    grid-row: 2;
  }

  .c-company-card>.c-table {
    grid-row: 3;
  }
}

/* =====================================================================
  基礎知識1: Z型アシンメトリーレイアウト
  ===================================================================== */

/* セクション背景 */
.c-sec--k1.l-sec {
  background: var(--c2);
}

/* フローコンテナ */
.c-kflow {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.c-kflow .c-hlink {
  padding-left: 0;
}

/* カード基本スタイル */
.c-kcard {
  position: relative;
  padding: var(--s4);
  background: var(--white);
  border-radius: var(--s2);
  /* max-width: 100rem; コンテンツが増えたらonにしてください*/
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

/* 左寄せカード */
.c-kcard--l {
  margin-right: auto;
}

/* 右寄せカード */
.c-kcard--r {
  margin-left: auto;
}

/* コンテンツエリア（2カラム） */
.c-kcard__body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s6);
  align-items: center;
}

/* 右側カラムの前に罫線 */
.c-kcard__r {
  position: relative;
}

.c-kcard__r::before {
  content: "";
  position: absolute;
  left: calc(var(--s3) * -1);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--pri);
}

.c-kcard .c-h3 {
  text-align: left;
}


/* =====================================================================
  基礎知識2: 2カラムグリッドレイアウト
  ===================================================================== */

/* セクション背景 */
.c-sec--k2.l-sec {
  background: var(--c1);
}

/* カード内画像スタイル */
.l-grid-2 .c-card img {
  border-radius: var(--s1);
  margin-bottom: var(--s2);
}

/* =====================================================================
  フッターバナー
  ===================================================================== */
.footer-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.footer-banner.js-show {
  opacity: 1;
  visibility: visible;
}

/* PC用バナー */
.pc-fix-banner01 {
  display: block;
  position: fixed;
  bottom: var(--s3);
  right: 0;
  width: 18rem;
  height: 22rem;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  overflow: visible;
}

.footer-banner.js-show .pc-fix-banner01 {
  opacity: 1;
  visibility: visible;
}

.pc-fix-banner01 a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  transition: opacity 0.3s;
  border-top-left-radius: var(--r-sm);
  border-bottom-left-radius: var(--r-sm);
  overflow: hidden;
}

.pc-fix-banner01 a:hover {
  opacity: 0.8;
}

.pc-fix-banner01-img {
  position: absolute;
  top: 16px;
  left: 0px;
  width: 80%;
  z-index: 4;
}

.pc-fix-banner01-img img {
  width: 100%;
  height: auto;
  display: block;
}

.pc-fix-banner01-text {
  position: absolute;
  bottom: 0;
  right: 0;
  width: fit-content;
  background: var(--pri);
  padding: var(--s2) var(--s3);
  color: var(--white);
  font-size: var(--fs-m);
  font-weight: bold;
  line-height: 1.4;
  z-index: 2;
  border-top-left-radius: var(--r-sm);
  border-bottom-left-radius: var(--r-sm);
}

.pc-fix-banner01-text::after {
  content: "";
  position: absolute;
  bottom: 8px;
  right: 6px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 var(--s2) var(--s2);
  border-color: transparent transparent var(--white) transparent;
}

.pc-fix-banner01-text p {
  margin: 0;
}

.pc-fix-banner01-text .text-small {
  font-size: 1.6rem;
}

/* SP用バナー */
.sp-fix-banner01 {
  display: none;
  align-items: center;
  background: var(--pri);
  padding: var(--s2) var(--s3);
}

.sp-fix-banner01-img {
  left: var(--s2);
  position: absolute;
  width: 19%;
  top: -0.8rem;
}

.sp-fix-banner01-img img {
  max-width: 100%;
  height: auto;
  display: block;
}

.sp-fix-banner01-text {
  flex: 1;
}

.sp-fix-banner01-text a {
  display: block;
  text-decoration: none;
  color: var(--white);
  font-size: var(--fs-m);
  font-weight: bold;
  line-height: 1.2;
  transition: opacity 0.3s;
}

.sp-fix-banner01-text a:hover {
  opacity: 0.8;
}

.sp-fix-banner01-text p {
  margin: 0;
}

.sp-fix-banner01-text .text-small {
  font-size: var(--fs-s);
}

/* SP用 */
@media screen and (max-width: 767px) {

  /* メインビジュアル（MV）SP対応 */
  .mainvisual {
    padding: var(--s3) var(--s2) var(--s6);
    background: url("img/mv-sp.webp") no-repeat top center / 100% auto;
  }

  .mv-logo {
    width: 60%;
    margin-bottom: 26rem;
  }

  .mv-title {
    font-size: var(--fs-xl);
    margin-bottom: var(--s2);
  }

  .mv-text {
    font-size: var(--fs-s);
    max-width: 100%;
  }

  /* 下層メインビジュアル（MV）SP対応 */
  .mainvisual-lower {
    padding: var(--s2) 0;
  }

  .mainvisual-lower .mv-logo {
    width: 60%;
  }

  .c-h2 {
    font-size: var(--fs-xl);
  }

  /* 簡易訴求セクションSP対応 */
  .c-sec--recommended.l-sec::before {
    width: 100%;
    left: 0;
    transform: none;
    top: 60px;
    border-top-right-radius: 0;
    height: calc(100% - 6rem);
  }
  .c-sec--recommended .caption,
  .c-sec--recommended .caption a{
    color: var(--txt);
  }

  .c-sec--recommended .c-card-wrapper .c-badge {
    width: max-content;
  }

  .c-sec--recommended .l-grid-3 {
    display: flex;
    flex-direction: column;
  }

  /* SP時の表示順序: トヨタ→アーサー→テクノ */
  .c-sec--recommended .l-grid-3>.c-card-wrapper:nth-child(1) {
    order: 2;
    /* アーサーを2番目に */
  }

  .c-sec--recommended .l-grid-3>.c-card-wrapper:nth-child(2) {
    order: 1;
    /* トヨタを1番目に */
  }

  .c-sec--recommended .l-grid-3>.c-card-wrapper:nth-child(3) {
    order: 3;
    /* テクノを3番目に */
  }

  /* subgridの設定を上書きするため、より詳細度の高いセレクタを使用 */
  .c-sec--recommended .l-grid-3>.c-card-wrapper {
    display: flex;
    flex-direction: column;
    grid-row: none;
  }

  .c-sec--recommended .c-card--grid {
    display: flex;
    flex-direction: column;
    grid-row: none;
  }

  .c-sec--recommended .c-cardFooter {
    display: grid;
    gap: var(--s2);
    margin-top: auto;
  }

  /* 詳細訴求セクションSP対応 */
  .c-sec--detail.l-sec::before {
    width: 100%;
    right: 0;
    top: 140px;
    border-top-left-radius: 0;
    height: calc(100% - 14rem);
  }

  /* 詳細訴求セクションのh2の画像SP対応 */
  .c-sec--detail .c-h2::before {
    left: 50%;
    transform: translateX(-50%);
    top: -13rem;
    width: 12rem;
    height: 11rem;
  }

  /* 詳細訴求セクションのバッジSP対応 */
  .c-badge--detail {
    font-size: var(--fs-l);
    padding: var(--s1) var(--s2);
    top: calc(var(--s3) * -1.6);
    width: max-content;
  }

  .c-sec--detail .c-card--large {
    padding: var(--s4) var(--s2);
  }

  .c-featureCard__icon{
    width: 2.4rem;
    top: -8px;
    left: -4px;
  }

  /* カードスタイル */
  .c-sec--detail table th {
    width: 6rem;
  }

  /* 会社一覧のSP対応 */
  .l-sec:has(.c-company-card) .l-grid-3 {
    display: flex;
    flex-direction: column;
  }

  /* subgridの設定を上書きするため、より詳細度の高いセレクタを使用 */
  .l-sec:has(.c-company-card) .c-company-card {
    display: flex;
    flex-direction: column;
    grid-row: none;
    padding: var(--s4) var(--s3) var(--s5);
  }

  /* 事例情報タグSP対応 */
  .c-case-tag {
    width: 100%;
  }

  /* 基礎知識1 SP対応 */
  .c-kflow {
    gap: var(--s3);
  }

  .c-kcard {
    max-width: 100%;
    padding: var(--s3);
  }

  .c-kcard--l,
  .c-kcard--r {
    margin-left: 0;
    margin-right: 0;
  }

  .c-kcard__body {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
  }

  .c-kcard__l,
  .c-kcard__r {
    width: 100%;
  }

  .c-kcard__l {
    padding-bottom: var(--s1);
  }

  /* SP時は横の罫線 */
  .c-kcard__r::before {
    left: 0;
    top: calc(var(--s2) * -1);
    right: 0;
    bottom: auto;
    width: auto;
    height: 1px;
  }

  /* フッターバナーSP対応 */
  .pc-fix-banner01 {
    display: none;
  }

  .sp-fix-banner01 {
    display: block;
    text-align: center;
    line-height: 1.4;
  }

}