/* ============================================================
gutenberg-blocks.css — Gutenberg（ブロックエディタ）ブロックの装飾
  .article-body 配下に出力される WordPress 標準ブロックを対象。
  本文の基本幅は 740px。alignwide / alignfull は親 #article
  （max-width 900px）まで広げる範囲で表現する。
  eido-style.css と同じ CSS カスタムプロパティ（--c-*, --fs-*,
  --space-*, --font-* など）を前提とするため、eido-style の後に
  読み込むこと。
============================================================ */

/* --- 段落・見出し --- */
.article-body h2  {
  margin: var(--space-34) 0 var(--space-16);
  font-family: var(--font-ui);
  font-weight: bold;
  font-size: var(--fs-24);
  color: var(--c-text-dark);
}

.article-body h4  {
  margin: var(--space-21) 0 var(--space-8);
  font-family: var(--font-ui);
  font-weight: bold;
  font-size: var(--fs-18);
  color: var(--c-text-dark);
}

.article-body ul,
.article-body ol  {
  margin: 0 0 var(--space-21);
  padding-left: var(--space-21);
  font-size: var(--fs-18);
  line-height: 2.1;
  color: var(--c-text-mid);
}

.article-body li  { margin-bottom: var(--space-8);}

.article-body a  {
  color: var(--c-main-main);
  text-decoration: underline;
}

.article-body a:hover  { color: var(--c-main-deep, var(--c-main-main));}

.article-body strong  { font-weight: bold;}
.article-body em      { font-style: italic;}

/* --- テキスト配置 --- */
.article-body .has-text-align-left   { text-align: left;}
.article-body .has-text-align-center { text-align: center;}
.article-body .has-text-align-right  { text-align: right;}

/* --- 整列 (alignleft / alignright / aligncenter) --- */
.article-body .alignleft  {
  float: left;
  margin: 0 var(--space-21) var(--space-13) 0;
  max-width: 50%;
}

.article-body .alignright  {
  float: right;
  margin: 0 0 var(--space-13) var(--space-21);
  max-width: 50%;
}

.article-body .aligncenter  {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

/* clearfix: 整列要素の回り込み解除 */
.article-body::after  {
  display: block;
  clear: both;
  content: "";
}

/* --- 幅広 / 全幅 ---
   .article-body は他ページに合わせて幅制約なし＝既に
   セクションの内寸いっぱい。alignwide はそのまま既定幅と同じ扱い、
   alignfull のみセクションのパディング（左右 var(--space-40)）を
   打ち消して、セクション端まで広げる。 */
.article-body .alignwide  { max-width: none;}

@media (min-width: 1024px)  {
  .article-body .alignfull  {
    margin-right: calc(-1 * var(--space-40));
    margin-left:  calc(-1 * var(--space-40));
  }
}

/* --- 画像ブロック --- */
.article-body .wp-block-image  {
  margin: 0 0 var(--space-21);
}

.article-body .wp-block-image img  {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}

.article-body .wp-block-image figcaption,
.article-body figcaption  {
  margin-top: var(--space-8);
  font-size: var(--fs-14);
  color: var(--c-text-mid);
  text-align: center;
}

/* --- 引用 --- */
.article-body .wp-block-quote,
.article-body blockquote  {
  margin: 0 0 var(--space-21);
  padding: var(--space-13) var(--space-21);
  font-size: var(--fs-16);
  color: var(--c-text-mid);
  background: var(--c-main-ultra, #f7fafc);
  border-left: 4px solid var(--c-main-main);
}

.article-body .wp-block-quote cite  {
  display: block;
  margin-top: var(--space-8);
  font-size: var(--fs-14);
  font-style: normal;
  color: var(--c-text-light, #718096);
}

/* --- ボタンブロック --- */
.article-body .wp-block-button  { margin-bottom: var(--space-21);}

.article-body .wp-block-button__link  {
  display: inline-block;
  padding: var(--space-13) var(--space-34);
  font-family: var(--font-ui);
  color: #fff;
  text-decoration: none;
  background: var(--c-main-main);
  border-radius: var(--r-full);
  transition: background .18s;
}

.article-body .wp-block-button__link:hover  {
  background: var(--c-main-deep, var(--c-main-main));
}

.article-body .is-style-outline .wp-block-button__link  {
  color: var(--c-main-main);
  background: transparent;
  border: 1.5px solid var(--c-main-main);
}

/* --- カラムブロック --- */
.article-body .wp-block-columns  {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-21);
  margin-bottom: var(--space-21);
}

.article-body .wp-block-column  { flex: 1 1 0;}

@media (max-width: 781px)  {
  .article-body .wp-block-columns  { flex-direction: column;}
  .article-body .wp-block-column   { flex: 1 1 100%;}
}

/* --- テーブルブロック --- */
.article-body .wp-block-table  { margin-bottom: var(--space-21);}

.article-body .wp-block-table table  {
  width: 100%;
  border-collapse: collapse;
}

.article-body .wp-block-table th,
.article-body .wp-block-table td  {
  padding: var(--space-8) var(--space-13);
  font-size: var(--fs-14);
  text-align: left;
  border: 1px solid #e2e8f0;
}

.article-body .wp-block-table th  {
  font-weight: bold;
  background: #f7fafc;
}

/* --- 区切り線 --- */
.article-body .wp-block-separator,
.article-body hr  {
  margin: var(--space-34) auto;
  border: 0;
  border-top: 1px solid #e2e8f0;
}

.article-body .wp-block-separator.is-style-wide  { max-width: 100%;}
.article-body .wp-block-separator.is-style-dots  {
  border: 0;
  text-align: center;
  background: none;
}

/* --- ギャラリーブロック --- */
.article-body .wp-block-gallery  { margin-bottom: var(--space-21);}

/* --- 埋め込み (YouTube 等) のレスポンシブ --- */
.article-body .wp-block-embed  { margin-bottom: var(--space-21);}

.article-body .wp-block-embed__wrapper  {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.article-body .wp-block-embed__wrapper iframe  {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* --- コード・整形済みテキスト --- */
.article-body .wp-block-code,
.article-body .wp-block-preformatted,
.article-body pre  {
  margin: 0 0 var(--space-21);
  padding: var(--space-13) var(--space-16);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-14);
  color: var(--c-text-dark);
  background: #f7fafc;
  border-radius: var(--r-sm);
  overflow-x: auto;
}

.article-body code  {
  padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: #f7fafc;
  border-radius: 3px;
}