/*
Theme Name:  Original Soft Blue
Theme URI:   https://example.com/
Author:      Your Name
Author URI:  https://example.com/
Description: 誠実さと親しみやすさを両立した、フルスクラッチのオリジナルWordPressテーマ。
             青系メインカラーと黄色アクセントで、柔らかく信頼感のあるブログデザインを実現。
Version:     1.25.8
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: original-soft-blue
Tags:        blog, custom-colors, custom-logo, full-site-editing
*/


/* ============================================================
   1. CSS カスタムプロパティ（変数）
   ============================================================
   色・スペース・タイポグラフィ・角丸をすべてここで一元管理する。
   変更したい場合はこのセクションだけ編集すればOK。
   ============================================================ */

:root {

  /* --- カラー --- */
  --color-main:         #35b5d4;   /* メインカラー（青系） */
  --color-main-dark:    #2196b5;   /* メインカラー：ホバー・強調用 */
  --color-main-light:   #e8f7fb;   /* メインカラー：薄い背景用 */

  --color-accent:       #ffed00;   /* アクセント：CTAボタン・ハイライト */
  --color-accent-dark:  #e6d500;   /* アクセント：ホバー時 */

  --color-bg:           #f8fbfd;   /* ページ全体の背景色 */
  --color-surface:      #ffffff;   /* カード・コンテンツ領域の白 */

  --color-text:         #333333;   /* 本文テキスト（ソフトブラック） */
  --color-text-sub:     #666666;   /* 日付・メタ情報など補足テキスト */
  --color-text-muted:   #999999;   /* 薄いテキスト・プレースホルダー */

  --color-border:       #dce8ef;   /* 区切り線・入力枠 */

  /* --- フォント ---
     Zen Kaku Gothic New：丸みのある現代的ゴシック体。
     本文・見出し共通で使用し、柔らかく親しみやすい印象を統一する。
     フォールバックはシステムの丸ゴシック系を優先して指定。          */
  --font-heading: 'Zen Kaku Gothic New', 'Hiragino Maru Gothic ProN', 'rounded-mplus-1c', sans-serif;
  --font-body:    'Zen Kaku Gothic New', 'Hiragino Maru Gothic ProN', 'メイリオ', sans-serif;
  --font-code:    'Source Code Pro', 'Courier New', monospace;

  /* --- フォントサイズ（rem基準） --- */
  --text-xs:   0.75rem;    /* 12px：極小・補足 */
  --text-sm:   0.875rem;   /* 14px：メタ情報 */
  --text-base: 1rem;       /* 16px：本文 */
  --text-lg:   1.125rem;   /* 18px：リード文 */
  --text-xl:   1.25rem;    /* 20px：小見出し h4 */
  --text-2xl:  1.5rem;     /* 24px：見出し h3 */
  --text-3xl:  1.875rem;   /* 30px：見出し h2 */
  --text-4xl:  2.25rem;    /* 36px：見出し h1 */

  /* --- スペーシング（4pxグリッド） --- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;

  /* --- 角丸 --- */
  --radius-sm:   4px;      /* バッジ・タグ */
  --radius-md:   8px;      /* ボタン・入力欄 */
  --radius-lg:   12px;     /* カード・パネル */
  --radius-xl:   16px;     /* モーダル・大きなカード */
  --radius-full: 9999px;   /* 丸ボタン・アバター */

  /* --- シャドウ --- */
  --shadow-sm: 0 1px 4px rgba(53, 181, 212, 0.08);
  --shadow-md: 0 4px 20px rgba(53, 181, 212, 0.15);
  --shadow-header: 0 2px 12px rgba(0, 0, 0, 0.06);

  /* --- トランジション --- */
  --transition: all 0.25s ease;

  /* --- コンテンツ幅 --- */
  --content-width: 780px;   /* 本文の最大幅（読みやすさを優先） */
  --wide-width:    1100px;  /* ヘッダー・フッター等のワイドコンテナ */
}


/* ============================================================
   2. リセットCSS
   ============================================================
   ブラウザ間のデフォルトスタイル差異をゼロにリセットする。
   モダンなアプローチ（normalize寄り）を採用。
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box; /* パディングが幅に含まれるよう統一 */
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;          /* ユーザーのブラウザ設定を尊重 */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;  /* アンカーリンクをスムーズスクロール */
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.9;            /* 日本語本文は行間を広めに */
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;  /* フォントを滑らかに描画 */
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%; /* 画像のはみ出しを防ぐ */
}

input,
button,
textarea,
select {
  font: inherit; /* フォームもbodyのフォントを継承 */
}

ul,
ol {
  list-style: none; /* デフォルトの点・番号を消す（個別に付与する） */
}

a {
  color: var(--color-main);
  text-decoration: underline;
  text-underline-offset: 3px; /* 下線と文字の間に少し隙間 */
  transition: var(--transition);
}

a:hover {
  color: var(--color-main-dark);
  text-decoration-thickness: 2px;
}

/* アクセシビリティ：フォーカス時のアウトライン（消さない！） */
:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ============================================================
   3. タイポグラフィ
   ============================================================
   見出し・本文・引用など、文章要素の共通スタイル。
   ============================================================ */

/* 見出し共通 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.5;             /* Zen Kaku Gothic New は行間を少し広めにするとバランスがよい */
  letter-spacing: 0.03em;       /* セリフ体より字間を詰めて自然に */
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

/* 本文段落 */
p {
  margin-bottom: var(--space-6);
  letter-spacing: 0.02em;
}

/* 強調 */
strong {
  font-weight: 700;
  color: var(--color-text);
}

/* 引用ブロック */
blockquote {
  border-left: 4px solid var(--color-main);
  background-color: var(--color-main-light);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-8) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-text-sub);
  font-style: italic;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* インラインコード */
code {
  font-family: var(--font-code);
  font-size: var(--text-sm);
  background-color: var(--color-main-light);
  color: var(--color-main-dark);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

/* コードブロック */
pre {
  font-family: var(--font-code);
  font-size: var(--text-sm);
  background-color: #1e2a33;  /* ダークな背景でコードを見やすく */
  color: #d4e8f0;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin: var(--space-8) 0;
  line-height: 1.7;
}

pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* 水平線 */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-12) 0;
}

/* 本文中のリスト（投稿内で使用） */
.entry-content ul,
.entry-content ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-6);
}

.entry-content ul {
  list-style: disc;
}

.entry-content ol {
  list-style: decimal;
}

.entry-content li {
  margin-bottom: var(--space-2);
  line-height: 1.8;
}


/* ============================================================
   4. レイアウト（コンテナ）
   ============================================================
   コンテンツ幅の制御と中央揃えに使うユーティリティクラス。
   ============================================================ */

/* 標準コンテナ（本文幅） */
.container {
  width: 100%;
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* ワイドコンテナ（ヘッダー・フッター向け） */
.container--wide {
  width: 100%;
  max-width: var(--wide-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* セクション区切りのための縦余白 */
.section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.section--large {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}


/* ============================================================
   5. ボタン
   ============================================================
   CTAボタン・セカンダリボタン・テキストボタンの3種類。
   ============================================================ */

/* ボタン共通リセット */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  line-height: 1;
}

/* プライマリボタン（メインカラー） */
.btn--primary {
  background-color: var(--color-main);
  color: #ffffff;
  border-color: var(--color-main);
}

.btn--primary:hover {
  background-color: var(--color-main-dark);
  border-color: var(--color-main-dark);
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);  /* わずかに浮き上がる感覚 */
  box-shadow: var(--shadow-md);
}

/* アクセントボタン（黄色・CTAに使用） */
.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-text);       /* 黄色地には暗い文字が読みやすい */
  border-color: var(--color-accent);
}

.btn--accent:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-text);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255, 237, 0, 0.4);
}

/* アウトラインボタン（透明地・サブ用途） */
.btn--outline {
  background-color: transparent;
  color: var(--color-main);
  border-color: var(--color-main);
}

.btn--outline:hover {
  background-color: var(--color-main-light);
  text-decoration: none;
}

/* サイズバリエーション */
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  white-space: nowrap;          /* 「続きを読む」などの短いラベルが改行されないよう固定 */
  min-width: max-content;       /* テキスト幅を最低保証 */
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
  border-radius: var(--radius-lg);
}

/* 全幅ボタン */
.btn--block {
  display: flex;
  width: 100%;
}


/* ============================================================
   6. カード型レイアウト
   ============================================================
   ブログ記事一覧・プロフィール・インフォメーションなどに使用。
   ============================================================ */

/* カードグリッドの親コンテナ
   ─ 全画面幅で1枚ずつ縦に積む1カラム固定レイアウト ─ */
.card-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);          /* カード間の余白をゆったり広めに */
}

/* カード本体：フレックスで左に画像・右にテキストを並べる
   グリッドをやめることで、画像列の高さがテキスト列に引っ張られなくなる */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  display: flex;
  flex-direction: row;            /* 横並び */
  align-items: stretch;           /* 左右の高さを揃える */
}

/* モバイル：縦積みに切り替え */
@media (max-width: 599px) {
  .card {
    flex-direction: column;
  }
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* 画像ラッパー：幅40%固定。overflow:hiddenでhoverズームをクリップ */
.card__thumbnail-link {
  display: flex;                  /* imgをflexアイテムにして高さ制御しやすくする */
  flex: 0 0 40%;
  align-self: stretch;            /* 右側コンテンツ列と同じ高さに伸ばす */
  background-color: var(--color-main-light);
  overflow: hidden;
  min-height: 200px;
}

@media (max-width: 599px) {
  .card__thumbnail-link {
    flex: none;
    width: 100%;
    min-height: 180px;
    max-height: 260px;            /* モバイルは高さを制限して縦長になりすぎるのを防ぐ */
  }
}

/* 画像本体：上端固定でトリミング */
.card__thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  flex: 1;
  object-fit: cover !important;
  object-position: center top !important; /* 左右中央・上端固定。!importantで他スタイルの上書きを防ぐ */
  background-color: var(--color-main-light);
  transition: transform 0.35s ease;
}

/* WordPress が出力する <img> タグへの直接指定（セレクター網羅） */
.card__thumbnail-link img,
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center top !important;
}

.card:hover .card__thumbnail {
  transform: scale(1.03);
}

/* 右側コンテンツ（body＋footer）を縦フレックスでまとめるラッパー */
.card__content {
  display: flex;
  flex-direction: column;
  flex: 1;                        /* 残りの幅を全部使う */
  min-width: 0;                   /* テキストが溢れないようにする */
}

/* カードのテキスト本体 */
.card__body {
  padding: var(--space-6) var(--space-8);
  flex: 1;                        /* 残りの縦スペースを使う */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
}

@media (max-width: 599px) {
  .card__body {
    padding: var(--space-6) var(--space-6);
  }
}

/* カードのカテゴリラベル */
.card__category {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-main);
  background-color: var(--color-main-light);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  align-self: flex-start;       /* 横幅をテキスト分だけに抑える */
}

.card__category:hover {
  background-color: var(--color-main);
  color: #ffffff;
  text-decoration: none;
}

/* カードのタイトル */
.card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);    /* 横長カードなのでサイズを少し大きく */
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text);
  margin-bottom: 0;
}

.card__title a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;                /* クリック可能であることを明示 */
}

.card__title a:hover {
  color: var(--color-main);
}

/* 抜粋テキストリンク：テキスト外観を保ちつつクリック可能に */
.card__excerpt-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.card__excerpt-link:hover {
  text-decoration: none;
}

.card__excerpt-link:hover .card__excerpt {
  color: var(--color-text);       /* ホバーで少し濃くして反応をフィードバック */
}

/* カードの抜粋テキスト */
.card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-sub);
  line-height: 1.8;
  margin-bottom: 0;

  /* 4行で省略表示（横長レイアウトでは行数を増やしてゆったり見せる） */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* カードのフッター（日付・続きを読む） */
.card__footer {
  padding: var(--space-4) var(--space-8);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;               /* bodyが伸びてもフッターが下に固定される */
}

@media (max-width: 599px) {
  .card__footer {
    padding: var(--space-4) var(--space-6);
  }
}

.card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;          /* 日付の改行を防ぐ */
}


/* ============================================================
   7. バッジ・タグ
   ============================================================
   投稿タグや分類ラベルに使用するコンポーネント。
   ============================================================ */

.tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-text-sub);
  background-color: var(--color-bg);
  text-decoration: none;
  transition: var(--transition);
}

.tag:hover {
  border-color: var(--color-main);
  color: var(--color-main);
  background-color: var(--color-main-light);
  text-decoration: none;
}

/* タグ群のラッパー */
.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}


/* ============================================================
   8. ページ構造（ヘッダー・フッター）
   ============================================================
   サイト全体のヘッダーとフッターの骨格スタイル。
   ============================================================ */

/* --- サイトヘッダー --- */
.site-header {
  position: sticky;              /* スクロール時も上部に固定 */
  top: 0;
  z-index: 100;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-header);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

/* ロゴ・サイト名 */
.site-logo {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-main);
  text-decoration: none;
  letter-spacing: 0.03em;
}

.site-logo:hover {
  color: var(--color-main-dark);
  text-decoration: none;
}

/* ナビゲーション */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-nav a {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-sub);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: var(--transition);
}

.site-nav a:hover,
.site-nav a.current {
  color: var(--color-main);
}

/* --- サイトフッター --- */
.site-footer {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-12) 0 var(--space-8);
  margin-top: var(--space-16);
}

.site-footer__inner {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}


/* ============================================================
   9. 注意書き・ハイライトボックス
   ============================================================
   ブログ記事内でよく使う「ポイント」「注意」などのボックス。
   ============================================================ */

/* 共通ボックス */
.notice-box {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  margin: var(--space-8) 0;
  border-left: 4px solid;
}

/* インフォメーション（青） */
.notice-box--info {
  background-color: var(--color-main-light);
  border-left-color: var(--color-main);
  color: var(--color-text);
}

/* 重要（黄色アクセント） */
.notice-box--important {
  background-color: #fffde7;
  border-left-color: var(--color-accent);
  color: var(--color-text);
}

/* 警告（オレンジ系） */
.notice-box--warning {
  background-color: #fff3e0;
  border-left-color: #ff9800;
  color: var(--color-text);
}

/* 成功（グリーン系） */
.notice-box--success {
  background-color: #e8f5e9;
  border-left-color: #4caf50;
  color: var(--color-text);
}

.notice-box p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   10. レスポンシブ調整
   ============================================================
   モバイルファーストで記述。必要な要素のみ上書き。
   ============================================================ */

/* タブレット以上（600px〜） */
@media (min-width: 600px) {
  h1 { font-size: calc(var(--text-4xl) * 1.1); }

  .section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
}

/* デスクトップ以上（960px〜） */
@media (min-width: 960px) {
  .container,
  .container--wide {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }

  h1 { font-size: calc(var(--text-4xl) * 1.2); }
}

/* スマートフォン：ナビゲーションを隠す（ハンバーガーに切り替える想定） */
@media (max-width: 599px) {
  .site-nav {
    display: none; /* functions.php でハンバーガーメニューを実装すること */
  }
}
/* ============================================================
   style.css への追記分
   投稿詳細ページ（single.php）専用スタイル
   ============================================================
   ============================================================ */


/* ============================================================
   ヘッダー追記：タグライン（キャッチフレーズ）
   ============================================================ */

.site-header__tagline {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  letter-spacing: 0.04em;
}


/* ============================================================
   ハンバーガーボタン（モバイル用）
   ============================================================ */

.site-header__hamburger {
  display: none;                  /* PCでは非表示 */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: var(--radius-full);
  transition: var(--transition);
}

@media (max-width: 599px) {
  .site-header__hamburger {
    display: flex;  /* モバイルでのみ表示 */
  }
}


/* ============================================================
   カテゴリーインデックスバー（header.php）
   ヘッダーの下部に横スクロール可能なカテゴリータブを表示する。
   ============================================================ */

.category-bar {
  background-color: var(--color-main-light);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.category-bar__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);            /* カテゴリー間にゆとりのある隙間を確保 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 var(--space-4);      /* 左右の端にも余白を設ける */
  list-style: none;
}

.category-bar__list::-webkit-scrollbar {
  display: none;                /* Chromeでスクロールバー非表示 */
}

.category-bar__item {
  flex-shrink: 0;               /* アイテムが縮まないよう固定 */
}

.category-bar__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4); /* 左右余白を少し控えめにし、gap で間隔を担保 */
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-sub);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; /* 上部だけ角丸でタブ感を演出 */
  transition: var(--transition);
}

.category-bar__link:hover {
  color: var(--color-main);
  background-color: rgba(53, 181, 212, 0.08);
  text-decoration: none;
}

/* 現在表示中のカテゴリーを強調 */
.category-bar__link.is-current {
  color: var(--color-main);
  border-bottom-color: var(--color-main);
  background-color: rgba(53, 181, 212, 0.06);
}

/* 記事数バッジ */
.category-bar__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 var(--space-1);
  font-size: 10px;
  font-weight: 700;
  background-color: var(--color-main);
  color: #ffffff;
  border-radius: var(--radius-full);
  line-height: 1;
}

.category-bar__link.is-current .category-bar__count,
.category-bar__link:hover .category-bar__count {
  background-color: var(--color-main-dark);
}


/* ============================================================
   アーカイブヘッダー（index.php の一覧ページタイトル）
   ============================================================ */

.archive-header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 2px solid var(--color-border);
}

.archive-header__title {
  font-size: var(--text-3xl);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.archive-header__desc {
  color: var(--color-text-sub);
  font-size: var(--text-base);
  margin-bottom: 0;
}


/* ============================================================
   ページネーション（index.php）
   ============================================================ */

.pagination-wrapper {
  margin-top: var(--space-12);
  display: flex;
  justify-content: center;
}

/* WordPress が生成するページネーションのデフォルトスタイルを上書き */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.nav-links a,
.nav-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-sub);
  text-decoration: none;
  transition: var(--transition);
}

.nav-links a:hover {
  border-color: var(--color-main);
  color: var(--color-main);
  background-color: var(--color-main-light);
  text-decoration: none;
}

/* 現在のページ */
.nav-links .current {
  background-color: var(--color-main);
  border-color: var(--color-main);
  color: #ffffff;
}

/* 前へ・次へリンク */
.nav-links .prev,
.nav-links .next {
  min-width: auto;
  padding: 0 var(--space-4);
}


/* ============================================================
   投稿詳細ページ：ヒーローエリア（single.php）
   ============================================================ */

.post-hero {
  margin-bottom: var(--space-12);
}

/* アイキャッチ画像ラッパー：aspect-ratio で比率を固定し、見切れを防ぐ */
.post-hero__image-wrapper {
  width: 100%;
  aspect-ratio: 16 / 7;           /* 横長の比率で高さを自動計算。画像が縦長でも枠が崩れない */
  overflow: hidden;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl); /* 下部だけ角丸 */
}

.post-hero__image {
  width: 100%;
  height: 100%;                   /* ラッパーの aspect-ratio に合わせて高さを埋める */
  object-fit: contain;            /* contain = 画像全体が枠内に収まる。引き伸ばし・見切れなし */
  object-position: center;
  background-color: var(--color-main-light); /* 余白部分の背景色（letterbox） */
}

/* ヒーロー内テキストエリア */
.post-hero__content {
  padding-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.post-hero__categories {
  /* tag-group クラスがベース。位置調整のみ */
}

/* 記事タイトル */
.post-hero__title {
  font-size: var(--text-4xl);
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: var(--color-text);
  margin-bottom: 0;
}

@media (max-width: 599px) {
  .post-hero__title {
    font-size: var(--text-3xl);
  }
}


/* ============================================================
   投稿メタ情報（日付・著者・読了時間）
   ============================================================ */

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-main-light);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-main);
}

.post-meta__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-sub);
}

.post-meta__label {
  font-weight: 700;
  font-size: var(--text-xs);
  color: var(--color-main);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.post-meta a {
  color: var(--color-text-sub);
}

.post-meta a:hover {
  color: var(--color-main);
}


/* ============================================================
   投稿本文レイアウト
   ============================================================ */

.post-layout {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.post-content-wrapper {
  /* WordPress の post_class() で付与されるクラスへのリセット */
  margin: 0;
  padding: 0;
}


/* ============================================================
   記事下エリア（タグ）
   ============================================================ */

.post-footer-area {
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.post-tags {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.post-tags__label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-sub);
  padding-top: 2px;  /* タグバッジとの縦位置を揃える */
  white-space: nowrap;
}


/* ============================================================
   前後記事ナビゲーション
   ============================================================ */

.post-navigation {
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.post-navigation__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

@media (max-width: 599px) {
  .post-navigation__inner {
    grid-template-columns: 1fr;  /* モバイルは縦並び */
  }
}

.post-navigation__prev,
.post-navigation__next {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.post-navigation__next {
  text-align: right;  /* 次の記事は右寄せ */
}

.post-navigation__label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.post-navigation__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.5;
  transition: var(--transition);
}

.post-navigation__link:hover {
  color: var(--color-main);
}


/* ============================================================
   ページ分割ナビ（<!--nextpage--> 使用時）
   ============================================================ */

.page-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-8) 0;
  font-size: var(--text-sm);
  font-weight: 600;
  flex-wrap: wrap;
}

.page-links__label {
  color: var(--color-text-sub);
}

.page-links__item a,
.page-links__item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text-sub);
  transition: var(--transition);
}

.page-links__item a:hover {
  border-color: var(--color-main);
  color: var(--color-main);
}


/* ============================================================
   フッター追記スタイル
   ============================================================ */

.site-footer__sitename {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.site-footer__sitename a {
  color: var(--color-text);
  text-decoration: none;
}

.site-footer__sitename a:hover {
  color: var(--color-main);
}

.site-footer__tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.site-footer__copyright {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.site-footer__copyright a {
  color: var(--color-text-sub);
}

/* フッターナビゲーション */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  margin-bottom: var(--space-8);
  list-style: none;
}

.footer-nav a {
  font-size: var(--text-sm);
  color: var(--color-text-sub);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--color-main);
}

/* ============================================================
   LINE CTA ボックス（[line_cta] ショートコード）
   PC・SP共通：縦並び中央揃えレイアウト
   ============================================================ */

/* ---- フローティング＋点滅の複合アニメーション定義 ----
   上下浮遊（translateY）と不透明度変化（opacity）を同時に動かす。
   浮き上がるにつれてわずかに明るくなる「息をする」ような動き。
   振れ幅 7px・周期 2.8秒でテンポよく目を引く。               */
@keyframes osb-float {
  0%   {
    transform: translateY(0px);
    box-shadow:
      0 4px 14px rgba(255, 237, 0, 0.35),
      0 2px  6px rgba(0, 0, 0, 0.08);
    opacity: 1;
  }
  50%  {
    transform: translateY(-7px);
    /* 浮き上がると影が深くなり、立体感・浮遊感が増す */
    box-shadow:
      0 14px 28px rgba(255, 237, 0, 0.55),
      0  6px 12px rgba(0, 0, 0, 0.10);
    opacity: 0.88;               /* わずかに透けて「ふわっ」とした印象 */
  }
  100% {
    transform: translateY(0px);
    box-shadow:
      0 4px 14px rgba(255, 237, 0, 0.35),
      0 2px  6px rgba(0, 0, 0, 0.08);
    opacity: 1;
  }
}

/* ---- ホバー時：輝き点滅アニメーション ---- */
@keyframes osb-glow {
  0%   {
    box-shadow:
      0  6px 20px rgba(255, 237, 0, 0.50),
      0  2px  8px rgba(0, 0, 0, 0.10);
  }
  50%  {
    box-shadow:
      0 10px 36px rgba(255, 237, 0, 0.80),
      0  4px 12px rgba(0, 0, 0, 0.12);
  }
  100% {
    box-shadow:
      0  6px 20px rgba(255, 237, 0, 0.50),
      0  2px  8px rgba(0, 0, 0, 0.10);
  }
}

/* ---- CTAボックス本体 ---- */
.line-cta-box {
  display: flex;
  flex-direction: column;         /* 縦並び固定（PC・SP共通） */
  align-items: center;            /* 中央揃え */
  text-align: center;
  gap: var(--space-6);
  padding: var(--space-10, 40px) var(--space-8);
  margin: var(--space-12) 0;
  background: linear-gradient(
    145deg,
    var(--color-main-light) 0%,
    #ffffff 60%,
    var(--color-main-light) 100%
  );                              /* 単色ではなく柔らかいグラデーション背景 */
  border: 2px solid var(--color-main);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

/* 装飾：左上と右下に薄い丸いアクセント */
.line-cta-box::before,
.line-cta-box::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background-color: var(--color-main);
  opacity: 0.06;
  pointer-events: none;
}
.line-cta-box::before {
  width: 160px;
  height: 160px;
  top: -60px;
  left: -60px;
}
.line-cta-box::after {
  width: 120px;
  height: 120px;
  bottom: -40px;
  right: -40px;
}

/* ---- アイコン ---- */
.line-cta-box__icon {
  position: relative;
  z-index: 1;
}

.line-cta-box__icon svg {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 4px 12px rgba(6, 199, 85, 0.25));
  transition: transform 0.3s ease;
}

.line-cta-box:hover .line-cta-box__icon svg {
  transform: scale(1.05);         /* ホバーでアイコンをわずかに拡大 */
}

/* ---- テキストエリア ---- */
.line-cta-box__body {
  position: relative;
  z-index: 1;
  max-width: 480px;               /* 長い文章が横に広がりすぎないよう制限 */
}

.line-cta-box__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.line-cta-box__text {
  font-size: var(--text-sm);
  color: var(--color-text-sub);
  line-height: 1.9;
  margin-bottom: 0;
}

/* ---- CTAボタンエリア ---- */
.line-cta-box__action {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;               /* ボタンが横に広がりすぎないよう制限 */
}

/* ---- CTAボタン本体 ----
   通常時：フローティングアニメーションで「呼吸」している状態。
   animation-timing-function: ease-in-out で加減速を自然に。   */
.line-cta-box__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4) var(--space-8);
  background-color: var(--color-accent);
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-md);
  white-space: nowrap;
  border: 2px solid var(--color-accent);
  letter-spacing: 0.04em;

  /* 浮遊＋点滅の複合アニメーション（2.8秒周期・ease-in-out で滑らか） */
  animation: osb-float 2.8s ease-in-out infinite;
  /* 初期影は@keyframes 0%と揃えておく（アニメーション開始前のズレを防ぐ） */
  box-shadow:
    0 4px 14px rgba(255, 237, 0, 0.35),
    0 2px  6px rgba(0, 0, 0, 0.08);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* ボタン内の＋アイコン */
.line-cta-box__btn-icon {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

/* ---- ホバー：アニメーション一時停止 → 輝き効果に切り替え ---- */
.line-cta-box__btn:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-text);
  text-decoration: none;

  /* フローティングを止めて輝きアニメーションに切り替え */
  animation: osb-glow 1.2s ease-in-out infinite;
}

.line-cta-box__btn:hover .line-cta-box__btn-icon {
  transform: rotate(90deg);       /* ＋アイコンがくるっと回る */
}

/* アクセシビリティ：キーボードフォーカス時もアニメーション維持 */
.line-cta-box__btn:focus-visible {
  outline: 3px solid var(--color-main);
  outline-offset: 3px;
  animation-play-state: paused;   /* フォーカス中は動きを止めて視認性を確保 */
}

/* ---- prefers-reduced-motion：動きが苦手なユーザーへの配慮 ---- */
@media (prefers-reduced-motion: reduce) {
  .line-cta-box__btn {
    animation: none;
    box-shadow:
      0 4px 14px rgba(255, 237, 0, 0.35),
      0 2px  6px rgba(0, 0, 0, 0.08);
  }
  .line-cta-box__btn:hover {
    animation: none;
    transform: translateY(-2px);
    box-shadow:
      0 8px 24px rgba(255, 237, 0, 0.55),
      0 4px 10px rgba(0, 0, 0, 0.10);
  }
  .line-cta-box__icon svg,
  .line-cta-box__btn-icon {
    transition: none;
  }
}

/* ---- スマホ追加調整 ---- */
@media (max-width: 599px) {
  .line-cta-box {
    padding: var(--space-8) var(--space-6);
    gap: var(--space-5);
  }

  .line-cta-box__icon svg {
    width: 68px;
    height: 68px;
  }

  .line-cta-box__title {
    font-size: var(--text-base);
  }

  .line-cta-box__action {
    max-width: 100%;              /* スマホは横幅いっぱいに */
  }
}


/* ============================================================
   フッターロゴ・バナー画像
   ============================================================ */

/* カスタマイザーで設定したロゴをフッターに表示する場合のスタイル */
.site-footer__logo {
  margin-bottom: var(--space-4);
}

/* フッターロゴ画像のサイズを適切に制限 */
.site-footer__logo img,
.site-footer__logo .custom-logo {
  max-height: 60px;
  width: auto;
  display: inline-block;
}

/* フッター画像ラッパー：中央揃え */
.site-footer__img-wrap {
  text-align: center;
  margin-bottom: var(--space-4);
}

/* フッター専用バナー画像：幅を制限してリサイズ表示 */
.site-footer__banner {
  max-width: 200px;               /* 最大幅200pxに制限してコンパクトに */
  width: 100%;
  height: auto;                   /* 縦横比を保って自動縮小 */
  border-radius: var(--radius-md);
  display: inline-block;
}


/* ============================================================
   ヘッダーサブ画像（ロゴ下の追加画像・オプション）
   ============================================================ */

.site-header__sub-img {
  max-height: 40px;
  width: auto;
  margin-top: var(--space-2);
  display: block;
}


/* ============================================================
   ヒーローバナー（トップページのみ表示）
   構成：① 画像エリア（オーバーレイなし・そのまま全幅表示）
         ② テキスト＋CTAエリア（画像の下に独立配置）
   ============================================================ */

.hero-banner {
  width: 100%;
  background-color: var(--color-surface);
}

/* ① 画像エリア：オーバーレイなし・縦横比を保って全幅表示 */
.hero-banner__img-wrap {
  width: 100%;
  overflow: hidden;
  line-height: 0;                 /* img下の謎の隙間を消す */
}

.hero-banner__img {
  display: block;
  width: 100%;
  height: auto;                   /* 縦横比を保って全体表示・見切れなし */
  max-height: 600px;              /* 極端に縦長になりすぎるのを防ぐ上限 */
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 599px) {
  .hero-banner__img {
    max-height: none;             /* スマホは上限なしで画像全体を表示 */
  }
}

/* ② テキスト＋CTAエリア：メインカラーの背景で視認性を確保 */
.hero-banner__body {
  background-color: var(--color-main);  /* #35b5d4 の青帯 */
  padding: var(--space-8) 0;
}

@media (max-width: 599px) {
  .hero-banner__body {
    padding: var(--space-6) 0;
  }
}

/* 上部の小さなラベル */
.hero-banner__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-main);
  letter-spacing: 0.10em;
  margin-bottom: var(--space-3);
  background-color: #ffffff;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

/* メインキャッチコピー */
.hero-banner__title {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #ffffff;
  margin-bottom: var(--space-3);
}

/* サブテキスト */
.hero-banner__sub {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.90);
  line-height: 1.8;
  margin-bottom: var(--space-6);
  max-width: 560px;
}

/* CTAエリア */
.hero-banner__cta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* CTAボタン */
.hero-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  background-color: var(--color-accent);
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-md);
  white-space: nowrap;
  border: 2px solid var(--color-accent);
  letter-spacing: 0.04em;
  box-shadow: 0 4px 16px rgba(255, 237, 0, 0.45);
  transition: var(--transition);
  animation: osb-float 2.8s ease-in-out infinite;
}

.hero-banner__btn svg {
  flex-shrink: 0;
}

.hero-banner__btn:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-text);
  text-decoration: none;
  animation: osb-glow 1.2s ease-in-out infinite;
}

@media (max-width: 599px) {
  .hero-banner__cta {
    flex-direction: column;
  }
  .hero-banner__btn {
    width: 100%;
    justify-content: center;
    padding: var(--space-4) var(--space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner__btn {
    animation: none;
  }
}