/* =========================================================
   Custom CSS — WordPress テーマ固有 & 共通ユーティリティ
   ・WordPress 管理バー・コンテンツ調整
   ・共通パターンのユーティリティクラス
   ・ページネーション
   ========================================================= */

/* ─── WordPress Admin Bar ──────────────────── */
/* .site-head は sticky（common.css）。管理バー表示時は、その高さ分だけ
   貼り付き位置を下げる。負の head-top 高さと合算して、上段が隠れたあと
   ナビが「管理バーの直下」で固定されるようにする。 */
@media screen and (min-width: 783px) {
  .admin-bar .site-head {
    top: calc(32px - var(--head-top-h, 66px));
  }
}
@media screen and (max-width: 782px) {
  .admin-bar .site-head {
    top: calc(46px - var(--head-top-h, 66px));
  }
}
/* スマホはヘッダー全体を固定するため、管理バー直下（46px）に配置する */
@media screen and (max-width: 768px) {
  .admin-bar .site-head {
    top: 46px;
  }
}

/* ─── WordPress コンテンツアライン ─────────── */
.alignleft {
  float: left;
  margin: 0 1.5em 1em 0;
}
.alignright {
  float: right;
  margin: 0 0 1em 1.5em;
}
.aligncenter {
  display: block;
  margin: 0 auto 1em;
}
img.alignleft,
img.alignright,
img.aligncenter {
  max-width: 100%;
  height: auto;
}

/* ─── WordPress キャプション ──────────────── */
.wp-caption {
  max-width: 100%;
}
.wp-caption-text {
  text-align: center;
  font-size: 13px;
  color: var(--muted-2);
  font-style: italic;
  margin-top: 8px;
  letter-spacing: 0.06em;
}

/* ─── ユーティリティ: ホワイトカード面 ────── */
/*
 * .news-card / .article / .list-card / .faq-card など
 * で共通する「白背景 + ソフトボーダー + シャドウ」面。
 * 新規コンテンツに適用すること。
 */
.surface-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

/* ─── ユーティリティ: センタリングコンテナ ── */
/*
 * .content-inner / .pickup-inner / .apply-inner / .faq-inner
 * で共通する max-width + 中央揃えラッパー。
 */
.wrap-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}
.pc {
  display: block;
}
.sp {
  display: none;
}
@media (max-width: 768px) {
  .wrap-inner {
    padding: 0 14px;
  }
  .pc {
    display: none;
  }
  .sp {display: block;}
  /* <br class="sp"> は改行用なので inline に（block だと余分な隙間が出るため） */
  br.sp {display: inline;}
}

/* ─── ユーティリティ: Cormorant 斜体キャプション */
/*
 * .sec-head .en / .pickup-card .pc-en / .news-card-head .en
 * で共通する英語小見出し。
 */
.en-caption {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.3em;
  color: var(--muted-2);
}

/* ─── ユーティリティ: ダッシュ区切り線 ──── */
/*
 * .np-row / .variety-row / .hc-row で共通する
 * ボーダーボトムの破線。
 */
.divider-dashed {
  border-bottom: 1px dashed var(--border);
}

/* ─── ユーティリティ: 左縦線強調ブロック ── */
/*
 * .notice-box / .about-info-box で共通する
 * 左ボーダー付きインフォメーションブロック。
 */
.info-block {
  border-left: 3px solid var(--green);
  padding: 16px 20px;

  border-radius: 0 10px 10px 0;
}
.info-block.accent {
  border-left-color: var(--terracotta);
}

/* ─── WordPress ページネーション ────────── */
.wp-pagenavi,
.navigation.posts-navigation,
.navigation.post-navigation {
  text-align: center;
  margin: 48px 0;
}
.wp-pagenavi a,
.wp-pagenavi span,
.nav-links a,
.nav-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
  margin: 0 3px;
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.wp-pagenavi a:hover,
.nav-links a:hover,
.wp-pagenavi span.current {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.green {
  color: var(--green);
}
.terracotta {
  color: var(--terracotta);
}
.caution {
  color: var(--caution);
}