@charset "utf-8";

body {
  font-family: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
}

/* =====================================================================
  汎用プレースホルダー用スタイル
  ===================================================================== */
.c-sec--about {
  background: var(--c1);
}
.c-sec--cmp {
  position: relative;
  background: var(--white);
}

.c-sec--cmp::before {
  content: "";
  position: absolute;
  top: -5%;
  left: 0;
  width: 13%;
  aspect-ratio: 305 / 405;
  background: url("img/deco-01.svg") no-repeat top left / contain;
  pointer-events: none;
  z-index: 1;
}
.c-sec--detail {
  position: relative;
  background: var(--c3);
}

.c-sec--detail::before {
  content: "";
  position: absolute;
  top: -60px;
  right: 0;
  width: 22%;
  aspect-ratio: 386 / 405;
  background: url("img/deco-03.svg") no-repeat top right / contain;
  pointer-events: none;
  z-index: 1;
}
.c-sec-01,
.c-sec-03,
.c-sec-05,
.c-sec-07,
.c-sec-09 {
  background: var(--white);
}
.c-sec-02,
.c-sec-04,
.c-sec-06,
.c-sec-08 {
  background: var(--c1);
}
.c-sec--pr {
  position: relative;
  background: url(img/bg-pr.svg) no-repeat center / 70% , var(--c1);
}
.c-sec--pr::before{
  content: "";
  position: absolute;
  top: -60px;
  right: 2%;
  width: 28%;
  aspect-ratio: 556 / 251;
  background: url("img/deco-pr.webp") no-repeat top right / contain;
  pointer-events: none;
  z-index: 1;
}
/* HOW TO CHOOSEセクション */
.c-sec--howto {
  position: relative;
  background-color: var(--c3);
  border-radius: var(--s8) var(--s8) 0 0;
  padding-bottom: var(--s5);
}

.c-sec--howto::before {
  content: "";
  position: absolute;
  top: -9rem;
  left: 6%;
  width: 13%;
  bottom: 0;
  background: url("img/illust.webp") no-repeat top left / contain;
  pointer-events: none;
}

/* ページ内ナビゲーション */
.c-nav {
  padding: var(--s2) 0;
}

.c-nav__list {
  display: flex;
  justify-content: center;
  gap: var(--s7);
  list-style: none;
  padding: 0;
  margin: 0;
}

.c-nav__link {
  display: flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--fs-s);
  text-decoration: none;
  font-weight: bold;
}

.c-nav__link::after {
  content: "";
  display: block;
  width: var(--s2);
  height: var(--s1);
  background: url("img/arrow-s-down.svg") no-repeat center / contain;
  flex-shrink: 0;
}

/* 見出しスタイル */
.c-eyebrow {
  font-size: var(--fs-l);
  font-weight: bold;
  color: var(--pri);
  letter-spacing: 0em;
}

.c-h2 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--t);
  line-height: 1.6;
}

.c-h2 .c-hlink {
  display: inline;
  padding: 0;
  background: none;
}

.c-h2 .c-hlink::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.8em;
  background: url("img/arrow-s.svg") no-repeat center / contain;
  margin-bottom: 0.8rem;
  margin-left: var(--s3);
  vertical-align: middle;
}

.c-h2::after {
  content: "";
  display: block;
  width: var(--s10);
  height: var(--s-2);
  background-color: var(--pri);
  margin-top: var(--s3);
  border-radius: 50vh;
}

.c-h3 {
  font-size: var(--fs-l);
  font-weight: bold;
  color: var(--pri-dark);
  line-height: 1.6;
}

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

/* 見出し内リンク */
.c-hlink {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  padding: 0 var(--s5) 0 0;
  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: 0 0 var(--r-md) var(--r-md);
}

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

.c-sec--detail .c-card--large {
  padding: var(--s6) calc((100% - 90rem) / 2) var(--s9);
  background: #fff;
  border-radius: 0 0 var(--r-md) var(--r-md);
}

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

.c-cardTitle {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0 0 var(--s2);
  color: var(--txt);
}

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

/* テーブルコンポーネント（幅調整用） */
.c-table {
  margin: 0;
}

.c-table tr:last-child th,
.c-table tr:last-child td {
  border-bottom: none;
}

.c-table th {
  width: 20%;
}

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

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

/* カード自体を縦フレックスにして汎用化（可変要素対応） */
.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(--c3);
}

.c-cardReason__label {
  font-weight: 700;
  color: var(--pri-dark);
}

.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--a {
  background: var(--c0);
}

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

.c-cardCatch__lead {
  font-weight: 700;
  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-cardReason__label {
  display: block;
  padding: var(--s2);
  background: var(--c2);
  font-weight: 700;
  color: var(--pri-dark);
  font-size: var(--fs-m);
}

/* === 簡易3選（TOP PICKS）c-rec === */
.c-rec {
  background: url("img/Subtract.png") no-repeat top center / 100% auto, var(--c1);
}
.c-rec.low{
  background: var(--c1);
}
.c-rec.low.n-bg{
  background: none;
  margin-block: var(--s8);
}
.c-rec__head {
  text-align: center;
  position: relative;
  padding: var(--s2) var(--s4);
  color: var(--white);
  margin: 0;
  font-size: var(--fs-l);
  align-content: center;
  border-radius: var(--r-md) var(--r-md) 0 0;
}

.c-rec__head::before {
  content: "";
  position: absolute;
  top: -2.4rem;
  left: -1.6rem;
  width: var(--s7);
  height: var(--s7);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.c-rec__head--1 { background-color: var(--sec1); }
.c-rec__head--1::before { background-image: url("img/icon-01.svg"); }
.c-rec__head--2 { background-color: var(--sec2); }
.c-rec__head--2::before { background-image: url("img/icon-02.svg"); }
.c-rec__head--3 { background-color: var(--sec3); }
.c-rec__head--3::before { background-image: url("img/icon-03.svg"); }

.c-rec__sub {
  display: block;
  font-size: 0.8em;
  font-weight: bold;
}

.c-rec__dept {
  font-weight: bold;
}

.c-rec__name {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: center;
  padding: 0;
  margin: 0;
  align-self: anchor-center;
}

.c-rec__kana {
  font-size: var(--fs-s);
}

.c-rec__product {
  font-size: var(--fs-l);
  font-weight: bold;
  line-height: 1.4;
}

.c-rec__company {
  font-size: var(--fs-s);
}

.c-rec__img {
  display: flex;
  flex-direction: column;
  align-self: anchor-center;
}

.c-rec__label {
  background-color: var(--c3);
  color: var(--txt);
  font-weight: bold;
  text-align: center;
  padding: var(--s1) var(--s3);
  margin: 0;
  border-radius: var(--r-sm);
  font-size: 1.8rem;
}

.c-rec__catch {
  font-size: var(--fs-m);
  font-weight: bold;
  color: var(--pri-dark);
  text-align: center;
  align-content: center;
}
.c-rec .c-case__lead {
  justify-content: center;
}

.c-rec__reason > p + .c-rec__catch {
  border-top: 1px solid var(--ln);
  padding-top: var(--s3);
}

.c-rec .c-rec__meta > div:last-child {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.c-rec .c-rec__meta > div:last-child::before {
  content: "";
  display: block;
  width: 0.4rem;
  height: var(--s2);
  background: url("img/deco-dots.svg") no-repeat center / contain;
  flex-shrink: 0;
}
.c-rec__meta {
  display: flex;
  gap: var(--s2);
  align-items: center;
  font-size: var(--fs-s);
  padding: var(--s2) 0;
  justify-content: center;
}

.c-rec__meta > :first-child {
  font-weight: bold;
  /* flex: auto; */
}

.c-rec__meta > :last-child {
  /* font-weight: bold; */
}

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

/* subgrid 対応: カード要素の行整列（13行） */
@supports (grid-template-rows: subgrid) {
  /* ヘッド1行 + カード要素12行 */
  .c-rec .l-grid-3 {
    grid-template-rows: repeat(13, auto);
  }

  .c-rec .l-grid-3 > .c-card-wrapper,
  .c-rec .c-card--grid {
    display: grid;
    grid-template-rows: subgrid;
  }

  .c-rec .l-grid-3 > .c-card-wrapper {
    grid-row: 1 / span 13;
  }

  .c-rec .c-card--grid {
    grid-row: 2 / span 12;
    gap: var(--s2); /* reason内を s2 に。前後は margin で s3 相当に補う */
  }

  /* c-rec__reasonの子をサブグリッドに参加させる */
  /* display: contents はボックスを持たないため gap は効かない。行間は親グリッドの gap が制御する */
  .c-rec .c-rec__reason {
    display: contents;
  }

  /* reason 前後のギャップを s3 相当に戻す */
  .c-rec .c-card--grid > p { margin-bottom: var(--s1); }
  .c-rec .c-card--grid > .c-rec__meta { margin-top: var(--s1); }

  /* 行マッピング */
  .c-rec .c-card-wrapper > .c-rec__head { grid-row: 1; }
  .c-rec .c-card--grid > .c-rec__name { grid-row: 1; }
  .c-rec .c-card--grid > .c-rec__img { grid-row: 2; }
  .c-rec .c-card--grid > .c-case__lead { grid-row: 3; }
  .c-rec .c-card--grid > p { grid-row: 4; }
  .c-rec .c-rec__reason > .c-rec__label { grid-row: 5; }
  .c-rec .c-rec__reason > .c-rec__catch:nth-of-type(1) { grid-row: 6; }
  .c-rec .c-rec__reason > p:nth-of-type(1) { grid-row: 7; }
  .c-rec .c-rec__reason > .c-rec__catch:nth-of-type(2) { grid-row: 8; }
  .c-rec .c-rec__reason > p:nth-of-type(2) { grid-row: 9; }
  .c-rec .c-card--grid > .c-rec__meta { grid-row: 10; }
  .c-rec .c-card--grid > .btn-web { grid-row: 11; }
  .c-rec .c-card--grid > .btn-tel { grid-row: 12; }

  /* .c-rec.low: c-rec__label が div のため nth-of-type がひとつズレる */
  .c-rec.low .c-rec__reason > .c-rec__catch:nth-of-type(2) { grid-row: 6; }
  .c-rec.low .c-rec__reason > .c-rec__catch:nth-of-type(3) { grid-row: 8; }
}

/* USE CASESセクション */
.c-sec--cases {
  position: relative;
  background: url("img/bg-b.webp") no-repeat top right / 35%,
            url("img/bg-a.png") no-repeat bottom 25% left / 25%;
  padding-top: var(--s10);
}

.c-sec--cases::after {
  content: "";
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
  width: var(--s10);
  height: var(--s8);
  background: url("img/arrow.svg") no-repeat center / contain;
  z-index: 1;
}

/* USE CASESカード */
.c-case {
  background: var(--white);
  box-shadow: var(--sd-1);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
}

.c-case__head {
  text-align: center;
  padding: var(--s3);
  color: var(--white);
  font-size: var(--fs-xl);
  font-weight: bold;
  position: relative;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  line-height: 1;
}

.c-case__head::before {
  content: "";
  position: absolute;
  width: var(--s7);
  height: var(--s7);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  flex-shrink: 0;
  left: -1.6rem;
  top: -1.6rem;
}

.c-case__head--1 { background-color: var(--sec1); }
.c-case__head--1::before { background-image: url("img/icon-01.svg"); }

.c-case__head--2 { background-color: var(--sec2); }
.c-case__head--2::before { background-image: url("img/icon-02.svg"); }

.c-case__head--3 { background-color: var(--sec3); }
.c-case__head--3::before { background-image: url("img/icon-03.svg"); }

.c-case__body {
  padding: var(--s4) var(--s3);
  flex: 1;
}

.c-case__lead {
  font-size: var(--fs-m);
  font-weight: bold;
  color: var(--txt);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--s1);
  justify-content: center;
  border-bottom: 3px dotted var(--c3);
  padding-bottom: var(--s-2);
}

.c-case__lead::before {
  content: "";
  width: var(--s3);
  height: var(--s3);
  background: url("img/icon-check.svg") no-repeat center / contain;
  flex-shrink: 0;
}

.c-note {
  background: var(--c1);
  border-radius: var(--r-md);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.c-note__catch {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-m);
  color: var(--pri-dark);
  font-weight: bold;
}

.c-note__catch::before {
  content: "";
  width: var(--s4);
  height: var(--s5);
  background: url("img/icon-bulb.svg") no-repeat center / contain;
  flex-shrink: 0;
}

.c-sec--cases .btn-link{flex: 1;align-content: flex-end;}

.c-sec--cases .btn-link a {
  background: url("img/arrow-s-down.svg") no-repeat bottom 0.5em right / auto 0.4em;
}

/* 比較テーブル */
.c-cmp {
  background: var(--white);
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--r-md);
  overflow: clip;
}

.c-cmp th,
.c-cmp td {
  padding: var(--s2);
  border-bottom: none;
  border-right: 2px solid var(--white);
  vertical-align: top;
  min-width: 14rem;
}

/* thead空セル（左上） */
.c-cmp thead th:first-child {
  background: #95acad;
  border: none;
}

/* ヘッダー列（非IDP） */
.c-cmp .c-cmp__head {
  background: #95acad;
  color: var(--white);
  font-weight: bold;
  border-bottom: none;
  border-right: 2px solid;
  text-align: center;
}

/* IDP列ヘッダー */
.c-cmp thead .c-cmp__col--idp {
  background: var(--pri-dark);
  color: var(--white);
}

/* IDP列全体の囲み（左右ボーダー） */
.c-cmp .c-cmp__col--idp {
  border-left: 2px solid var(--pri-dark);
  border-right: 2px solid var(--pri-dark);
}

/* IDP列 上端（thead） */
.c-cmp thead .c-cmp__col--idp {
  border-top: 2px solid var(--pri-dark);
}

/* IDP列 下端（tbody最終行） */
.c-cmp tbody tr:last-child .c-cmp__col--idp {
  border-bottom: 2px solid var(--pri-dark);
}

/* tbody 行ラベル（th） */
.c-cmp tbody th {
  background: var(--c2);
  font-weight: bold;
  min-width: 12rem;
  border-color: var(--ln);
  border-right: none;
  vertical-align: middle;
}

/* tbody データセル */
.c-cmp tbody td {
  background: var(--c2);
  vertical-align: middle;
}
.c-cmp tbody td .small{
  text-align: center;
}

/* tbody 偶数行 */
.c-cmp tbody tr:nth-child(even) th,
.c-cmp tbody tr:nth-child(even) td {
  background: var(--c1);
}

/* 各行最右セルの右罫線を外す */
.c-cmp th:last-child,
.c-cmp td:last-child {
  border-right: none;
}

/* 比較表 アイコンセル */
.c-cmp .c-cmp__icon-cell {
  text-align: center;
  vertical-align: middle;
}

.c-cmp__icon-cell img {
  width: var(--s3);
  max-width: 100%;
}


/* 混合セル（アイコン＋テキスト） */
.c-cmp__mixed-cell img {
  display: block;
  width: var(--s3);
  max-width: 100%;
  margin: 0 auto var(--s1);
}

/* c-step コンポーネント（ABOUT IDPセクション） */
.c-step {
  position: relative;
  background: var(--white);
  padding: var(--s5);
  border-radius: var(--r-md);
}

.c-step__num {
  position: absolute;
  top: -1.6rem;
  left: -1.6rem;
  width: var(--s6);
  height: var(--s6);
  background: var(--pri);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-m);
  font-weight: bold;
}

.c-step__inner {
  display: flex;
  gap: var(--s5);
  align-items: center;
}

.c-step__img {
  width: 20%;
  flex-shrink: 0;
}

.c-step__img img {
  max-width: 100%;
}

.c-step__body {
  flex: 1;
}

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

/* フロー接続線（最終ステップを除く） */
.c-step:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--s5));
  left: calc(var(--s5) + (100% - var(--s10)) * 0.1);
  transform: translateX(-50%);
  width: var(--s1);
  height: var(--s5);
  background: var(--c3);
}

/* c-featureCard コンポーネント*/
.c-featureCard {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--s2);
  padding: var(--s4);
  background: var(--c1);
  border-radius: var(--r-md);
}

.c-featureCard__lead {
  font-weight: 700;
  color: var(--txt);
  font-size: var(--fs-m);
  line-height: 1.6;
}

.c-sec--detail .c-featureCard__lead {
  color: var(--pri-dark);
}

/* === 詳細訴求コンポーネント === */

/* 部門ヘッダー+カードの縦積みラッパー */
.c-detail {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

.c-detail::before {
  content: "";
  position: absolute;
  bottom: -1%;
  left: calc(50% - 50vw);
  width: 40%;
  aspect-ratio: 518 / 548;
  background: url("img/deco-04.svg") no-repeat bottom left / contain;
  pointer-events: none;
  z-index: -1;
}

.c-detail .c-rec__head{
  padding: var(--s3);
  font-size: var(--fs-xl);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.c-detail .c-rec__head::before{
  top: 50%;
  transform: translateY(-50%);
  height: calc(100% - (var(--s5)));
  width: auto;
  aspect-ratio: 1/1;
  left: var(
  --s5);
}

/* セクション内小見出し（左ボーダー） */
.c-dh {
  font-size: var(--fs-l);
  font-weight: bold;
  color: var(--txt);
  border-top: 1px solid var(--ln);
  border-bottom: 1px solid var(--ln);
  padding: var(--s1);
}

/* メリットブロック */
.c-merit {
  background: var(--c0);
  padding: var(--s4) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  text-align: center;
  position: relative;
  border-radius: var(--r-md);
  margin-top: var(--s3);
}

.c-merit__label {
  font-size: var(--fs-s);
  font-weight: bold;
  color: var(--white);
  background: var(--pri-dark);
  padding: var(--s1) var(--s2);
  border-radius: var(--r-sm);
  display: inline-block;
  align-self: center;
  position: absolute;
  top: -1.6rem;
  line-height: 1.4;
}

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

.c-merit > p {
  text-align: left;
}

.c-ba__lead {
  font-size: var(--fs-m);
  font-weight: bold;
  border-left: var(--s1) var(--pri) solid;
  line-height: 1.4;
  padding-left: var(--s2);
  margin-bottom: var(--s2);
}

/* ビフォーアフター比較 */
.c-ba {
  display: grid;
  grid-template-columns: auto;
  gap: 0 var(--s4);
  align-items: stretch;
  justify-content: space-around;
}

.c-ba::before {
  content: "";
  display: block;
  width: 1.8rem;
  background: url("img/separate.svg") no-repeat center / contain;
  grid-column: 2;
  grid-row: 1;
}

.c-ba__before {
  grid-column: 1;
}

.c-ba__after {
  grid-column: 3;
}

.c-ba__before,
.c-ba__after {
  display: flex;
  flex-direction: column;
  width: fit-content;
}

.c-ba__head {
  font-weight: bold;
  font-size: var(--fs-m);
  color: var(--white);
  padding: var(--s1) var(--s3);
  position: relative;
  border-radius: var(--r-sm);
  width: max-content;
  line-height: 1.2;
}

.c-ba__head::after {
  content: "";
  display: block;
  position: absolute;
  bottom: calc(-0.9 * var(--s2));
  left: 50%;
  transform: translateX(-50%);
  width: var(--s3);
  height: var(--s2);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.c-ba__before .c-ba__head { background-color: var(--sub); }
.c-ba__before .c-ba__head::after { background-color: var(--sub); }
.c-ba__after .c-ba__head { background-color: var(--acc); }
.c-ba__after .c-ba__head::after { background-color: var(--acc); }

.c-ba ul {
  list-style: none;
  padding: 0;
  padding-top: calc(var(--s2) + var(--s2));
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  flex: 1;
}

.c-ba li {
  display: flex;
  align-items: flex-start;
  gap: var(--s1);
}

.c-ba li::before {
  content: "";
  flex-shrink: 0;
  /* margin-top: 0.35em; */
  width: var(--s1);
  height: var(--s1);
  border-radius: 50%;
  background: var(--ln)!important;
}

.c-ba__before li::before { background-color: var(--sub); }
.c-ba__after li::before {background-color: var(--acc-light)!important;}

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

/* 会社カードの基本レイアウト */
.c-company-card {
  gap: var(--s2);
  padding: var(--s3);
  background: var(--white);
  box-shadow: var(--sd-1);
  height: 100%;
  border-radius: var(--r-md);
}
.c-company-card .c-h3{
  align-content: center;
  font-size: var(--fs-m);
}
.c-company-card table {
  font-size: 1.4rem;
  margin: 0;
}
.c-company-card table th {
  width: 31%;
}
/* 会社一覧グリッドの高さ統一 */
.l-sec:has(.c-company-card) .l-grid-3 {
  align-items: stretch;
}

/* subgrid 対応: 同行カード内の要素を縦揃え（4要素×2行=8トラック） */
@supports (grid-template-rows: subgrid) {
  .l-sec:has(.c-company-card) .l-grid-3 {
    grid-template-rows: repeat(8, auto);
    row-gap: var(--s3);
  }
  .c-company-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
  }
}

/* 基礎知識記事カード */
.c-article {
  background: var(--white);
  padding: var(--s4) var(--s5);
  box-shadow: var(--sd-1);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  border-radius: var(--r-md);
}

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

/* 知識セクション2カラム（テキスト | 画像） */
.l-grid-2.c-kn {
  align-items: center;
  gap: var(--s5);
}
.c-kn .c-article{
  background: none;
  padding: 0;
  box-shadow: none;
}
.c-sec__img img {
  max-width: 100%;
}

/* 画像左・テキスト右の逆順バリアント */
.c-kn--rev .c-sec__img {
  order: -1;
}

/*
---------------------------------------------
    navigation02 ※TOP、下層共通
*/
.header-area--top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 300;
}
.header-area--low {
  background: var(--c0);
}
.header-area--top .header-title {
  color: #fff;
}
.header-area--top .header-title::before {
  color: #333;
  background-color: #fff;
}
.header-area--top .header-title a {
  color: #fff;
}
.header-area-upper {
  padding: var(--s1);
  text-align: right;
}
.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: relative;
  top: 50%;
  margin-right: var(--s-2);
}
.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;
  z-index: 250;
  position: relative;
}
.gnavi-ctrl.is-show {
  opacity: 1;
  visibility: visible;
}
.gnavi-btn {
  width: 5.6rem;
  height: 4.8rem;
  background: var(--pri-dark);
  display: block;
  position: fixed;
  top: var(--s3);
  right: 0;
  z-index: 250;
  cursor: pointer;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.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: var(--s2) auto 0;
  padding: var(
  --s2);
  border-radius: 50vh;
  color: var(
  --txt);
  background: white;
  display: block;
  text-align: center;
  border: 2px solid var(
  --ln);
}
.gnavi-btn-close__inner {
  padding: 0 0 0 var(--s3);
  display: inline-block;
  font-weight: 700;
  position: relative;
}
.gnavi-btn-close__inner::before {
  content: "";
  width: 1em;
  height: 0.2rem;
  background: var(--txt);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%) rotate(45deg);
}
.gnavi-btn-close__inner::after {
  content: "";
  width: 1em;
  height: 0.2rem;
  background: var(--txt);
  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: 200;
  transform: translateX(100%);
  transition:
    transform 0.8s ease,
    opacity 0.8s ease;
  opacity: 0;
}
.gnavi-title {
  width: 60%;
  margin: 0 auto 0 var(--s2);
  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);
}

/*
---------------------------------------------
    page-top
*/
.page-top__link {
  background: none;
  border-radius: 0;
  padding: 0;
}

/*
---------------------------------------------
    footer-banner
*/
.footer-banner {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.footer-banner.js-show {
  opacity: 1;
}
.pc-fix-banner01 {
  position: fixed;
  right: 0;
  bottom: 16rem;
  z-index: 50;
}
.pc-fix-banner01 a {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-decoration: none;
}
.pc-fix-banner01 a:hover {
  opacity: .7;
}
.pc-fix-banner01-img {
  width: 17.6rem;
  position: relative;
  margin-bottom: -2rem;
  z-index: 1;
}
.pc-fix-banner01-img::before {
  content: "";
  width: 8.7rem;
  aspect-ratio: 87 / 78;
  background: var(--acc-light);
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.pc-fix-banner01-img img {
  max-width: 100%;
  position: relative;
  z-index: 1;
}
.pc-fix-banner01-text {
  width: auto;
  padding: var(--s3) var(--s2);
  background: var(--acc-dark);
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-style: solid;
  border-color: var(--acc);
  border-radius: var(--s3) 0 0 var(--s3);
  box-shadow: var(--sd-1);
  position: relative;
  overflow: hidden;
}
.pc-fix-banner01-text::after {
  content: "";
  width: 1.4rem;
  aspect-ratio: 1;
  background: var(--acc-light);
  position: absolute;
  right: 0.6rem;
  bottom: 1.2rem;
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
.pc-fix-banner01-text p {
  color: var(--white);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.58;
  margin: 0;
}
.pc-fix-banner01-text p.text-small {
  font-size: var(--fs-s);
}

/* =============================================================
  メインビジュアル
============================================================= */
.mainvisual {
  position: relative;
  padding: var(--s10) 0 var(--s10);
  z-index: 2;
  overflow: visible;
  background: var(--c1);
}

.mainvisual::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 12%;
  aspect-ratio: 4/5;
  background: url("img/mv-l.png") no-repeat top left / contain;
  pointer-events: none;
}

.mainvisual::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: calc(var(--s9) * -1);
  width: 38%;
  background: url("img/mv-r.webp") no-repeat top right / contain;
  pointer-events: none;
}

.mv-logo {
  position: absolute;
  top: var(--s4);
  left: var(--s10);
  width: 18.8rem;
  max-width: 100%;
}
.mv-body {
  max-width: 65%;
}
.mv-body .btn-anchor{
  margin: var(--s2) 0 0;
}
.mv-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--txt);
  line-height: 1.6;
  margin: 0;
}

.mv-title__label {
  position: relative;
  display: block;
  width: fit-content;
  padding: var(--s1) var(--s3);
  background: var(--grd);
  color: var(--white);
  border-radius: var(--r-md);
  font-size: var(--fs-l);
  font-weight: bold;
  margin-bottom: var(--s3);
}

.mv-title__label::after {
  content: "";
  display: block;
  position: absolute;
  bottom: calc(-1 * var(--s2));
  left: 10%;
  width: var(--s3);
  height: var(--s2);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: var(--pri);
}

.mv-title__catch {
  display: block;
  color: var(--acc-dark);
  font-size: var(--fs-xxl);
}

.mv-note {
  color: var(--sub);
}

/* 下層MV
===================================================================== */
.mainvisual-lower {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--s3);
  background: var(--c0);
  overflow: visible;
}

.mainvisual-lower::before {
  content: "";
  position: absolute;
  top: 15%;
  left: 8%;
  width: 12%;
  aspect-ratio: 232 / 182;
  background: url("img/mv-low-l.svg") no-repeat center / contain;
  pointer-events: none;
  z-index: 1;
}

.mainvisual-lower::after {
  content: "";
  position: absolute;
  top: -7%;
  right: 12%;
  width: 14.5%;
  aspect-ratio: 278 / 198;
  background: url("img/mv-low-r.png") no-repeat center / contain;
  pointer-events: none;
  z-index: 1;
}

.mvl-logo {
  position: relative;
  width: 31.4rem;
  max-width: 50%;
  z-index: 2;
}

.mvl-logo img {
  width: 100%;
  max-width: 100%;
}

/* ==============================================
   目次01 (index01-frame)
   ============================================== */
.index01-frame {
  width: 100%;
  background-color: transparent;
  margin-block: var(--s4);
}

.index01-wrap {
  margin: 0 auto;
  padding: var(--s3) var(--s5);
  border: solid 0.1rem var(--ln);
  background-color: var(--c2);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.index01-wrap {
  cursor: pointer;
}

.index01-title {
  padding: 0 var(--s5) 0 0;
  color: var(--txt);
  font-size: var(--fs-m);
  font-weight: bold;
  line-height: 1;
  position: relative;
}

.index01-title::before {
  content: "";
  width: 2rem;
  height: 0.3rem;
  background: var(--txt);
  position: absolute;
  top: 50%;
  right: var(--s2);
  transform: translate(0, -50%);
}

.index01-title::after {
  content: "";
  width: 0.3rem;
  height: 2rem;
  background: var(--txt);
  position: absolute;
  top: 50%;
  right: 2.5rem;
  transform: translate(0, -50%);
  transition: transform 0.3s;
}

.index01-wrap.is-open .index01-title::after {
  transform: translate(0, -50%) rotate(270deg);
}

.index01-chapter {
  padding: 0 var(--s2);
  font-weight: 700;
}

.index01-chapter-h {
  margin: 0 0 0 var(--s2);
  font-size: 100%;
  line-height: 1.7;
  position: relative;
}

.index01-chapter-h a {
  display: block;
  text-decoration: none;
}

.index01-chapter-h a:hover {
  opacity: 0.6;
}

.index01-chapter-h-two {
  margin-left: var(--s2);
  position: relative;
  margin-bottom: var(--s1);
}

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

.index01-chapter-h-two::before,
.index01-chapter-h-three::before {
  position: absolute;
  top: 0;
  left: -1.5em;
}

.index01-chapter-h-two::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 2rem;
  background-color: var(--pri);
  transform: translateY(-50%);
  top: 0.8em;
}

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

.more-content {
  display: none;
}

.index01-content {
  background-color: transparent;
}

/* まとめパーツ */
.conclusion-box-frame {
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  background: var(--white);
  border: 0.2rem solid var(--acc-light);
  border-radius: var(--r-lg);
  margin-block: var(--s4) var(--s6);
}

.conclusion-box-ttl {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s2);
}

.conclusion-box-ttl__icon {
  flex-shrink: 0;
  width: var(--s11);
  height: var(--s10);
  background: url("img/icon-matome.svg") no-repeat center / contain;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-m);
  font-weight: 700;
  color: var(--white);
}

.conclusion-box-ttl__text {
  font-size: var(--fs-l);
  font-weight: 700;
  color: var(--acc-dark);
  flex-grow: 1;
}

.conclusion-box-content {
  /* display: flex; */
  flex-direction: column;
}

.conclusion-box-frame .btn-internal {
  margin-block: var(--s3) 0;
}

.related-article01-list {
  position: relative;
}

.related-article01-more {
  position: relative;
  z-index: 2;
}

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

.related-article01-list.has-more.is-open::after {
  display: none;
}

/* SP用 */
@media (max-width: 767px) {
  .header-area-upper{
    text-align: left;
  }
  .c-hlink {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  padding: 0 var(--s5) 0 0;
  background-position: right 0.4rem center;
}
  .index01-title::after{
    right: 2rem;
  }
  
  .pc-fix-banner01 {
    display: none;
  }
  .c-nav__list {
    flex-direction: column;
    gap: var(--s3);
    align-items: center;
  }

  .c-cmp {
    min-width: 70rem;
  }

  .c-cmp thead th:first-child,
  .c-cmp tbody th {
    position: sticky;
    left: 0;
    z-index: 2;
  }

  .c-cmp tbody th {
    background: var(--c2);
  }

  .c-cmp tbody tr:nth-child(even) th {
    background: var(--c1);
  }

  .c-cmp thead th:first-child {
    /* background: var(--white); */
    z-index: 3;
    width: 8rem;
    min-width: 0px;
  }

  .c-step{
    padding: var(--s5) var(--s3);
  }

  .c-step__inner {
    flex-direction: column;
    padding-left: 0;
    padding-top: 0;
  }

  .c-step__num{
    left: 0;
  }

  .c-step__img {
    width: 70%;
  }

  .c-step:not(:last-child)::after {
    left: 50%;
  }

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

  .c-rec .l-grid-3 > .c-card-wrapper,
  .c-rec .c-card--grid {
    display: flex !important;
    flex-direction: column;
    grid-row: none;
  }

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

  .c-rec .c-card--grid .btn-tel{
    margin-block: var(--s1) var(--s4) !important;
  }

  .c-ba {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
  }

  .c-ba::before {
    display: none;
  }

  .c-sec--detail .c-card--large {
    padding: var(--s4) var(--s2) var(--s6);
  }
  .c-sec--detail .l-grid-2{
    gap: var(--s4);
  }
  .c-sec--detail .c-rec__name{
    margin-bottom: -1.6rem;
  }
  .c-sec--detail .l-center-img{
    padding-bottom: 0;
  }

  /* 知識セクション2カラムのSP対応 */
  .l-grid-2.c-kn {
    display: flex;
    flex-direction: column;
  }

  .l-grid-2.c-kn .c-sec__img {
    order: -1;
    width: 65%;
    margin: 0 auto;
  }

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

  .c-company-card {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: var(--s4);
  }

  .c-company-card .c-h3{
    font-size: var(--fs-l);
  }

  .l-grid-2.c-kn {
    align-items: stretch;
    gap: var(--s3);
  }

  /* スクロール可能インジケーター */
  .c-scroll-wrap {
    position: relative;
  }
  .c-scroll-wrap .l-scroll-x-sp{
    margin: 0;
  }
  .c-scroll-wrap .l-scroll-x-sp table td{
    max-width: 18rem;
  }

  .c-scroll-wrap::before {
    /* content: "◀左右にスクロールできます▶"; */
    display: block;
    color: var(--sub);
    text-align: right;
    padding-bottom: var(--s1);
  }

  /* 背景画像 SP サイズ調整（仮） */
  .c-rec {
    background-size: 100% auto, auto;
  }

  .c-sec--pr {
    background-size: 90%, auto;
    background-position: center 10rem;
  }

  .c-sec--cases {
    background: url("img/bg-b.webp") no-repeat top right / 80%;
    padding-top: var(--s5);
  }

  /* 疑似要素 SP 調整 */
  .c-sec--howto {
    overflow: visible;
  }
  .c-sec--howto::before {
    width: 27%;
    top: -2.4rem;
    left: 2%;
  }

  .c-sec--cmp::before {
    width: 23%;
    top: -4%;
    left: -31px;
  }

  .c-sec--detail::before {
    top: -34px;
    width: 35%;
  }

  .c-sec--pr::before {
    top: -20px;
    width: 50%;
  }

  .c-rec__head::before,
  .c-case__head::before {
    left: 0;
  }

  .c-detail .c-rec__head::before {
    top: -2.4rem;
    left: 0;
    width: var(--s9);
    height: var(--s9);
    transform: none;
  }
  .c-sec--cases .btn-link a{
    background-position: 95% center;
  }

  .c-merit {
    margin-top: var(--s6);
    padding-top: var(--s10);
  }

  /* ── メインビジュアル SP ── */
  .header-area--top{
    position: relative;
    background: var(--pri);
  }
  .mainvisual {
    padding: 40% 0 var(--s8);
  }

  .mv-logo{
    left: var(--s2);
    top: 9%;
    width: 16rem;
  }

  .mainvisual::before {
    width: 40%;
    opacity: 0.1;
  }

  .mainvisual::after {
    width: 54%;
  }

  .mv-body {
    max-width: 100%;
  }

  .mv-title__catch {
    font-size: var(--fs-2xl);
  }

  /* ── 下層メインビジュアル SP ── */
  .mainvisual-lower {
    padding: var(--s4) var(--s5);
  }

  .mainvisual-lower::before{
    left: 2%;
    top: 0;
    width: 7rem;
  }
    .mainvisual-lower::after{
      right: 2%;
      bottom: -4rem;
      width: 8rem;
    }

  .mvl-logo {
    width: 60%;
    max-width: 100%;
  }

  .conclusion-box-frame{
    padding: var(--s3) var(--s3) var(--s5) ;
  }
}


.c-rec.low .btn-web,
.c-rec.low .btn-tel,
.c-rec.low .btn-internal,
.c-rec.low .btn-anchor,
.c-rec.low .btn-link {
    margin-top: 0;
    margin-bottom: 0;
}