/* =========================================================================== */
/* コラム本文の体裁（フロント／ブロックエディタ共通）                            */
/*                                                                             */
/* 読み込み元:                                                                  */
/*   フロント … header.php（frame.css の直後）                                  */
/*   編集画面 … functions.php の add_block_editor_styles（投稿タイプ post 限定）  */
/*                                                                             */
/* 1ファイルで両方に効かせるため :is() で起点をまとめている。コピーを2つ持つと     */
/* 必ずずれるため、見た目を変えるときはこのファイルだけを直す。                   */
/*                                                                             */
/* --- 起点の書き方 ----------------------------------------------------------- */
/*   本文直下 … :is(.single-post .works-single-body,                            */
/*                 .editor-styles-wrapper .is-root-container) > 要素            */
/*               直下（>）で書く。記事内で使っているACFブロック（CTA・実績カード  */
/*               など）の中身まで当たらないようにするため。                       */
/*                                                                             */
/*   ボックス内 … :is(.single-post .works-single-body,                          */
/*                  .editor-styles-wrapper) .mgsblk-box 要素                    */
/*               ここは直下（>）で書かないこと。ボックスの中身は素の要素が        */
/*               そのまま並ぶわけではなく、編集画面では InnerBlocks が            */
/*               .acf-innerblocks-container や Gutenberg のレイアウト用          */
/*               コンテナで何層かラップされる。階層数に依存しない子孫セレクタで    */
/*               書く。以前 > で書いていたためボックス内のルールが全部外れ、      */
/*               見出しも箇条書きも小さいまま表示されていた。                     */
/*               ボックスの中に入るのは 段落・H3・H4・リスト・表 だけで、         */
/*               ボックスの入れ子は禁止のため、子孫で拾って問題ない。             */
/*                                                                             */
/* ボックス（acf/box-block）の中も同じ体裁にしないと、囲んだ途端に行間や中黒が    */
/* 消えてしまうため、本文直下とボックス内を同じルールで扱う。                     */
/*                                                                             */
/* :where() ではなく :is() を使うのは、base.css の h2.wp-block-heading 等に       */
/* 詳細度で勝つ必要があるため。                                                  */
/*                                                                             */
/* 対象は素の p / ul / ol / h2〜h4 / table のみ。記事内で使っている              */
/* section・two-column などのACFブロックの中身には当たらない。                    */
/* 幅は .works-single-body（最大1200px・左右padding 40px）に従う。               */
/* =========================================================================== */

/* --------------------------------------------------------------------------- */
/* 本文                                                                        */
/* --------------------------------------------------------------------------- */
:is(.single-post .works-single-body, .editor-styles-wrapper .is-root-container) > p,
:is(.single-post .works-single-body, .editor-styles-wrapper) .mgsblk-box p {
  margin-top: 0;
  margin-bottom: 26px;
  font-size: 16px;
  line-height: 2;
  color: #333;
}

/* リード文（記事冒頭の段落）は少し大きく。ボックス内には効かせない */
:is(
  .single-post .works-single-body,
  .editor-styles-wrapper .is-root-container
) > p:first-child {
  font-size: 17px;
  color: #231815;
}

/* --------------------------------------------------------------------------- */
/* 見出し                                                                      */
/* --------------------------------------------------------------------------- */
:is(
  .single-post .works-single-body,
  .editor-styles-wrapper .is-root-container
) > h2 {
  margin: 64px 0 24px;
  padding: 2px 0 2px 18px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  color: #231815;
  border-left: 5px solid var(--main-color);
}
:is(
  .single-post .works-single-body,
  .editor-styles-wrapper .is-root-container
) > h2:first-child {
  margin-top: 0;
}

:is(.single-post .works-single-body, .editor-styles-wrapper .is-root-container) > h3,
:is(.single-post .works-single-body, .editor-styles-wrapper) .mgsblk-box h3 {
  margin: 44px 0 18px;
  padding-bottom: 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--main-color-dark);
  border-bottom: 1px solid var(--main-color-light);
}

:is(.single-post .works-single-body, .editor-styles-wrapper .is-root-container) > h4,
:is(.single-post .works-single-body, .editor-styles-wrapper) .mgsblk-box h4 {
  margin: 32px 0 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--main-color-dark);
}

/* ボックス内の先頭見出しは、ボックスのpaddingがあるので上余白を詰める。          */
/* 編集画面ではブロックが更に何層かでラップされるため、:first-child では          */
/* 拾えない。「ボックス内の最初のh3」を :is() で直接指定する。                    */
:is(.single-post .works-single-body, .editor-styles-wrapper) .mgsblk-box :is(h3, h4, p, ul, ol):first-of-type {
  margin-top: 0;
}

/* --------------------------------------------------------------------------- */
/* リスト                                                                      */
/* --------------------------------------------------------------------------- */
:is(.single-post .works-single-body, .editor-styles-wrapper .is-root-container) > :is(ul, ol),
:is(.single-post .works-single-body, .editor-styles-wrapper) .mgsblk-box :is(ul, ol) {
  margin-top: 0;
  margin-bottom: 30px;
  padding-left: 1.5em;
}
/* リストの記号は list-style（::marker）をそのまま使う。                           */
/* reset.css が `ul, ul li { list-style-type: none; }` と li まで直接消しているため、*/
/* 親のul・olだけでなくli自身にも指定する（継承は直接指定に負ける）。               */
/*                                                                             */
/* 自前の丸（li::before）で描く形にはしないこと。編集画面ではリスト項目の中身が    */
/* さらにラップされるため、丸だけが1行上に落ちて表示が崩れる。                      */
/*                                                                             */
/* 対象は記事本文直下とボックス内だけに限定すること。.works-single-body の中には   */
/* 記号を出さないACFブロック（アイコンリスト等）のリストもあるため、               */
/* 範囲を広げると他のブロックの記号が復活してしまう。                              */
:is(.single-post .works-single-body, .editor-styles-wrapper .is-root-container) > ol,
:is(.single-post .works-single-body, .editor-styles-wrapper .is-root-container) > ol > li,
:is(.single-post .works-single-body, .editor-styles-wrapper) .mgsblk-box ol,
:is(.single-post .works-single-body, .editor-styles-wrapper) .mgsblk-box ol > li { list-style-type: decimal; }

:is(.single-post .works-single-body, .editor-styles-wrapper .is-root-container) > ul,
:is(.single-post .works-single-body, .editor-styles-wrapper .is-root-container) > ul > li,
:is(.single-post .works-single-body, .editor-styles-wrapper) .mgsblk-box ul,
:is(.single-post .works-single-body, .editor-styles-wrapper) .mgsblk-box ul > li { list-style-type: disc; }

:is(.single-post .works-single-body, .editor-styles-wrapper .is-root-container) > :is(ul, ol) > li,
:is(.single-post .works-single-body, .editor-styles-wrapper) .mgsblk-box :is(ul, ol) > li {
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.9;
  color: #333;
}

/* 最後の項目・最後のブロックは下余白を消す。                                     */
/* 消さないと「リスト項目の余白＋リストの余白＋ボックスのpadding」が積み上がって   */
/* ボックスの下だけ大きく空く。                                                  */
/* :last-of-type ではなく :last-child を使う。編集画面ではブロックがラップされる  */
/* が、ラッパーの中身は1ブロックなので :last-child なら両方の文脈で当たる。        */
:is(.single-post .works-single-body, .editor-styles-wrapper) :is(ul, ol) > li:last-child {
  margin-bottom: 0;
}
:is(.single-post .works-single-body, .editor-styles-wrapper) .mgsblk-box :is(p, ul, ol, figure.wp-block-table):last-child {
  margin-bottom: 0;
}

:is(.single-post .works-single-body, .editor-styles-wrapper) li::marker {
  color: var(--main-color);
}
:is(.single-post .works-single-body, .editor-styles-wrapper) li > strong {
  color: var(--main-color-dark);
}

/* --------------------------------------------------------------------------- */
/* 背景付きリスト（.column-list-card）                                          */
/*                                                                             */
/* 「太字の見出し：説明」が続く箇条書き用。素のリストだと本文と地続きで          */
/* 流し読みされるため、まとめて背景で囲んで塊として見せる。                      */
/* class は生成AIが出力する（inc/column-generator.php のシステムプロンプト）。   */
/*                                                                             */
/* 上の素のリスト（padding-left: 1.5em）に詳細度で勝つ必要があるため、           */
/* 起点の :is() を書いてから ul.column-list-card で受ける。                      */
/*                                                                             */
/* 直下（>）で書かないこと。ボックス内では要素が .mgsblk-box の直下に来ないため、 */
/* > を付けるとボックス内だけルールが外れる。                                     */
/* --------------------------------------------------------------------------- */
:is(.single-post .works-single-body, .editor-styles-wrapper) ul.column-list-card {
  margin-bottom: 32px;
  padding: 28px 32px 28px 52px;
  background: var(--main-color-bg);
  border-radius: 10px;
}
:is(.single-post .works-single-body, .editor-styles-wrapper) ul.column-list-card > li {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed #d5ded7;
}
:is(.single-post .works-single-body, .editor-styles-wrapper) ul.column-list-card > li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* ボックス内で使われた場合、背景が重なって沈むので白地に変える */
:is(.single-post .works-single-body, .editor-styles-wrapper) .mgsblk-box ul.column-list-card {
  background: #fff;
}

/* --------------------------------------------------------------------------- */
/* FAQ（.column-faq-q / .column-faq-a）                                         */
/*                                                                             */
/* H2「よくあるご質問」の直後に、Q&A1組ずつを白いカードとして並べる。            */
/* 外側をボックス（acf/box-block）で囲まない。囲むと枠が二重になる。              */
/*                                                                             */
/* 「Q.」「A.」は生成AIが <strong> で囲んで出力する。それを色付きの太字にする。   */
/*                                                                             */
/* QとAは別ブロック（h3とp）だが、上下の角丸を分け合って1枚のカードに            */
/* 見せている。そのため:                                                        */
/*   ・左右のpaddingは両方とも同じ値にする（ずれると縦のラインが2本に見える）     */
/*   ・QとAの間に別のブロックが入るとカードが割れる（プロンプト側で禁止済み）      */
/*                                                                             */
/* ぶら下げインデント（text-indent のマイナス）は使わない。「Q.」と「A.」で       */
/* ラベルの幅が違うため、2行目だけが揃わず不自然な空きが出る。                    */
/* --------------------------------------------------------------------------- */
/* 枠線で囲まない。白地に薄い枠線だと境界がぼやけて逆に読みにくい。               */
/* カード全体を同じ淡いグレーにして、質問と回答の境目だけ細い緑の線で区切る。      */
/* 質問側にも背景色を付けて色分けすると、緑が主張しすぎてくどくなる。              */
:is(.single-post .works-single-body, .editor-styles-wrapper) h3.column-faq-q {
  margin: 0;
  padding: 20px 26px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--main-color-dark);
  background: #f5f7f4;
  border-bottom: 1px solid #97ab7c;
  border-radius: 10px 10px 0 0;
}

:is(.single-post .works-single-body, .editor-styles-wrapper) p.column-faq-a {
  margin: 0 0 16px; /* 次のQまでの間隔 */
  padding: 20px 26px; /* 左右はQと揃える */
  background: #f5f7f4;
  border-radius: 0 0 10px 10px;
  line-height: 1.9;
}
:is(.single-post .works-single-body, .editor-styles-wrapper) p.column-faq-a:last-child {
  margin-bottom: 0;
}

/* 「Q.」「A.」のラベル。色付きの太字。大きさは揃える。                          */
/* :first-child に限定するのは、回答文中で使われた <strong> まで                */
/* ラベル扱いにしてしまわないため。                                              */
:is(.single-post .works-single-body, .editor-styles-wrapper) h3.column-faq-q > strong:first-child,
:is(.single-post .works-single-body, .editor-styles-wrapper) p.column-faq-a > strong:first-child {
  margin-right: 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--main-color);
}

/* --------------------------------------------------------------------------- */
/* 表                                                                          */
/* --------------------------------------------------------------------------- */
:is(.single-post .works-single-body, .editor-styles-wrapper .is-root-container) > figure.wp-block-table,
:is(.single-post .works-single-body, .editor-styles-wrapper) .mgsblk-box figure.wp-block-table {
  margin-top: 0;
  margin-bottom: 32px;
  overflow-x: auto; /* スマホで横スクロールさせる */
}

:is(.single-post .works-single-body, .editor-styles-wrapper) figure.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.7;
}
:is(.single-post .works-single-body, .editor-styles-wrapper) figure.wp-block-table th {
  padding: 14px 16px;
  text-align: left;
  font-weight: 700;
  color: #fff;
  background: var(--main-color);
  border: 1px solid var(--main-color);
}
:is(.single-post .works-single-body, .editor-styles-wrapper) figure.wp-block-table td {
  padding: 14px 16px;
  color: #333;
  border: 1px solid #e0e0e0;
}
:is(.single-post .works-single-body, .editor-styles-wrapper) figure.wp-block-table tbody tr:nth-child(even) td {
  background: var(--main-color-bg);
}
:is(.single-post .works-single-body, .editor-styles-wrapper) figure.wp-block-table figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.8;
  color: #767676;
  text-align: left;
}

/* --------------------------------------------------------------------------- */
/* リンク                                                                      */
/* --------------------------------------------------------------------------- */
:is(.single-post .works-single-body, .editor-styles-wrapper .is-root-container) a {
  color: var(--main-color-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.single-post .works-single-body a:hover {
  opacity: 0.75;
}

/* バナー型のリンク（関連ページバナー）は本文リンクの装飾の対象外にする */
:is(.single-post .works-single-body, .editor-styles-wrapper .is-root-container) a.mgsblk-link-banner__item {
  text-decoration: none;
  color: inherit;
}

/* ボタン型のリンク（相談CTAパネル）は本文リンクの装飾（下線・リンク色）の対象外にする。
   上のリンク指定より強いセレクタが必要なため、クラスを1つ足して打ち消している。
   フロント・エディタの両方に効かせる（＝プレビューと表示を揃える） */
:is(.single-post .works-single-body, .editor-styles-wrapper .is-root-container) a.mgsblk-cta-panel__btn {
  text-decoration: none;
}
:is(.single-post .works-single-body, .editor-styles-wrapper .is-root-container) a.mgsblk-cta-panel__btn--primary {
  color: #fff;
}
:is(.single-post .works-single-body, .editor-styles-wrapper .is-root-container) a.mgsblk-cta-panel__btn--secondary {
  color: var(--main-color);
}

/* --------------------------------------------------------------------------- */
/* ボックス（acf/box-block）の外側の余白                                        */
/*                                                                             */
/* ブロック側（acf-blocks/box/mgsblk-box.css）には margin を持たせていない。     */
/* 固定ページでは section の中に置かれて親が余白を持つ前提のため、そこに         */
/* 既定マージンを足すと既存ページのレイアウトが動く。コラムの縦リズムは          */
/* このファイルが持っているので、余白はここで付ける。                            */
/* --------------------------------------------------------------------------- */
:is(.single-post .works-single-body, .editor-styles-wrapper .is-root-container) .mgsblk-box {
  margin: 44px 0;
}

/* --------------------------------------------------------------------------- */
/* CTAブロック（記事末尾以外に入った場合の保険）                                 */
/* --------------------------------------------------------------------------- */
:is(.single-post .works-single-body, .editor-styles-wrapper .is-root-container) > .mgsblk-consultation-cta {
  margin: 56px 0;
}

/* --------------------------------------------------------------------------- */
/* スマホ                                                                      */
/* --------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  :is(.single-post .works-single-body, .editor-styles-wrapper .is-root-container) > h2 {
    margin-top: 48px;
    padding-left: 14px;
    font-size: 21px;
    border-left-width: 4px;
  }
  :is(.single-post .works-single-body, .editor-styles-wrapper) h3 {
    font-size: 18px;
  }
  :is(.single-post .works-single-body, .editor-styles-wrapper) p,
  :is(.single-post .works-single-body, .editor-styles-wrapper) li {
    font-size: 15px;
    line-height: 1.9;
  }
  :is(.single-post .works-single-body, .editor-styles-wrapper .is-root-container) > p:first-child {
    font-size: 16px;
  }
  :is(.single-post .works-single-body, .editor-styles-wrapper) figure.wp-block-table table {
    font-size: 14px;
  }
  :is(.single-post .works-single-body, .editor-styles-wrapper) figure.wp-block-table th,
  :is(.single-post .works-single-body, .editor-styles-wrapper) figure.wp-block-table td {
    padding: 10px 12px;
    white-space: nowrap;
  }
  :is(.single-post .works-single-body, .editor-styles-wrapper .is-root-container) .mgsblk-box {
    margin: 32px 0;
  }
  :is(.single-post .works-single-body, .editor-styles-wrapper) ul.column-list-card {
    padding: 20px 18px 20px 38px;
  }
  :is(.single-post .works-single-body, .editor-styles-wrapper) h3.column-faq-q {
    padding: 18px 18px 14px;
    font-size: 17px;
  }
  :is(.single-post .works-single-body, .editor-styles-wrapper) p.column-faq-a {
    margin-bottom: 16px;
    padding: 14px 18px 18px;
  }
  :is(.single-post .works-single-body, .editor-styles-wrapper) h3.column-faq-q > strong:first-child,
  :is(.single-post .works-single-body, .editor-styles-wrapper) p.column-faq-a > strong:first-child {
    font-size: 16px;
  }
}