@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* ============================================================
   MERGE V1 記事スタイル — Cocoon子テーマ style.css 追記用
   LP（260727_merge-lp_v1 / page-merge-lp.php）とトーンを揃える。
   クリーム地 × クリムゾン#E0115F × 丸ゴシック × ステッカーUI
   貼り付け先：外観 → テーマファイルエディター → Cocoon Child → style.css の末尾
   ============================================================ */

/* ---- フォント読み込み（style.cssの既存@import群があればその直後でも可）---- */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=M+PLUS+Rounded+1c:wght@400;500;700;800;900&display=swap');

/* ---- LPと同じデザイントークン ---- */
:root{
  --mg-cream:#FFFCF4; --mg-side:#FFF3D9;
  --mg-ink:#2A2740; --mg-grey:#6b667e; --mg-faint:#a7a2b8;
  --mg-crimson:#E0115F; --mg-crimson-t:#FFE5EF;
  --mg-sun:#FFB100;   --mg-sun-t:#FFF2CF;
  --mg-mint:#12B886;  --mg-mint-t:#DDF7EE;
  --mg-sky:#3D93F5;   --mg-sky-t:#E4F0FF;
  --mg-coral:#FF6B5E; --mg-coral-t:#FFE7E3;
  --mg-grape:#845EF7; --mg-grape-t:#ECE5FF;
  --mg-peach:#FF922B; --mg-peach-t:#FFEBD8;
  --mg-jp:"M PLUS Rounded 1c",sans-serif;
  --mg-en:"Fredoka","M PLUS Rounded 1c",sans-serif;
  --mg-pop:cubic-bezier(.34,1.56,.64,1);
  --mg-ease:cubic-bezier(.16,.84,.44,1);
}

/* ============================================================
   1. 全体：地色・書体
   ============================================================ */
body{
  font-family:var(--mg-jp);
  font-weight:500;
  background:var(--mg-side);
  color:var(--mg-ink);
  line-height:1.9;
}
::selection{background:var(--mg-sun);color:var(--mg-ink)}

/* 本文カラム・サイドバーを「白いカード」に（LPの中央パネルと同じ扱い）*/
.main{
  background:#fff;
  border:3px solid var(--mg-ink);
  border-radius:26px;
  box-shadow:10px 10px 0 var(--mg-crimson-t);
  padding:32px;
}
.sidebar{background:transparent}
.sidebar .widget,
.sidebar > div{
  background:#fff;
  border:3px solid var(--mg-ink);
  border-radius:22px;
  box-shadow:5px 6px 0 var(--mg-crimson-t);
  padding:18px;
  margin-bottom:22px;
}
/* サイドバー見出し：ステッカーバッジ */
.sidebar h3{
  background:#fff;
  border:2.5px solid var(--mg-ink);
  border-radius:999px;
  box-shadow:3px 3px 0 var(--mg-sun);
  font-family:var(--mg-jp);
  font-weight:800;
  font-size:14px;
  color:var(--mg-ink);
  padding:8px 16px;
  display:inline-block;
  margin:0 0 14px;
}

/* ============================================================
   2. ヘッダー・グローバルナビ・フッター
   ============================================================ */
.header-container,
#header{
  background:var(--mg-cream);
  border-bottom:3px solid var(--mg-ink);
}
.site-name-text{
  font-family:var(--mg-jp);
  font-weight:900;
  color:var(--mg-ink);
}
.tagline{color:var(--mg-grey);font-weight:700}
/* グロナビ：ホバーで黄色の下線がスッと伸びる（LPと同じ動き）*/
.navi-in > ul > li > a{
  font-weight:800;
  color:var(--mg-ink);
  position:relative;
}
.navi-in > ul > li > a::after{
  content:"";
  position:absolute;left:10px;right:10px;bottom:6px;height:4px;
  background:var(--mg-sun);border-radius:4px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--mg-ease);
}
.navi-in > ul > li > a:hover{background:transparent;color:var(--mg-ink)}
.navi-in > ul > li > a:hover::after{transform:scaleX(1)}

.footer{
  background:var(--mg-ink);
  color:#d4d1e0;
  border-top:none;
}
.footer a{color:#fff}
.footer .footer-bottom-logo .site-name-text{color:#fff}

/* パンくず */
.breadcrumb{color:var(--mg-grey);font-size:12.5px;font-weight:700}
.breadcrumb a{color:var(--mg-grey)}

#header .site-name,
.header .site-name,
#header .site-name a,
.header .site-name a,
#header .site-name-text,
.header .site-name-text,
#header . tagline,
.header .tagline{color:var(--mg-ink)!important}

/* ============================================================
   3. 記事タイトル・本文見出し
   ============================================================ */
.entry-title,
.article h1{
  font-family:var(--mg-jp);
  font-weight:900;
  line-height:1.45;
  color:var(--mg-ink);
}
/* h2：白カード＋インク縁＋クリムゾンの落ち影（LPの見出しカードと同じ）*/
.article h2{
  background:#fff;
  border:2.5px solid var(--mg-ink);
  border-radius:16px;
  box-shadow:4px 5px 0 var(--mg-crimson);
  font-family:var(--mg-jp);
  font-weight:900;
  font-size:22px;
  line-height:1.5;
  color:var(--mg-ink);
  padding:14px 20px;
  margin-top:2.2em;
}
/* h3：太下線＋黄色マーカー（左帯は使わない）*/
.article h3{
  border:none;
  border-bottom:3px solid var(--mg-ink);
  background:linear-gradient(transparent 62%,var(--mg-sun-t) 62%);
  font-family:var(--mg-jp);
  font-weight:900;
  font-size:19px;
  padding:6px 4px 8px;
}
/* h4：シンプルな点線下線 */
.article h4{
  border:none;
  border-bottom:2.5px dashed var(--mg-ink);
  font-weight:800;
  font-size:16.5px;
  padding:4px 2px 6px;
}

/* 投稿日・カテゴリラベル */
.post-date,.post-update{color:var(--mg-faint);font-family:var(--mg-en)}
.cat-label,
.article .cat-link{
  background:var(--mg-crimson);
  color:#fff;
  border:2px solid var(--mg-ink);
  border-radius:999px;
  font-weight:800;
  font-size:11px;
  padding:3px 12px;
}

/* ============================================================
   4. 本文の基本要素
   ============================================================ */
.entry-content{font-size:16px}
.entry-content a:not(.btn):not(.wp-block-button__link){
  color:var(--mg-crimson);
  font-weight:800;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
/* マーカー（Cocoonのマーカー装飾をLPの蛍光イエローに統一）*/
.marker,.entry-content .marker{
  background:linear-gradient(transparent 55%,rgba(255,177,0,.45) 55%);
}
.marker-red{background:linear-gradient(transparent 55%,var(--mg-crimson-t) 55%)}
.marker-blue{background:linear-gradient(transparent 55%,var(--mg-sky-t) 55%)}

/* 引用：白カード＋グレープの影 */
.article blockquote{
  background:#fff;
  border:2.5px solid var(--mg-ink);
  border-left:2.5px solid var(--mg-ink);
  border-radius:18px;
  box-shadow:4px 5px 0 var(--mg-grape);
  color:var(--mg-grey);
  padding:20px 22px;
}

/* 表：LPの比較表と同じルック */
.article table{
  border-collapse:separate;
  border-spacing:0;
  border:2.5px solid var(--mg-ink);
  border-radius:16px;
  overflow:hidden;
}
.article th{
  background:var(--mg-crimson-t);
  color:var(--mg-ink);
  font-weight:800;
  border:none;
  border-bottom:2.5px solid var(--mg-ink);
  border-right:2px solid var(--mg-crimson-t);
}
.article td{
  border:none;
  border-bottom:2px solid var(--mg-crimson-t);
  border-right:2px solid var(--mg-crimson-t);
  background:#fff;
}
.article tr:last-child td{border-bottom:none}
.article th:last-child,.article td:last-child{border-right:none}

/* リスト */
.entry-content ul li::marker{color:var(--mg-crimson)}
.entry-content ol li::marker{color:var(--mg-crimson);font-weight:800}

/* ============================================================
   5. Cocoonボックス（案内枠）をLPのカードに統一
   ============================================================ */
.information-box,.memo-box,.alert-box,.question-box,
.ok-box,.ng-box,.primary-box,.secondary-box,.info-box,
.common-icon-box,.blank-box{
  border:2.5px solid var(--mg-ink);
  border-radius:18px;
  padding:18px 20px;
}
.information-box,.info-box{background:var(--mg-sky-t)}
.memo-box{background:var(--mg-sun-t)}
.alert-box,.ng-box{background:var(--mg-coral-t)}
.question-box{background:var(--mg-grape-t)}
.ok-box{background:var(--mg-mint-t)}
.primary-box{background:var(--mg-crimson-t)}
.secondary-box,.blank-box{background:var(--mg-cream)}

/* 白抜きボックス（タブ見出し付き等）*/
.tab-caption-box,.label-box{
  border:2.5px solid var(--mg-ink);
  border-radius:18px;
}

/* 吹き出し */
.speech-wrap .speech-balloon{
  border:2.5px solid var(--mg-ink);
  border-radius:18px;
  background:#fff;
}
.speech-wrap .speech-person .speech-icon img{
  border:2.5px solid var(--mg-ink);
}

/* ============================================================
   6. ボタン（LPのステッカーボタンと同じ挙動）
   ============================================================ */
.entry-content .btn,
.entry-content .btn-wrap a,
.wp-block-button__link,
.comment-btn,#submit{
  font-family:var(--mg-jp);
  font-weight:800;
  background:var(--mg-crimson);
  color:#fff;
  border:3px solid var(--mg-ink);
  border-radius:999px;
  box-shadow:4px 5px 0 var(--mg-ink);
  transition:transform .12s var(--mg-ease),box-shadow .12s var(--mg-ease),background-color .2s;
}
.entry-content .btn:hover,
.entry-content .btn-wrap a:hover,
.wp-block-button__link:hover,
.comment-btn:hover,#submit:hover{
  background:var(--mg-ink);
  color:#fff;
  transform:translate(2px,3px);
  box-shadow:1px 2px 0 var(--mg-ink);
  opacity:1;
}

/* ============================================================
   7. 目次（Cocoon標準TOC）
   ============================================================ */
.toc{
  background:#fff;
  border:3px solid var(--mg-ink);
  border-radius:22px;
  box-shadow:5px 6px 0 var(--mg-sun);
  padding:20px 24px;
}
.toc-title{
  font-family:var(--mg-jp);
  font-weight:900;
  color:var(--mg-ink);
}
/* --- 階層の見分け方（LPの左レール目次と同じ思想）---
   H2 = 黒太字＋回転した番号チップ（章）
   H3 = グレー中字＋クリムゾンのダッシュ（節）
   H4以下 = さらに小さく薄く＋ドット（補足）
   ※本文用のピンク下線リンクは目次内では無効化する（.entry-content の
     リンクルールより詳細度を上げるため .entry-content .toc を併記）*/
/* ※Cocoonは設定により ol / ul どちらでも目次を出力するため :is(ol,ul) で両対応 */
.toc-content :is(ol,ul){counter-reset:mgtoc;margin:0;padding-left:0}

/* 第1階層（H2）：番号チップ＋黒太字 */
.toc-content > :is(ol,ul) > li{counter-increment:mgtoc;list-style:none;position:relative;padding-left:34px;margin:10px 0}
.toc-content > :is(ol,ul) > li::before{
  content:counter(mgtoc);
  position:absolute;left:0;top:3px;
  width:24px;height:24px;
  background:#fff;border:2px solid var(--mg-ink);border-radius:8px;
  font-family:var(--mg-en);font-weight:700;font-size:12px;
  display:grid;place-items:center;color:var(--mg-ink);
  transform:rotate(-4deg);
}
.toc-content a,
.entry-content .toc .toc-content a{
  color:var(--mg-ink);
  font-weight:800;
  font-size:15px;
  line-height:1.6;
  text-decoration:none;
}
.toc-content a:hover,
.entry-content .toc .toc-content a:hover{color:var(--mg-crimson);text-decoration:none}

/* 第2階層（H3）：一段下げ＋グレー中字＋ダッシュ */
.toc-content :is(ol,ul) :is(ol,ul){margin:6px 0 2px;padding-left:2px}
.toc-content :is(ol,ul) :is(ol,ul) li{list-style:none;counter-increment:none;position:relative;padding-left:18px;margin:4px 0}
.toc-content :is(ol,ul) :is(ol,ul) li::before{
  content:"—";
  position:absolute;left:0;top:0;
  width:auto;height:auto;background:none;border:none;transform:none;
  color:var(--mg-crimson);font-weight:800;font-size:12px;line-height:1.9;
  display:inline;
}
.toc-content :is(ol,ul) :is(ol,ul) a,
.entry-content .toc .toc-content :is(ol,ul) :is(ol,ul) a{color:var(--mg-grey);font-weight:700;font-size:13.5px}
.toc-content :is(ol,ul) :is(ol,ul) a:hover,
.entry-content .toc .toc-content :is(ol,ul) :is(ol,ul) a:hover{color:var(--mg-crimson)}

/* 第3階層以下（H4〜H6）：さらに小さく・薄く＋ドット */
.toc-content :is(ol,ul) :is(ol,ul) :is(ol,ul) li{padding-left:16px;margin:2px 0}
.toc-content :is(ol,ul) :is(ol,ul) :is(ol,ul) li::before{content:"·";font-size:17px;top:-3px}
.toc-content :is(ol,ul) :is(ol,ul) :is(ol,ul) a,
.entry-content .toc .toc-content :is(ol,ul) :is(ol,ul) :is(ol,ul) a{color:var(--mg-faint);font-weight:500;font-size:12.5px}

/* ============================================================
   8. 記事カード（一覧・関連記事・前後記事）
   ============================================================ */
.entry-card-wrap,.related-entry-card-wrap,
.prev-post,.next-post{
  background:#fff;
  border:3px solid var(--mg-ink);
  border-radius:20px;
  box-shadow:5px 6px 0 var(--mg-peach);
  overflow:hidden;
  margin-bottom:22px;
  transition:transform .28s var(--mg-pop),box-shadow .28s var(--mg-ease);
}
.entry-card-wrap:hover,.related-entry-card-wrap:hover,
.prev-post:hover,.next-post:hover{
  transform:translate(-2px,-4px);
  box-shadow:8px 11px 0 var(--mg-peach);
}
.entry-card-title,.related-entry-card-title{
  font-family:var(--mg-jp);
  font-weight:900;
}
.entry-card-snippet,.related-entry-card-snippet{color:var(--mg-grey)}
.related-entry-heading,.comment-title{
  font-family:var(--mg-jp);font-weight:900;
  border:none;
}

/* 著者ボックス */
.author-box{
  border:3px solid var(--mg-ink);
  border-radius:22px;
  box-shadow:5px 6px 0 var(--mg-mint);
  background:#fff;
}
.author-box .author-thumb img{border:2.5px solid var(--mg-ink);border-radius:50%}

/* ============================================================
   9. ページネーション・トップへ戻る・モバイル
   ============================================================ */
.pagination .page-numbers{
  background:#fff;
  border:2.5px solid var(--mg-ink);
  border-radius:12px;
  color:var(--mg-ink);
  font-family:var(--mg-en);
  font-weight:700;
  box-shadow:2px 3px 0 var(--mg-ink);
}
.pagination .page-numbers.current{
  background:var(--mg-crimson);
  color:#fff;
  border-color:var(--mg-ink);
}
.pagination .page-numbers:hover{transform:translate(1px,2px);box-shadow:1px 1px 0 var(--mg-ink)}

.go-to-top-button{
  background:var(--mg-sun);
  color:var(--mg-ink);
  border:2.5px solid var(--mg-ink);
  border-radius:14px;
  box-shadow:3px 4px 0 var(--mg-ink);
}

/* モバイルメニュー（下部固定ボタン）*/
.mobile-menu-buttons{
  background:rgba(255,252,244,.96);
  border-top:3px solid var(--mg-ink);
}
.mobile-menu-buttons .menu-button > a{color:var(--mg-ink);font-weight:800}

/* ============================================================
   10. レスポンシブ微調整
   ============================================================ */
@media screen and (max-width:834px){
  .main{padding:20px 14px;border-radius:20px;border-width:2.5px;box-shadow:6px 6px 0 var(--mg-crimson-t)}
  .article h2{font-size:19px;padding:12px 16px}
  .article h3{font-size:17px}
}
@media screen and (max-width:480px){
  .main{padding:16px 10px}
}

/* ============================================================
   11. 中央揃え
   ============================================================ */
.content-in{justify-content:center}
.sidebar{display:none}
.main{float:none;width:100%;max-width:860px;margin:0 auto}

/* ============================================================
   ピラーページ（エディター版）専用スタイル — merge v1 世界観
   ------------------------------------------------------------
   前提：
   ・cocoon-merge-article.css より「後ろ」に貼り付けること
     （--mg-* のデザイントークンと記事用スタイルを利用するため）
   ・ページ全体を1つのグループブロックで包み、そのグループの
     「追加CSSクラス」に mg-pillar を指定する。
     ここのスタイルはすべて .mg-pillar 配下にだけ効く
   ============================================================ */

/* ------------------------------------------------------------
   0. 基本
   ------------------------------------------------------------ */
.mg-pillar{font-family:var(--mg-jp)}
.mg-pillar h1,.mg-pillar h2,.mg-pillar h3{font-family:var(--mg-jp);font-weight:900}
/* 見出し内の「斜体（em）」を、LPと同じ黄色ハイライトに変換 */
.mg-pillar h1 em,.mg-pillar h2 em{
  font-style:normal;position:relative;z-index:0;white-space:nowrap;
}
.mg-pillar h1 em::after,.mg-pillar h2 em::after{
  content:"";position:absolute;left:-.05em;right:-.05em;bottom:.06em;height:.42em;
  background:var(--mg-sun);opacity:.5;z-index:-1;border-radius:6px;
}

/* ------------------------------------------------------------
   1. セクション（グループに mg-sect ＋ 色クラスを併記）
      例：追加CSSクラス「mg-sect mg-mint」
   ------------------------------------------------------------ */
.mg-sect{background:var(--c-t,#fff);border-radius:26px;padding:40px 28px;margin:44px 0}
.mg-mint{--c:var(--mg-mint);--c-t:var(--mg-mint-t)}
.mg-sky{--c:var(--mg-sky);--c-t:var(--mg-sky-t)}
.mg-sun{--c:var(--mg-sun);--c-t:var(--mg-sun-t)}
.mg-coral{--c:var(--mg-coral);--c-t:var(--mg-coral-t)}
.mg-grape{--c:var(--mg-grape);--c-t:var(--mg-grape-t)}
.mg-peach{--c:var(--mg-peach);--c-t:var(--mg-peach-t)}
.mg-crimsonsec{--c:var(--mg-crimson);--c-t:var(--mg-crimson-t)}

/* セクション内h2：記事用の白カード見出しを継承しつつ、影をセクション色に */
.article .mg-pillar h2{box-shadow:4px 5px 0 var(--c,var(--mg-crimson));margin-top:0}

/* セクションタグ（段落に mg-tag）：ステッカーチップ */
.mg-pillar .mg-tag{
  display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.12em;
  color:var(--mg-ink);background:#fff;border:2.5px solid var(--mg-ink);
  border-radius:999px;padding:7px 16px;margin:0 0 14px;
  box-shadow:3px 3px 0 var(--c,var(--mg-crimson));
}
/* セクションリード文（段落に mg-sub） */
.mg-pillar .mg-sub{color:var(--mg-grey);font-size:14.5px;line-height:1.95}
/* 注記（段落に mg-note） */
.mg-pillar .mg-note{color:var(--mg-grey);font-size:12px;line-height:1.8}

/* ------------------------------------------------------------
   2. ヒーロー（グループに mg-hero）
   ------------------------------------------------------------ */
.mg-pillar .mg-hero{
  background:radial-gradient(70% 55% at 82% 8%,var(--mg-crimson-t),transparent 60%),
             radial-gradient(60% 55% at 10% 92%,var(--mg-sky-t),transparent 60%),var(--mg-cream);
  border-radius:26px;padding:40px 28px;margin:0 0 24px;
}
.mg-pillar .mg-eyebrow{
  display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.1em;
  background:#fff;border:2.5px solid var(--mg-ink);border-radius:999px;
  padding:7px 16px;box-shadow:3px 3px 0 var(--mg-sun);transform:rotate(-2deg);margin:0 0 14px;
}
.mg-pillar .mg-hero h1{font-size:clamp(26px,4vw,38px);line-height:1.35;margin:0 0 14px}
.mg-pillar .mg-lead{font-size:16.5px;line-height:1.95;color:#514c66}
/* FVイラスト（画像ブロックに mg-fv） */
.mg-pillar .mg-fv img{
  border:3px solid var(--mg-ink);border-radius:32px 32px 32px 10px;
  box-shadow:6px 7px 0 var(--mg-crimson);
}
/* ポイントカード（グループに mg-pointcard） */
.mg-pillar .mg-pointcard{
  display:inline-block;background:#fff;border:3px solid var(--mg-ink);border-radius:22px;
  box-shadow:5px 6px 0 var(--mg-crimson);padding:14px 22px;margin:10px 0 0;
}
.mg-pillar .mg-pointcard p{margin:0;font-size:11.5px;font-weight:700;color:var(--mg-grey)}
.mg-pillar .mg-pointcard .mg-pt{
  font-family:var(--mg-en);font-weight:700;font-size:36px;line-height:1.2;color:var(--mg-crimson);
}

/* ------------------------------------------------------------
   3. クイックアクセス（ボタンブロック群に mg-quick）
   ------------------------------------------------------------ */
.mg-pillar .mg-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 10px}
.mg-pillar .mg-quick .wp-block-button{width:100%}
.article .mg-pillar .mg-quick .wp-block-button__link{
  display:block;width:100%;background:#fff;color:var(--mg-ink);
  font-size:13.5px;padding:14px 10px;border-radius:18px;
  border:2.5px solid var(--mg-ink);box-shadow:3px 4px 0 var(--mg-crimson);
}
.article .mg-pillar .mg-quick .wp-block-button__link:hover{background:var(--mg-sun-t);color:var(--mg-ink)}

/* ------------------------------------------------------------
   4. 汎用カード（グループに mg-card）／白抜き内箱（mg-perk）
   ------------------------------------------------------------ */
.mg-pillar .mg-card{
  background:#fff;border:3px solid var(--mg-ink);border-radius:22px;
  box-shadow:5px 6px 0 var(--c,var(--mg-crimson));padding:24px;
}
.mg-pillar .mg-perk{
  background:#fff;border:2px solid var(--mg-ink);border-radius:14px;
  padding:14px 16px;font-size:14px;line-height:1.8;
}
.mg-pillar .mg-verdict{
  background:#fff;border:2.5px solid var(--mg-ink);border-radius:18px;
  box-shadow:4px 5px 0 var(--c,var(--mg-mint));padding:18px 20px;
}

/* ------------------------------------------------------------
   5. 開閉パネル（詳細ブロック）
      mg-toggle＝診断・比較用／mg-qa＝Q&A用
   ------------------------------------------------------------ */
.mg-pillar details.wp-block-details{
  background:#fff;border:3px solid var(--mg-ink);border-radius:22px;
  box-shadow:5px 6px 0 var(--c,var(--mg-crimson));padding:0;margin:0 0 16px;overflow:hidden;
  transition:transform .25s var(--mg-ease),box-shadow .25s var(--mg-ease);
}
.mg-pillar details.wp-block-details[open]{transform:translate(-1px,-2px);box-shadow:7px 9px 0 var(--c,var(--mg-crimson))}
.mg-pillar details.wp-block-details summary{
  list-style:none;cursor:pointer;font-weight:900;font-size:15.5px;line-height:1.55;
  padding:18px 48px 18px 54px;position:relative;
}
.mg-pillar details.wp-block-details summary::-webkit-details-marker{display:none}
.mg-pillar details.wp-block-details summary::after{
  content:"+";position:absolute;right:20px;top:12px;
  font-family:var(--mg-en);font-weight:600;font-size:24px;color:var(--c,var(--mg-crimson));
}
.mg-pillar details.wp-block-details[open] summary::after{content:"–"}
.mg-pillar details.wp-block-details summary::before{
  position:absolute;left:18px;top:15px;width:28px;height:28px;border-radius:10px;
  background:var(--c,var(--mg-crimson));color:#fff;border:2.5px solid var(--mg-ink);
  font-family:var(--mg-en);font-weight:700;font-size:14px;
  display:grid;place-items:center;transform:rotate(-6deg);
}
.mg-pillar details.mg-qa summary::before{content:"Q"}
.mg-pillar details.mg-toggle summary::before{content:"▸";font-size:12px}
.mg-pillar details.wp-block-details > :not(summary){margin-left:22px;margin-right:22px}
.mg-pillar details.wp-block-details > :last-child{margin-bottom:20px}
/* Q&Aの「正直に言うと」段落（mg-honest） */
.mg-pillar .mg-honest{border-left:4px solid var(--c,var(--mg-grape));padding-left:14px;color:#4a4560;font-size:14px;line-height:1.9}

/* ------------------------------------------------------------
   6. NG行動（親グループ mg-nggrid ＞ 子グループ mg-ngcard）
      番号01〜05はCSSカウンターで自動表示
   ------------------------------------------------------------ */
.mg-pillar .mg-nggrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;counter-reset:mgng}
.mg-pillar .mg-ngcard{
  counter-increment:mgng;position:relative;
  background:#fff;border:3px solid var(--mg-ink);border-radius:22px;
  box-shadow:5px 6px 0 var(--c,var(--mg-coral));padding:20px;padding-right:66px;
}
.mg-pillar .mg-ngcard::before{
  content:counter(mgng,decimal-leading-zero);
  position:absolute;right:14px;top:14px;width:44px;height:44px;
  display:grid;place-items:center;font-family:var(--mg-en);font-weight:700;font-size:19px;
  color:#fff;background:var(--c,var(--mg-coral));border:2.5px solid var(--mg-ink);
  border-radius:14px;transform:rotate(6deg);box-shadow:2px 3px 0 var(--mg-ink);
}
.mg-pillar .mg-ngtitle{font-weight:900;font-size:15.5px;line-height:1.5;margin:0 0 10px}
.mg-pillar .mg-loss{
  display:inline-block;font-weight:800;font-size:12.5px;color:#fff;
  background:var(--mg-ink);padding:6px 14px;border-radius:999px;margin:0 0 12px;
}
.mg-pillar .mg-cmt{
  border-left:4px solid var(--c-t,var(--mg-coral-t));padding-left:14px;
  font-size:13.5px;line-height:1.8;color:var(--mg-grey);margin:0;
}
/* 申し込み前チェック（グループ mg-precheck） */
.mg-pillar .mg-precheck{
  background:var(--mg-sun-t);border:3px solid var(--mg-ink);border-radius:22px;
  box-shadow:6px 7px 0 var(--mg-ink);padding:24px;margin-top:20px;
}

/* ------------------------------------------------------------
   7. 申込3ステップ（親グループ mg-flow ＞ 子グループ mg-step）
      丸数字1〜3はCSSカウンターで自動表示
   ------------------------------------------------------------ */
.mg-pillar .mg-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:mgstep}
.mg-pillar .mg-step{
  counter-increment:mgstep;
  background:#fff;border:3px solid var(--mg-ink);border-radius:22px;
  box-shadow:5px 6px 0 var(--c,var(--mg-sky));padding:20px;
}
.mg-pillar .mg-step::before{
  content:counter(mgstep);
  display:grid;place-items:center;width:50px;height:50px;margin:0 0 12px;
  font-family:var(--mg-en);font-weight:700;font-size:23px;color:#fff;
  background:var(--c,var(--mg-sky));border:3px solid var(--mg-ink);border-radius:50%;
  box-shadow:3px 4px 0 var(--mg-ink);
}
.mg-pillar .mg-steptitle{font-weight:900;font-size:15.5px;line-height:1.5;margin:0 0 10px}
.mg-pillar .mg-warn{
  font-size:12.5px;line-height:1.7;background:var(--mg-sun-t);
  border:2px solid var(--mg-ink);border-radius:12px;padding:10px 12px;margin:0 0 10px;
}
/* チェックリスト（リストブロックに mg-check） */
.mg-pillar ul.mg-check{padding-left:0;margin:0}
.mg-pillar ul.mg-check li{list-style:none;position:relative;padding-left:24px;font-size:13px;line-height:1.7;color:var(--mg-grey)}
.mg-pillar ul.mg-check li::before{content:"✔";position:absolute;left:0;color:var(--mg-mint);font-weight:900}
/* 約束リスト（リストブロックに mg-promise） */
.mg-pillar ul.mg-promise{padding-left:0;margin:0}
.mg-pillar ul.mg-promise li{list-style:none;position:relative;padding-left:32px;font-size:14.5px;line-height:1.9}
.mg-pillar ul.mg-promise li::before{
  content:"約";position:absolute;left:0;top:4px;width:22px;height:22px;
  background:var(--c,var(--mg-mint));color:#fff;font-size:12px;font-weight:700;
  display:grid;place-items:center;border-radius:8px;border:2px solid var(--mg-ink);transform:rotate(-5deg);
}

/* ------------------------------------------------------------
   8. 比較表（テーブルブロックに mg-vstbl）
      2列目＝楽天モバイル列を自動ハイライト
   ------------------------------------------------------------ */
.mg-pillar .mg-vstbl th:nth-child(2),
.mg-pillar .mg-vstbl td:nth-child(2){background:var(--mg-crimson-t)}
.mg-pillar .mg-vstbl thead th:nth-child(2){color:var(--mg-crimson)}
.mg-pillar figure.wp-block-table{margin:16px 0 0}

/* ------------------------------------------------------------
   9. キャリア名マーキー（カスタムHTMLブロック内）
   ------------------------------------------------------------ */
.mg-pillar .mg-mqlabel{text-align:center;font-weight:800;font-size:12.5px;margin:0 0 12px}
.mg-pillar .mg-marquee{
  overflow:hidden;padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.mg-pillar .mg-marquee .track{display:flex;gap:14px;width:max-content;animation:mg-scrollx 32s linear infinite}
.mg-pillar .mg-marquee:hover .track{animation-play-state:paused}
.mg-pillar .mg-marquee .chip{
  display:flex;align-items:center;font-weight:800;font-size:14px;white-space:nowrap;
  background:#fff;border:2.5px solid var(--mg-ink);border-radius:999px;
  padding:8px 18px;box-shadow:3px 3px 0 var(--c,var(--mg-sky));
}
@keyframes mg-scrollx{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------
   10. 関連記事（カラムブロックに mg-related）
   ------------------------------------------------------------ */
.mg-pillar .mg-related .wp-block-column{
  background:#fff;border:3px solid var(--mg-ink);border-radius:22px;
  box-shadow:5px 6px 0 var(--c,var(--mg-peach));overflow:hidden;padding-bottom:16px;
  transition:transform .25s var(--mg-pop),box-shadow .25s var(--mg-ease);
}
.mg-pillar .mg-related .wp-block-column:hover{transform:translate(-2px,-4px);box-shadow:8px 11px 0 var(--c,var(--mg-peach))}
.mg-pillar .mg-related .wp-block-image{margin:0 0 12px}
.mg-pillar .mg-related .wp-block-image img{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:3px solid var(--mg-ink)}
.mg-pillar .mg-related p{padding:0 14px;margin:0 0 8px;font-size:13.5px}
.mg-pillar .mg-cat{
  display:inline-block;font-size:11px;font-weight:800;color:#fff;
  background:var(--c,var(--mg-peach));border:2px solid var(--mg-ink);
  border-radius:999px;padding:4px 12px;margin-left:14px;
}
.mg-pillar .mg-related a{color:var(--mg-ink);font-weight:900;text-decoration:none}
.mg-pillar .mg-related a:hover{color:var(--mg-crimson)}

/* ------------------------------------------------------------
   11. 最終CTA（グループに mg-final）
   ------------------------------------------------------------ */
.mg-pillar .mg-final{
  background:var(--mg-ink);color:#fff;border-radius:26px;
  padding:56px 24px;text-align:center;margin:44px 0 0;
}
.article .mg-pillar .mg-final h2{
  background:transparent;border:none;box-shadow:none;color:#fff;padding:0;
  font-size:clamp(23px,3.6vw,32px);line-height:1.5;
}
.mg-pillar .mg-final .mg-k{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--mg-sun);
  background:rgba(255,255,255,.08);border:2.5px solid rgba(255,255,255,.35);
  border-radius:999px;padding:8px 18px;margin:0 0 16px;
}
.mg-pillar .mg-final .mg-cap{color:#a7a2b8;font-size:12px;letter-spacing:.14em;margin:20px 0 4px}
.mg-pillar .mg-final .mg-bignum{
  font-family:var(--mg-en);font-weight:700;font-size:clamp(48px,8vw,72px);
  line-height:1.1;color:var(--mg-sun);margin:0 0 16px;
}
.mg-pillar .mg-final .mg-fsub{color:#d4d1e0;font-size:14.5px;line-height:1.95;max-width:34em;margin:0 auto 20px}
.mg-pillar .mg-final .mg-hint{color:#a7a2b8;font-size:12px;margin:12px 0 0}
.article .mg-pillar .mg-btn-white .wp-block-button__link{
  background:#fff;color:var(--mg-ink);box-shadow:4px 5px 0 var(--mg-crimson);
  font-size:17px;padding:16px 34px;
}
.article .mg-pillar .mg-btn-white .wp-block-button__link:hover{background:var(--mg-sun);color:var(--mg-ink);box-shadow:1px 2px 0 var(--mg-crimson)}
.article .mg-pillar .mg-btn-ghost .wp-block-button__link{background:#fff;color:var(--mg-ink)}
.article .mg-pillar .mg-btn-ghost .wp-block-button__link:hover{background:var(--mg-sun);color:var(--mg-ink)}

/* ------------------------------------------------------------
   12. レスポンシブ
   ------------------------------------------------------------ */
@media(max-width:760px){
  .mg-pillar .mg-quick{grid-template-columns:1fr 1fr}
  .mg-pillar .mg-nggrid{grid-template-columns:1fr}
  .mg-pillar .mg-flow{grid-template-columns:1fr}
  .mg-sect{padding:26px 16px;border-radius:20px}
  .mg-pillar .mg-hero{padding:28px 16px}
  .mg-pillar .mg-final{padding:40px 16px}
}