@charset "UTF-8";
/* コラム記事 v2 本文スタイル  ver 1.1.1
   post meta `_sz_article_v2` が真のコラムだけに適用する（header.php / functions.php）。
   `.sz-article`=フロント、`.editor-styles-wrapper`=編集キャンバス。1ファイルで両方を賄う。
   ボックスは `is-style-sz-*`（ブロックスタイル）と `sz-box -*`（別名）の両方を受ける。
   設計と残作業: suzuyo-automation/docs/column-ux-v2-handoff.md

   ⚠️ margin はショートハンドで書かない（左右0が確定し、エディタの中央寄せを打ち消す）。
   ⚠️ 記事本文にインライン style や wp:spacer を入れない（このCSSと二重管理になる）。 */

/* ---- base ---- */
:is(.sz-article, .editor-styles-wrapper) {
   color: #333;
   font-feature-settings: "palt";
   line-break: strict
}

:is(.sz-article, .editor-styles-wrapper)>*:first-child {
   margin-top: 0
}

:is(.sz-article, .editor-styles-wrapper)>*:last-child {
   margin-bottom: 0
}

:is(.sz-article, .editor-styles-wrapper) a {
   color: #225594;
   text-decoration: underline
}

:is(.sz-article, .editor-styles-wrapper) a:hover {
   color: #11488b
}

/* 長いURL・英数字だけは折り返しを許す（日本語は禁則に任せる） */
:is(.sz-article, .editor-styles-wrapper) a,
:is(.sz-article, .editor-styles-wrapper) code {
   overflow-wrap: anywhere
}

:is(.sz-article, .editor-styles-wrapper) strong {
   font-weight: 700
}

/* ---- 編集画面のみ：本文幅をフロントに合わせる（1000-200-50=750px） ---- */
.editor-styles-wrapper .is-root-container>.wp-block {
   max-width: 750px
}

/* ---- headings ---- */
:is(.sz-article, .editor-styles-wrapper) h2 {
   color: #225594;
   font-size: 24px;
   font-weight: 700;
   line-height: 1.5;
   border-bottom: 2px solid #225594;
   margin-top: 56px;
   margin-bottom: 20px;
   padding-bottom: 8px
}

:is(.sz-article, .editor-styles-wrapper) h3 {
   color: #225594;
   font-size: 21px;
   font-weight: 700;
   line-height: 1.5;
   border-left: 5px solid #225594;
   margin-top: 40px;
   margin-bottom: 16px;
   padding-left: 12px
}

:is(.sz-article, .editor-styles-wrapper) h4 {
   color: #333;
   font-size: 18px;
   font-weight: 700;
   line-height: 1.6;
   margin-top: 32px;
   margin-bottom: 12px
}

:is(.sz-article, .editor-styles-wrapper) h5,
:is(.sz-article, .editor-styles-wrapper) h6 {
   color: #333;
   font-size: 16px;
   font-weight: 700;
   line-height: 1.6;
   margin-top: 24px;
   margin-bottom: 10px
}

/* 目次プラグインが挿入する見出し内 span を素通しさせる */
:is(.sz-article, .editor-styles-wrapper) :is(h2, h3, h4) span {
   color: inherit;
   font-size: inherit;
   font-weight: inherit
}

/* ---- paragraph ---- */
:is(.sz-article, .editor-styles-wrapper) p {
   font-size: 16px;
   line-height: 1.9;
   margin-top: 0;
   margin-bottom: 20px
}

/* ---- list ---- */
:is(.sz-article, .editor-styles-wrapper) :is(ul, ol) {
   font-size: 16px;
   line-height: 1.9;
   margin-top: 0;
   margin-bottom: 24px;
   padding-left: 0;
   list-style: none
}

:is(.sz-article, .editor-styles-wrapper) li {
   position: relative;
   padding-left: 1.4em;
   margin-bottom: 6px
}

:is(.sz-article, .editor-styles-wrapper) li:last-child {
   margin-bottom: 0
}

:is(.sz-article, .editor-styles-wrapper) ul>li::before {
   content: "";
   position: absolute;
   left: .25em;
   top: .72em;
   width: 8px;
   height: 8px;
   background: #225594;
   border-radius: 50%
}

:is(.sz-article, .editor-styles-wrapper) ol {
   counter-reset: sz-ol
}

:is(.sz-article, .editor-styles-wrapper) ol>li {
   counter-increment: sz-ol;
   padding-left: 1.9em
}

:is(.sz-article, .editor-styles-wrapper) ol>li::before {
   content: counter(sz-ol) ".";
   position: absolute;
   left: 0;
   top: 0;
   color: #225594;
   font-weight: 700;
   font-family: "Saira Extra Condensed", sans-serif;
   font-size: 19px
}

/* 入れ子リスト */
:is(.sz-article, .editor-styles-wrapper) li> :is(ul, ol) {
   margin-top: 8px;
   margin-bottom: 0
}

:is(.sz-article, .editor-styles-wrapper) li>ul>li::before {
   background: #c1cfe0
}

/* ---- table ---- */
/* common.css の table-layout:fixed を解除 ＋ SP横スクロール */
:is(.sz-article, .editor-styles-wrapper) figure.wp-block-table {
   margin-top: 0;
   margin-bottom: 28px;
   overflow-x: auto
}

:is(.sz-article, .editor-styles-wrapper) table {
   table-layout: auto;
   width: 100%;
   border-collapse: collapse;
   font-size: 15px;
   background: #fff;
   min-width: 460px
}

:is(.sz-article, .editor-styles-wrapper) table :is(th, td) {
   border: 1px solid #d4d4d4;
   padding: 12px 16px;
   line-height: 1.7;
   vertical-align: top;
   text-align: left
}

:is(.sz-article, .editor-styles-wrapper) table thead th {
   background: #225594;
   color: #fff;
   font-weight: 700
}

:is(.sz-article, .editor-styles-wrapper) table tbody th {
   background: #eaeff5;
   color: #225594;
   font-weight: 700
}

:is(.sz-article, .editor-styles-wrapper) figure.wp-block-table figcaption {
   font-size: 13px;
   color: #666;
   margin-top: 8px;
   text-align: left
}

/* ---- box（ポイント / 注意 / メリット / デメリット） ---- */
/* 既定色はポイント（紺）。-caution / -merit / -demerit が後から上書きする */
:is(.sz-article, .editor-styles-wrapper) :is(.sz-box, .is-style-sz-point, .is-style-sz-caution, .is-style-sz-merit, .is-style-sz-demerit) {
   border-left: 4px solid #225594;
   background: #eaeff5;
   padding: 20px 24px;
   margin-top: 0;
   margin-bottom: 28px
}

:is(.sz-article, .editor-styles-wrapper) :is(.sz-box, .is-style-sz-point, .is-style-sz-caution, .is-style-sz-merit, .is-style-sz-demerit)>*:last-child {
   margin-bottom: 0
}

/* ラベル段落。クラスが無い場合は先頭段落をラベル扱いにする */
:is(.sz-article, .editor-styles-wrapper) .sz-box__label,
:is(.sz-article, .editor-styles-wrapper) :is(.sz-box, .is-style-sz-point, .is-style-sz-caution, .is-style-sz-merit, .is-style-sz-demerit)>p:first-child {
   color: #225594;
   font-size: 16px;
   font-weight: 700;
   margin-top: 0;
   margin-bottom: 10px
}

:is(.sz-article, .editor-styles-wrapper) :is(.sz-box, .is-style-sz-point, .is-style-sz-caution, .is-style-sz-merit, .is-style-sz-demerit) p {
   font-size: 15px
}

:is(.sz-article, .editor-styles-wrapper) :is(.sz-box, .is-style-sz-point, .is-style-sz-caution, .is-style-sz-merit, .is-style-sz-demerit) :is(ul, ol) {
   font-size: 15px;
   margin-bottom: 0
}

:is(.sz-article, .editor-styles-wrapper) :is(.sz-box, .is-style-sz-point, .is-style-sz-caution, .is-style-sz-merit, .is-style-sz-demerit) ul>li::before {
   background: #225594
}

/* 注意（赤） */
:is(.sz-article, .editor-styles-wrapper) :is(.sz-box.-caution, .is-style-sz-caution) {
   border-left-color: #d50012;
   background: #fdecea
}

:is(.sz-article, .editor-styles-wrapper) :is(.sz-box.-caution, .is-style-sz-caution) .sz-box__label,
:is(.sz-article, .editor-styles-wrapper) :is(.sz-box.-caution, .is-style-sz-caution)>p:first-child {
   color: #a3000e
}

:is(.sz-article, .editor-styles-wrapper) :is(.sz-box.-caution, .is-style-sz-caution) ul>li::before {
   background: #d50012
}

/* メリット（緑） */
:is(.sz-article, .editor-styles-wrapper) :is(.sz-box.-merit, .is-style-sz-merit) {
   border-left-color: #2e7d32;
   background: #eaf6ec
}

:is(.sz-article, .editor-styles-wrapper) :is(.sz-box.-merit, .is-style-sz-merit) .sz-box__label,
:is(.sz-article, .editor-styles-wrapper) :is(.sz-box.-merit, .is-style-sz-merit)>p:first-child {
   color: #1f5c23
}

:is(.sz-article, .editor-styles-wrapper) :is(.sz-box.-merit, .is-style-sz-merit) ul>li::before {
   background: #2e7d32
}

/* デメリット（橙） */
:is(.sz-article, .editor-styles-wrapper) :is(.sz-box.-demerit, .is-style-sz-demerit) {
   border-left-color: #e65100;
   background: #fdf1e6
}

:is(.sz-article, .editor-styles-wrapper) :is(.sz-box.-demerit, .is-style-sz-demerit) .sz-box__label,
:is(.sz-article, .editor-styles-wrapper) :is(.sz-box.-demerit, .is-style-sz-demerit)>p:first-child {
   color: #a83c00
}

:is(.sz-article, .editor-styles-wrapper) :is(.sz-box.-demerit, .is-style-sz-demerit) ul>li::before {
   background: #e65100
}

/* ---- FAQ（wp:details） ---- */
:is(.sz-article, .editor-styles-wrapper) details.wp-block-details {
   border: 1px solid #d4d4d4;
   background: #fff;
   margin-top: 0;
   margin-bottom: 12px;
   padding: 0
}

:is(.sz-article, .editor-styles-wrapper) details.wp-block-details summary {
   position: relative;
   list-style: none;
   cursor: pointer;
   color: #225594;
   font-size: 16px;
   font-weight: 700;
   line-height: 1.6;
   padding: 16px 52px 16px 20px;
   background: #eaeff5
}

:is(.sz-article, .editor-styles-wrapper) details.wp-block-details summary::-webkit-details-marker {
   display: none
}

:is(.sz-article, .editor-styles-wrapper) details.wp-block-details summary::after {
   content: "";
   position: absolute;
   right: 22px;
   top: 50%;
   width: 10px;
   height: 10px;
   margin-top: -8px;
   border-right: 2px solid #225594;
   border-bottom: 2px solid #225594;
   transform: rotate(45deg);
   transition: transform .3s ease
}

:is(.sz-article, .editor-styles-wrapper) details.wp-block-details[open] summary::after {
   margin-top: -2px;
   transform: rotate(-135deg)
}

:is(.sz-article, .editor-styles-wrapper) details.wp-block-details>*:not(summary) {
   padding-left: 20px;
   padding-right: 20px
}

:is(.sz-article, .editor-styles-wrapper) details.wp-block-details>*:not(summary):first-of-type {
   padding-top: 18px
}

:is(.sz-article, .editor-styles-wrapper) details.wp-block-details>*:last-child {
   margin-bottom: 0;
   padding-bottom: 18px
}

/* ---- quote ---- */
:is(.sz-article, .editor-styles-wrapper) blockquote.wp-block-quote {
   border-left: 4px solid #c1cfe0;
   background: #f7f9fb;
   margin-top: 0;
   margin-bottom: 28px;
   padding: 18px 24px
}

:is(.sz-article, .editor-styles-wrapper) blockquote.wp-block-quote>*:last-child {
   margin-bottom: 0
}

:is(.sz-article, .editor-styles-wrapper) blockquote.wp-block-quote cite {
   display: block;
   font-size: 13px;
   color: #666;
   font-style: normal;
   margin-top: 8px
}

/* ---- image ---- */
:is(.sz-article, .editor-styles-wrapper) figure.wp-block-image {
   margin-top: 0;
   margin-bottom: 28px;
   text-align: center
}

:is(.sz-article, .editor-styles-wrapper) figure.wp-block-image img {
   max-width: 100%;
   height: auto
}

:is(.sz-article, .editor-styles-wrapper) figure.wp-block-image figcaption {
   font-size: 13px;
   color: #666;
   line-height: 1.7;
   margin-top: 10px
}

/* ---- separator ---- */
:is(.sz-article, .editor-styles-wrapper) hr.wp-block-separator {
   border: 0;
   border-top: 1px solid #d4d4d4;
   margin-top: 40px;
   margin-bottom: 40px
}

/* ---- CTA button ---- */
:is(.sz-article, .editor-styles-wrapper) .wp-block-buttons {
   margin-top: 36px;
   margin-bottom: 40px
}

:is(.sz-article, .editor-styles-wrapper) .wp-block-button__link {
   position: relative;
   display: inline-block;
   color: #fff;
   background-color: #225594;
   border: 1px solid #225594;
   border-radius: 0;
   font-size: 17px;
   font-weight: 700;
   line-height: 1.4;
   text-decoration: none;
   padding: 16px 60px 16px 32px;
   transition: color .3s ease, background-color .3s ease
}

:is(.sz-article, .editor-styles-wrapper) .wp-block-button__link::after {
   content: "";
   position: absolute;
   right: 24px;
   top: 50%;
   width: 24px;
   height: 6px;
   margin-top: -3px;
   background: url(../img/common/icon_arrow.svg) no-repeat;
   background-size: contain;
   transition: right .3s ease
}

:is(.sz-article, .editor-styles-wrapper) .wp-block-button__link:hover {
   color: #225594;
   background-color: #fff
}

:is(.sz-article, .editor-styles-wrapper) .wp-block-button__link:hover::after {
   right: 18px;
   background-image: url(../img/common/icon_arrow-blue.svg)
}

/* ---- 目次（Table of Contents Plus・フロントのみ） ---- */
.sz-article #toc_container {
   width: 100%;
   background: #f7f9fb;
   border: 1px solid #c1cfe0;
   padding: 20px 24px;
   margin-top: 0;
   margin-bottom: 36px;
   font-size: 15px
}

.sz-article #toc_container .toc_title {
   color: #225594;
   font-size: 17px;
   font-weight: 700;
   text-align: left;
   margin-top: 0;
   margin-bottom: 12px;
   padding: 0
}

.sz-article #toc_container ul {
   margin: 0;
   font-size: 15px;
   line-height: 1.8
}

.sz-article #toc_container li {
   padding-left: 0;
   margin-bottom: 4px
}

.sz-article #toc_container li::before {
   display: none
}

.sz-article #toc_container ul ul {
   margin: 4px 0 4px 1.2em
}

.sz-article #toc_container a {
   color: #225594;
   text-decoration: none
}

.sz-article #toc_container a:hover {
   text-decoration: underline
}

/* ---- SP（767px 以下） ---- */
@media only screen and (max-width:767px) {
   :is(.sz-article, .editor-styles-wrapper) h2 {
      font-size: 21px;
      margin-top: 40px;
      margin-bottom: 16px
   }

   :is(.sz-article, .editor-styles-wrapper) h3 {
      font-size: 18px;
      margin-top: 32px;
      margin-bottom: 14px;
      padding-left: 10px
   }

   :is(.sz-article, .editor-styles-wrapper) h4 {
      font-size: 16px;
      margin-top: 24px;
      margin-bottom: 10px
   }

   :is(.sz-article, .editor-styles-wrapper) p {
      font-size: 15px;
      line-height: 1.9;
      margin-bottom: 18px
   }

   :is(.sz-article, .editor-styles-wrapper) :is(ul, ol) {
      font-size: 15px;
      margin-bottom: 20px
   }

   :is(.sz-article, .editor-styles-wrapper) ol>li::before {
      font-size: 17px
   }

   :is(.sz-article, .editor-styles-wrapper) :is(.sz-box, .is-style-sz-point, .is-style-sz-caution, .is-style-sz-merit, .is-style-sz-demerit) {
      padding: 16px 18px;
      margin-bottom: 24px
   }

   :is(.sz-article, .editor-styles-wrapper) :is(.sz-box, .is-style-sz-point, .is-style-sz-caution, .is-style-sz-merit, .is-style-sz-demerit) :is(p, ul, ol) {
      font-size: 14px
   }

   :is(.sz-article, .editor-styles-wrapper) table {
      font-size: 14px
   }

   :is(.sz-article, .editor-styles-wrapper) table :is(th, td) {
      padding: 10px 12px
   }

   :is(.sz-article, .editor-styles-wrapper) details.wp-block-details summary {
      font-size: 15px;
      padding: 14px 44px 14px 16px
   }

   :is(.sz-article, .editor-styles-wrapper) details.wp-block-details>*:not(summary) {
      padding-left: 16px;
      padding-right: 16px
   }

   :is(.sz-article, .editor-styles-wrapper) .wp-block-button__link {
      display: block;
      text-align: center;
      font-size: 16px;
      padding: 15px 44px 15px 20px
   }

   .sz-article #toc_container {
      padding: 16px 18px;
      margin-bottom: 28px;
      font-size: 14px
   }

   .sz-article #toc_container ul {
      font-size: 14px
   }
}