@charset "utf-8";

/* =====================================================================
  フォント設定
  ===================================================================== */
h2,
h3,
h4,
h5,
h6,
.c-h2,
.c-h3,
.c-h4,
.c-badge,
.c-cardTitle,
.c-cardCatch__lead,
.c-h-accent,
.c-featureCard__lead,
.c-case__title,
.c-chip,
.c-info-list__label,
.c-product__label,
.c-tag,
.index02-title,
.related-article01-title {
  font-family: "Barlow Semi Condensed", sans-serif;
}

.u-mono {
  font-family: "Roboto Mono", monospace;
}

/* =====================================================================
  セクション境目の装飾（左下に次セクション背景色の疑似要素）
  ===================================================================== */
.mainvisual,
.l-sec {
  position: relative;
}

.mainvisual::after,
.l-sec::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 56.57%;
  height: var(--s6);
  background: var(--white);
}

/* 下層組み込み時：上部に白矩形（::after の逆値） */
.c-sec--recommended.lower::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: calc(100% - 56.57%);
  height: var(--s6);
  background: white;
}

/* デフォルト（var(--white)）から外れる箇所のみ上書き */
.mainvisual::after {
  background: var(--c0);
} /* MV(c1)        → intro(c0)      */
.c-sec--intro::after {
  background: var(--c2);
} /* intro(c0)     → recommend(c2)  */
.c-sec--recommended::after {
  background: var(--c1);
} /* recommend(c2) → detail(c1)     */
.c-sec--detail::after {
  background: var(--c0);
} /* detail(c1)    → 会社一覧(c0)   */

.l-sec:last-child::after {
  display: none;
}
.l-sec:last-child{
  padding-bottom: var(--s6);
}

/* =====================================================================
  MV（メインビジュアル）
  ===================================================================== */
.mainvisual {
  background:
    url("img/mv-r.png") right top / 30% auto no-repeat,
    url("img/mv-l.webp") left bottom / 35% auto no-repeat,
    var(--c1);
  padding: var(--s6) 18% var(--s14) 36%;
}

.mv-label img {
  width: 24rem;
  margin-bottom: var(--s2);
}

.mv-title {
  font-size: clamp(3.35rem, 2.98rem + 1.6vw, 5.18rem);
  font-weight: 700;
  color: var(--pri-dark);
  line-height: 1.3;
  margin-bottom: var(--s3);
}

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

/* =====================================================================
  下層MV（仮）
  ===================================================================== */
.mainvisual-lower {
  position: relative;
  background: url(img/mv-low.png) bottom -32rem center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0 var(--s8);
}
.mainvisual-lower .mv-logo {
  width: 32rem;
  max-width: 60%;
}

.mainvisual-lower::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 56.57%;
  height: var(--s5);
  background: var(--white);
}

/* =====================================================================
  セクション1（導入）
  ===================================================================== */
.c-sec--intro {
  background: var(--c0);
}
.c-sec--intro .l-left-img-box {
  display: flex;
  align-items: center;
  gap: var(--s4);
}
.c-sec--intro .l-left-img {
  flex-shrink: 0;
  float: none;
  margin-right: 0;
  padding-bottom: 0;
  max-width: 400px;
}

/* 簡易訴求 */
.c-sec--recommended {
  background: var(--c2);
  padding-top: var(--s4);
}
.c-sec--recommended.lower{
  padding-top: var(--s10);
}
/* =====================================================================
  汎用プレースホルダー用スタイル
  ===================================================================== */
.c-sec--detail {
  background: var(--c1);
}
/* 見出しスタイル */
.c-h2 {
  font-size: var(--fs-xxl);
  font-weight: 700;
  text-align: left;
  color: var(--pri-dark);
  line-height: 1.3;
}

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

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

/* 見出し内リンク */
.c-hlink {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  padding-right: 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);
  line-height: 1.6;
}

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

/* 会社名 */
.c-cardCompany {
  font-size: var(--fs-s);
  color: var(--sub);
  text-align: center;
}

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

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

.c-sec--detail .c-card--large {
  padding: 0;
  background: var(--c0);
  border: 1px solid var(--ln);
}

.c-sec--detail .c-card--large + .c-card--large {
  margin-top: var(--s10);
}

.c-sec--detail .c-card--large__head {
  padding-bottom: var(--s4);
}

.c-sec--detail .c-card--large__body {
  padding: 0 var(--s8) var(--s6);
}
.c-sec--detail .l-center-img-box > p {
  max-width: 90rem;
  margin: var(--s2) auto 0;
}
.c-caseStudy .l-center-img-box > p{
  margin: var(--s2) auto var(--s5);
}

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

.c-cardTitle {
  font-size: var(--fs-m);
  font-weight: 700;
  color: var(--pri);
}

.c-cardTitle span,
.c-card--large .c-h4 span {
  display: block;
  font-size: 0.7em;
  font-weight: 400;
}

/* バッジコンポーネント */
.c-badge {
  text-align: center;
  padding: var(--s3) var(--s2);
  background: var(--pri-dark);
  color: white;
  font-size: var(--fs-xl);
  font-weight: bold;
  margin-bottom: 0; /* ギャップなしの縦積みのため */
  line-height: 1.4;
}

/* テーブルコンポーネント */
.c-table {
  border: none;
  text-align: center;
}

.c-table th {
  border-right: 0;
}

.c-table th:first-child,
.c-table td:first-child {
  border-right: 1px solid var(--ln);
}

.c-table td {
  border-bottom: 0;
}

/* =============================================================
  簡易訴求カード 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;
}

/* 下部ブロック（キャッチ + p）2種 */
.c-cardCatch {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--s2);
}

.c-cardCatch__lead {
  font-weight: 700;
  color: var(--pri-dark);
  font-size: var(--fs-m);
  text-align: center;
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--ln);
  align-content: center;
  line-height: 1.3;
}

/* カード高さ統一 */
.c-sec--recommended .l-grid-3 {
  align-items: stretch;
  row-gap: 0;
}
.c-sec--recommended .c-badge {
  border-right: 1px solid var(--ln);
}
.c-sec--recommended .c-card-wrapper:last-child .c-badge {
  border-right: none;
}
.c-sec--recommended .c-card {
  padding: var(--s4);
  border-right: 1px solid var(--ln);
}
.c-sec--recommended .c-card-wrapper:last-child .c-card {
  border-right: none;
}

/* subgrid 対応（c-card-wrapper を display:contents にして l-grid-3 → c-card--grid に直接継承） */
@supports (grid-template-rows: subgrid) {
  /* badge(1) + img(1) + title(1) + catchA×2 + catchB×3 + btns(1) = 9行 */
  .c-sec--recommended .l-grid-3 {
    grid-template-rows: auto repeat(8, auto);
  }

  .c-sec--recommended .l-grid-3 > .c-card-wrapper {
    display: contents;
  }

  /* バッジ → row 1（列は DOM 順で自動配置） */
  .c-sec--recommended .c-badge {
    grid-row: 1;
  }

  /* c-card--grid が l-grid-3 の rows 2–9 を直接継承 */
  .c-sec--recommended .c-card--grid {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 2 / span 8;
    gap: var(--s3);
  }

  /* c-card--grid 内の行マッピング */
  .c-sec--recommended .c-card--grid > .l-center-img {
    grid-row: 1;
    padding: 0;
    align-content: center;
  }
  .c-sec--recommended .c-card--grid > .c-cardTitle {
    grid-row: 2;
    text-align: center;
    font-size: var(--fs-l);
  }
  /* catchA: lead(row3) + p(row4) */
  .c-sec--recommended .c-card--grid > .c-cardCatch--a {
    grid-row: 3 / span 2;
    display: grid;
    grid-template-rows: subgrid;
  }
  /* catchB: lead(row5) + p(row6) + caption(row7) */
  .c-sec--recommended .c-card--grid > .c-cardCatch--b {
    grid-row: 5 / span 3;
    display: grid;
    grid-template-rows: subgrid;
  }
  .c-sec--recommended .c-card--grid > .c-btns {
    grid-row: 8;
  }
}

/* ボタングループ */
.c-btns {
  display: grid;
  gap: var(--s1);
}

/* 下層組み込み時：デフォルトの margin: var(--s5) auto を打ち消し */
.c-sec--recommended.lower .btn-web,
.c-sec--recommended.lower .btn-tel,
.c-sec--recommended.lower .btn-internal,
.c-sec--recommended.lower .btn-anchor {
  margin: 0 auto var(--s1);
}

/* c-featureCard コンポーネント*/
.c-featureCard {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--s2);
  padding: var(--s4);
}
.c-featureCard p {
  z-index: 1;
  position: relative;
}

.c-featureCard__lead {
  font-weight: 700;
  color: var(--pri);
  font-size: var(--fs-m);
  position: relative;
  z-index: 1;
  align-content: center;
}
.c-featureCard__lead:before {
  content: "";
  position: absolute;
  width: var(--s11);
  height: var(--s11);
  background: url(img/icon-tit.svg) center / contain;
  z-index: -1;
  left: -1.6rem;
  top: -1.6rem;
}

.c-support .c-featureCard__lead:before {
  display: none;
}

.c-support-list {
  border: 1px solid var(--ln);
}
.c-support-list > .l-stack-s {
  padding: var(--s3) var(--s4);
}
.c-support-list > .l-stack-s + .l-stack-s {
  border-top: 1px solid var(--ln);
}

@supports (grid-template-rows: subgrid) {
  .l-grid-3:has(> .c-featureCard) {
    grid-template-rows: auto 1fr;
  }
  .l-grid-3:has(> .c-featureCard) > .c-featureCard {
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
}

/* =============================================================
  詳細訴求
============================================================= */

/* h3 要件ラベル：全幅ダークバナー */
.c-sec--detail .c-h3 {
  background: var(--pri-dark);
  color: var(--white);
  text-align: center;
  padding: var(--s3) var(--s5);
}

/* h4 製品名：背景なし・センター */
.c-sec--detail .c-h4 {
  background: var(--white);
  color: var(--pri);
  padding: var(--s3);
  text-align: center;
  font-size: var(--fs-xl);
  border-top: 1px solid var(--ln);
  border-bottom: 1px solid var(--ln);
}

/* h5 ダイヤモンドアイコン付き */
.c-h5 {
  font-size: var(--fs-l);
  font-weight: 700;
  color: var(--pri-dark);
  display: flex;
  align-items: center;
  gap: var(--s1);
}

.c-h5::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  background: url("img/icon-diamond.svg") no-repeat center / contain;
}

/* ケース本文のまとまり：gap なしグリッド */
.c-case-body {
  display: grid;
  gap: 0;
  border: 1px solid var(--ln);
}
.c-case-body .l-center-img-box {
  padding: var(--s4) var(--s4) 0;
  background: var(--white);
}
.c-case-body .l-center-img {
  padding: 0;
}

.c-case-body > * + * {
  border-top: 1px solid var(--ln);
}

/* ケーススタディ セクション見出し（h5 > h6 > p 階層確保） */
.c-caseStudy .c-h5 {
  font-size: var(--fs-2xl);
}

/* ケーススタディ ヘッドラインバナー */
.c-case__headline {
  background: var(--pri-dark);
  color: var(--white);
  font-size: var(--fs-l);
  font-weight: 700;
  padding: var(--s3) var(--s5);
  margin: 0;
  position: relative;
}
.c-case__headline:before {
  content: "";
  position: absolute;
  width: var(--s3);
  height: var(--s5);
  background: var(--c0);
  left: -1px;
  top: -1px;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}

.c-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  border-top: 0;
  background: var(--white);
  padding: 0 var(--s5);
}

.c-stats__item {
  padding: var(--s3);
  gap: var(--s2);
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
}

.c-stats__item:last-child {
  border-right: none;
}

.c-stats__label {
  font-size: var(--fs-m);
  color: var(--pri);
  line-height: 1.5;
  font-family: "Barlow Semi Condensed";
  text-align: left;
  align-content: center;
}

.c-stats__value {
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1.2;
  align-content: center;
}

.c-stats__value span {
  font-size: 2em;
  color: var(--acc-dark);
}

/* l-grid-2 列間の縦ボーダー */
.c-case-body .l-grid-2 {
  gap: 0;
}

.c-case-body .l-grid-2 > :last-child {
  border-left: 1px solid var(--ln);
}

/* ケースボックス（Challenges / Background / Voice 等） */
.c-case-box {
  padding: var(--s8) var(--s6) var(--s5);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.c-case-box ul{
  margin: var(--s2) 0 0;
}

/* チップラベル */
.c-chip {
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
  background: var(--pri-dark);
  color: var(--white);
  font-size: 1.8rem;
  font-weight: 700;
  padding: var(--s-2) var(--s1);
  padding-right: var(--s3);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--s2)) 100%, 0 100%);
}

/* ケースボックス内の本文見出し */
.c-case__title {
  font-size: var(--fs-m);
  font-weight: 700;
  color: var(--pri);
  line-height: 1.4;
}

/* 引用ボックス */
.c-voice {
  background-repeat: no-repeat;
  margin-top: var(--s2);
}

.c-case__title + .c-voice {
  background-image: url(img/icon-quote-open.svg);
  background-position: top left;
  background-repeat: no-repeat;
}

.c-voice:last-of-type {
  background-image: url(img/icon-quote-close.svg);
  background-position: bottom right;
}

.c-voice__author {
  color: var(--sub);
  text-align: right;
  margin-top: var(--s-2);
}

/* =============================================================
  サマリセクション 3色サイクル（c2 → c1 → c0 → くり返し）
============================================================= */
.u-bg-c2 {
  background: var(--c2);
}
.u-bg-c2::after {
  background: var(--c1);
} /* c2 → c1 */

.u-bg-c1 {
  background: var(--c1);
}
.u-bg-c1::after {
  background: var(--c0);
} /* c1 → c0 */

.u-bg-c0 {
  background: var(--c0);
}
.u-bg-c0::after {
  background: var(--c2);
} /* c0 → c2 */

/* =============================================================
  サマリ h3（基礎知識セクション）
============================================================= */
.u-bg-c0 .c-h3,
.u-bg-c1 .c-h3,
.u-bg-c2 .c-h3 {
  text-align: left;
  border-left: var(--s-2) solid var(--sub);
  padding: 0 var(--s3);
  font-size: var(--fs-xl);
}
.c-company-card .c-h3 {
  text-align: center;
  border-left: none;
  padding: var(--s2) var(--s3);
  background: var(--pri-dark);
  color: var(--white);
  margin: calc(-1 * var(--s4)) calc(-1 * var(--s4)) 0;
  font-size: var(--fs-xl);
  align-content: center;
}
.c-company-card .c-h3 a {
  color: var(--white);
}
.c-company-card .c-hlink {
  background: url("img/arrow-wh-right.svg") no-repeat center right / auto 0.8em;
}

/* 基礎知識セクション: ボタン左寄せ */
#index .u-bg-c0 .btn-internal,
#index .u-bg-c1 .btn-internal,
#index .u-bg-c2 .btn-internal {
  margin: 0 auto 0 0;
}

/* アイコン + テキストの情報リスト */
.c-info-list {
  margin: 0;
  padding: 0;
}

.c-info-list__item + .c-info-list__item {
  margin-top: var(--s2);
}

.c-info-list__label {
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: 1.3;
  color: var(--pri-dark);
  position: relative;
  padding-left: var(--s4);
  position: relative;
}

.c-info-list__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2em;
  height: 1.2em;
  background: no-repeat center / contain;
}

.c-info-list__item--base .c-info-list__label::before {
  background-image: url("img/icon-india-base.svg");
}

.c-info-list__item--web .c-info-list__label::before {
  background-image: url("img/icon-website.svg");
}

.c-info-list__value {
  margin: var(--s1) 0 0;
  font-size: var(--fs-s);
  color: var(--txt);
  line-height: 1.5;
}

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

/* 会社カードの基本レイアウト */
.c-company-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--white);
  border-right: 1px solid var(--ln);
  height: 100%;
}
.c-company-card:last-child {
  border-right: none;
}
.c-company-card table {
  font-size: 1.4rem;
  margin: 0;
}
.c-company-card table th {
  width: 30%;
}
/* 会社一覧グリッド */
.l-sec:has(.c-company-card) .l-grid-3 {
  align-items: stretch;
}

/* 代表的な製品・プロトコルラベル共通 */
.c-product__label {
  font-size: var(--fs-m);
  font-weight: 700;
  color: var(--txt);
  display: block;
  flex-basis: 100%;
  margin-bottom: var(--s1);
  border-left: var(--s-2) solid var(--pri);
  padding-left: var(--s1);
  line-height: 1.4;
}

/* プロトコルタグ */
.c-tag-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: var(--s1);
}
.c-tag {
  font-size: var(--fs-s);
  background: var(--c2);
  padding: var(--s-2) var(--s1);
  display: inline-block;
  flex: auto;
  line-height: 1.4;
}

/* subgrid 対応: 会社カード要素の行整列 */
@supports (grid-template-rows: subgrid) {
  /* 7行のsubgrid設定（h3 + p + table(3行) + tags + btn） */
  .l-sec:has(.c-company-card) .l-grid-3 {
    grid-template-rows: repeat(7, auto);
  }

  /* 会社カードをsubgridに設定 */
  .c-company-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 7;
  }

  /* 行マッピング */
  .c-company-card > .c-h3 {
    grid-row: 1;
  }
  .c-company-card > p {
    grid-row: 2;
  }
  .c-company-card > .c-info-list {
    grid-row: 3 / span 2;
  }
  .c-company-card > .c-product {
    grid-row: 5;
  }
  .c-company-card > .c-tag-list {
    grid-row: 6;
  }
  .c-company-card > .btn-link {
    grid-row: 7;
    align-content: flex-end;
  }
}

/* =====================================================================
  フッターフィックスバナー
===================================================================== */
.footer-banner {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

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

.pc-fix-banner01 {
  width: 24rem;
  background:
    url("img/mv-r.png") no-repeat center right / 100% auto,
    var(--acc-dark);
  background-blend-mode: multiply;
  position: fixed;
  right: 0;
  bottom: 1rem;
  z-index: 50;
}
.pc-fix-banner01 a {
  color: #fff;
  text-decoration: none;
  display: block;
}
.pc-fix-banner01 a:hover {
  opacity: 0.7;
}
.pc-fix-banner01-img {
  position: relative;
}
.pc-fix-banner01-text {
  padding: var(--s2);
  color: #fff;
  position: relative;
}
.pc-fix-banner01-text::after {
  content: "";
  width: 0.1rem;
  height: 0.1rem;
  border-top: 0.5rem solid transparent;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid #fff;
  border-bottom: 0.5rem solid #fff;
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
}
.pc-fix-banner01-text p {
  margin: 0;
  font-size: 2rem;
  text-align: center;
  font-weight: bold;
}
.pc-fix-banner01-text p.text-small {
  font-size: 1.1em;
  line-height: 1.5;
}

.sp-fix-banner04 {
  display: none;
}

/* =====================================================================
  navigation02 ※TOP、下層共通
===================================================================== */
.header-area-upper {
  padding: var(--s1);
  text-align: right;
  background: var(--c1);
}
.header-title {
  font-size: 1.2rem;
  display: inline-block;
  position: relative;
}
.header-title::before {
  content: "PR";
  padding: 0.2rem;
  color: #fff;
  background-color: #333;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: -2.4rem;
}
.header-title a {
  text-decoration: none;
}
.header-title a:hover {
  text-decoration: underline;
}
.gnavi-btn-close {
  display: none;
}
.toggle-content {
  display: none;
}
.gnavi-ctrl {
  transition:
    opacity 0.6s,
    visibility 0.6s;
  opacity: 0;
  visibility: hidden;
}
.gnavi-ctrl.is-show {
  opacity: 1;
  visibility: visible;
}
.gnavi-btn {
  width: 5.6rem;
  height: 4.8rem;
  background: var(--pri);
  display: block;
  position: fixed;
  top: 2.4rem;
  right: 0;
  z-index: 200;
  cursor: pointer;
}
.gnavi-btn span {
  width: 3.2rem;
  height: 0.2rem;
  display: inline-block;
  background: #fff;
  position: absolute;
  left: 1.2rem;
  transform: translate(0, -50%);
  transition:
    transform 0.4s,
    opacity 0.4s;
}
.gnavi-btn span:nth-of-type(1) {
  top: 1.7rem;
}
.gnavi-btn span:nth-of-type(2) {
  top: 2.4rem;
}
.gnavi-btn span:nth-of-type(3) {
  top: 3.1rem;
}
.gnavi-btn.is-active span:nth-of-type(1) {
  transform: translateY(0.7rem) rotate(-45deg);
}
.gnavi-btn.is-active span:nth-of-type(2) {
  opacity: 0;
}
.gnavi-btn.is-active span:nth-of-type(3) {
  transform: translateY(-0.7rem) rotate(45deg);
}
.gnavi-btn-close {
  width: 80%;
  margin: 0 auto;
  padding: 1.6rem;
  background: #333;
  display: block;
  text-align: center;
}
.gnavi-btn-close__inner {
  padding: 0 0 0 2.4rem;
  display: inline-block;
  color: #fff;
  font-weight: 700;
  position: relative;
}
.gnavi-btn-close__inner::before {
  content: "";
  width: 1em;
  height: 0.2rem;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%) rotate(45deg);
}
.gnavi-btn-close__inner::after {
  content: "";
  width: 1em;
  height: 0.2rem;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%) rotate(135deg);
}
.gnavi-area {
  width: 100%;
  max-width: 37.5rem;
  height: 100vh;
  padding: var(--s3) var(--s1) var(--s10);
  display: block;
  background: #f5f5f5;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  transform: translateX(100%);
  transition:
    transform 0.8s ease,
    opacity 0.8s ease;
  opacity: 0;
}
.gnavi-title {
  width: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.gnavi-pc {
  display: none;
}
.gnavi-list {
  border-bottom: 1px solid #333;
  position: relative;
}
.gnavi-list li {
  padding-left: 0;
}
.gnavi-list__item::before {
  display: none;
}
.gnavi-list__link {
  width: 100%;
  margin: 0 auto;
  padding: var(--s2) var(--s4) var(--s2) var(--s2);
  border-top: 1px solid #333;
  display: block;
  font-weight: 700;
  line-height: 2;
  text-decoration: none;
  position: relative;
}
.gnavi-list__link::after {
  content: "";
  width: 1.4rem;
  height: 1.4rem;
  background: url("img/arrow-s.svg") no-repeat center/contain;
  position: absolute;
  top: 50%;
  right: var(--s2);
  transform: translate(0, -50%) rotate(0);
  transition: transform 0.3s;
}
.gnavi-list__link--toggle::after {
  background-image: url("img/arrow-s-down.svg");
}
.gnavi-list__link--toggle.is-open::after {
  transform: translate(0, -50%) rotate(180deg);
}
.gnavi-list__sub {
  width: 100%;
  background: #fff;
}
.gnavi-list__low .gnavi-list__link {
  padding: var(--s2) var(--s4) var(--s2) var(--s4);
}
.gnavi-list__low .gnavi-list__link::after {
  content: "└";
  background: none;
  transform: translateY(-50%);
  position: absolute;
  top: 40%;
  left: 1rem;
}
.is-gnavi-open .gnavi-area {
  opacity: 1;
  transform: translateX(0);
}

/* =====================================================================
  アクセント見出し
===================================================================== */
.c-h-accent {
  display: block;
  width: 100%;
  padding: var(--s2) var(--s3);
  font-weight: 700;
  color: var(--white);
  background: var(--acc);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--s4)) 100%, 0 100%);
  line-height: 1.4;
  font-size: var(--fs-l);
}

/* ==============================================
   目次02 (index02-frame)
   ============================================== */
.index02-frame {
  width: 100%;
  max-width: 90rem;
  margin-left: auto;
  margin-right: auto;
}

.index02-wrap {
  margin: var(--s4) auto;
  padding: var(
  --s1) var(--s3) var(--s4) var(--s3);
  background: var(
  --c0);
  position: relative;
}

.index02-title {
  padding: var(--s2) var(--s2) var(--s2) 0;
  color: #333;
  font-size: var(--fs-m);
  font-weight: bold;
  line-height: 1;
  background-size: 4rem auto;
  position: relative;
  border-bottom: 1px solid var(--ln);
}

.index02-chapter {
  padding: var(--s2) 0 var(--s4);
}

.index02-chapter-h {
  margin-bottom: 0;
}

.index02-chapter-h-three {
  margin-left: var(--s4);
  position: relative;
}

.index02-chapter-h-three::before {
  content: "└";
}

.more-content-gradation {
  position: relative;
  height: auto;
  max-height: 12rem;
  overflow: hidden;
  transition: max-height 1s;
}

.more-content-gradation::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  transition: 0.3s;
  background: linear-gradient(to bottom, transparent 0%, var(--c0) 100%);
  pointer-events: none;
}

.more-content-gradation.is-open::after {
  display: none;
}

.acc-gr-more-btn {
  width: 95%;
  max-width: 42rem;
  margin: 2rem auto 0 auto;
  padding: var(--s2) var(--s6) var(--s2) var(--s5);
  border: none;
  border-radius: 2px;
  background: var(--suc);
  color: var(--white);
  text-align: center;
  position: relative;
  clip-path: polygon(16px 0px, 100% 0px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0px 100%, 0px 16px);
  transition: transform 0.2s ease;
  cursor: pointer;
}

.acc-gr-more-btn::before {
  content: "";
  width: 2rem;
  height: 0.2rem;
  background: var(--white);
  position: absolute;
  top: 50%;
  right: 3rem;
  transform: translate(0, -50%);
}

.acc-gr-more-btn::after {
  content: "";
  width: 0.2rem;
  height: 2rem;
  background: var(--white);
  position: absolute;
  top: 50%;
  right: 3.9rem;
  transform: translate(0, -50%);
  transition: transform 0.3s;
}

.acc-gr-more-btn:hover {
  opacity: 1;
  transform: translateY(var(--s-2));
}

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

/* ==============================================
   関連記事01 目次02風スタイル上書き
   ============================================== */
.related-article01-frame {
  background: #fff;
  max-width: 90rem;
}

.related-article01-more {
  background: none;
  position: relative;
  bottom: auto;
  z-index: 2;
}

.related-article01-list {
  position: relative;
  transition: max-height 1s;
}

/* アコーディオンボタンが存在するときのみ高さ制限 */
.related-article01-frame:has(.related-article01-more) .related-article01-list {
  max-height: 14rem;
  overflow: hidden;
}

.related-article01-list::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: none;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
  pointer-events: none;
  transition: 0.3s;
}

/* アコーディオンボタンが存在し、かつ未展開のときのみグラデーション表示 */
.related-article01-frame:has(.related-article01-more:not(.is-closed)) .related-article01-list::after {
  display: block;
}

.related-article01-frame:has(.related-article01-more.is-closed) .related-article01-list {
  max-height: none;
  overflow: visible;
}

.related-article01-btn {
  border-radius: 2px;
  border: none;
  width: 95%;
  max-width: 42rem;
  padding: var(--s2) var(--s6) var(--s2) var(--s5);
  background: var(--suc);
  color: var(--white);
  clip-path: polygon(16px 0px, 100% 0px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0px 100%, 0px 16px);
  transition: transform 0.2s ease;
}

.related-article01-btn:hover {
  opacity: 1;
  transform: translateY(var(--s-2));
}

.related-article01-btn::before {
  width: 2rem;
  height: 0.2rem;
  background: var(--white);
  right: 3rem;
}

.related-article01-btn::after {
  width: 0.2rem;
  height: 2rem;
  background: var(--white);
  right: 3.9rem;
}

/* ol ビュレット数字の縦センタリング */
ol:not([class]) li::before {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

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

  .header-title::before{
    position: relative;
  }
  /* セクション境目装飾 */
  .mainvisual::after,
  .l-sec::after {
    width: 80%;
  }
  .c-sec--recommended.lower::before {
    width: 20%;
  }
  /* MV */
  .mainvisual {
    background:
      url("img/mv-r.png") right top / 95% auto no-repeat,
      var(--c1);
    padding: var(--s7) var(--s4) var(--s12);
  }
  .mv-label img {
    max-width: 40%;
  }
  .mv-title {
    font-size: var(--fs-2xl);
  }

  .mainvisual-lower {
    padding-top: var(--s2);
    background: url(img/mv-low.png)  center / cover;
  }
  .mainvisual-lower::after {
    width: 80%;
  }

  /* 見出しフォントサイズ */
  .c-h2 {
    font-size: var(--fs-2xl);
  }

  /* 簡易訴求カード */
  .c-sec--recommended .l-grid-3 {
    display: flex;
    flex-direction: column;
    gap: var(--s8);
    border: none;
  }

  .c-sec--recommended .l-grid-3 > .c-card-wrapper {
    display: flex !important;
    flex-direction: column;
    border: 1px solid var(--ln);
  }

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

  /* 詳細訴求 */
  .c-sec--detail .c-card--large__body {
    padding: 0 var(--s2) var(--s4);
  }
  .c-card--large__body .sp-table-vertical td{
    padding: var(--s2) var(--s4);
  }

  /* ケーススタディ */
  .c-stats {
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
  }
  .c-stats__value span {
    font-size: 1.5em;
  }

  .c-stats__item:nth-child(2) {
    border-right: none;
  }

  .l-grid-3 > *:last-child {
    border-right: 1px solid var(--ln);
  }

  /* 会社一覧 */
  .l-sec:has(.c-company-card) .l-grid-3 {
    display: flex;
    flex-direction: column;
    gap: var(--s8);
  }

  .c-company-card {
    display: flex !important;
    flex-direction: column;
    grid-row: none;
    border-right: none;
    border: 1px solid var(--ln);
  }

  /* フッターフィックスバナー */
  .pc-fix-banner01 {
    display: none;
  }

  .sp-fix-banner04 {
    display: block;
    width: 100%;
    background:
      url("img/mv-r.png") no-repeat center right / auto 100%,
      var(--acc-dark);
    background-blend-mode: multiply;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 50;
  }
  .sp-fix-banner04-text {
    padding: var(--s2);
    color: #fff;
    position: relative;
  }
  .sp-fix-banner04-text p {
    margin: 0;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
  }
  .sp-fix-banner04-text a {
    padding-right: 1.6rem;
    color: #fff;
    text-decoration: none;
    background: url("img/arrow-wh-right.svg") no-repeat right center / 1.4rem auto;
    display: block;
  }
  .sp-fix-banner04-text a:hover {
    opacity: 0.7;
  }

  /* caption内の長いURLを横スクロールで表示 */
  .caption {
    overflow-x: auto;
  }

  /* ケースボックス: 左右padding縮小 */
  .c-case-box {
    padding: var(--s8) var(--s3) var(--s5);
  }

  /* l-grid-2縦積み時: 列間仕切りを横方向に変換 */
  .c-case-body .l-grid-2 > :last-child {
    border-left: none;
    border-top: 1px solid var(--ln);
  }

  /* 簡易訴求: 縦積み時の孤立border-rightを除去 */
  .c-sec--recommended .c-badge,
  .c-sec--recommended .c-card {
    border-right: none;
  }

  /* 基礎知識セクション: SP時はボタンをセンタリングに戻す */
  #index .u-bg-c0 .btn-internal, #index .u-bg-c1 .btn-internal, #index .u-bg-c2 .btn-internal{
    margin: var(--s5) auto;
  }

  /* intro: 縦積み */
  .c-sec--intro .l-left-img-box {
    flex-direction: column;
  }
}