/* =====================================================================
   お役立ち記事「レベル3.5飛行とは？」の図表
   ---------------------------------------------------------------------
   本文に .mp-l35-* のクラスを持つ記事だけで読み込む（inc/column-single.php）。
   図表はすべてコアブロック（表・リスト・グループ）で組んであり、
   ここでは見た目だけを足す。セレクタは必ず .col-article__body と
   .mp-l35-* の組み合わせにして、他の記事・ページに影響させない。
   色・余白は theme.json のプリセットだけを使い、新しい色は増やさない。
   ===================================================================== */

/* ---------- 共通：図表の枠 ---------- */
.col-article__body .mp-l35-fig {
  margin: var(--wp--preset--spacing--space-lg) 0;
  padding: var(--wp--preset--spacing--space-md);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  background-color: var(--wp--preset--color--white);
}
.col-article__body .mp-l35-fig > * { margin-top: 0; margin-bottom: 0; }
.col-article__body .mp-l35-fig > * + * { margin-top: var(--wp--preset--spacing--space-sm); }
.col-article__body .mp-l35-fig__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--wp--preset--color--brand);
  padding-left: 12px;
  border-left: 4px solid var(--wp--preset--color--accent);
}
.col-article__body .mp-l35-fig__note {
  font-size: 14px;
  line-height: 1.85;
  color: var(--wp--preset--color--text-light);
}

/* ---------- 図表1：比較表 ---------- */
.col-article__body .mp-l35-scroll-hint { display: none; }
.col-article__body .mp-l35-compare { margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.col-article__body .mp-l35-compare table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.75;
}
.col-article__body .mp-l35-compare th,
.col-article__body .mp-l35-compare td {
  border: 1px solid var(--wp--preset--color--border);
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
}
.col-article__body .mp-l35-compare thead th {
  background-color: var(--wp--preset--color--brand);
  color: #ffffff;
  font-weight: 700;
  white-space: nowrap;
}
.col-article__body .mp-l35-compare thead th:nth-child(3) { background-color: var(--wp--preset--color--accent-ink); }
.col-article__body .mp-l35-compare tbody td:first-child {
  width: 8.5em;
  background-color: var(--wp--preset--color--mist);
  font-weight: 700;
  color: var(--wp--preset--color--brand);
}
/* レベル3.5の列を薄く強調する（色だけに頼らず、見出しにも列名がある） */
.col-article__body .mp-l35-compare tbody td:nth-child(3) { background-color: var(--wp--preset--color--sage); }
.col-article__body .mp-l35-compare figcaption {
  font-size: 13px;
  line-height: 1.8;
  color: var(--wp--preset--color--text-light);
  text-align: left;
  margin-top: 10px;
}

/* ---------- 図表2：確認項目カード ---------- */
.col-article__body .mp-l35-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--space-sm);
}
.col-article__body .mp-l35-cards > * { margin: 0; }
.col-article__body .mp-l35-card {
  border: 1px solid var(--wp--preset--color--border);
  border-top: 4px solid var(--wp--preset--color--accent);
  border-radius: 10px;
  padding: 16px 18px;
  background-color: var(--wp--preset--color--white);
}
.col-article__body .mp-l35-card > * { margin-top: 0; margin-bottom: 0; }
.col-article__body .mp-l35-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--wp--preset--color--brand);
  margin-bottom: 8px !important;
}
.col-article__body .mp-l35-check {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.col-article__body .mp-l35-check li {
  position: relative;
  margin: 0;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.75;
}
/* チェックボックス風の枠（装飾。チェック済みには見せない） */
.col-article__body .mp-l35-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 15px;
  height: 15px;
  border: 2px solid var(--wp--preset--color--accent);
  border-radius: 3px;
  box-sizing: border-box;
}

/* ---------- 図表3：申請・運航準備のフロー（縦型） ---------- */
.col-article__body .mp-l35-flow {
  list-style: none;
  padding-left: 0;
  counter-reset: mp-l35-flow;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.col-article__body .mp-l35-flow > li {
  position: relative;
  margin: 0;
  padding: 12px 16px 12px 60px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 10px;
  background-color: var(--wp--preset--color--mist);
  font-size: 15px;
  line-height: 1.8;
  counter-increment: mp-l35-flow;
}
.col-article__body .mp-l35-flow > li > strong {
  font-size: 16px;
  color: var(--wp--preset--color--brand);
}
.col-article__body .mp-l35-flow > li::before {
  content: counter(mp-l35-flow);
  position: absolute;
  left: 14px;
  top: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--brand);
  color: #ffffff;
  font-family: var(--wp--preset--font-family--latin);
  font-size: 15px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
}
/* 下向きの矢印（項目の間） */
.col-article__body .mp-l35-flow > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -21px;
  margin-left: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 12px solid var(--wp--preset--color--accent);
}
.col-article__body .mp-l35-flow ul {
  margin: 8px 0 0;
  padding-left: 1.2em;
  font-size: 15px;
}
.col-article__body .mp-l35-flow ul li { margin: 0; }

/* ---------- 図表4：MFOの5STEP ---------- */
.col-article__body .mp-l35-steps {
  list-style: none;
  padding-left: 0;
  counter-reset: mp-l35-step;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.col-article__body .mp-l35-steps > li {
  position: relative;
  margin: 0;
  padding: 12px 16px 12px 104px;
  min-height: 56px;
  border: 1px solid var(--wp--preset--color--border);
  border-left: 4px solid var(--wp--preset--color--accent);
  border-radius: 10px;
  background-color: var(--wp--preset--color--white);
  font-size: 15px;
  line-height: 1.8;
  counter-increment: mp-l35-step;
}
.col-article__body .mp-l35-steps > li > strong {
  font-size: 16px;
  color: var(--wp--preset--color--brand);
}
.col-article__body .mp-l35-steps > li::before {
  content: "STEP " counter(mp-l35-step);
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: var(--wp--preset--color--brand);
  color: #ffffff;
  font-family: var(--wp--preset--font-family--latin);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.col-article__body .mp-l35-status-label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--wp--preset--color--brand);
}
.col-article__body .mp-l35-status {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px !important;
}
.col-article__body .mp-l35-status li {
  margin: 0;
  padding: 2px 14px;
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: 999px;
  background-color: var(--wp--preset--color--sage);
  font-size: 14px;
  line-height: 1.8;
  color: var(--wp--preset--color--accent-ink);
}

/* ---------- よくある質問 ----------
   質問は見出しにせず（目次が長くなりすぎるため）、Q/Aの段落で組む。 */
.col-article__body .mp-l35-faq {
  margin: var(--wp--preset--spacing--space-sm) 0 0;
  padding: 14px 18px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 10px;
}
.col-article__body .mp-l35-faq > * { margin-top: 0; margin-bottom: 0; }
.col-article__body .mp-l35-faq__q,
.col-article__body .mp-l35-faq__a { position: relative; padding-left: 34px; }
.col-article__body .mp-l35-faq__q { font-weight: 700; color: var(--wp--preset--color--brand); line-height: 1.8; }
.col-article__body .mp-l35-faq__a { margin-top: 8px !important; font-size: 15px; line-height: 1.9; }
.col-article__body .mp-l35-faq__q::before,
.col-article__body .mp-l35-faq__a::before {
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-family: var(--wp--preset--font-family--latin);
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}
.col-article__body .mp-l35-faq__q::before { content: "Q"; background-color: var(--wp--preset--color--brand); color: #ffffff; }
.col-article__body .mp-l35-faq__a::before { content: "A"; background-color: var(--wp--preset--color--sage); color: var(--wp--preset--color--accent-ink); }

/* ---------- 注意書き・リンク集・相談案内 ---------- */
.col-article__body .mp-l35-note {
  margin: var(--wp--preset--spacing--space-md) 0;
  padding: 16px 20px;
  border: 1px solid var(--wp--preset--color--border);
  border-left: 4px solid var(--wp--preset--color--brand);
  border-radius: 8px;
  background-color: var(--wp--preset--color--mist);
}
.col-article__body .mp-l35-note > * { margin-top: 0; margin-bottom: 0; }
.col-article__body .mp-l35-note > * + * { margin-top: 6px; }
.col-article__body .mp-l35-note p,
.col-article__body .mp-l35-note li { font-size: 15px; line-height: 1.85; }

.col-article__body .mp-l35-links {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.col-article__body .mp-l35-links li {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--wp--preset--color--text-light);
}
.col-article__body .mp-l35-links li a {
  font-size: 15px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.col-article__body .mp-l35-consult {
  margin: var(--wp--preset--spacing--space-xl) 0 0;
  padding: var(--wp--preset--spacing--space-md);
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: 12px;
  background-color: var(--wp--preset--color--sage);
}
.col-article__body .mp-l35-consult > * { margin-top: 0; margin-bottom: 0; }
.col-article__body .mp-l35-consult > * + * { margin-top: 10px; }
.col-article__body .mp-l35-consult__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--wp--preset--color--brand);
}
.col-article__body .mp-l35-consult a { font-weight: 700; }

/* ---------- スマートフォン ---------- */
@media (max-width: 768px) {
  .col-article__body .mp-l35-fig { padding: 16px; }
  .col-article__body .mp-l35-scroll-hint {
    display: block;
    font-size: 13px;
    line-height: 1.7;
    color: var(--wp--preset--color--text-light);
  }
  .col-article__body .mp-l35-scroll-hint::before { content: "\2194\00a0"; }
  .col-article__body .mp-l35-compare table { min-width: 600px; font-size: 13px; }
  .col-article__body .mp-l35-compare tbody td:first-child { position: sticky; left: 0; z-index: 1; width: 6.5em; }
  .col-article__body .mp-l35-cards { grid-template-columns: minmax(0, 1fr); }
  .col-article__body .mp-l35-flow > li { padding-left: 54px; }
  .col-article__body .mp-l35-flow > li::before { left: 12px; }
  /* 幅が狭いときはSTEPの札を本文の上に置く */
  .col-article__body .mp-l35-steps > li { padding: 12px 14px; min-height: 0; }
  .col-article__body .mp-l35-steps > li::before { position: static; display: inline-block; margin: 0 8px 4px 0; }
}