@charset "utf-8";
/* ==========================================================================
   WordPress でだけ必要になる上書き

   css/common.css は 09-design のカンプからのバイトコピーで、編集しません。
   カンプに無い出力（WordPress のブロック・プラグインが出す要素・ブラウザ既定）
   を受けるための行だけを、1件ずつ理由を書いて置きます。
   ========================================================================== */

/* --- ブラウザ既定の余白を持つ要素（common.css の figure と同じ理由） ------
   左右に既定の余白があると、隣の要素と端がそろわなくなります。
   figure は common.css で潰しています。ここは WordPress の本文とフォームで
   出てくる残りの3つです。 */
blockquote,
dd {
  margin-inline: 0;
}
fieldset {
  margin-inline: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;   /* 既定の min-content 幅。中の入力欄が縮まなくなるため外す */
}

/* --- picture 要素 ---------------------------------------------------------
   WebP と PNG を出し分けるために img を <picture> で包んでいます。
   カンプの CSS は img に直接あたる前提（.hero__bg・.card__img・.site-logo など）
   なので、包みが幅・高さを決めてしまうと大きさが変わります。
   display: contents で包みを箱として数えないようにし、img を親の直接の子と
   同じ扱いにします。 */
picture {
  display: contents;
}

/* --- チャットボットの常設ランチャーのアイコン ----------------------------
   カンプはボタンの中に <svg class="merci-chatbot-launcher__icon"> を置いています。
   このボタンはプラグイン（Merci_Chatbot_Entry::the_launcher）が出していて、
   中身はラベルだけです。プラグインのマークアップは変えないため、
   同じ絵を ::before の背景として置きます。寸法はカンプの __icon と同じ 20px。 */
.merci-chatbot-launcher::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='%23ffffff' fill-rule='evenodd'><path d='M8 14h56v34H34L20 60V48H8zM24 27a4 4 0 1 0 0 8 4 4 0 1 0 0-8M36 27a4 4 0 1 0 0 8 4 4 0 1 0 0-8M48 27a4 4 0 1 0 0 8 4 4 0 1 0 0-8'/></svg>") no-repeat center / contain;
}

/* --- 本文（ブロックエディタの出力） --------------------------------------
   表には the_content のフィルタで .table を足しています（inc/design.php の
   merci_content_tables）。DB の本文は書き換えません。 */
.entry-content table.has-fixed-layout {
  table-layout: auto;   /* 既定の固定幅だと見出し列が本文列と同じ幅になり、行が崩れる */
}
.entry-content .table th {
  white-space: normal;  /* .table の nowrap では、法務ページの長い見出しが表からはみ出す */
  width: 14em;
}
.entry-content .wp-block-table {
  margin-block: 0;      /* figure の上下余白。行間は .entry-content の gap で取る */
}
@media (max-width: 599px) {
  /* 法務ページの表は、狭い画面では見出しと本文を上下に積む。
     2列のままだと 375px で見出し列に 14em を取られ、本文が1〜2文字ずつ折り返す
     （実測: 特定商取引法のページが縦 13,298px になっていた）。 */
  .entry-content .table tr,
  .entry-content .table th,
  .entry-content .table td {
    display: block;
    width: auto;
  }
  .entry-content .table th {
    border-bottom: 0;
  }
}
.entry-content h3 {
  font-size: var(--fs-lead);
  color: var(--c-navy-deep);
}
.entry-content ol {
  list-style: decimal;
  padding-left: 1.4em;
}
.entry-content a {
  color: var(--c-navy);
}

/* --- 読み上げ専用のテキスト（WordPress 標準の class） --------------------- */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- 管理バー表示中の固定要素 --------------------------------------------
   ログイン中は上に32px（782px以下は46px）の管理バーが出ます。
   画面下の固定CTAには影響しませんが、ハンバーガーメニューの高さ計算には効きます。 */
.admin-bar .site-header {
  scroll-margin-top: 32px;
}