@charset "utf-8";

/* =====================================================================
  汎用プレースホルダー用スタイル
  ===================================================================== */
.c-sec--detail {
  background: var(--c1);
}
/* 見出しスタイル */
.c-h2 {
  font-size: var(--fs-xxl);
  font-weight: 700;
  text-align: center;
  color: var(--pri-dark);
}

.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: white;
}

/* 見出し内リンク */
.c-hlink {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  padding: 0 var(--s5);
  background: url("img/arrow_orange_right.png") 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);
  box-shadow: var(--sd-1);
}

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

.c-sec--detail .c-card--large {
  padding: var(--s4) calc((100% - 90rem) / 2) var(--s6);
  background: #fff;
}

.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 {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.c-table th,
.c-table td {
  padding: var(--s2);
  text-align: left;
  border-bottom: 1px solid var(--ln);
}

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

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

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

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

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

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

/* 会社カードの基本レイアウト */
.c-company-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  background: var(--white);
  box-shadow: var(--sd-1);
  height: 100%;
}
.c-company-card table {
  font-size: 1.6rem;
  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) {
  /* 6行のsubgrid設定（h3 + img + p + table(3行)） */
  .l-sec:has(.c-company-card) .l-grid-3 {
    grid-template-rows: repeat(6, auto);
  }

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

  /* 行マッピング */
  .c-company-card > .c-h3 {
    grid-row: 1;
  }
  .c-company-card > img {
    grid-row: 2;
  }
  .c-company-card > p {
    grid-row: 3;
  }
  .c-company-card > .c-table {
    grid-row: 4 / span 3;
  }
}

/*
---------------------------------------------
    navigation02 ※TOP、下層共通
*/
.header-area-upper {
  padding: 0 1rem 0 0;
  text-align: right;
}
.header-title {
  font-size: 1.2rem;
  display: inline-block;
  position: relative;
}
.header-title::before {
  content: "PR";
  padding: 0 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;
}

@media (max-width: 768px) {
  .header-area .header-area-upper {
    text-align: left;
    padding: 0 var(--s1);
  }

  /* PR を画面外に出さず、サイト名との間隔は gap で統一（TOP／下層共通） */
  .header-area .header-title {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding-left: 0;
    max-width: 100%;
    box-sizing: border-box;
    line-height: 1.2;
  }

  .header-area .header-title::before {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    flex-shrink: 0;
  }

  .header-area .header-title a {
    min-width: 0;
    flex: 1 1 auto;
  }
}

/* 下層「MV」枠：横リピート帯（透過50%）＋上にロゴ中央 */
.mainvisual--lower {
  box-sizing: border-box;
}
.mainvisual--lower .c-low-mainvisual-stage {
  position: relative;
  box-sizing: border-box;
}
.mainvisual--lower .c-low-mainvisual-photo {
  min-height: 16rem;
  width: 100%;
  box-sizing: border-box;
  background-image: url("./img/mv-low.png");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: auto 100%;
  opacity: 0.25;
}
.mainvisual--lower .c-low-mainvisual-logo {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--s7) + var(--s1)) 0 var(--s2);
  box-sizing: border-box;
}
.mainvisual--lower .c-low-mainvisual-logo a {
  display: inline-block;
  max-width: min(100%, 35rem);
  text-decoration: none;
  line-height: 0;
}
.mainvisual--lower .c-low-mainvisual-logo img {
  max-width: 100%;
  vertical-align: bottom;
}
.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: var(--s7);
  height: var(--s6);
  background: #333;
  display: block;
  position: fixed;
  top: var(--s3);
  right: var(--s2);
  z-index: 200;
  cursor: pointer;
}
.gnavi-btn span {
  width: var(--s4);
  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);
}

/* SP：ハンバーガーを正方形＋中央寄せ。PC/SP とも右余白は .page-top と揃える（PC: --s2 / SP: --s1） */
@media (max-width: 768px) {
  .gnavi-btn {
    width: var(--s6);
    height: var(--s6);
    right: var(--s1);
  }
  .gnavi-btn span {
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .gnavi-btn span:nth-of-type(1) {
    top: calc(50% - 0.7rem);
  }
  .gnavi-btn span:nth-of-type(2) {
    top: 50%;
  }
  .gnavi-btn span:nth-of-type(3) {
    top: calc(50% + 0.7rem);
  }
  .gnavi-btn.is-active span:nth-of-type(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .gnavi-btn.is-active span:nth-of-type(3) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
}

.gnavi-btn-close {
  width: 40%;
  margin: 3rem auto;
  padding: var(--s1);
  background: #333;
  display: block;
  text-align: center;
  border-radius: 30rem;
}
.gnavi-btn-close__inner {
  padding: 0 0 0 var(--s3);
  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 {
  margin: 3rem auto 0 0;
  display: flex;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  width: 100%;
}
.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 > .gnavi-list__item:first-child {
  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_orange_right.png") no-repeat center/100% auto;
  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_orange_right.png");
  transform: translate(0, -50%) rotate(90deg);
}
.gnavi-list__link--toggle.is-open::after {
  transform: translate(0, -50%) rotate(-90deg);
}
.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);
}

/*
---------------------------------------------
    footer banner
*/
.footer-banner {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.footer-banner.js-show {
  opacity: 1;
}
.footer-banner.is-closed {
  display: none;
}
.footer-banner__close {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  transform: translateY(calc(-100% - 0.2rem));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-width: 2.8rem;
  height: 2.8rem;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: #333;
  font-family: inherit;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.footer-banner__close span {
  display: block;
  transform: translateY(-0.05em);
}
.footer-banner__close:hover {
  opacity: 0.65;
}
.footer-banner__close:focus-visible {
  outline: 0.2rem solid #333;
  outline-offset: 0.1rem;
}
.pc-fix-banner01 {
  width: 24rem;
  background-color: var(--c0);
  position: fixed;
  overflow: visible;
  /* ページトップ（common .page-top と同じ 6.4rem 角・custom と同じ right/bottom 基準）の直上 */
  right: var(--s2);
  bottom: calc(max(0.4rem, 1.2vmin) + 6.4rem + var(--s2));
  z-index: 50;
  border: 2px solid #333;
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.22);
}
.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-img::before {
  content: "";
  width: 8rem;
  height: 3rem;
  background: url("./img/dummy.jpg") no-repeat center center;
  background-size: cover;
  border: 1px solid #fff;
  position: absolute;
  top: -1.5rem;
  left: 0.5rem;
  z-index: 5;
}
.pc-fix-banner01-text {
  padding: var(--s2) var(--s1);
  color: #fff;
  position: relative;
  text-align: center;
  font-weight: 700;
}
.pc-fix-banner01-text::before {
  content:"";
  width:12rem;
  height: 10rem;
  position: absolute;
  top:-3rem;
  left:50%;
  right:50%;
  transform: translate(-50%,-50%);
  background:url("img/sec01-machine.png") no-repeat center center;
  background-size: 100%;
}
.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 #333;
  border-bottom: 0.5rem solid #333;
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
}
.pc-fix-banner01-text p {
  margin: 0;
  text-align: center;
  color: #333;
  line-height: 1.4;
}
.pc-fix-banner01-text p:not(.text-small) {
  font-size: 1.6rem;
}
.pc-fix-banner01-text span {
  font-size: 2.2rem;
}
.pc-fix-banner01-text p.text-small {
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1.5;
  background-color: #FEB35E;
  color: #333;
  font-weight: 700;
  margin-bottom: 1rem;
}
.sp-fix-banner01 {
  display: none;
}

/* ==============================================
   目次02 (index02-frame) … 工法INDEXカード／縦リスト（本文と同じ ul:not([class]) の丸Bullet）
   ============================================== */
.index02-frame {
  width: 100%;
}
.index02-wrap.top-method-index {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 6rem;
}
.index02-wrap .top-method-index__toc-ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.index02-wrap .top-method-index__toc-ul > li {
  position: relative;
  min-width: 0;
  padding-left: 1.5em;
  margin-bottom: 0.5rem;
  list-style: none;
}
.index02-wrap .top-method-index__toc-ul > li::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--acc);
  position: absolute;
  bottom: calc(100% - 1.2em);
  left: 0.4em;
}
#toc .top-method-index__link {
  display: block;
  white-space: normal;
}
#toc .top-method-index__link::after {
  display: none;
}
.index02-wrap .related-article01-list > li > .top-method-index__link:not(.relations-box) {
  display: block;
  white-space: normal;
}
.index02-wrap .related-article01-list > li > .top-method-index__link::after {
  display: none;
}

/* index02：グラデーション折りたたみ（目次本文の上・ボタンは下） */
.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(--c3) 100%);
}
.more-content-gradation.is-open::after {
  display: none;
}
.index02-wrap .more .acc-more-btn {
  margin-top: var(--s3);
}
#related-article.index02-frame {
  margin: var(--s6) auto;
}

/* 下層ページの table：トップ「会社情報」(.top-detail__info) と同デザイン */
#low-page table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border: 0.1rem solid var(--ln);
  font-size: var(--fs-s);
  margin-block: var(--s8);
  background: var(--white);
}
#low-page table th,
#low-page table td {
  padding: var(--s2) var(--s3);
  border-bottom: 0.1rem solid var(--ln);
  text-align: left;
  vertical-align: middle;
  line-height: 1.6;
}
#low-page table th {
  width: 21rem;
  background: var(--c1);
  color: var(--txt);
  font-weight: 700;
  border-right: 0.1rem solid var(--ln);
  text-align: center;
}
#low-page table td {
  background: var(--white);
  border-right: 0.1rem solid var(--ln);
}
#low-page table td:last-child {
  border-right: none;
}
#low-page table tr:last-child th,
#low-page table tr:last-child td {
  border-bottom: none;
}
#low-page table a {
  color: var(--sec-dark);
  text-decoration: underline;
  word-break: break-all;
}

/* SP：.sp-table-vertical のみ縦積み／クラスなしは横並び（本文は横ずれさせない） */
@media (max-width: 768px) {
  #low-page {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* クラスなし（ラッパーなし）：画面幅に収める横並び */
  #low-page table:not(:where(.sp-table-vertical *)):not(:where(.l-scroll-x-sp *)) {
    display: table;
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
  }
  #low-page table:not(:where(.sp-table-vertical *)):not(:where(.l-scroll-x-sp *)) th,
  #low-page table:not(:where(.sp-table-vertical *)):not(:where(.l-scroll-x-sp *)) td {
    display: table-cell;
    width: auto;
    min-width: 0;
    box-sizing: border-box;
  }
  #low-page table:not(:where(.sp-table-vertical *)):not(:where(.l-scroll-x-sp *)) th {
    width: 28%;
    border-right: 0.1rem solid var(--ln);
    text-align: center;
  }

  /* 幅が足りない表は .l-scroll-x-sp で囲む → 表だけ横スクロール */
  #low-page .l-scroll-x-sp {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-block: var(--s8);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #low-page .l-scroll-x-sp table {
    display: table;
    width: max-content;
    min-width: 100%;
    max-width: none;
    margin-block: 0;
    table-layout: auto;
  }
  #low-page .l-scroll-x-sp table th {
    width: 21rem;
    min-width: 21rem;
  }

  #low-page .sp-table-vertical table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  #low-page .sp-table-vertical table th,
  #low-page .sp-table-vertical table td {
    display: block;
    width: 100%;
    border-bottom: none;
    box-sizing: border-box;
  }
  /* 縦積み：トップ .top-detail__info と同型（th 下線＋ td 上余白） */
  #low-page .sp-table-vertical table th {
    border-right: none;
    border-bottom: 0.1rem solid var(--ln);
    padding-bottom: var(--s2);
  }
  #low-page .sp-table-vertical table td {
    padding-top: var(--s2);
    padding-bottom: var(--s2);
    border-bottom: 0.1rem solid var(--ln);
    border-right: none;
    text-align: center;
  }
  /* PC用「最終行は下線なし」が縦積みで th 直下の区切りを消すため SP のみ th に下線を復帰 */
  #low-page .sp-table-vertical table tr:last-child th {
    border-bottom: 0.1rem solid var(--ln);
  }
  /* 最終 tr の td は下線を復帰（PC 用 last-row 解除が縦積みで効きすぎる）※最後の td は表の外枠と二重になるため除外 */
  #low-page .sp-table-vertical table tr:last-child td {
    border-bottom: 0.1rem solid var(--ln);
  }
  #low-page .sp-table-vertical table tr:last-child td:last-child {
    border-bottom: none;
  }
}

/* ==============================================
   TOP PAGE - 共通パーツ
   ============================================== */
.top-orange {
  color: #E8820D;
  font-weight: 700;
  font-size: 2rem;
}

/* eyebrow + 黒ライン */
.top-h2-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.top-h2-eyebrow__label {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--txt);
  white-space: nowrap;
}
.top-h2-eyebrow__line {
  flex: 1;
  height: 0.6rem;
  background: var(--cE);
}

/* 共通 h2 */
.top-h2 {
  margin: 0 0 var(--s3);
  font-size: clamp(2.8rem, 1.6rem + 1.6vw, 4rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--txt);
  text-align: left;
}
.top-h2__link {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}
.top-h2__link:hover {
  opacity: 0.7;
}
.top-h2__link:focus-visible {
  outline: 0.2rem solid var(--acc);
  outline-offset: 0.2rem;
}
.top-h2--bar {
  padding-left: var(--s3);
  position: relative;
}
.top-h2--bar::before {
  content: "";
  width: 0.6rem;
  height: 1.2em;
  background: var(--acc);
  position: absolute;
  top: 0.15em;
  left: 0;
}

/* section_03以降: h2.top-h2 内の .top-orange（PC・767pxより大きい画面） */
.top-companies .top-h2 .top-orange,
.top-area .top-h2 .top-orange,
.top-investigation .top-h2 .top-orange,
.top-basics .top-h2 .top-orange,
.top-method-categories .top-h2 .top-orange{
  font-size: 5rem;
}

/* 工法カテゴリ見出し（旧 h2 → h3、見た目は .top-h2 のまま） */
.top-method h3.top-h2 {
  margin: 0 0 var(--s3);
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--txt);
  text-align: left;
}

/* リード文 */
.top-lead {
  margin: 0 0 var(--s7);
  font-size: 1.6rem;
  line-height: 2;
  color: var(--txt);
}

/* グリッド */
.top-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  margin: 0 0 var(--s5);
}
.top-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  margin: 0 0 var(--s5);
}
.top-grid-3 > * {
  min-width: 0;
}

/* CV ボタン */
.top-cv-row {
  margin: var(--s5) 0 var(--s3);
  text-align: center;
}
.top-cv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-width: 18rem;
  padding: var(--s2) var(--s5);
  border: 0.1rem solid var(--ln);
  border-radius: 999px;
  background: var(--white);
  color: var(--txt);
  font-size: 1.6rem;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.3s;
}
.top-cv-btn::after {
  content: "+";
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--txt);
}
.top-cv-btn:hover {
  opacity: 0.7;
}

/* top-cv-row 内の .acc-more-btn：幅固定・ラベル中央・＋は共通の .acc-more-btn::after（右固定）。枠・字重のみ .top-cv-btn に寄せる */
.top-cv-row .acc-more-btn {
  border: 0.2rem solid var(--pri);
  padding-block: var(--s2);
  font-weight: 700;
}
.top-cv-row .acc-more-btn:hover {
  opacity: 0.7;
}

/* アコーディオン（サイト共通: .acc-more-btn + .js-more-btn + 直後の .more-content） */
.acc-more-btn {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 24rem;
  max-width: 100%;
  margin: 0 auto;
  padding-block: var(--s1);
  padding-inline: calc(var(--s5) + 1.2em);
  border: 0.2rem solid var(--pri);
  border-radius: 999px;
  background: var(--white);
  color: var(--txt);
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
}
.acc-more-btn::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: var(--s3);
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: 1;
  color: var(--txt);
  transform: translateY(-50%);
  transition: transform 0.25s ease;
}
.acc-more-btn.is-open::after {
  transform: translateY(-50%) rotate(45deg);
}
.top-cv-row .acc-more-btn::after {
  font-size: 2rem;
  font-weight: 700;
}
.top-companies .more-content,
.top-investigation .more-content,
.top-basics .more-content {
  display: none;
  margin-top: var(--s3);
  text-align: left;
}
.top-companies .more-content .top-grid-3,
.top-basics .more-content .top-grid-3 {
  margin: 0;
}
.top-investigation .more-content .top-grid-2 {
  margin: 0;
}
/* ==============================================
   MV (mv-area)
   ============================================== */
.mv-area {
  padding: var(--s10) 0 var(--s12);
  background: var(--c0);
}
.mv-area__inner {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 var(--s4);
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: var(--s5);
  align-items: center;
}
.mv-area__visual {
  margin: 0;
}
.mv-area__img {
  width: 100%;
  height: auto;
  display: block;
}
.mv-area__body {
  position: relative;
  padding-top: var(--s4);
}
.mv-area__bar {
  display: block;
  width: 60%;
  height: 0.6rem;
  background: var(--cE);
  margin-bottom: var(--s4);
}
.mv-area__heading {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.mv-area__label {
  display: inline-block;
  align-self: flex-start;
  padding: 0.3em 0.8em;
  background: var(--cE);
  color: var(--white);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.mv-area__title {
  margin: 0;
  font-size: clamp(2.6rem, 1.4rem + 2vw, 4.4rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--txt);
}
.mv-area__title-em {
  color: var(--acc);
}
.mv-area__title-num {
  margin: 0 0.05em;
  font-size: 1.4em;
  color: var(--acc);
  font-weight: 700;
}
.mv-area__lead {
  margin: 0;
  font-size: 1.6rem;
  line-height: 2;
  color: var(--txt);
}

/* ==============================================
   section_01 : top-intro
   ============================================== */
.top-intro {
  padding: 0 0 var(--s8);
  background: var(--c0);
}
.top-intro__photos.swiper {
  width: 100%;
  max-width: 100%;
  margin: 0 0 var(--s2);
  box-sizing: border-box;
}
.top-intro__photos .swiper-slide {
  height: auto;
}
.top-intro__photo {
  margin: 0;
  overflow: hidden;
}
.top-intro__photo picture {
  display: block;
}
.top-intro__photo img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  display: block;
}
.top-intro__body {
  padding: 0 var(--s4);
  text-align: left;
  max-width: 1150px;
}
.top-intro__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--s1);
  margin: 0;
  padding: 0;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
}
.top-intro__subRow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0;
  flex: 1 0 100%;
}
.top-intro__sub {
  margin: 0;
  font-size: 3rem;
  font-weight: 700;
  color: #E8820D;
  white-space: nowrap;
}
.top-intro__bar {
  display: inline-block;
  flex: 1;
  height: 2rem;
  background: var(--cE);
  min-width: var(--s2);
}
.top-intro__titleRow--primary {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: var(--s3);
  margin: 0;
  flex: 0 1 auto;
}
.top-intro__titleRow--secondary {
  display: block;
  margin: 0 0 var(--s4);
  text-align: center;
  width: 100%;
}
.top-intro__label {
  display: inline-flex;
  align-items: center;
  padding: 0.25em;
  background: #FEB35E;
  color: var(--txt);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 0.2rem;
  margin-top: 0;
}
.top-intro__titlePrefix {
  margin: 0;
  font-size: 4rem;
  font-weight: 700;
  color: var(--txt);
  line-height: 1.15;
}
.top-intro__title {
  margin: 0;
  font-size: 6rem;
  font-weight: 700;
  color: var(--txt);
  line-height: 1.4;
}
.top-intro__num {
  margin: 0 0.05em;
  font-size: 1.4em;
  color: var(--acc);
  display: inline-block;
  line-height: 1;
}
.top-intro__lead {
  margin: 0 auto;
  font-size: 1.6rem;
  line-height: 2;
  color: var(--txt);
  text-align: center;
}

.top-intro__lead + .top-intro__lead {
  margin-top: var(--s1);
}

/* ==============================================
   サイト共通ボタン（デザイン統一）
   - ピル形・右下に無ブラーのオフセット影・PCホバーで影が消えリンクが右下へ
   - 内部: オレンジ + 紺系影 + 右矢印
   - 外部: シアン + チャコール影 + 左に外部リンクアイコン
   - 電話: チャコール + グレー影 + 左に電話アイコン
   ============================================== */

.btn-internal a {
  position: relative;
  padding: var(--s3) var(--s7) var(--s3) var(--s3);
  background: url("img/arrow_white_right.png") no-repeat center right var(--s3) / auto 1em,
    var(--acc);
  color: var(--white);
  border-radius: 50vh;
  text-align: center;
  box-shadow: var(--s1) var(--s1) 0 0 var(--sub);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-internal a,
.btn-anchor a {
  background-size: auto 1em, auto;
}

.btn-internal:hover a {
  transform: translate(var(--s1), var(--s1));
  box-shadow: none;
  opacity: 1;
}

.btn-anchor a {
  position: relative;
  padding: var(--s3) var(--s7) var(--s3) var(--s3);
  background: url("img/arrow-wh-down.svg") no-repeat center right 2rem / auto 0.8em,
    var(--pri);
  color: var(--white);
  border-radius: 50vh;
  text-align: center;
  box-shadow: var(--s1) var(--s1) 0 0 var(--pri-dark);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-anchor:hover a {
  transform: translate(var(--s1), var(--s1));
  box-shadow: none;
  opacity: 1;
}

.btn-web a {
  position: relative;
  padding: var(--s3) var(--s3) var(--s3) var(--s7);
  background: #34b5d0;
  color: var(--white);
  border-radius: 50vh;
  text-align: center;
  box-shadow: var(--s1) var(--s1) 0 0 var(--sub);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-web a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--s4);
  width: 1.1em;
  height: 1.1em;
  transform: translateY(-50%);
  background: url("img/icon-external.svg") no-repeat center / contain;
}

.btn-web:hover a {
  transform: translate(var(--s1), var(--s1));
  box-shadow: none;
  opacity: 1;
}

.btn-tel a {
  position: relative;
  padding: var(--s3) var(--s3) var(--s3) var(--s7);
  background: var(--cE);
  color: var(--white);
  border-radius: 50vh;
  text-align: center;
  box-shadow: var(--s1) var(--s1) 0 0 var(--sub);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-tel a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--s4);
  width: 1.1em;
  height: 1.1em;
  transform: translateY(-50%);
  background: url("img/icon-tel.svg") no-repeat center / contain;
}

.btn-tel:hover a {
  transform: translate(var(--s1), var(--s1));
  box-shadow: none;
  opacity: 1;
}

.btn-link a {
  padding: 0 var(--s5) 0 0;
  background: url("img/arrow_orange_right.png") no-repeat center right / auto 0.8em;
}

.btn-link a::before {
  display: none;
}

@media (max-width: 768px) {
  .btn-internal:hover a {
    transform: none;
    box-shadow: var(--s1) var(--s1) 0 0 var(--pri-dark);
  }

  .btn-anchor:hover a {
    transform: none;
    box-shadow: var(--s1) var(--s1) 0 0 var(--pri-dark);
  }

  .btn-web:hover a {
    transform: none;
    box-shadow: var(--s1) var(--s1) 0 0 var(--sub);
  }

  .btn-tel:hover a {
    transform: none;
    box-shadow: var(--s1) var(--s1) 0 0 var(--sub);
  }

  .btn-anchor a {
    padding: var(--s3) var(--s7) var(--s3) var(--s3);
    background: url("img/arrow-wh-down.svg") no-repeat center right 0.8rem / auto 0.8em,
      var(--pri);
    background-size: auto 0.8em, auto;
  }

  .btn-tel a {
    background: var(--cE);
    color: var(--white);
    box-shadow: var(--s1) var(--s1) 0 0 var(--sub);
  }
}

/* ==============================================
   section_01 : top-comparison（建物規模別3社比較）
   ============================================== */
.top-comparison {
  padding: var(--s8) 0 var(--s10);
  background: var(--white);
}

.top-comparison__intro {
  margin-bottom: var(--s4);
  text-align: left;
}

.top-comparison__headRow {
  position: relative;
  /* 203px 相当（:root font-size 62.5% 時は 1rem = 10px） */
  --tc-machine-w: 20.3rem;
  padding-left: calc(var(--tc-machine-w) + var(--s4));
}

.top-comparison__headRow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 61%;
  transform: translateY(-50%);
  width: var(--tc-machine-w);
  aspect-ratio: 203 / 143;
  background: url("img/sec01-machine.png") no-repeat center center;
  background-size: contain;
}

.top-comparison__heading {
  margin: 0;
  font-weight: 900;
  line-height: 1.45;
  color: var(--txt);
  letter-spacing: 0.02em;
}

.top-comparison__heading-label {
  display: block;
  margin: 0 0 var(--s1) -1.5rem;
  padding: 0;
  background: transparent;
  color: #E8820D;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.top-comparison__heading-main {
  display: block;
  font-size: 3rem;
  line-height: 1.4;
}

.top-comparison__heading .top-orange {
  font-size: 5.2rem;
  line-height: 1;
  vertical-align: -0.05em;
  color: #333;
}

.top-comparison__divider {
  width: 100%;
  height: 2rem;
  background: var(--cE);
  margin: var(--s3) 0 var(--s5);
}

.top-comparison__num {
  display: inline-block;
  margin: 0 0.05em;
  font-size: 6rem;
  font-weight: 900;
  color: var(--txt);
  line-height: 1;
  vertical-align: -0.05em;
}

.top-comparison__lead {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--txt);
  text-align: left;
}

.top-comparison__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s3);
}

.top-comparison__card {
  background: transparent;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.top-comparison__cardHead {
  position: relative;
  /* 上段（アイコン＋オレンジ帯）を絶対配置するための予約高さ → 下段の頭を3カードで揃える */
  --tc-headtop-h: calc(var(--s4) + 8rem + 1rem);
  padding-top: var(--tc-headtop-h);
  display: flex;
  flex-direction: column;
  background: transparent;
}

.top-comparison__cardHeadTop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--tc-headtop-h);
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--s4) var(--s3) 0;
  background: transparent;
  border-bottom: 1rem solid #FEB35E;
}

.top-comparison__scale {
  position: absolute;
  top: auto;
  bottom: -1rem;
  left: 0;
  display: inline-block;
  padding: var(--s1) var(--s2);
  background: #FEB35E;
  color: #333;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  z-index: 1;
}

.top-comparison__cardHeadIcon {
  width: 8rem;
  height: auto;
  display: block;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

.top-comparison__cardHeadBottom {
  padding: var(--s3) var(--s3);
  background: #333;
  color: var(--white);
  text-align: center;
  font-weight: 700;
  line-height: 1.6;
}

.top-comparison__cardHeadLine {
  display: block;
  margin: 0;
  font-size: 2.2rem;
}

.top-comparison__cardHeadLine + .top-comparison__cardHeadLine {
  margin-top: var(--s1);
}

.top-comparison__hl {
  display: inline-block;
  padding: 0 0.3em;
  background: var(--sec);
  color: #333;
  font-weight: 700;
  font-size: 2.6rem;
  margin-right: 0.5rem;
}

.top-comparison__cardBody {
  padding: var(--s3) var(--s3) var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  flex: 1;
  border: 0.2rem solid #333;
  background: var(--white);
}

.top-comparison__company {
  margin: 0;
  width: auto;
  max-width: none;
  box-sizing: border-box;
  text-align: center;
  background: var(--white);
  color: #333;
  padding: var(--s2) var(--s3);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.top-comparison__figure {
  margin: 0;
}

.top-comparison__figure img {
  max-width: 100%;
  display: block;
}

.top-comparison__catch {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.65;
  text-align: center;
}

.top-comparison__points {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.top-comparison__points li {
  padding-left: 2.4em;
  font-size: var(--fs-s);
  line-height: 1.85;
  position: relative;
  color: var(--txt);
}

.top-comparison__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.4em;
  height: 1.4em;
  background: url("img/icon-check.svg") no-repeat center / contain;
}

/* カード内 .btn-web / .btn-tel の位置調整（カードの一番下に固定） */
.top-comparison__cardBody .btn-web {
  margin: auto auto 0;
}
.top-comparison__cardBody .btn-tel {
  margin: var(--s2) auto 0;
}

.top-comparison__refs {
  font-size: 1.2rem;
  line-height: 1.75;
  color: var(--sub);
}

.top-comparison__refs p {
  margin: 0 0 0.6em;
}

.top-comparison__refs p:last-child {
  margin-bottom: 0;
}

/* ==============================================
   地盤調査以降・工法セクション共通: 上部英字帯（詳細3選・業者一覧と同型）
   data-en-bar に英字ラベルを指定
   ============================================== */
.top-sec-bar {
  position: relative;
  --tc-bar-h: 2rem;
  padding: var(--s12) 0;
}
.top-sec-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--tc-bar-h);
  background: var(--cE);
}
.top-sec-bar::after {
  content: attr(data-en-bar);
  position: absolute;
  top: 0;
  left: max(0px, calc(50% - 60rem));
  height: var(--tc-bar-h);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s3);
  background: var(--top-sec-bar-bg, var(--white));
  color: var(--txt);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
  white-space: nowrap;
}
.top-investigation.top-sec-bar {
  --top-sec-bar-bg: var(--c1);
}
.top-area.top-sec-bar {
  --top-sec-bar-bg: var(--white);
  padding: 14rem 0;
}
.top-basics.top-sec-bar {
  --top-sec-bar-bg: var(--c1);
}
.top-method.top-sec-bar {
  --top-sec-bar-bg: var(--white);
}
.top-method.top-method--bg.top-sec-bar {
  --top-sec-bar-bg: var(--c1);
}
.top-method-categories.top-sec-bar {
  --top-sec-bar-bg: var(--c1);
  padding-top: 0;
}
.top-fixed-bg {
  position: relative;
  /* 画像下のつなぎ：薄い水色（画像と馴染むよう調整可） */
  --tc-method-bg-fallback: var(--c1);
  background-color: var(--tc-method-bg-fallback);
  background-image: url("./img/top-method-categories-bg.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  padding-bottom: 8rem;
}

/* PC：ビューポートに画像上端を固定（769px以上） */
@media (min-width: 769px) {
  .top-fixed-bg {
    background-attachment: fixed;
  }
}
.top-fixed-bg .top-area,
.top-fixed-bg .top-basics {
  background: transparent;
}
/* 固定背景がうっすら見えるよう INDEX・白 BOX をやや透過（PC/SP 共通・.top-fixed-bg 内のみ） */
.top-fixed-bg .top-method-index {
  background: rgb(255 255 255 / 0.8);
}
.top-fixed-bg .top-method__card {
  background: rgb(255 255 255 / 0.8);
}
.top-fixed-bg .top-sub-card {
  background: rgb(242 239 231 / 0.8);
}
.top-method-categories {
  position: relative;
}

/* 工法紹介：セクション大見出し（h2） */
.top-method-categories__head {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 16rem 0 0;
}

.top-method-categories__head .top-h2 {
  margin: 0 0 var(--s4);
}

.top-method-categories .top-method {
  background: transparent;
  padding-top: 16rem;
  padding-bottom: 0;
}

/* 工法紹介ブロック内 INDEX（ページ内リンク） */
.top-method-categories .top-method-index-outer {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
}

.top-method-categories .top-method-index-outer + .top-method {
  padding-top: var(--s10);
}

.top-method-index {
  background: var(--c3);
  box-shadow: var(--sd-2);
  padding: var(--s5) var(--s6);
}

.top-method-index__heading {
  margin: 0 0 var(--s1);
  font-size: var(--fs-m);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--txt);
}

.top-method-index__divider {
  margin: 0 0 var(--s3);
  border-bottom: 0.1rem solid var(--pri);
}

.top-method-index__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s2) var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-method-index__grid > li {
  min-width: 0;
}

.top-method-index__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  max-width: 100%;
  box-sizing: border-box;
  font-size: var(--fs-s);
  font-weight: 700;
  color: var(--txt);
  text-decoration: none;
}

.top-method-index__link::after {
  content: "";
  flex-shrink: 0;
  width: 0.85em;
  aspect-ratio: 1;
  max-width: 100%;
  background: url("img/arrow_orange_right.png") no-repeat center / contain;
  transform: rotate(90deg);
}

.top-method-index__grid > li:nth-child(9) {
  grid-column: 3 / -1;
  min-width: 0;
}

.top-method-index__grid > li:nth-child(9) .top-method-index__link {
  max-width: none;
  white-space: nowrap;
}

.top-method-categories [id^="method-"] {
  scroll-margin-top: var(--s10);
}

@media (hover: hover) and (pointer: fine) {
  .top-method-index__link:hover {
    opacity: 0.75;
  }

  .mainvisual--lower .c-low-mainvisual-logo a:hover {
    opacity: 0.85;
  }
}

@media (max-width: 768px) {
  .mainvisual--lower .c-low-mainvisual-logo a {
    width: 58%;
    max-width: 100%;
  }

  .top-method-categories__head {
    padding: 9rem 3% 0;
  }

  .top-method-categories__head .top-h2 {
    margin-bottom: var(--s8);
    font-size: 3rem;
  }

  .top-method-categories .top-method-index-outer {
    padding: 0 3%;
    box-sizing: border-box;
  }

  .top-method-categories .top-method-index {
    margin-top: var(--s4);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 工法セクション間の上余白を SP で統一（PC の index-outer + .top-method は s10 のため詳細度で上書きされていた） */
  .top-method-categories {
    --tc-method-pad-top-sp: 6rem;
  }

  .top-method-categories .top-method {
    padding-top: var(--tc-method-pad-top-sp);
  }

  .top-method-categories .top-method-index-outer + .top-method {
    padding-top: var(--tc-method-pad-top-sp);
  }

  .top-method-index {
    padding: var(--s4) 5%;
    margin-top: 14rem;
  }

  /* 下層 index02 目次：工法TOP用の margin-top: 14rem は不要なため詰める */
  .index02-wrap.top-method-index {
    margin-top: var(--s4);
  }

  /* 長文リンクも枠内に収める：テキスト列は折り返し、矢印は右列に固定 */
  .top-method-index__link {
    font-size: 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s1);
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .top-method-index__link .top-note-sm {
    font-size: 1.6rem;
    letter-spacing: 0.06em;
    font-weight: 700;
  }

  .top-method-index__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s1) var(--s3);
  }

  .top-method-index__grid > li:nth-child(9) {
    grid-column: 1 / -1;
  }

  .top-method-index__grid > li:nth-child(9) .top-method-index__link {
    max-width: 100%;
    white-space: normal;
    font-size: 1.5rem;
    line-height: 1.4;
  }
}

/* ==============================================
   section_05 : top-area（東京のエリア別地盤改良）
   ============================================== */
.top-area {
  background: var(--white);
}
.top-area .top-lead {
  margin: 0 0 var(--s8);
}
.top-area__card {
  padding: var(--s5);
  background: var(--c1);
  border: none;
  border-left: 0.6rem solid var(--cE);
  box-shadow: var(--sd-2);
}
.top-area__catch {
  margin: 0 0 var(--s3);
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: 1.35;
  color: var(--acc);
}
.top-area__cardTitle {
  margin: 0 0 var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 0.1rem solid var(--pri);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--txt);
  min-width: 0;
}
.top-area__cardTitle a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
}
.top-area__cardTitle a:hover {
  opacity: 0.7;
}
.top-area__cardText {
  margin: 0;
  font-size: var(--fs-s);
  line-height: 2;
}

/* ==============================================
   section_04 : top-investigation（地盤調査・試験の種類）
   ============================================== */
.top-investigation {
  background: var(--c1);
}
.top-investigation .top-card {
  box-shadow: var(--sd-1);
}
.top-card {
  background: var(--white);
  display: flex;
  flex-direction: column;
}
.top-card__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s2);
  align-items: center;
  padding: var(--s3);
  border-bottom: 0.1rem solid var(--ln);
}
.top-investigation .top-card__head {
  background: var(--c0);
  border-bottom: 0.5rem solid var(--pri);
  padding: var(--s2) var(--s3);
  gap: var(--s1);
}
.top-card__icon {
  width: 4rem;
  max-width: 100%;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.top-investigation .top-card__icon {
  width: var(--s4);
}
.top-investigation .top-card__headLink {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
  min-width: 0;
  padding-right: calc(1.4em + var(--s2));
  color: inherit;
  text-decoration: none;
  transition: opacity 0.25s;
}
.top-investigation .top-card__headLink::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.4em;
  aspect-ratio: 1;
  background: url("./img/arrow_orange_right.png") no-repeat center / contain;
  pointer-events: none;
}
.top-investigation .top-card__headLink:hover {
  opacity: 0.85;
}
.top-investigation .top-card__headLink:focus-visible {
  outline: 0.2rem solid var(--acc);
  outline-offset: 0.2rem;
}
.top-card__title {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--txt);
}
.top-investigation .top-card__title {
  font-size: var(--fs-l);
  line-height: 1.25;
}
/* TOP: 装飾矢印（h2リンク・h3内リンク・サブカード・運営会社） */
.top-h2__link::after,
.top-method__cardTitle a::after,
.top-basics__cardTitle a::after,
.top-area__cardTitle a::after,
.top-basics__company a::after,
.top-sub-card::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  width: var(--s3);
  aspect-ratio: 1;
  margin-left: var(--s2);
  background: url("./img/arrow_orange_right.png") no-repeat bottom right / contain;
}
.top-basics__company a::after {
  margin-left: 0;
}
.top-basics__cardTitle a::after {
  margin-left: 0;
}
.top-card__body {
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  flex: 1;
}
.top-card__catch {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--acc);
}
.top-card__body p {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--txt);
}

/* ==============================================
   section_06 : top-basics（地盤改良の基礎知識）
   ============================================== */
.top-basics {
  background: var(--c1);
}
.top-basics .top-lead {
  margin: 0 0 var(--s10);
}
.top-basics .top-grid-3 {
  align-items: stretch;
}
.top-basics__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  margin-top: 0;
  background: var(--white);
  border: none;
  border-top: 0.6rem solid var(--cE);
  box-shadow: var(--sd-2);
}
.top-basics__cardTitle {
  margin: 0;
  padding: var(--s3);
  background: var(--c0);
  border: none;
  font-size: var(--fs-m);
  font-weight: 700;
  color: var(--txt);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.top-basics__cardTitle a {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  width: 100%;
  box-sizing: border-box;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
}
.top-basics__cardTitle a:hover {
  opacity: 0.7;
}
.top-basics__card p {
  margin: 0;
  padding: var(--s4) var(--s3) var(--s3);
  font-size: var(--fs-s);
  line-height: 1.9;
  flex: 1 1 auto;
  min-height: 0;
}
.top-basics__company {
  margin: var(--s4) 0 0;
  text-align: right;
  font-size: 1.6rem;
}
.top-basics__company a {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--txt);
  text-decoration: none;
}
.top-basics__company a:hover {
  opacity: 0.7;
}

/* ==============================================
   top-method（鋼管杭・柱状改良・表層改良・シート他・section_08〜13は .top-method-categories 内）
   ============================================== */
.top-method {
  background: var(--white);
}
.top-method--bg {
  background: var(--c1);
}
.top-method__card {
  position: relative;
  min-width: 0;
  padding: var(--s4) var(--s3) var(--s3);
  background: var(--white);
  border: 0.2rem solid var(--cE);
  box-shadow: var(--sd-2);
  margin-top: 5rem;
}
.top-method__deco {
  position: absolute;
  top: -3rem;
  left: -0.2rem;
  right: -0.2rem;
  height: 3rem;
  background: var(--c0);
  border-bottom: 0.4rem solid var(--cE);
}
.top-method__deco::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 4rem;
  height: 4rem;
  background: url("./img/dummy-icon.png") no-repeat center bottom / contain;
}
/* 鋼管杭（top-method--bg）: 地盤バー = 横リピートタイル、中央アイコン = ::before */
.top-method--bg .top-method__deco {
  /*! background-color: var(--c0); */
  background-image: url("./img/ground-bar-steel-pipe-pile.png");
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 100%;
  /*! border-bottom: 0.4rem solid var(--cE); */
  height: 3.9rem;
}
.top-method--bg .top-method__deco::before {
  background: url("./img/icon-method-steel-pipe-pile.png") no-repeat center bottom / contain;
  width: 8rem;
  height: 10.7rem;
  bottom: 0.5rem;
}
.top-method--columnar .top-method__deco {
  background-image: url("./img/ground-bar-columnar.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
  height: 2.5rem;
  top: -2.5rem;
  left: -0.2rem;
  right: -0.2rem;
  border-bottom: none;
}
.top-method--columnar .top-method__deco::before {
  background: url("./img/icon-method-columnar.png") no-repeat center bottom / contain;
  width: var(--s10);
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  bottom: 0.8rem;
}
.top-method--columnar .top-grid-3 {
  margin-bottom: 0;
}
.top-method--columnar .top-method__card--full {
  margin-top: var(--s14);
}
.top-method--surface .top-method__deco {
  background-image: url("./img/ground-bar-surface.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
  height: 2rem;
  top: -2rem;
  left: -0.2rem;
  right: -0.2rem;
  border-bottom: none;
}
.top-method--surface .top-method__deco::before {
  background: url("./img/icon-method-surface.png") no-repeat center bottom / contain;
  width: var(--s10);
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  bottom: 1rem;
}
.top-method--sheet .top-method__deco,
.top-method--gravel-pile .top-method__deco,
.top-method--wood-pile .top-method__deco,
.top-method--chemical-injection .top-method__deco,
.top-method--sand-compaction .top-method__deco {
  background-image: url("./img/ground-bar-surface.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
  height: 2rem;
  top: -2rem;
  left: -0.2rem;
  right: -0.2rem;
  border-bottom: none;
}
.top-method--sheet .top-method__deco::before {
  background: url("./img/icon-method-sheet.png") no-repeat center bottom / contain;
  width: var(--s10);
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  bottom: 0.8rem;
}
.top-method--gravel-pile .top-method__deco::before {
  background: url("./img/icon-method-gravel-pile.png") no-repeat center bottom / contain;
  width: var(--s10);
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  bottom: 0.5rem;
}
.top-method--wood-pile .top-method__deco::before {
  background: url("./img/icon-method-wood-pile.png") no-repeat center bottom / contain;
  width: var(--s10);
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  bottom: 0.4rem;
}
.top-method--chemical-injection .top-method__deco::before {
  background: url("./img/icon-method-chemical-injection.png") no-repeat center bottom / contain;
  width: var(--s14);
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  bottom: 0.6rem;
  transform: translateX(-30%);
}
.top-method--sand-compaction .top-method__deco::before {
  background: url("./img/icon-method-sand-compaction.png") no-repeat center bottom / contain;
  width: var(--s10);
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  bottom: 0;
}
.top-method--environmental-pile .top-method__deco {
  background-image: url("./img/ground-bar-environmental-pile.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
  height: 2.5rem;
  top: -2.5rem;
  left: -0.2rem;
  right: -0.2rem;
  border-bottom: none;
}
.top-method--environmental-pile .top-method__deco::before {
  background: url("./img/icon-method-environmental-pile.png") no-repeat center bottom / contain;
  width: var(--s10);
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  bottom: 0.8rem;
}
.top-method--sheet .top-grid-2 {
  margin-bottom: 0;
}
.top-method--sheet .top-method__card--full {
  margin-top: var(--s14);
}
.top-method--sheet .top-method__card--full .top-method__cardBody > p {
  text-align: center;
}
.top-method--chemical-injection .top-grid-2 {
  margin-bottom: 0;
}
.top-method--chemical-injection .top-method__card--full {
  margin-top: var(--s14);
}
.top-method--sand-compaction .top-method__card--full {
  margin-top: var(--s14);
}
/* 鋼管杭: デコが上方向にはみ出すため、BOX間の縦余白を確保 */
.top-method--bg .top-method__card {
  margin-top: var(--s14);
}
.top-method--bg .top-method__card--full {
  margin-top: 14rem;
  margin-bottom: var(--s3);
}
.top-method--bg .top-grid-2 {
  margin: 0;
}
.top-method__cardHead {
  margin-bottom: var(--s2);
  padding-bottom: var(--s2);
  min-width: 0;
}
.top-method__cardTitle {
  margin: 0;
  min-width: 0;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--txt);
  line-height: 1.5;
}
.top-method__cardTitle a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
}
.top-method__cardTitle a:hover {
  opacity: 0.7;
}
/* 工法グリッド内: matchHeight で揃えた .top-method__cardTitle 内のリンクを縦中央 */
.top-method .top-grid-2 > .top-method__card > .top-method__cardHead > .top-method__cardTitle,
.top-method .top-grid-3 > .top-method__card > .top-method__cardHead > .top-method__cardTitle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.top-method__cardTitle--center {
  text-align: center;
}
.top-method__cardTitle--center a {
  display: block;
  position: relative;
  width: 100%;
  text-align: center;
  padding-right: var(--s6);
  box-sizing: border-box;
}
.top-method__cardTitle--center a::after {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
  display: block;
}
.top-method__cardBody {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-width: 0;
}
.top-method__cardBody p {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.9;
  color: var(--txt);
}
.top-method__card--full {
  margin-top: var(--s5);
  padding: var(--s4) var(--s5);
}

/* method 内 sub-cards */
.top-sub-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
  padding: 0;
  margin: var(--s2) 0 0;
  list-style: none;
}
.top-sub-cards li {
  margin: 0;
  padding: 0;
}
.top-sub-cards li::before {
  display: none;
}
.top-sub-cards--single {
  grid-template-columns: 1fr;
}
.top-method__card--full .top-sub-cards--single {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.top-sub-cards--stack {
  grid-template-columns: 1fr;
  gap: var(--s1);
}
.top-sub-cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.top-sub-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--c0);
  color: var(--txt);
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.3s;
}
.top-sub-card:hover {
  opacity: 0.7;
}

/* ==============================================
   section_03 : top-companies（東京の地盤改良業者一覧）
   上部装飾帯は詳細3選（.top-detail）と同型
   ============================================== */
.top-companies {
  position: relative;
  --tc-bar-top: 2rem;
  --tc-bar-h: 2rem;
  padding: var(--s12) 0;
  background: var(--white);
}
.top-companies::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--tc-bar-h);
  background: var(--cE);
}
.top-companies::after {
  content: "TOKYO GROUND IMPROVEMENT CONTRACTORS";
  position: absolute;
  top: 0;
  left: max(0px, calc(50% - 60rem));
  height: var(--tc-bar-h);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s3);
  background: var(--white);
  color: #333;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
  white-space: nowrap;
}
/* SP の2行英字は疑似要素の改行が効かない場合があるため HTML で出し分け（PC は非表示） */
.top-companies__barEn {
  display: none;
  margin: 0;
  padding: 0;
}
/* top-sec-bar 長文のセクション（例: 地盤調査）も同様に SP のみ .top-sec-bar__barEn で2行表示 */
.top-sec-bar__barEn {
  display: none;
  margin: 0;
  padding: 0;
}
.top-companies__grid {
  margin-bottom: var(--s5);
}
.top-company {
  background: var(--white);
  border: 0.2rem solid var(--pri);
  box-shadow: 0 0.3rem 1rem rgba(51, 51, 51, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.top-company__head {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--s3) calc(var(--s3) + 2.4rem);
  background: var(--cE);
  color: var(--white);
  text-decoration: none;
  transition: opacity 0.25s;
}
.top-company__head:hover {
  opacity: 0.92;
}
.top-company__head:focus-visible {
  outline: 0.2rem solid var(--white);
  outline-offset: -0.3rem;
}
.top-company__head::after {
  content: "";
  position: absolute;
  right: var(--s3);
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  background: url("img/arrow_white_right.png") no-repeat center / contain;
  pointer-events: none;
}
.top-company__name {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.35;
  color: inherit;
}
.top-company__body {
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  flex: 1;
}
.top-company__body p:not(.caption) {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--txt);
}
.top-company__intro {
  display: flex;
  flex-direction: column;
}
.top-company__intro > p.caption {
  margin-top: auto;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--sub);
}
.top-company__intro > p.caption a {
  color: var(--txt-sub);
}
.top-company__sub {
  margin: 1rem auto 0;
  padding: var(--s1);
  background: var(--c0);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--txt);
  text-align: center;
  width: 100%;
}
.top-company__methods {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  font-size: 1.6rem;
}
.top-company__methods li {
  position: relative;
  padding-left: 1.15em;
}
.top-company__methods li::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background: var(--acc);
  border-radius: 50%;
  position: absolute;
  top: 0.65em;
  left: 0;
}
.top-company__table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 1.6rem;
  border: 0.1rem solid var(--ln);
}
.top-company__table th,
.top-company__table td {
  padding: var(--s2);
  border: 0.1rem solid var(--ln);
  line-height: 1.6;
}
.top-company__table th {
  width: 7em;
  background: var(--c1);
  font-weight: 700;
  color: var(--txt);
  text-align: center;
  vertical-align: middle;
}
.top-company__table td {
  background: var(--white);
  text-align: left;
  vertical-align: top;
}
.top-company__table a {
  word-break: break-all;
}
.top-company__more {
  position: relative;
  margin-top: auto;
  margin-left: calc(-1 * var(--s3));
  margin-right: calc(-1 * var(--s3));
  padding-block: var(--s1);
  padding-inline: var(--s3);
  padding-inline-end: calc(var(--s3) + 1.8em);
  text-align: right;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--txt);
  text-decoration: none;
  display: block;
  line-height: 1.6;
  transition: opacity 0.25s;
}
.top-company__more:hover {
  opacity: 0.75;
}
.top-company__more::after {
  content: "";
  position: absolute;
  bottom: calc(var(--s1) + 0.2rem);
  right: var(--s3);
  width: 1.4em;
  aspect-ratio: 1;
  background: url("img/arrow_orange_right.png") no-repeat center / contain;
  pointer-events: none;
}

/* ==============================================
   footer 上部書類調整 (footerスクリーンショット準拠)
   ============================================== */
.footer-area {
  background: var(--c0);
}

/* lower_bottom 非表示ページ：セクション下パディング相当をフッター上に確保（トップは除外） */
body.no-lower-bottom:not(.sd-top-page) .footer-area {
  margin-top: var(--s10);
}
.footer-menu-title__link {
  font-weight: 700;
  font-size: 1.6rem;
}
.footer-disclaimer {
  border: none;
  background: var(--white);
}

/* ==========================================================================
   section_02 : 建物規模別 詳細3選
   ヘッダー: ダーク帯 + オレンジバッジ + 建物アイコン + 白見出し
   並び: 中 → 小 → 大 (HTML順) / ナビは 小 → 中 → 大 (左→右)
   ========================================================================== */
.top-detail {
  position: relative;
  background: var(--c0);
  --tc-bar-top: 2rem;
  --tc-bar-h: 2rem;
  padding-bottom: 18rem;
}
/* セクション上部の装飾帯 (THREE SELECTIONS)
   ::before = フルワイドの黒バー / ::after = 中央テキスト(背景でバーを切る) */
.top-detail::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--tc-bar-h);
  background: var(--cE);
}
.top-detail::after {
  content: "THREE SELECTIONS";
  position: absolute;
  top: 0;
  left: max(0px, calc(50% - 60rem));
  height: var(--tc-bar-h);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s3);
  background: var(--c0);
  color: #333;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
  white-space: nowrap;
}

/* セクション最下部：現場背景（::before のみ）※カード下に食い込ませ重ね順で奥に配置
   背景は縦を切らない（100% auto）。画像差し替え時は --footer-bg-ar を「縦÷横」の比率に合わせる */
.top-detail__footerBand {
  --footer-bg-ar: 0.3846;
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: clamp(-20rem, -28vw, -12rem);
  padding-top: clamp(18rem, 26vw, 34rem);
  min-height: calc(clamp(18rem, 26vw, 34rem) + 100vw * var(--footer-bg-ar));
  background-color: var(--c0);
  overflow: hidden;
  position: absolute;
  bottom: 0;
}
.top-detail__footerBand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("img/sec02-detail-footer-bg.jpg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}

/* イントロ見出し */
.top-detail__intro {
  text-align: left;
  margin-bottom: var(--s7);
}
.top-detail__headRow {
  display: block;
  margin-bottom: var(--s3);
}
.top-detail__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
  line-height: 1.4;
  font-weight: 700;
}
.top-detail__heading-label {
  color: #E8820D;
  font-size: 3rem;
  margin-left: -1.5rem;
}
.top-detail__heading-main {
  font-size: 3rem;
}
.top-detail__heading .top-orange {
  font-size: 5.2rem;
  color: #333;
  line-height: 1;
  vertical-align: -0.05em;
}
.top-detail__num {
  font-size: 6rem;
  color: #333;
  line-height: 1;
  vertical-align: -0.1em;
  padding: 0 0.15em;
}
.top-detail__lead {
  font-size: 1.6rem;
  text-align: left;
  line-height: 1.9;
}

/* ページ内アンカーナビ（簡易3選の top-comparison__cardHead を流用 + 白ボックス・吹き出しツノ） */
.top-detail__nav {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  margin: 0 0 var(--s7);
  padding: 0 0 var(--s3);
}
.top-detail__navItem {
  margin: 0;
  padding: 0;
}
.top-detail__navLink {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.top-detail__navLink:focus-visible {
  outline: 0.2rem solid var(--sec);
  outline-offset: 0.2rem;
}
.top-detail__navLink:hover {
  opacity: 1;
}
.top-detail__navLink:hover .top-detail__navHead .top-comparison__cardHeadBottom {
  background: var(--c1);
}
/* ナビ用：上段をややコンパクトに */
.top-detail__navHead.top-comparison__cardHead {
  --tc-headtop-h: calc(var(--s3) + 6.4rem + 1rem);
}
.top-detail__navHead .top-comparison__cardHeadIcon {
  margin-bottom: 0;
}
/* 下段：簡易3選のダーク帯ではなく白ボックス + 下向きツノ */
.top-detail__navHead .top-comparison__cardHeadBottom {
  position: relative;
  padding: var(--s4);
  margin: 0;
  background: var(--white);
  color: #333;
  text-align: center;
  box-shadow: var(--sd-1);
}
.top-detail__navHead .top-comparison__cardHeadBottom::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--s2));
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: var(--s2) solid transparent;
  border-right: var(--s2) solid transparent;
  border-top: var(--s2) solid var(--white);
  filter: drop-shadow(0 0.2rem 0.2rem rgba(0, 0, 0, 0.12));
  z-index: 1;
}
.top-detail__navHead .top-comparison__cardHeadLine {
  font-size: 2rem;
  font-weight: 700;
}
.top-detail__navHeadTitle {
  display: block;
}
.top-detail__navHead .top-comparison__cardHeadBottom::before {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--s3);
  width: 2rem;
  height: 2rem;
  background: url("img/icon-nav-arrow.png") no-repeat center center;
  background-size: contain;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center center;
  pointer-events: none;
}

/* 各カード ---------------------------------------------------------------- */
.top-detail__card {
  margin-bottom: var(--s13);
  background: var(--white);
  scroll-margin-top: 8rem;
}
.top-detail__card:last-child {
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}
.top-detail__card:last-child .top-detail__cardBody {
  position: relative;
}
.top-detail__card:last-child .top-detail__cardBody::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: -21rem;
  bottom: -17rem;
  width: clamp(22rem, 48vw, 30rem);
  height: clamp(18rem, 42vw, 50rem);
  background: url("img/sec02-detail-footer-machine.png") no-repeat right bottom / contain;
  pointer-events: none;
}

/* 詳細カード見出し帯（左：白建物アイコン＋階数バッジ / 右：白＋水色ハイライト見出し）
   白アイコンPNG（右向き・透過推奨）:
   - img/sec02-cardhead-icon-small.png（1～3F / 小規模）
   - img/sec02-cardhead-icon-mid.png（4～10F / 中規模）
   - img/sec02-cardhead-icon-large.png（10F～ / 大規模）
   …カードに .top-detail__card--head-small | --head-mid | --head-large を付与して切替 */
.top-detail__cardHead {
  position: relative;
  background: #333;
  padding: var(--s4) var(--s5);
  border-bottom: 1rem solid #FEB35E;
}
.top-detail__cardHeadInner {
  display: grid;
  grid-template-columns: 7.6rem 1fr 7.6rem;
  align-items: center;
  gap: var(--s5);
}
.top-detail__cardHeadVisual {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  width: 7.6rem;
  align-self: end;
}
.top-detail__cardHeadIconWrap {
  width: 7.6rem;
  height: 7.6rem;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.top-detail__card--head-small .top-detail__cardHeadIconWrap {
  background-image: url("img/sec02-cardhead-icon-small.png");
}
.top-detail__card--head-mid .top-detail__cardHeadIconWrap {
  background-image: url("img/sec02-cardhead-icon-mid.png");
}
.top-detail__card--head-large .top-detail__cardHeadIconWrap {
  background-image: url("img/sec02-cardhead-icon-large.png");
}
.top-detail__cardHead .top-detail__scale {
  position: absolute;
  bottom: -1rem;
  left: calc(var(--s5) + 3.8rem);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.6rem;
  padding: 0.35rem 0.6rem;
  margin: 0;
  background: #FEB35E;
  color: #333;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  z-index: 1;
}
.top-detail__cardHeadTitle {
  margin: 0;
  min-width: 0;
  color: var(--white);
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.top-detail__cardHeadLine {
  display: block;
}
.top-detail__cardHead .top-detail__hl {
  display: inline;
  padding: 0.1em 0.35em;
  margin-right: 0.15em;
  background: #66ccee;
  color: #333;
  font-weight: 700;
}
.top-detail__cardHeadTail {
  color: var(--white);
  font-weight: 700;
}

/* カード本体 */
.top-detail__cardBody {
  padding: var(--s6) 10rem 10rem;
  border: 0.2rem solid #333;
  border-top: none;
  border-radius: 0 0 0.4rem 0.4rem;
}
.top-detail__card:last-child .top-detail__cardBody {
  padding-bottom: clamp(10rem, 18vw, 16rem);
}

/* 会社名 */
.top-detail__company {
  margin: 0 0 var(--s4);
  padding: 0;
  text-align: center;
  font-size: 2.8rem;
  font-weight: 700;
  color: #333;
  background: transparent;
}
/* 写真 */
.top-detail__figure {
  max-width: 60rem;
  margin: 0 auto var(--s6);
}
.top-detail__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* サブ見出し（実績/選ばれる理由 等） */
.top-detail__subTitle {
  margin: var(--s10) 0 var(--s6);
  padding: var(--s2) var(--s3);
  background: var(--c0);
  color: #333;
  font-size: 2.8rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}

/* 実績 stats */
.top-detail__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5) var(--s8);
  margin-bottom: var(--s2);
}
.top-detail__stat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 0;
  background: transparent;
  border-bottom: 0.3rem solid var(--cE);
}
.top-detail__statLabel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4) var(--s6);
  background: var(--c1);
  color: #333;
  font-size: 2rem;
  font-weight: 700;
}
.top-detail__statBody {
  text-align: center;
  min-width: 0;
}
.top-detail__statValue {
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: #E8820D;
}
.top-detail__statValue--accent {
  color: #E8820D;
}
.top-detail__statUnit {
  font-size: 1.8rem;
  font-weight: 700;
  margin-left: 0.15em;
  color: var(--cE);
}
.top-detail__statNote {
  font-size: 1.6rem;
  font-weight: 400;
  color: #333;
  margin-left: 0.15em;
  vertical-align: 0.4em;
}
.top-detail__statSubText {
  display: block;
  margin-top: var(--s1);
  font-weight: 400;
  color: #333;
  line-height: 1.4;
  margin-bottom: 1rem;
}

/* 原稿の「・」付き行など */
.top-detail__manuscriptLines {
  margin: 0 0 var(--s2);
}
.top-detail__manuscriptLines p {
  font-size: 1.6rem;
  line-height: 1.9;
  margin: 0 0 var(--s1);
}

/* 選ばれる理由 reasons */
.top-detail__reasons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  margin-bottom: var(--s4);
}
.top-detail__reason {
  min-width: 0;
}
.top-detail__reason p:not(.caption) {
  font-size: 1.6rem;
  line-height: 1.7;
}
.top-detail__reasonCatch {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: var(--s2);
  line-height: 1.6;
}
.top-detail__reasonLead {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 var(--s2);
  line-height: 1.6;
  color: #333;
}
.top-detail__reason .caption {
  margin-top: var(--s2);
  margin-bottom: 0;
}

/* 工法リスト methods */
.top-detail__methods {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--s2) var(--s5);
  padding: 0;
  margin: 0 0 var(--s4);
}
.top-detail__methods li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 1.6rem;
  font-weight: 400;
  color: #333;
}
.top-detail__methods li strong {
  font-weight: 700;
}
.top-detail__methods li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.5rem;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  background: var(--acc);
  border-radius: 50%;
}

/* 施工事例 case */
.top-detail__case {
  display: grid;
  grid-template-columns: 45rem 1fr;
  gap: var(--s5);
  margin-bottom: var(--s7);
  min-width: 0;
}
.top-detail__caseFigure {
  background: var(--c1);
  /* flex だと img が min-width:auto のまま親より広がるため grid で中央寄せ */
  display: grid;
  place-items: center;
  min-height: 30rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.top-detail__caseFigure img {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  object-fit: contain;
  box-sizing: border-box;
}
.top-detail__caseBody {
  min-width: 0;
}
.top-detail__caseBody p:not(.caption) {
  font-size: 1.6rem;
  line-height: 1.9;
  margin-bottom: var(--s2);
}
.top-detail__caseCatch {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
}
.top-detail__caseList {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s2);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.top-detail__caseList li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: #333;
}
.top-detail__caseList li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 1rem;
  height: 1rem;
  background: var(--acc);
  border-radius: 50%;
}

.top-detail__case--textOnly {
  grid-template-columns: 1fr;
}

/* btn-web / btn-tel を本文中で中央寄せ */
.top-detail__cardBody .btn-web {
  margin: var(--s4) auto var(--s2);
  text-align: center;
}
.top-detail__cardBody .btn-web a {
  display: inline-block;
}
.top-detail__cardBody .btn-tel {
  margin: var(--s2) auto var(--s4);
  text-align: center;
}
.top-detail__cardBody .btn-tel a {
  display: inline-block;
}

/* 会社情報 table */
.top-detail__info {
  width: 100%;
  border-collapse: collapse;
  border: 0.1rem solid var(--ln);
  font-size: 1.6rem;
}
.top-detail__info th,
.top-detail__info td {
  padding: var(--s2) var(--s3);
  border-bottom: 0.1rem solid var(--ln);
  text-align: left;
  vertical-align: middle;
  line-height: 1.6;
}
.top-detail__info th {
  width: 16rem;
  background: var(--c1);
  color: #333;
  font-weight: 700;
  border-right: 0.1rem solid var(--ln);
  text-align: center;
}
.top-detail__info td {
  background: var(--white);
}
.top-detail__info tr:last-child th,
.top-detail__info tr:last-child td {
  border-bottom: none;
}
.top-detail__info a {
  color: var(--sec-dark);
  text-decoration: underline;
  word-break: break-all;
}

/* TOP：簡易3選以降 — ノートPCのみ中身（.l-center）を100remに制限。1367px以上は common.css の1200px */
@media (min-width: 769px) and (max-width: 1366px) {
  #index .l-center,
  #index .l-container {
    max-width: 100rem;
    box-sizing: border-box;
    margin-inline: auto;
    padding-inline: var(--s4);
  }

  /* 下層：パンくず・本文ラッパもTOPと同幅（MV・フッター・lower_bottom内の入れ子は対象外） */
  body:not(.sd-top-page) #pankuzuWrap > .l-center,
  body:not(.sd-top-page) #contents #low-page.l-center,
  body:not(.sd-top-page) #contents #low-page > .l-center {
    max-width: 100rem;
    box-sizing: border-box;
    margin-inline: auto;
    padding-inline: var(--s4);
  }

  .top-comparison {
    padding: var(--s6) 0 var(--s8);
  }

  .top-comparison__intro {
    margin-bottom: var(--s3);
  }

  .top-comparison__divider {
    margin: var(--s2) 0 var(--s4);
  }

  .top-comparison__grid {
    gap: var(--s3);
    margin-bottom: var(--s2);
  }

  .top-comparison__card > .top-comparison__cardHead {
    --tc-headtop-h: calc(var(--s3) + 7rem + var(--s1));
  }

  .top-comparison__cardHeadTop {
    padding: var(--s3) var(--s2) 0;
  }

  .top-comparison__cardHeadBottom {
    padding: var(--s2);
  }

  .top-comparison__cardHeadLine {
    font-size: 1.8rem;
  }

  .top-comparison__hl {
    font-size: 2.2rem;
  }

  .top-comparison__cardBody {
    padding: var(--s2) var(--s2) var(--s4);
    gap: var(--s2);
  }

  .top-comparison__company {
    padding: var(--s1) 0;
    font-size: 2.2rem;
  }

  /* キャッチ：pc_br があると狭いカード幅で3行化するため、ノートでは改行なし（2行相当） */
  .top-comparison__catch .pc_br {
    display: none;
  }

  .top-comparison__cardBody .btn-web a br {
    display: none;
  }

  .top-comparison__points {
    gap: var(--s1);
  }

  .top-comparison__cardBody .btn-tel {
    margin-top: var(--s1);
  }

  .top-detail__heading .top-orange {
    font-size: 4.8rem;
  }

  .top-detail__cardBody {
    padding-inline: 4rem;
  }

  /* 報国：施工実績（年間｜累計）の横間隔 */
  #detail-mid .top-detail__stats {
    column-gap: var(--s4);
  }

  /* 選ばれる理由：2列幅では <br> 指定が3行化・単語分割の原因になるため改行なし */
  .top-detail__reasons {
    gap: var(--s3) var(--s4);
  }

  .top-detail__reason {
    min-width: 0;
  }

  .top-detail__reasonCatch br {
    display: none;
  }

  .top-detail__reasonCatch {
    font-size: 1.6rem;
    line-height: 1.55;
  }

  /* 最終カード重機：ノートはカード内に収めて全体表示（はみ出し clip しない） */
  .top-detail__card:last-child .top-detail__cardBody {
    padding-bottom: clamp(8rem, 12vw, 10rem);
  }

  .top-detail__card:last-child .top-detail__cardBody::after {
    right: 0;
    bottom: -5rem;
    width: clamp(18rem, 30vw, 24rem);
    height: clamp(16rem, 28vw, 22rem);
    background-size: contain;
  }

  .top-company__head {
    padding-inline: var(--s1);
  }

  .top-company__head::after {
    right: var(--s2);
  }

  .top-company__name {
    font-size: 2rem;
  }

  .top-company__table th {
    padding: var(--s1);
    width: 4em;
  }

  .top-method-index {
    padding: var(--s3) var(--s3);
  }

  .top-sub-card {
    padding-inline: var(--s2);
  }

  .top-sub-card::after {
    margin-left: var(--s1);
  }

  .top-basics__cardTitle {
    padding-inline: var(--s2);
  }

  /* 固定PCバナー：ノートは幅を狭め、縦に余裕・文字をやや小さく */
  .pc-fix-banner01 {
    width: 18rem;
  }

  .pc-fix-banner01-text {
    padding: var(--s2) var(--s1) var(--s2);
  }

  .pc-fix-banner01-text::before {
    width: 9.5rem;
    height: 8rem;
    top: -2rem;
  }

  .pc-fix-banner01-text p:not(.text-small) {
    font-size: 1.4rem;
    line-height: 1.45;
  }

  .pc-fix-banner01-text span {
    font-size: 1.9rem;
  }

  .pc-fix-banner01-text p.text-small {
    font-size: 1.4rem;
    margin-bottom: 0.6rem;
  }
}

/* TOP MV（Swiper）：768 以下を common.js の SP 判定と揃える */
@media (max-width: 768px) {
  #index {
    max-width: 100%;
    overflow-x: clip;
  }

  .top-intro {
    padding-bottom: var(--s4);
  }

  .top-intro__photos.swiper {
    padding: 0;
    margin-bottom: 0;
    width: 100%;
    overflow: hidden;
  }

  .top-intro__photo img {
    aspect-ratio: 21 / 9;
  }

  .top-intro__heading {
    display: block;
    text-align: center;
  }

  .top-intro__body {
    padding: 0 var(--s2) var(--s4);
  }

  .top-intro__subRow {
    flex: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    width: 100%;
    margin: 0 0 var(--s3);
  }

  .top-intro__sub {
    flex: 0 1 auto;
    white-space: normal;
    font-size: 1.6rem;
    text-align: center;
  }

  .top-intro__bar {
    flex: 1 1 auto;
    height: 1.2rem;
    min-width: var(--s2);
  }

  .top-intro__titleRow--primary {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex: none;
    margin-bottom: 0;
    gap: var(--s2);
  }

  .top-intro__titleRow--secondary {
    flex: none;
    margin-bottom: var(--s3);
  }

  .top-intro__label {
    margin-top: 0;
    font-size: 2rem;
  }

  .top-intro__titlePrefix {
    margin-top: 0;
    font-size: 2.4rem;
  }

  .top-intro__titleRow--secondary .top-intro__title {
    font-size: 3rem;
    line-height: 1.35;
  }

  .top-intro__body > .top-intro__lead:first-of-type {
    margin-top: var(--s2);
    line-height: 1.6;
  }
  .top-intro__lead {
    text-align:left;
  }

  .top-detail__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s1);
    margin: 0 0 var(--s5);
    padding: 0 0 var(--s2);
  }

  .top-detail__navHead.top-comparison__cardHead {
    /* アイコン帯 + オレンジ帯（アイコンが帯に少し重なる分を含む） */
    --tc-headtop-h: calc(var(--s2) + 4.8rem + 2.8rem);
  }

  /* 上段：オレンジは列幅いっぱい／階数表記は中央。アイコンは帯より手前（上）に重ねる */
  .top-detail__navHead .top-comparison__cardHeadTop {
    border-bottom: none;
    padding: var(--s2) 0 0;
    justify-content: center;
    align-items: flex-end;
    overflow: visible;
  }

  .top-detail__navHead .top-comparison__scale {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--s1) var(--s2);
    min-height: 2.6rem;
    font-size: 1.65rem;
    font-weight: 700;
    z-index: 1;
    box-sizing: border-box;
  }

  .top-detail__navHead .top-comparison__cardHeadIcon {
    width: 5.6rem;
    position: relative;
    z-index: 2;
    margin-bottom: 3.2rem;
  }

  .top-detail__navHead .top-comparison__cardHeadBottom {
    padding: var(--s2) 0.5rem;
  }

  .top-detail__navHead .top-comparison__cardHeadBottom::before {
    right: var(--s1);
    width: 1.4rem;
  }

  .top-detail__navHead .top-comparison__cardHeadLine {
    font-size: 1.3rem;
    text-align: left;
    padding-left: 0.5rem;
  }

  /* 簡易3選：見出し＝アイコン（小）→ h2（横幅いっぱい） */
  .top-comparison {
    padding-top: var(--s6);
    padding-bottom: var(--s5);
  }

  .top-comparison__headRow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s2);
    padding-left: 0;
    margin-top: -6rem;
  }

  .top-comparison__headRow::before {
    display: block;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 32%;
    max-width: 8rem;
    margin: 0 auto;
    flex-shrink: 0;
    align-self: center;
  }

  .top-comparison__heading {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .top-comparison__heading-label {
    margin-left: 0;
  }

  /* 上段（アイコン帯）：詳細3選カード見出しと同じアイコン幅（5.6rem = var(--s7)） */
  .top-comparison__grid .top-comparison__cardHeadIcon {
    width: var(--s10);
  }

  /* 上段（アイコン帯）の高さ（詳細ナビ .top-detail__navHead は別指定のまま） */
  .top-comparison__card > .top-comparison__cardHead {
    --tc-headtop-h: calc(var(--s4) + var(--s7) + var(--s1));
  }

  .top-comparison__cardHeadLine {
    font-size: 1.8rem;
  }

  .top-comparison__hl {
    font-size: 2.4rem;
  }

  .top-comparison__company {
    font-size: 2.2rem;
    padding: 0;
  }

  .top-comparison__catch {
    line-height: 1.4;
    text-align: left;
  }

  /* 簡易3選 SP：PC用 flex 下寄せを解除し、電話ボタン下の余白を詰める */
  .top-comparison__card {
    min-height: auto;
  }

  .top-comparison__cardBody {
    flex: none;
    padding-bottom: var(--s4);
  }

  .top-comparison__cardBody .btn-web {
    margin-top: var(--s3);
  }

  .top-comparison__cardBody .btn-tel {
    margin-bottom: 0;
  }

  /* 大規模（3枚目）：縦長アイコンが上に溢れ前カードに重なるため、予約高さ＋前カードとの間を広げる */
  .top-comparison__grid > .top-comparison__card:nth-child(3) {
    margin-top: var(--s3);
  }

  .top-comparison__grid > .top-comparison__card:nth-child(3) > .top-comparison__cardHead {
    /* 縦長アイコン：幅を s7 にした分、予約高さは s12 より詰める */
    --tc-headtop-h: calc(var(--s4) + var(--s10) + var(--s1));
  }

  .top-comparison__cardHeadTop {
    padding-top: 0;
  }

  /* 業者一覧：SP は .top-companies__barEn のみ。::after と二重にならないよう非表示 */
  .top-companies::after {
    content: none !important;
    display: none !important;
  }

  /* 地盤調査・工法カテゴリ・エリア別・基礎知識：SP は .top-sec-bar__barEn のみ（data-en-bar の折返し多行化を防ぐ） */
  .top-investigation.top-sec-bar::after,
  .top-method-categories.top-sec-bar::after,
  .top-area.top-sec-bar::after,
  .top-basics.top-sec-bar::after {
    content: none !important;
    display: none !important;
  }
}

/* SP用（768 以下：TOP MV / 簡易3選と同じブレークポイントに揃える） */
@media screen and (max-width: 768px) {
  .c-sec--detail .c-card--large {
    padding: var(--s4) var(--s2);
  }

  /* 下層 MV：SP 専用画像。mv-low-sp.png は横長パノラマ帯のため、枠の縦横比を画像に合わせる（2.5:1 だと帯が高すぎる） */
  .mainvisual--lower .c-low-mainvisual-photo {
    background-image: url("./img/mv-low-sp.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    min-height: 0;
    /* 実画像の幅÷高さに合わせて調整（SP はやや低めの帯） */
    aspect-ratio: 6 / 1;
  }
  .mainvisual--lower .c-low-mainvisual-logo {
    padding: 0 var(--s2);
  }
  /* ロゴ画像の実寸が大きいため、SP では縦上限で帯内に収める（親は高さ未指定で MV に追従） */
  .mainvisual--lower .c-low-mainvisual-logo img {
    max-height: clamp(3.2rem, 10vw, 4.5rem);
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* btn-web の直下に btn-tel が並ぶときの余白（SP表示時のみ） */
  .top-detail__card .btn-web + .btn-tel {
    margin-top: var(--s5) !important;
    margin-bottom: var(--s8) !important;
  }

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

  .c-company-card {
    display: flex !important;
    flex-direction: column;
    grid-row: none;
  }
  .pc-fix-banner01 {
    display: none;
  }
  /* SP固定バナー：高さは .page-top（5.4rem）に合わせる。ページトップの左横 */
  .sp-fix-banner01 {
    display: flex;
    align-items: center;
    overflow: visible;
    height: 5.4rem;
    min-height: 5.4rem;
    max-height: 5.4rem;
    left: var(--s1);
    right: calc(var(--s1) + 5.4rem + var(--s2));
    width: auto;
    bottom: max(0.4rem, 1.2vmin);
    top: auto;
    background-color: var(--c0);
    position: fixed;
    z-index: 9;
    box-sizing: border-box;
    max-width: none;
    border: 2px solid #333;
  }
  .sp-fix-banner01 .footer-banner__close {
    top: 0.8rem;
    right: 0.8rem;
    left: auto;
    bottom: auto;
    transform: none;
    width: 0.5rem;
    min-width: 0;
    height: 0.5rem;
    justify-content: center;
    font-size: 1.5rem;
    z-index: 11;
  }
  .sp-fix-banner01-text {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0.75rem 0.5rem 7rem;
    color: #fff;
    position: relative;
    font-size: 1.6rem;
    font-weight: 700;
    box-sizing: border-box;
  }
  .sp-fix-banner01-text::before {
    content: "建物の規模別";
    background: #FEB35E;
    position: absolute;
    display: inline-block;
    margin: 0 auto 0.1rem;
    z-index: 5;
    text-align: center;
    color: #333;
    font-weight: 700;
    padding: 0.35rem;
    font-size: 1.5rem;
    line-height: 1.15;
    /*! flex-shrink: 0; */
    top: 0.5rem;
    left: 0.5rem;
    width: 5rem;
  }
  .sp-fix-banner01-text p {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    width: 100%;
  }
  .sp-fix-banner01-text span {
    font-size: 1.6rem;
  }
  .sp-fix-banner01-text a {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    padding-right: 1.6rem;
    color: #fff;
    text-decoration: none;
    background: url("img/arrow_orange_right.png") no-repeat right bottom / 1.4rem auto;
  }
  .sp-fix-banner01-text a:hover {
    opacity: 0.7;
  }

  /* TOP PAGE - SP対応 */
  .top-method-categories {
    /* アイコン・デコが上のカードに重ならないよう s12 より広め（ブロック間・grid gap 共通） */
    --tc-method-card-stack-sp: calc(var(--s14) + var(--s4));
  }
  .top-grid-2,
  .top-grid-3 {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }
  .top-method--columnar .top-grid-3,
  .top-method--surface .top-grid-3,
  .top-method--gravel-pile .top-grid-3 {
    display: flex;
    flex-direction: column;
    /* 工法カテゴリ内は --tc-method-card-stack-sp が継承される */
    gap: var(--tc-method-card-stack-sp, var(--s10));
  }
  .top-method--columnar .top-grid-3 > .top-method__card,
  .top-method--surface .top-grid-3 > .top-method__card,
  .top-method--gravel-pile .top-grid-3 > .top-method__card {
    display: block;
    width: 100%;
    max-width: 100%;
  }
  .top-investigation .top-card__head {
    padding: var(--s3) var(--s2);
  }
  .top-investigation .top-card__icon {
    width: 4.4rem;
    height: 4.4rem;
    max-width: 100%;
  }
  .top-investigation .top-card__title {
    font-size: 2.2rem;
    line-height: 1.4;
    padding-left: 2rem;
  }
  .top-investigation .top-card__catch {
    font-size: 1.75rem;
    line-height: 1.4;
  }
  .top-h2 {
    font-size: 2rem;
  }
  .top-method h3.top-h2 {
    font-size: 2.6rem;
  }
  .top-orange {
    font-size: 1.8rem;
    line-height: 1.4;
  }
  .top-companies .top-h2 .top-orange,
  .top-area .top-h2 .top-orange,
  .top-investigation .top-h2 .top-orange,
  .top-basics .top-h2 .top-orange,
  .top-method h3.top-h2 .top-orange,
  .top-method-categories .top-h2 .top-orange {
    font-size: 3rem;
  }
  .top-area .top-lead {
    margin-bottom: var(--s6);
  }
  .top-area__card {
    padding: var(--s4);
    border-left-width: 0.4rem;
  }
  .top-area__catch {
    margin-bottom: var(--s2);
    font-size: var(--fs-s);
  }
  .top-area__cardTitle {
    margin: 0 0 var(--s2);
    padding-bottom: var(--s2);
  }
  .top-area__cardTitle a {
    font-size: 2rem;
  }
  .top-basics .top-lead {
    margin-bottom: var(--s7);
  }
  .top-basics__card {
    border-top-width: 0.4rem;
  }
  .top-basics__cardTitle {
    padding: var(--s2);
  }
  .top-basics__cardTitle a {
    font-size: 2rem;
  }
  .top-basics__company {
    margin-top: var(--s6);
  }
  .top-h2-eyebrow {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s1);
  }
  .top-h2-eyebrow__line {
    width: 100%;
    height: 0.4rem;
  }
  .mv-area {
    padding: var(--s4) 0 var(--s5);
  }
  .mv-area__inner {
    grid-template-columns: 1fr;
    padding: 0 var(--s2);
    gap: var(--s3);
  }
  .mv-area__bar {
    width: 40%;
    margin-bottom: var(--s2);
  }
  .top-comparison__grid {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: var(--s3);
  }
  .top-comparison__heading-main {
    font-size: 2rem;
    text-align: center;
  }
  .top-comparison__heading-label {
    font-size: 2rem;
    text-align: center;
  }
  .top-comparison__heading .top-orange {
    font-size: 3rem;
  }
  .top-comparison__num {
    font-size: 4rem;
  }
  .top-comparison__divider {
    height: 1.2rem;
    margin: var(--s2) 0 var(--s3);
  }
  .top-comparison__lead br {
    display: none;
  }
  .top-comparison__figure {
    min-width: 0;
    overflow: hidden;
  }
  .top-sub-cards,
  .top-sub-cards--3,
  .top-sub-cards--single {
    grid-template-columns: 1fr;
  }
  .top-method__card--full .top-sub-cards--single {
    grid-template-columns: 1fr;
  }
  .top-companies__grid {
    grid-template-columns: 1fr;
  }
  .top-companies .more-content .top-grid-3,
  .top-investigation .more-content .top-grid-2,
  .top-basics .more-content .top-grid-3 {
    grid-template-columns: 1fr;
    width: 100%;
  }
  .acc-more-btn {
    width: 24rem;
    max-width: 100%;
    box-sizing: border-box;
  }
  .top-method__card {
    margin-top: 4rem;
  }
  .top-method__cardTitle a {
    font-size: 2rem;
  }
  .top-method .top-h2__link .top-note-sm {
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    font-weight: 700;
  }
  .top-method__cardTitle a .top-note-sm {
    font-size: 1.6rem;
    letter-spacing: 0.06em;
    font-weight: 700;
  }
  .top-basics__card {
    margin-top: 0;
  }
  .top-method--bg .top-method__card {
    margin-top: var(--s12);
  }
  .top-method--bg .top-method__card--full {
    margin-top: 10rem;
    margin-bottom: var(--s3);
  }
  .top-method--bg .top-grid-2 {
    margin: 0;
  }
  .top-method--bg .top-method__deco::before {
    width: var(--s12);
    height: var(--s12);
    bottom: 0.2rem;
  }
  .top-method--bg .top-method__deco{
    height:3rem;
  }
  .top-method--columnar .top-method__deco::before,
  .top-method--surface .top-method__deco::before,
  .top-method--sheet .top-method__deco::before,
  .top-method--gravel-pile .top-method__deco::before,
  .top-method--wood-pile .top-method__deco::before,
  .top-method--environmental-pile .top-method__deco::before,
  .top-method--chemical-injection .top-method__deco::before,
  .top-method--sand-compaction .top-method__deco::before {
    width: var(--s12);
    max-width: 100%;
    aspect-ratio: 1;
    height: auto;
  }
  .top-method--chemical-injection .top-method__deco::before {
    width: 10rem;
  }

  /* 工法カテゴリ内 SP：カード縦方向を統一（グリッドは gap のみ／カード個別 margin は二重にしない） */
  .top-method-categories .top-method .l-center > .top-lead ~ * {
    margin-top: var(--tc-method-card-stack-sp);
  }
  .top-method-categories .top-method .top-grid-2,
  .top-method-categories .top-method .top-grid-3 {
    gap: var(--tc-method-card-stack-sp);
    margin-bottom: 0;
  }
  .top-method-categories .top-method .top-grid-2 > .top-method__card,
  .top-method-categories .top-method .top-grid-3 > .top-method__card {
    margin-top: 0;
  }

  /* 詳細3選 SP */
  .top-detail__heading-label,
  .top-detail__heading-main {
    font-size: 2rem;
    line-height: 1.8;
  }
  .top-detail__heading .top-orange {
    font-size: 3.4rem;
  }
  .top-detail__num {
    font-size: 4rem;
  }
  .top-detail {
    --tc-bar-top: 1.4rem;
    --tc-bar-h: 1.2rem;
    /* 固定文言は1行に収めるため帯をやや細く（業者一覧・sec-bar は従来幅） */
    --tc-bar-w: min(38%, 18rem);
    --tc-bar-w-min: 8rem;
    --tc-bar-text-gap: var(--s3);
    /* .l-sec の上下パディング（s14 + bottom 18rem）を SP では約半分に */
    padding-top: var(--s7);
    padding-bottom: 9rem;
  }
  /* 英字帯：左は地色のまま、グレーバーは右側のみ */
  .top-detail::before {
    left: auto;
    right: 0;
    width: var(--tc-bar-w);
    min-width: var(--tc-bar-w-min);
    z-index: 0;
  }
  .top-detail::after {
    left: calc(var(--s1) + var(--s-2));
    /* max-width だけだと inline-flex が内容幅のまま → width で帯手前まで領域を確保 */
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: calc(
      100% - (var(--s1) + var(--s-2)) - max(var(--tc-bar-w), var(--tc-bar-w-min)) -
        var(--tc-bar-text-gap)
    );
    max-width: none;
    white-space: nowrap;
    font-size: 1.8rem;
    letter-spacing: 0.12em;
    padding: 0 var(--s4) 0 0;
    background: transparent;
    z-index: 1;
  }
  /* 英字 1.8rem でも1行目と被らないよう、右バーを地盤調査等に近い幅に */
  .top-companies {
    --tc-bar-top: 1.4rem;
    --tc-bar-h: 1.2rem;
    --tc-bar-w: min(38%, 15rem);
    --tc-bar-w-min: 6rem;
    --tc-bar-text-gap: var(--s3);
  }
  .top-companies::before {
    height: var(--tc-bar-h);
    left: auto;
    right: 0;
    width: var(--tc-bar-w);
    min-width: var(--tc-bar-w-min);
    z-index: 0;
  }
  /* 英字2行は .top-companies__barEn のみ（::after は PC 用のため SP では完全に非表示） */
  .top-companies::after {
    content: none !important;
    display: none !important;
  }
  .top-investigation.top-sec-bar::after,
  .top-method-categories.top-sec-bar::after,
  .top-area.top-sec-bar::after,
  .top-basics.top-sec-bar::after {
    content: none !important;
    display: none !important;
  }
  .top-companies__barEn,
  .top-sec-bar__barEn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 0;
    left: calc(var(--s1) + var(--s-2));
    z-index: 1;
    box-sizing: border-box;
    min-height: var(--tc-bar-h);
    width: calc(
      100% - (var(--s1) + var(--s-2)) - max(var(--tc-bar-w), var(--tc-bar-w-min)) -
        var(--tc-bar-text-gap)
    );
    max-width: none;
    padding: 0 var(--s4) 0 0;
    background: transparent;
    color: #333;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.15;
  }
  .top-companies__barEn-line,
  .top-sec-bar__barEn-line {
    display: block;
    white-space: nowrap;
  }
  .top-sec-bar {
    --tc-bar-h: 1.2rem;
    --tc-bar-w: min(56%, 30rem);
    --tc-bar-w-min: 10rem;
    --tc-bar-text-gap: var(--s4);
  }
  /* 長い英字2行でも帯と被りにくいよう、右バーをやや短く（地盤調査） */
  .top-investigation.top-sec-bar {
    --tc-bar-w: min(40%, 16rem);
    --tc-bar-w-min: 6rem;
    --tc-bar-text-gap: var(--s3);
  }
  .top-method-categories.top-sec-bar {
    --tc-bar-w: min(64%, 24rem);
    --tc-bar-w-min: 7rem;
    --tc-bar-text-gap: var(--s4);
  }
  /* 東京エリア別：英字2行・1行目が長いので帯を細め＋字間を詰め、右帯と被らないようにする */
  .top-area.top-sec-bar {
    --tc-bar-w: min(24%, 9rem);
    --tc-bar-w-min: 4.8rem;
    --tc-bar-text-gap: var(--s4);
    padding-top: 9rem;
    padding-bottom: 9rem;
  }
  .top-area.top-sec-bar .top-sec-bar__barEn {
    z-index: 5;
    letter-spacing: 0.12em;
  }
  /* 基礎知識：1行目 GROUND IMPROVEMENT とエリア別同型（帯短め・字間詰め） */
  .top-basics.top-sec-bar {
    --tc-bar-w: min(24%, 9rem);
    --tc-bar-w-min: 4.8rem;
    --tc-bar-text-gap: var(--s4);
  }
  .top-basics.top-sec-bar .top-sec-bar__barEn {
    z-index: 5;
    letter-spacing: 0.12em;
  }
  /* サブピクセルや letter-spacing はみ出しで帯が文字にかぶるのを防ぐ */
  .top-method-categories.top-sec-bar .top-sec-bar__barEn {
    z-index: 2;
  }
  .top-sec-bar::before {
    height: var(--tc-bar-h);
    left: auto;
    right: 0;
    width: var(--tc-bar-w);
    min-width: 10rem;
    z-index: 0;
  }
  .top-sec-bar::after {
    left: calc(var(--s1) + var(--s-2));
    height: auto;
    min-height: var(--tc-bar-h);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: calc(
      100% - (var(--s1) + var(--s-2)) - max(var(--tc-bar-w), var(--tc-bar-w-min)) -
        var(--tc-bar-text-gap)
    );
    max-width: none;
    font-size: 1.8rem;
    letter-spacing: 0.2em;
    padding: 0 var(--s4) 0 0;
    white-space: normal;
    line-height: 1.15;
    background: transparent;
    z-index: 1;
  }
  .top-investigation.top-sec-bar::before,
  .top-method-categories.top-sec-bar::before,
  .top-area.top-sec-bar::before,
  .top-basics.top-sec-bar::before {
    min-width: var(--tc-bar-w-min);
  }
  .top-fixed-bg {
    background-attachment: scroll;
    overflow-x: visible;
    padding-bottom: 0rem;
  }
  .top-detail__cardHead {
    padding: var(--s3);
    overflow: visible;
  }
  /* 左：アイコンを階数台座（.scale）の上に重ねる／右：見出しテキスト */
  .top-detail__cardHeadInner {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: var(--s3);
  }
  .top-detail__cardHeadVisual {
    display: grid;
    grid-template-rows: auto auto;
    justify-items: stretch;
    width: 6.4rem;
    flex-shrink: 0;
    align-self: flex-end;
  }
  .top-detail__cardHeadIconWrap {
    grid-row: 1;
    justify-self: center;
    width: 5.6rem;
    height: 5.6rem;
    margin-bottom: 0.2rem;
    position: relative;
    z-index: 2;
  }
  .top-detail__cardHead .top-detail__scale {
    grid-row: 2;
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    min-width: 0;
    /* 下パディング分を相殺し、同色の border-bottom 帯に密着 */
    margin: 0 0 calc(-1 * var(--s3));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.5rem;
    font-size: 1.3rem;
    z-index: 1;
    box-sizing: border-box;
  }
  .top-detail__cardHeadTitle {
    flex: 1;
    min-width: 0;
    align-self: flex-end;
    font-size: 1.8rem;
    text-align: left;
  }
  .top-detail__cardBody {
    padding: var(--s4) var(--s2);
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }
  /* .caption-scroll：親を広げず横スクロールのみ */
  .caption.caption-scroll {
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .top-detail__company {
    font-size: 2.2rem;
  }
  .top-detail__subTitle {
    font-size: 2rem;
    text-align: left;
    margin: var(--s5) 0 var(--s4);
  }
  .top-detail__stats {
    grid-template-columns: 1fr;
    gap: var(--s3);
  }
  .top-detail__stat {
    grid-template-columns: auto 1fr;
    gap: var(--s2);
    padding: var(--s2) 0;
    align-items: stretch;
  }
  .top-detail__statLabel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s1) var(--s3);
    font-size: 1.6rem;
  }
  .top-detail__statValue {
    font-size: 2.6rem;
  }
  .top-detail__statUnit {
    font-size: 1.6rem;
  }
  .top-detail__statSubText {
    font-size: 1.4rem;
  }
  .top-detail__reasons {
    grid-template-columns: 1fr;
    gap: var(--s4);
    min-width: 0;
  }
  .top-detail__reason {
    min-width: 0;
  }
  .top-detail__reason p {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .top-detail__methods {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s1);
  }
  .top-detail__methods li {
    font-size: 1.6rem;
    line-height: 1.6;
  }
  .top-detail__case {
    grid-template-columns: 1fr;
    gap: var(--s3);
    max-width: 100%;
    overflow-x: hidden;
  }
  .top-detail__caseFigure{
    min-height: inherit;
    background: inherit;
  }
  .top-detail__card {
    min-width: 0;
    max-width: 100%;
  }
  .top-detail__info {
    font-size: 1.6rem;
  }
  .top-detail__info th,
  .top-detail__info td {
    display: block;
    width: 100%;
    border-bottom: none;
    box-sizing: border-box;
  }
  /* 縦積み：右は表の外枠のみ（th の border-right と二重にならない） */
  .top-detail__info th {
    border-right: none;
    border-bottom: 0.1rem solid var(--ln);
    padding-bottom: var(--s2);
  }
  .top-detail__info td {
    padding-top: var(--s2);
    padding-bottom: var(--s2);
    border-bottom: 0.1rem solid var(--ln);
    text-align: center;
  }
  /* PC用「最終行は下線なし」が縦積みで効くと th–td の区切りが消えるため SP のみ復帰 */
  .top-detail__info tr:last-child th {
    border-bottom: 0.1rem solid var(--ln);
  }
  .top-detail__info tr:last-child td {
    border-bottom: 0.1rem solid var(--ln);
  }
  .top-detail__info tr:last-child td:last-child {
    border-bottom: none;
  }
  .top-detail__footerBand {
    margin-top: clamp(-14rem, -36vw, -8rem);
    padding-top: clamp(5rem, 12vw, 10rem);
    min-height: clamp(12rem, 34vw, 22rem);
  }
  .top-detail__card:last-child .top-detail__cardBody {
    padding-bottom: var(--s4);
  }
  .top-detail__card:last-child .top-detail__cardBody::after {
    display: none;
  }
}

/* ページトップ：PCはビューポート右下（下端は詰めめ）／SPは JS と揃え max(0.4rem,1.2vmin) */
.page-top {
  right: var(--s2);
  bottom: max(0.4rem, 1.2vmin);
}

@media (max-width: 768px) {
  .page-top {
    right: var(--s1);
    bottom: max(0.4rem, 1.2vmin);
  }

  .page-top__link::before {
    width: 1.5rem;
  }
}

/* ページトップ：ダークグレーの円＋上向き白矢印 */
.page-top__link {
  background: var(--cE);
  padding: 0;
}

.page-top__link::before {
  content: "";
  display: block;
  width: 1.8rem;
  aspect-ratio: 1;
  max-width: 100%;
  background: url("img/arrow_white_right.png") no-repeat center / contain;
  transform: rotate(-90deg);
}

/* ==============================================
   まとめパーツ（onb-conclusion）※cate.html / 下層本文用
   ============================================== */
.onb-conclusion-box-frame {
  padding: var(--s2) var(--s4) var(--s4);
  border: 0.2rem solid var(--pri);
  box-sizing: border-box;
  margin-top: 8rem;
  margin-bottom: 9rem;
}

.onb-conclusion-box-ttl {
  position: relative;
}

.onb-conclusion-box-ttl__icon {
  width: 12rem;
  aspect-ratio: 1;
  background-color: var(--pri);
  border-radius: 50%;
  position: absolute;
  left: -0.5rem;
  top: -4rem;
}

.onb-conclusion-box-ttl__icon span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: var(--white);
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.onb-conclusion-box-ttl__text {
  margin: 2rem 0 3rem;
  padding: var(--s2) 0 var(--s2) 0;
  font-size: var(--fs-l);
  font-weight: 700;
  line-height: 1.5;
  background-color: var(--c0);
  text-align: center;
}

.onb-conclusion-box-ttl p {
  margin: var(--s2) 0 0;
}

@media (min-width: 769px) and (max-width: 1366px) {
  .onb-conclusion-box-ttl__text {
    padding-left: var(--s9);
  }
}

@media (max-width: 768px) {
  .onb-conclusion-box-frame {
    margin-bottom: 4.5rem;
  }

  .onb-conclusion-box-ttl__icon {
    width: 10rem;
    top: -1rem;
    transform: translate(-50%,-50%);
    left: 50%;
  }

  .onb-conclusion-box-ttl__icon span {
    font-size: 1.6rem;
  }

  .onb-conclusion-box-ttl__text {
    margin-top: var(--s3);
    padding: var(--s6) var(--s1) var(--s3);
  }
}