/* =========================================================
   cms.css … WordPress（Gutenberg）が出力する要素の調整だけ
   部品の見た目は components.css に書き、ここには書かない
   ブロックスタイル（is-style-*）は段階3で components.css に併記する
   ========================================================= */
@layer cms {
  /* ---------- ボタン：wp:button のラッパ（div）はリセット ----------
     スタイルは中の a.wp-block-button__link に当てる（二重ボーダー防止） */
  .wp-block-button.c-btn {
    display: inline-block;
    padding: 0;
    margin: 0;
    color: inherit;
    background: transparent;
    border: 0;
  }

  /* ---------- ボタン：並べる箱（wp:buttons）は普通の箱にする ----------
     静的版の a.c-btn と同じく、ボタンは行の中に並び、親の text-align（中央寄せなど）に従う */
  .wp-block-buttons {
    display: block;
  }
  .wp-block-buttons > .wp-block-button + .wp-block-button {
    margin-left: var(--sp-4);
  }

  /* ※ figure・キャプションの余白は reset レイヤー（* { margin: 0 }）で消える。
     WordPress標準のCSSは wp レイヤー（いちばん弱い）なので、ここで打ち消す必要はない。
     cms は components より強いので、部品の余白・大きさを上書きするルールは書かない */

  /* 写真の上に文字を重ねる部品（写真タイル）：キャプションを左寄せに */
  .wp-block-image.c-photo-tile figcaption {
    text-align: left;
  }

  /* ---------- 縦書きの一文：段落1つが縦の1行になる（静的版の span の代わり） ---------- */
  .wp-block-group.c-statement__text > p {
    margin: 0;
  }

  /* ---------- ページ送り：WordPressが出す a / span を、静的版のボタンと同じ見た目に ---------- */
  .c-pager .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap);
    height: var(--tap);
    padding: 0 var(--sp-4);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    background: var(--c-bg);
    font-family: var(--ff-num);
    font-weight: var(--fw-bold);
    font-size: var(--fs-small);
    transition: border-color var(--dur-md) var(--ease);
  }
  .c-pager a.page-numbers:hover {
    border-color: var(--c-action-primary);
  }
  .c-pager .page-numbers.current {
    background: var(--c-action-primary);
    border-color: var(--c-action-primary);
    color: var(--c-text-on-action);
  }
  .c-pager .page-numbers.dots {
    border-color: transparent;
    background: transparent;
  }

  /* ---------- お問い合わせフォーム：Contact Form 7 が出力する要素（CF7標準のCSSは読み込まない） ---------- */
  .wpcf7 .screen-reader-response {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .wpcf7-form .hidden-fields-container {
    display: none;
  }
  /* 先頭に隠し項目が入るので、最初の行の上線はここでつける */
  .wpcf7-form .c-form__row:not(.c-form__row ~ .c-form__row) {
    border-top: 1px solid var(--c-line);
  }
  .wpcf7-form-control-wrap {
    display: block;
  }
  .c-form__agree .wpcf7-list-item {
    display: block;
    margin: 0;
  }
  .c-form__agree label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
  }
  .wpcf7-not-valid-tip {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    color: var(--c-action-primary);
  }
  .c-form__agree .wpcf7-not-valid-tip {
    text-align: center;
  }
  .wpcf7-form :is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--c-action-primary);
    box-shadow: inset 0 0 0 1px var(--c-action-primary);
  }
  .wpcf7-response-output {
    margin-top: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    border: 2px solid var(--c-action-primary);
    border-radius: var(--r-md);
    font-weight: var(--fw-bold);
    text-align: center;
  }
  .wpcf7-form:is(.init, .resetting, .submitting) .wpcf7-response-output {
    display: none;
  }
}