@charset "UTF-8";
/* ===========================================================
   gutenberg.css — Gutenberg ネイティブブロックの土台とブロックスタイル
   表側では WordPress 本体のブロックCSSを読み込まないので（inc/setup.php）、
   このサイトで使うブロックの最低限の形をここで持つ。
   見た目の装飾（p-* のクラス）は pages/sub.css 側。
   =========================================================== */
@layer gutenberg {

  /* --- 本文のブロック同士の間隔（見出しは typography.css の余白を使う） --- */
  :where(.p-content .l-container) > * + :not(h2, h3, h4, .c-head) { margin-top: var(--sp-6); }
  :where(.wp-block-group, .wp-block-column) > * + * { margin-top: var(--sp-5); }

  /* --- 段落・リスト --- */
  .has-text-align-center { text-align: center; }
  .has-text-align-right { text-align: right; }
  .p-content .wp-block-list:not([class*="p-"]) { list-style: disc; padding-left: 1.4em; }
  .p-content ol.wp-block-list:not([class*="p-"]) { list-style: decimal; }
  .p-content .wp-block-list:not([class*="p-"]) > li + li { margin-top: var(--sp-1); }

  /* --- カラム --- */
  .wp-block-columns { display: flex; gap: var(--sp-6); }
  .wp-block-column { flex: 1 1 0; min-width: 0; }
  @media (max-width: 781px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-direction: column; }
  }

  /* --- 画像・キャプション --- */
  .wp-block-image { margin: 0; }
  .wp-block-image img { display: block; width: 100%; height: auto; }
  .wp-element-caption {
    margin-top: var(--sp-2);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
  }

  /* --- ギャラリー（既定は2列） --- */
  .wp-block-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin-inline: 0; margin-bottom: 0; }
  .wp-block-gallery .wp-block-image img { aspect-ratio: 3 / 2; object-fit: cover; }
  @media (max-width: 640px) { .wp-block-gallery { grid-template-columns: 1fr; } }

  /* --- 表 --- */
  .wp-block-table { margin: 0; overflow-x: auto; }
  .wp-block-table table { width: 100%; border-collapse: collapse; }
  .wp-block-table td,
  .wp-block-table th { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; line-height: 1.8; }

  /* --- ボタン --- */
  .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
  .wp-block-buttons:has(.is-center) { justify-content: center; }

  /* --- ショートコード（フォーム） --- */
  .wp-block-shortcode { margin: 0; }

  /* =========================================================
     ブロックスタイル（エディタの「スタイル」で選ぶもの）
     ========================================================= */
  /* 見出し */
  .wp-block-heading.is-style-underline { padding-left: 0; padding-bottom: .6em; }
  .wp-block-heading.is-style-underline::before { top: auto; bottom: 0; width: 2.4em; height: 3px; }
  .wp-block-heading.is-style-plain { padding-left: 0; }
  .wp-block-heading.is-style-plain::before { display: none; }
  .wp-block-heading.is-style-section { padding-left: 0; font-size: var(--fs-section); }
  .wp-block-heading.is-style-section::before { display: none; }

  /* ボタン：ラッパ(div)には当てず、中のリンクにだけ当てる */
  .wp-block-button:is(.is-style-primary, .is-style-secondary, .is-style-text) { display: inline-block; }
  .wp-block-button:is(.is-style-primary, .is-style-secondary, .is-style-text) > .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-4);
    padding: .95em 1.5em;
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-wide);
    line-height: 1.5;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .wp-block-button.is-style-primary > .wp-block-button__link { background: var(--c-action-primary); border: 2px solid var(--c-action-primary); color: var(--c-text-on-action); padding-inline: 2.625em; }
  .wp-block-button.is-style-primary > .wp-block-button__link:hover { background: var(--c-action-primary-hover); border-color: var(--c-action-primary-hover); }
  .wp-block-button.is-style-secondary > .wp-block-button__link { justify-content: space-between; min-width: 240px; background: var(--c-bg); border: 1px solid var(--c-text-subtle); color: var(--c-text); }
  .wp-block-button.is-style-secondary > .wp-block-button__link:hover { border-color: var(--c-action-primary); color: var(--c-action-primary); }
  .wp-block-button.is-style-text > .wp-block-button__link { padding: 0; color: var(--c-action-primary); }
  .wp-block-button:is(.is-style-secondary, .is-style-text) > .wp-block-button__link::after {
    content: "";
    width: 20px;
    height: 14px;
    background-color: var(--c-action-primary);
    -webkit-mask: var(--icon-arrow-long) center / contain no-repeat;
    mask: var(--icon-arrow-long) center / contain no-repeat;
  }

  /* 段落 */
  .wp-block-paragraph.is-style-catch,
  p.is-style-catch { font-size: var(--fs-catch); font-weight: var(--fw-black); line-height: 1.7; text-align: center; }
  p.is-style-lead { font-size: var(--fs-lead); line-height: var(--lh-loose); color: var(--c-text-muted); }

  /* 画像：写真（3:2で切り抜き） */
  .wp-block-image.is-style-photo img { aspect-ratio: 3 / 2; object-fit: cover; }

  /* 表：項目＋内容（会社概要型） */
  .wp-block-table.is-style-definition table { border-top: 2px solid var(--c-text); }
  .wp-block-table.is-style-definition td { padding: var(--sp-5) var(--sp-6); }
  .wp-block-table.is-style-definition td:first-child {
    width: 220px;
    background: var(--c-surface-emphasis);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-wide);
    white-space: nowrap;
  }
  .wp-block-table.is-style-definition a { color: var(--c-action-primary); text-decoration: underline; }
  @media (max-width: 767px) {
    .wp-block-table.is-style-definition tr { display: block; border-bottom: 1px solid var(--c-line); }
    .wp-block-table.is-style-definition td { display: block; width: auto; border: 0; padding: var(--sp-3) var(--sp-4); }
    .wp-block-table.is-style-definition td:first-child { width: auto; white-space: normal; }
  }

  /* カラーパレット（エディタで色を選んだとき） */
  .has-brand-color { color: #B03A34; }
  .has-brand-deep-color { color: #8E2723; }
  .has-accent-color { color: #5F7A2E; }
  .has-text-muted-color { color: #585858; }
  .has-white-color { color: #FFFFFF; }
  .has-brand-background-color { background-color: #B03A34; }
  .has-brand-tint-background-color { background-color: #FBF1F0; }
  .has-bg-alt-background-color { background-color: #F5F5F3; }
  .has-bg-dark-background-color { background-color: #2B2B2B; }
}