/* ==================================================================================================== */
/* 記事ページ */
/* ==================================================================================================== */

/* ベース */
article.pol { background-color:var(--wh); padding:40px 20px; margin:40px auto; }
article.pol p { font-size:16px; font-weight:300; line-height:30px; }

/* カテゴリ名部分 */
p.cate { margin-bottom:8px; }
p.cate a { background-color:var(--gr-3); border-radius:40px; color:var(--wh); display:inline-block; padding:0 24px; }

/* 見出し */
article.pol h2 { color:var(--gr-1); font-size:24px; font-weight:500; line-height:32px; margin-bottom:24px; }

/* 戻るボタン */
p.back-button { text-align:center; }
p.back-button a { aspect-ratio:225/40; background-size:contain; background-position:center; background-repeat:no-repeat; background-image:url('../img/back-button.png'); display:block; margin:auto; margin-bottom:40px; height:40px; max-width:225px; width:225px; }
p.back-button a:active, p.back-button a:hover { background-image:url('../img/back-button-ov.png'); }

/* リンク */
article.pol .honbun a:link { color:#00f; text-decoration:underline; }
article.pol .honbun a:visited, article.pol .honbun a:hover, article.pol .honbun a:active  { color:#006400; }

/* ===== 画像の基本（レスポンシブ） ===== */
.honbun img,
.honbun figure img,
.honbun .wp-block-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===== ブロック画像・figure の基本スタイル ===== */
.honbun figure {
  margin: 0 0 1.5em;
  /* キャプションがある場合に備え行内配置を調整 */
}

/* キャプション */
.honbun figcaption {
  font-size: 0.9rem;
  color:var(--bk);
  margin-top: 0.5em;
  line-height: 1.4;
}

/* ===== 整列（クラシック・ブロック両対応） ===== */
/* 右寄せ */
.honbun img.alignright,
.honbun .alignright,
.honbun figure.alignright,
.honbun .wp-block-image.alignright {
  float: right;
  margin: 0 0 1em 1em; /* 上 0 / 右 0 / 下 1em / 左 1em */
  max-width: 50%; /* 任意：PCの目安幅 */
}

/* 左寄せ */
.honbun img.alignleft,
.honbun .alignleft,
.honbun figure.alignleft,
.honbun .wp-block-image.alignleft {
  float: left;
  margin: 0 1em 1em 0; /* 上 0 / 右 1em / 下 1em / 左 0 */
  max-width: 50%;
}

/* 中央寄せ（ブロックエディタの figure 対応） */
.honbun img.aligncenter,
.honbun .aligncenter,
.honbun figure.aligncenter,
.honbun .wp-block-image.aligncenter {
  margin-left: auto;
  margin-right: auto;
  float: none;
  text-align: center;
  display: block;
}

/* テキストの右寄せ／中央寄せ（p, div 等） */
.honbun .text-right,
.honbun p.text-right,
.honbun .align-text-right {
  text-align: right;
}
.honbun .text-center,
.honbun p.text-center,
.honbun .align-text-center {
  text-align: center;
}

/* ===== 小さい画面で float を解除して縦並びにする ===== */
@media (max-width: 767px) {
  .honbun img.alignright,
  .honbun .alignright,
  .honbun figure.alignright,
  .honbun .wp-block-image.alignright,
  .honbun img.alignleft,
  .honbun .alignleft,
  .honbun figure.alignleft,
  .honbun .wp-block-image.alignleft {
    float: none !important;
    margin: 0 0 1em 0 !important;
    max-width: 100% !important;
    display: block;
  }

  /* テキスト右寄せは読みやすさのためスマホでは左寄せに戻すことも */
  .honbun .text-right,
  .honbun p.text-right {
    text-align: left;
  }
}

/* ===== float 後のクリア（ブロック間の余白崩れ対策） ===== */
.honbun:after,
.honbun .clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* ===== 画像の比率を揃える（必要なら） ===== */
/* カバー的に使う場合のみ。通常の本文画像には height:auto のまま推奨。 */
.honbun .img-cover {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 の例 */
  position: relative;
  overflow: hidden;
}
.honbun .img-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== リンク付きサムネイルのアクセシビリティ ===== */
.honbun a img {
  border: 0;
  vertical-align: middle;
}

/* ===== テーブル／長文のオーバーフロー対策 ===== */
.honbun table {
  width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
}
.honbun .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===== 微調整例：右寄せ時の最大幅を記事幅に応じて変えたい場合 ===== */
/* 親コンテナが狭い場合は max-width を変更してください */
@media (min-width: 1200px) {
  .honbun img.alignright,
  .honbun figure.alignright {
    max-width: 40%;
  }
}

/* ===== ブロックエディタの幅制御（Full / Wide 等に合わせる場合） ===== */
/* .alignwide, .alignfull はテーマ側で許容幅に合わせて調整してください */
.alignwide {
  max-width: calc(100% - 4rem);
  margin-left: auto;
  margin-right: auto;
}
.alignfull {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ===== 説明（編集側に反映されるクラスを想定） =====
- クラシックエディタ：img に .alignright / .alignleft / .aligncenter が付与されます。
- ブロックエディタ：figure.wp-block-image に .alignright 等が付きます。
- スマホでは float を解除して縦並びにするのが UX 的に優れます（上記で実施）。
- キャプションは figcaption で想定。別テーマで .wp-caption-text 等が使われる場合は追記してください。
*/


@container(min-width:960px) { 

/* ベース */
article.pol { padding:40px; margin:40px auto; max-width:1000px; width:100%; }

/* 戻るボタン */
p.back-button a  { margin-bottom:90px; }

}