/*
Theme Name: Hiyori Minimal
Theme URI: https://example.local/
Author: duck
Description: Classic (PHP) custom theme focused on design fidelity and predictable HTML/CSS/JS.
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.1
Version: 1.2.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hiyori-minimal
Tags: one-column, custom-menu, sticky-post
*/

@font-face {
  /*
   * HanaMinA.ttf（花園明朝）をテーマ内で配布する場合
   * - 配置: assets/fonts/HanaMinA.ttf
   * - ここで定義した font-family: "HanaMinA" を、見出し等で指定する
   *
   * NOTE:
   * - @font-face の font-family は「1つのファミリ名」で定義する（複数指定は不可）
   */
  font-family: "HanaMinA";
  src: url("./assets/fonts/HanaMinA.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



:root {
  /* ヒーロー：暗め写真前提の白文字オーバーレイ */
  --hiyori-hero-overlay: rgba(0, 0, 0, 0.42);
  --hiyori-hero-overlay-strong: rgba(0, 0, 0, 0.62);
  --hiyori-hero-text: #fff;

  /* ヒーロー枠線（主張を弱く、薄めにする） */
  --hiyori-line-hero: rgba(0, 0, 0, 0.06);

  --hiyori-bg: #FFFFFF;
  --hiyori-paper: #FFFFFF;
  --hiyori-text: #111111;
  --hiyori-muted: #6A6A6A;
  --hiyori-line: #E6E6E6;
  --hiyori-accent: #111111;
  --hiyori-danger: #B7262A;

  --hiyori-reading: 720px;
  /* 投稿一覧（トップ）: “島” にならないよう、広い画面では広げる（ただし無限には広げない） */
  --hiyori-list: min(72vw, 1400px);

  /* 画面幅が広い環境（1080p/1440p/4K 等）でも間抜けに見えにくい “可変コンテナ” */
  --hiyori-container: min(92vw, 2400px);
  --hiyori-gutter: clamp(18px, 2.2vw, 40px);

  /* 互換用（既存の変数名を残す） */
  --hiyori-content: var(--hiyori-reading);
  --hiyori-wide: var(--hiyori-container)
}

/* Base */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--hiyori-text);
  background: var(--hiyori-bg);
  /* 全体フォント（投稿/固定ページ/メニュー/フォーム等も含む） */
  font-family: "HanaMinA", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  line-height: 1.75;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover,
a:focus-visible {
  color: var(--hiyori-accent);
}

:where(p, li, td) {
  overflow-wrap: anywhere;
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ----------------------------------------
 * Layout
 * - container: 全ページ共通の左基準線（padding: 24px）
 * - content  : 記事本文の読みやすさ優先の狭い幅
 * ---------------------------------------- */
.hiyori-container {
  /* 画面幅に応じて広がるコンテナ（左右の余白が “でかすぎる” 問題を緩和） */
  max-width: var(--hiyori-container);
  margin: 0 auto;
  padding: 0 var(--hiyori-gutter);
}

.hiyori-content {
  max-width: var(--hiyori-content);
  margin: 0 auto;
}

/* ----------------------------------------
 * Top（home / front-page）: 投稿一覧の幅を広げ、左基準線に揃える
 *
 * 背景
 * - 1080p / 4K 等で「中央の細い島 + 両脇の巨大な空白」になりやすい
 *
 * 方針
 * - container の左基準線（padding）に合わせて “左寄せ”
 * - 幅は --hiyori-list で制御（広げ過ぎない上限つき）
 * ---------------------------------------- */
body.home .hiyori-content,
body.front-page .hiyori-content {
  max-width: var(--hiyori-list);
  margin-left: 0;
  margin-right: auto;
}

.hiyori-divider {
  border: 0;
  border-top: 1px solid var(--hiyori-line);
  margin: 0;
}

/* ----------------------------------------
 * Header
 * - sticky（スクロール追従）は必須
 * - scroll で影/余白/通知バーを変化させる（header.js が is-scrolled を付与）
 * - メニューは depth=1 前提（ドロップダウン無し）
 * ---------------------------------------- */
.hiyori-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 1000;
  background: var(--hiyori-bg);
  border-bottom: 1px solid var(--hiyori-line);
  transition: box-shadow 160ms ease;
}

.hiyori-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.hiyori-header__notice {
  border-bottom: 1px solid var(--hiyori-line);
  transition: max-height 200ms ease, opacity 200ms ease, padding 200ms ease;
  max-height: 120px;
  opacity: 1;
  padding: 10px 0;
}

.hiyori-header.is-scrolled .hiyori-header__notice {
  max-height: 0;
  opacity: 0;
  padding: 0;
  overflow: hidden;
}

.hiyori-header__notice p {
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--hiyori-muted);
  letter-spacing: 0.02em;
}

.hiyori-header__bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 18px 0;
  transition: padding 200ms ease;
}

.hiyori-header.is-scrolled .hiyori-header__bar {
  padding: 12px 0;
}

.hiyori-brand {
  font-family: inherit;
  letter-spacing: 0.02em;
  font-size: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}

/* Menu (horizontal, no dropdown for now) */
.hiyori-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  margin-left: auto;
}


.hiyori-nav ul {
  list-style: none;
  display: flex;
  gap: 22px;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hiyori-nav a {
  display: inline-block;
  padding: 6px 2px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 140ms ease, box-shadow 140ms ease;
  box-shadow: inset 0 -0px 0 0 transparent;
}

.hiyori-nav a:hover,
.hiyori-nav a:focus-visible {
  color: var(--hiyori-accent);
  box-shadow: inset 0 -1px 0 0 var(--hiyori-accent);
}

.hiyori-nav .current-menu-item > a,
.hiyori-nav .current_page_item > a {
  color: var(--hiyori-accent);
  box-shadow: inset 0 -1px 0 0 var(--hiyori-accent);
}

.hiyori-header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 180px;
  gap: 10px;
}

.hiyori-cta {
  display: inline-block;
  background: transparent;
  color: var(--hiyori-text);
  border-radius: 0;
  padding: 10px 0;
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 0;
  box-shadow: inset 0 -1px 0 0 var(--hiyori-text);
  transition: color 140ms ease, box-shadow 140ms ease;
}

.hiyori-cta:hover,
.hiyori-cta:focus-visible {
  color: var(--hiyori-muted);
  box-shadow: inset 0 -1px 0 0 var(--hiyori-muted);
}

/* Mobile: keep it simple */
@media (max-width: 781px) {
  .hiyori-header__bar {
    flex-wrap: wrap;
  }

  .hiyori-header__right {
    width: 100%;
    justify-content: flex-end;
  }

  .hiyori-nav {
    order: 3;
    width: 100%;
  }

  .hiyori-nav ul {
    gap: 14px;
  }
}

/* ----------------------------------------
 * Main
 * - 通常ページは余白を付ける
 * - トップ（front-page / home）はヘッダー直下にヒーローを置くため padding-top を0
 * ---------------------------------------- */
main {
  padding: 48px 0 72px;
}

/* トップ（front-page / 投稿一覧home）は、ヘッダー直下にヒーローを配置したいので上余白を消す */
body.front-page main,
body.home main {
  padding-top: 0;
}
/* ----------------------------------------
 * Hero（トップのメインビジュアル）
 *
 * 方針
 * - 暗め写真前提で「白文字 + オーバーレイ」で可読性を担保
 * - 文字の左基準線は .hiyori-container と一致させる（ズレると一気に素人っぽくなる）
 * - モバイルは文章を画像下へ（読みやすさ優先）
 * ---------------------------------------- */
.hiyori-hero {
  margin-top: 0;
  background: var(--hiyori-paper);
  border-bottom: 1px solid var(--hiyori-line-hero);
  border-radius: 0;
  overflow: hidden;
  position: relative;
}
.hiyori-hero__media {
  background: #ddd;
  min-height: 420px;
  position: relative;
}

.hiyori-hero__media img {
  width: 100%;
  height: clamp(420px, 55vw, 760px);
  object-fit: cover;
  display: block;
}
.hiyori-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.20), rgba(0,0,0,0.00));
  pointer-events: none;
}

/* ヒーローの文字は container の中に入れて、ヘッダー/本文/フッターと左ラインを一致させる */
.hiyori-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  pointer-events: none;
  z-index: 2;
}

.hiyori-hero__body {
  pointer-events: auto;
  margin: 0;
  max-width: min(760px, 92vw);
  padding: 0;
  color: var(--hiyori-hero-text);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.hiyori-hero__title {
  font-family: "HanaMinA", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: clamp(2.2rem, 3.0vw, 3.0rem);
  line-height: 1.15;
  margin: 0;
  letter-spacing: 0.01em;
}

.hiyori-hero__lead {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.86);
  max-width: 58ch;
}

.hiyori-hero__note {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.72);
}

.hiyori-hero__actions {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hiyori-button {
  display: inline-block;
  border-radius: 999px;
  padding: 11px 18px;
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid var(--hiyori-line);
  background: transparent;
  color: var(--hiyori-text);
  transition: transform 140ms ease, opacity 140ms ease, border-color 140ms ease;
}

.hiyori-button:hover,
.hiyori-button:focus-visible {
  border-color: var(--hiyori-accent);
  transform: translateY(-1px);
}

.hiyori-button--primary {
  background: var(--hiyori-text);
  border-color: var(--hiyori-text);
  color: var(--hiyori-paper);
}

.hiyori-button--primary:hover,
.hiyori-button--primary:focus-visible {
  color: var(--hiyori-paper);
  opacity: 0.92;
}

@media (max-width: 981px) {
  .hiyori-hero__grid {
    grid-template-columns: 1fr;
  }
  .hiyori-hero__media {
    min-height: 280px;
  }
  .hiyori-hero__body {
    padding: 32px 22px;
  }
}

/* Content typography */
.hiyori-page-title {
  font-family: inherit;
  font-size: 2.1rem;
  line-height: 1.25;
  margin: 0 0 18px;
}

.hiyori-entry {
  padding-top: 28px;
}

.hiyori-entry h2 {
  font-family: inherit;
  margin-top: 32px;
  margin-bottom: 12px;
  line-height: 1.25;
}

.hiyori-entry table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--hiyori-line);
  background: var(--hiyori-paper);
}

.hiyori-entry th,
.hiyori-entry td {
  padding: 12px 14px;
  border-top: 1px solid var(--hiyori-line);
  vertical-align: top;
}

.hiyori-entry th {
  width: 30%;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

/* Footer */
.hiyori-footer {
  border-top: 1px solid var(--hiyori-line);
  padding: 48px 0;
}

.hiyori-footer__bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.hiyori-footer small {
  color: var(--hiyori-muted);
}


/* --- 投稿一覧（カテゴリ + 日付 + タイトル） --- */
.hiyori-breadcrumb {
  margin: 16px 0 28px;
  color: var(--hiyori-muted);
  font-size: 0.9rem;
}

.hiyori-postlist {
  padding-top: 8px;
}

.hiyori-postitem {
  padding: 18px 0 22px;
}

.hiyori-postmeta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hiyori-postcat {
  display: inline-block;
  width: fit-content;
  font-size: 0.85rem;
  color: var(--hiyori-muted);
  letter-spacing: 0.03em;
}

.hiyori-postdate {
  font-size: 0.92rem;
  color: var(--hiyori-text);
  letter-spacing: 0.02em;
}

.hiyori-posttitle {
  margin: 6px 0 0;
  font-family: inherit;
  font-size: 1.55rem;
  line-height: 1.25;
}

.hiyori-posttitle a {
  text-decoration: none;
}

.hiyori-pagination {
  padding: 30px 0 0;
}

.hiyori-pagination a {
  text-decoration: none;
  letter-spacing: 0.02em;
}

.hiyori-pagination a:hover,
.hiyori-pagination a:focus-visible {
  color: var(--hiyori-accent);
}


/* --- お問い合わせフォーム（Contact Form 7） --- */
.hiyori-form {
  margin-top: 24px;
}

.hiyori-form :where(label, .hiyori-fieldlabel) {
  display: block;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}

.hiyori-form :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea, select) {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid var(--hiyori-line);
  background: transparent;
  color: var(--hiyori-text);
  padding: 10px 2px;
  border-radius: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.hiyori-form textarea {
  min-height: 180px;
  resize: vertical;
}

.hiyori-form :where(input[type="text"], input[type="email"], input[type="tel"], textarea, select):focus-visible {
  outline: 0;
  border-bottom-color: var(--hiyori-text);
}

/* Contact Form 7 common classes */
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) form p {
  margin: 0 0 18px;
}

:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) form .wpcf7-form-control-wrap {
  display: block;
}

:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 0.9rem;
  color: #B00020;
}

:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) form .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 0;
}

:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) form .wpcf7-submit {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--hiyori-text);
  padding: 0;
  font-size: 1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: inset 0 -1px 0 0 var(--hiyori-text);
}

:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) form .wpcf7-submit:hover,
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) form .wpcf7-submit:focus-visible {
  color: var(--hiyori-muted);
  box-shadow: inset 0 -1px 0 0 var(--hiyori-muted);
}

/* Notes list (送信前のご注意) */
.hiyori-notes {
  margin-top: 26px;
}

.hiyori-notes h3 {
  font-size: 1rem;
  margin: 0 0 10px;
  font-weight: 600;
}

.hiyori-notes ul {
  margin: 0;
  padding-left: 18px;
  color: var(--hiyori-muted);
}


/* Custom logo */
.custom-logo {
  max-height: 42px;
  height: auto;
  width: auto;
  display: block;
}


@media (max-width: 800px) {
  .hiyori-header__bar {
    flex-wrap: wrap;
    gap: 10px;
  }

  .hiyori-nav {
    width: 100%;
    justify-content: flex-start;
  }

  .hiyori-nav ul {
    justify-content: flex-start;
    gap: 16px;
  }

  .hiyori-header__right {
    width: 100%;
    justify-content: flex-start;
    min-width: 0;
  }
}

/* アクセシビリティ：スクリーンリーダー専用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}




@media (max-width: 720px) {
  .home .hiyori-hero {
    margin-bottom: 18px;
  }
}

/* ------------------------------------------------------------
 * レスポンシブ：ヘッダーナビ（安全版）
 * - JSで「収まる/収まらない」を判定するとループしやすい
 * - ここではブレークポイントで確実に切替する（一般的で安全）
 * ------------------------------------------------------------ */

/* ハンバーガーボタン（デスクトップでは非表示） */
.hiyori-nav-toggle {
  display: none;
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  padding: 8px;
  cursor: pointer;
  margin-left: auto;
  color: var(--hiyori-text);
}

.hiyori-nav-toggle:focus-visible {
  outline: 2px solid var(--hiyori-text);
  outline-offset: 2px;
}

/* アイコン：Material Symbols */
.hiyori-nav-toggle__ms {
  font-size: 28px;
  line-height: 1;
  display: block;
}

/* モバイル：ナビパネル（ハンバーガーで開閉）
 *
 * 要望
 * - 押下時に「ぬるっと」開閉する（唐突に出たり消えたりしない）
 *
 * 実装方針
 * - `hidden` 属性は「アニメーション完了後」に付け外しする
 *   （display:none の間は transition が走らないため）
 * - 開閉中は `max-height / opacity / transform / padding` を transition する
 * - JS は `.is-open` の付け外しだけ担当し、表示切替（PC/モバイル）は media query に任せる
 */
.hiyori-mobile-nav {
  border-top: 1px solid transparent;
  padding: 0;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  overflow: hidden;
  pointer-events: none;
  will-change: max-height, opacity, transform, padding;
  transition:
    max-height 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 320ms ease;
}

.hiyori-mobile-nav.is-open {
  border-top-color: var(--hiyori-line);
  padding: 12px 0;
  max-height: 70vh; /* メニュー数が増えても破綻しにくい安全側 */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .hiyori-mobile-nav {
    transition: none;
    transform: none;
  }
}


/* ------------------------------------------------------------
 * モバイルナビ（表示パネル内のリスト見た目）
 *
 * 課題
 * - ブラウザ既定の「箇条書き（●）」が出ると一気に“Markdown感”が出てしまう
 *
 * 方針
 * - すべてのリスト（ul/ol/li）を強制的にリセットして、意図しない●やインデントを排除する
 * - 罫線で区切らず、余白とホバー下線で “静かに” 表現する
 * ------------------------------------------------------------ */
.hiyori-mobile-nav :where(ul, ol) {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hiyori-mobile-nav :where(li) {
  margin: 0 !important;
  padding: 0 !important;
}

.hiyori-mobile-menu {
  display: grid;
  gap: 14px;
  padding: 10px 0 6px;
}

.hiyori-mobile-menu a {
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding: 8px 0;
  text-decoration: none;
  letter-spacing: 0.04em;
  box-shadow: inset 0 -0px 0 0 transparent;
  transition: color 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

.hiyori-mobile-menu a:hover,
.hiyori-mobile-menu a:focus-visible {
  color: var(--hiyori-accent);
  box-shadow: inset 0 -1px 0 0 var(--hiyori-accent);
}

/* 切替：DevTools表示などで見切れないよう、やや広めでハンバーガーへ */
@media (max-width: 1200px) {
  .hiyori-header__bar {
    flex-wrap: wrap;
  }

  .hiyori-nav {
    display: none;
  }

  .hiyori-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
  }

  /* CTAはモバイルでは一旦非表示（見切れ防止）。必要ならパネル内に移設する */
  .hiyori-header__right {
    display: none;
  }
}

/* ------------------------------------------------------------
 * 全幅セクション
 * - header.php が <main><div class="hiyori-container"> を開くため、通常は左右に余白が入る
 * - トップのヒーローなど「全幅にしたい要素」だけ、このクラスでコンテナ制約を解除する
 * ------------------------------------------------------------ */
.hiyori-fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

body {
  overflow-x: clip;
}

/* ----------------------------------------
 * Hero（モバイル）
 *
 * 要件
 * - 「モバイルでもヒーロー画像の上に文言を載せる」
 * - フォントは小さめにして圧迫感を減らす
 * - 余計なグラデーション演出は入れない（暗め写真＋白文字＋影で読む）
 * ---------------------------------------- */
@media (max-width: 720px) {
  .hiyori-hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    pointer-events: none;
  }

  /* container の左ラインを維持しつつ、下余白だけ調整 */
  .hiyori-hero__overlay .hiyori-container {
    padding-bottom: 16px;
  }

  .hiyori-hero__body {
    pointer-events: auto;
    margin: 0;
    max-width: min(520px, 92vw);
    padding: 0;
    color: var(--hiyori-hero-text);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
  }

  .hiyori-hero__title {
    font-size: 1.75rem;
    line-height: 1.18;
  }

  .hiyori-hero__lead {
    margin-top: 10px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.86);
  }

  .hiyori-hero__note {
    margin-top: 10px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
  }

  .hiyori-hero__actions {
    margin-top: 14px;
    gap: 10px;
  }

  .hiyori-hero .hiyori-button {
    padding: 10px 14px;
    font-size: 0.95rem;
  }

  /* モバイル：グラデーション演出は無効化（暗め写真前提） */
  .hiyori-hero::before {
    content: none;
  }

  .hiyori-hero__media::after {
    content: none;
  }
}

/* 画像上の可読性を確保するための暗めグラデーション（下にいくほど濃く） */
.hiyori-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.10) 0%,
    rgba(0, 0, 0, 0.18) 35%,
    var(--hiyori-hero-overlay) 65%,
    var(--hiyori-hero-overlay-strong) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ヒーロー内ボタン：暗い背景で視認できるように反転 */
.hiyori-hero .hiyori-button {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.hiyori-hero .hiyori-button--primary {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.48);
}

.hiyori-hero .hiyori-button:hover {
  border-color: rgba(255, 255, 255, 0.60);
}

.hiyori-hero .hiyori-button--primary:hover {
  background: rgba(255, 255, 255, 0.16);
}


/* ヒーローの文字ブロックをコンテナ基準で揃える（ヘッダー/本文と左ラインを一致させる） */
.hiyori-hero__overlay .hiyori-container {
  width: 100%;
  padding-bottom: clamp(18px, 4vw, 52px);
}


/* ----------------------------------------
 * Splash（ページロード時のスプラッシュ）
 *
 * 設計メモ
 * - 白地で一瞬見せて消える “スプラッシュ” の質感
 *
 * NOTE
 * - 初回描画の確実性のため、header.php に最小限の inline style を置いている
 * - ここは見た目の上書き（ロゴサイズ、バーの質感など）
 * ---------------------------------------- */
#hiyori-splash .hiyori-splash__inner {
  transform: translateY(-2px);
}

#hiyori-splash .hiyori-splash__bar {
  width: 136px;
  margin-top: 18px;
  background: rgba(0, 0, 0, 0.10);
}

#hiyori-splash .hiyori-splash__bar::after {
  background: rgba(0, 0, 0, 0.50);
}

@media (max-width: 720px) {
  #hiyori-splash .hiyori-splash__bar {
    width: 120px;
  }
}






@media (max-width: 720px) {
  }


/* ----------------------------------------
 * Top: 新着情報（余白で区切る “積み上げ”）
 *
 * 要件
 * - 線で区切るのはNG
 * - 余白で区切り、静かに積み上げる
 * - 個別記事へのリンクはトップでは出さない（“飛ぶ感じ”を避ける）
 * ---------------------------------------- */
.hiyori-feed {
  display: block;
}

.hiyori-feeditem {
  /* “区切り”は線ではなく、淡い面（背景）＋余白で表現する */
  background: rgba(0, 0, 0, 0.02);
  padding: 18px 18px;
  border-radius: 10px;
}.hiyori-feeditem + .hiyori-feeditem {
  margin-top: 18px;
}.hiyori-feeditem__meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 0.92rem;
  color: var(--hiyori-muted);
}

.hiyori-feeditem__cat:empty {
  display: none;
}

.hiyori-feeditem__title {
  margin: 0;
  font-size: 1.18rem;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.hiyori-feeditem__excerpt {
  margin: 10px 0 0;
  color: var(--hiyori-muted);
  line-height: 1.8;
}

@media (max-width: 720px) {
  .hiyori-feeditem + .hiyori-feeditem {
    margin-top: 22px;
  }

  .hiyori-feeditem__title {
    font-size: 1.08rem;
  }

  .hiyori-feeditem__meta {
    font-size: 0.88rem;
  }
}


/* ----------------------------------------
 * Form controls
 *
 * 目的
 * - ブラウザ既定の UI フォントに戻らず、本文と同じフォントで統一する
 * ---------------------------------------- */
input,
textarea,
select,
button {
  font: inherit;
}


/* ----------------------------------------
 * Font override（全テキスト HanaMinA 統一）
 *
 * 目的
 * - テーマ内の一部要素だけ別 font-family を指定している箇所があっても、
 *   最終的に body の HanaMinA に揃える
 * ---------------------------------------- */
h1, h2, h3, h4, h5, h6,
.hiyori-brand,
.hiyori-page-title,
.hiyori-nav,
.hiyori-mobile-nav,
.hiyori-button {
  font-family: inherit;
}

/* ----------------------------------------
 * Typography: 見出しの “太すぎ” 対策
 *
 * 背景
 * - ブラウザ既定の見出し (h1/h2...) は font-weight: bold で描画される
 * - HanaMinA は太字が重く見えやすい（合成ボールド含む）
 *
 * 方針
 * - 見出しは基本 400 で統一（必要なら個別に強調を足す）
 * - 合成ボールドを抑止する（font-synthesis）
 * ---------------------------------------- */
:where(h1, h2, h3, h4, h5, h6) {
  font-weight: 400;
  font-synthesis: none;
}

/* 投稿一覧（トップ/アーカイブ）と投稿ページのタイトルを明示的に細くする */
:where(.hiyori-feeditem__title, .hiyori-posttitle, .entry-title, .hiyori-entry h2) {
  font-weight: 400;
  font-synthesis: none;
}

/* ----------------------------------------
 * Top: ヒーローと本文（投稿）間の余白
 *
 * 目的
 * - ヒーロー直下にコンテンツがくっついて見えるのを防ぐ
 * - 区切り線ではなく “空間” で区切る
 *
 * NOTE
 * - トップ（.home）にだけ適用する
 * ---------------------------------------- */
.home .hiyori-hero {
  margin-bottom: 28px;
}

@media (max-width: 720px) {
  .home .hiyori-hero {
    margin-bottom: 18px;
  }
}


/* ----------------------------------------
 * 固定ページ見出し（H1）の質感調整
 *
 * 背景
 * - HanaMinA は線が太く見えやすく、太字指定だと “重い” 印象になりやすい
 *
 * 方針
 * - 太字を使わず、字間と行間で “静かさ” を出す
 * - 余白を取り、タイトルだけが浮かないようにする
 * ---------------------------------------- */
.page .hiyori-page-title,
.page .entry-title {
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.18;
  /* 画面幅に応じて大きさを穏やかに可変（極端にデカくしない） */
  font-size: clamp(1.9rem, 2.4vw, 2.45rem);
  text-wrap: balance;
}

@media (max-width: 720px) {
  .page .hiyori-page-title,
  .page .entry-title {
    letter-spacing: 0.06em;
    font-size: clamp(1.65rem, 6vw, 2.05rem);
  }
}

/* 見出し直下の説明文がある場合の “間” を少し丁寧にする */
.page .hiyori-page-header {
  margin-bottom: 22px;
}


/* ----------------------------------------
 * Contact Form 7（お問い合わせフォームの見た目をテーマ側で統一）
 *
 * 方針
 * - フォーム本体の項目構成は Contact Form 7 側で管理する
 * - テーマ側は “見た目だけ” を整える（レイアウト崩れを起こしにくい）
 * - 影やカード感は出さず、薄い線＋余白で静かなトーンにする
 *
 * 適用範囲
 * - `.hiyori-form` 配下のみ
 *   （管理画面や他フォームを巻き込まない）
 * ---------------------------------------- */

/* 適用セレクタ
 *
 * `.hiyori-form` が無いページ（通常の固定ページ本文にショートコードを貼った場合）でも
 * Contact Form 7 の見た目が崩れないように、`.entry-content .wpcf7`（WP標準本文）と `.hiyori-entry .wpcf7`（テーマ本文）でも拾う。
 *
 * ただし、テーマ全体へ広げ過ぎないため「本文領域（entry-content/hiyori-entry）」に限定する。
 */
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) {
  max-width: var(--hiyori-content);
}
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) form {
  margin: 0;
}

/* Contact Form 7 は <p> で項目を包むことが多いので、ここを余白の単位にする */
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) form p {
  margin: 0 0 22px;
}

/* ラベル */
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) label {
  display: block;
  margin: 0 0 10px;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
}

/* 必須の “※” はフォーム側で出す（例: <span class="hiyori-required">※</span>） */
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) .hiyori-required {
  color: var(--hiyori-danger);
  margin-left: 6px;
}


/* 既存フォームの `class="req"` を必須マークとして扱う（フォーム側の自由度を確保する）
 *
 * 目的
 * - Contact Form 7 の本文（フォーム定義）側で `<span class="req">※</span>` を置く運用に対応する
 * - テーマ側で色だけ統一し、構造や文言はフォーム側に閉じ込める
 */
:is(.hiyori-form .wpcf7, .page .entry-content .wpcf7, .page .hiyori-entry .wpcf7) .req {
  color: var(--hiyori-danger);
}

/* 「※は入力必須項目です。」のような注記は控えめに */
:is(.hiyori-form .wpcf7, .page .entry-content .wpcf7, .page .hiyori-entry .wpcf7) .form-note {
  margin: 0 0 18px;
  font-size: 0.92rem;
  color: var(--hiyori-muted);
}



/* 必須マーク自動付与（フォーム側で※を入れ忘れても視認性を担保する）
 *
 * 前提
 * - CF7 の「必須」入力は `wpcf7-validates-as-required` クラスが付く
 * - 多くの構成では input/textarea が label 内に配置される
 *
 * 方針
 * - label が必須フィールドを含む場合、疑似要素で「※」を追記して赤くする
 * - 既にフォーム側で `.hiyori-required` を入れている場合でも、表示が二重にならないように配慮する
 *
 * NOTE
 * - `:has()` を使うため、古いブラウザでは効かない可能性がある
 *   （その場合はフォーム側で `<span class="hiyori-required">※</span>` を入れる）
 */
:is(.hiyori-form .wpcf7, .page .entry-content .wpcf7, .page .hiyori-entry .wpcf7) label:has(.wpcf7-validates-as-required):not(:has(.hiyori-required))::after {
  content: " ※";
  color: var(--hiyori-danger);
  margin-left: 6px;
}

/* 入力欄：薄い線 + 余白（カード化しない） */
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) input[type="text"],
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) input[type="email"],
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) input[type="tel"],
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) input[type="url"],
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) input[type="number"],
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) input[type="date"],
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) select,
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) textarea {
  /* 入力欄はフォーム幅いっぱいに揃える（CF7/ブラウザ差異を吸収するため !important を使う） */
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;

  border: 1px solid rgba(0, 0, 0, 0.38);
  background: transparent;
  padding: 12px 14px;
  border-radius: 6px;
  line-height: 1.6;
}

:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) textarea {
  min-height: 220px;
  resize: vertical;
}

:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) input::placeholder,
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) textarea::placeholder {
  color: rgba(17, 17, 17, 0.45);
}

/* フォーカス：主張は弱めに、でも分かる */
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) input:focus,
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) select:focus,
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) textarea:focus {
  outline: none;
  border-color: rgba(17, 17, 17, 0.8);
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

/* チェックボックス/ラジオ */
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) .wpcf7-list-item {
  margin: 0;
}

:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) .wpcf7-list-item label {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

/* 送信ボタン：ピル/強いCTAを避ける */
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) input[type="submit"],
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) button[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(17, 17, 17, 0.8);
  background: transparent;
  color: var(--hiyori-text);
  padding: 12px 20px;
  border-radius: 999px; /* 角丸はするが “ピル感” を出し過ぎないために余白を控えめに */
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}

:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) input[type="submit"]:hover,
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) button[type="submit"]:hover {
  background: rgba(17, 17, 17, 0.06);
}

:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) input[type="submit"]:disabled,
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) button[type="submit"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* バリデーション */
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) .wpcf7-not-valid-tip {
  margin-top: 8px;
  color: var(--hiyori-danger);
  font-size: 0.92rem;
}

:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) form.invalid .wpcf7-response-output,
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) form.unaccepted .wpcf7-response-output,
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) form.failed .wpcf7-response-output {
  border-color: var(--hiyori-danger);
  color: var(--hiyori-danger);
}

:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) form.sent .wpcf7-response-output {
  border-color: rgba(17, 17, 17, 0.35);
  color: var(--hiyori-text);
}

:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(17, 17, 17, 0.25);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.02);
}

/* スピナー：主張は控えめにする */
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) .wpcf7-spinner {
  margin-left: 12px;
  opacity: 0.65;
}



/* 送信ボタン（フォーム側で `class:hiyori-btn` を指定した場合の見た目）
 *
 * NOTE
 * - CF7 の [submit] は <input type="submit"> になるため class を付ける運用が堅い
 */
:is(.hiyori-form .wpcf7, .page .entry-content .wpcf7, .page .hiyori-entry .wpcf7) .hiyori-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(17, 17, 17, 0.8);
  background: transparent;
  color: var(--hiyori-text);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}

:is(.hiyori-form .wpcf7, .page .entry-content .wpcf7, .page .hiyori-entry .wpcf7) .hiyori-btn:hover,
:is(.hiyori-form .wpcf7, .page .entry-content .wpcf7, .page .hiyori-entry .wpcf7) .hiyori-btn:focus-visible {
  background: rgba(17, 17, 17, 0.06);
}


@media (max-width: 720px) {
  .hiyori-form .wpcf7 form p {
    margin-bottom: 18px;
  }

  .hiyori-form .wpcf7 textarea {
    min-height: 200px;
  }
}



/* テーマ/プラグイン側の `p { max-width: ... }` を踏まえ、CF7 の項目コンテナだけは制限を解除する */
:is(.hiyori-form .wpcf7, .entry-content .wpcf7, .hiyori-entry .wpcf7) form p {
  max-width: none;
}