@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

#swell_plus_floating_button {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 98;
    bottom: -60px;
    transition: bottom .4s;
    margin-bottom: 0.5em;
}

[data-scrolled=true] #swell_plus_floating_button {
    display: block;
    bottom: 0;
}

/*.p-fixBtnWrap {
    bottom: calc(50px + 1.25em);
}*/

footer {
    padding-bottom: 50px;
}

/*********************
Contact Form7 Customize
**********************/
.form-title{
font-size: 1.3em;
background: none;
padding: 0;
color: #000;
}

.contact-divider{ /*区切り*/
display: block;
width: 100%;
border-bottom: dashed 1px #C6C6C6 !important;
margin: 10px 0;
}
.req-tag{ /*必須*/
padding: 2px 6px 1px 6px;
background: #c25100 !important;
display: inline-block;
text-align: center;
margin: 0 5px;
border-radius: 3px;
color: #fff;
font-size: small;
font-weight: 900;
}

.normal-tag{ /*任意*/
padding: 2px 6px 1px 6px;
background: #dbdbdb !important;
display: inline-block;
text-align: center;
margin: 0 5px;
border-radius: 3px;
font-size: small;
}

.mail-container{ /*入力フォーム*/
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: auto;
font-weight: 900;
}

.top-sp{ /*間隔*/
margin: 10px 0;
}
.btm-sp{
margin-bottom: 15px;
}
.mail-item{
margin-bottom: 0px;
}
.mail-item:nth-child(1){ /*Label*/
width: 24%;
}
.mail-item:nth-child(2){ /*Tag*/
width: 10%;
text-align: center;
}
.mail-item:nth-child(3){ /*Form*/
width: 66%;
}

.chk-container{ /*同意-ボタン*/
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
width: 100%;
height: auto;
}
.chk-item{
width: 100%;
margin-bottom: 10px;
text-align: center;
}

.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-select,
.wpcf7-form-control.wpcf7-text.wpcf7-email{
width: 100%;
border-radius: 5px !important;
margin-bottom: 0;
background-color: white;
}

.wpcf7-form-control.wpcf7-text.wpcf7-address {
    width: 100%;
    border-radius: 5px !important;
    margin-bottom: 0;
    background-color: white;
}

.wpcf7-form-control.wpcf7-textarea{
width: 100%;
border-radius: 5px !important;
margin-bottom: -10px;
background-color: white;
height: 4.5em;
}


.wpcf7-not-valid-tip{ /*Error Messages*/
color: red !important;
padding-top: 10px !important;
font-size: 13px !important;
display: block;
}
span.wpcf7-not-valid-tip {
padding: 0;
}

/*エラー表示を非表示*/
.screen-reader-response {
display: none;
}

div.wpcf7-validation-errors {
margin-top: 20px !important;
font-size: 16px;
display: inline-block;
margin: 0 auto;
background-color: #CF2323;
}

.wpcf7 input[type="submit"] {
width:50%;
padding:10px;
border-radius:4px;
-webkit-border-radius: 4px;  
-moz-border-radius: 4px;
border: none;
box-shadow: 0 3px 0 #b62f3c;
background: #d63b48;
transition: 0.3s;
color: #fff;
font-weight: 700;
}
.wpcf7-submit:hover {
background: #b62f3c;
transform: translate3d(0px, 3px, 1px);
-webkit-transform: translate3d(0px, 3px, 1px);
-moz-transform: translate3d(0px, 3px, 1px);
}

div.wpcf7 .wpcf7-spinner {
    display: block;
}

.cta-form {
width: 90%;
margin: -200px auto 0;
background-color: #fffcf0;
padding: 30px;
position: relative;
border-radius: 14px;
z-index: 1;
}

.text-left-m {
font-size: 13px;
}

.eyecatch-text {
margin-left: 7% !important;
}

@media screen and (max-width: 640px) { /* 640px以下(Mobile)*/

.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-text.wpcf7-email,
.wpcf7-form-control.wpcf7-select{
width: 100%;
}
.mail-item:nth-child(1){ /*Label*/
width: 50%;
margin-bottom: 10px;
}
.mail-item:nth-child(2){ /*Tag*/
width: 50%;
margin-bottom: 10px;
text-align: right !important;
}
.mail-item:nth-child(3){
width: 100%;
}
.tag {
width: 60px;
}

.cta-form {
    padding: 20px;
}

.text-left-m {
text-align: left;
font-size: 13px;
}
	
}

/* ============================================================
   相談員ブロック（案内役キャラ）｜Net_Media
   SWELLカスタマイザー →「追加CSS」に貼る（1回だけ／差し替え可）。
   記事本文は <style> がWP APIで除去されるため、スタイルはここに置き、
   記事HTMLはクラスのみで記述する（kses安全・inline styleは使わない）。
   ★配色: サイトはティール緑ベース（--color_main:#0b8388）。相談員ブロックは
     「差し色の黄」を担うクリーム＋アンバー(#fec352)のままにして、解説枠として区別する。
   ============================================================ */
:root{
  --soudan-accent:#fec352;   /* 差し色（アンバー／参照パレット） */
  --soudan-weak:#fff8e1;     /* 淡いクリーム背景 */
  --soudan-border:#f2e6b3;   /* 枠線（淡い金） */
  --soudan-label:#7a5c00;    /* 「相談員」ラベル文字（琥珀・クリーム地で5.89:1） */

  /* サイト共通トークン。#nm-top/#nm-page の外（アーカイブ等・テーマのクラス）でも使う。
     ※ #nm-* 側は同名を再定義しているので、そちらの見た目は変わらない。 */
  --nm-brand:#0b8388;        /* 面・境界・ホバー（白地 4.55:1） */
  --nm-brand-dk:#066c70;     /* リンク・強調文字（白地 6.20:1） */
  --nm-brand-lt:#30c5b6;
  --nm-brand-pale:#e1f4f2;
  --nm-accent:#fec352;       /* 差し色（黄） */
  --nm-accent-ink:#5a4600;
  --nm-line:#dfe6e8;         /* 枠線（薄グレーより視認しやすい） */
  --nm-ink:#292929;
  --nm-mid:#5f6479;          /* 補助テキスト（白地 5.86:1） */
}

/* 相談員の解説ブロック（型A・型C共通のガワ） */
.soudan-block{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:var(--soudan-weak);
  border:1px solid var(--soudan-border);
  border-radius:14px;
  padding:16px 18px;
  margin:1.4em 0;
}
.soudan-avatar{
  flex:0 0 auto;
  width:72px;            /* 標準サイズ（大きめ） */
  height:72px;
  border-radius:50%;
  object-fit:cover;
  object-position:50% 12%;  /* 顔が入るよう上寄せ */
  background:var(--soudan-weak);
  border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.soudan-body{ flex:1; min-width:0; }
/* 名前ラベル。本文の先頭に相談員ブロックが来るページ（回線CPT）では、この「相談員」の
   文字を SEO SIMPLE PACK が meta description の先頭に拾ってしまう。
   そこで data-name を持つ場合は本文テキストを空にし、CSSで描画する。
   data-name が無い既存マークアップ（記事47本）は attr() が空になるだけで従来どおり動く。 */
.soudan-who{
  font-size:.8em;
  font-weight:700;
  color:var(--soudan-label);
  margin:0 0 2px;
}
.soudan-who[data-name]::before{ content:attr(data-name); }
.soudan-say{ margin:0; }

/* 型B：読者の質問Q&A（質問→相談員） */
.soudan-qa{
  border:1px solid #ece7db;
  border-radius:14px;
  padding:14px 16px;
  margin:1.4em 0;
  background:#fff;
}
.soudan-qa .soudan-q{ font-weight:700; margin:0 0 8px; }
.soudan-qa .soudan-q::before{
  content:"Q";
  display:inline-flex;
  width:1.6em; height:1.6em;
  align-items:center; justify-content:center;
  background:var(--soudan-accent);
  border-radius:50%;
  font-size:.8em;
  margin-right:8px;
  color:#4a3b00;
  font-weight:800;
}
.soudan-qa .soudan-block{ margin:0; }

/* スマホ */
@media (max-width:600px){
  .soudan-avatar{ width:60px; height:60px; }
  .soudan-block{ padding:14px; gap:12px; }
}

/* ============================================================
   「診断してみよう」CVエリア（バナー型）｜診断→相談の導線
   ★相談員ブロック（アンバーの“解説”）と区別するため、CVは
     赤アクセントの“アクションバナー”にして目立たせる（白背景＋赤の縦帯・影・ボタン）。
     赤はサイトのCVボタン色と一致。主ボタン＝診断(/shindan/)、サブ＝相談(/soudan/)。
   ============================================================ */
.cv-shindan{
  display:flex; gap:18px; align-items:center;
  background:#ffffff;
  border:1px solid #f9cdd0; border-radius:18px;
  padding:22px; margin:1.8em 0;
  box-shadow:0 8px 26px rgba(244,85,98,.18);
  position:relative; overflow:hidden;
}
/* ★ボックス左端の太い縦帯は使わない（2026-08-07 ユーザー指示）。
   枠線＋角丸＋影だけで十分に区切りが出る。新しいボックスにも left の縦帯を足さないこと。 */
.cv-char{
  flex:0 0 auto; width:112px; height:112px; border-radius:50%;
  object-fit:cover; object-position:50% 12%;
  border:3px solid #fff; box-shadow:0 3px 12px rgba(244,85,98,.25); background:#fde6e6;
}
.cv-main{ flex:1; min-width:0; }
.cv-tag{
  display:inline-block; background:#fec352; color:#4a3b00;
  font-weight:800; font-size:12px; border-radius:999px; padding:3px 12px; margin-bottom:9px;
}
.cv-lead{ font-size:20px; font-weight:800; line-height:1.5; margin:0 0 6px; color:#292929; }
.cv-sub{ font-size:13.5px; color:#6b7684; margin:0 0 14px; }
.cv-actions{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.cv-btn-main{
  display:inline-block; background:#f45562; color:#fff; font-weight:800; font-size:19px;
  text-decoration:none; border-radius:999px; padding:14px 28px;
  box-shadow:0 4px 12px rgba(244,85,98,.32); transition:transform .08s ease,box-shadow .15s ease;
}
.cv-btn-main:hover{ box-shadow:0 7px 18px rgba(244,85,98,.45); transform:translateY(-1px); }
.cv-btn-sub{ font-size:14px; font-weight:700; color:#d63b48; text-decoration:none; }
.cv-btn-sub:hover{ text-decoration:underline; }
@media(max-width:600px){
  .cv-shindan{ flex-direction:column; text-align:center; padding:22px 16px; }
  .cv-actions{ justify-content:center; }
  .cv-char{ width:92px; height:92px; }
  .cv-btn-main{ width:100%; }
}

/* ============================================================
   回線詳細ページ メリット/注意点（テーマの nmk-box）を
   「箇条書きらしく」補強：マーカー付与（メリット=✓緑／注意点=！橙）。
   ============================================================ */
.nmk-box ul{ list-style:none; padding-left:2px; margin:8px 0 0; }
.nmk-box li{ position:relative; padding:5px 0 5px 27px; line-height:1.75; }
.nmk-box--merit li::before{
  content:"✓"; position:absolute; left:0; top:6px;
  width:18px; height:18px; border-radius:50%; background:#1e8449;
  color:#fff; font-size:11px; font-weight:800; text-align:center; line-height:18px;
}
.nmk-box--demerit li::before{
  content:"!"; position:absolute; left:0; top:6px;
  width:18px; height:18px; border-radius:50%; background:#e0912f;
  color:#fff; font-size:12px; font-weight:800; text-align:center; line-height:18px;
}

/* ============================================================
   カテゴリー/タグ アーカイブ・サイドバー
   ・アーカイブは #nm-page を持たない（テーマの p-postList をそのまま使う）ので、
     テーマのクラスに直接あてる。トークンは :root の --nm-* を使用。
   ・課題（実測 2026-07-09）：
       - ウィジェットは border:0 / radius:0 / shadow rgba(0,0,0,.05) だけ
         → 背景 #fdfdfd と白ウィジェットの差が 1.02:1 でほぼ見えない
       - 記事カードも枠・影・角丸なしで、固定ページの .tcard 群と別世界
   ・対策：背景を淡ティールに落として白い面を立たせ、枠線＋角丸＋影を足す。
     （枠線の色だけでは 1.6:1 が限界のため、面のコントラストと併用する）
   ============================================================ */
  /* このテーマは body_class() を出さない（body に class 属性が無い＝実測）。
     そのため body.archive 等は使えず、記事一覧 .p-postList の有無で判定する。 */
  body:has(.p-postList.-type-card){background:#f2f6f7;}
  /* アーカイブは本文フレーム（白）を透明にして、地色の上に白カードを浮かせる。
     記事詳細ページには .p-postList.-type-card が無いので、白フレームのまま。
     ※ padding を 0 にすると見出しが端に張り付き、カードが枠外へはみ出す（実測）ので残す。 */
  .l-mainContent:has(.p-postList.-type-card){background:transparent;box-shadow:none;}

  /* --- サイドバーのウィジェット ---
     SWELLのフレーム機能が `.-frame-on-sidebar #sidebar .c-widget`（詳細度 1,1,0）で
     border-radius:var(--swl-radius--4,0) / padding:16px を当てている（実測）。
     ID を含むため、クラスだけでは勝てない。同じく #sidebar を含めて上書きする。
     ※ サイドバーは id="sidebar" class="l-sidebar"。.c-widget を重ねて (1,3,0) にし、
       テーマの (1,2,0) を読み込み順に依存せず確実に上回る。 */
  #sidebar.l-sidebar .c-widget.c-widget,.l-sidebar .c-widget{
    background:#fff;
    border:1px solid var(--nm-line);
    border-radius:14px;
    box-shadow:0 2px 10px rgba(11,131,136,.06);
    padding:18px 18px 16px;
  }
  /* 見出しはウィジェットの padding を負マージンで打ち消し、カード上部の帯にする。
     負マージンの値は上の padding（18px 18px 16px）と対。片方だけ変えないこと。
     border-radius 13px = 外側14px − 枠1px（内側の曲率と一致させる）。 */
  .l-sidebar .c-widget__title{
    display:flex;align-items:center;gap:8px;
    margin:-18px -18px 14px;
    padding:12px 16px 11px 15px;
    background:linear-gradient(180deg,#eaf7f5,#e1f4f2);
    border:0;border-bottom:1px solid #cbe6e4;
    border-radius:13px 13px 0 0;
    font-size:14.5px;font-weight:900;letter-spacing:.02em;line-height:1.5;
    color:#22484a;
  }
  /* SWELLは `.c-widget__title.-side::before` を position:absolute; left:0 にしている
     （見出し左端の縦棒）。帯にしたので絶対配置を解除し、flexの子として並べる。 */
  .l-sidebar .c-widget__title::before{
    content:"";flex:0 0 auto;
    position:static;
    width:4px;height:1.05em;border-radius:2px;
    background:var(--nm-brand);
    margin:0;vertical-align:0;
  }
  /* SWELLが見出し下に敷く1px線。上の border-bottom と二重になるので消す。 */
  .l-sidebar .c-widget__title::after{display:none;}

  /* ============================================================
     サイドバーのCVウィジェット（テキストウィジェット＝サイドバーで唯一・実測）
     他のウィジェット（検索・カテゴリー・メニュー）は白地＋ティールの「案内」。
     ここは「押す場所」なので、面そのものに色を入れて区別する。
     ※白地＋枠色だけでは、他ウィジェットとの面のコントラストが 1.06:1 しかなく
       色が付いているように見えなかった（実測）。
     ============================================================ */
  /* 上の `#sidebar.l-sidebar .c-widget.c-widget`(1,3,0) が背景・枠・影を持っているので、
     同じ (1,3,0) を後から書いて上書きする（クラスだけの (0,3,0) では負ける）。
     ・面は他ウィジェットと同じ白。色で塗ると暗く見える。
     ・区別は「大きい見出し」「赤いボタン」「淡い赤の枠線」の3点だけに絞る。
     ・overflow:visible にしないと、ボタンの影が枠で切られる。 */
  #sidebar.l-sidebar .c-widget.widget_text,.l-sidebar .c-widget.widget_text{
    position:relative;overflow:visible;
    background:#fff;
    border-color:#f2c3c8;
    box-shadow:0 2px 10px rgba(214,59,72,.10);
    padding:20px 18px 22px;
  }
  /* 見出しはカード上部の「赤帯」にする（白文字。#d63b48 上の白 4.9:1）。
     2026-07-10 赤文字だけだとエラー表示に見えるとの指摘で、背景赤の帯へ変更。
     負マージンはカードの padding（20px 18px 22px）と対。片方だけ変えないこと。
     border-radius 13px = カード外側14px − 枠1px。 */
  .l-sidebar .c-widget.widget_text .c-widget__title{
    display:block;
    margin:-20px -18px 16px;
    padding:13px 16px 12px;
    background:linear-gradient(180deg,#dd4a57,#d63b48);
    border:0;
    border-radius:13px 13px 0 0;
    font-size:17px;line-height:1.5;letter-spacing:.01em;
    color:#fff;
  }
  .l-sidebar .c-widget.widget_text .c-widget__title::before{display:none;}

  /* 「相談・申込は0円」の黄バッジ（訴求規律：無料の対象範囲を明示する） */
  .l-sidebar .c-widget.widget_text .textwidget::before{
    content:"相談・申込は0円";
    display:inline-block;
    background:var(--nm-accent);color:var(--nm-accent-ink);
    font-size:11.5px;font-weight:800;letter-spacing:.02em;
    border-radius:999px;padding:4px 12px;margin:0 0 10px;
  }
  .l-sidebar .c-widget.widget_text .textwidget p{
    font-size:13.5px;line-height:1.85;color:var(--nm-mid);
    margin:0 0 16px;
  }

  /* ボタン：テーマ既定は --color_main（ティール）。CV赤に置き換える。
     #f45562 は白文字17px で 3.32:1 と AA 未達なので、濃い #d63b48（4.59:1）を使う。
     白地との境界も 4.50:1 で 1.4.11（UI部品 3:1）を満たす。
     光らせず、下の実体影だけで「押せる」ことを示す。 */
  .l-sidebar .c-widget.widget_text .swell-block-button__link{
    display:flex;width:100%;justify-content:center;align-items:center;gap:9px;
    background-color:#d63b48;color:#fff;
    font-size:17px;font-weight:800;letter-spacing:.02em;
    padding:19px 18px;border-radius:999px;border:0;
    box-shadow:0 4px 0 #a52a35;
    transition:transform .1s ease,box-shadow .15s ease,background-color .15s ease;
  }
  .l-sidebar .c-widget.widget_text .swell-block-button__link::after{
    content:"▶";font-size:11px;line-height:1;opacity:.9;
  }
  .l-sidebar .c-widget.widget_text .swell-block-button__link:hover{
    background-color:#c1313d;
    transform:translateY(2px);
    box-shadow:0 2px 0 #a52a35;
  }
  @media (prefers-reduced-motion:reduce){
    .l-sidebar .c-widget.widget_text .swell-block-button__link{transition:none;}
    .l-sidebar .c-widget.widget_text .swell-block-button__link:hover{transform:none;}
  }

  /* カテゴリー/メニューのリスト */
  .l-sidebar .c-listMenu a{
    color:var(--nm-ink);font-weight:700;
    border-bottom:1px solid var(--nm-line);
    transition:color .15s ease,background .15s ease;
  }
  .l-sidebar .c-listMenu a:hover{color:var(--nm-brand-dk);background:var(--nm-brand-pale);}
  .l-sidebar .c-listMenu li:last-child a{border-bottom:0;}

  /* サイドメニューの先頭アイコンを「・」に統一する。
     SWELLは icomoon の字形をa::before に絶対配置している（カテゴリー=フォルダ U+E92F／
     ナビメニュー=山形 U+E921）。さらに `.c-listMenu a::before{font-family:icomoon !important}`
     を swell_custom-inline-css で当てているので、同じ強さで戻さないと字形なしになる。
     カテゴリー側のフォルダ指定はナビ側より詳細度が高いので、`.c-listMenu` を重ねて
     (1,3,1) にし、両方を確実に上回る。 */
  #sidebar.l-sidebar .c-listMenu.c-listMenu a,.l-sidebar .c-listMenu a{padding-left:20px;}
  #sidebar.l-sidebar .c-listMenu.c-listMenu a::before,.l-sidebar .c-listMenu a::before{
    content:"・";
    font-family:inherit !important;
    font-size:15px;line-height:1;
    color:var(--nm-brand);
    left:0;top:50%;transform:translateY(-50%);
    width:auto;height:auto;
  }
  #sidebar.l-sidebar .c-listMenu.c-listMenu a:hover::before,.l-sidebar .c-listMenu a:hover::before{color:var(--nm-brand-dk);}

  /* --- モバイル用 追従CTA（スクロールで右下に出す）2026-08-07 ---
     ★JSは不要。SWELLが <html> に data-scrolled="true|false" を付けるので、それだけで出し分けできる
       （実測：スクロール前 false → スクロール後 true）。
     HTMLは site-wide に置きたいので**フッターのカスタムHTMLウィジェット**で入れる（REST不可・管理画面作業）:
       <a id="nm-fixcta" href="https://classlab.co.jp/internet-center/soudan/?referer-url=fixcta">💬 無料で相談する</a>
     PCは各セクションのCTAで足りるため 960px 以下でのみ表示する。 */
  #nm-fixcta{
    position:fixed;right:14px;bottom:16px;z-index:99;
    display:none;align-items:center;gap:6px;
    padding:14px 22px;border-radius:999px;
    background:var(--cv-dk,#d63b48);color:#fff;font-weight:900;font-size:15px;
    text-decoration:none;box-shadow:0 8px 22px rgba(214,59,72,.45);
    opacity:0;transform:translateY(16px);pointer-events:none;
    transition:opacity .3s ease,transform .3s ease;
  }
  @media(max-width:960px){
    #nm-fixcta{display:inline-flex;}
    [data-scrolled="true"] #nm-fixcta{opacity:1;transform:translateY(0);pointer-events:auto;}
    /* ★スタッキングの罠（実測）：CTAはフッターのウィジェット内に置くが、
       SWELLの footer.l-footer は position:relative;z-index:0 で**スタッキングコンテキストを作る**。
       本文側の .l-content は z-index:1 なので、CTAの z-index:99 はフッター内でしか効かず
       本文の下に潜って見えなくなる。CTAがあるときだけフッターを持ち上げて解決する。 */
    .l-footer:has(#nm-fixcta){z-index:100;}
  }
  /* ★ページトップボタン（右下の ∧）は非表示（2026-08-07 ユーザー指示）。
     追従CTAと右下で場所を取り合うため。SWELLが .p-fixBtnWrap を全ページに出力する。 */
  .p-fixBtnWrap{display:none !important;}

  /* --- 横長の比較表：モバイルは「1回線＝1ブロック」の縦積みにする ---
     2026-08-07 ユーザー指摘「回線比較の表がモバイル版では読めない」。
     8列あるとスマホでは1セルが数文字になり改行だらけになるため。
     各 <td> の data-label（= thead の見出し文言）を ::before で出して「ラベル｜値」の2列に組む。
     付与は set_stack_table.py。**PCは表のまま**（横並びで比べられる利点が大きい）。 */
  /* ★PCも表をやめてブロックにした（2026-08-07 ユーザー判断）。
     本文カラムは721px（サイドバーあり）しかなく、8列だと全セルを nowrap にすると
     870px 必要＝必ず折り返す。実測で「1Gb/ps」「So-net/光」のような改行が多発していた。
     PCは2カラム、スマホは1カラムのカードにする。 */
  .post_content .nm-stacktable,
  .post_content .nm-stacktable tbody{display:block;width:100%;}
  .post_content .nm-stacktable thead{display:none;}
  .post_content .nm-stacktable tbody{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .post_content .nm-stacktable tr{
    display:block;background:#fff;
    border:1px solid var(--nm-line,#e3e8ef);border-radius:14px;
    padding:14px 16px;margin:0;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
  }
  .post_content .nm-stacktable td{
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    border:0;padding:6px 0;font-size:13.5px;text-align:right;
  }
  .post_content .nm-stacktable td + td{border-top:1px dashed #e8edf3;}
  .post_content .nm-stacktable td::before{
    content:attr(data-label);
    flex:0 0 auto;font-size:12px;font-weight:700;color:#5f6479;text-align:left;
  }
  /* 1列目＝回線名はブロックの見出しにする（ラベルなし・大きく・左寄せ） */
  .post_content .nm-stacktable td.nm-st-name{
    display:block;text-align:left;font-size:16px;font-weight:800;
    padding:0 0 7px;border-bottom:2px solid var(--nm-brand,#0b8388);margin-bottom:3px;
  }
  .post_content .nm-stacktable td.nm-st-name::before{content:none;}
  .post_content .nm-stacktable td.nm-st-name a{font-size:16px;font-weight:800;}
  @media(max-width:768px){
    .post_content .nm-stacktable tbody{grid-template-columns:1fr;}
    .post_content .nm-stacktable td{font-size:14px;padding:7px 0;}
    .post_content .nm-stacktable td::before{font-size:12.5px;}
    .post_content .nm-stacktable td.nm-st-name,
    .post_content .nm-stacktable td.nm-st-name a{font-size:17px;}
  }

  /* --- 記事カード（アーカイブ／検索） ---
     SWELLの構造: ul.p-postList > li.p-postList__item > a.p-postList__link
                    > .p-postList__thumb ＋ .p-postList__body(title/excerpt/meta)
     li は `padding:0 12px` を持つ「溝」なので、カードの枠は li ではなく a に描く。
     li に描くと左右のカードが隙間ゼロで密着する。 */
  .p-postList.-type-card .p-postList__item{
    background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;
    margin-bottom:28px;      /* 行間。列の溝は li の padding 12px×2 = 24px */
    display:flex;            /* a を li いっぱいに伸ばして高さを揃える */
  }
  .p-postList.-type-card .p-postList__link{
    display:flex;flex-direction:column;width:100%;
    background:#fff;
    border:1px solid var(--nm-line);
    border-radius:16px;
    overflow:hidden;
    padding:0 0 4px;
    box-shadow:0 2px 10px rgba(11,131,136,.05);
    transition:box-shadow .18s ease,border-color .18s ease;
  }
  /* ホバーはグロウ（枠色＋影）だけ。持ち上げ・サムネ拡大はしない（2026-07-10 ユーザー指示）。
     サムネ拡大は SWELL本体 main.css の `.p-postList__link:hover .c-postThumb__img{scale(1.06)}`。
     同一セレクタで後読みの子テーマが勝つので transform:none で無効化する。 */
  .p-postList.-type-card .p-postList__link:hover{
    border-color:var(--nm-brand);
    box-shadow:0 12px 26px rgba(11,131,136,.14);
  }
  .p-postList__link:hover .c-postThumb__img{transform:none;}
  /* アイキャッチをカード枠に密着させず、本文と同じだけ内側に置く（2026-08-07 ユーザー指摘：
     枠に対してギチギチに見える）。本文 .p-postList__body は padding:14px 16px なのに
     サムネだけ枠いっぱいで、はみ出して見えていた。
     ★SWELLが .p-postList__thumb に width:100% を当てているので、margin だけだと幅が縮まず
       右側が overflow:hidden で切れる。**width:auto を必ず添える**（実測）。
     ★アイキャッチは白背景のフラットイラストでカードの白と同化するため、薄い枠線で輪郭を出す。 */
  .p-postList.-type-card .p-postList__thumb{
    width:auto;
    margin:10px 10px 0;
    border-radius:10px;
    border:1px solid #edeff3;
  }
  /* body を縦フレックスにして、日付を必ずカード下端へ落とす（高さが揃う） */
  .p-postList.-type-card .p-postList__body{
    flex:1;display:flex;flex-direction:column;
    padding:14px 16px 0;
  }
  .p-postList.-type-card .p-postList__title{
    font-size:15.5px;font-weight:800;line-height:1.65;color:var(--nm-ink);
    padding:0;margin:0;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  }
  .p-postList.-type-card .p-postList__excerpt{
    color:var(--nm-mid);font-size:12.5px;line-height:1.8;
    padding:0;margin:8px 0 0;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  }
  .p-postList.-type-card .p-postList__meta{
    padding:10px 0 12px;margin:auto 0 0;color:var(--nm-mid);
  }
  /* カテゴリーバッジ：カテゴリーページでは全カードが同じカテゴリーで情報量がゼロ。
     検索結果はカテゴリーが混在するので残す。`.p-termHead` はカテゴリーページにしか
     出力されない（検索・回線一覧には無い＝実測）ので、それを手がかりに絞る。
     ※カテゴリー説明を空にすると .p-termHead が消えてバッジが戻る可能性がある。 */
  .l-mainContent:has(.p-termHead) .p-postList.-type-card .c-postThumb__cat{display:none;}

  /* --- アーカイブの見出し（固定ページの h2.h と同じ黄マーカーで統一） ---
     ※ #nm-page を使う固定ページでは .c-pageTitle は非表示なので競合しない。
        記事詳細には .c-pageTitle が無いため、この指定は誤爆しない。

     SWELLは `.c-pageTitle__inner` を float:left にして下線を文字幅に合わせ、
     `.c-pageTitle::after` の clearfix でフロートを解除している（data-style="b_bottom"）。
     ::after を黄マーカーに使うと clearfix が消え、見出しが高さ0に潰れて
     直後の .p-termHead が右へ回り込む。→ float 自体を殺してから ::after を使う。 */
  .l-mainContent:has(.p-postList.-type-card) .c-pageTitle{
    font-size:26px;font-weight:900;color:var(--nm-ink);
    border:0;padding:0 0 8px;margin-bottom:22px;position:relative;
  }
  .l-mainContent:has(.p-postList.-type-card) .c-pageTitle__inner{
    float:none;display:block;
    border-bottom:0;padding:0;margin:0;   /* ティールの下線と左右13pxのズレを消す */
  }
  .l-mainContent:has(.p-postList.-type-card) .c-pageTitle::after{
    content:"";position:absolute;left:0;bottom:0;
    width:72px;height:5px;border-radius:3px;background:var(--nm-accent);
    visibility:visible;   /* SWELLのclearfixが visibility:hidden を当てている */
  }
  /* 「- category -」等の英字ラベル */
  .l-mainContent:has(.p-postList.-type-card) .c-pageTitle small{color:var(--nm-mid);}

  /* --- カテゴリー説明文（アーカイブ冒頭の導入文） ---
     SWELLの実DOMは `.p-termHead > p.p-termHead__desc`（padding:24px のみで無装飾）。
     2026-07-10 ユーザー指示で背景をティール淡色→黄色系（ブランド淡クリーム）へ変更。 */
  .l-mainContent .p-termHead{margin:0 0 26px;}
  .l-mainContent .p-termHead__desc{
    background:#fff8e1;
    border:1px solid #f0dfa8;
    border-radius:14px;
    padding:16px 18px;
    margin:0;
    font-size:14.5px;line-height:1.9;font-weight:600;color:#4a4233;
  }

  /* --- ページネーション --- */
  .c-pagination .page-numbers{border-radius:10px;font-weight:800;}
  .c-pagination .page-numbers.current{background:var(--nm-brand);color:#fff;}

/* ============================================================
   トップページ（:is(#nm-top,#nm-page) スコープ）｜ポップデザイン＋モーション
   ※固定ページはクラスのみで記述。<style>不要（このCSSが効く）。
   ============================================================ */
  :is(#nm-top,#nm-page){--ink:#292929;--mid:#5f6479;--line:#eef0f6;
    --brand:#0b8388;--brand-dk:#066c70;--brand-lt:#30c5b6;--brand-pale:#e1f4f2;
    --accent:#fec352;--accent-ink:#5a4600;
    --coral:#f45562;--coral-dk:#d63b48;
    --mint:#30c5b6;--sky:#64b6f9;--cv:#f45562;--cv-dk:#d63b48;
    --y50:#fff3d6;--c50:#fde6e6;--m50:#daf2ef;--s50:#e2effe;
    color:var(--ink);line-height:1.8;}
  :is(#nm-top,#nm-page) *{box-sizing:border-box;}
  :is(#nm-top,#nm-page) .sec{padding:46px 0;position:relative;}
  :is(#nm-top,#nm-page) h2.h{font-size:29px;text-align:center;margin:0 0 6px;font-weight:900;letter-spacing:.01em;border-left:0;padding-left:0;}
  :is(#nm-top,#nm-page) h2.h .em{position:relative;white-space:nowrap;}
  :is(#nm-top,#nm-page) h2.h .em::after{content:"";position:absolute;left:-2px;right:-2px;bottom:2px;height:10px;background:#ffdf8a;border-radius:6px;z-index:0;}
  :is(#nm-top,#nm-page) h2.h .em>span{position:relative;z-index:1;}
  :is(#nm-top,#nm-page) .hsub{text-align:center;color:var(--mid);font-size:14px;margin:0 0 28px;font-weight:600;}
  :is(#nm-top,#nm-page) .btn{display:inline-flex;align-items:center;gap:8px;font-weight:900;text-decoration:none;border-radius:999px;padding:16px 32px;font-size:19px;transition:transform .1s ease,box-shadow .18s ease;}
  :is(#nm-top,#nm-page) .btn:hover{transform:translateY(-2px);}
  :is(#nm-top,#nm-page) .btn-cv{background:var(--cv);color:#fff;box-shadow:0 8px 0 var(--cv-dk);}
  :is(#nm-top,#nm-page) .btn-cv:hover{box-shadow:0 10px 0 var(--cv-dk);}
  :is(#nm-top,#nm-page) .btn-ghost{background:#fff;color:var(--ink);border:2.5px solid var(--ink);box-shadow:0 6px 0 rgba(41,41,41,.12);}
  :is(#nm-top,#nm-page) .cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
  :is(#nm-top,#nm-page) .hero{background:linear-gradient(160deg,#e1f4f2 0,#d3eeeb 45%,#fde6e6 100%);border-radius:28px;overflow:hidden;position:relative;margin:6px 0 8px;}
  :is(#nm-top,#nm-page) .hero .deco{position:absolute;border-radius:50%;z-index:0;}
  :is(#nm-top,#nm-page) .hero .d1{width:120px;height:120px;background:#fec352;left:-34px;top:40px;opacity:.55;}
  :is(#nm-top,#nm-page) .hero .d2{width:58px;height:58px;background:var(--mint);right:7%;top:30px;opacity:.55;}
  :is(#nm-top,#nm-page) .hero .d3{width:24px;height:24px;background:var(--sky);left:44%;top:24px;opacity:.7;}
  :is(#nm-top,#nm-page) .hero .d4{width:40px;height:40px;background:var(--coral);left:6%;bottom:34px;opacity:.5;}
  :is(#nm-top,#nm-page) .hero-in{padding:50px 40px 46px;display:grid;grid-template-columns:1.12fr .88fr;gap:20px;align-items:center;position:relative;z-index:1;}
  :is(#nm-top,#nm-page) .eyebrow{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--brand-dk);font-weight:900;font-size:13px;border-radius:999px;padding:7px 16px;margin:0 0 16px;box-shadow:0 4px 12px rgba(11,131,136,.18);}
  /* eyebrowのラベルは data-label から CSS で描画する。
     HTML本文にテキストを置くと SEO SIMPLE PACK の自動抜粋（meta description）の
     先頭に絵文字ごと混入するため（実測: 固定ページ9/9で汚染）、本文からは出さない。
     装飾ラベルなので支援技術からも隠す（aria-hidden を併用）。 */
  :is(#nm-top,#nm-page) .eyebrow[data-label]::before{content:attr(data-label);}
  :is(#nm-top,#nm-page) .htitle{font-size:44px;line-height:1.32;font-weight:900;margin:0 0 14px;}
  :is(#nm-top,#nm-page) .htitle .mk{position:relative;}
  :is(#nm-top,#nm-page) .htitle .mk::after{content:"";position:absolute;left:-3px;right:-3px;bottom:4px;height:14px;background:#fec352;border-radius:8px;z-index:0;transform:rotate(-1deg);}
  :is(#nm-top,#nm-page) .htitle .mk>span{position:relative;z-index:1;}
  :is(#nm-top,#nm-page) .hsub2{font-size:16px;color:#5a5f74;margin:0 0 20px;font-weight:600;}
  :is(#nm-top,#nm-page) .chips{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-wrap:wrap;gap:9px;}
  :is(#nm-top,#nm-page) .chips li{font-size:13px;font-weight:800;background:#fff;border-radius:999px;padding:7px 15px 7px 30px;position:relative;box-shadow:0 4px 12px rgba(0,0,0,.06);}
  :is(#nm-top,#nm-page) .chips li::before{content:"✓";position:absolute;left:10px;top:7px;color:#fff;background:var(--brand);width:16px;height:16px;border-radius:50%;font-size:10px;font-weight:900;text-align:center;line-height:16px;}
  :is(#nm-top,#nm-page) .hnote{font-size:12.5px;color:var(--mid);margin:14px 0 0;font-weight:700;}
  :is(#nm-top,#nm-page) .hvis{position:relative;display:flex;justify-content:center;align-items:center;min-height:300px;}
  :is(#nm-top,#nm-page) .blob{position:absolute;width:310px;height:310px;background:radial-gradient(circle at 38% 32%,#7fd9cf,#0b8388);border-radius:42% 58% 60% 40%/52% 42% 58% 48%;box-shadow:0 20px 50px rgba(11,131,136,.28);}
  :is(#nm-top,#nm-page) .bdot{position:absolute;border-radius:50%;}
  :is(#nm-top,#nm-page) .bd1{width:34px;height:34px;background:var(--coral);top:8%;right:15%;box-shadow:0 6px 14px rgba(244,85,98,.32);}
  :is(#nm-top,#nm-page) .bd2{width:22px;height:22px;background:var(--sky);bottom:13%;left:13%;}
  :is(#nm-top,#nm-page) .spark{position:absolute;top:2%;left:31%;font-size:29px;}
  :is(#nm-top,#nm-page) .hchar{position:relative;width:290px;max-width:80%;z-index:2;border-radius:50%;background:#fff;border:7px solid #fff;box-shadow:0 22px 46px rgba(11,131,136,.24);}
  @media(max-width:820px){
    :is(#nm-top,#nm-page) .hero-in{grid-template-columns:1fr;text-align:center;padding:36px 20px 32px;}
    :is(#nm-top,#nm-page) .htitle{font-size:31px;}:is(#nm-top,#nm-page) .chips{justify-content:center;}:is(#nm-top,#nm-page) .cta{justify-content:center;}
    :is(#nm-top,#nm-page) .hvis{order:-1;min-height:0;margin-bottom:8px;}:is(#nm-top,#nm-page) .hchar{width:180px;}:is(#nm-top,#nm-page) .blob{width:230px;height:230px;}
  }
  :is(#nm-top,#nm-page) .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
  @media(max-width:820px){:is(#nm-top,#nm-page) .pgrid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:460px){:is(#nm-top,#nm-page) .pgrid{grid-template-columns:1fr;}}
  :is(#nm-top,#nm-page) .pcard{display:block;text-decoration:none;color:inherit;border-radius:22px;padding:22px 20px;transition:transform .1s ease,box-shadow .18s ease;}
  :is(#nm-top,#nm-page) .pcard:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.1);}
  :is(#nm-top,#nm-page) .pcard .ic{width:56px;height:56px;border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 6px 14px rgba(0,0,0,.08);}
  :is(#nm-top,#nm-page) .pcard .pt{display:block;font-size:16px;margin:14px 0 4px;font-weight:900;}
  :is(#nm-top,#nm-page) .pcard .pd{display:block;font-size:13px;color:#5f6479;margin:0 0 12px;font-weight:600;}
  :is(#nm-top,#nm-page) .pcard .go{display:block;font-size:13px;font-weight:900;}
  /* モバイルは縦積みだと余白が目立つので、アイコンとテキストを横並びにする（2026-08-07 ユーザー指摘）。
     ボタンは全幅で下段。※カード側にインラインで display:flex が付いているので !important で上書きする。 */
  @media(max-width:640px){
    :is(#nm-top,#nm-page) .pgrid .pcard{
      display:grid !important;
      grid-template-columns:auto 1fr;
      grid-template-areas:"ic pt" "ic pd" "go go";
      column-gap:14px;padding:18px;
    }
    :is(#nm-top,#nm-page) .pgrid .pcard .ic{grid-area:ic;align-self:center;}
    :is(#nm-top,#nm-page) .pgrid .pcard .pt{grid-area:pt;margin:0 0 3px;align-self:end;}
    :is(#nm-top,#nm-page) .pgrid .pcard .pd{grid-area:pd;margin:0;align-self:start;}
    :is(#nm-top,#nm-page) .pgrid .pcard .go{grid-area:go;margin-top:14px !important;}
  }
  :is(#nm-top,#nm-page) .p-y{background:var(--y50);}:is(#nm-top,#nm-page) .p-y .go{color:#7d6300;}
  :is(#nm-top,#nm-page) .p-c{background:var(--c50);}:is(#nm-top,#nm-page) .p-c .go{color:#c22f3c;}
  :is(#nm-top,#nm-page) .p-m{background:var(--m50);}:is(#nm-top,#nm-page) .p-m .go{color:#066c70;}
  :is(#nm-top,#nm-page) .p-s{background:var(--s50);}:is(#nm-top,#nm-page) .p-s .go{color:#1660ac;}
  :is(#nm-top,#nm-page) .nbox{display:flex;gap:20px;align-items:center;background:#f2fbfa;border-radius:24px;padding:24px 26px;box-shadow:0 12px 30px rgba(11,131,136,.14);border:2px solid #c6e9e5;}
  :is(#nm-top,#nm-page) .nbox img{flex:0 0 auto;width:94px;height:94px;border-radius:50%;object-fit:cover;object-position:50% 12%;border:4px solid #fff;box-shadow:0 6px 16px rgba(11,131,136,.2);background:var(--brand-pale);}
  :is(#nm-top,#nm-page) .axes{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0 0;}
  :is(#nm-top,#nm-page) .axes span{font-size:13px;font-weight:900;color:#fff;border-radius:999px;padding:5px 14px;}
  :is(#nm-top,#nm-page) .axes .a1{background:var(--accent);color:var(--accent-ink);}:is(#nm-top,#nm-page) .axes .a2{background:var(--sky);color:#0f3b63;}:is(#nm-top,#nm-page) .axes .a3{background:var(--brand-lt);color:#08403c;}:is(#nm-top,#nm-page) .axes .a4{background:var(--cv-dk);}
  @media(max-width:640px){:is(#nm-top,#nm-page) .nbox{flex-direction:column;text-align:center;}:is(#nm-top,#nm-page) .axes{justify-content:center;}}
  :is(#nm-top,#nm-page) .cv{background:linear-gradient(135deg,#fff 0,#fde6e6 100%);border-radius:26px;padding:28px 26px;box-shadow:0 16px 40px rgba(244,85,98,.16);position:relative;overflow:hidden;display:flex;gap:22px;align-items:center;border:2px solid #f9cdd0;}
  :is(#nm-top,#nm-page) .cv .cvd{position:absolute;width:120px;height:120px;border-radius:50%;background:#f9cdd0;right:-30px;top:-30px;opacity:.6;}
  :is(#nm-top,#nm-page) .cv img{flex:0 0 auto;width:126px;height:126px;border-radius:50%;object-fit:cover;object-position:50% 8%;border:4px solid #fff;box-shadow:0 6px 16px rgba(244,85,98,.26);background:#fde6e6;position:relative;z-index:1;}
  :is(#nm-top,#nm-page) .cv .body{position:relative;z-index:1;}
  :is(#nm-top,#nm-page) .cv .tag{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:900;font-size:12px;border-radius:999px;padding:4px 13px;margin-bottom:9px;}
  :is(#nm-top,#nm-page) .cv h2{font-size:25px;margin:0 0 6px;font-weight:900;}
  :is(#nm-top,#nm-page) .cv p{font-size:14px;color:#5f6479;margin:0 0 16px;font-weight:600;}
  @media(max-width:640px){:is(#nm-top,#nm-page) .cv{flex-direction:column;text-align:center;padding:28px 18px;}}
  :is(#nm-top,#nm-page) .wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  @media(max-width:820px){:is(#nm-top,#nm-page) .wgrid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:520px){:is(#nm-top,#nm-page) .wgrid{grid-template-columns:1fr;}}
  :is(#nm-top,#nm-page) .wcard{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;background:#fff;border:2px solid var(--line);border-radius:16px;padding:14px 16px;font-weight:800;font-size:14px;transition:transform .1s,border-color .15s,box-shadow .15s;}
  :is(#nm-top,#nm-page) .wcard:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:0 10px 20px rgba(0,0,0,.07);}
  :is(#nm-top,#nm-page) .wcard .qi{flex:0 0 auto;width:30px;height:30px;border-radius:10px;background:var(--brand-pale);color:var(--brand-dk);font-weight:900;display:flex;align-items:center;justify-content:center;font-size:14px;}
  :is(#nm-top,#nm-page) .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:18px;}
  @media(max-width:700px){:is(#nm-top,#nm-page) .steps{grid-template-columns:1fr;}}
  :is(#nm-top,#nm-page) .step{background:#fff;border-radius:20px;padding:26px 22px 22px;position:relative;box-shadow:0 8px 22px rgba(0,0,0,.06);}
  :is(#nm-top,#nm-page) .step .num{position:absolute;top:-18px;left:22px;width:44px;height:44px;border-radius:14px;color:#fff;font-weight:900;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(0,0,0,.12);}
  :is(#nm-top,#nm-page) .step:nth-child(1) .num{background:var(--accent);color:var(--accent-ink);}:is(#nm-top,#nm-page) .step:nth-child(2) .num{background:var(--brand);}:is(#nm-top,#nm-page) .step:nth-child(3) .num{background:var(--coral);}
  :is(#nm-top,#nm-page) .step h3{font-size:16px;margin:12px 0 6px;font-weight:900;}
  :is(#nm-top,#nm-page) .step p{font-size:13.5px;color:#5f6479;margin:0;font-weight:600;}
  /* モバイルは番号バッジの絶対配置（top:-18px）がカード枠からはみ出すので、
     横並びのグリッドに組み替える（2026-08-07 ユーザー指摘）。キッカケカードと同じ考え方。 */
  @media(max-width:700px){
    :is(#nm-top,#nm-page) .steps{gap:12px;}
    :is(#nm-top,#nm-page) .step{
      display:grid;grid-template-columns:auto 1fr;
      grid-template-areas:"num ttl" "num txt";
      column-gap:14px;padding:18px;
    }
    :is(#nm-top,#nm-page) .step .num{
      position:static;grid-area:num;align-self:center;
      width:40px;height:40px;font-size:18px;border-radius:12px;
    }
    :is(#nm-top,#nm-page) .step h3{grid-area:ttl;margin:0 0 3px;align-self:end;}
    :is(#nm-top,#nm-page) .step p{grid-area:txt;align-self:start;}
  }
  :is(#nm-top,#nm-page) .tgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
  @media(max-width:700px){:is(#nm-top,#nm-page) .tgrid{grid-template-columns:1fr;}}
  :is(#nm-top,#nm-page) .tcard{background:#fff;border-radius:20px;padding:22px 24px;font-size:14px;box-shadow:0 8px 22px rgba(0,0,0,.05);border:2px solid #c6e9e5;}
  :is(#nm-top,#nm-page) .tcard h3{font-size:15px;margin:0 0 8px;font-weight:900;}
  :is(#nm-top,#nm-page) .tcard a{color:var(--brand-dk);font-weight:800;}
  :is(#nm-top,#nm-page) .sup{display:flex;gap:12px;align-items:center;}
  :is(#nm-top,#nm-page) .sup .ph{width:56px;height:56px;border-radius:50%;background:#eef0f6;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:10px;color:#5f6479;}
  :is(#nm-top,#nm-page) .final{background:linear-gradient(135deg,#e1f4f2 0,#c6e9e5 100%);border-radius:28px;padding:44px 24px;text-align:center;position:relative;overflow:hidden;}
  :is(#nm-top,#nm-page) .final::before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.25);right:-40px;bottom:-60px;}
  :is(#nm-top,#nm-page) .final::after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.2);left:-20px;top:-30px;}
  :is(#nm-top,#nm-page) .final h2{font-size:26px;margin:0 0 8px;font-weight:900;color:#066c70;position:relative;}
  :is(#nm-top,#nm-page) .final p{font-size:14px;color:#0b6b70;margin:0 0 20px;font-weight:700;position:relative;}
  :is(#nm-top,#nm-page) .final .cta{position:relative;justify-content:center;}
  @keyframes nmf-up{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}
  @keyframes nmf-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-13px);}}
  @keyframes nmf-morph{0%,100%{border-radius:42% 58% 60% 40%/52% 42% 58% 48%;transform:rotate(0);}50%{border-radius:58% 42% 45% 55%/45% 55% 42% 58%;transform:rotate(6deg);}}
  @keyframes nmf-floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-15px);}}
  @keyframes nmf-twinkle{0%,100%{opacity:.35;transform:scale(.8) rotate(-8deg);}50%{opacity:1;transform:scale(1.18) rotate(12deg);}}
  @keyframes nmf-pop{0%{opacity:0;transform:scale(.7);}70%{transform:scale(1.05);}100%{opacity:1;transform:scale(1);}}
  @keyframes nmf-pulse{0%,100%{box-shadow:0 8px 0 var(--cv-dk);}50%{box-shadow:0 8px 0 var(--cv-dk),0 0 0 10px rgba(244,85,98,.16);}}
  @media (prefers-reduced-motion:no-preference){
    :is(#nm-top,#nm-page) .hero-copy>*{animation:nmf-up .7s cubic-bezier(.2,.7,.3,1) both;}
    :is(#nm-top,#nm-page) .hero-copy>*:nth-child(1){animation-delay:.05s}
    :is(#nm-top,#nm-page) .hero-copy>*:nth-child(2){animation-delay:.15s}
    :is(#nm-top,#nm-page) .hero-copy>*:nth-child(3){animation-delay:.25s}
    :is(#nm-top,#nm-page) .hero-copy>*:nth-child(4){animation-delay:.35s}
    :is(#nm-top,#nm-page) .hero-copy>*:nth-child(5){animation-delay:.45s}
    :is(#nm-top,#nm-page) .hero-copy>*:nth-child(6){animation-delay:.55s}
    :is(#nm-top,#nm-page) .hchar{animation:nmf-pop .8s .2s both,nmf-float 4.6s 1s ease-in-out infinite;}
    :is(#nm-top,#nm-page) .blob{animation:nmf-morph 11s ease-in-out infinite;}
    :is(#nm-top,#nm-page) .hero .deco{animation:nmf-floaty 6s ease-in-out infinite;}
    :is(#nm-top,#nm-page) .hero .d2{animation-duration:7.5s;animation-delay:.4s}
    :is(#nm-top,#nm-page) .hero .d3{animation-duration:5s;animation-delay:.2s}
    :is(#nm-top,#nm-page) .hero .d4{animation-duration:8s;animation-delay:.6s}
    :is(#nm-top,#nm-page) .bdot{animation:nmf-floaty 5s ease-in-out infinite;}
    :is(#nm-top,#nm-page) .bd1{animation-duration:6s}:is(#nm-top,#nm-page) .bd2{animation-duration:4.5s;animation-delay:.3s}
    :is(#nm-top,#nm-page) .spark{animation:nmf-twinkle 2.4s ease-in-out infinite;}
    :is(#nm-top,#nm-page) .hero .cta .btn-cv{animation:nmf-pulse 2.6s ease-in-out infinite;}
  }
  /* （スクロール表示アニメは環境依存で要素が非表示のままになるため撤去。
      全セクションは常時表示。ヒーロー登場＋常時モーションのみ残す。） */

  /* トップ本文幅をヘッダー(.l-container=1296px/中身1200px)に合わせる（900px制限を解除・:has対応ブラウザ） */
  .l-mainContent:has(#nm-top){max-width:none;padding-left:0;padding-right:0;}
  /* 淡い面の上のリンクはテーマ青 #1176d4 が 4.37〜4.45:1 で不足 → ブランド濃で 5.9:1 以上 */
  :is(#nm-top,#nm-page) .nbox a{color:var(--brand-dk);}
  #nm-page .notice a,:is(#nm-top,#nm-page) .notice a{color:var(--brand-dk);}

  /* --- 表のコントラスト是正（ライブ実測 2026-07-08） ---
     ① 「追加CSS」の手書き .post_content thead th{background-color:#f08914}（白文字2.53:1）を
        詳細度で上書きし、テーマ変数（=--color_main のティール, 4.55:1）へ戻す。
        追加CSS側は author 起源で後勝ちだが、詳細度 (0,1,3) > (0,1,2) なので順序に関係なく勝つ。
     ② 表内リンクはテーマ青 #1176d4 がゼブラ行 #fafafa で 4.41:1 と不足 → ブランド濃で 5.94:1。 */
  body .post_content thead th,body .post_content thead td{background-color:var(--thead-color--bg,var(--color_main));}
  .post_content .wp-block-table a{color:#066c70;}

  /* テーマh2の左縦帯(border-left)を全h2で除去（診断CV・最終CTAのクラス無しh2にも効かせる） */
  :is(#nm-top,#nm-page) h2{border-left:0;padding-left:0;}

/* ============================================================
   下層固定ページ（#nm-page スコープ）｜トップの部品を継承して使う
   ・共通部品（.sec / h2.h / .btn / .chips / .steps / .cv / .tgrid / .final /
     背景色クラス p-y,p-c,p-m,p-s ほか）は上の :is(#nm-top,#nm-page) 定義を継承。
   ・ここは「下層専用の部品」と「情報系ページの抑えめトーン(.calm)」だけを足す。
   ============================================================ */
  /* container-type: サイドバー有無で本文カラム幅が変わるため、ビューポートではなく
     「本文カラムの幅」で段組みを切り替える（@container を使う） */
  #nm-page{max-width:1080px;margin:0 auto;padding:0 16px;container-type:inline-size;}
  #nm-page .sec{padding:38px 0;}
  /* テーマのページタイトル(h1.c-pageTitle)とヒーローのH1が二重表示になるため、
     #nm-page を使うページではテーマ側を隠し、見出しをヒーローのH1に一本化する。
     （.c-pageTitle は .l-mainContent__inner 直下＝隠しても空の余白は残らない） */
  body:has(#nm-page) .c-pageTitle{display:none;}
  #nm-page .lead{font-size:15.5px;color:#5a5f74;font-weight:600;line-height:1.9;margin:0 0 16px;}
  #nm-page .notice{font-size:12.5px;color:var(--mid);font-weight:700;background:#fbfbfd;border:2px solid var(--line);border-radius:14px;padding:12px 16px;margin:0 0 16px;}

  /* --- ページヒーロー（トップより小ぶり） --- */
  #nm-page .phero{position:relative;overflow:hidden;border-radius:26px;margin:6px 0 8px;background:linear-gradient(160deg,#e1f4f2 0,#d3eeeb 45%,#fde6e6 100%);}
  #nm-page .phero .deco{position:absolute;border-radius:50%;z-index:0;}
  #nm-page .phero .d1{width:96px;height:96px;background:#fec352;left:-28px;top:26px;opacity:.5;}
  #nm-page .phero .d2{width:44px;height:44px;background:var(--mint);right:9%;top:20px;opacity:.5;}
  #nm-page .phero .d3{width:20px;height:20px;background:var(--sky);right:24%;bottom:24px;opacity:.65;}
  #nm-page .phero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:center;padding:34px 32px 30px;}
  #nm-page .phero h1{font-size:33px;line-height:1.36;font-weight:900;margin:0 0 12px;border-left:0;padding-left:0;}
  #nm-page .phero h1 .mk{position:relative;}
  #nm-page .phero h1 .mk::after{content:"";position:absolute;left:-3px;right:-3px;bottom:3px;height:12px;background:#fec352;border-radius:8px;z-index:0;transform:rotate(-1deg);}
  #nm-page .phero h1 .mk>span{position:relative;z-index:1;}
  #nm-page .psub{font-size:15px;color:#5a5f74;font-weight:600;margin:0 0 18px;}
  #nm-page .pnote{font-size:12.5px;color:var(--mid);margin:13px 0 0;font-weight:700;}
  #nm-page .pvis{position:relative;display:flex;justify-content:center;align-items:center;}
  #nm-page .pvis .blob{position:absolute;width:210px;height:210px;background:radial-gradient(circle at 38% 32%,#7fd9cf,#0b8388);border-radius:42% 58% 60% 40%/52% 42% 58% 48%;box-shadow:0 16px 38px rgba(11,131,136,.26);}
  #nm-page .pchar{position:relative;z-index:2;width:190px;max-width:74%;border-radius:50%;background:#fff;border:6px solid #fff;box-shadow:0 18px 38px rgba(11,131,136,.22);}
  /* 本文カラムが狭い（サイドバー有り＝実測753px 等）ときはヒーローを縦積みにする */
  @container (max-width:860px){
    #nm-page .phero-in{grid-template-columns:1fr;text-align:center;padding:28px 22px 26px;}
    #nm-page .phero h1{font-size:28px;}
    #nm-page .phero .chips{justify-content:center;}#nm-page .phero .cta{justify-content:center;}
    #nm-page .pvis{order:-1;}#nm-page .pchar{width:152px;}#nm-page .pvis .blob{width:172px;height:172px;}
  }
  @container (max-width:560px){
    #nm-page .phero-in{padding:26px 18px 24px;}
    #nm-page .phero h1{font-size:25px;}
    #nm-page .pchar{width:130px;}#nm-page .pvis .blob{width:150px;height:150px;}
  }
  /* @container 非対応ブラウザ向けのフォールバック（狭いビューポート） */
  @media(max-width:820px){
    #nm-page .phero-in{grid-template-columns:1fr;text-align:center;padding:26px 18px 24px;}
    #nm-page .phero h1{font-size:25px;}
    #nm-page .phero .chips{justify-content:center;}#nm-page .phero .cta{justify-content:center;}
    #nm-page .pvis{order:-1;}#nm-page .pchar{width:130px;}#nm-page .pvis .blob{width:150px;height:150px;}
  }

  /* --- お悩みカード --- */
  #nm-page .paingrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
  @media(max-width:640px){#nm-page .paingrid{grid-template-columns:1fr;}}
  #nm-page .pain{display:flex;gap:12px;align-items:flex-start;background:#fff;border:2px solid var(--line);border-radius:18px;padding:16px 18px;font-weight:700;font-size:14px;color:#4d5266;}
  #nm-page .pain .pi{flex:0 0 auto;width:34px;height:34px;border-radius:12px;background:var(--brand-pale);color:var(--brand-dk);display:flex;align-items:center;justify-content:center;font-size:17px;}

  /* --- 理由カード（背景色は p-y / p-c / p-m / p-s を併用） --- */
  #nm-page .rgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
  @media(max-width:700px){#nm-page .rgrid{grid-template-columns:1fr;}}
  #nm-page .rcard{border-radius:20px;padding:20px 22px;}
  #nm-page .rcard .ic{width:48px;height:48px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 6px 14px rgba(0,0,0,.07);}
  #nm-page .rcard h3{font-size:15.5px;font-weight:900;margin:11px 0 6px;}
  #nm-page .rcard p{font-size:13.5px;color:#5f6479;font-weight:600;margin:0;}

  /* --- ランキング（順位＋4軸スコアバー） --- */
  #nm-page .ranks{display:grid;gap:12px;}
  #nm-page .rank{display:grid;grid-template-columns:52px 1fr auto 210px;gap:16px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:20px;padding:15px 18px;transition:transform .1s,box-shadow .15s,border-color .15s;}
  #nm-page .rank:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.07);border-color:var(--brand);}
  #nm-page .rank .no{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:19px;background:var(--line);color:#6b7086;}
  #nm-page .rank:nth-child(1) .no{background:var(--accent);color:var(--accent-ink);}
  #nm-page .rank:nth-child(2) .no{background:#dfe3ec;color:#565b6d;}
  #nm-page .rank:nth-child(3) .no{background:#f3ddc0;color:#7a5a2a;}
  #nm-page .rank .nm{min-width:0;}
  #nm-page .rank .nm a{font-weight:900;font-size:16px;text-decoration:none;color:var(--ink);}
  #nm-page .rank .nm a:hover{color:var(--brand-dk);}
  #nm-page .rank .memo{display:block;font-size:12.5px;color:#5f6479;font-weight:600;margin-top:3px;}
  #nm-page .rank .tot{font-weight:900;font-size:21px;color:var(--brand-dk);white-space:nowrap;text-align:center;}
  #nm-page .rank .tot small{display:block;font-size:10.5px;color:var(--mid);font-weight:800;}
  #nm-page .bars{display:grid;gap:5px;}
  #nm-page .bar{display:grid;grid-template-columns:44px 1fr 26px;gap:8px;align-items:center;font-size:11.5px;font-weight:800;color:var(--mid);}
  #nm-page .bar .tr{height:7px;border-radius:999px;background:var(--line);overflow:hidden;}
  #nm-page .bar .tr i{display:block;height:100%;border-radius:999px;}
  #nm-page .bar.b1 .tr i{background:var(--accent);}
  #nm-page .bar.b2 .tr i{background:var(--sky);}
  #nm-page .bar.b3 .tr i{background:var(--brand-lt);}
  #nm-page .bar.b4 .tr i{background:var(--coral);}
  /* 本文カラムが狭いときはスコアバーを下段へ回す（サイドバー有りページを含む） */
  @container (max-width:800px){
    #nm-page .rank{grid-template-columns:44px 1fr auto;}
    #nm-page .rank .bars{grid-column:1/-1;}
    #nm-page .rank .no{width:44px;height:44px;font-size:17px;}
  }
  @media(max-width:760px){
    #nm-page .rank{grid-template-columns:44px 1fr auto;}
    #nm-page .rank .bars{grid-column:1/-1;}
    #nm-page .rank .no{width:44px;height:44px;font-size:17px;}
  }

  /* --- フォーム枠 --- */
  #nm-page .formbox{background:#fff;border:2px solid #c6e9e5;border-radius:24px;padding:26px 24px;box-shadow:0 14px 34px rgba(11,131,136,.12);}
  #nm-page .formbox .ftag{display:inline-block;background:var(--cv-dk);color:#fff;font-weight:900;font-size:12px;border-radius:999px;padding:5px 14px;margin:0 0 12px;}
  #nm-page .formbox .fnote{font-size:13.5px;color:#5f6479;font-weight:600;margin:0 0 14px;}
  /* CF7: 子テーマ既存の .cta-form は「ヒーロー画像に重ねる」用途で
     width:90% / margin:-200px auto 0 / 独自カード背景 が効く。
     .formbox の中では打ち消して、カードの二重化と上部タグへの食い込みを解消する。
     （#nm-page .formbox 配下に限定するので、他ページの .cta-form は不変） */
  #nm-page .formbox .cta-form{width:auto;margin:0;padding:0;background:transparent;border-radius:0;}
  /* CF7フォームに内蔵の見出し（H3「無料相談・お申し込みフォーム」）はセクション見出しと重複するため隠す */
  #nm-page .formbox .wpcf7 h3{display:none;}

  /* --- 定義リスト（会社概要・特商法） --- */
  #nm-page .dl{border:2px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;margin:0;}
  #nm-page .dl .row{display:grid;grid-template-columns:210px 1fr;border-top:2px solid var(--line);}
  #nm-page .dl .row:first-child{border-top:0;}
  #nm-page .dl dt{background:#fafbfe;font-weight:900;font-size:13.5px;padding:14px 16px;color:#4d5266;margin:0;}
  #nm-page .dl dd{padding:14px 16px;margin:0;font-size:14px;font-weight:600;color:#4d5266;}
  @media(max-width:640px){#nm-page .dl .row{grid-template-columns:1fr;}#nm-page .dl dd{padding-top:0;}}

  /* --- プロフィール（監修者） --- */
  #nm-page .profile{display:flex;gap:18px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:22px;padding:22px 24px;}
  #nm-page .profile .ph,#nm-page .profile img{width:96px;height:96px;border-radius:50%;flex:0 0 auto;object-fit:cover;border:4px solid #fff;box-shadow:0 6px 16px rgba(0,0,0,.1);background:#eef0f6;display:flex;align-items:center;justify-content:center;color:#5f6479;font-size:11px;}
  @media(max-width:560px){#nm-page .profile{flex-direction:column;text-align:center;}}

  /* --- 情報系ページの抑えめトーン（会社概要・ポリシー・特商法など） --- */
  #nm-page.calm .phero{background:linear-gradient(160deg,#f4f9f9 0,#e7f1f1 100%);}
  #nm-page.calm .phero .deco{display:none;}
  #nm-page.calm .phero h1 .mk::after{background:#cfe6e4;height:10px;}
  #nm-page.calm .phero-in{grid-template-columns:1fr;padding:30px 30px 26px;}
  #nm-page.calm h2.h,#nm-page.calm .hsub{text-align:left;}
  #nm-page.calm h2.h{font-size:23px;}
  #nm-page.calm h2.h .em::after{background:#cfe6e4;}

  /* --- コントラスト是正（ライブ実測監査 2026-07-08） --- */
  /* 淡色タイル上のリンクはテーマ青 #1176d4 だと 3.86〜4.41:1 で不足 → ブランド濃で 5.2:1 以上 */
  #nm-page .rcard h3 a,#nm-page .rcard p a,#nm-page .pain a{color:var(--brand-dk);}
  /* CF7の「必須」バッジは既存 .req-tag ルールが !important のため、
     そちら（ヘッダー部）の色自体を #c25100 に修正して 4.70:1 を確保している。 */

  /* --- ヒーローの登場モーション（キーフレームはトップ定義を再利用） --- */
  @media (prefers-reduced-motion:no-preference){
    #nm-page .phero-copy>*{animation:nmf-up .6s cubic-bezier(.2,.7,.3,1) both;}
    #nm-page .phero-copy>*:nth-child(1){animation-delay:.04s}
    #nm-page .phero-copy>*:nth-child(2){animation-delay:.12s}
    #nm-page .phero-copy>*:nth-child(3){animation-delay:.2s}
    #nm-page .phero-copy>*:nth-child(4){animation-delay:.28s}
    #nm-page .phero-copy>*:nth-child(5){animation-delay:.36s}
    #nm-page .phero-copy>*:nth-child(6){animation-delay:.44s}
    #nm-page .pchar{animation:nmf-pop .7s .15s both,nmf-float 5s 1s ease-in-out infinite;}
    #nm-page .pvis .blob{animation:nmf-morph 12s ease-in-out infinite;}
    #nm-page .phero .deco{animation:nmf-floaty 6.5s ease-in-out infinite;}
    #nm-page .phero .d2{animation-duration:7.5s;animation-delay:.3s}
    #nm-page .phero .d3{animation-duration:5.4s;animation-delay:.15s}
  }

/* ============================================================
   ヘッダー右上のCVボタン（無料申込/相談）
   ヘッダー72pxの中でボタン(43px)が上端に張り付いていたため、
   上に14pxのマージンを入れてほぼ上下センターにする（2026-07-10・実測14/15px）。
   ※ .w-header__inner/.w-header__item/.p-blogParts は height:100% 連鎖で
     flex センタリングが効かない（実測）。SWELL本体がボタンの margin を
     !important で当てているため、こちらも !important が必要。
   ============================================================ */
.l-header .w-header__item .swell-block-button{
  margin-top:14px !important;
}