@charset "UTF-8";

/* ============================================================
 * 事業内容まわりの追加スタイル
 *   - /service                  … 追加事業ブロックの微調整
 *   - /service/crystal-aqua-plus … Crystal Aqua Plus 商品ページ（.cap）
 *
 * ■ なぜ SCSS ではなくこのファイルなのか
 *   _assets/css/style.css は _assets/scss/style.scss を Prepros で
 *   コンパイルした「成果物」。手編集しても次のビルドで消える。
 *   ビルド環境なしでも確実に反映させるため、採用ページ
 *   （grios-recruit.css / -custom.css）と同じ
 *   「専用CSSを別ファイルで enqueue する」方式を踏襲する。
 *
 * ■ 読み込み
 *   _functions/output-control/enqueue.php の grios_service_assets() が
 *   is_page(['service','crystal-aqua-plus']) のときだけ style.css の後に読む。
 *   CSS を更新したら enqueue.php のバージョン文字列を上げること。
 *
 * ■ 商品ページのデザイン方針（サイト共通とは意図的に変えている）
 *   商材が「水」で生活訴求のため、この1ページだけライトトーンで組む。
 *     地色     #fff ／ 水色帯 #e8f6fc      文字   #3c4043
 *     アクセント #0091d4（青）             書体   Noto Sans JP（ゴシック）
 *     角丸     カード20px・画像24px・ピル999px
 *   テーマ共通の header / Contact / footer は黒基調のままなので、
 *   境界を波形（.cap__wave）でつないで段差を消している。
 *   KV はテーマ標準の黒を残し、サイトとしての連続性を保つ。
 *
 * ■ 単位
 *   既存SCSSの get-vw-desktop() と同じフルード設計。
 *   素CSSでは mixin が使えないため CSS変数 --u（1px相当のvw）で代用する。
 *     PC: 100 / 1920 = 0.0520833vw   SP: 100 / 320 = 0.3125vw
 *   ブレークポイントはテーマ標準の $windowSP に合わせて 767px。
 * ============================================================ */


/* ------------------------------------------------------------
 * /service 側の補正（こちらは黒基調のまま）
 * ---------------------------------------------------------- */

/* 事業画像が未配置でも枠が消えないようにする保険 */
.serviceSec__contents__item__img {
  background-color: #3a3a3a;
}

/* AIX ブロックは item 1枚＋外部リンクなので、ボタン用の余白だけ足す */
.serviceSec__contents__block.aix--version .serviceSec__contents__block__desc {
  margin-bottom: calc(40 * 0.0520833vw);
}

.serviceSec__contents__block.aix--version .serviceSec__contents__blockBtn {
  display: flex;
  justify-content: flex-start;
}

/* Life line の Crystal Aqua Plus から詳細ページへ送るテキストリンク */
.serviceSec__contents__item__link {
  margin-top: calc(24 * 0.0520833vw);
  display: inline-block;
  padding-bottom: calc(4 * 0.0520833vw);
  border-bottom: 1px solid #917051;
  font-size: calc(16 * 0.0520833vw);
  letter-spacing: 0.1em;
  line-height: 1;
  color: #917051;
  transition: color .3s ease, border-color .3s ease;
}

.serviceSec__contents__item__link:hover {
  color: #d1c0a5;
  border-color: #d1c0a5;
}


/* ============================================================
 * Crystal Aqua Plus 商品ページ  .cap（ライトトーン）
 * ========================================================== */

/* ---- テーマ共通の装飾罫線を、このページだけ打ち消す ----
 * .cline1〜3 / .line2 は header.php 側で出力を止めている。
 * ここではサイドバーの区切り線を消す（サイドバー自体は残す）。
 * body.capPage は custom-body-class.php で付与。 */
.capPage .sideBar {
  border-right: none;
}

.cap {
  /* 1px 相当（PC: 1920 基準） */
  --u: 0.0520833vw;

  --c-white: #ffffff;
  --c-tint: #e8f6fc;          /* 水色帯 */
  --c-tint-d: #cfeaf6;        /* 罫線・淡い区切り */
  --c-text: #3c4043;          /* 本文 */
  --c-head: #17222b;          /* 見出し */
  --c-mute: #7b878f;          /* 注記 */
  --c-blue: #0091d4;          /* アクセント */
  --c-blue-d: #0075ac;        /* hover */
  --c-blue-p: #f2fafd;        /* ごく淡い青（カード地） */
  --c-dark: #0b0c10;          /* テーマ共通の地色（波形の接続用） */

  --r-card: calc(20 * var(--u));
  --r-img: calc(24 * var(--u));

  width: 100%;
  color: var(--c-text);
  /* テーマが Google Fonts で Noto Sans JP を読み込み済み */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  overflow: hidden; /* 波形のはみ出しを抑える */
}

.cap *,
.cap *::before,
.cap *::after {
  box-sizing: border-box;
}


/* ---- 境界の波形 ----
 * svg 自体の背景＝「移動元の色」、path の塗り＝「移動先の色」。
 * これだけで absolute 配置なしに境界を作れる。 */

.cap__wave {
  display: block;
  width: 100%;
  height: calc(72 * var(--u));
  vertical-align: top;
  /* 高さが小数になるため、隣接ブロックと 1px 重ねて継ぎ目を消す。
   * path 側も viewBox 外まで描いて塞いでいる（page 側のコメント参照）。 */
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}

/* 黒（KV）→ 白 */
.cap__wave--intro { background: var(--c-dark); }
.cap__wave--intro path { fill: var(--c-white); }

/* 白 → 水色 */
.cap__wave--in { background: var(--c-white); }
.cap__wave--in path { fill: var(--c-tint); }

/* 水色 → 白
 * path は「下側」を塗る形なので、上下反転させてはいけない
 * （反転すると白が上・水色が下になり、間に白い帯が挟まって見える）。
 * 変化を付けるための反転は左右（scaleX）で行う。 */
.cap__wave--out { background: var(--c-tint); transform: scaleX(-1); }
.cap__wave--out path { fill: var(--c-white); }

/* 白 → 黒（共通Contactへ） */
.cap__wave--outro { background: var(--c-white); }
.cap__wave--outro path { fill: var(--c-dark); }


/* ---- セクションの器 ---- */

.cap__sec {
  background: var(--c-white);
  padding: calc(120 * var(--u)) 0;
}

.cap__sec--tint {
  background: var(--c-tint);
  /* 波形は上下いっぱいまで出すので、セクション自身の余白は内側で持つ */
  padding: 0;
}

.cap__sec--tint > .cap__inner {
  padding: calc(40 * var(--u)) 0 calc(70 * var(--u));
}

.cap__sec--hero {
  padding-top: calc(70 * var(--u));
}

.cap__sec--cta {
  padding: calc(40 * var(--u)) 0 calc(110 * var(--u));
}

.cap__inner {
  margin: 0 auto;
  width: 100%;
  max-width: calc(1240 * var(--u));
  padding: 0 calc(40 * var(--u));
}

/* 改行の出し分け */
.cap__brSp { display: none; }


/* ---- 見出しユニット（吹き出し＋大見出し＋リード） ---- */

.cap__head {
  margin-bottom: calc(70 * var(--u));
  text-align: center;
}

.cap__head--sub {
  margin-top: calc(110 * var(--u));
}

/* 吹き出し型ラベル。下向きの小さな三角を ::after で付ける */
.cap__bubble {
  margin: 0 auto calc(28 * var(--u));
  display: inline-block;
  padding: calc(13 * var(--u)) calc(38 * var(--u));
  border: calc(2 * var(--u)) solid var(--c-blue);
  border-radius: 999px;
  background: var(--c-white);
  font-size: calc(19 * var(--u));
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--c-blue);
  position: relative;
}

.cap__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  margin-left: calc(-7 * var(--u));
  background: var(--c-white);
  border-right: calc(2 * var(--u)) solid var(--c-blue);
  border-bottom: calc(2 * var(--u)) solid var(--c-blue);
  transform: translateY(calc(-8 * var(--u))) rotate(45deg);
}

/* 水色地の上では吹き出しの中身も水色地に合わせる */
.cap__sec--tint .cap__bubble,
.cap__sec--tint .cap__bubble::after {
  background: var(--c-tint);
}

.cap__head__ttl {
  font-size: calc(46 * var(--u));
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: var(--c-head);
}

.cap__head__lead {
  margin-top: calc(28 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 2;
  color: var(--c-text);
}

.cap__midLead {
  margin: calc(60 * var(--u)) 0 0;
  font-size: calc(16 * var(--u));
  line-height: 2;
  text-align: center;
}

.cap__note {
  margin-top: calc(34 * var(--u));
  font-size: calc(13 * var(--u));
  line-height: 1.9;
  color: var(--c-mute);
  text-align: center;
}


/* ---- 01 Hero ---- */

.cap__hero__body {
  display: flex;
  align-items: center;
  gap: calc(60 * var(--u));
}

.cap__hero__product {
  margin: 0;
  width: 45%;
  display: flex;
  justify-content: center;
  /* 製品を淡い水色の円形グラデの上に置いて、白地から浮かせる */
  background: radial-gradient(closest-side, var(--c-tint) 0%, rgba(232,246,252,0) 78%);
}

.cap__hero__product img {
  width: auto;
  height: calc(560 * var(--u));
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 calc(16 * var(--u)) calc(30 * var(--u)) rgba(23, 34, 43, .18));
}

.cap__hero__spec {
  width: 55%;
}

/* 「高性能タイプ 鉛除去機能搭載」バッジ */
.cap__tag {
  margin-bottom: calc(24 * var(--u));
  display: inline-block;
  padding: calc(11 * var(--u)) calc(24 * var(--u));
  border-radius: 999px;
  background: var(--c-blue);
  font-size: calc(15 * var(--u));
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--c-white);
}

.cap__hero__catch {
  margin-bottom: calc(36 * var(--u));
  font-size: calc(34 * var(--u));
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--c-head);
}

.cap__licence {
  padding: calc(32 * var(--u)) calc(36 * var(--u));
  border-radius: var(--r-card);
  background: var(--c-blue-p);
}

.cap__licence__ttl {
  margin-bottom: calc(16 * var(--u));
  display: flex;
  align-items: baseline;
  gap: calc(12 * var(--u));
  font-size: calc(22 * var(--u));
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--c-blue);
}

.cap__licence__ttl span {
  font-size: calc(14 * var(--u));
  color: var(--c-text);
}

.cap__licence__ttl span::before { content: "【"; }
.cap__licence__ttl span::after  { content: "】"; }

.cap__licence__list {
  list-style: none;
}

.cap__licence__list li {
  padding-left: calc(20 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: 2;
  position: relative;
}

.cap__licence__list li::before {
  content: "";
  position: absolute;
  top: calc(12 * var(--u));
  left: 0;
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-radius: 50%;
  background: var(--c-blue);
}

.cap__licence__jis {
  margin-top: calc(14 * var(--u));
  padding-top: calc(14 * var(--u));
  border-top: 1px solid var(--c-tint-d);
  font-size: calc(13 * var(--u));
  line-height: 1.8;
  color: var(--c-mute);
}


/* ---- 02 Concept：お悩み ---- */

.cap__issues {
  margin: 0 auto;
  padding: calc(50 * var(--u)) calc(56 * var(--u));
  max-width: calc(900 * var(--u));
  border-radius: var(--r-card);
  background: var(--c-white);
  text-align: center;
}

.cap__issues__ttl {
  margin-bottom: calc(28 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--c-head);
}

.cap__issues__list {
  margin: 0 auto;
  width: max-content;
  max-width: 100%;
  text-align: left;
  list-style: none;
}

.cap__issues__list li {
  margin-bottom: calc(12 * var(--u));
  padding: calc(14 * var(--u)) calc(24 * var(--u)) calc(14 * var(--u)) calc(48 * var(--u));
  border-radius: 999px;
  background: var(--c-tint);
  font-size: calc(16 * var(--u));
  line-height: 1.6;
  position: relative;
}

/* チェックマーク */
.cap__issues__list li::before {
  content: "";
  position: absolute;
  top: calc(21 * var(--u));
  left: calc(22 * var(--u));
  width: calc(13 * var(--u));
  height: calc(7 * var(--u));
  border-left: calc(2 * var(--u)) solid var(--c-blue);
  border-bottom: calc(2 * var(--u)) solid var(--c-blue);
  transform: rotate(-45deg);
}

.cap__issues__answer {
  margin-top: calc(30 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: 1.9;
  color: var(--c-blue);
}


/* ---- 03 About ---- */

.cap__about {
  display: flex;
  align-items: center;
  gap: calc(60 * var(--u));
}

.cap__about__img {
  margin: 0;
  width: 50%;
  border-radius: var(--r-img);
  overflow: hidden;
  line-height: 0;
}

.cap__about__img img {
  width: 100%;
  height: auto;
  display: block;
}

.cap__about__body {
  width: 50%;
}

.cap__about__ttl {
  font-size: calc(32 * var(--u));
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--c-head);
}

.cap__about__sub {
  margin-bottom: calc(24 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-blue);
}

.cap__about__desc {
  font-size: calc(16 * var(--u));
  line-height: 2;
}

.cap__about__desc + .cap__about__desc {
  margin-top: calc(20 * var(--u));
}


/* ---- 04 Feature ---- */

.cap__features {
  display: flex;
  flex-direction: column;
  gap: calc(36 * var(--u));
}

.cap__feature {
  padding: calc(48 * var(--u)) calc(56 * var(--u));
  border-radius: var(--r-card);
  background: var(--c-white);
}

.cap__feature__no {
  margin-bottom: calc(14 * var(--u));
  display: flex;
  align-items: baseline;
  gap: calc(8 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--c-blue);
}

.cap__feature__no span {
  font-size: calc(30 * var(--u));
  letter-spacing: 0.04em;
}

.cap__feature__ttl {
  margin-bottom: calc(26 * var(--u));
  font-size: calc(30 * var(--u));
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: var(--c-head);
}

.cap__feature__ttl em {
  font-style: normal;
  color: var(--c-blue);
}

.cap__feature__desc {
  font-size: calc(16 * var(--u));
  line-height: 2;
}

.cap__feature__note {
  margin-top: calc(14 * var(--u));
  font-size: calc(13 * var(--u));
  line-height: 1.8;
  color: var(--c-mute);
}


/* ---- 数値比較ゲージ ---- */

.cap__gauge {
  margin: 0 0 calc(28 * var(--u));
  padding: calc(28 * var(--u)) calc(32 * var(--u));
  border-radius: var(--r-card);
  background: var(--c-blue-p);
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}

.cap__gauge__row {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
}

.cap__gauge__label {
  width: calc(300 * var(--u));
  flex-shrink: 0;
  font-size: calc(15 * var(--u));
  line-height: 1.5;
}

.cap__gauge__bar {
  height: calc(16 * var(--u));
  flex: 1 1 auto;
  border-radius: 999px;
  background: #dfe6ea;
  overflow: hidden;
}

.cap__gauge__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #b9c6ce;
}

/* 本製品の行は青で強調 */
.cap__gauge__row.is-product .cap__gauge__label { font-weight: 700; color: var(--c-blue); }
.cap__gauge__row.is-product .cap__gauge__val   { color: var(--c-blue); }
.cap__gauge__row.is-product .cap__gauge__bar span { background: var(--c-blue); }

.cap__gauge__val {
  width: calc(100 * var(--u));
  flex-shrink: 0;
  text-align: right;
  font-size: calc(26 * var(--u));
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--c-head);
}


/* ---- 除去対象のピル ---- */

.cap__pills {
  margin: 0 0 calc(26 * var(--u));
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(12 * var(--u));
}

.cap__pills__label {
  margin-right: calc(6 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 700;
  color: var(--c-text);
}

.cap__pill {
  padding: calc(12 * var(--u)) calc(28 * var(--u));
  border: calc(2 * var(--u)) solid var(--c-blue);
  border-radius: 999px;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--c-blue);
}

/* カタログが最も推している「鉛除去」だけ塗りで強調 */
.cap__pill.is-key {
  background: var(--c-blue);
  color: var(--c-white);
}


/* ---- 05 Life：生活シーン ---- */

.cap__scenes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(36 * var(--u)) calc(30 * var(--u));
}

.cap__scene__img {
  margin: 0 0 calc(20 * var(--u));
  border-radius: var(--r-img);
  overflow: hidden;
  line-height: 0;
}

.cap__scene__img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .5s ease;
}

.cap__scene:hover .cap__scene__img img {
  transform: scale(1.04);
}

.cap__scene__ttl {
  margin-bottom: calc(12 * var(--u));
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(12 * var(--u));
  font-size: calc(22 * var(--u));
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--c-head);
}

.cap__scene__ttl span {
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-blue);
}

.cap__scene__desc {
  font-size: calc(15 * var(--u));
  line-height: 1.9;
}


/* ---- 06 System：ろ材カード ---- */

.cap__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(24 * var(--u));
}

.cap__cards--3 {
  margin-top: calc(28 * var(--u));
  grid-template-columns: repeat(3, 1fr);
}

.cap__card {
  padding: calc(34 * var(--u)) calc(36 * var(--u));
  border-radius: var(--r-card);
  background: var(--c-white);
}

.cap__card__ttl {
  margin-bottom: calc(14 * var(--u));
  padding-bottom: calc(14 * var(--u));
  border-bottom: 1px solid var(--c-tint-d);
  font-size: calc(20 * var(--u));
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.4;
  color: var(--c-blue);
}

.cap__card__desc {
  font-size: calc(15 * var(--u));
  line-height: 1.9;
}


/* ---- 06 System：腐食の進行フロー ---- */

.cap__flow {
  margin: 0 auto;
  max-width: calc(900 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(34 * var(--u));
}

.cap__flow__step {
  padding: calc(24 * var(--u)) calc(34 * var(--u));
  border-radius: var(--r-card);
  background: var(--c-white);
  display: flex;
  align-items: center;
  gap: calc(26 * var(--u));
  position: relative;
}

.cap__flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(-24 * var(--u));
  left: 0;
  margin: auto;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  border-right: calc(2 * var(--u)) solid var(--c-blue);
  border-bottom: calc(2 * var(--u)) solid var(--c-blue);
  transform: rotate(45deg);
}

.cap__flow__no {
  flex-shrink: 0;
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  border-radius: 50%;
  background: var(--c-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(17 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--c-blue);
}

.cap__flow__step p {
  font-size: calc(17 * var(--u));
  line-height: 1.6;
}

/* 最終段は結論として塗りで強調 */
.cap__flow__step.is-alert { background: var(--c-blue); }
.cap__flow__step.is-alert p { color: var(--c-white); font-weight: 700; }
.cap__flow__step.is-alert .cap__flow__no { background: var(--c-white); }


/* ---- 07 Specification：仕様表 ---- */

.cap__spec {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-white);
}

.cap__spec th,
.cap__spec td {
  padding: calc(24 * var(--u)) calc(28 * var(--u));
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--c-tint-d);
}

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

.cap__spec th {
  width: calc(240 * var(--u));
  background: var(--c-blue-p);
  font-size: calc(16 * var(--u));
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--c-head);
}

.cap__spec__group {
  font-size: calc(16 * var(--u));
  line-height: 1.9;
}

.cap__spec__group:not(:last-of-type) {
  margin-bottom: calc(16 * var(--u));
}

.cap__spec__subhead {
  margin-bottom: calc(6 * var(--u));
  display: inline-block;
  padding: calc(5 * var(--u)) calc(14 * var(--u));
  border-radius: 999px;
  background: var(--c-tint);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-blue);
}

.cap__spec__note {
  margin-top: calc(10 * var(--u));
  font-size: calc(13 * var(--u));
  line-height: 1.8;
  color: var(--c-mute);
}


/* ---- 07 Specification：製造工程 ---- */

.cap__process {
  margin-top: calc(10 * var(--u));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(12 * var(--u));
  /* 番号は ::before の counter で出すので標準マーカーは消す */
  list-style: none;
  counter-reset: capProcess;
}

.cap__process li {
  padding: calc(14 * var(--u)) calc(24 * var(--u));
  border-radius: 999px;
  background: var(--c-tint);
  font-size: calc(15 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--c-head);
  counter-increment: capProcess;
}

.cap__process li::before {
  content: counter(capProcess, decimal-leading-zero);
  margin-right: calc(10 * var(--u));
  color: var(--c-blue);
}


/* ---- 07 Specification：導入の流れ ---- */

.cap__steps {
  margin-top: calc(10 * var(--u));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(24 * var(--u));
}

.cap__step {
  padding: calc(38 * var(--u)) calc(30 * var(--u));
  border-radius: var(--r-card);
  background: var(--c-blue-p);
  text-align: center;
  position: relative;
}

.cap__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-18 * var(--u));
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  border-top: calc(2 * var(--u)) solid var(--c-blue);
  border-right: calc(2 * var(--u)) solid var(--c-blue);
  transform: translateY(-50%) rotate(45deg);
}

.cap__step__no {
  margin: 0 auto calc(18 * var(--u));
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  border-radius: 50%;
  background: var(--c-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(19 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--c-white);
}

.cap__step__ttl {
  margin-bottom: calc(12 * var(--u));
  font-size: calc(19 * var(--u));
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.4;
  color: var(--c-head);
}

.cap__step__desc {
  font-size: calc(14 * var(--u));
  line-height: 1.8;
}


/* ---- 08 FAQ（details のネイティブ挙動。JS不要） ---- */

.cap__faq {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
}

.cap__faqItem {
  border-radius: var(--r-card);
  background: var(--c-white);
  overflow: hidden;
}

.cap__faqItem > summary {
  padding: calc(26 * var(--u)) calc(64 * var(--u)) calc(26 * var(--u)) calc(64 * var(--u));
  display: block;
  cursor: pointer;
  font-size: calc(17 * var(--u));
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-head);
  position: relative;
  list-style: none;
  transition: color .3s ease;
}

.cap__faqItem > summary::-webkit-details-marker { display: none; }

.cap__faqItem > summary:hover { color: var(--c-blue); }

/* 行頭の Q */
.cap__faqItem > summary::before {
  content: "Q";
  position: absolute;
  top: calc(24 * var(--u));
  left: calc(26 * var(--u));
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: 50%;
  background: var(--c-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(15 * var(--u));
  color: var(--c-white);
}

/* 行末の開閉マーク */
.cap__faqItem > summary::after {
  content: "";
  position: absolute;
  top: calc(34 * var(--u));
  right: calc(30 * var(--u));
  width: calc(14 * var(--u));
  height: calc(8 * var(--u));
  border-left: calc(2 * var(--u)) solid var(--c-blue);
  border-bottom: calc(2 * var(--u)) solid var(--c-blue);
  transform: rotate(-45deg);
  transition: transform .3s ease;
}

.cap__faqItem[open] > summary::after {
  transform: rotate(135deg);
}

.cap__faqItem__a {
  margin: 0 calc(26 * var(--u)) calc(26 * var(--u));
  padding: calc(22 * var(--u)) calc(26 * var(--u));
  border-radius: calc(14 * var(--u));
  background: var(--c-blue-p);
  font-size: calc(15 * var(--u));
  line-height: 1.95;
}

.cap__faqItem__a p + p {
  margin-top: calc(14 * var(--u));
}


/* ---- 09 CTA ---- */

.cap__cta {
  padding: calc(64 * var(--u)) calc(40 * var(--u));
  border-radius: calc(28 * var(--u));
  background: var(--c-tint);
  text-align: center;
}

.cap__cta__ttl {
  margin-bottom: calc(14 * var(--u));
  font-size: calc(28 * var(--u));
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: var(--c-head);
}

.cap__cta__desc {
  margin-bottom: calc(36 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1.9;
}

.cap__btn {
  margin: 0 auto;
  min-width: calc(460 * var(--u));
  min-height: calc(76 * var(--u));
  padding: 0 calc(40 * var(--u));
  border-radius: 999px;
  background: var(--c-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--c-white);
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 145, 212, .28);
  transition: background .3s ease, transform .3s ease;
}

.cap__btn::after {
  content: "";
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-top: calc(2 * var(--u)) solid currentColor;
  border-right: calc(2 * var(--u)) solid currentColor;
  transform: rotate(45deg);
}

.cap__btn:hover {
  background: var(--c-blue-d);
  color: var(--c-white);
  transform: translateY(calc(-2 * var(--u)));
}


/* ------------------------------------------------------------
 * SP（テーマ標準の $windowSP: 767px）
 * ---------------------------------------------------------- */

@media screen and (max-width: 767px) {

  .serviceSec__contents__block.aix--version .serviceSec__contents__block__desc {
    margin-bottom: calc(24 * 0.3125vw);
  }

  .serviceSec__contents__item__link {
    margin-top: calc(14 * 0.3125vw);
    padding-bottom: calc(3 * 0.3125vw);
    font-size: calc(12 * 0.3125vw);
  }

  .cap {
    /* 1px 相当（SP: 320 基準） */
    --u: 0.3125vw;
    --r-card: calc(14 * var(--u));
    --r-img: calc(16 * var(--u));
  }

  .cap__wave { height: calc(34 * var(--u)); }

  .cap__sec { padding: calc(60 * var(--u)) 0; }
  .cap__sec--hero { padding-top: calc(34 * var(--u)); }
  .cap__sec--tint > .cap__inner { padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u)); }
  .cap__sec--cta { padding: calc(20 * var(--u)) 0 calc(56 * var(--u)); }
  .cap__inner { padding: 0 calc(20 * var(--u)); }

  .cap__brPc { display: none; }
  .cap__brSp { display: inline; }

  /* 見出し */
  .cap__head { margin-bottom: calc(34 * var(--u)); }
  .cap__head--sub { margin-top: calc(56 * var(--u)); }
  .cap__bubble {
    margin-bottom: calc(18 * var(--u));
    padding: calc(9 * var(--u)) calc(22 * var(--u));
    font-size: calc(13 * var(--u));
  }
  .cap__bubble::after { width: calc(10 * var(--u)); height: calc(10 * var(--u)); margin-left: calc(-5 * var(--u)); }
  .cap__head__ttl { font-size: calc(24 * var(--u)); }
  .cap__head__lead { margin-top: calc(16 * var(--u)); font-size: calc(13 * var(--u)); text-align: left; }
  .cap__midLead { margin-top: calc(30 * var(--u)); font-size: calc(13 * var(--u)); text-align: left; }
  .cap__note { margin-top: calc(20 * var(--u)); font-size: calc(11 * var(--u)); text-align: left; }

  /* Hero */
  .cap__hero__body { flex-direction: column; gap: calc(28 * var(--u)); }
  .cap__hero__product,
  .cap__hero__spec { width: 100%; }
  .cap__hero__product img { height: calc(300 * var(--u)); }
  .cap__tag { margin-bottom: calc(16 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); font-size: calc(11 * var(--u)); }
  .cap__hero__catch { margin-bottom: calc(22 * var(--u)); font-size: calc(21 * var(--u)); }
  .cap__licence { padding: calc(20 * var(--u)); }
  .cap__licence__ttl { margin-bottom: calc(10 * var(--u)); font-size: calc(16 * var(--u)); }
  .cap__licence__ttl span { font-size: calc(11 * var(--u)); }
  .cap__licence__list li { padding-left: calc(15 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.9; }
  .cap__licence__list li::before { top: calc(9 * var(--u)); width: calc(7 * var(--u)); height: calc(7 * var(--u)); }
  .cap__licence__jis { font-size: calc(10 * var(--u)); }

  /* Concept */
  .cap__issues { padding: calc(26 * var(--u)) calc(20 * var(--u)); }
  .cap__issues__ttl { margin-bottom: calc(18 * var(--u)); font-size: calc(17 * var(--u)); }
  .cap__issues__list { width: 100%; }
  .cap__issues__list li {
    padding: calc(11 * var(--u)) calc(16 * var(--u)) calc(11 * var(--u)) calc(36 * var(--u));
    font-size: calc(12 * var(--u));
  }
  .cap__issues__list li::before { top: calc(16 * var(--u)); left: calc(16 * var(--u)); width: calc(10 * var(--u)); height: calc(6 * var(--u)); }
  .cap__issues__answer { margin-top: calc(20 * var(--u)); font-size: calc(13 * var(--u)); }

  /* About */
  .cap__about { flex-direction: column; gap: calc(20 * var(--u)); }
  .cap__about__img,
  .cap__about__body { width: 100%; }
  .cap__about__ttl { font-size: calc(20 * var(--u)); }
  .cap__about__sub { margin-bottom: calc(14 * var(--u)); font-size: calc(11 * var(--u)); }
  .cap__about__desc { font-size: calc(13 * var(--u)); }

  /* Feature */
  .cap__features { gap: calc(16 * var(--u)); }
  .cap__feature { padding: calc(24 * var(--u)) calc(20 * var(--u)); }
  .cap__feature__no { font-size: calc(11 * var(--u)); }
  .cap__feature__no span { font-size: calc(20 * var(--u)); }
  .cap__feature__ttl { margin-bottom: calc(16 * var(--u)); font-size: calc(18 * var(--u)); }
  .cap__feature__desc { font-size: calc(13 * var(--u)); }
  .cap__feature__note { font-size: calc(10 * var(--u)); }

  /* ゲージはラベルを上に逃がして縦積み */
  .cap__gauge { margin-bottom: calc(18 * var(--u)); padding: calc(16 * var(--u)); gap: calc(12 * var(--u)); }
  .cap__gauge__row { flex-wrap: wrap; gap: calc(6 * var(--u)); }
  .cap__gauge__label { width: 100%; font-size: calc(12 * var(--u)); }
  .cap__gauge__bar { height: calc(10 * var(--u)); }
  .cap__gauge__val { width: calc(52 * var(--u)); font-size: calc(17 * var(--u)); }

  .cap__pills { margin-bottom: calc(18 * var(--u)); gap: calc(8 * var(--u)); }
  .cap__pills__label { width: 100%; margin-right: 0; font-size: calc(12 * var(--u)); }
  .cap__pill { padding: calc(9 * var(--u)) calc(16 * var(--u)); font-size: calc(12 * var(--u)); }

  /* グリッドは全て1カラムへ */
  .cap__scenes,
  .cap__cards,
  .cap__cards--3,
  .cap__steps {
    grid-template-columns: 1fr;
    gap: calc(18 * var(--u));
  }

  .cap__scene__img { margin-bottom: calc(12 * var(--u)); }
  .cap__scene__ttl { margin-bottom: calc(8 * var(--u)); gap: calc(8 * var(--u)); font-size: calc(16 * var(--u)); }
  .cap__scene__ttl span { font-size: calc(10 * var(--u)); }
  .cap__scene__desc,
  .cap__card__desc { font-size: calc(12 * var(--u)); }

  .cap__cards--3 { margin-top: calc(18 * var(--u)); }
  .cap__card { padding: calc(20 * var(--u)); }
  .cap__card__ttl { margin-bottom: calc(12 * var(--u)); padding-bottom: calc(10 * var(--u)); font-size: calc(15 * var(--u)); }

  /* 腐食フロー */
  .cap__flow { gap: calc(22 * var(--u)); }
  .cap__flow__step { padding: calc(16 * var(--u)); gap: calc(14 * var(--u)); }
  .cap__flow__step:not(:last-child)::after { bottom: calc(-16 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
  .cap__flow__no { width: calc(32 * var(--u)); height: calc(32 * var(--u)); font-size: calc(12 * var(--u)); }
  .cap__flow__step p { font-size: calc(12 * var(--u)); }

  /* 仕様表：見出しセルを上に積む */
  .cap__spec,
  .cap__spec tbody,
  .cap__spec tr,
  .cap__spec th,
  .cap__spec td {
    display: block;
    width: 100%;
  }

  .cap__spec th {
    padding: calc(10 * var(--u)) calc(16 * var(--u));
    border-bottom: none;
    font-size: calc(13 * var(--u));
  }

  .cap__spec td {
    padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(18 * var(--u));
  }

  .cap__spec__group { font-size: calc(12 * var(--u)); line-height: 1.9; }
  .cap__spec__subhead { padding: calc(4 * var(--u)) calc(10 * var(--u)); font-size: calc(11 * var(--u)); }
  .cap__spec__note { font-size: calc(10 * var(--u)); }

  .cap__process { gap: calc(8 * var(--u)); justify-content: flex-start; }
  .cap__process li { padding: calc(10 * var(--u)) calc(14 * var(--u)); font-size: calc(11 * var(--u)); }
  .cap__process li::before { margin-right: calc(6 * var(--u)); }

  /* 導入の流れ：縦積みになるので矢印を下向きに */
  .cap__step { padding: calc(22 * var(--u)) calc(20 * var(--u)); }
  .cap__step:not(:last-child)::after {
    top: auto;
    right: 0;
    bottom: calc(-15 * var(--u));
    left: 0;
    margin: auto;
    width: calc(9 * var(--u));
    height: calc(9 * var(--u));
    border-top: none;
    border-right: calc(2 * var(--u)) solid var(--c-blue);
    border-bottom: calc(2 * var(--u)) solid var(--c-blue);
    transform: rotate(45deg);
  }
  .cap__step__no { margin-bottom: calc(12 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); font-size: calc(14 * var(--u)); }
  .cap__step__ttl { margin-bottom: calc(8 * var(--u)); font-size: calc(15 * var(--u)); }
  .cap__step__desc { font-size: calc(11 * var(--u)); }

  /* FAQ */
  .cap__faq { gap: calc(10 * var(--u)); }
  .cap__faqItem > summary {
    padding: calc(16 * var(--u)) calc(38 * var(--u)) calc(16 * var(--u)) calc(44 * var(--u));
    font-size: calc(13 * var(--u));
  }
  .cap__faqItem > summary::before {
    top: calc(15 * var(--u));
    left: calc(14 * var(--u));
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
    font-size: calc(11 * var(--u));
  }
  .cap__faqItem > summary::after {
    top: calc(21 * var(--u));
    right: calc(16 * var(--u));
    width: calc(10 * var(--u));
    height: calc(6 * var(--u));
  }
  .cap__faqItem__a {
    margin: 0 calc(14 * var(--u)) calc(14 * var(--u));
    padding: calc(14 * var(--u)) calc(16 * var(--u));
    font-size: calc(12 * var(--u));
  }

  /* CTA */
  .cap__cta { padding: calc(30 * var(--u)) calc(20 * var(--u)); }
  .cap__cta__ttl { font-size: calc(17 * var(--u)); }
  .cap__cta__desc { margin-bottom: calc(22 * var(--u)); font-size: calc(12 * var(--u)); }
  .cap__btn {
    min-width: 100%;
    min-height: calc(50 * var(--u));
    padding: 0 calc(20 * var(--u));
    font-size: calc(13 * var(--u));
  }
}

/* ============================================================
 * アンカーリンクの着地位置
 *   トップの事業カテゴリカードから /service#lifeline などで飛んでくる。
 *   ヘッダーが position:fixed のため、その高さぶん手前で止める。
 * ============================================================ */
.serviceSec__contents__block[id] {
  scroll-margin-top: 8vw; /* ヘッダー高さ（約121px @1920）＋余白 */
}

@media screen and (max-width: 767px) {
  .serviceSec__contents__block[id] {
    scroll-margin-top: 20vw; /* ヘッダー高さ（約50px @320）＋余白 */
  }
}