/* ════════════════════════════════════════════════════════════
   FineCMS basic-style-default２.css
   デモ・顧客提案に使用する基本デザインCSSのver2
   実際のWebサイトとして成立するクオリティで作成すること。

   【記述ルール】
   - スペーシングは .wrap（パーツ内）・.cont（ブロック内）に指定
   - .cont の max-width は統一。個別変更禁止
   - カラーは --col-* 変数を使用。ハードコード禁止
   - 個別クラスを使うセクションは「個別クラスなし/あり」を必ず注釈で明記
   - ベースとなるクラスと　カスタムクラスは別けて書く
   - @リストによってリストメニューに呼び出すクラスを設定できる
════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

body {
  font-size: 16px;
  line-height: 1.5;
  font-family:var(--font-a);
  color: var(--col-f);
  background: var(--col-w);
}


/* ════════════════════════════════════════════
   ① レイアウト基盤
════════════════════════════════════════════ */

/* ※ .cont／ブロック余白（padding）等の「基礎構造」は cms.css（構造層③）へ移管（2026-06-30）。
   id5 は原則 構造を持たない＝cms.css のデフォルトに任せる。
   特殊な余白にしたいときだけ、ここ（層④）で同セレクタを書けば後読みで cms.css に勝てる（basic 優先）。
   層の責務境界＝docs/style-design.md 参照。 */


/* ════════════════════════════════════════════
   ② 見出し・本文（h1〜h6）
════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 { font-weight: bold; }
h1,h2,h3{
  font-family:var(--font-b);
}

h1 { font-size: var(--fsize-b, 2.25rem);   line-height: 1.25; margin-top:2rem}
h2 { font-size: var(--fsize-c, 1.875rem);  line-height: 1.3;margin-top:2rem }
h3 { font-size: var(--fsize-d, 1.5rem);    line-height: 1.35; margin-top:1.5rem }
h4 { font-size: var(--fsize-e, 1.25rem);   line-height: 1.4; }
h5 { font-size: var(--fsize-f, 1.0625rem); line-height: 1.5; }
h6 { font-size: var(--fsize-g, 0.9375rem); line-height: 1.5; }


/* ════════════════════════════════════════════
   ③ リッチテキスト内の素のHTML装飾
   対象: テキストエディタが出力するクラスなしの自然HTML
   (.cms-rte の子孫セレクタで指定する)
════════════════════════════════════════════ */

/** リスト: 個別クラスなし → カスタムビュレット */
.cms-rte ul {
  list-style: none;
  padding-left: 0;
  margin: 0.75rem 0;
}
.cms-rte ul li {
  position: relative;
  padding-left: 1.3em;
  margin-bottom: 0.5em;
  line-height: 1.6;
}
.cms-rte ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--col-a, #0066cc);
  font-size: 0.85em;
  top: 0.15em;
}

/** 番号付きリスト */
.cms-rte ol {
  padding-left: 1.5em;
  margin: 0.75rem 0;
}
.cms-rte ol li {
  margin-bottom: 0.5em;
  line-height: 1.6;
}

/** リンク */
.cms-rte a {
  color: var(--col-a, #0066cc);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cms-rte a:hover {
  opacity: 0.75;
  text-decoration: none;
}

/**
 * span: テキストエディタでインライン装飾に使う
 * 個別クラスなし → 装飾なし（エディタのインラインスタイルが優先）
 * 個別クラスあり → .tx-tag-a: タグバッジ風（アウトライン・基本。旧名 .tag）
 *               → .tx-tag-b: タグバッジ風（塗りつぶし pill・派生）
 *               → .tx-tag-c: 塗り pill の小型・アクセント色（NEW/HOT 等の強調タグ向け）
 *               → .highlight: ハイライトマーカー
 *               → .tx-sym-a/-b/-c: 記号装飾（✓✗○△等を色付き太字で目立たせる。表のセル内での○×表に）
 * ※ 複数タグを並べるときは span の間にスペースを入れる（Tiptap の隣接 span 融合を防ぐ）。
 */
/* @list span-301 tx-tag-a タグ（枠・基本） [自身] */
.cms-rte span.tx-tag-a {
  display: inline-block;
  padding: 0.15em 0.75em;
  border: 1px solid var(--col-a, #0066cc);
  color: var(--col-a, #0066cc);
  border-radius: 2em;
  font-size: 0.8125rem;
  margin: 0.2em 0.25em 0.2em 0;
  letter-spacing: 0.03em;
}
/* @list span-302 tx-tag-b タグ（塗り） [自身] */
.cms-rte span.tx-tag-b {
  display: inline-block;
  padding: 0.15em 0.75em;
  background: var(--col-a, #0066cc);
  color: var(--col-w, #fff);
  border: 1px solid var(--col-a, #0066cc);
  border-radius: 2em;
  font-size: 0.8125rem;
  margin: 0.2em 0.25em 0.2em 0;
  letter-spacing: 0.03em;
}
/* @list span-303 highlight ハイライト [自身] */
.cms-rte span.highlight {
  background: var(--col-d, #cce0f5);
  padding: 0 0.3em;
  border-radius: 3px;
}
/* @list span-304 tx-tag-c タグ（塗り・小） [自身] */
.cms-rte span.tx-tag-c {
  display: inline-block;
  padding: 0.1em 0.6em;
  background: var(--col-c, #e65100);
  color: var(--col-w, #fff);
  border: 1px solid var(--col-c, #e65100);
  border-radius: 2em;
  font-size: 0.7em;
  font-weight: bold;
  margin: 0 0.35em 0 0;
  letter-spacing: 0.05em;
  vertical-align: 0.15em;
}
/* @list span-305 tx-sym-a 記号（成功色） [自身] */
.cms-rte span.tx-sym-a {
  color: var(--col-e, #2e7d32);
  font-weight: bold;
  font-size: 1.15em;
  line-height: 1;
}
/* @list span-306 tx-sym-b 記号（注意色） [自身] */
.cms-rte span.tx-sym-b {
  color: var(--col-g, #cd0000);
  font-weight: bold;
  font-size: 1.15em;
  line-height: 1;
}
/* @list span-307 tx-sym-c 記号（アクセント色） [自身] */
.cms-rte span.tx-sym-c {
  color: var(--col-c, #0066cc);
  font-weight: bold;
  font-size: 1.15em;
  line-height: 1;
}

/** 段落 */
.cms-rte p {
  margin: 0 0 0.85em;
  line-height: 1.75;
}
.cms-rte p:last-child { margin-bottom: 0; }

/** 水平線 */
.cms-rte hr {
  border: none;
  border-top: 1px solid var(--col-y, #f0f0f0);
  margin: 2rem 0;
}


/* ════════════════════════════════════════════
   ④ ボタン
   リッチテキスト内の <a> に個別クラスを付与して使用。
   個別クラスなし → .cms-rte a（③のリンクスタイル）
   個別クラスあり → .btn-a / .btn-b / .btn-text
   ※ .cms-rte a のカラーより優先させるため両方にセレクタを書く
════════════════════════════════════════════ */

/** btn 共通（.cms-rte a の text-decoration に勝つため両方にセレクタを書く） */
.btn-a,
.btn-b,
.cms-rte a.btn-a,
.cms-rte a.btn-b {
  display: inline-block;
  padding: 0.75em 2.5em;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: 3px;
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s;
  margin: 0.3em 0.5em 0.3em 0;
}

/* @list a-101 btn-a 塗りボタン（主要CTA） [自身] */
.btn-a,
.cms-rte a.btn-a {
  background: var(--col-a, #0066cc);
  color: var(--col-w, #fff);
  border: 2px solid var(--col-a, #0066cc);
}
.btn-a:hover,
.cms-rte a.btn-a:hover { opacity: 0.85; }

/* @list a-102 btn-b アウトラインボタン（サブCTA） [自身] */
.btn-b,
.cms-rte a.btn-b {
  background: var(--col-w, #fff);
  color: var(--col-a, #0066cc);
  border: 2px solid var(--col-a, #0066cc);
}
.btn-b:hover,
.cms-rte a.btn-b:hover {
  background: var(--col-a, #0066cc);
  color: var(--col-w, #fff);
}

/* @list a-103 btn-text テキストリンク（矢印付き） [自身] */
.btn-text {
  display: inline-block;
  color: var(--col-a, #0066cc);
  text-decoration: none;
  font-weight: 600;
  padding-right: 1.2em;
  position: relative;
}
.btn-text::after {
  content: '→';
  position: absolute;
  right: 0;
  transition: right 0.15s;
}
.btn-text:hover::after { right: -4px; }


/* ════════════════════════════════════════════
   ⑤ セクション見出しデザイン
   個別クラスなし → 通常の h2/h3
   個別クラスあり → .ttl-section: セクション大見出し（中央）
                → .ttl-sub:   サブ見出し（アクセントカラーの小文字）
                → .ttl-num: 「Feature 01」などの番号見出し
════════════════════════════════════════════ */

/** セクション大見出し（中央揃え・装飾あり） */
.cms-rte .ttl-section,
.ttl-section {
  text-align: center;
  font-size: var(--fsize-c, 1.875rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
.cms-rte .ttl-section::after,
.ttl-section::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  background: var(--col-a, #0066cc);
  margin: 0.6rem auto 0;
  border-radius: 2px;
}

/** サブラベル（アクセントカラーの小文字キャプション） */
.cms-rte .ttl-sub,
.ttl-sub {
  display: block;
  text-align: center;
  color: var(--col-a, #0066cc);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/** Feature番号見出し（「Feature 01」スタイル） */
.cms-rte .ttl-num,
.ttl-num {
  display: block;
  color: var(--col-a, #0066cc);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
}


/* ════════════════════════════════════════════
   ⑥ サイトヘッダー
   cms.css の absolute ロゴを flex フローに戻して
   ロゴ左・ナビ右のレイアウトに整理。
   ※ .cont の padding: 0 は ① の共通ルールで適用済み
════════════════════════════════════════════ */

.cms-block--site-header .cont {
  display: flex;
  align-items: center;
}
.cms-block--site-header .cms-part--logo {
  position: static;
  transform: none;
  top: auto;
  left: auto;
  flex-shrink: 0;
  padding: 0.75rem 1.5rem;
}
.cms-block--site-header .cms-part--menu {
  margin-left: auto;
  padding: 0;
}


/* ════════════════════════════════════════════
   ⑦ パーツ: hero_a（ヒーローバナー）
   個別クラスなし → 画像＋テキスト標準レイアウト（テキスト左寄せ）
   個別クラスあり → .hero-center: テキスト中央揃え
════════════════════════════════════════════ */

.cms-part--hero_a .wrap {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
}
.cms-part--hero_a .img1 {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cms-part--hero_a .img1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/** 画像を明るくする白オーバーレイ */
.cms-part--hero_a .img1::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
}
.cms-part--hero_a .txt1 {
  position: relative;
  z-index: 1;
  padding: 3rem 2rem;
  max-width: 640px;
  text-align: left;
}
.cms-part--hero_a .txt2 {
  position: relative;
  z-index: 1;
  padding: 0 2rem 3rem;
  max-width: 640px;
  text-align: left;
}

/** 個別クラスあり: hero-center → テキスト中央 */
.cms-part--hero_a.hero-center .wrap {
  justify-content: center;
}
.cms-part--hero_a.hero-center .txt1,
.cms-part--hero_a.hero-center .txt2 {
  text-align: center;
  max-width: 800px;
}


/* ════════════════════════════════════════════
   ⑧ パーツ: text_only（テキストのみ）
   個別クラスなし → 通常テキスト（左寄せ）
   個別クラスあり → .text-center: 中央揃え
                → .text-large: キャッチコピー用・大きめ
════════════════════════════════════════════ */

.cms-part--text_only .wrap {
  padding: 0.25rem 0;
}

/** 中央揃え */
.cms-part--text_only.text-center .wrap { text-align: center; }

/** キャッチコピー用（大きめ） */
.cms-part--text_only.text-large .wrap {
  font-size: 1.15em;
  line-height: 1.6;
}


/* ════════════════════════════════════════════
   ⑨ パーツ: image_only（画像のみ）
   個別クラスなし → 幅100%・アスペクト比維持
   個別クラスあり → .img-round: 角丸
                → .img-circle: 円形（プロフィール等）
                → .img-tint: ブランドカラーの薄いtintを画像上に重ねる
════════════════════════════════════════════ */

.cms-part--image_only .wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/** 角丸 */
.cms-part--image_only.img-round .wrap img {
  border-radius: 8px;
}

/** 円形 */
.cms-part--image_only.img-circle .wrap img {
  border-radius: 50%;
  aspect-ratio: 1;
  object-fit: cover;
}

/**
 * img-tint: 画像の上にブランドカラーのtintを重ねる
 * ※ bg_color はパーツの背景（画像の下）に適用されるため、
 *   画像の上に色を重ねたい場合はこのクラスを使う。
 */
.cms-part--image_only.img-tint .wrap {
  position: relative;
  overflow: hidden;
}
.cms-part--image_only.img-tint .wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--col-a, #4D7EC9);
  opacity: 0.12;
  pointer-events: none;
}


/* ════════════════════════════════════════════
   ⑨-2 複合レイアウトパーツ（画像 × テキスト）
   text_image / image_text / image_left_s,m,l /
   text_left_l,m,s / txt_img_txt / img_txt_img
   ※ 配置・比率・gap は cms.css（構造層）が担当。
     ここはデモ品質の装飾（画像の角丸・アスペクト・見出し余白）のみ。
     画像は .img1/.img2 のみ対象（richtext 本文内の画像は除外）。
════════════════════════════════════════════ */

/** 画像共通: 幅100%・角丸 */
.cms-part--text_image .img1 img,
.cms-part--image_text .img1 img,
.cms-part--image_left_s .img1 img,
.cms-part--image_left_m .img1 img,
.cms-part--image_left_l .img1 img,
.cms-part--text_left_l .img1 img,
.cms-part--text_left_m .img1 img,
.cms-part--text_left_s .img1 img,
.cms-part--txt_img_txt .img1 img,
.cms-part--img_txt_img .img1 img,
.cms-part--img_txt_img .img2 img {
  width: 100%;
  display: block;
  border-radius: 8px;
}





/** 見出しの余白（gap は cms.css 任せ。ここは行内の詰めのみ） */
.cms-part--text_image h3,
.cms-part--image_text h3,
.cms-part--image_left_s h3,
.cms-part--image_left_m h3,
.cms-part--image_left_l h3,
.cms-part--text_left_l h3,
.cms-part--text_left_m h3,
.cms-part--text_left_s h3,
.cms-part--txt_img_txt h3,
.cms-part--img_txt_img h3 {
  margin: 0 0 0.4rem;
  line-height: 1.4;
}

/** 本文の行間 */
.cms-part--text_image p,
.cms-part--image_text p,
.cms-part--image_left_s p,
.cms-part--image_left_m p,
.cms-part--image_left_l p,
.cms-part--text_left_l p,
.cms-part--text_left_m p,
.cms-part--text_left_s p,
.cms-part--txt_img_txt p,
.cms-part--img_txt_img p {
  margin: 0;
  line-height: 1.7;
}


/* ════════════════════════════════════════════
   ⑩ カード（.cms-block--card 内のパーツ）
   is_card が有効なブロック内のすべてのパーツに適用。
   ボーダー・シャドウは cms.css 側で定義済み。
   → ここでは .wrap の内側パディングのみ担当。
   個別クラスなし → 標準カードパディング
   個別クラスあり → .card-compact: パディング小
════════════════════════════════════════════ */

.cms-block--card .cms-part .wrap {
  padding: 1.75rem 1.5rem;
}

/** コンパクト */
.cms-block--card .cms-part.card-compact .wrap {
  padding: 1rem 1.25rem;
}


/* ════════════════════════════════════════════
   ⑪ フォーム（form-a / form-b / form-c）
   form-a: デフォルト（シンプル）
   form-b: アクセントカラー強調型
   form-c: ラベル左・入力右（テーブル型）
════════════════════════════════════════════ */

.cms-form { width: 100%; }

.cms-form-field { margin-bottom: 1.75rem; }

.cms-form-label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.375rem;
}

.cms-form-required {
  color: #c0392b;
  margin-left: 0.2em;
}

.cms-form-note {
  font-size: 0.8rem;
  color: var(--col-e, #888);
  margin: 0.25rem 0 0.5rem;
}

.cms-form-input,
.cms-form-textarea,
.cms-form-select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--col-e, #d0d0d0);
  background: var(--col-y, #f5f5f5);
  font-size: 1rem;
  outline: none;
  appearance: none;
  box-sizing: border-box;
}
.cms-form-input:focus,
.cms-form-textarea:focus,
.cms-form-select:focus {
  border-color: var(--col-a, #0066cc);
  background: var(--col-w, #fff);
}

.cms-form-textarea {
  resize: vertical;
  min-height: 9rem;
}

.cms-form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
  cursor: pointer;
}

.cms-form-radio,
.cms-form-checkbox {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9375rem;
  cursor: pointer;
}

.cms-form-field--radio,
.cms-form-field--checkboxes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
}
.cms-form-field--radio .cms-form-label,
.cms-form-field--checkboxes .cms-form-label {
  width: 100%;
  flex-shrink: 0;
  margin-bottom: 0.5rem;
}
@media (min-width: 640px) {
  .cms-form-radio,
  .cms-form-checkbox {
    display: inline-flex;
    align-items: center;
    margin-right: 1.5rem;
    margin-bottom: 0;
  }
}

.cms-form-html { margin-bottom: 1.5rem; }

.cms-form-submit {
  margin-top: 2.5rem;
  text-align: center;
}

.cms-form-submit-btn {
  padding: 0.75rem 3.5rem;
  background: var(--col-a, #333);
  color: var(--col-w, #fff);
  border: none;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.06em;
  border-radius: 3px;
  transition: opacity 0.2s;
}
.cms-form-submit-btn:hover { opacity: 0.85; }

/** form-b: アクセントカラー強調型 */
.cms-form.form-b .cms-form-label { font-weight: 600; }
.cms-form.form-b .cms-form-input,
.cms-form.form-b .cms-form-textarea,
.cms-form.form-b .cms-form-select {
  background: var(--col-w, #fff);
  border: 2px solid var(--col-a, #0066cc);
  border-radius: 4px;
}
.cms-form.form-b .cms-form-input:focus,
.cms-form.form-b .cms-form-textarea:focus,
.cms-form.form-b .cms-form-select:focus {
  outline: 3px solid var(--col-d, #cce0f5);
  outline-offset: 0;
}
.cms-form.form-b .cms-form-submit-btn {
  background: var(--col-a, #0066cc);
  border-radius: 4px;
}
.cms-form.form-b .cms-form-submit-btn:hover {
  background: var(--col-a, #0066cc);
  opacity: 0.85;
}

/** form-c: ラベル左・入力右（テーブル型） */
@media (min-width: 640px) {
  .cms-form.form-c .cms-form-field {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0 2rem;
    align-items: start;
    margin-bottom: 1.25rem;
  }
  .cms-form.form-c .cms-form-label {
    padding-top: 0.6rem;
    margin-bottom: 0;
  }
  .cms-form.form-c .cms-form-field--radio,
  .cms-form.form-c .cms-form-field--checkboxes {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0 2rem;
    flex-wrap: unset;
    align-items: unset;
  }
  .cms-form.form-c .cms-form-field--radio .cms-form-label,
  .cms-form.form-c .cms-form-field--checkboxes .cms-form-label {
    grid-column: 1;
    grid-row: 1 / -1;
    width: auto;
    flex-shrink: unset;
    padding-top: 0.3rem;
    margin-bottom: 0;
  }
  .cms-form.form-c .cms-form-radio,
  .cms-form.form-c .cms-form-checkbox { grid-column: 2; }
}


/* ════════════════════════════════════════════
   ⑫ レスポンシブ
════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* ブロック上下余白(SP)は cms.css へ移管（2026-06-30・層の責務境界） */

  .cms-part--hero_a .wrap {
    min-height: 320px;
  }
  .cms-part--hero_a .txt1 {
    padding: 2rem 1rem;
  }
  .cms-part--hero_a .txt2 {
    padding: 0 1rem 2rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   カスタムクラス（ブロック/パーツの css_class に対応）
   ※ 汎用スタイルと分けてここに書く
   ═══════════════════════════════════════════════════════════ */

/* ─── .cs-hero（ヒーローセクション） ─────────────────────── */
.cs-hero > .cont {
  display: flex;
  align-items: center;
  gap: 4rem;
  min-height: 520px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 4rem 3rem;
}
.cs-hero .cms-part--text_only .wrap{
  max-width:100%;
}
.cs-hero .cs-hero__txt {
  flex: 1 1 50%;
  min-width: 0;
}
.cs-hero .cs-hero__img {
  flex: 0 0 46%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-hero .cs-hero__img img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.15));
}

@media (max-width: 960px) {
  .cs-hero > .cont {
    gap: 2rem;
    padding: 3rem 2rem;
  }
}
@media (max-width: 767px) {
  .cs-hero > .cont {
    flex-direction: column;
    min-height: auto;
    padding: 2.5rem 1.5rem;
    gap: 2rem;
  }
  .cs-hero .cs-hero__txt,
  .cs-hero .cs-hero__img {
    flex: none;
    width: 100%;
  }
}

/* ════════════════════════════════════════════
   ⑬ リストスタイル（配下リスト整形プリセット list-grid/list-check/list-line）
   ブロックに付けて内部の ul の見せ方を切り替える。
   ③のカスタムビュレット（▸）を上書きする。
   - list-check : ✓付き2カラムのチェックリスト（課題提起向け）
   - list-grid  : 3カラムのカードグリッド
   - list-line : シンプル中央・区切り線
════════════════════════════════════════════ */

/* ─── list-check：✓付き2カラムチェックリスト ─────────── */
.list-check .cms-rte ul {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.25rem;
}
.list-check .cms-rte ul li {
  position: relative;
  margin: 0;
  padding: 0.9rem 1rem 0.9rem 2.6rem;
  background: var(--col-w, #fff);
  border: 1px solid var(--col-d, #cce0f5);
  border-radius: 6px;
  line-height: 1.5;
}
.list-check .cms-rte ul li::before {
  content: '✓';
  position: absolute;
  left: 1rem;
  top: 0.9rem;
  color: var(--col-a, #0066cc);
  font-weight: 700;
  font-size: 1em;
}

/* ─── list-grid：3カラムカードグリッド ──────────────── */
.list-grid .cms-rte ul {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.list-grid .cms-rte ul li {
  margin: 0;
  padding: 1.5rem;
  background: var(--col-w, #fff);
  border: 1px solid var(--col-d, #cce0f5);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
  line-height: 1.6;
}
.list-grid .cms-rte ul li::before {
  content: none;
}

/* ─── list-line：シンプル中央・区切り線 ─────────────── */
.list-line .cms-rte ul {
  list-style: none;
  padding: 0;
  margin: 1.5rem auto;
  max-width: 640px;
}
.list-line .cms-rte ul li {
  position: relative;
  margin: 0;
  padding: 0.7rem 0 0.7rem 1.6rem;
  border-bottom: 1px solid var(--col-y, #f0f0f0);
  line-height: 1.6;
}
.list-line .cms-rte ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--col-a, #0066cc);
}

/* SP：グリッド系は1カラムに */
@media (max-width: 767px) {
  .list-check .cms-rte ul,
  .list-grid .cms-rte ul {
    grid-template-columns: 1fr;
  }
}


/* ════════════════════════════════════════════
   ⑭ Feature ラベル（エディタ内クラス tx-feature-*）
   <p class="tx-feature-xxx">Feature 01</p> の見出し上ラベルを装飾する4型。
   ※ tx- = テキストエディタ範囲内に付けるクラスの接頭辞。
   ※ 文字サイズはエディタ側で調整する方針（クラスは「型」だけ担当）。
   - tx-feature-a : 小さめ大文字＋短い下線（上品・万能）
   - tx-feature-b     : 大きめ太字のエディトリアル型（サイズはエディタで微調整）
   - tx-feature-c      : アクセント背景・白抜き・角丸ピル
   - tx-feature-d : ラベルから横線が右へ伸びる
════════════════════════════════════════════ */

/* ─── underline：ミニマル下線型（小さめ大文字＋短いバー）───── */
/* @list p-201 tx-feature-a Feature（下線・基本） [自身] */
.cms-rte .tx-feature-a {
  display: inline-block;
  font-size: var(--fsize-h, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--col-a, #0066cc);
  margin: 0 0 0.75rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--col-a, #0066cc);
}

/* ─── large：大きめ太字のエディトリアル型 ──────────────────
   font-size はエディタ側で調整する前提。ここでは型（太字・行間・色）のみ既定。
   フォールバックの 1.75rem は未指定時の保険。 */
/* @list p-202 tx-feature-b Feature（大） [自身] */
.cms-rte .tx-feature-b {
  display: block;
  font-family: var(--font-b, sans-serif);
  font-size: var(--fsize-d, 1.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--col-a, #0066cc);
  margin: 0 0 0.5rem;
}

/* ─── pill 型（アクセント背景・白抜き・角丸）─────────────── */
/* @list p-203 tx-feature-c Feature（塗りpill） [自身] */
.cms-rte .tx-feature-c {
  display: inline-block;
  font-size: var(--fsize-h, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--col-w, #fff);
  background: var(--col-a, #0066cc);
  padding: 0.35rem 1.1rem;
  border-radius: 999px;
  margin: 0 0 0.9rem;
}

/* ─── rightline：区切り線型（ラベルから横線が右へ伸びる）───── */
/* @list p-204 tx-feature-d Feature（右線） [自身] */
.cms-rte .tx-feature-d {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: var(--fsize-h, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--col-a, #0066cc);
  margin: 0 0 0.9rem;
}
.cms-rte .tx-feature-d::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--col-d, #cce0f5);
}

/* ════════════════════════════════════════════
   ⑮ トップページ メリハリ強化（2026-06-21）
   背景リズムは bg_var（ブロック設定）で交互に付与。ここでは
   セクションの器・カード・帯・フッターの装飾を定義する。
   色は --col-* のみ／hero(cs-hero*) には手を入れない。
════════════════════════════════════════════ */

/* ─── 全幅セクションの器を中央寄せに戻す ─────────────────
   full ブロックは①で .cont が max-width:none/padding:0 になる。
   中身を持つ全幅セクション（problems/footer-cta）はここで器を戻す。 */
.cs-problems > .cont,
.cs-footer-cta > .cont {
  max-width: var(--cont-width, 1100px);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) var(--cont-side, 5%);
}

/* ─── カードグリッド（card-cells：Services/Cases/Flow の column）──
   グリッドの各セルを白カード化（枠・角丸・影）。中身余白は .wrap。
   グレー帯（bg_var=--col-y）の上で白カードが浮き上がりメリハリが出る。 */
.card-cells .cms-column-grid { gap: 1.5rem; }
.card-cells .cms-column-grid > .cms-part {
  background: var(--col-w, #fff);
  border: 1px solid var(--col-y, #eee);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.card-cells .cms-column-grid > .cms-part:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
}
.card-cells .cms-column-grid > .cms-part > .wrap { padding: 1.75rem 1.5rem; }

/* ─── Feature 群（card-img：交互背景＋画像を立てる）────────
   5連続の単調さを、画像の影・角丸と十分な余白で解消。
   白／薄グレーの交互背景は bg_var で付ける（偶数ブロック=--col-y）。 */
.card-img > .cont { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.card-img .cms-part--image_only .wrap {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
  margin-right: 5px; /* 影が右のテキストに近づきすぎないよう余白 */
}
.card-img .cms-rte .tx-feature-b { margin-bottom: 0.8rem; }

/* ─── 中央CTA帯（cs-mid-cta：濃い青帯・白文字・白ボタン）──────
   bg_var=--col-a（青）／text_color=--col-w をブロック設定で付与。
   ボタンは青地に映えるよう白に反転。 */
.cs-mid-cta > .cont { text-align: center; }
.cs-mid-cta .cms-rte,
.cs-mid-cta .cms-rte h2,
.cs-mid-cta .cms-rte h3,
.cs-mid-cta .cms-rte p { color: var(--col-w, #fff); }
.cs-mid-cta a.btn-a,
.cs-mid-cta .cms-rte a.btn-a {
  background: var(--col-w, #fff);
  color: var(--col-a, #0066cc);
  border-color: var(--col-w, #fff);
}
.cs-mid-cta a.btn-b,
.cs-mid-cta .cms-rte a.btn-b {
  background: transparent;
  color: var(--col-w, #fff);
  border-color: var(--col-w, #fff);
}
.cs-mid-cta .cms-rte a.btn-b:hover {
  background: var(--col-w, #fff);
  color: var(--col-a, #0066cc);
}


/* ─── FAQ（card-list：薄グレー帯・各項目を白カード枠で）──────────
   bg_var=--col-y。リスト項目を白カードにして可読性を上げる。 */
.card-list .cms-rte ul { display: block; margin: 1.25rem 0; }
.card-list .cms-rte ul li {
  background: var(--col-w, #fff);
  border: 1px solid var(--col-y, #eee);
  border-radius: 8px;
  padding: 1rem 1.25rem 1rem 2.4rem;
  margin-bottom: 0.6rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

/* ─── フッターCTA（cs-footer-cta：濃色で締める・白文字）──────
   bg_var=--col-z（黒）／text_color=--col-w。最後の行動喚起を強く。
   ボタンはアクセント青で目立たせる。 */
.cs-footer-cta > .cont { text-align: center; }
.cs-footer-cta .cms-rte,
.cs-footer-cta .cms-rte h2,
.cs-footer-cta .cms-rte h3,
.cs-footer-cta .cms-rte p { color: var(--col-w, #fff); }
.cs-footer-cta a.btn-a,
.cs-footer-cta .cms-rte a.btn-a {
  background: var(--col-a, #0066cc);
  color: var(--col-w, #fff);
  border-color: var(--col-a, #0066cc);
}

/* ─── サイトフッター（cs-footer：ロゴ＋会社情報＋問い合わせ）──
   site-footer ブロックに cs-footer を付与。濃色背景（bg_var=--col-z）に
   ロゴ・会社情報・ボタンを中央整列。 */
.cs-footer .cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: var(--cont-width, 1100px);
  margin: 0 auto;
  padding: 3.5rem var(--cont-side, 5%);
  text-align: center;
}
.cs-footer .cms-part--logo img { height: 48px; width: auto; }
.cs-footer .cms-logo__text { color: var(--col-w, #fff); font-size: 1.25rem; }
.cs-footer .cms-rte,
.cs-footer .cms-rte p { color: var(--col-w, #fff); line-height: 1.9; }
.cs-footer .cms-rte a.btn-a { margin-top: 0.4rem; }

/* ─── SP 調整 ───────────────────────────── */
@media (max-width: 767px) {
  .card-cells .cms-column-grid { gap: 1rem; }
  .card-img > .cont { padding-top: 3rem; padding-bottom: 3rem; }
}








/* ─── cs-footer-a：ロゴ＋会社情報を左／メニューを右に配置（2026-06-21）──
   site-footer に cs-footer と併用。PC（≥768）は左右2カラム：
   左=ロゴ＋会社情報＋ボタンを縦積み（左寄せ）、右=メニューをサイトマップ的に並べる。
   高さは内容で決まる（float で左右とも通常フロー→高い方に合わせて伸びる＝切れない）。
   SP は cs-footer の中央積みに戻る。色は --col-* のみ。 */

/* メニューのリンクは黒背景で見えるよう白（サブ含む） */
.cs-footer-a .cms-menu a,
.cs-footer-a .cms-menu ul.cms-menu__sub > li > a,
.cs-footer-a .cms-menu ul.cms-menu__subsub > li > a {
  color: var(--col-w, #fff);
  opacity: 1;
  text-decoration: none;
}
.cs-footer-a .cms-menu a:hover { opacity: .7; }

@media (min-width: 768px) {
  /* cs-footer 本体の flex 中央積みを解除して float レイアウトに */
  .cs-footer-a > .cont {
    display: block;
    max-width: var(--cont-width, 1100px);
    margin: 0 auto;
    padding: 3.5rem var(--cont-side, 5%);
    text-align: left;
  }
  .cs-footer-a > .cont::after { content: ''; display: block; clear: both; }

  /* 左50%：ロゴ・会社情報・ボタンを縦積み・左寄せ（cms.css の中央寄せを上書き） */
  .cms-block--site-footer.cs-footer-a .cms-part--logo,
  .cms-block--site-footer.cs-footer-a .cms-part--text_only {
    float: left;
    clear: left;
    width: 50%;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
  }
  .cs-footer-a .cms-logo--with-text { justify-content: flex-start; }

  /* 右側：メニューを48%幅でサイトマップ的に。トップ項目＋サブを1ブロックとして
     CSS段組み（columns）で列に流す＝項目数が変わっても整列・高さ固定なし。 */
  .cs-footer-a .cms-part--menu { float: right; width: 48%; margin: 0; }
  .cs-footer-a .cms-menu > ul {
    display: block;
    column-width: 11rem;
    column-gap: 2rem;
  }
  .cs-footer-a .cms-menu > ul > li {
    display: block;
    break-inside: avoid;        /* 親＋サブを途中で分割しない */
    margin: 0 0 1.1rem;
  }
  .cs-footer-a .cms-menu > ul > li > a {
    display: inline-block;
    font-weight: 700;
    margin-bottom: .35rem;
  }
  /* サブメニューは親の下に縦リストで通常フロー展開 */
  .cs-footer-a .cms-menu ul.cms-menu__sub,
  .cs-footer-a .cms-menu ul.cms-menu__subsub {
    position: static;
    display: block;
    background: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    min-width: 0;
  }
  .cs-footer-a .cms-menu ul.cms-menu__sub > li,
  .cs-footer-a .cms-menu ul.cms-menu__subsub > li { margin: 0 0 .15rem; }
  .cs-footer-a .cms-menu ul.cms-menu__sub > li > a {
    font-weight: 400;
    font-size: .9em;
    opacity: .85;
  }
}

/*-----------------------------
つねやん追加
-----------------------------*/
/* ─── .cs-hero（ヒーローセクション）type2 :height100vh right-float-img ─────────────────────── */
@media (min-width: 768px) {
    .cms-block.cms-block--full.cs-hero.cs-hero--type2 {
        height: calc(100vh - 70px);
        max-height: 1000px;
        min-height: 500px;
        position: relative; z-index: 0;
    }
    .cms-block.cms-block--full.cs-hero.cs-hero--type2 .cont{
      margin: 0 8vw;
      max-width: 1600px;
      height:100%;
    }
    .cs-hero.cs-hero--type2 .cs-hero__img {
        position: absolute;
        top: 0;
        right: -7vw;
        width: 60%;
        height: 100%;
        z-index: 1;
    }
    .cs-hero.cs-hero--type2 .cs-hero__img .img1 {
        position: relative;
        z-index: auto;
        margin-top: 15%;
    }
    .cs-hero.cs-hero--type2 .cs-hero__txt,
    .cs-hero.cs-hero--type2 .cms-part--text_only  {
        position: relative; z-index: 2;
    }
    .cs-hero.cs-hero--type2 .cms-part--text_only{
        max-width: 100%
    }
    }
    @media (max-width: 767px) {
    .cms-block.cs-hero.cs-hero--type2 {
      text-align: center;
    }
    }
    /*  cs-videoアルファ*/
    .cs-video-a30 video{
    opacity: 0.3;
    }
    .cs-video-a10 video{
      opacity: 0.1;
      }

/* ════════════════════════════════════════════════════════════
   ユーティリティクラス（docs/utility-classes.md 準拠）
   配信＝スタイル層（id=1 / id=5）。@list でcss_class選択肢＆AIカタログに乗せる。
   ・色/影は --col-* 変数のみ（ハードコード禁止・フォールバック値のみ可）
   ・imgfit-* の実体は cms.css（構造層）。ここは @list 登録のみ（重複定義しない）
   ════════════════════════════════════════════════════════════ */

/* ─── A. 縦揃え：column ブロックの配下アイテム（grid align-items）─── */
/* @list item-701 align-c 縦中央に揃える（カラム） [配下パーツ] */
/* @list item-702 align-s 縦 上に揃える（カラム） [配下パーツ] */
/* @list item-703 align-e 縦 下に揃える（カラム） [配下パーツ] */
/* @list item-704 fx-stretch 縦いっぱいに伸ばす（カラム） [配下パーツ] */
.cms-block.align-c    .cms-column-grid { align-items: center; }
.cms-block.align-s    .cms-column-grid { align-items: start; }
.cms-block.align-e    .cms-column-grid { align-items: end; }
.cms-block.fx-stretch .cms-column-grid { align-items: stretch; }

/* ─── B. 影：block / part 自身 ─── */
/* @list both-601 shadow-a 影（弱） [自身] */
/* @list both-602 shadow-b 影（強） [自身] */
.cms-block.shadow-a, .cms-part.shadow-a { box-shadow: 0 2px 8px var(--col-shadow, rgba(0,0,0,.08)); }
.cms-block.shadow-b, .cms-part.shadow-b { box-shadow: 0 8px 24px var(--col-shadow, rgba(0,0,0,.20)); }

/* ─── C. 画像表示位置：imgfit と併用（cover 時に見せる位置）─── */
/* 対象はパーツの画像フィールド（.imgN）。richtext 内画像は対象外 */
/* @list item-721 img-lt 画像位置：左上 [配下画像] */
/* @list item-722 img-ct 画像位置：中央上 [配下画像] */
/* @list item-723 img-rt 画像位置：右上 [配下画像] */
/* @list item-724 img-lc 画像位置：左中央 [配下画像] */
/* @list item-725 img-cc 画像位置：中央 [配下画像] */
/* @list item-726 img-rc 画像位置：右中央 [配下画像] */
/* @list item-727 img-lb 画像位置：左下 [配下画像] */
/* @list item-728 img-cb 画像位置：中央下 [配下画像] */
/* @list item-729 img-rb 画像位置：右下 [配下画像] */
.cms-part.img-lt .wrap > [class^="img"] > img { object-position: left top; }
.cms-part.img-ct .wrap > [class^="img"] > img { object-position: center top; }
.cms-part.img-rt .wrap > [class^="img"] > img { object-position: right top; }
.cms-part.img-lc .wrap > [class^="img"] > img { object-position: left center; }
.cms-part.img-cc .wrap > [class^="img"] > img { object-position: center center; }
.cms-part.img-rc .wrap > [class^="img"] > img { object-position: right center; }
.cms-part.img-lb .wrap > [class^="img"] > img { object-position: left bottom; }
.cms-part.img-cb .wrap > [class^="img"] > img { object-position: center bottom; }
.cms-part.img-rb .wrap > [class^="img"] > img { object-position: right bottom; }

/* ─── D. カラム段差：column ブロック（右/左に行くほど下がる）─── */
/* @list block-401 stair-r 段差：右に行くほど下げる [配下パーツ] */
/* @list block-402 stair-l 段差：左に行くほど下げる [配下パーツ] */
.cms-block.stair-r .cms-column-grid > .cms-part:nth-child(2) { margin-top: 1.5rem; }
.cms-block.stair-r .cms-column-grid > .cms-part:nth-child(3) { margin-top: 3rem; }
.cms-block.stair-r .cms-column-grid > .cms-part:nth-child(4) { margin-top: 4.5rem; }
.cms-block.stair-r .cms-column-grid > .cms-part:nth-child(5) { margin-top: 6rem; }
.cms-block.stair-l .cms-column-grid > .cms-part:nth-last-child(2) { margin-top: 1.5rem; }
.cms-block.stair-l .cms-column-grid > .cms-part:nth-last-child(3) { margin-top: 3rem; }
.cms-block.stair-l .cms-column-grid > .cms-part:nth-last-child(4) { margin-top: 4.5rem; }
.cms-block.stair-l .cms-column-grid > .cms-part:nth-last-child(5) { margin-top: 6rem; }
@media (max-width: 600px) {
  .cms-block.stair-r .cms-column-grid > .cms-part,
  .cms-block.stair-l .cms-column-grid > .cms-part { margin-top: 0; }
}

/* ─── E. スクロール：高さ制限＋縦スクロール（block / part 自身）─── */
/* @list both-611 scl-200 高さ制限200pxでスクロール [自身] */
/* @list both-612 scl-300 高さ制限300pxでスクロール [自身] */
/* @list both-613 scl-400 高さ制限400pxでスクロール [自身] */
/* @list both-614 scl-500 高さ制限500pxでスクロール [自身] */
/* @list both-615 scl-a スクロールバー色：アクセント [自身] */
/* @list both-616 scl-c スクロールバー色：サブ [自身] */
.cms-block.scl-200, .cms-part.scl-200 { max-height: 200px; overflow-y: auto; }
.cms-block.scl-300, .cms-part.scl-300 { max-height: 300px; overflow-y: auto; }
.cms-block.scl-400, .cms-part.scl-400 { max-height: 400px; overflow-y: auto; }
.cms-block.scl-500, .cms-part.scl-500 { max-height: 500px; overflow-y: auto; }
.scl-a { scrollbar-color: var(--col-a) transparent; }
.scl-c { scrollbar-color: var(--col-b) transparent; }

/* ─── F. スマホ逆順：column ブロックの並びをSPで逆に ─── */
/* @list item-731 sp-reverse スマホで配下の並びを逆順 [配下パーツ] */
/* @list item-732 zoom 画像をクリックで拡大（その場ズーム） [配下画像] */
/* @list item-733 lightbox 配下画像をライトボックス表示（ギャラリー送り） [配下画像] */
@media (max-width: 600px) {
  .cms-block.sp-reverse .cms-column-grid { display: flex; flex-direction: column-reverse; }
}

/* ─── G. css_class ユーティリティ ─── */
/* @list part-501 w-fit 幅をコンテンツに合わせる [自身] */
/* @list part-502 flow-r 右向きフロー矢印を付ける（SPは下向き） [自身] */
/* @list table-801 td-nowrap 表1列目を折り返さない [自身] */
/* @list table-802 table-stack スマホで表を縦並びにする [自身] */
.cms-part.w-fit { width: fit-content; }
.cms-part.w-fit .wrap { width: fit-content; }

/* flow-r：パーツの「間」に右向き矢印（最後のパーツには出さない）。
   パーツに付ける＝そのパーツの右／ブロックに付ける＝配下パーツ全部（最後以外）。SPは下向き。 */
.cms-part.flow-r,
.flow-r .cms-part { position: relative; }
.cms-part.flow-r:not(:last-child)::after,
.flow-r .cms-part:not(:last-child)::after {
  content: ''; position: absolute; top: 50%; right: -1.2rem;
  width: 1.5rem; height: 1.5rem;
  border-top: 4px solid var(--col-a); border-right: 4px solid var(--col-a);
  transform: translateY(-50%) rotate(45deg);
  z-index: 2;
}
/* PCはパーツ幅を少し縮めて右に矢印スペースを作る */
.cms-part.flow-r:not(:last-child),
.flow-r .cms-part:not(:last-child) { width: calc(100% - 1em); }
/* カード化（card-cells）は overflow:hidden で矢印を切るので、flow-r 配下だけ解放 */
.card-cells .cms-column-grid > .cms-part.flow-r,
.flow-r.card-cells .cms-column-grid > .cms-part { overflow: visible; }
@media (max-width: 600px) {
  /* SPは縦並び＝幅を戻して下に矢印スペース（margin） */
  .cms-part.flow-r:not(:last-child),
  .flow-r .cms-part:not(:last-child) { width: auto; margin-bottom: 2rem; }
  .cms-part.flow-r:not(:last-child)::after,
  .flow-r .cms-part:not(:last-child)::after {
    top: auto; bottom: -1.2rem; right: 50%; transform: translateX(50%) rotate(135deg);
  }
}

.cms-part.td-nowrap table td:first-child,
.cms-part.td-nowrap table th:first-child { white-space: nowrap; }

@media (max-width: 600px) {
  .cms-part.table-stack table,
  .cms-part.table-stack tbody,
  .cms-part.table-stack tr,
  .cms-part.table-stack td,
  .cms-part.table-stack th { display: block; width: 100%; }
  .cms-part.table-stack thead { display: none; }
}

/* table-compare：料金/機能の比較表を「見せる表」にする（パーツに付ける）。
   前提＝1行目が見出し行（th）・2列目がイチオシ列（自社/推しプラン）・比較列は最大3つ（2〜4列目）。
   見出し行=列ごとの色チップ（2列目--col-h/3列目--col-a/4列目--col-b）・行しま模様・
   2列目は薄い黄でトーン付け。tx-sym-a/-b は丸バッジ化（列の色に自動追従・✗は薄グレー）。
   ※ 見出し行を外す/5列以上にしても「壊れない」設計＝色チップが付かず素の縞表になるだけ
     （5列目以降の見出しは色なしの素チップ＝色の付け間違いに見えないようにしてある）。 */
/* @list table-810 table-compare 比較表（しま模様・2列目イチオシ強調） [自身] */
.cms-part.table-compare table {
  border-collapse: separate;
  border-spacing: 6px 0;
}
.cms-part.table-compare table th,
.cms-part.table-compare table td {
  border: none;
  padding: 0.7rem 0.9rem;
  vertical-align: middle;
}
/* 見出し行＝色チップ */
.cms-part.table-compare table th {
  background: transparent;
  text-align: center;
}
.cms-part.table-compare table th:nth-child(2),
.cms-part.table-compare table th:nth-child(3),
.cms-part.table-compare table th:nth-child(4) {
  color: var(--col-w, #fff);
  border-radius: 8px 8px 0 0;
  padding: 0.55rem 0.9rem;
  letter-spacing: 0.05em;
}
.cms-part.table-compare table th:nth-child(3) { background: var(--col-a, #4D7EC9); }
.cms-part.table-compare table th:nth-child(4) { background: var(--col-b, #1B3B72); }
/* イチオシ列（2列目）のチップは頭をひとつ上に伸ばす（::before の帽子・レイアウト不変） */
.cms-part.table-compare table th:nth-child(2) {
  background: var(--col-h, #F2B33D);
  position: relative;
  border-radius: 0;
}
.cms-part.table-compare table th:nth-child(2)::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 0.5rem;
  background: var(--col-h, #F2B33D);
  border-radius: 8px 8px 0 0;
}
/* 行しま模様（グリッド線は消してしまで区切る） */
.cms-part.table-compare table tbody tr:nth-child(even) td { background: var(--col-y, #f4f4f4); }
/* イチオシ列（2列目）＝薄い黄でトーン付け（しまより優先） */
.cms-part.table-compare table td:nth-child(2) {
  background: color-mix(in srgb, var(--col-h, #F2B33D) 14%, transparent);
  font-weight: bold;
}
/* 値セル（2列目以降）は中央寄せ・1列目=項目名 */
.cms-part.table-compare table td:nth-child(n+2) { text-align: center; }
.cms-part.table-compare table td:first-child { color: var(--col-f, #333); }
/* ✓＝列の色の丸バッジ（白抜き）／✗・記号系＝薄グレーで控えめに */
.cms-part.table-compare table span.tx-sym-a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  color: var(--col-w, #fff);
  font-size: 1em;
  line-height: 1;
}
.cms-part.table-compare table td:nth-child(2) span.tx-sym-a { background: var(--col-h, #F2B33D); }
.cms-part.table-compare table td:nth-child(3) span.tx-sym-a { background: var(--col-a, #4D7EC9); }
.cms-part.table-compare table td:nth-child(4) span.tx-sym-a { background: var(--col-b, #1B3B72); }
.cms-part.table-compare table span.tx-sym-b {
  color: var(--col-z, #333);
  opacity: 0.3;
}

/* ─── anim-*（スクロール出現アニメ・実体は cms.css + cms.js・ここは @list 登録のみ）─── */
/* @list both-630 anim-u 出現アニメ（下から上へ） [自身] */
/* @list both-631 anim-d 出現アニメ（上から下へ） [自身] */
/* @list both-632 anim-l 出現アニメ（右から左へ） [自身] */
/* @list both-633 anim-r 出現アニメ（左から右へ） [自身] */
/* @list both-634 anim-f 出現アニメ（フェードのみ） [自身] */
/* @list block-420 anim-stagger 出現アニメ（配下パーツが順番に） [配下パーツ] */

/* ─── imgfit-*（実体は cms.css・ここは @list 登録のみ）─── */
/* @list item-741 imgfit-46 画像比率4:6（縦長） [配下画像] */
/* @list item-742 imgfit-45 画像比率4:5（縦長） [配下画像] */
/* @list item-743 imgfit-44 画像比率1:1（正方形） [配下画像] */
/* @list item-744 imgfit-43 画像比率4:3（横長） [配下画像] */
/* @list item-745 imgfit-42 画像比率2:1（横長ワイド） [配下画像] */
/* @list item-746 imgfit-53 画像比率5:3（横長） [配下画像] */
/* @list item-747 imgfit-52 画像比率5:2（横長ワイド） [配下画像] */


/* ═══════════ @list 台帳（cs-系セクション枠＋カード/リストプリセット）═══════════ */
/* @list sec-901 cs-hero ヒーロー（2カラム土台） [自身] */
/* @list sec-902 cs-hero--type2 ヒーロー（フルスクリーン・画像右背面） [自身] */
/* @list sec-910 cs-problems お悩みセクション（全幅・器を中央幅に戻す） [自身] */
/* @list sec-920 cs-mid-cta 中央CTA帯（中央寄せ） [自身] */
/* @list sec-921 cs-footer-cta フッター上CTA帯（中央・白文字） [自身] */
/* @list sec-930 cs-footer フッター本体 [自身] */
/* @list sec-931 cs-footer-a フッター（float2カラム版） [自身] */
/* @list item-760 card-cells 配下グリッドのセルをカード化 [配下パーツ] */
/* @list item-761 card-img 配下画像を角丸＋影のカードに [配下画像] */
/* @list item-762 card-list 配下リストの各項目をカード枠に [配下テキスト] */
/* @list item-770 list-grid 箇条書き→3カラムカード [配下テキスト] */
/* @list item-771 list-check 箇条書き→✓グリッド [配下テキスト] */
/* @list item-772 list-line 箇条書き→下線区切り [配下テキスト] */


/* ═══════════ AIコーディング: カードグリッドの仕上げ（deco/空白/カード調整）═══════════ */
/* @list item-780 deco-cell 装飾セル＝カード枠を外して画像だけ見せる [自身] */
/* @list item-781 blank-cell 空白セル＝消す（隣を wide-2 で広げる） [自身] */
/* @list item-782 wide-2 セルを2列ぶんに広げる [自身] */
.card-cells .cms-column-grid > .cms-part.deco-cell {
  background: none; border: none; box-shadow: none; overflow: visible;
}
.card-cells .cms-column-grid > .cms-part.deco-cell:hover { transform: none; box-shadow: none; }
.card-cells .cms-column-grid > .cms-part.blank-cell { display: none; }
.card-cells .cms-column-grid > .cms-part.wide-2 { grid-column: span 2; }
/* カードを参考っぽく：角丸大きめ・影ふんわり */
.card-cells .cms-column-grid > .cms-part { border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }


/* ═══════════ AIコーディング test-ai1 ②CSS：参考に寄せる（hero/gap/もっと見る/banner）═══════════ */
/* ① ヒーロー：高さUP＋左グラデで写真を活かす */
.cms-block--full .cms-part--hero_a .wrap { min-height: 540px; }
.cms-block--full .cms-part--hero_a .img1::after { background: linear-gradient(100deg, rgba(0,0,0,.30), rgba(0,0,0,0) 55%); }
/* ② 4カラム：gap詰め＋装飾セル(deco-cell)の画像を隣カードと同じ高さに揃える */
.card-cells .cms-column-grid { gap: 1rem; }
.card-cells .cms-column-grid > .cms-part.deco-cell { display: flex; }
.card-cells .cms-column-grid > .cms-part.deco-cell > .wrap { flex: 1; padding: 0; display: flex; }
.card-cells .cms-column-grid > .cms-part.deco-cell img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
/* @list block-410 btn-block ボタンだけのブロックの上下余白を詰める [自身] */
/* ③ もっと見る：ボタンだけのブロックの上下余白を詰める（浮き解消）*/
.cms-block.btn-block > .cont { padding-top: 1.5rem; padding-bottom: 1.5rem; }
/* ④ バナー：背景画像パーツのテキストに余白（端と文字がくっつくのを解消）*/
.card-img .cms-part--text_only { padding: 1.5rem 1.75rem; border-radius: 12px; }

/* @list item-783 flush-cells セルの余白0＝画像をカード枠いっぱいに（凸凹解消） [配下パーツ] */
/* セルの余白を0＝画像を枠いっぱいに揃える。テキストは画像下に余白を残す */
.flush-cells .cms-column-grid > .cms-part > .wrap { padding: 0; }
.flush-cells .cms-column-grid > .cms-part .cms-rte { padding: 0.85rem 1rem 1.1rem; }

/* @list part-510 hero-left ヒーローのテキストを左端に寄せる（参考準拠） [自身] */
.cms-part--hero_a.hero-left .wrap { flex-direction: column; align-items: flex-start; justify-content: center; padding-left: 6%; }
.cms-part--hero_a.hero-left .txt1, .cms-part--hero_a.hero-left .txt2, .cms-part--hero_a.hero-left .txt3 { padding-left: 0; padding-right: 2rem; max-width: 600px; }

/* 最後のCTA帯(cs-mid-cta)：上下に余白をつけて文字を帯の中で離す */
.cs-mid-cta > .cont { padding-top: 3.5rem; padding-bottom: 3.5rem; }

/* @list block-411 banner バナー＝パーツを縦に間隔配置・画像は影なし（ロゴ等） [配下パーツ] */
.banner .cms-part + .cms-part { margin-top: 1.5rem; }
.banner .cms-part--text_only { padding: 1.5rem 1.75rem; border-radius: 12px; }

/* ヘッダーのロゴを大きく（既定2.5rem→横長ロゴが小さすぎたため）*/



/* ════════════════════════════════════════════
   ⑯ 機能カード強調（card-feat・2026-06-28）
   card-cells と併用。各カード天面にアクセントバーを足し、
   見出し(h3)を強調して「機能一覧」をかっこよく見せる。
   色は --col-* 変数のみ（ハードコード禁止・フォールバックのみ可）。
════════════════════════════════════════════ */
.card-feat .cms-column-grid > .cms-part {
  border-top: 3px solid var(--col-a, #0066cc);
}
.card-feat .cms-column-grid > .cms-part > .wrap { padding-top: 1.9rem; }
.card-feat .cms-rte h3 {
  font-size: var(--fsize-d, 1.25rem);
  line-height: 1.45;
  margin: 0 0 .7rem;
}
.card-feat .cms-rte p { line-height: 1.85; }

/* ════════════════════════════════════════════
   ⑰ セクション装飾（bg-blob / hd-bar・2026-06-29）
   白ベタが続く中盤に「地」の表情と見出しアクセントを足す試作。
   疑似要素＋color-mix で色はカラーセット追従（ハードコード禁止・フォールバックのみ）。
   bg-blob＝ブロック自身の背面に淡いぼかし円（both-620）／
   hd-bar＝配下の h2 左に縦バー（item-790）。
════════════════════════════════════════════ */

/* @list both-620 bg-blob 背面に淡いぼかし円を敷く（セクション装飾） [自身] */
.bg-blob, .bg-blob-b { position: relative; overflow: visible; }
.cms-block.bg-blob, .cms-block.bg-blob-b { overflow: visible; }   /* ブロック枠からぼかしをはみ出させる（.cms-block の hidden に勝つ）*/
.bg-blob > .cont, .bg-blob-b > .cont { position: relative; z-index: 1; }
.bg-blob::before, .bg-blob::after,
.bg-blob-b::before, .bg-blob-b::after {
  content: ""; position: absolute; z-index: 0; border-radius: 50%;
  pointer-events: none;
}
.bg-blob::before {
  top: -30%; right: -10%; width: 410px; height: 410px;
  background: radial-gradient(circle, color-mix(in srgb, var(--col-a, #0066cc) 20%, transparent) 0%, transparent 70%);
}
.bg-blob::after {
  bottom: -30%; left: -10%; width: 350px; height: 350px;
  background: radial-gradient(circle, color-mix(in srgb, var(--col-a, #0066cc) 10%, transparent) 0%, transparent 70%);
}
/* @list both-624 bg-blob-b bg-blobの左右反転版（右上⇄左上・左下⇄右下） [自身] */
.bg-blob-b::before {
  top: -30%; left: -10%; width: 410px; height: 410px;
  background: radial-gradient(circle, color-mix(in srgb, var(--col-a, #0066cc) 20%, transparent) 0%, transparent 70%);
}
.bg-blob-b::after {
  bottom: -30%; right: -10%; width: 350px; height: 350px;
  background: radial-gradient(circle, color-mix(in srgb, var(--col-a, #0066cc) 10%, transparent) 0%, transparent 70%);
}

/* @list item-790 hd-bar 見出し(h2)の左に縦バーアクセント [配下テキスト] */
.hd-bar .cms-rte h2 { position: relative; padding-left: 2rem; }
.hd-bar .cms-rte h2::before {
  content: ""; position: absolute; left: 0; top: .15em; bottom: .15em;
  width: 8px; border-radius: 4px; background: var(--col-a, #0066cc);
}

/* @list item-791 hd-wave 見出し(h2)の先頭に波マーク（id5専用・青固定） [配下テキスト] */
/* viewBox を波の実bboxに詰めて上下余白を除去・box は aspect-ratio で波に追従。
   狭幅対応：サイズは clamp で可変・SP は被せをやめて block＋中央配置 */
.hd-wave .cms-rte h2 {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: auto;
    z-index: 1;
}
.hd-wave .cms-rte h2::before {
    content: "";
    position: absolute;
    left: -2.6em;
    top: 50%;
    height: 2.2rem;
    transform: translateY(-50%);
    width: clamp(3em, 10vw, 4.6em);
    aspect-ratio: 383 / 140;
    background: url(data:image/svg+xml,%3Csvg%20viewBox%3D%2266%20170%20383%20140%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22waveGrad%22%20x1%3D%2270%22%20y1%3D%22270%22%20x2%3D%22445%22%20y2%3D%22270%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23005BEA%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2363D8FF%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M70%20306%20C92%20214%2C%20168%20165%2C%20256%20176%20C320%20184%2C%20353%20235%2C%20421%20219%20C386%20252%2C%20335%20257%2C%20279%20233%20C204%20201%2C%20124%20223%2C%2070%20306Z%22%20fill%3D%22url%28%23waveGrad%29%22%2F%3E%3Cpath%20d%3D%22M160%20292%20C188%20242%2C%20228%20227%2C%20278%20242%20C333%20258%2C%20374%20282%2C%20445%20245%20C397%20303%2C%20320%20315%2C%20259%20292%20C217%20276%2C%20188%20284%2C%20160%20292Z%22%20fill%3D%22url%28%23waveGrad%29%22%2F%3E%3C%2Fsvg%3E) no-repeat left center / contain;
    z-index: -1;
    pointer-events: none;
}
@media (max-width: 600px) {
    /* 狭幅は被せ(absolute)をやめて block＋センタリング＝波マークを見出しの上に中央配置 */
    .hd-wave .cms-rte h2 { text-align: center; }
    .hd-wave .cms-rte h2::before {
        position: static;
        display: block;
        left: auto;
        transform: none;
        width: 3em;
        margin: 0 auto 0.2em;
        z-index: auto;
    }
}

/* @list item-763 card-step ステップカード（番号大＋3枚を青濃度グラデで差別化） [配下テキスト] */
/* card-cells と併用。手順セクション専用。各セルの背景を薄→濃にして「進む」感、
   先頭ラベル（Step N）を大きくアクセント色で前に出す。色は --col-* + color-mix。 */
.card-step .cms-column-grid > .cms-part {
  border-top: none;
}
.card-step .cms-column-grid > .cms-part:nth-child(1) {
  background: color-mix(in srgb, var(--col-a, #0066cc) 6%, var(--col-w, #fff));
}
.card-step .cms-column-grid > .cms-part:nth-child(2) {
  background: color-mix(in srgb, var(--col-a, #0066cc) 13%, var(--col-w, #fff));
}
.card-step .cms-column-grid > .cms-part:nth-child(3) {
  background: color-mix(in srgb, var(--col-a, #0066cc) 22%, var(--col-w, #fff));
}
.card-step .cms-rte p:first-child {
  display: block;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .03em;
  color: var(--col-a, #0066cc);
  margin: 0 0 .7rem;
}

/* ════════════════════════════════════════════
   ⑱ 枠線ユーティリティ（imgbd-* / border-*・2026-06-29）
   imgbd-*＝配下の画像に枠（item）／border-*＝その block/part 自身に枠（both）。
   a/b/c は色＝--col-a(Primary)/--col-b(Secondary)/--col-c(Accent)（rule10 連番）。太さは 1px solid 固定。
════════════════════════════════════════════ */

/* 配下の画像に枠 */
/* @list item-750 imgbd-a 配下画像に枠（Primary色） [配下画像] */
.imgbd-a img { border: 1px solid var(--col-a); }
/* @list item-751 imgbd-b 配下画像に枠（Secondary色） [配下画像] */
.imgbd-b img { border: 1px solid var(--col-b); }
/* @list item-752 imgbd-c 配下画像に枠（Accent色） [配下画像] */
.imgbd-c img { border: 1px solid var(--col-c); }

/* 要素自身に枠 */
/* @list both-621 border-a 要素自身に枠（Primary色） [自身] */
.border-a { border: 1px solid var(--col-a); }
/* @list both-622 border-b 要素自身に枠（Secondary色） [自身] */
.border-b { border: 1px solid var(--col-b); }
/* @list both-623 border-c 要素自身に枠（Accent色） [自身] */
.border-c { border: 1px solid var(--col-c); }