@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}