/* ==========================================================================
   MANNAKA CRAFT — 汎用コンポーネント
   配置: /wp-content/themes/{theme}/assets/css/components.css
   読み込み順: tokens.css → base.css → components.css → layout.css → style.css

   全18ページで使い回すものだけを置く。
   1ページでしか使わないものは style.css の .p-{page} 側に書く。

   直値は書かず tokens.css の変数を使う。
   ========================================================================== */


/* ==========================================================================
   セクション
   下層ページは「上下100pxのセクションを積む」構成で統一されている
   ========================================================================== */
.l-section {
  padding-block: var(--sp-96);
}

.l-section--beige {
  background: var(--c-bg-beige);
}

.l-section--flush {
  padding-block: 0;
}


/* ==========================================================================
   セクション見出し（英字ラベル ＋ 和文見出し）
   Figma: heading 2001:3747
   ========================================================================== */
.c-heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.c-heading--center {
  align-items: center;
  text-align: center;
}

.c-heading--left {
  align-items: flex-start;
}

.c-heading__label {
  padding-left: var(--sp-4);
  font-family: var(--font-en);
  font-size: var(--fs-16);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
  color: var(--c-text-sub);
}

.c-heading__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-36);
  line-height: var(--lh-120);
  letter-spacing: var(--ls-wider);
  color: var(--c-accent);
}


/* ==========================================================================
   スキップリンク
   ========================================================================== */
.c-skip-link {
  position: absolute;
  left: var(--sp-8);
  top: var(--sp-8);
  z-index: calc(var(--z-drawer) + 1);
  padding: var(--sp-8) var(--sp-16);
  background: var(--c-bg);
  color: var(--c-text);
  border-radius: var(--radius);
  transform: translateY(-200%);
}

.c-skip-link:focus {
  transform: none;
}


/* ==========================================================================
   アイコン
   ========================================================================== */
.c-icon {
  flex-shrink: 0;
}


/* ==========================================================================
   ボタン
   ========================================================================== */

/* LINE */
.c-btn-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  background: var(--c-line);
  color: var(--c-text-invert);
  border-radius: var(--radius);
  font-size: var(--fs-16);
  transition: opacity var(--dur) var(--ease);
}

.c-btn-line:hover {
  opacity: .85;
}

/* ヘッダー内：高さいっぱい */
.c-btn-line--header {
  align-self: stretch;
  padding-inline: var(--sp-20);
  white-space: nowrap;
}

/* フッター・ドロワー・CTA：横幅いっぱいの2段組 */
.c-btn-line--block {
  flex-direction: column;
  gap: var(--sp-12);
  width: 100%;
  min-width: 200px;
  padding: var(--sp-20);
}

.c-btn-line__main {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  font-weight: var(--fw-medium);
}

.c-btn-line__sub {
  font-size: var(--fs-14);
  line-height: var(--lh-150);
}

/* 申込フォーム／メール */
.c-btn-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
  min-width: 250px;
  padding: var(--sp-20);
  background: var(--c-white-90);
  border: 1px solid var(--c-text-sub);
  border-radius: var(--radius);
  color: var(--c-text);
  transition: background var(--dur) var(--ease);
}

.c-btn-form:hover {
  background: var(--c-bg-beige);
}

.c-btn-form__main {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
}

.c-btn-form__sub {
  font-size: var(--fs-14);
  color: var(--c-text-sub);
}

/* View more（下線＋矢印）
   Figma: btn 2001:3751 */
.c-btn-more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--c-text-sub);
  font-family: var(--font-en);
  font-size: var(--fs-16);
  line-height: var(--lh-100);
  letter-spacing: var(--ls-wider);
  color: var(--c-text);
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}

.c-btn-more:hover {
  gap: var(--sp-16);
  color: var(--c-accent);
}


/* ==========================================================================
   SNS
   ========================================================================== */
.c-sns {
  display: flex;
  align-items: center;
  gap: var(--sp-32);
}

.c-sns img {
  width: var(--sns-size);
  height: var(--sns-size);
  transition: opacity var(--dur) var(--ease);
}

.c-sns a:hover img {
  opacity: .7;
}


/* ==========================================================================
   カード（番号つき）
   Figma: /about の強み 2168:7461 ほか
   ========================================================================== */
.c-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  padding: var(--sp-32) var(--sp-20);
  background: var(--c-bg);
  border-radius: var(--radius-lg);
}

.c-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-bottom: var(--sp-8);
}

.c-card__num {
  font-family: var(--font-en);
  font-size: var(--fs-18);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
  color: var(--c-text-sub);
}

.c-card__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-24);
  line-height: var(--lh-150);
  color: var(--c-accent);
}

.c-card__text {
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}


/* ==========================================================================
   定義リスト（会社概要など）
   Figma: /about の list-item 2168:7534
   ========================================================================== */
.c-dl {
  border-bottom: 1px solid var(--c-border);
}

.c-dl__row {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--c-border);
}

.c-dl__title,
.c-dl__text {
  display: flex;
  align-items: center;
  padding: var(--sp-16) var(--sp-20);
  font-size: var(--fs-16);
  line-height: var(--lh-150);
}

.c-dl__title {
  flex-shrink: 0;
  min-width: 250px;
}

.c-dl__text {
  flex: 1 0 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.c-dl__text a {
  color: var(--c-accent);
  text-decoration: underline;
}


/* ==========================================================================
   パンくず
   Figma: sub-mv 内 2168:7447
   ========================================================================== */
.c-breadcrumb {
  padding-left: var(--sp-4);
}

.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-14);
  line-height: var(--lh-150);
}

.c-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.c-breadcrumb__link {
  color: var(--c-text);
}

.c-breadcrumb__link:hover {
  color: var(--c-accent);
  text-decoration: underline;
}

.c-breadcrumb__current {
  color: var(--c-accent);
}


/* ==========================================================================
   下層ページ共通MV
   Figma: sub-mv 2001:3811 / 実例 2168:7438（1440×654）
   ========================================================================== */
.c-sub-mv {
  padding-top: var(--sp-48);
}

.c-sub-mv__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-bottom: var(--sp-48);
}

.c-sub-mv__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.c-sub-mv__label {
  font-family: var(--font-en);
  font-size: var(--fs-68);
  line-height: var(--lh-100);
  letter-spacing: var(--ls-wider);
  color: var(--c-text-sub);
}

.c-sub-mv__title {
  padding-left: var(--sp-4);
  font-weight: var(--fw-medium);
  font-size: var(--fs-24);
  line-height: var(--lh-120);
  letter-spacing: var(--ls-wider);
  color: var(--c-accent);
}

.c-sub-mv__visual {
  position: relative;
  aspect-ratio: 5 / 2; /* PCカンプ 1000×400 */
  overflow: hidden;
}

.c-sub-mv__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

/* 写真の上に重ねる褐色のフィルター。キャッチの可読性を上げる */
.c-sub-mv__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-overlay-mv);
  pointer-events: none;
}

/* 写真に重ねる文字。キャッチのみのページ（/about）は上下中央、
   リード文がつくページ（/reform）は中央から下に流す */
.c-sub-mv__text {
  position: absolute;
  left: var(--sp-16);
  top: 50%;
  z-index: 1;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 515px;
  color: var(--c-text-invert);
  text-shadow: 4px 4px 20px var(--c-shadow-mv);
}

.c-sub-mv__visual--with-lead .c-sub-mv__text {
  translate: 0 0;
}

.c-sub-mv__catch {
  font-size: var(--fs-24);
  line-height: var(--lh-140);
  letter-spacing: var(--ls-wider);
}

.c-sub-mv__lead {
  font-size: var(--fs-14);
  line-height: var(--lh-200);
}


/* ==========================================================================
   共通CTA（お問い合わせ）
   Figma: contact 2017:2865（1440×791）
   ========================================================================== */
.c-contact {
  position: relative;
  padding-block: var(--sp-96);
  border-top: 1px solid var(--c-border);
  background: url("../img/contact-bg.jpg") no-repeat center / cover;
  isolation: isolate;
}

/* 背景写真に重ねるベージュのフィルター */
.c-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-overlay-contact);
  pointer-events: none;
}

.c-contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-48);
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.c-contact__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-40);
  width: 100%;
}

.c-contact__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  max-width: var(--measure-sm);
  text-align: center;
}

.c-contact__lead {
  font-size: var(--fs-28);
  line-height: var(--lh-150);
}

.c-contact__note {
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}

.c-contact__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-40);
}

.c-contact__line {
  max-width: 300px;
}

.c-contact__bottom {
  display: flex;
  align-items: stretch;
  gap: var(--sp-40);
}

.c-contact__tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
}

.c-contact__tel-num {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  font-family: var(--font-en);
  font-weight: var(--fw-light);
  font-size: var(--fs-32);
  line-height: 1.25;
  /* Figma 3.6px / 32px = 0.1125em。他の 0.08em と揃わない箇所 */
  letter-spacing: 0.1125em;
  color: var(--c-text);
}

.c-contact__tel-hours {
  font-size: var(--fs-14);
  color: var(--c-text-sub);
}


/* ==========================================================================
   サービスカード（写真左 ＋ テキスト右）
   Figma: /reform 2168:5769
   ========================================================================== */
.c-service-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-32);
}

.c-service-card__img {
  flex-shrink: 0;
  width: 200px;
}

.c-service-card__img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 200 / 130;
}

.c-service-card__body {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-20);
  padding-bottom: var(--sp-20);
}

.c-service-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-12);
  color: var(--c-accent);
}

.c-service-card__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-20);
  line-height: var(--lh-120);
  letter-spacing: var(--ls-wider);
}

.c-service-card__sub {
  font-size: var(--fs-14);
  line-height: var(--lh-120);
  letter-spacing: var(--ls-wider);
}

.c-service-card__text {
  font-size: var(--fs-16);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wide);
}

/* ボタンはカード下端に寄せる */
.c-service-card__body .c-btn-more {
  margin-top: auto;
}


/* ==========================================================================
   誘導バナー（FLOW / PRICE）
   Figma: /reform 2168:5826
   ========================================================================== */
.c-banner-row {
  display: flex;
}

.c-banner {
  position: relative;
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-48);
  padding: var(--sp-96) var(--sp-40);
  background-size: cover;
  background-position: center;
  border-right: 1px solid var(--c-border-gray);
  isolation: isolate;
}

.c-banner:last-child {
  border-right: 0;
}

/* 背景写真に重ねるフィルター。文字の可読性を確保する */
.c-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-overlay-banner);
  transition: background var(--dur) var(--ease);
}

.c-banner:hover::before {
  background: var(--c-overlay-banner-hover);
}

.c-banner__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-20);
  width: 100%;
}

.c-banner__text {
  font-size: var(--fs-16);
  line-height: var(--lh-150);
  text-align: center;
}

.c-banner__btn {
  align-self: flex-end;
}


/* ==========================================================================
   よくある質問（アコーディオン）
   Figma: list/open 2015:2358 / list/close 2015:2367
   <details>/<summary> で組んでいるのでJS不要
   ========================================================================== */
.c-faq {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}

.c-faq__item {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-20) var(--sp-40);
}

.c-faq__q {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  cursor: pointer;
  list-style: none;
  color: var(--c-text-sub);
}

/* Safari / Chrome の既定マーカーを消す */
.c-faq__q::-webkit-details-marker {
  display: none;
}

.c-faq__mark {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-size: var(--fs-24);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
}

.c-faq__q-text {
  flex: 1 0 0;
  min-width: 0;
  font-size: var(--fs-18);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
}

/* ＋／－のアイコン。Figmaは線レイヤーだが、開閉で変化するのでCSSで作る */
.c-faq__toggle {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.c-faq__toggle::before,
.c-faq__toggle::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}

.c-faq__toggle::after {
  transform: rotate(90deg);
}

/* 開いているときは横棒だけにする */
.c-faq__item[open] .c-faq__toggle::after {
  transform: rotate(0deg);
}

.c-faq__a {
  padding-top: var(--sp-12);
  color: var(--c-text);
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}


/* ==========================================================================
   表（料金・プランなど）
   Figma: /reform 2192:25614
   ========================================================================== */
.c-table-wrap {
  overflow-x: auto;
}

.c-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: var(--fs-18);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
}

.c-table th,
.c-table td {
  padding: var(--sp-16) var(--sp-20);
  border: 1px solid var(--c-border);
  font-weight: var(--fw-regular);
  text-align: left;
  vertical-align: middle;
}

.c-table thead th {
  background: var(--c-bg-beige);
}


/* ==========================================================================
   押さえるポイント（ベージュの囲み）
   Figma: /reform 2192:25651
   ========================================================================== */
.c-points {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
  padding: var(--sp-48);
  background: var(--c-bg-beige);
  border-radius: var(--radius-lg);
}

.c-points__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-24);
  line-height: var(--lh-150);
  color: var(--c-accent);
}

.c-points__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}

.c-points__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
}

.c-points__num {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-size: var(--fs-18);
  line-height: var(--lh-120);
  letter-spacing: var(--ls-wider);
  color: var(--c-accent);
}

.c-points__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  font-size: var(--fs-16);
  line-height: var(--lh-150);
}

.c-points__label {
  font-weight: var(--fw-medium);
}


/* ==========================================================================
   CTAボックス（見出し ＋ 補足 ＋ LINEボタン）
   Figma: /reform 2192:25717
   ========================================================================== */
.c-cta-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: var(--sp-48);
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center;
  background-image: url("../img/cta-box-bg.jpg");
  overflow: hidden;
  isolation: isolate;
}

/* 中央を強く白くして、文字を読ませる */
.c-cta-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    var(--c-white-30) 0%,
    var(--c-white-60) 15%,
    var(--c-white-90) 50%,
    var(--c-white-60) 85%,
    var(--c-white-30) 100%
  );
}

.c-cta-box__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
  padding-bottom: var(--sp-20);
  text-align: center;
}

.c-cta-box__title {
  font-size: var(--fs-28);
  line-height: var(--lh-150);
  color: var(--c-accent);
}

.c-cta-box__note {
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}

.c-cta-box__btn {
  max-width: 300px;
}


/* ==========================================================================
   施工実績（カード横並び）
   Figma: works 2025:1960
   ========================================================================== */
.c-works .c-heading {
  margin-bottom: var(--sp-48);
}

/* 4枚並ぶとコンテナ幅を超えるので、横スクロールで見せる */
.c-works__scroller {
  overflow-x: auto;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

.c-works__list {
  display: flex;
  gap: var(--sp-40);
  width: max-content;
}

.c-works__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sp-48);
}

.c-card-works {
  flex-shrink: 0;
  width: 390px;
  background: var(--c-bg);
}

.c-card-works__link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  padding: var(--sp-20);
  height: 100%;
}

.c-card-works__img img,
.c-card-works__noimg {
  display: block;
  width: 350px;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 350 / 250;
}

.c-card-works__noimg {
  background: var(--c-bg-beige);
}

.c-card-works__link:hover .c-card-works__title {
  color: var(--c-accent);
}

.c-card-works__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.c-card-works__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin-bottom: var(--sp-4);
}

.c-card-works__date {
  font-size: var(--fs-14);
  line-height: var(--lh-150);
  color: var(--c-text-sub);
}

.c-card-works__type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  padding: var(--sp-4) var(--sp-12);
  border: 1px solid var(--c-text-sub);
  font-size: var(--fs-14);
  line-height: var(--lh-100);
  color: var(--c-text-sub);
}

.c-card-works__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
  transition: color var(--dur) var(--ease);
}

.c-card-works__sub {
  font-size: var(--fs-14);
  line-height: var(--lh-150);
  color: var(--c-text-sub);
}


/* ==========================================================================
   お客様の声
   Figma: /reform 2168:5847
   ========================================================================== */
.c-voice .c-heading {
  margin-bottom: var(--sp-48);
}

.c-voice__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}

.c-voice__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding: var(--sp-20) var(--sp-40);
  background: var(--c-bg-beige);
}

.c-voice__head {
  font-size: var(--fs-14);
  line-height: var(--lh-150);
}

.c-voice__meta {
  color: var(--c-text-sub);
}

.c-voice__text {
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}

.c-voice__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sp-48);
}


/* ==========================================================================
   ご利用の流れ（6ステップ）
   Figma: flow 2029:3341
   番号の丸と横線は、Figmaでは線・楕円レイヤーだが、
   幅が伸縮するのでCSSで作る
   ========================================================================== */

/* FLOWの英字ラベルだけ、他セクションと違って本文色（#44301C） */
.c-heading__label--dark {
  color: var(--c-text);
}

.c-flow .c-heading {
  margin-bottom: var(--sp-48);
}

.c-flow__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-32) 0;
}

.c-flow__item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.c-flow__mark {
  display: flex;
  align-items: center;
  width: 100%;
}

/* 番号の丸 */
.c-flow__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: var(--fs-24);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
  color: var(--c-text);
}

/* 丸から右へ伸びる線 */
.c-flow__line {
  flex: 1 0 0;
  min-width: 1px;
  height: 1px;
  background: var(--c-border);
}

/* 最後のステップは線の先に点を打って終わりを示す */
.c-flow__item--last .c-flow__line {
  position: relative;
}

.c-flow__item--last .c-flow__line::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--c-border);
}

.c-flow__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 262px;
  max-width: 100%;
  padding-inline: var(--sp-12);
}

.c-flow__title {
  font-weight: var(--fw-medium);
  font-size: var(--fs-20);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
}

.c-flow__text {
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}


/* ==========================================================================
   セットプランの囲み（3点セットなど）
   Figma: /reform/water 2168:6034
   ========================================================================== */
.c-plan-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-40);
  padding: var(--sp-40) var(--sp-48);
  background: var(--c-white-60);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}

.c-plan-box__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-40);
}

.c-plan-box__lead {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.c-plan-box__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-24);
}

.c-plan-box__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-12);
  background: var(--c-badge);
  color: var(--c-bg-beige);
  font-size: var(--fs-24);
  line-height: var(--lh-150);
}

.c-plan-box__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-32);
  line-height: var(--lh-150);
  color: var(--c-accent);
}

.c-plan-box__desc {
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}

.c-plan-box__price {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-4);
  color: var(--c-accent);
}

.c-plan-box__price-num {
  font-size: var(--fs-68);
  line-height: var(--lh-100);
  letter-spacing: var(--ls-wider);
}

.c-plan-box__price-unit {
  font-size: var(--fs-32);
  line-height: var(--lh-140);
}

.c-plan-box__why {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-32);
}

.c-plan-box__why-title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-20);
  line-height: var(--lh-150);
  color: var(--c-accent);
}

.c-plan-box__points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-24) var(--sp-40);
}

.c-plan-box__point {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.c-plan-box__point-head {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
}

.c-plan-box__point-num {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-size: var(--fs-18);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
  color: var(--c-accent);
}

.c-plan-box__point-title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
}

.c-plan-box__point-text {
  font-size: var(--fs-16);
  line-height: var(--lh-150);
}


/* ==========================================================================
   ブレイクポイント 767px
   ========================================================================== */
@media (max-width: 767px) {

  .l-section {
    padding-block: var(--sp-56);
  }

  .c-heading__title {
    font-size: var(--fs-28);
  }

  .c-card {
    padding: var(--sp-24) var(--sp-20);
  }

  .c-card__title {
    font-size: var(--fs-20);
  }

  /* 定義リストは縦積みに */
  .c-dl__row {
    flex-direction: column;
  }

  .c-dl__title {
    min-width: 0;
    padding-bottom: 0;
    font-weight: var(--fw-medium);
    color: var(--c-text-sub);
  }

  .c-dl__text {
    padding-top: var(--sp-4);
  }

  .c-sub-mv {
    padding-top: var(--sp-32);
  }

  .c-sub-mv__inner {
    padding-bottom: var(--sp-32);
  }

  .c-sub-mv__label {
    font-size: var(--fs-40);
  }

  .c-sub-mv__title {
    font-size: var(--fs-18);
  }

  .c-sub-mv__visual {
    aspect-ratio: 327 / 240; /* SPカンプ 327×240（375幅−左右24px） */
  }

  .c-sub-mv__text {
    left: var(--sp-16);
    right: var(--sp-16);
    max-width: none;
  }

  .c-sub-mv__catch {
    font-size: var(--fs-18);
  }

  .c-sub-mv__lead {
    font-size: var(--fs-12);
    line-height: var(--lh-150);
  }

  .c-contact {
    padding-block: var(--sp-56);
  }

  .c-contact__inner {
    gap: var(--sp-32);
  }

  .c-contact__lead {
    font-size: var(--fs-20);
  }

  .c-contact__cta {
    width: 100%;
    gap: var(--sp-24);
  }

  .c-contact__line {
    max-width: none;
  }

  /* メールと電話を縦積みに */
  .c-contact__bottom {
    flex-direction: column;
    gap: var(--sp-24);
    width: 100%;
  }

  .c-contact__bottom .c-btn-form {
    width: 100%;
    min-width: 0;
  }

  .c-contact__tel-num {
    font-size: var(--fs-28);
  }

  /* サービスカード：写真を上、テキストを下に */
  .c-service-card {
    flex-direction: column;
    gap: var(--sp-16);
  }

  .c-service-card__img {
    width: 100%;
  }

  .c-service-card__img img {
  aspect-ratio: 327 / 200;
}

  .c-service-card__body {
    padding-bottom: 0;
    gap: var(--sp-16);
  }

  /* バナーは縦積み */
  .c-banner-row {
    flex-direction: column;
  }

  .c-banner {
    gap: var(--sp-24);
    padding: var(--sp-40) var(--gutter);
    border-right: 0;
    border-bottom: 1px solid var(--c-border-gray);
  }

  .c-banner:last-child {
    border-bottom: 0;
  }

  .c-banner__btn {
    align-self: center;
  }

  .c-faq {
    gap: var(--sp-16);
  }

  .c-faq__item {
    padding: var(--sp-16) var(--sp-20);
  }

  .c-faq__q-text {
    font-size: var(--fs-16);
  }

  .c-table {
    font-size: var(--fs-16);
    min-width: 480px;
  }

  .c-points {
    gap: var(--sp-20);
    padding: var(--sp-24) var(--sp-20);
  }

  .c-points__title {
    font-size: var(--fs-20);
  }

  .c-points__list {
    gap: var(--sp-20);
  }

  .c-cta-box {
    padding: var(--sp-32) var(--sp-20);
  }

  .c-cta-box__title {
    font-size: var(--fs-20);
  }

  .c-cta-box__btn {
    max-width: none;
    width: 100%;
  }

  .c-works .c-heading,
  .c-voice .c-heading {
    margin-bottom: var(--sp-32);
  }

  .c-works__list {
    gap: var(--sp-20);
  }

  .c-card-works {
    width: 280px;
  }

  .c-card-works__img img,
  .c-card-works__noimg {
    width: 100%;
    aspect-ratio: 240 / 180;
}

  .c-works__foot,
  .c-voice__foot {
    margin-top: var(--sp-32);
  }

  .c-voice__list {
    gap: var(--sp-16);
  }

  .c-voice__item {
    padding: var(--sp-20);
  }
}

/* ==========================================================================
   ブレイクポイント 767px（FLOW / セットプラン）
   ========================================================================== */
@media (max-width: 767px) {

  .c-flow .c-heading {
    margin-bottom: var(--sp-32);
  }

  /* 6ステップは1列に積む */
  .c-flow__list {
    grid-template-columns: 1fr;
    gap: var(--sp-24);
  }

  .c-flow__item {
    align-items: flex-start;
  }

  .c-flow__num {
    width: 48px;
    height: 48px;
    font-size: var(--fs-20);
  }

  .c-flow__body {
    width: 100%;
    padding-inline: 0;
    padding-top: var(--sp-8);
  }

  .c-flow__title {
    font-size: var(--fs-18);
  }

  .c-plan-box {
    gap: var(--sp-24);
    padding: var(--sp-24) var(--sp-20);
  }

  .c-plan-box__top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-20);
  }

  .c-plan-box__head {
    gap: var(--sp-12);
  }

  .c-plan-box__badge {
    font-size: var(--fs-16);
  }

  .c-plan-box__title {
    font-size: var(--fs-24);
  }

  .c-plan-box__price {
    align-self: center;
  }

  .c-plan-box__price-num {
    font-size: var(--fs-44);
  }

  .c-plan-box__price-unit {
    font-size: var(--fs-24);
  }

  /* おすすめの理由は1列に */
  .c-plan-box__points {
    grid-template-columns: 1fr;
    gap: var(--sp-20);
  }

  .c-plan-box__point-title {
    font-size: var(--fs-16);
  }
}

/* ==========================================================================
   MVのバッジ（sub-mv 内）
   Figma: /reform/water 2183:25259
   ========================================================================== */
.c-sub-mv__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
}

.c-sub-mv__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-12);
  background: var(--c-white-20);
  border: 1px solid var(--c-text-invert);
  font-size: var(--fs-14);
  line-height: var(--lh-150);
}


/* ==========================================================================
   見出しの白文字版（濃色セクション用）
   ========================================================================== */
.c-heading--invert .c-heading__label,
.c-heading--invert .c-heading__title {
  color: var(--c-text-invert);
}


/* ==========================================================================
   チェックリスト（お悩み）
   Figma: /reform/water 2168:5959
   ========================================================================== */
.c-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.c-checklist__item {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}


/* ==========================================================================
   メニューカード（正方形の写真 ＋ テキスト。ボタンなし）
   Figma: /reform/water 2168:5970
   ========================================================================== */
.c-menu-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-32);
  padding-block: var(--sp-20);
  border-top: 1px solid var(--c-border);
}

.c-menu-card__img {
  flex-shrink: 0;
  width: 200px;
}

.c-menu-card__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1; /* PCカンプ 200×200 */
  object-fit: cover;
  object-position: bottom;
}

.c-menu-card__body {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--sp-12);
  padding-block: var(--sp-20);
}

.c-menu-card__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-20);
  line-height: var(--lh-120);
  letter-spacing: var(--ls-wider);
  color: var(--c-accent);
}

.c-menu-card__text {
  font-size: var(--fs-16);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wide);
}


/* ==========================================================================
   その他のメニュー（写真上 ＋ テキスト ＋ ボタンの4列）
   Figma: /reform/water 2276:40360
   ========================================================================== */
.c-othermenu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-40) var(--sp-32);
}

.c-othermenu__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}

.c-othermenu__img img {
  width: 100%;
  aspect-ratio: 320 / 208;
  object-fit: cover;
}

.c-othermenu__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-20);
  padding-bottom: var(--sp-20);
}

.c-othermenu__text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
  width: 100%;
  text-align: center;
}

.c-othermenu__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-20);
  line-height: var(--lh-120);
  letter-spacing: var(--ls-wider);
  color: var(--c-accent);
}

.c-othermenu__desc {
  font-size: var(--fs-16);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wide);
  text-align: left;
}


/* ==========================================================================
   対応エリア
   Figma: area 2028:3036（1440×470）
   ========================================================================== */
.c-area {
  position: relative;
  padding-block: var(--sp-96);
  background: var(--c-bg-brown);
  color: var(--c-text-invert);
  overflow: hidden;
}

/* 右側に敷く地図の線画 */
.c-area__map {
  position: absolute;
  top: 0;
  left: 54%;
  width: 418px;
  height: 100%;
  background: url("../img/area-map.svg") no-repeat left top / contain;
  pointer-events: none;
}

.c-area__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-48);
}

.c-area__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.c-area__text {
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}

.c-area__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
}

.c-area__tag {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-8) var(--sp-16);
  border: 1px solid var(--c-text-weak);
  font-weight: var(--fw-light);
  font-size: var(--fs-12);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wide);
}


/* ==========================================================================
   ブレイクポイント 767px（/reform/water で追加した分）
   ========================================================================== */
@media (max-width: 767px) {

  .c-sub-mv__badge {
    font-size: var(--fs-12);
  }

  .c-checklist__item {
    align-items: flex-start;
    line-height: var(--lh-150);
  }

  .c-checklist__item .c-icon {
    margin-top: 0.2em;
  }

  /* メニューカードは写真を上に */
  .c-menu-card {
    flex-direction: column;
    gap: var(--sp-16);
  }

  .c-menu-card__img {
    width: 100%;
  }

  .c-menu-card__img img {
    aspect-ratio: 327 / 200; /* SPカンプ 327×200（375幅−左右24px） */
  }

  .c-menu-card__body {
    padding-block: 0;
  }

  .c-menu-card__title {
    font-size: var(--fs-18);
  }

  /* その他メニューは2列に */
  .c-othermenu {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-24) var(--sp-16);
  }

  .c-othermenu__item {
    gap: var(--sp-16);
  }

  .c-othermenu__body {
    gap: var(--sp-12);
    padding-bottom: 0;
    align-items: flex-start;
  }

  .c-othermenu__title {
    font-size: var(--fs-16);
  }

  .c-othermenu__desc {
    font-size: var(--fs-14);
  }

  .c-area {
    padding-block: var(--sp-56);
  }

  /* SPでは地図を薄く敷いて文字の邪魔をしないようにする */
  .c-area__map {
    left: auto;
    right: -80px;
    opacity: .35;
  }

  .c-area__inner {
    gap: var(--sp-32);
  }

  .c-area__list {
    gap: var(--sp-8);
  }
}


/* ==========================================================================
   オファーボックス（無料診断など、バッジ付きの申込ブロック）
   Figma: /reform/exterior 2168:5901
   ========================================================================== */
.c-offer-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-40);
  width: min(800px, 100%);
  margin-left: auto;
  padding: var(--sp-32) var(--sp-48);
  background: var(--c-white-60);
  border-radius: var(--radius-lg);
}

.c-offer-box__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-24);
}

.c-offer-box__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-12);
  background: var(--c-badge);
  color: var(--c-bg-beige);
  font-size: var(--fs-24);
  line-height: var(--lh-150);
}

.c-offer-box__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-32);
  line-height: var(--lh-150);
  color: var(--c-accent);
}

.c-offer-box__text {
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}

.c-offer-box__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-40);
  width: 100%;
}

.c-offer-box__line {
  max-width: 300px;
}

.c-offer-box__bottom {
  display: flex;
  align-items: stretch;
  gap: var(--sp-40);
}

.c-offer-box__tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
}

/* 白い囲みの中に置くので、地は敷かず枠線だけにする */
.c-btn-form--ghost {
  background: transparent;
}

.c-btn-form--ghost:hover {
  background: var(--c-white-70);
}


@media (max-width: 767px) {

  .c-offer-box {
    gap: var(--sp-24);
    padding: var(--sp-24) var(--sp-20);
  }

  .c-offer-box__head {
    gap: var(--sp-12);
  }

  .c-offer-box__badge {
    font-size: var(--fs-16);
  }

  .c-offer-box__title {
    font-size: var(--fs-24);
  }

  .c-offer-box__cta {
    gap: var(--sp-24);
  }

  .c-offer-box__line {
    max-width: none;
  }

  .c-offer-box__bottom {
    flex-direction: column;
    gap: var(--sp-24);
    width: 100%;
  }

  .c-offer-box__bottom .c-btn-form {
    width: 100%;
    min-width: 0;
  }
}


/* ==========================================================================
   写真バンド（背景写真 ＋ グラデーション ＋ 白文字）
   Figma: /reform 2192:25702（ガレージ）／/reform/interior 2168:6181（間取り）ほか

   写真とグラデーションはページ側から
   --band-image / --band-overlay で差し込む。
   ========================================================================== */
.c-photo-band {
  position: relative;
  padding-block: var(--sp-72);
  background: var(--band-image) no-repeat center / cover;
  color: var(--c-text-invert);
  isolation: isolate;
}

.c-photo-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--band-overlay, transparent);
}

.c-photo-band__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}

.c-photo-band__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-36);
  line-height: var(--lh-150);
  text-shadow: 0 0 10px var(--c-shadow-garage);
}

.c-photo-band__text {
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
  text-shadow: 0 0 10px var(--c-shadow-garage);
}

.c-photo-band__foot {
  display: flex;
  justify-content: flex-end;
}

/* 濃色の上に置くボタンは白線・白文字にする */
.c-photo-band .c-btn-more {
  color: var(--c-text-invert);
  border-bottom-color: var(--c-text-invert);
}

.c-photo-band .c-btn-more:hover {
  color: var(--c-text-invert);
  opacity: .8;
}

@media (max-width: 767px) {

  .c-photo-band {
    padding-block: var(--sp-40);
  }

  .c-photo-band__title {
    font-size: var(--fs-24);
  }
}


/* ==========================================================================
   プランカード（写真とテキストが交互に並ぶ全幅の行）
   Figma: /reform/garage 2168:6471
   ========================================================================== */
.c-plan-row {
  display: flex;
  align-items: stretch;
}

/* 偶数行は写真を右にする */
.c-plan-row--reverse {
  flex-direction: row-reverse;
}

.c-plan-row__img {
  flex: 1 0 0;
  min-width: 0;
}

.c-plan-row__img img {
  width: 100%;
  height: 100%;
  min-height: 344px;
  object-fit: cover;
}

.c-plan-row__body {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--sp-32);
  padding: var(--sp-48) var(--sp-40);
  border-top: 1px solid var(--c-border);
}

.c-plan-row__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.c-plan-row__title-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  color: var(--c-accent);
}

.c-plan-row__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-28);
  line-height: var(--lh-120);
  letter-spacing: var(--ls-wider);
}

.c-plan-row__sub {
  font-size: var(--fs-20);
  line-height: var(--lh-150);
}

.c-plan-row__price-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.c-plan-row__price {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-8);
  color: var(--c-accent);
}

.c-plan-row__price-num {
  font-size: 60px;
  line-height: var(--lh-100);
  letter-spacing: var(--ls-wide);
}

.c-plan-row__price-unit {
  font-size: var(--fs-32);
  line-height: var(--lh-140);
}

.c-plan-row__term {
  padding-left: var(--sp-4);
  font-size: var(--fs-16);
  line-height: var(--lh-150);
}

.c-plan-row__text {
  font-size: var(--fs-16);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wide);
}

@media (max-width: 767px) {

  /* 写真を上、テキストを下の1カラムに（交互の並びは解除） */
  .c-plan-row,
  .c-plan-row--reverse {
    flex-direction: column;
  }

  .c-plan-row__img img {
    min-height: 0;
    height: auto;
    aspect-ratio: 327 / 220;
}

  .c-plan-row__body {
    gap: var(--sp-20);
    padding: var(--sp-24) var(--gutter);
    border-top: 0;
  }

  .c-plan-row__title {
    font-size: var(--fs-24);
  }

  .c-plan-row__sub {
    font-size: var(--fs-16);
  }

  .c-plan-row__price-num {
    font-size: var(--fs-44);
  }

  .c-plan-row__price-unit {
    font-size: var(--fs-24);
  }
}


/* ==========================================================================
   サービスカードの変種
   /renovation はボタンが無く、タイトルとサブコピーが縦積み
   ========================================================================== */
.c-service-card__head--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

.c-service-card--plain .c-service-card__body {
  gap: var(--sp-12);
  padding-bottom: 0;
}


/* ==========================================================================
   活用パターンのカード
   Figma: /akiya 2168:6680
   ========================================================================== */
.c-pattern {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  padding: var(--sp-20);
  background: var(--c-bg);
  border-radius: var(--radius-lg);
}

.c-pattern__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
}

.c-pattern__title-wrap {
  display: flex;
  flex-direction: column;
  color: var(--c-accent);
}

.c-pattern__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-24);
  line-height: var(--lh-120);
  letter-spacing: var(--ls-wider);
}

.c-pattern__sub {
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}

/* 「PATTERN 01」＋右に伸びる罫線 */
.c-pattern__label {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  font-family: var(--font-en);
  font-size: var(--fs-16);
  line-height: var(--lh-100);
  letter-spacing: var(--ls-wider);
  color: var(--c-text-sub);
}

.c-pattern__label::after {
  content: "";
  flex: 1 0 0;
  min-width: 1px;
  border-top: 1px solid var(--c-border);
}

.c-pattern__num {
  font-size: var(--fs-18);
}

.c-pattern__text {
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}


/* 2フェーズ版のFLOW（/akiya） */
.c-flow__list--phase {
  grid-template-columns: repeat(2, 1fr);
}

.c-flow__list--phase .c-flow__body {
  width: 100%;
  padding-left: var(--sp-72);
  padding-right: var(--sp-12);
}

.c-flow__list--phase .c-flow__item {
  align-items: stretch;
}

@media (max-width: 767px) {

  .c-flow__list--phase {
    grid-template-columns: 1fr;
  }

  .c-flow__list--phase .c-flow__body {
    padding-left: 0;
  }
}


/* ==========================================================================
   情報バッジ（所要時間・レポート提出など）
   Figma: /akiya/diagnosis 2168:6813
   ========================================================================== */
.c-infobadges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-20);
}

.c-infobadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-12);
  background: var(--c-badge);
  color: var(--c-bg-beige);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}

/* 数字だけ大きく */
.c-infobadge__num {
  font-size: var(--fs-24);
  line-height: var(--lh-150);
}


/* ==========================================================================
   誘導ボタン（濃色の塗り）
   Figma: /akiya/diagnosis 2168:6865
   ========================================================================== */
.c-btn-solid {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-20);
  background: var(--c-btn-solid);
  color: var(--c-text-invert);
  font-size: var(--fs-18);
  line-height: var(--lh-100);
  transition: opacity var(--dur) var(--ease);
}

.c-btn-solid:hover {
  opacity: .85;
}


/* ==========================================================================
   誘導ボックス（白の囲み ＋ 見出し ＋ ボタン）
   Figma: /akiya/diagnosis 2168:6860
   ========================================================================== */
.c-lead-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-32);
  padding: var(--sp-40) var(--sp-96);
  background: var(--c-white-70);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}

.c-lead-box__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}

.c-lead-box__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-28);
  line-height: var(--lh-150);
  color: var(--c-accent);
}

.c-lead-box__note {
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}

@media (max-width: 767px) {

  .c-infobadges {
    gap: var(--sp-12);
  }

  .c-infobadge {
    font-size: var(--fs-14);
  }

  .c-infobadge__num {
    font-size: var(--fs-18);
  }

  .c-lead-box {
    gap: var(--sp-20);
    padding: var(--sp-24) var(--sp-20);
  }

  .c-lead-box__title {
    font-size: var(--fs-20);
  }
}

/* その他メニューの3列版 */
.c-othermenu--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 900px;
  margin-inline: auto;
}

@media (max-width: 767px) {

  .c-othermenu--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ==========================================================================
   料金プラン（3列。中央がおすすめ）
   Figma: /akiya/management 2168:6999
   ========================================================================== */
.c-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

.c-plan {
  display: flex;
  flex-direction: column;
}

.c-plan__name {
  padding: var(--sp-16) var(--sp-20);
  background: var(--c-bg-beige);
  border: 1px solid var(--c-border);
  font-weight: var(--fw-medium);
  font-size: var(--fs-18);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
  text-align: center;
}

/* 隣り合う枠線を重ねる */
.c-plan + .c-plan .c-plan__name,
.c-plan + .c-plan .c-plan__body {
  border-left: 0;
}

.c-plan__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-32);
  padding: var(--sp-40) var(--sp-20) var(--sp-56);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-top: 0;
}

.c-plan__freq {
  font-size: var(--fs-18);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
  text-align: center;
}

.c-plan__price {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-8);
}

.c-plan__price-num {
  font-family: var(--font-en);
  font-size: var(--fs-40);
  line-height: var(--lh-100);
  letter-spacing: var(--ls-wide);
}

.c-plan__price-unit {
  font-size: var(--fs-18);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
}

/* おすすめプランは枠を強調する */
.c-plan--recommend .c-plan__name {
  background: var(--c-plan-hl-bg);
  border: 2px solid var(--c-plan-hl-border);
}

.c-plan--recommend .c-plan__body {
  border: 2px solid var(--c-plan-hl-border);
  border-top: 0;
  gap: var(--sp-20);
  padding-bottom: var(--sp-32);
}

.c-plan--recommend + .c-plan .c-plan__name,
.c-plan--recommend + .c-plan .c-plan__body {
  border-left: 0;
}

.c-plan__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) var(--sp-12);
  border: 1px solid var(--c-accent);
  font-size: var(--fs-14);
  line-height: var(--lh-100);
  color: var(--c-accent);
}

.c-plan__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
}

/* CTAボックスにバッジを付ける変種 */
.c-cta-box__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-12);
}

.c-cta-box__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-12);
  background: var(--c-badge);
  color: var(--c-bg-beige);
  font-size: var(--fs-24);
  line-height: var(--lh-150);
}

@media (max-width: 767px) {

  /* プランは縦積みに。枠線の重ね方も切り替える */
  .c-plans {
    grid-template-columns: 1fr;
    gap: var(--sp-20);
  }

  .c-plan + .c-plan .c-plan__name,
  .c-plan + .c-plan .c-plan__body,
  .c-plan--recommend + .c-plan .c-plan__name,
  .c-plan--recommend + .c-plan .c-plan__body {
    border-left: 1px solid var(--c-border);
  }

  .c-plan--recommend + .c-plan .c-plan__body {
    border-top: 0;
  }

  .c-plan__body {
    padding: var(--sp-24) var(--sp-20);
    gap: var(--sp-16);
  }

  .c-plan__price-num {
    font-size: var(--fs-32);
  }

  .c-cta-box__badge {
    font-size: var(--fs-16);
  }
}


/* ==========================================================================
   ビフォーアフター
   Figma: /akiya/cleanup 2168:7139
   ========================================================================== */
.c-beforeafter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-32);
}

.c-beforeafter__item {
  position: relative;
}

.c-beforeafter__item img {
  width: 100%;
  aspect-ratio: 485 / 300;
  object-fit: cover;
}

.c-beforeafter__label {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 87px;
  padding: var(--sp-8) var(--sp-12);
  font-family: var(--font-en);
  font-size: var(--fs-16);
  line-height: var(--lh-100);
  letter-spacing: var(--ls-wider);
  color: var(--c-text-invert);
}

.c-beforeafter__label--before {
  background: var(--c-label-before);
}

.c-beforeafter__label--after {
  background: var(--c-label-after);
}

@media (max-width: 767px) {

  .c-beforeafter {
    grid-template-columns: 1fr;
    gap: var(--sp-16);
  }
}


/* ==========================================================================
   3ステップ図（アイコン ＋ 矢印）
   Figma: /akiya/package 2168:7295
   ========================================================================== */
.c-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
}

.c-steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-20);
  width: 300px;
  padding: var(--sp-40) var(--sp-32);
  background: var(--c-bg);
  border-radius: var(--radius-lg);
}

.c-steps__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}

.c-steps__title {
  font-weight: var(--fw-medium);
  font-size: var(--fs-20);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
}

.c-steps__text {
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}

.c-steps__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* 正方形の写真を使うサービスカード */
.c-service-card__img--square {
  width: 200px;
}

.c-service-card__img--square img {
  height: auto;
  aspect-ratio: 1 / 1;
}

/* CTAボックスの背景違い */
.c-cta-box--alt {
  background-image: url("../img/cta-box-bg-alt.jpg");
}

@media (max-width: 767px) {

  /* 3ステップは縦積み。矢印は回転させて下向きに */
  .c-steps {
    flex-direction: column;
    gap: var(--sp-12);
  }

  .c-steps__item {
    width: 100%;
    padding: var(--sp-24) var(--sp-20);
  }

  .c-steps__arrow {
    rotate: 90deg;
  }

  .c-service-card__img--square {
    width: 100%;
  }

  .c-service-card__img--square img {
  aspect-ratio: 327 / 220;
}
}


/* ==========================================================================
   縦型のフロー（/flow 専用の並び）
   Figma: /flow 2168:7605
   丸と縦線はCSSで作る
   ========================================================================== */
.c-flow-v {
  display: flex;
  flex-direction: column;
  width: min(675px, 100%);
  margin-inline: auto;
}

.c-flow-v__item {
  display: flex;
  gap: var(--sp-32);
  min-height: 162px;
}

.c-flow-v__mark {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
}

.c-flow-v__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: var(--fs-24);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
}

/* 丸から下へ伸びる線 */
.c-flow-v__line {
  flex: 1 0 0;
  width: 1px;
  min-height: 40px;
  background: var(--c-border);
}

/* 最後のステップは線の先に点を打って終わりを示す */
.c-flow-v__item--last .c-flow-v__line {
  position: relative;
}

.c-flow-v__item--last .c-flow-v__line::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--c-border);
}

.c-flow-v__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-32);
}

.c-flow-v__title {
  font-weight: var(--fw-medium);
  font-size: var(--fs-20);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
}

.c-flow-v__text {
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}

.c-flow-v__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  margin-top: var(--sp-12);
}

.c-flow-v__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  padding: var(--sp-8) var(--sp-12);
  background: var(--c-tag-bg);
  color: var(--c-text-invert);
  font-size: var(--fs-14);
  line-height: var(--lh-100);
}

@media (max-width: 767px) {

  .c-flow-v__item {
    gap: var(--sp-16);
    min-height: 0;
  }

  .c-flow-v__mark {
    width: 48px;
  }

  .c-flow-v__num {
    width: 48px;
    height: 48px;
    font-size: var(--fs-20);
  }

  .c-flow-v__body {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-24);
  }

  .c-flow-v__title {
    font-size: var(--fs-18);
  }

  .c-flow-v__tag {
    min-width: 0;
    font-size: var(--fs-12);
  }
}


/* ==========================================================================
   カテゴリ見出し（大きな英字 ＋ 和文）
   Figma: /about 2168:7505 / /price 2189:25417
   ========================================================================== */
.c-cat-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-4);
}

.c-cat-heading__en {
  font-family: var(--font-en);
  font-size: var(--fs-44);
  line-height: var(--lh-100);
  letter-spacing: var(--ls-wider);
  color: var(--c-text-sub);
}

.c-cat-heading__ja {
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
  color: var(--c-accent);
}


/* ==========================================================================
   注記ボックス
   Figma: /price 2168:7766
   ========================================================================== */
.c-notes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  padding: var(--sp-40);
  background: var(--c-bg-beige);
  border-radius: var(--radius-lg);
}

.c-notes__title {
  padding-bottom: var(--sp-20);
  border-bottom: 1px solid var(--c-border);
  font-weight: var(--fw-regular);
  font-size: var(--fs-28);
  line-height: var(--lh-150);
  color: var(--c-accent);
}

.c-notes__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.c-notes__list li {
  position: relative;
  padding-left: var(--sp-16);
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}

/* 行頭の小さな点 */
.c-notes__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

@media (max-width: 767px) {

  .c-cat-heading__en {
    font-size: var(--fs-32);
  }

  .c-notes {
    gap: var(--sp-16);
    padding: var(--sp-24) var(--sp-20);
  }

  .c-notes__title {
    padding-bottom: var(--sp-12);
    font-size: var(--fs-20);
  }
}


/* ==========================================================================
   小見出し（先頭に短い罫線 ＋ 英字）
   Figma: /faq category 2168:7802
   ========================================================================== */
.c-minihead {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  font-weight: var(--fw-regular);
}

.c-minihead__line {
  flex-shrink: 0;
  width: 10px;
  height: 1px;
  background: var(--c-text-sub);
}

.c-minihead__text {
  font-family: var(--font-en);
  font-size: var(--fs-24);
  line-height: var(--lh-100);
  letter-spacing: var(--ls-wider);
  color: var(--c-text-sub);
}


/* ==========================================================================
   カテゴリフィルタ（タブ）
   Figma: /faq category 2168:7805
   JSで絞り込むため <button>。JSが無効なときは
   このブロックごと hidden のままにする（page-faq.php 参照）
   ========================================================================== */
.c-catfilter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-20);
  list-style: none;
}

.c-catfilter__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  padding: var(--sp-4) var(--sp-12);
  border: 1px solid var(--c-text-sub);
  background: transparent;
  color: var(--c-text-sub);
  font-family: inherit;
  font-size: var(--fs-14);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-none);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.c-catfilter__btn:hover {
  background: var(--c-bg-beige);
}

.c-catfilter__btn.is-current,
.c-catfilter__btn.is-current:hover {
  background: var(--c-text-sub);
  color: var(--c-text-invert);
}

@media (max-width: 767px) {

  .c-minihead__text {
    font-size: var(--fs-20);
  }

  .c-catfilter {
    gap: var(--sp-12);
  }

  .c-catfilter__btn {
    min-width: 0;
    font-size: var(--fs-12);
  }
}


/* ==========================================================================
   お問い合わせフォーム
   Figma: /contact ContactPage 2168:7945
   入力欄は下線だけ。枠で囲まないカンプの指定に合わせている
   ========================================================================== */
.c-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-48);
  padding: 0 var(--sp-40) var(--sp-40);
  background: var(--c-bg-beige);
}

.c-form__rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
  width: 100%;
}

.c-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding-top: var(--sp-20);
}

.c-form__label {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-16);
  line-height: var(--lh-150);
  color: var(--c-text);
}

.c-form__required {
  color: var(--c-error);
  line-height: var(--lh-200);
}

.c-form__hint {
  font-size: var(--fs-14);
  line-height: var(--lh-150);
  color: var(--c-text-weak);
}

/* 入力欄。ブラウザ既定の枠・角丸・背景を消して下線だけにする */
.c-form__control {
  width: 100%;
  padding: var(--sp-12) var(--sp-16);
  border: 0;
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
  background: transparent;
  color: var(--c-text);
  font-family: inherit;
  font-size: var(--fs-16);
  line-height: var(--lh-150);
}

.c-form__control:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.c-form__control--area {
  padding: var(--sp-16);
  resize: vertical;
}

/* セレクト。矢印はCSSで描く（アセットを増やさない） */
.c-form__select {
  position: relative;
}

.c-form__select select {
  appearance: none;
  padding-block: var(--sp-20);
  padding-right: var(--sp-40);
  cursor: pointer;
}

.c-form__select::after {
  content: "";
  position: absolute;
  right: var(--sp-16);
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 1px solid var(--c-text);
  border-bottom: 1px solid var(--c-text);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.c-form__agree {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  width: 100%;
  font-size: var(--fs-16);
  line-height: var(--lh-150);
  color: var(--c-text);
}

.c-form__agree input {
  width: 16px;
  height: 16px;
  accent-color: var(--c-text-sub);
}

.c-form__agree a {
  text-decoration: underline;
}

.c-form__submit {
  display: flex;
  justify-content: center;
}

/* 送信ボタン。カンプは幅200px・16px・#6D5135 */
.c-btn-solid--wide {
  justify-content: center;
  min-width: 200px;
  background: var(--c-text-sub);
  font-size: var(--fs-16);
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

/* ハニーポット。見せないが display:none にはしない（一部のbotは無視するため） */
.c-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* エラーと完了 */
.c-form__errors,
.c-form__done {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding: var(--sp-24) var(--sp-40);
  border-radius: var(--radius-lg);
  font-size: var(--fs-16);
  line-height: var(--lh-200);
}

.c-form__errors {
  border: 1px solid var(--c-error);
  color: var(--c-text);
}

.c-form__errors-title {
  color: var(--c-error);
}

.c-form__errors ul {
  padding-left: var(--sp-20);
  list-style: disc;
}

.c-form__done {
  background: var(--c-bg-beige);
  border: 1px solid var(--c-border);
}

.c-form__done-title {
  font-size: var(--fs-20);
  color: var(--c-accent);
}

.c-form__done a {
  text-decoration: underline;
}

@media (max-width: 767px) {

  .c-form {
    gap: var(--sp-32);
    padding: 0 var(--sp-20) var(--sp-24);
  }

  .c-form__rows {
    gap: var(--sp-20);
  }

  .c-form__row {
    padding-top: var(--sp-12);
  }

  .c-form__agree {
    align-items: flex-start;
    text-align: left;
  }

  .c-form__agree input {
    margin-top: 0.3em;
    flex-shrink: 0;
  }

  .c-btn-solid--wide {
    width: 100%;
  }

  .c-form__errors,
  .c-form__done {
    padding: var(--sp-20);
  }
}


/* --------------------------------------------------------------------------
   共通CTA — 見出しなしパターン（/contact 本体だけ）
   Figma: /contact contact 2168:7915
   リードが28pxの2〜3行ではなく、16px・行間2の説明文になる
   -------------------------------------------------------------------------- */
.c-contact--bare {
  border-top: 0;
}

.c-contact--bare .c-contact__body {
  gap: var(--sp-48);
}

.c-contact--bare .c-contact__text {
  max-width: var(--measure-md);
}

.c-contact--bare .c-contact__lead {
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}

.c-contact--bare .c-contact__cta {
  gap: var(--sp-32);
}

.c-contact--bare .c-contact__line {
  max-width: 400px;
}

.c-contact__accent {
  color: var(--c-accent);
}


/* ==========================================================================
   TOPのメインビジュアル
   Figma: TOP MV 2168:5559（1440×1024）
   ========================================================================== */
.c-mv {
  position: relative;
  height: 1024px;
  max-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.c-mv__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.c-mv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 縦書きキャッチ。1行目（右）が「空間」「時間」「人間」、2行目（左）が その"間"をつくる */
.c-mv__vertical {
  position: absolute;
  left: 50%;
  top: calc(50% - 30px);
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: var(--fs-24);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
  color: var(--c-text-invert);
}

.c-mv__body {
  position: absolute;
  left: 0;
  bottom: 50px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-left: var(--sp-32);
}

.c-mv__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-40);
  line-height: var(--lh-140);
  letter-spacing: var(--ls-wider);
  color: var(--c-text-invert);
}

.c-mv__lead {
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
  color: var(--c-white-70);
}


/* ==========================================================================
   追従ボタン（LINE ＋ ページトップ）
   Figma: TOP 2291:82017
   ========================================================================== */
.c-float {
  position: fixed;
  right: var(--sp-20);
  bottom: var(--sp-20);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.c-float__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}

.c-float__btn:hover {
  opacity: .85;
}

.c-float__btn--line {
  background: var(--c-line);
}

.c-float__btn--top {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
}

/* 上向きの矢印。アセットを増やさずCSSで描く */
.c-float__arrow {
  position: relative;
  width: 12px;
  height: 16px;
}

.c-float__arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--c-text-sub);
  transform: translateX(-50%);
}

.c-float__arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 1px;
  width: 8px;
  height: 8px;
  border-left: 1px solid var(--c-text-sub);
  border-top: 1px solid var(--c-text-sub);
  transform: translateX(-50%) rotate(45deg);
}


/* ==========================================================================
   サービス（写真 ＋ 見出し ＋ カテゴリ ＋ 本文）を横1列で並べる
   Figma: TOP service 2168:5589
   ========================================================================== */
.c-service-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-40);
  list-style: none;
}

.c-service-row__item {
  display: flex;
  gap: var(--sp-40);
  align-items: flex-start;
  padding-bottom: var(--sp-40);
  border-bottom: 1px solid var(--c-border-gray);
}

/* 最後の1件だけ罫線を出さない */
.c-service-row__item:last-child {
  border-bottom: 0;
}

.c-service-row__img {
  flex-shrink: 0;
  width: 320px;
  height: auto;
  aspect-ratio: 320 / 208;
}

.c-service-row__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-service-row__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
}

.c-service-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-16);
  color: var(--c-accent);
}

.c-service-row__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-32);
  line-height: var(--lh-120);
  letter-spacing: var(--ls-wider);
}

.c-service-row__sub {
  font-size: var(--fs-20);
  line-height: var(--lh-120);
  letter-spacing: var(--ls-wider);
}

/* 見出しとカテゴリの間はカンプでは10px。body の gap(20px) から詰める */
.c-service-row__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-16);
  margin-top: calc(var(--sp-12) * -1);
  list-style: none;
  font-size: var(--fs-14);
  line-height: var(--lh-150);
}

.c-service-row__text {
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}


/* ==========================================================================
   選ばれる理由（白カード2×2）
   Figma: TOP REASON 2168:5622
   ========================================================================== */
.c-reason {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-40);
  list-style: none;
}

.c-reason__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  padding: var(--sp-40);
  background: var(--c-bg);
  border-radius: var(--radius-lg);
}

.c-reason__head {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--sp-8);
}

.c-reason__num {
  font-family: var(--font-en);
  font-size: var(--fs-18);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
  color: var(--c-text-sub);
}

.c-reason__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-32);
  line-height: var(--lh-130);
  letter-spacing: var(--ls-wider);
  color: var(--c-accent);
}

.c-reason__text {
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}


/* ==========================================================================
   代表挨拶（写真 ＋ 本文）
   Figma: TOP message 2168:5647
   ========================================================================== */
.c-message {
  display: flex;
  gap: var(--sp-40);
  align-items: flex-start;
}

.c-message__img {
  flex-shrink: 0;
  width: 324px;
  height: auto;
  aspect-ratio: 324 / 422;
}

.c-message__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-message__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}

.c-message__lead {
  font-size: var(--fs-24);
  line-height: var(--lh-130);
  letter-spacing: var(--ls-wider);
  color: var(--c-accent);
}

/* カンプは1行ずつ独立したレイヤー。行間2で詰めて並べる */
.c-message__text p {
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}

.c-message__name {
  text-align: right;
  font-size: var(--fs-16);
  line-height: var(--lh-150);
}


/* ==========================================================================
   コラム一覧（サムネ ＋ 日付・カテゴリ ＋ タイトル）
   Figma: TOP column 2168:5663
   ========================================================================== */
.c-column-list {
  list-style: none;
}

.c-column-list__item {
  border-bottom: 1px solid var(--c-border);
}

.c-column-list__link {
  display: flex;
  gap: var(--sp-20);
  align-items: center;
  padding: var(--sp-20);
  transition: opacity var(--dur) var(--ease);
}

.c-column-list__link:hover {
  opacity: .75;
}

.c-column-list__img {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: auto;
  overflow: hidden;
  background: var(--c-bg);
  aspect-ratio: 4 / 3;
}

.c-column-list__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* サムネ未設定のロゴは、引き伸ばさず中央に置く */
.c-column-list__logo {
  width: 140px;
  height: auto;
  object-fit: contain;
}

.c-column-list__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.c-column-list__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-12);
  font-size: var(--fs-14);
  line-height: var(--lh-150);
  color: var(--c-text-sub);
}

.c-column-list__cat {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  padding: var(--sp-4) var(--sp-8);
  border: 1px solid var(--c-text-sub);
}

.c-column-list__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
  color: var(--c-text);
}

@media (max-width: 767px) {

  .c-mv {
    height: 100svh;
  }

  .c-mv__vertical {
    top: calc(50% - 60px);
    font-size: var(--fs-20);
  }

  .c-mv__body {
    bottom: 32px;
    padding-inline: var(--sp-20);
  }

  .c-mv__title {
    font-size: var(--fs-28);
  }

  .c-mv__lead {
    font-size: var(--fs-14);
  }

  .c-float {
    right: var(--sp-12);
    bottom: var(--sp-12);
    gap: var(--sp-12);
  }

  .c-float__btn {
    width: 48px;
    height: 48px;
  }

  .c-service-row {
    gap: var(--sp-32);
  }

  .c-service-row__item {
    flex-direction: column;
    gap: var(--sp-20);
    padding-bottom: var(--sp-32);
  }

  .c-service-row__img {
    width: 100%;
    height: auto;
    aspect-ratio: 320 / 208;
  }

  .c-service-row__head {
    gap: var(--sp-8);
  }

  .c-service-row__title {
    font-size: var(--fs-24);
  }

  .c-service-row__sub {
    font-size: var(--fs-16);
  }

  .c-service-row__cats {
    gap: var(--sp-8) var(--sp-16);
    margin-top: calc(var(--sp-12) * -1);
  }

  .c-reason {
    grid-template-columns: 1fr;
    gap: var(--sp-20);
  }

  .c-reason__item {
    gap: var(--sp-12);
    padding: var(--sp-24) var(--sp-20);
  }

  .c-reason__title {
    font-size: var(--fs-24);
  }

  .c-message {
    flex-direction: column;
    gap: var(--sp-24);
  }

  .c-message__img {
    width: 100%;
    height: auto;
    aspect-ratio: 324 / 422;
  }

  .c-message__body {
    gap: var(--sp-20);
  }

  .c-message__lead {
    font-size: var(--fs-20);
  }

  .c-column-list__link {
    gap: var(--sp-12);
    padding: var(--sp-16) 0;
  }

  .c-column-list__img {
    width: 120px;
  }

  .c-column-list__logo {
    width: 90px;
  }

  .c-column-list__cat {
    min-width: 0;
  }
}


/* ==========================================================================
   カードの3列グリッド（施工実績・コラムの一覧）
   Figma: /works 2168:8041（390px × 3列・段間15px）
   ========================================================================== */
.c-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-16);
}

/* グリッドの中では幅を固定しない（カードは一覧幅に追従させる） */
.c-card-grid .c-card-works {
  width: auto;
}

.c-card-grid .c-card-works__img img,
.c-card-grid .c-card-works__noimg {
  width: 100%;
  height: auto;
  aspect-ratio: 350 / 250;
}

/* サムネ未設定のロゴ枠 */
.c-card-works__noimg--logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-card-works__noimg--logo img {
  width: 140px;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}


/* ==========================================================================
   カテゴリ絞り込み（アーカイブ）
   Figma: /works category 2168:8022
   タブの見た目は .c-catfilter（/faq と共通）。外枠だけここで持つ
   ========================================================================== */
.c-term-nav {
  padding-block: var(--sp-48);
  border-bottom: 1px solid var(--c-border);
}

.c-term-nav .c-minihead {
  margin-bottom: var(--sp-32);
}


/* ==========================================================================
   ページ送り
   Figma: Frame 572 / 2095:7807
   ========================================================================== */
.c-pager {
  display: flex;
  justify-content: center;
}

.c-pager__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
  list-style: none;
}

/* PREV / NEXT は前後に少し余白を足す */
.c-pager__item:has(.prev),
.c-pager__item:has(.next) {
  margin-inline: var(--sp-8);
}

.c-pager a,
.c-pager .current,
.c-pager .dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  min-width: 20px;
  font-family: var(--font-en);
  font-size: var(--fs-16);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
  color: var(--c-text);
  transition: color var(--dur) var(--ease);
}

.c-pager a:hover {
  color: var(--c-accent);
}

/* 現在ページ。カンプに区別の指定が無いので、下線で控えめに示す */
.c-pager .current {
  border-bottom: 1px solid currentColor;
  color: var(--c-accent);
}

.c-pager .prev,
.c-pager .next {
  font-size: var(--fs-14);
  letter-spacing: var(--ls-wide);
}

/* ← / → はアセットを増やさずCSSで描く */
.c-pager__edge-arrow {
  position: relative;
  width: 12px;
  height: 12px;
}

.c-pager__edge-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
}

.c-pager__edge-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
}

.c-pager__edge-arrow--prev::after {
  left: 0;
  border-left: 1px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
}

.c-pager__edge-arrow--next::after {
  right: 0;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}


/* ==========================================================================
   投稿詳細の見出し（日付 ＋ カテゴリ ＋ h1）
   Figma: /works/id 2168:8181 ／ /news/id 2168:8507 ／ /column/id 2168:8761
   ========================================================================== */
.c-post-head {
  padding-block: var(--sp-48);
}

.c-post-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-12);
  margin-bottom: var(--sp-12);
  font-size: var(--fs-14);
  line-height: var(--lh-150);
  color: var(--c-text-sub);
}

.c-post-head__cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  padding: var(--sp-4) var(--sp-8);
  border: 1px solid var(--c-text-sub);
}

.c-post-head__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-40);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wide);
  color: var(--c-accent);
}

.c-post-head__sub {
  margin-top: var(--sp-4);
  font-size: var(--fs-16);
  line-height: var(--lh-150);
  color: var(--c-text-sub);
}


/* ==========================================================================
   物件・工事データ表
   Figma: /works/id 2168:8193
   ========================================================================== */
.c-spec {
  border-top: 1px solid var(--c-border);
}

.c-spec__row {
  display: flex;
  border-bottom: 1px solid var(--c-border);
}

.c-spec__label {
  flex-shrink: 0;
  width: 250px;
  padding: var(--sp-16) var(--sp-20);
  background: var(--c-bg-beige);
  font-size: var(--fs-16);
  line-height: var(--lh-150);
  color: var(--c-text-sub);
}

.c-spec__value {
  flex: 1 0 0;
  min-width: 0;
  padding: var(--sp-16) var(--sp-20);
  font-size: var(--fs-16);
  line-height: var(--lh-150);
}


/* ==========================================================================
   BEFORE / AFTER
   Figma: /works/id 2168:8219（595px × 2・間10px）
   ========================================================================== */
.c-ba {
  display: flex;
  flex-direction: column;
  gap: var(--sp-48);
}

.c-ba__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
}

.c-ba__side {
  position: relative;
}

.c-ba__side img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 495 / 300;
}

.c-ba__tag {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) var(--sp-12);
  background: var(--c-text-sub);
  color: var(--c-text-invert);
  font-family: var(--font-en);
  font-size: var(--fs-16);
  line-height: var(--lh-100);
  letter-spacing: var(--ls-wide);
}

.c-ba__tag--after {
  background: var(--c-accent);
}

.c-ba__caption {
  margin-top: var(--sp-12);
  font-size: var(--fs-16);
  line-height: var(--lh-150);
  color: var(--c-text-sub);
}


/* ==========================================================================
   目次（コラム詳細）
   Figma: /column/id 2168:8769
   ========================================================================== */
.c-toc {
  align-self: start;
  position: sticky;
  top: var(--sp-96);
  padding: var(--sp-32) var(--sp-20);
  background: var(--c-bg-beige);
  border-radius: var(--radius-lg);
}

.c-toc__title {
  margin-bottom: var(--sp-16);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-wider);
  color: var(--c-accent);
}

.c-toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  list-style: none;
  counter-reset: toc;
}

.c-toc__item {
  counter-increment: toc;
  font-size: var(--fs-16);
  line-height: var(--lh-150);
}

.c-toc__item a {
  color: var(--c-text);
  transition: color var(--dur) var(--ease);
}

.c-toc__item a:hover {
  color: var(--c-accent);
}


/* ==========================================================================
   リード（コラムの導入文）
   Figma: /column/id 2168:8779
   ========================================================================== */
.c-lead-note {
  padding: var(--sp-20);
  background: var(--c-bg-beige);
  border-radius: var(--radius-lg);
  font-size: var(--fs-16);
  line-height: var(--lh-200);
  letter-spacing: var(--ls-wide);
}


/* ==========================================================================
   本文（エディタで書いた記事の見た目）
   Figma: /news/id 2168:8514（H2／H3／H4／リスト／リンク）
   エディタ側でクラスを付けなくても整うよう、要素セレクタで当てる
   ========================================================================== */
.c-entry {
  font-size: var(--fs-16);
  line-height: var(--lh-150);
  color: var(--c-text);
}

.c-entry > * + * {
  margin-top: var(--sp-12);
}

.c-entry h2 {
  margin-top: var(--sp-48);
  margin-bottom: var(--sp-32);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-150);
  color: var(--c-text-sub);
}

/* 先頭の見出しは上の余白を詰める */
.c-entry > h2:first-child {
  margin-top: 0;
}

/* H3は前後に短い罫線が入る */
.c-entry h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: fit-content;
  margin-top: var(--sp-48);
  margin-bottom: var(--sp-32);
  padding-left: var(--sp-12);
  font-weight: var(--fw-medium);
  font-size: var(--fs-24);
  line-height: var(--lh-150);
  color: var(--c-text-sub);
}

.c-entry h3::before,
.c-entry h3::after {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 2px;
  background: var(--c-text-sub);
}

.c-entry h4 {
  margin-top: var(--sp-48);
  margin-bottom: var(--sp-32);
  font-weight: var(--fw-medium);
  font-size: var(--fs-20);
  line-height: var(--lh-150);
  color: var(--c-text-sub);
}

.c-entry ul,
.c-entry ol {
  margin-block: var(--sp-32);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.c-entry ul {
  list-style: none;
}

.c-entry ul li {
  position: relative;
  padding-left: var(--sp-12);
}

.c-entry ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.c-entry ol {
  padding-left: 1.4em;
  list-style: decimal;
}

.c-entry a {
  color: var(--c-accent);
  text-decoration: underline;
}

.c-entry img {
  display: block;
  height: auto;
}

.c-entry figure {
  margin-block: var(--sp-32);
}

.c-entry figcaption {
  margin-top: var(--sp-8);
  font-size: var(--fs-14);
  line-height: var(--lh-150);
  color: var(--c-text-sub);
}

.c-entry blockquote {
  margin-block: var(--sp-32);
  padding: var(--sp-20);
  background: var(--c-bg-beige);
  border-left: 2px solid var(--c-border);
}

.c-entry table {
  width: 100%;
  border-collapse: collapse;
}

.c-entry th,
.c-entry td {
  padding: var(--sp-12) var(--sp-16);
  border: 1px solid var(--c-border);
  text-align: left;
}

.c-entry th {
  background: var(--c-bg-beige);
  font-weight: var(--fw-regular);
  color: var(--c-text-sub);
}


/* ==========================================================================
   検索フォーム
   カンプなし。入力欄はお問い合わせフォームと同じ下線スタイル
   ========================================================================== */
.c-search {
  display: flex;
  gap: var(--sp-12);
  align-items: flex-end;
  max-width: var(--measure-md);
}

.c-search__input {
  flex: 1 0 0;
  min-width: 0;
}

.c-search__submit {
  flex-shrink: 0;
  min-width: 120px;
}

@media (max-width: 767px) {

  .c-card-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-20);
  }

  .c-term-nav {
    padding-block: var(--sp-32);
  }

  .c-term-nav .c-minihead {
    margin-bottom: var(--sp-20);
  }

  .c-pager__list {
    gap: var(--sp-4);
  }

  .c-pager .prev,
  .c-pager .next {
    font-size: var(--fs-12);
  }

  .c-post-head {
    padding-block: var(--sp-32);
  }

  .c-post-head__title {
    font-size: var(--fs-24);
  }

  .c-spec__row {
    flex-direction: column;
  }

  .c-spec__label {
    width: 100%;
    padding: var(--sp-8) var(--sp-12);
    font-size: var(--fs-14);
  }

  .c-spec__value {
    padding: var(--sp-12) var(--sp-12);
  }

  .c-ba {
    gap: var(--sp-32);
  }

  .c-ba__images {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .c-ba__side img {
  aspect-ratio: 327 / 220;
}

  .c-ba__tag {
    padding: var(--sp-4) var(--sp-8);
    font-size: var(--fs-14);
  }

  .c-toc {
    position: static;
    padding: var(--sp-20);
  }

  .c-entry h2 {
    margin-top: var(--sp-32);
    margin-bottom: var(--sp-20);
    font-size: var(--fs-24);
  }

  .c-entry h3 {
    margin-top: var(--sp-32);
    margin-bottom: var(--sp-16);
    font-size: var(--fs-20);
  }

  .c-entry h4 {
    margin-top: var(--sp-32);
    margin-bottom: var(--sp-16);
    font-size: var(--fs-18);
  }

  .c-search {
    flex-direction: column;
    align-items: stretch;
  }
}


/* ==========================================================================
   SNS導線（1a案で追加）
   ========================================================================== */

/* ヘッダーのInstagram。透過ヘッダー中は白、スクロール後・下層は濃色 */
.l-header__insta {
  display: flex;
  align-items: center;
  padding-left: var(--sp-20);
  border-left: 1px solid var(--c-border);
  transition: opacity var(--dur) var(--ease);
}
.l-header__insta:hover { opacity: .7; }
.l-header__insta-img { width: 36px; height: 36px; }
.l-header__insta-img--light { display: none; }
.l-header--overlay:not(.is-scrolled) .l-header__insta { border-left-color: var(--c-white-50); }
.l-header--overlay:not(.is-scrolled) .l-header__insta-img--dark { display: none; }
.l-header--overlay:not(.is-scrolled) .l-header__insta-img--light { display: block; }

/* TOP Instagramセクション */
.p-top__insta-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-20);
}
.p-top__insta-follow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-20) var(--sp-12) var(--sp-12);
  background: var(--c-bg);
  border: 1px solid var(--c-text-sub);
  border-radius: var(--radius-pill);
  font-size: var(--fs-14);
  color: var(--c-text);
  transition: background var(--dur) var(--ease);
}
.p-top__insta-follow:hover { background: var(--c-bg-beige); }
.p-top__insta-follow img { width: 32px; height: 32px; }
.p-top__insta-feed { margin-top: var(--sp-40); }

/* お問い合わせ下のSNS */
.c-contact__sns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-16);
  padding-top: var(--sp-24);
  border-top: 1px solid var(--c-border);
}
.c-contact__sns-title {
  font-size: var(--fs-14);
  color: var(--c-text-sub);
}
.c-sns--sm { gap: var(--sp-12); }
.c-sns--sm img { width: 44px; height: 44px; }

@media (max-width: 767px) {
  .l-header__insta { display: none; }
  .p-top__insta-feed { margin-top: var(--sp-24); }
}