/* ===== NaviBook 詳細ページ用スタイル =====
   WordPressブロックエディタ／ページビルダー(epb-*, wp-block-*)由来の
   マークアップを静的サイト上で再現するための補完CSS。
   本ファイルは navibook 詳細5ページ(navibook-trun/cart/list/slide/db)のみで読み込む。
*/

/* --- 外側コンテナ（WordPressのコンテンツ幅を再現） --- */
.content-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 20px 8px;
  /* WordPress preset spacing 変数（インラインstyleから参照される） */
  --wp--preset--spacing--30: 16px;
  --wp--preset--spacing--50: 24px;
  --wp--preset--spacing--70: 40px;
}

.content-wrap h1,
.content-wrap h2,
.content-wrap h3,
.content-wrap h4 {
  line-height: 1.45;
  margin: 0.4em 0;
}

/* --- 汎用ユーティリティ --- */
.has-text-align-center { text-align: center; }

.epb-margin-top__0 { margin-top: 0; }
.epb-margin-top__8 { margin-top: 8px; }
.epb-margin-top__16 { margin-top: 16px; }

/* --- スペーサー（高さはCSS変数で指定される） --- */
.epb-spacer {
  height: var(--epb-space-height-pc, 20px);
}
@media (max-width: 781px) {
  .epb-spacer { height: var(--epb-space-height-sp, 40px); }
}

/* --- カラム（flexで左右分割を再現） --- */
.epb-columns__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}
.epb-column {
  flex: 0 1 auto;
  width: calc(var(--epb-column-width-pc, 100%) - 12px);
  min-width: 260px;
  box-sizing: border-box;
}
@media (max-width: 781px) {
  .epb-column { width: 100%; }
}

/* --- 画像 --- */
.wp-block-image { margin: 0; }
.wp-block-image figure,
figure.wp-block-image { margin: 0; }
.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* --- ボタン --- */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 8px 0;
}
.wp-block-button { display: inline-flex; }
.wp-block-button__link,
.wp-element-button {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover {
  text-decoration: none;
  opacity: 0.88;
}
.has-vivid-cyan-blue-background-color { background-color: #0693e3; }

/* --- グループ枠 --- */
.wp-block-group { border-radius: 8px; }
.wp-block-group.has-background {
  padding: 20px 24px;
  margin-top: 8px;
}
.has-dark-white-background-color { background-color: #f7f9fb; }

/* --- 見出しの装飾（マーカー下線・ハイライト） --- */
.epb-underline,
.epb-underline-01 {
  background: linear-gradient(transparent 62%, #ffe6a8 62%);
}
.epb-underline-blue {
  background: linear-gradient(transparent 62%, #bfe3f7 62%);
}
mark.epb-linemaker-blue {
  background: #bfe3f7;
  padding: 0 2px;
}

/* --- 制作の流れ（ステップ） --- */
.epb-step {
  border: 1px solid #b8bcc0;
  border-radius: 8px;
  padding: 20px 24px;
}
.block-step-wrapper {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.epb-step-col {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.epb-step-number {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0693e3;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
}
.epb-step-heading {
  font-size: 1.05em;
  line-height: 1.5;
  margin-bottom: 6px;
}
.epb-step-text {
  margin: 0;
  color: #555;
  line-height: 1.7;
}

/* --- テーブルは横スクロール可能に（狭幅対策） --- */
.content-wrap table { max-width: 100%; }
@media (max-width: 640px) {
  .content-wrap table { display: block; overflow-x: auto; white-space: nowrap; }
}