@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/*
Theme Name: Cocoon Child – DAISEN
Theme URI: https://daisen.life
Description: Cocoon Child テーマ DAISEN カスタマイズ版
Author: DAISEN
Author URI: https://daisen.life
Template: cocoon-master
Version: 1.0.0
*/

/* ============================================================
   CSS カスタムプロパティ（グローバル変数）
   ============================================================ */
:root {
  /* ブランドカラー */
  --ds-black:       #0a0a0f;
  --ds-dark:        #111118;
  --ds-surface:     #1a1a28;
  --ds-border:      #2a2a3e;
  --ds-white:       #ffffff;
  --ds-off-white:   #e8e8f0;
  --ds-muted:       #9898aa;

  /* アクセントカラー */
  --ds-blue:        #00b4d8;
  --ds-green:       #06d6a0;
  --ds-purple:      #7209b7;
  --ds-pink:        #f72585;
  --ds-orange:      #fb8500;
  --ds-gold:        #ffd700;
  --ds-gold-glow:   #ffec70;

  /* 特設サイトカラー */
  --site-fcs:   #00b4d8;
  --site-si:    #06d6a0;
  --site-psd:   #7209b7;
  --site-nexus: #f72585;
  --site-log:   #fb8500;

  /* タイポグラフィ */
  --font-sans:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-display: 'Montserrat', 'Noto Sans JP', sans-serif;

  /* スペーシング */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  32px;
  --sp-xl:  64px;
  --sp-2xl: 128px;

  /* 角丸 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* シャドウ */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.15);
  --shadow-md: 0 8px 32px rgba(0,0,0,.25);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.4);

  /* トランジション */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --duration:   0.4s;

  /* 記事テーマカラー（投稿ページで上書き） */
  --post-theme-color: #00b4d8;
}

/* ============================================================
   グローバル リセット
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* ============================================================
   フォーカス管理（WCAG 2.1 AA準拠）
   ============================================================ */

/* キーボード操作時のみフォーカスリングを表示（マウス操作では非表示） */
:focus-visible {
  outline: 2px solid #00b4d8 !important;
  outline-offset: 3px !important;
  border-radius: 3px;
}

/* フォーカスリングをリセット（:focus-visible で再定義） */
:focus:not(:focus-visible) {
  outline: none !important;
}

/* スキップリンク（キーボードユーザー向け） */
.daisen-skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 99999;
  padding: 8px 16px;
  background: #00b4d8;
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  transition: top .2s;
}
.daisen-skip-link:focus {
  top: 0;
  outline: 2px solid #fff !important;
}

/* ============================================================
   コントラスト比改善（WCAG AA: 4.5:1 以上）
   ============================================================ */

/* 宇宙系暗背景上のミュートテキスト — 最低限の視認性確保 */
.daisen-post-intro,
.daisen-post-box li,
.daisen-eyecatch-overlay .sub {
  /* rgba(152,152,170) → rgba(180,180,200) へ（暗背景上で4.5:1達成） */
  color: rgba(180, 180, 200, 0.95);
}

/* カテゴリーページのミュートテキスト */
body.category .daisen-cat-banner__desc {
  color: #555 !important; /* #666 → #555（白背景上で4.8:1） */
}

/* フッター著作権テキスト */
.dsf-footer__copy {
  color: rgba(255, 255, 255, 0.82); /* 維持（十分なコントラスト） */
}

/* ============================================================
   ベーススタイル（Cocoon 投稿ページ向け補正）
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.85;
  color: #333;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--post-theme-color);
  text-decoration: none;
  transition: opacity var(--duration) var(--ease-out);
}
a:hover { opacity: .75; }

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

/* ============================================================
   固定ページ：テーマ影響を受けないベースリセット
   （ページテンプレートが読み込む前に適用）
   ============================================================ */
.daisen-page-wrap {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Cocoon のコンテンツ幅制限を解除 */
.daisen-page-wrap .entry-content {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* ============================================================
   投稿ページ 記事カスタムスタイル
   ============================================================ */

/* --- 導入文 --- */
.daisen-post-intro {
  background: linear-gradient(135deg, rgba(0,180,216,.06), rgba(0,180,216,.02));
  border-left: 4px solid var(--post-theme-color);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 20px 24px;
  margin: 0 0 32px;
  font-size: 1.05rem;
  line-height: 1.9;
  color: #444;
}

/* --- 「分かること」「まとめ」共通ボックス（spanタイトル形式） --- */
.daisen-post-box {
  position: relative;
  border: 2px solid var(--post-theme-color);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  padding: 28px 24px 20px;
  margin: 44px 0;
  background: #fff;
}
/* spanタイトルを枠の上に飛び出させる */
.daisen-post-box__title {
  position: absolute;
  top: -1px;
  left: -2px;
  display: inline-block;
  padding: 0 14px;
  height: 28px;
  line-height: 28px;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  background: var(--post-theme-color);
  color: #fff;
  border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 0;
  white-space: nowrap;
}
.daisen-post-box ul {
  margin: 4px 0 0;
  padding-left: 20px;
}
.daisen-post-box li {
  margin-bottom: 8px;
  line-height: 1.75;
  font-size: .95rem;
}
.daisen-post-box li::marker {
  color: var(--post-theme-color);
}

/* 後方互換（旧クラス名） */
.daisen-post-know  { /* 上記で対応済み */ }
.daisen-post-summary { /* 上記で対応済み */ }
/* 旧 daisen-box-heading は不要になるため非表示 */
.daisen-box-heading { display: none; }

/* ============================================================
   アイキャッチ オーバーレイ
   カテゴリーカラーのソフトグラデーション + 短ラベルのみ
   ============================================================ */

.daisen-eyecatch-wrap {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}
.daisen-eyecatch-wrap img {
  display: block;
  width: 100%;
  height: auto;
  line-height: 1;
}

/* カテゴリーラベル：左上ピル（改修3：短ラベルのみ） */
.daisen-eyecatch-label {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  background: var(--post-theme-color, #1a1a2e);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: 0 2px 10px rgba(0,0,0,.38);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  line-height: 1.5;
}

/* Cocoon 標準 cat-label は投稿ページ全域で非表示（改修3：二重防止） */
body.single .cat-label,
body.single .cat-label-first {
  display: none !important;
}

/* カテゴリーカラーのふんわりグラデーション */
.daisen-eyecatch-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(var(--post-theme-r,0), var(--post-theme-g,100), var(--post-theme-b,200), 0.80) 0%,
    rgba(var(--post-theme-r,0), var(--post-theme-g,100), var(--post-theme-b,200), 0.52) 30%,
    rgba(var(--post-theme-r,0), var(--post-theme-g,100), var(--post-theme-b,200), 0.18) 62%,
    transparent 100%
  );
  padding: 52px 20px 18px;
  text-align: center;
  line-height: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* スマホ */
@media (max-width: 480px) {
  .daisen-eyecatch-overlay { padding: 28px 12px 12px; }
}

/* メインテキスト：中央揃え・画像が透けて見える */
.daisen-eyecatch-overlay .main {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(.88rem, 2.2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.55;
  color: #fff;
  text-shadow:
    0 1px 0 rgba(0,0,0,.3),
    0 3px 14px rgba(0,0,0,.55),
    0 0 28px rgba(0,0,0,.22);
  letter-spacing: .03em;
  word-break: break-all;
  overflow-wrap: break-word;
  /* 細い下線でアクセント */
  padding-bottom: 10px;
  margin-bottom: 8px;
	  border-bottom: 1.5px solid rgba(255,255,255,.42);
}

/* サブテキスト */
.daisen-eyecatch-overlay .sub {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(.7rem, 1.4vw, .88rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 6px rgba(0,0,0,.48);
  letter-spacing: .06em;
  word-break: break-all;
}

.daisen-eyecatch-overlay .main,
.daisen-eyecatch-overlay .sub {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}

/* スマホ */
@media (max-width: 480px) {
  .daisen-eyecatch-overlay { padding: 24px 14px 14px; }
  .daisen-eyecatch-overlay .main { font-size: clamp(.82rem, 4.5vw, 1.05rem); }
  .daisen-eyecatch-label { font-size: .58rem; padding: 3px 10px; top: 10px; left: 10px; }
}

/* --- コードブロック --- */
.entry-content pre {
  background: #0f0f1a;
  color: #e8e8f0;
  border-radius: var(--radius-md);
  padding: 20px;
  overflow-x: auto;
  font-size: .875rem;
  line-height: 1.7;
  border-left: 4px solid var(--post-theme-color);
}

/* --- テーブル --- */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
}
.entry-content th {
  background: var(--post-theme-color);
  color: #fff;
  padding: 10px 16px;
  font-weight: 600;
}
.entry-content td {
  padding: 10px 16px;
  border: 1px solid #e0e0e0;
}
.entry-content tr:nth-child(even) td {
  background: #f8f8fc;
}

.daisen-eyecatch-overlay .main {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.daisen-eyecatch-overlay:hover::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.15), transparent 70%);
  animation: shine 1.2s ease-out forwards;
  pointer-events: none;
  z-index: 1;
}

@keyframes shine {
  0% {
    transform: scale(0.8) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1) rotate(15deg);
    opacity: 1;
  }
  100% {
    transform: scale(1.2) rotate(30deg);
    opacity: 0;
  }
}

/* ============================================================
   スクロールバー カスタマイズ（全ページ統一・宇宙的輝きデザイン）
   ============================================================ */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(110, 170, 240, 0.28); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(80, 200, 255, 0.75); border-radius: 10px; }
::-webkit-scrollbar-thumb:active { background: rgba(60, 210, 255, 0.92); }
::-webkit-scrollbar-corner { background: transparent; }

html { scrollbar-width: thin; scrollbar-color: rgba(100, 170, 240, 0.32) transparent; }

/* ホバー幅拡張（JS が body.ds-sb-hover を付与） */
body.ds-sb-hover::-webkit-scrollbar { width: 9px; }
body.ds-sb-hover::-webkit-scrollbar-track { background: rgba(10, 10, 30, 0.18); }
body.ds-sb-hover::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    rgba(80,  210, 255, 0.88) 0%,
    rgba(100, 160, 255, 0.90) 50%,
    rgba(160, 100, 255, 0.82) 100%
  );
  border-radius: 10px;
  box-shadow:
    0 0 8px  rgba(80,  210, 255, 0.60),
    0 0 18px rgba(100, 150, 255, 0.35),
    0 0 32px rgba(140, 100, 255, 0.18);
}

/* ============================================================
   ユーティリティ
   ============================================================ */
.ds-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
.ds-sr-only { display: none; }

/* ============================================================
   メディアクエリ（投稿ページ補正）
   ============================================================ */
@media (max-width: 768px) {
  body { font-size: 15px; line-height: 1.8; }
  .daisen-post-intro { padding: 16px 18px; }
  .daisen-post-know,
  .daisen-post-summary { padding: 18px 20px; }
  .daisen-footer__nav { gap: var(--sp-sm) var(--sp-md); }
  .daisen-footer__nav a { font-size: .8rem; }
}

@media (max-width: 480px) {
  body { font-size: 14px; }
  .daisen-eyecatch-overlay .main { font-size: 1rem; }
}




/* ============================================================
   カテゴリーページ 特設サイト誘導バナー
   ============================================================ */
.daisen-cat-banner {
  --cat-color: #00b4d8;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cat-color) 8%, #fff) 0%,
    color-mix(in srgb, var(--cat-color) 3%, #fff) 100%
  );
  border: 1.5px solid color-mix(in srgb, var(--cat-color) 25%, #fff);
  border-left: 5px solid var(--cat-color);
  border-radius: 0 16px 16px 0;
  margin: 0 0 40px;
  overflow: hidden;
  box-shadow: 0 4px 24px color-mix(in srgb, var(--cat-color) 12%, transparent);
  animation: dsCatBannerIn .6s cubic-bezier(0.16,1,0.3,1) forwards;
}

/* 追加推奨：color-mix() のフォールバック */
.daisen-cat-banner {
  background: #f0f8ff; /* フォールバック */
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cat-color) 8%, #fff) 0%,
    color-mix(in srgb, var(--cat-color) 3%, #fff) 100%
  );
}

@keyframes dsCatBannerIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.daisen-cat-banner__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
}
.daisen-cat-banner__badge {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--cat-color);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: 'Montserrat', sans-serif;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .1em;
}
.daisen-cat-banner__body {
  flex: 1;
  min-width: 0;
}
.daisen-cat-banner__title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  margin: 0 0 6px !important;
  border: none !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}
.daisen-cat-banner__desc {
  font-size: .85rem;
  color: #666;
  line-height: 1.7;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.daisen-cat-banner__cta {
  flex-shrink: 0;
  text-align: center;
}
.daisen-cat-banner__btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 24px;
  background: var(--cat-color);
  color: #fff !important;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none !important;
  transition: opacity .3s, transform .3s;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--cat-color) 35%, transparent);
}
.daisen-cat-banner__btn:hover {
  opacity: .88;
  transform: translateY(-2px);
}
.daisen-cat-banner__btn svg {
  margin-top: 4px;
}
.daisen-cat-banner__btn-label {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  opacity: .85;
}
.daisen-cat-banner__btn-name {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.daisen-cat-banner__cta-sub {
  font-size: .72rem;
  color: #888;
  margin-top: 8px;
  line-height: 1.5;
  max-width: 140px;
}

/* 未分類メッセージ */
.daisen-uncat-message {
  margin: 0 0 48px;
  animation: dsCatBannerIn .6s cubic-bezier(0.16,1,0.3,1) forwards;
}
.daisen-uncat-message__inner {
  background: linear-gradient(135deg, #f8f8ff, #f0f0fa);
  border: 1.5px solid #e0e0f0;
  border-left: 5px solid #1a1a2e;
  border-radius: 0 16px 16px 0;
  padding: 36px 40px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.daisen-uncat-message__icon {
  flex-shrink: 0;
  font-size: 1.8rem;
  color: #1a1a2e;
  line-height: 1;
  margin-top: 4px;
}
.daisen-uncat-message__title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  margin: 0 0 16px !important;
  border: none !important;
  padding: 0 !important;
}
.daisen-uncat-message__text p {
  font-size: .9rem;
  color: #555;
  line-height: 1.85;
  margin-bottom: .8em;
}
.daisen-uncat-message__text strong {
  color: #1a1a2e;
}
.daisen-uncat-message__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 12px 24px;
  background: #1a1a2e;
  color: #fff !important;
  border-radius: 32px;
  font-family: 'Montserrat', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none !important;
  transition: opacity .3s;
}
.daisen-uncat-message__btn:hover { opacity: .8; }

/* ============================================================
   カテゴリーページ レスポンシブ
   ============================================================ */
@media (max-width: 768px) {
  .daisen-cat-banner__inner {
    flex-direction: column;
    padding: 20px;
    gap: 16px;
  }
  .daisen-cat-banner__cta {
    width: 100%;
  }
  .daisen-cat-banner__btn {
    width: 100%;
    justify-content: center;
  }
  .daisen-cat-banner__cta-sub {
    max-width: none;
  }
  .daisen-uncat-message__inner {
    padding: 24px 20px;
    flex-direction: column;
  }
}

/* ============================================================
   前後記事ナビ
   上段：小サムネイル＋カテゴリー名 / 下段：記事タイトル
   ============================================================ */

/* ── 全体ラッパー：2列グリッド ── */
.pager-post-navi {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin: 40px 0 !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Cocoon内部に div ラッパーがある場合はグリッドを透過 */
.pager-post-navi > div {
  display: contents !important;
}

/* ── 前・次 コンテナ ── */
.prev-post,
.next-post {
  min-width: 0 !important;
  display: block !important;
}

/* ── リンク本体：縦flex（2段構成の核） ── */
/* ── 上段：サムネイル + カテゴリー を横並びにするラッパー ── */
.prev-post-link,
.next-post-link {
  display: flex !important;
  flex-direction: column !important;
}

/* Cocoon が出力するサムネイルラッパー */
.prev-thumb,
.next-thumb {
  order: -2 !important;   /* 最上段 */
  flex-shrink: 0 !important;
}

/* ── 上段内ヘッダー：サムネイル + カテゴリーを横並び ── */
.prev-post .pager-post-navi-upper,
.next-post .pager-post-navi-upper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  background: #f8f8fc !important;
  border-bottom: 1px solid #eee !important;
  flex-shrink: 0 !important;
  order: -1 !important;
}

/* カテゴリーラベル：absolute解除 → 画像横に静的配置 */
.prev-post .cat-label,
.prev-post .cat-label-first,
.next-post .cat-label,
.next-post .cat-label-first {
  /* absolute完全解除 */
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;

  /* 横並びアイテムとして表示 */
  display: inline-block !important;
  flex-shrink: 0 !important;

  /* スタイル */
  font-family: 'Montserrat', sans-serif !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  line-height: 1.5 !important;
  color: #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  margin: 0 !important;

  /* サムネイルと重ならないよう z-index を通常に */
  z-index: auto !important;
}

/* ── 上段サムネイル画像 ── */
.prev-thumb img,
.next-thumb img {
  width: 100% !important;
  height: 80px !important;
  object-fit: cover !important;
  display: block !important;
}

/* ── サムネイル内オーバーレイ・ラベルは非表示 ── */
.prev-post .daisen-eyecatch-wrap .daisen-eyecatch-overlay,
.next-post .daisen-eyecatch-wrap .daisen-eyecatch-overlay,
.prev-post .daisen-eyecatch-wrap .daisen-eyecatch-label,
.next-post .daisen-eyecatch-wrap .daisen-eyecatch-label {
  display: none !important;
}

/* ── 下段：タイトル ── */
.prev-post-title,
.next-post-title,
span.pager-post-title {
  order: 0 !important;
  display: block !important;
  padding: 10px 14px 12px !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: .875rem !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  line-height: 1.6 !important;
  text-align: left !important;
  flex: 1 !important;
  overflow: hidden !important;
  max-height: calc(0.875rem * 1.6 * 2 + 22px) !important;
}

/* ── 関連記事・カードへの影響を排除 ── */
.related-entry-card .daisen-eyecatch-overlay,
.popular-entry-card .daisen-eyecatch-overlay,
.card-wrap .daisen-eyecatch-overlay,
.related-entry-card .daisen-eyecatch-label,
.popular-entry-card .daisen-eyecatch-label,
.card-wrap .daisen-eyecatch-label {
  display: none !important;
}

/* ── スマホ：1列 ── */
@media (max-width: 640px) {
  .pager-post-navi {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ============================================================
   投稿ページ・アーカイブページ Cocoon ナビゲーション DAISENデザイン
   ============================================================ */

/* ── ナビゲーションメニュー全体 ── */
body.single #navi,
body.archive #navi,
body.category #navi,
body.single .navi,
body.archive .navi,
body.category .navi {
  background: rgba(8, 8, 15, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

/* ── ナビゲーション内リンク ── */
body.single #navi .navi-in > ul > li > a,
body.archive #navi .navi-in > ul > li > a,
body.category #navi .navi-in > ul > li > a {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  letter-spacing: .07em !important;
  color: rgba(200, 210, 230, .80) !important;
  transition: color .3s, background .3s !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
}
body.single #navi .navi-in > ul > li > a:hover,
body.archive #navi .navi-in > ul > li > a:hover,
body.category #navi .navi-in > ul > li > a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, .07) !important;
  opacity: 1 !important;
}

/* ── ドロップダウンメニュー ── */
body.single .navi-in .sub-menu,
body.archive .navi-in .sub-menu,
body.category .navi-in .sub-menu {
  background: rgba(10, 10, 24, .97) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
  padding: 6px 0 !important;
}
body.single .navi-in .sub-menu a,
body.archive .navi-in .sub-menu a,
body.category .navi-in .sub-menu a {
  color: rgba(200,210,230,.75) !important;
  font-size: .80rem !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
body.single .navi-in .sub-menu a:hover,
body.archive .navi-in .sub-menu a:hover,
body.category .navi-in .sub-menu a:hover {
  color: #fff !important;
  background: rgba(0,180,216,.15) !important;
}

/* ── モバイルメニュー ハンバーガーボタン ── */
body.single .menu-button,
body.archive .menu-button,
body.category .menu-button,
body.single #menu-button,
body.archive #menu-button,
body.category #menu-button {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,.28) !important;
  border-radius: 8px !important;
  padding: 9px 10px !important;
  transition: border-color .3s, background .3s !important;
}
body.single .menu-button:hover,
body.archive .menu-button:hover,
body.category .menu-button:hover,
body.single #menu-button:hover,
body.archive #menu-button:hover,
body.category #menu-button:hover {
  border-color: rgba(0,180,216,.70) !important;
  background: rgba(0,180,216,.10) !important;
}

/* ハンバーガー 3本線 */
body.single .menu-button .menu-button__bar,
body.archive .menu-button .menu-button__bar,
body.category .menu-button .menu-button__bar,
body.single #menu-button span,
body.archive #menu-button span,
body.category #menu-button span {
  background-color: rgba(220, 235, 255, .90) !important;
  border-radius: 2px !important;
  transition: transform .3s, opacity .3s !important;
}

/* ── モバイルメニュー 展開時 ── */
body.single .navi-in.open,
body.archive .navi-in.open,
body.category .navi-in.open,
body.single #navi-in.open,
body.archive #navi-in.open,
body.category #navi-in.open {
  background: rgba(6, 6, 18, .98) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  padding: 16px 0 20px !important;
}
body.single .navi-in.open li a,
body.archive .navi-in.open li a,
body.category .navi-in.open li a {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: .88rem !important;
  color: rgba(210,225,245,.85) !important;
  padding: 12px 24px !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  letter-spacing: .04em !important;
}
body.single .navi-in.open li a:hover,
body.archive .navi-in.open li a:hover,
body.category .navi-in.open li a:hover {
  color: #fff !important;
  background: rgba(0,180,216,.12) !important;
}

/* ── カテゴリーページ アクティブリンク ── */
body.single #navi .navi-in > ul > li.current-menu-item > a,
body.archive #navi .navi-in > ul > li.current-menu-item > a,
body.category #navi .navi-in > ul > li.current-menu-item > a {
  color: #00b4d8 !important;
  background: rgba(0,180,216,.12) !important;
}

/* ========================================
   CF7 セレクトボックス 背景・文字色 修正
   全ページ共通（select-199 他）
   ======================================== */
.wpcf7 select,
.wpcf7-form select,
.wpcf7 select option,
.wpcf7-form select option {
  background-color: #1a2035 !important;  /* 濃いネイビー */
  color: #f0f2f8 !important;             /* 明るいオフホワイト */
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 3px;
  padding: .5em .8em;
  font-size: .9rem;
  letter-spacing: .05em;
}

/* フォーカス時 */
.wpcf7 select:focus,
.wpcf7-form select:focus {
  outline: none;
  border-color: rgba(212,175,55,.7) !important;
  box-shadow: 0 0 0 2px rgba(212,175,55,.2);
}

/* ドロップダウンリスト（ブラウザ依存だが主要ブラウザをカバー） */
.wpcf7 select option:hover,
.wpcf7 select option:focus,
.wpcf7 select option:checked {
  background-color: #263050 !important;
  color: #f5d96b !important;
}

/* ============================================================
   DAISEN ブログ統一デザインシステム (2026 Edition)
   WordPress Cocoon 子テーマ style.css 追記用
   ============================================================ */

/* ============================================================
   Layer 1：ブランド変数（サイト全体の色・余白を一元管理）
   ============================================================ */
:root {
  /* ブランドカラー */
  --daisen-primary:    #3a7bd5;   /* 信頼の青：推奨・解決策 */
  --daisen-accent:     #2ecc71;   /* 前進の緑：行動・成長 */
  --daisen-warning:    #e67e22;   /* 注意の橙：重要・注意点 */
  --daisen-danger:     #e74c3c;   /* リスクの赤：警告・NG */
  --daisen-dark:       #2c3e50;   /* 深みのネイビー：見出し */
  --daisen-muted:      #7f8c8d;   /* 落ち着きのグレー：補足 */
  --daisen-bg-light:   #f8fafc;   /* 背景ライト */
  --daisen-bg-card:    #ffffff;   /* カード背景 */

  /* 余白・角丸・影の統一 */
  --daisen-radius:     8px;
  --daisen-radius-lg:  12px;
  --daisen-shadow:     0 2px 12px rgba(0,0,0,0.08);
  --daisen-shadow-lg:  0 8px 24px rgba(0,0,0,0.12); /* 影を少し深くして浮遊感を強調 */
}

/* 共通安全設定：DAISENクラスを持つ全要素のレイアウト崩れ防止 */
[class^="daisen-"] {
  box-sizing: border-box;
}

/* ============================================================
   Layer 2：汎用コンポーネント（全記事で使い回す部品）
   ============================================================ */

/* ----------------------------------------------------------
   【A】強調ボックス 4種
   使い方：<div class="daisen-box-info">...</div>
   ---------------------------------------------------------- */
.daisen-box-info,
.daisen-box-point,
.daisen-box-warn,
.daisen-box-ng {
  border-radius: var(--daisen-radius);
  padding: 20px 24px;
  margin: 28px 0;
  line-height: 1.8;
  width: 100%;
}
.daisen-box-info { background: #eef5ff; border-left: 5px solid var(--daisen-primary); }
.daisen-box-point { background: #eafaf1; border-left: 5px solid var(--daisen-accent); }
.daisen-box-warn { background: #fef9ec; border-left: 5px solid var(--daisen-warning); }
.daisen-box-ng { background: #fdf0ef; border-left: 5px solid var(--daisen-danger); }

.daisen-box-info strong,
.daisen-box-point strong,
.daisen-box-warn strong,
.daisen-box-ng strong {
  display: block;
  font-size: 1.05em; /* 視認性向上のため微増 */
  margin-bottom: 8px;
  color: var(--daisen-dark); /* 見出し色をダークに統一 */
}

/* ----------------------------------------------------------
   【B】チェックリスト（ul をアイコン付きリストに変換）
   使い方：<ul class="daisen-check">...</ul>
   ---------------------------------------------------------- */
.daisen-check {
  list-style: none;
  padding-left: 0;
  margin: 20px 0;
}
.daisen-check li {
  padding: 6px 0 6px 32px; /* アイコンとの余白を調整 */
  position: relative;
  line-height: 1.7;
}
.daisen-check li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  color: var(--daisen-accent);
  font-weight: bold;
  font-size: 1.1em;
}

/* ----------------------------------------------------------
   【C】ステップリスト（ol を番号付きカードに変換）
   使い方：<ol class="daisen-steps">...</ol>
   ---------------------------------------------------------- */
.daisen-steps {
  list-style: none;
  padding-left: 0;
  counter-reset: daisen-step;
  margin: 24px 0;
}
.daisen-steps li {
  counter-increment: daisen-step;
  padding: 16px 20px 16px 60px; /* アイコンとの余白を調整 */
  position: relative;
  background: var(--daisen-bg-card);
  border-radius: var(--daisen-radius);
  margin-bottom: 16px; /* ステップ間の余白を広げて視認性UP */
  box-shadow: var(--daisen-shadow);
  line-height: 1.7;
}
.daisen-steps li::before {
  content: counter(daisen-step);
  position: absolute;
  left: 16px;
  top: 16px; /* 中央揃えから上部揃えに変更（複数行になった際の美しさ確保） */
  width: 28px;
  height: 28px;
  background: var(--daisen-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9em;
}

/* ----------------------------------------------------------
   【D】比較テーブル（table を見やすく整形）
   使い方：<table class="daisen-table">...</table>
   ---------------------------------------------------------- */
.daisen-table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 0.95em;
  word-break: break-word; /* セル内のテキストはみ出し防止 */
}
.daisen-table th {
  background: var(--daisen-dark);
  color: #fff;
  padding: 14px 16px;
  text-align: left;
  font-weight: bold;
  line-height: 1.4;
}
.daisen-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e8ecef;
  vertical-align: middle; /* 上揃えから中央揃えへ（比較表の見栄え向上） */
  line-height: 1.7;
}
.daisen-table tr:nth-child(even) td {
  background: var(--daisen-bg-light);
}

/* ----------------------------------------------------------
   【E】引用・データカード（E-E-A-T強化用）
   使い方：<div class="daisen-data-card">...</div>
   ---------------------------------------------------------- */
.daisen-data-card {
  background: var(--daisen-bg-light);
  border: 1px solid #dce6f0;
  border-radius: var(--daisen-radius-lg);
  padding: 24px 28px;
  margin: 28px 0;
  box-shadow: var(--daisen-shadow);
  text-align: center; /* データを中央配置してインパクトを出す */
}
.daisen-data-card .daisen-data-num {
  font-size: 2.5em;
  font-weight: 900; /* より強く太く */
  color: var(--daisen-primary);
  line-height: 1.2;
}
.daisen-data-card .daisen-data-label {
  font-size: 0.9em;
  font-weight: bold;
  color: var(--daisen-dark);
  margin-top: 8px;
}
.daisen-data-card .daisen-data-source {
  font-size: 0.80em;
  color: var(--daisen-muted);
  margin-top: 16px;
  border-top: 1px dashed #dce6f0; /* 実線から破線に変更し抜け感を出す */
  padding-top: 12px;
  text-align: right; /* 出典は右下に配置 */
}

/* ----------------------------------------------------------
   【F】まとめセクション（記事末尾の総括ブロック）
   使い方：<div class="daisen-summary">...</div>
   ---------------------------------------------------------- */
.daisen-summary {
  background: linear-gradient(135deg, #f8fafc 0%, #eef5ff 100%); /* より洗練されたグラデーションに修正 */
  border: 1px solid #dce6f0;
  border-radius: var(--daisen-radius-lg);
  padding: 32px;
  margin: 48px 0 32px;
  box-shadow: var(--daisen-shadow);
}
.daisen-summary h3 {
  color: var(--daisen-dark);
  font-size: 1.2em;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--daisen-primary);
}

/* ============================================================
   Layer 3：DAISEN専用（6テーマ色分け＋CTAカード）
   ============================================================ */

/* ----------------------------------------------------------
   【G】テーマバッジ
   ---------------------------------------------------------- */
.daisen-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8em;
  font-weight: bold;
  color: #fff;
  margin-right: 6px;
  margin-bottom: 6px;
}
.daisen-badge-fcs    { background: #3a7bd5; }
.daisen-badge-si     { background: #2ecc71; }
.daisen-badge-psd    { background: #9b59b6; }
.daisen-badge-nexus  { background: #2c3e50; }
.daisen-badge-log    { background: #e67e22; }
.daisen-badge-origin { background: #795548; }

/* ----------------------------------------------------------
   【H】CTAカード（クリック率を極限まで高める設計）
   ---------------------------------------------------------- */
.daisen-cta-box {
  border-radius: var(--daisen-radius-lg);
  padding: 36px 32px;
  margin: 48px 0;
  text-align: center;
  box-shadow: var(--daisen-shadow-lg);
}
.daisen-cta-box p {
  font-size: 1em;
  font-weight: bold;
  color: var(--daisen-dark);
  margin-bottom: 20px;
  line-height: 1.6;
}
.daisen-cta-box a.daisen-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  border-radius: 30px; /* 角丸を強めてボタンらしさを強調 */
  font-weight: bold;
  font-size: 1.05em;
  text-decoration: none !important;
  color: #fff !important;
  letter-spacing: 0.05em;
  transition: all 0.3s ease; /* ホバーアニメーションの準備 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* マイクロインタラクション（ホバー時の挙動） */
.daisen-cta-box a.daisen-cta-btn:hover {
  transform: translateY(-3px); /* 少し浮き上がる */
  box-shadow: 0 6px 16px rgba(0,0,0,0.2); /* 影が広がる */
  opacity: 0.95;
}

/* テーマ別カラーリング */
.daisen-cta-fcs    { background: linear-gradient(135deg, #f0f7ff, #e0f0ff); border-top: 6px solid #3a7bd5; }
.daisen-cta-fcs    a.daisen-cta-btn { background: linear-gradient(90deg, #3a7bd5, #4a90e2); }

.daisen-cta-si     { background: linear-gradient(135deg, #effaf3, #e0f7e9); border-top: 6px solid #2ecc71; }
.daisen-cta-si     a.daisen-cta-btn { background: linear-gradient(90deg, #27ae60, #2ecc71); }

.daisen-cta-psd    { background: linear-gradient(135deg, #f8f4ff, #f0e6ff); border-top: 6px solid #9b59b6; }
.daisen-cta-psd    a.daisen-cta-btn { background: linear-gradient(90deg, #8e44ad, #9b59b6); }

.daisen-cta-nexus  { background: linear-gradient(135deg, #f0f2f5, #e6e9ef); border-top: 6px solid #2c3e50; }
.daisen-cta-nexus  a.daisen-cta-btn { background: linear-gradient(90deg, #2c3e50, #34495e); }

.daisen-cta-log    { background: linear-gradient(135deg, #fffaf5, #ffeedb); border-top: 6px solid #e67e22; }
.daisen-cta-log    a.daisen-cta-btn { background: linear-gradient(90deg, #d35400, #e67e22); }

.daisen-cta-origin { background: linear-gradient(135deg, #f8f6f4, #f2ece6); border-top: 6px solid #795548; }
.daisen-cta-origin a.daisen-cta-btn { background: linear-gradient(90deg, #5d4037, #795548); }

/* ----------------------------------------------------------
   スマホ対応（768px以下）
   ---------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .daisen-box-info, .daisen-box-point, .daisen-box-warn, .daisen-box-ng,
  .daisen-data-card, .daisen-summary {
    padding: 16px 20px; /* スマホでは余白を詰めて画面を広く使う */
  }
  .daisen-cta-box {
    padding: 28px 20px;
  }
  .daisen-cta-box a.daisen-cta-btn {
    width: 100%; /* スマホではボタンを横幅いっぱいに */
    padding: 14px 20px;
  }
  .daisen-data-card .daisen-data-num {
    font-size: 2em;
  }
  .daisen-table {
    font-size: 0.88em;
    display: block; /* テーブルの横スクロール対応（はみ出し防止） */
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .daisen-table th,
  .daisen-table td {
    padding: 10px 12px;
  }
}

/* ============================================================
   DAISEN 画像表示システム — style.css 追記用 完全版
   WordPress Cocoon 子テーマ対応
   インラインCSS不要・クラス付与のみで完結する設計
   ============================================================ */


/* ============================================================
   §1  CSS変数（画像システム専用）
   ============================================================ */
:root {
  /* 画像オーバーレイ透明度 */
  --img-overlay-light:  rgba(26, 26, 40, 0.38);
  --img-overlay-medium: rgba(26, 26, 40, 0.60);
  --img-overlay-dark:   rgba(26, 26, 40, 0.78);

  /* キャプション */
  --img-caption-bg:     rgba(10, 10, 20, 0.82);
  --img-caption-color:  rgba(240, 242, 255, 0.95);
  --img-caption-size:   0.80rem;

  /* ボーダー・シャドウ */
  --img-radius-sm:  6px;
  --img-radius-md:  12px;
  --img-radius-lg:  20px;
  --img-radius-xl:  28px;
  --img-shadow-sm:  0 2px 12px rgba(0,0,0,0.10);
  --img-shadow-md:  0 8px 32px rgba(0,0,0,0.16);
  --img-shadow-lg:  0 20px 60px rgba(0,0,0,0.24);
  --img-shadow-float: 0 28px 72px rgba(0,0,0,0.32), 0 8px 24px rgba(0,0,0,0.18);

  /* トランジション */
  --img-ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --img-duration:   0.45s;

  /* テーマ別アクセント（6セクション） */
  --img-fcs:    #3a7bd5;
  --img-si:     #2ecc71;
  --img-psd:    #9b59b6;
  --img-nexus:  #ad1457;
  --img-log:    #e67e22;
  --img-origin: #37474f;
}


/* ============================================================
   §2  ベース：.ds-img-wrap（全画像ラッパーの基底クラス）
   使い方: <figure class="ds-img-wrap [modifier]">
             <img src="..." alt="...">
           </figure>
   ============================================================ */
.ds-img-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  line-height: 0;
  border-radius: var(--img-radius-md);
  box-shadow: var(--img-shadow-md);
  background: #0f0f1a;  /* 画像読み込み前のプレースホルダー色 */
}

.ds-img-wrap img {
  display: block;
  width: 100%;
  height: auto;
  transition:
    transform var(--img-duration) var(--img-ease),
    filter var(--img-duration) var(--img-ease);
  will-change: transform;
  line-height: 1;
}

/* ホバーで画像が微かに拡大（全ラッパー共通） */
.ds-img-wrap:hover img {
  transform: scale(1.035);
}


/* ============================================================
   §3  アスペクト比コントロール
   使い方: class="ds-img-wrap ds-ratio-16x9"
   ============================================================ */
.ds-ratio-1x1   { aspect-ratio: 1 / 1; }
.ds-ratio-4x3   { aspect-ratio: 4 / 3; }
.ds-ratio-16x9  { aspect-ratio: 16 / 9; }
.ds-ratio-21x9  { aspect-ratio: 21 / 9; }
.ds-ratio-3x4   { aspect-ratio: 3 / 4; }
.ds-ratio-2x1   { aspect-ratio: 2 / 1; }
.ds-ratio-golden { aspect-ratio: 1.618 / 1; }  /* 黄金比 */

/* アスペクト比指定時はobject-fitで切り取り */
.ds-ratio-1x1 img,
.ds-ratio-4x3 img,
.ds-ratio-16x9 img,
.ds-ratio-21x9 img,
.ds-ratio-3x4 img,
.ds-ratio-2x1 img,
.ds-ratio-golden img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* ============================================================
   §4  角丸バリエーション
   ============================================================ */
.ds-radius-none { border-radius: 0; }
.ds-radius-sm   { border-radius: var(--img-radius-sm); }
.ds-radius-md   { border-radius: var(--img-radius-md); }   /* デフォルト */
.ds-radius-lg   { border-radius: var(--img-radius-lg); }
.ds-radius-xl   { border-radius: var(--img-radius-xl); }
.ds-radius-pill { border-radius: 9999px; }
.ds-radius-circle { border-radius: 50%; }


/* ============================================================
   §5  シャドウバリエーション
   ============================================================ */
.ds-shadow-none  { box-shadow: none; }
.ds-shadow-sm    { box-shadow: var(--img-shadow-sm); }
.ds-shadow-md    { box-shadow: var(--img-shadow-md); }   /* デフォルト */
.ds-shadow-lg    { box-shadow: var(--img-shadow-lg); }
.ds-shadow-float { box-shadow: var(--img-shadow-float); }

/* ホバーでシャドウが強まる */
.ds-shadow-float:hover {
  box-shadow:
    0 36px 88px rgba(0,0,0,0.36),
    0 12px 32px rgba(0,0,0,0.22);
  transform: translateY(-4px);
  transition:
    box-shadow var(--img-duration) var(--img-ease),
    transform var(--img-duration) var(--img-ease);
}


/* ============================================================
   §6  オーバーレイシステム（.ds-overlay-*）
   使い方: <figure class="ds-img-wrap ds-overlay-dark">
   ============================================================ */

/* 共通：疑似要素でオーバーレイ生成 */
.ds-overlay-light::before,
.ds-overlay-medium::before,
.ds-overlay-dark::before,
.ds-overlay-gradient::before,
.ds-overlay-gradient-top::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity var(--img-duration) var(--img-ease);
}

.ds-overlay-light::before   { background: var(--img-overlay-light); }
.ds-overlay-medium::before  { background: var(--img-overlay-medium); }
.ds-overlay-dark::before    { background: var(--img-overlay-dark); }

/* 下からのグラデーション（テキスト可読性確保用） */
.ds-overlay-gradient::before {
  background: linear-gradient(
    to top,
    rgba(10, 10, 25, 0.88) 0%,
    rgba(10, 10, 25, 0.55) 35%,
    rgba(10, 10, 25, 0.15) 65%,
    transparent 100%
  );
}

/* 上からのグラデーション */
.ds-overlay-gradient-top::before {
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 25, 0.75) 0%,
    rgba(10, 10, 25, 0.35) 40%,
    transparent 75%
  );
}

/* ホバーでオーバーレイが薄くなる効果 */
.ds-overlay-light:hover::before,
.ds-overlay-medium:hover::before,
.ds-overlay-dark:hover::before {
  opacity: 0.65;
}


/* ============================================================
   §7  キャプションシステム（.ds-caption-*）
   使い方:
   <figure class="ds-img-wrap ds-overlay-gradient ds-caption-bottom">
     <img src="..." alt="...">
     <figcaption class="ds-caption">キャプションテキスト</figcaption>
   </figure>
   ============================================================ */
.ds-caption {
  position: absolute;
  z-index: 2;
  color: var(--img-caption-color);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: var(--img-caption-size);
  line-height: 1.65;
  letter-spacing: 0.03em;
  padding: 10px 16px;
  pointer-events: none;
  max-width: 100%;
  box-sizing: border-box;
}

/* キャプション位置 */
.ds-caption-bottom .ds-caption {
  bottom: 0;
  left: 0;
  right: 0;
  text-align: left;
  padding: 14px 18px;
}

.ds-caption-top .ds-caption {
  top: 0;
  left: 0;
  right: 0;
  text-align: left;
  padding: 14px 18px;
}

.ds-caption-center .ds-caption {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 90%;
}

/* キャプション内タイトル */
.ds-caption-title {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 4px;
  color: #fff;
  letter-spacing: 0.02em;
}

/* キャプション内サブテキスト */
.ds-caption-sub {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(220, 230, 255, 0.80);
  letter-spacing: 0.06em;
}

/* キャプション内バッジ */
.ds-caption-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 20px;
  padding: 2px 10px;
  margin-bottom: 6px;
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}


/* ============================================================
   §8  テーマカラーボーダー（6セクション対応）
   使い方: class="ds-img-wrap ds-theme-fcs"
   ============================================================ */
.ds-theme-fcs    { border: 3px solid var(--img-fcs); }
.ds-theme-si     { border: 3px solid var(--img-si); }
.ds-theme-psd    { border: 3px solid var(--img-psd); }
.ds-theme-nexus  { border: 3px solid var(--img-nexus); }
.ds-theme-log    { border: 3px solid var(--img-log); }
.ds-theme-origin { border: 3px solid var(--img-origin); }

/* テーマカラーのグロー効果（ホバー時） */
.ds-theme-fcs:hover    { box-shadow: 0 0 0 3px var(--img-fcs), var(--img-shadow-lg); }
.ds-theme-si:hover     { box-shadow: 0 0 0 3px var(--img-si), var(--img-shadow-lg); }
.ds-theme-psd:hover    { box-shadow: 0 0 0 3px var(--img-psd), var(--img-shadow-lg); }
.ds-theme-nexus:hover  { box-shadow: 0 0 0 3px var(--img-nexus), var(--img-shadow-lg); }
.ds-theme-log:hover    { box-shadow: 0 0 0 3px var(--img-log), var(--img-shadow-lg); }
.ds-theme-origin:hover { box-shadow: 0 0 0 3px var(--img-origin), var(--img-shadow-lg); }


/* ============================================================
   §9  レイアウトパターン
   ============================================================ */

/* --- §9-A  フルワイド（記事幅を突き抜ける） --- */
.ds-full-bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  width: 100vw;
  max-width: 100vw;
}

/* --- §9-B  左右フロート（テキスト回り込み） --- */
.ds-float-left {
  float: left;
  width: 42%;
  margin: 4px 28px 20px 0;
  clear: left;
}

.ds-float-right {
  float: right;
  width: 42%;
  margin: 4px 0 20px 28px;
  clear: right;
}

/* フロートの後始末 */
.ds-clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* --- §9-C  2カラムグリッド --- */
.ds-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 32px 0;
}

/* --- §9-D  3カラムグリッド --- */
.ds-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 32px 0;
}

/* --- §9-E  左大・右小 2カラム（黄金比） --- */
.ds-grid-golden {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  gap: 20px;
  margin: 32px 0;
  align-items: start;
}

/* --- §9-F  右大・左小 2カラム（逆黄金比） --- */
.ds-grid-golden-rev {
  display: grid;
  grid-template-columns: 1fr 1.618fr;
  gap: 20px;
  margin: 32px 0;
  align-items: start;
}

/* --- §9-G  マガジン風グリッド（1大＋2小） --- */
.ds-grid-magazine {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
  margin: 32px 0;
}

.ds-grid-magazine .ds-img-wrap:first-child {
  grid-row: 1 / 3;  /* 1枚目が2段分を占有 */
}

/* --- §9-H  横並びスクロール（スマホ向け） --- */
.ds-scroll-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  margin: 28px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(100,170,240,0.3) transparent;
}

.ds-scroll-row .ds-img-wrap {
  flex: 0 0 72%;
  scroll-snap-align: start;
}

.ds-scroll-row::-webkit-scrollbar { height: 4px; }
.ds-scroll-row::-webkit-scrollbar-thumb {
  background: rgba(100,170,240,0.35);
  border-radius: 10px;
}


/* ============================================================
   §10  アイキャッチ特化スタイル（ヒーロー画像）
   使い方: <figure class="ds-img-wrap ds-hero">
   ============================================================ */
.ds-hero {
  border-radius: var(--img-radius-lg);
  box-shadow: var(--img-shadow-float);
  margin: 0 0 40px;
}

.ds-hero img {
  max-height: 520px;
  object-fit: cover;
  object-position: center 30%;
}

/* ヒーロー内のキャプション：大きく中央寄せ */
.ds-hero .ds-caption-title {
  font-size: 1.35rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

.ds-hero .ds-caption-sub {
  font-size: 0.85rem;
}


/* ============================================================
   §11  インライン（テキスト横）挿入用スタイル
   ============================================================ */

/* アバター・人物写真（円形） */
.ds-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: var(--img-shadow-md);
  display: inline-block;
  vertical-align: middle;
  margin-right: 12px;
}

/* アイコン的な小さい画像 */
.ds-thumb-sm {
  width: 60px;
  height: 60px;
  border-radius: var(--img-radius-sm);
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
}


/* ============================================================
   §12  エフェクトオプション
   ============================================================ */

/* --- ぼかしホバー（ホバーでフォーカス） --- */
.ds-fx-blur img {
  filter: blur(2px) brightness(0.85);
}
.ds-fx-blur:hover img {
  filter: blur(0) brightness(1);
}

/* --- グレースケール → カラー --- */
.ds-fx-grayscale img {
  filter: grayscale(100%) brightness(0.9);
}
.ds-fx-grayscale:hover img {
  filter: grayscale(0%) brightness(1);
}

/* --- 明るさ強調ホバー --- */
.ds-fx-brighten:hover img {
  filter: brightness(1.08) saturate(1.12);
}

/* --- セピア → カラー --- */
.ds-fx-sepia img {
  filter: sepia(60%) brightness(0.92);
}
.ds-fx-sepia:hover img {
  filter: sepia(0%) brightness(1);
}

/* --- ズームアウト方向（デフォルトと逆） --- */
.ds-fx-zoom-out img {
  transform: scale(1.08);
}
.ds-fx-zoom-out:hover img {
  transform: scale(1.0);
}

/* --- 上スライドホバー（parallax風） --- */
.ds-fx-parallax img {
  transform: translateY(4%);
}
.ds-fx-parallax:hover img {
  transform: translateY(-4%);
}

/* --- シャイン効果（ホバー時に光が走る） --- */
.ds-fx-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.18) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  background-position: 200% 0;
  transition: background-position 0.7s var(--img-ease);
  pointer-events: none;
}
.ds-fx-shine:hover::after {
  background-position: -200% 0;
}


/* ============================================================
   §13  遅延ロード用プレースホルダーアニメーション
   JS（daisen-image.js）と連携して動作
   ============================================================ */
.ds-img-wrap.ds-loading {
  background: linear-gradient(
    90deg,
    #e8ecf0 25%,
    #f5f7fa 50%,
    #e8ecf0 75%
  );
  background-size: 200% 100%;
  animation: ds-skeleton 1.6s ease-in-out infinite;
}

@keyframes ds-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 画像ロード完了後のフェードイン */
.ds-img-wrap img.ds-loaded {
  animation: ds-fade-in 0.55s var(--img-ease) both;
}

@keyframes ds-fade-in {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

/* スクロール連動フェードアップ（JS管理） */
.ds-img-wrap.ds-animate {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.65s var(--img-ease),
    transform 0.65s var(--img-ease);
}

.ds-img-wrap.ds-animate.ds-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 遅延クラス（スタガーアニメーション用） */
.ds-delay-1 { transition-delay: 0.10s; }
.ds-delay-2 { transition-delay: 0.20s; }
.ds-delay-3 { transition-delay: 0.30s; }
.ds-delay-4 { transition-delay: 0.40s; }
.ds-delay-5 { transition-delay: 0.50s; }
.ds-delay-6 { transition-delay: 0.60s; }


/* ============================================================
   §14  ライトボックス（モーダル）
   JS（daisen-image.js）と連携して動作
   ============================================================ */
#ds-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(4, 4, 12, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--img-ease);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#ds-lightbox.ds-lb-open {
  opacity: 1;
  pointer-events: auto;
}

#ds-lightbox img {
  max-width: min(92vw, 1200px);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--img-radius-md);
  box-shadow: 0 40px 100px rgba(0,0,0,0.7);
  transform: scale(0.90);
  transition: transform 0.4s var(--img-ease);
}

#ds-lightbox.ds-lb-open img {
  transform: scale(1);
}

/* 閉じるボタン */
#ds-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, transform 0.3s;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#ds-lightbox-close:hover {
  background: rgba(255,255,255,0.22);
  transform: rotate(90deg);
}

/* ライトボックスキャプション */
#ds-lightbox-caption {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(220,230,255,0.82);
  font-size: 0.80rem;
  letter-spacing: 0.04em;
  text-align: center;
  max-width: 80%;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.6;
}

/* ライトボックス対応画像にカーソルポインター */
.ds-lightbox-trigger {
  cursor: zoom-in;
}


/* ============================================================
   §15  Cocoon標準 wp-caption との統合
   WordPressがキャプション付き画像に自動付与するクラス
   ============================================================ */
.entry-content .wp-caption {
  border: none;
  padding: 0;
  max-width: 100%;
}

.entry-content .wp-caption img {
  display: block;
  border-radius: var(--img-radius-md);
  box-shadow: var(--img-shadow-md);
  transition: transform var(--img-duration) var(--img-ease);
}

.entry-content .wp-caption img:hover {
  transform: scale(1.025);
}

.entry-content .wp-caption-text {
  font-size: 0.78rem;
  color: #7a8090;
  text-align: center;
  margin-top: 8px;
  line-height: 1.55;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* Cocoon の alignleft / alignright / aligncenter */
.entry-content .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.entry-content .alignleft {
  float: left;
  margin: 4px 24px 16px 0;
}

.entry-content .alignright {
  float: right;
  margin: 4px 0 16px 24px;
}


/* ============================================================
   §16  アクセシビリティ（reduced-motion対応）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ds-img-wrap img,
  .ds-img-wrap,
  .ds-shadow-float,
  #ds-lightbox,
  #ds-lightbox img,
  #ds-lightbox-close {
    transition: none !important;
    animation: none !important;
  }

  .ds-img-wrap.ds-animate {
    opacity: 1 !important;
    transform: none !important;
  }

  .ds-fx-shine::after {
    display: none;
  }
}


/* ============================================================
   §17  レスポンシブ補正
   ============================================================ */

/* タブレット（1023px以下） */
@media screen and (max-width: 1023px) {
  .ds-grid-golden,
  .ds-grid-golden-rev {
    grid-template-columns: 1fr 1fr;
  }

  .ds-hero img {
    max-height: 420px;
  }
}

/* スマホ（768px以下） */
@media screen and (max-width: 768px) {
  .ds-float-left,
  .ds-float-right {
    float: none;
    width: 100%;
    margin: 0 0 20px;
  }

  .ds-grid-2,
  .ds-grid-3,
  .ds-grid-golden,
  .ds-grid-golden-rev {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ds-grid-magazine {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .ds-grid-magazine .ds-img-wrap:first-child {
    grid-row: auto;
  }

  .ds-scroll-row .ds-img-wrap {
    flex: 0 0 85%;
  }

  .ds-hero img {
    max-height: 280px;
  }

  .ds-full-bleed {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  #ds-lightbox-caption {
    bottom: 16px;
    font-size: 0.72rem;
  }
}

/* 小スマホ（480px以下） */
@media screen and (max-width: 480px) {
  .ds-scroll-row .ds-img-wrap {
    flex: 0 0 92%;
  }

  .ds-hero img {
    max-height: 220px;
  }

  .ds-caption-title {
    font-size: 0.95rem;
  }
}