@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
.main {
  padding: 16px 24px;
}

body {
  margin-top: 52px !important;
}

/* ====================================
   下層ページ用 シンプルヘッダー
   （パターンB改：レイアウト崩れ修正版）
   ==================================== */

/* --- 1. 大枠コンテナ（ここに高さを定義） --- */
.simple-header-wrapper {
  /* 確実にFlexboxにする */
  display: flex !important;
  align-items: center !important; /* 垂直方向：中央 */
  justify-content: flex-start !important; /* 水平方向：中央（念のため） */

  width: 100%;
  height: 64px; /* 少し余裕を持たせた高さ */

  /* ウィジェットとの隙間（ここを調整） */
  margin-top: 8px;
  margin-bottom: 8px;

  /* デザイン：すりガラス */
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid rgba(0, 0, 0, 0.05);

  /* 位置固定 */
  position: sticky;
  top: 8px;
  z-index: 9999;

  /* ボックスのサイズ計算を枠線込みにする */
  box-sizing: border-box !important;
}

/* --- 2. インナー（Cocoonのwrapクラス補正） --- */
.simple-header-inner {
  /* Cocoonのスタイルを打ち消してFlex化 */
  display: flex !important;
  align-items: center !important; /* 垂直中央 */
  justify-content: flex-start !important; /* 左寄せに戻す */

  /* 高さをつぶさない */
  height: 100% !important;
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 24px !important; /* 左右の余白 */

  /* 余計なフロートなどを解除 */
  float: none !important;
}

/* --- 3. ロゴエリアの補正 --- */
.simple-logo {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.simple-logo a {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  text-decoration: none !important;
}

/* ====================================
   ★オプション：ロゴのアニメーション化
   （静止画ではなく、ゆっくり光が流れる演出）
   ==================================== */

/* 1. アニメーションの定義（光が左から右へ流れる） */
@keyframes shine-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* --- 4. テキストデザイン（ライトモード修正版） --- */
.simple-logo-text {
  /* フォント設定 */
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    sans-serif;
  font-weight: 800;
  font-size: 24px;

  /* リセット */
  line-height: normal !important;
  padding: 0 !important;
  margin: 0 !important;

  /* ★ここを変更：明確な青のグラデーション（左上から右下へ） */
  background: linear-gradient(135deg, #020617 0%, #2563eb 100%);

  /* 文字の形で切り抜く */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: transparent !important;

  /* フォールバック（念のため） */
  color: #020617;

  /* グラデーションの幅を2倍にして、動かせる余地を作る */
  background-size: 200% auto;

  /* 3秒かけてゆっくり往復させる（時間は好みで調整可） */
  animation: shine-flow 4s ease infinite;
}

/* ====================================
   ★ダークモード完全対応
   ==================================== */
body.dark-mode .simple-header-wrapper {
  background-color: rgba(31, 41, 55, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .simple-logo-text {
  background: linear-gradient(90deg, #f8fafc, #94a3b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
  color: #f8fafc;

  /* グラデーションの幅を2倍にして、動かせる余地を作る */
  background-size: 200% auto;

  /* 3秒かけてゆっくり往復させる（時間は好みで調整可） */
  animation: shine-flow 4s ease infinite;
}

/* --- スマホ表示調整 --- */
@media screen and (max-width: 834px) {
  .simple-header-wrapper {
    height: 56px;
    margin-top: 0; /* スマホでは隙間なし */
    margin-bottom: 0;
    top: 0;
  }
  .simple-header-inner {
    padding: 0 16px !important;
  }
  .simple-logo-text {
    font-size: 20px;
  }
}

/* --------------------------------------------------
   ダークモード切り替えボタンのスタイル
-------------------------------------------------- */
.theme-toggle-btn {
  position: fixed;
  top: 120px; /* 上からの距離 */
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #1e3a5f; /* サイトカラー */
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 9999;
  font-size: 1.2rem;
  transition: transform 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* アイコンフォントの指定 */
.theme-toggle-btn i {
  font-family:
    "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.theme-toggle-btn:hover {
  transform: scale(1.1);
}

/* --------------------------------------------------
   ダークモード時の配色定義 (Cocoon上書き用)
-------------------------------------------------- */
/* --------------------------------------------------
   SweetAlert2 ダークモード対応 (Cocoon連動)
-------------------------------------------------- */
/* ポップアップの背景と枠線 */
body.dark-mode .swal2-popup {
  background-color: #1f2937 !important; /* サイト共通のダーク背景 */
  color: #e2e8f0 !important; /* 文字色 */
  border: 1px solid #4b5563 !important; /* 枠線 */
}

/* タイトルと本文の色 */
body.dark-mode .swal2-title {
  color: #fff !important;
}
body.dark-mode .swal2-html-container {
  color: #cbd5e1 !important;
}

/* アニメーション用のマスク（白いカバー）を背景色に合わせる */
/* ※これをやらないと、アニメーション中に白い線が見えてしまいます */
body.dark-mode .swal2-success-circular-line-left,
body.dark-mode .swal2-success-circular-line-right,
body.dark-mode .swal2-success-fix {
  background-color: #1f2937 !important;
}

/* ==================================================
  Cocoon独自ブロック・パーツの完全ダークモード対応
  ================================================== */

/* --------------------------------------------------
  1. 基本レイアウト・配色の強制上書き
  -------------------------------------------------- */
body.dark-mode {
  /* Cocoonの基本変数をダークモード用に再定義 */
  --cocoon-text-color: #f1f5f9;
  --cocoon-white-color: #1f2937; /* コンテンツ背景色 */
  --cocoon-basic-border-color: #4b5563;
  --cocoon-thin-color: #374151;
  --cocoon-x-thin-color: #1f2937;
  --cocoon-xx-thin-color: #111827; /* 画面全体の背景色 */
  --cocoon-xxx-thin-color: #374151;
}

/* 画面全体の背景 */
body.dark-mode {
  background-color: #111827 !important;
  color: #f1f5f9 !important;
}

/* コンテンツエリア（白背景だった場所）をダークネイビーに */
body.dark-mode .header,
body.dark-mode .footer,
body.dark-mode .main,
body.dark-mode .sidebar,
body.dark-mode .wrap,
body.dark-mode .entry-content,
body.dark-mode .entry-card-wrap,
body.dark-mode .widget,
body.dark-mode .toc,
body.dark-mode .search-form div.sform, /* 検索窓 */
body.dark-mode .admin-panel {
  background-color: #1f2937 !important;
  color: #f1f5f9 !important;
  border-color: #4b5563 !important;
}

/* リンク色（青だと暗いので明るく） */
body.dark-mode a {
  color: #60a5fa;
}

body.dark-mode .sns-buttons a {
  color: #fff;
}

/* --------------------------------------------------
   2. メッセージボックス・アイコンボックス類
   -------------------------------------------------- */
/* 共通設定：文字色とアイコン背景の調整 */
body.dark-mode .common-icon-box,
body.dark-mode .blank-box,
body.dark-mode .caption-box,
body.dark-mode .tab-caption-box-content,
body.dark-mode .label-box-content {
  color: #f1f5f9 !important;
  background-color: #1e293b !important; /* 少し明るめのダーク */
  border-width: 1px !important; /* 枠線を細くしてスタイリッシュに */
}

/* 青系（案内・情報・Primary） */
body.dark-mode .is-style-information-box,
body.dark-mode .information-box,
body.dark-mode .is-style-info-box,
body.dark-mode .info-box,
body.dark-mode .is-style-primary-box {
  background-color: rgba(30, 58, 138, 0.4) !important; /* 透け感のある青 */
  border-color: #3b82f6 !important;
}
body.dark-mode .is-style-information-box::before,
body.dark-mode .information-box::before {
  background-color: transparent !important;
  color: #60a5fa !important;
  border-right-color: #3b82f6 !important;
}

/* 黄色系（はてな・メモ・Warning） */
body.dark-mode .is-style-question-box,
body.dark-mode .question-box,
body.dark-mode .is-style-warning-box,
body.dark-mode .warning-box {
  background-color: rgba(66, 32, 6, 0.6) !important; /* 透け感のある茶/黄 */
  border-color: #f59e0b !important;
  color: #fef3c7 !important;
}
body.dark-mode .is-style-question-box::before,
body.dark-mode .question-box::before {
  color: #fbbf24 !important;
  border-right-color: #f59e0b !important;
}

/* 赤系（警告・NG・Danger） */
body.dark-mode .is-style-alert-box,
body.dark-mode .alert-box,
body.dark-mode .is-style-danger-box,
body.dark-mode .danger-box,
body.dark-mode .is-style-ng-box,
body.dark-mode .ng-box,
body.dark-mode .is-style-bad-box {
  background-color: rgba(69, 10, 10, 0.6) !important; /* 透け感のある赤 */
  border-color: #ef4444 !important;
  color: #fee2e2 !important;
}
body.dark-mode .is-style-alert-box::before,
body.dark-mode .alert-box::before {
  color: #f87171 !important;
  border-right-color: #ef4444 !important;
}

/* 緑系（メモ・OK・Good・Success） */
body.dark-mode .is-style-memo-box,
body.dark-mode .memo-box,
body.dark-mode .is-style-success-box,
body.dark-mode .success-box,
body.dark-mode .is-style-ok-box,
body.dark-mode .is-style-good-box {
  background-color: rgba(6, 78, 59, 0.6) !important; /* 透け感のある緑 */
  border-color: #10b981 !important;
  color: #d1fae5 !important;
}
body.dark-mode .is-style-memo-box::before,
body.dark-mode .memo-box::before {
  color: #34d399 !important;
  border-right-color: #10b981 !important;
}

/* グレー系（コメント・プロフィール・Light/Dark） */
body.dark-mode .is-style-comment-box,
body.dark-mode .comment-box,
body.dark-mode .is-style-profile-box,
body.dark-mode .is-style-light-box,
body.dark-mode .is-style-secondary-box,
body.dark-mode .gray-box {
  background-color: #374151 !important;
  border-color: #6b7280 !important;
  color: #f3f4f6 !important;
}

/* --------------------------------------------------
   3. 吹き出し (Speech Balloon)
   -------------------------------------------------- */
body.dark-mode .speech-balloon {
  background-color: #374151 !important; /* 濃いグレー */
  border-color: #4b5563 !important;
  color: #f1f5f9 !important;
}

/* 吹き出しの「しっぽ（三角）」の色調整 */
/* 左からの吹き出し */
body.dark-mode .speech-balloon::before {
  border-right-color: #4b5563 !important; /* 枠線 */
}
body.dark-mode .speech-balloon::after {
  border-right-color: #374151 !important; /* 背景色 */
}
/* 右からの吹き出し */
body.dark-mode .sbp-r .speech-balloon::before {
  border-left-color: #4b5563 !important;
}
body.dark-mode .sbp-r .speech-balloon::after {
  border-left-color: #374151 !important;
}
/* 考え事（Think）タイプの丸いしっぽ */
body.dark-mode .sbs-think .speech-balloon::before,
body.dark-mode .sbs-think .speech-balloon::after {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
}

/* --------------------------------------------------
   4. ブログカード・エントリーカード
   -------------------------------------------------- */
body.dark-mode .blogcard,
body.dark-mode .related-entry-card-wrap,
body.dark-mode .widget-entry-card {
  background-color: #1f2937 !important;
  border-color: #4b5563 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
body.dark-mode .blogcard-title,
body.dark-mode .entry-card-title,
body.dark-mode .related-entry-card-title {
  color: #60a5fa !important;
}
body.dark-mode .blogcard-snippet,
body.dark-mode .entry-card-snippet {
  color: #9ca3af !important;
}
body.dark-mode .blogcard-cite {
  color: #6b7280 !important;
}

/* --------------------------------------------------
   5. ボタン・ページネーション
   -------------------------------------------------- */
/* Cocoonボタン (白抜きやデフォルト) */
body.dark-mode .btn,
body.dark-mode .btn-wrap a {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
body.dark-mode .btn-white {
  background-color: #374151 !important;
  color: #fff !important;
}

/* ページネーション */
body.dark-mode .page-numbers {
  background-color: #1f2937 !important;
  color: #e2e8f0 !important;
  border-color: #4b5563 !important;
}
body.dark-mode .page-numbers.current {
  background-color: #2563eb !important; /* アクティブは青 */
  color: #fff !important;
  border-color: #2563eb !important;
}
body.dark-mode .pagination-next-link {
  background-color: #374151 !important;
  color: #fff !important;
  border-color: #4b5563 !important;
}

/* --------------------------------------------------
   6. その他パーツ（テーブル、目次、フォームなど）
   -------------------------------------------------- */
/* テーブル */
body.dark-mode table th,
body.dark-mode table td {
  border-color: #4b5563 !important;
  color: #f1f5f9 !important;
}
body.dark-mode table th {
  background-color: #111827 !important; /* ヘッダーはより暗く */
}
body.dark-mode table tr:nth-of-type(2n + 1) {
  background-color: #1f2937 !important; /* 縞模様 */
}

/* 目次 (TOC) */
body.dark-mode .toc {
  border-color: #4b5563 !important;
  background-color: #1f2937 !important;
}
body.dark-mode .toc-title {
  background-color: #374151 !important;
  color: #fff !important;
}

/* フォーム入力欄 */
body.dark-mode input[type="text"],
body.dark-mode input[type="search"],
body.dark-mode input[type="email"],
body.dark-mode input[type="number"],
body.dark-mode textarea,
body.dark-mode select {
  background-color: #111827 !important;
  color: #fff !important;
  border: 1px solid #4b5563 !important;
}

/* トグルボックス */
body.dark-mode .toggle-button {
  background-color: #374151 !important;
  color: #fff !important;
  border-color: #4b5563 !important;
}
body.dark-mode .toggle-content {
  background-color: #1f2937 !important;
  border-color: #4b5563 !important;
}

/* ランキング */
body.dark-mode .ranking-item {
  background-color: #1f2937 !important;
  border-color: #4b5563 !important;
}

/* FAQ */
body.dark-mode .faq-question {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
  color: #fff !important;
}

/* ===================================================
   2カラム デザイン統一（リスト有無に関わらず適用）
   =================================================== */

/* -------------------------------------------
   1. ダークモード対応
   ------------------------------------------- */
body.dark-mode .wp-block-cocoon-blocks-column-2 .column-left,
body.dark-mode .wp-block-cocoon-blocks-column-2 .column-right {
  background-color: #1f2937 !important; /* 背景ダーク */
  border-color: #4b5563 !important; /* 枠線ダーク */
  color: #e2e8f0 !important; /* 文字色ホワイト系 */
}

/* -------------------------------------------
   2. カード本体のスタイル（枠線・影・角丸）
   ------------------------------------------- */
.wp-block-cocoon-blocks-column-2 .column-left,
.wp-block-cocoon-blocks-column-2 .column-right {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0; /* 中身の余白は個別に調整 */
  overflow: hidden; /* 角丸からはみ出さないように */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  margin-bottom: 0; /* カラム自体の下余白リセット */
  display: flex; /* 高さ揃え・配置用 */
  flex-direction: column;
}

/* 2カラムブロック全体の下余白 */
.wp-block-cocoon-blocks-column-2 {
  gap: 20px; /* カラム間の隙間 */
  margin-bottom: 2em;
}

/* -------------------------------------------
   3. 見出しエリア（1番目の要素）
   ------------------------------------------- */
/* 共通設定 */
.wp-block-cocoon-blocks-column-2 .column-left > p:first-child,
.wp-block-cocoon-blocks-column-2 .column-right > p:first-child,
.wp-block-cocoon-blocks-column-2 .column-left > h4:first-child,
.wp-block-cocoon-blocks-column-2 .column-right > h4:first-child {
  margin: 0 !important;
  padding: 12px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 1.1em;
  line-height: 1.4;
  border-bottom: none;
  width: 100%; /* 幅いっぱいにする */
}

/* 左カラムの見出し色（青） */
.wp-block-cocoon-blocks-column-2 .column-left > p:first-child,
.wp-block-cocoon-blocks-column-2 .column-left > h4:first-child {
  background-color: #00529b;
}

/* 右カラムの見出し色（緑） */
.wp-block-cocoon-blocks-column-2 .column-right > p:first-child,
.wp-block-cocoon-blocks-column-2 .column-right > h4:first-child {
  background-color: #2ea690;
}

/* -------------------------------------------
   4. コンテンツエリア（見出し以降の要素）修正版
   ------------------------------------------- */

/* 通常のテキスト(pタグなど)が入った場合の余白 */
.wp-block-cocoon-blocks-column-2 .column-left > :not(:first-child),
.wp-block-cocoon-blocks-column-2 .column-right > :not(:first-child) {
  padding: 15px; /* 通常文章用の余白 */
  margin-bottom: 0;
}

/* リスト(ul)が入った場合の余白・調整 */
/* 修正: 直下(>)ではなく子孫全般に適用し、paddingをem指定に変更 */
.wp-block-cocoon-blocks-column-2 .column-left ul,
.wp-block-cocoon-blocks-column-2 .column-right ul {
  padding: 15px 20px 15px 2.5em !important; /* 左余白を2.5文字分確保 */
  margin: 0;
  list-style-position: outside; /* 点をボックスの外（padding領域）に置く */
  box-sizing: border-box;
}

/* リストアイテム間の調整 */
.wp-block-cocoon-blocks-column-2 .column-left ul li,
.wp-block-cocoon-blocks-column-2 .column-right ul li {
  margin-bottom: 8px;
}

/* 2. グループブロック (.wp-block-group) */
body.dark-mode .wp-block-group {
  background-color: transparent !important; /* 背景を透明（親に合わせる） */
  color: #e2e8f0 !important;
}

/* もしグループブロック自体に「背景色」を設定している場合 */
body.dark-mode .wp-block-group.has-background {
  background-color: #1f2937 !important; /* 強制的にダーク背景に */
  border: 1px solid #4b5563; /* 境界線を追加して視認性アップ */
}

/* 3. カテゴリーブロック (.wp-block-categories) */
/* リスト全体の文字色 */
body.dark-mode .wp-block-categories,
body.dark-mode .wp-block-categories-list {
  color: #e2e8f0;
}

/* リストアイテム（行）のデザイン */
body.dark-mode .wp-block-categories li,
body.dark-mode .wp-block-categories-list li {
  border-bottom: 1px dashed #374151; /* 薄い区切り線 */
}

/* カテゴリーリンクのデザイン */
body.dark-mode .wp-block-categories a,
body.dark-mode .wp-block-categories-list a {
  color: #e2e8f0 !important; /* リンク色を白系に */
  display: block; /* タップしやすいようにブロック化 */
  padding: 8px 4px;
  text-decoration: none;
  transition: background-color 0.3s;
}

/* ホバー時のデザイン */
body.dark-mode .wp-block-categories a:hover,
body.dark-mode .wp-block-categories-list a:hover {
  color: #60a5fa !important; /* ホバー時は明るい青 */
  background-color: rgba(255, 255, 255, 0.05); /* うっすら光らせる */
}

/* 投稿数（カウント）の表示がある場合 */
body.dark-mode .wp-block-categories span,
body.dark-mode .wp-block-categories-list span {
  color: #9ca3af; /* 薄いグレー */
}

/* フッターナビ全体の背景 */
body.dark-mode .navi-footer {
  background-color: #1f2937 !important; /* フッター本体と同じダークネイビー */
}

/* リンク文字色 */
body.dark-mode .navi-footer ul li a {
  color: #e2e8f0 !important; /* 白に近いグレー */
  background-color: transparent !important;
  transition: all 0.3s ease;
}

/* ホバー時の挙動 */
body.dark-mode .navi-footer ul li a:hover {
  color: #60a5fa !important; /* 明るい青 */
  background-color: rgba(255, 255, 255, 0.05) !important; /* うっすら光らせる */
}

/* ==================================================
   以下、通常時（ライトモード）のスタイル定義
   ================================================== */

#header-in {
  background-color: rgba(255, 255, 255, 0) !important;
}

.logo-header {
  padding: 40px 0;
}

@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.logo-header img {
  background: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.8),
    rgba(245, 245, 245, 0.6),
    rgba(240, 248, 255, 0.7),
    rgba(255, 255, 255, 0.5)
  );
  background-size: 400% 400%;
  animation: gradient-flow 15s ease infinite;
}

/* --- 見出しデザイン (ライトモード用) --- */
.entry-content h2 {
  font-size: 1.4em;
  background-color: #e2f5ff; /* 薄い水色 */
  padding-top: 20px;
  padding-left: 10px;
  padding-bottom: 20px;
  border-left: solid 10px #00a0e9;
  color: #000; /* デフォルト文字色 */
}

.entry-content h3 {
  color: #000;
  font-size: 1.2em;
  background-color: #f7f9fc;
  padding: 10px;
  border-left: solid 10px #00a0e9;
}

.entry-content h4 {
  color: #000;
  font-size: 1em;
  padding: 10px;
  border-top: solid 3px #00a0e9;
  border-bottom: solid 3px #00a0e9;
}

.entry-content h5 {
  color: #000;
  font-size: 1em;
  padding: 10px;
  border-bottom: dotted 3px #00a0e9;
}

.entry-content h6 {
  color: #000;
  font-size: 1em;
  padding: 5px;
  border-left: solid 7px #00a0e9;
}

/* --- 引用ブロック (ライトモード用) --- */
.quote-block-1 {
  background-color: #f9f9f9;
  border-left: 3px solid #4a4a4a;
  padding: 25px 30px;
  margin: 20px 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
}
.quote-block-1 .en-quote {
  font-size: 1.3em;
  font-weight: 300;
  color: #333;
  line-height: 1.4;
  margin-bottom: 15px;
}
.quote-block-1 .ja-quote {
  font-size: 0.95em;
  color: #666;
  line-height: 1.6;
}

/* --- バナーコンテナ --- */
.banner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 0px 8px;
}

.banner-container > a {
  transition:
    transform 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out;
  border-radius: 4px;
}

.banner-container > a:hover {
  transform: scale(1.02) translateY(-4px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* Coming Soon系 */
.coming-soon-wrapper {
  position: relative;
}

.coming-soon-link {
  position: relative;
  display: block;
  cursor: default;
  pointer-events: none;
}

.coming-soon-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.coming-soon-link img {
  display: block;
}

.coming-soon-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 1.7em;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  z-index: 2;
}

/* アイコン系 */
.icon-home-logo:before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background-image: url("http://tradeagency.jp/wp-content/uploads/2026/01/tradeisland.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.icon-x-corp-logo:before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background-image: url("http://tradeagency.jp/wp-content/uploads/2026/01/x.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

/* プロフィールボタン系 */
.author-box .sns-follow-buttons a.follow-button {
  border: none;
}
a.follow-button.feedly-button.feedly-follow-button-sq {
  display: none;
}
a.follow-button.rss-button.rss-follow-button-sq {
  display: none;
}

.sidebar .author-name a {
  color: rgb(51, 51, 51);
  pointer-events: none;
  text-decoration: none;
}

body.dark-mode .sidebar .author-name a {
  color: #fff;
}

/* プロフィール文の初期状態（省略時） */
.sidebar .author-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5; /* 5行で制限 */
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 5px;
}

/* クリックされて開いた状態 */
.sidebar .author-description.is-open {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* ==================================================
   サイドバー「もっと見る」ボタンのデザイン
   ================================================== */

/* --- 基本スタイル（ライトモード・デフォルト） --- */
.author-read-more {
  display: block;
  width: 100%; /* 横幅いっぱいに */
  margin: 10px auto 15px; /* 上下の余白 */
  padding: 10px 0; /* ボタンの厚み */

  /* デザイン定義 */
  background-color: transparent;
  border: 1px solid #e0e0e0; /* 薄いグレーの枠線 */
  border-radius: 4px;
  color: #1e3a5f; /* ネイビー（サイトテーマ色） */

  /* テキスト調整 */
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.1em; /* 高級感のある文字間隔 */
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

/* ホバー時の挙動（ライトモード） */
.author-read-more:hover {
  background-color: #f4f8fa; /* 薄い青背景 */
  border-color: #1e3a5f; /* 枠線を濃く */
  transform: translateY(-2px);
}

/* --- ダークモード対応（上書き設定） --- */
body.dark-mode .author-read-more {
  color: #e2e8f0 !important; /* 文字色を白系グレーに */
  border-color: #4b5563 !important; /* 枠線を暗めのグレーに */
}

/* ホバー時の挙動（ダークモード） */
body.dark-mode .author-read-more:hover {
  background-color: rgba(
    255,
    255,
    255,
    0.05
  ) !important; /* うっすら白く光らせる */
  border-color: #60a5fa !important; /* 枠線を明るい青に */
  color: #fff !important; /* 文字を完全な白に */
}

/* 閉じる状態（展開時）のデザイン調整（必要であれば） */
/* 基本スタイルと同じで良いので追記なしでもOK */
/* ウィジェットのリストデザイン */
.widget_child_pages .widget-title a {
  display: block;
  position: relative;
  color: inherit;
  text-decoration: none;
  padding-right: 20px;
  cursor: pointer;
}

.widget_child_pages .widget-title a::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-60%) rotate(45deg);
  transition: all 0.2s ease;
}

.widget_child_pages .widget-title a:hover {
  opacity: 0.8;
}

.widget_child_pages .widget-title a:hover::after {
  border-color: #333;
  right: 0px;
}

/* ナビカード選択中 */
.navi-entry-cards-link-selected {
  background-color: rgba(225, 245, 254, 0.2) !important;
  border: 2px solid #4fc3f7 !important;
}

body.dark-mode .navi-entry-card-title {
  color: #fff;
}

/* --------------------------------------------------
   子ページリスト：横スライダー (Infinite Scroll)
   -------------------------------------------------- */

/* --------------------------------------------------
   ウィジェットタイトル装飾 (パターンC: スタイリッシュ下線)
   -------------------------------------------------- */
.widget-page-content-top-title,
.main-widget-label,
.widget-title {
  position: relative;
  padding: 0 0 10px 0; /* 下に余白 */
  margin-bottom: 25px;
  font-size: 1.2em;
  font-weight: 700;
  color: #1e3a8a; /* ネイビー文字 */
  border-bottom: 2px solid #e2e8f0; /* 薄いグレーの下線全体 */
}

/* 下線の一部を濃くする装飾 */
.widget-page-content-top-title::after,
.main-widget-label::after,
.widget-title::after {
  content: "";
  position: absolute;
  bottom: -2px; /* 下線に重ねる */
  left: 0;
  width: 60px; /* アクセントの長さ */
  height: 2px;
  background-color: #2563eb; /* 鮮やかな青 */
}

/* ダークモード対応 */
body.dark-mode .widget-page-content-top-title,
body.dark-mode .main-widget-label,
body.dark-mode .widget-title {
  color: #f1f5f9;
  border-bottom-color: #475569;
}
body.dark-mode .widget-page-content-top-title::after,
body.dark-mode .main-widget-label::after,
body.dark-mode .widget-title::after {
  background-color: #60a5fa;
}

.ta-child-slider-wrap {
  width: 100%;
  overflow: hidden; /* はみ出した部分を隠す */
  position: relative;
  padding: 10px 0;
  mask-image: linear-gradient(
    to right,
    transparent,
    black 5%,
    black 95%,
    transparent
  ); /* 両端をぼかす */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 5%,
    black 95%,
    transparent
  );
}

.ta-child-slider-track {
  display: flex;
  width: max-content; /* 中身の幅に合わせる */
  gap: 15px; /* 画像間の隙間 */
  /* アニメーション定義: scrollXという名前で、無限(infinite)に、等速(linear)で動く */
  animation-name: scrollX;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* durationはPHP側で要素数に応じてインライン出力されます */
}

.ta-slide-item {
  width: 160px; /* サムネイルの幅 */
  flex-shrink: 0; /* 縮まないようにする */
  /* transitionに border-color を追加して枠線の色変化も滑らかに */
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background: #fff;
  /* ▼以下の1行を追加：透明な枠線を設定して高さを確保▼ */
  border: 2px solid transparent;
}

.ta-slide-item a {
  display: block;
  line-height: 0;
}

.ta-slide-item img {
  width: 100%;
  height: 90px; /* アスペクト比固定 (16:9) */
  object-fit: cover;
  transition: opacity 0.3s;
}

/* ホバー時の挙動 */
.ta-slide-item:hover {
  transform: translateY(-3px); /* 少し浮く */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.ta-slide-item:hover img {
  opacity: 0.8;
}

/* カレントページ（今見ているページ）の枠線強調 */
.ta-slide-item.current-page {
  border: 2px solid #2563eb; /* ブランドカラー */
}

/* ユーザーがマウスを乗せた時に止める場合（任意） */
.ta-child-slider-track:hover {
  animation-play-state: paused;
}

/* アニメーションキーフレーム: 0%から-50%まで移動 */
/* リストを2セット出力しているので、-50%まで行くと見た目が最初と一致する */
@keyframes scrollX {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* モバイル調整 */
@media (max-width: 480px) {
  .ta-slide-item {
    width: 120px;
  }
  .ta-slide-item img {
    height: 68px;
  }
}

/* --------------------------------------------------
   7. レーダーチャート (Cocoonブロック)
   -------------------------------------------------- */
/* ブロック自体の背景色調整 */
body.dark-mode .radar-chart-block,
body.dark-mode .wp-block-cocoon-blocks-radar,
body.dark-mode .block-box.radar-chart-box {
  background-color: transparent !important; /* 親要素のダーク色に合わせる */
  color: #f1f5f9 !important; /* キャプション文字色 */
  border: none !important; /* 余計な枠線があれば消す */
}

/* Canvas (描画エリア) の色反転トリック
   Chart.jsの描画色がCSSから操作できないため、画像として「階調反転」させます。
   invert(1): 白背景→黒、黒文字→白 に反転
   hue-rotate(180deg): 反転してオレンジになった青色グラフを、元の青に戻す
*/
body.dark-mode .radar-chart-block canvas,
body.dark-mode .wp-block-cocoon-blocks-radar canvas,
body.dark-mode .radar-chart-box canvas {
  filter: invert(1) hue-rotate(180deg);
}

/* --------------------------------------------------
   8. モバイルメニュー閉じるボタン
   -------------------------------------------------- */
/* サイドバーメニューやモバイルメニューの閉じるボタン */
body.dark-mode .sidebar-menu-close-button,
body.dark-mode .menu-close-button {
  background-color: #374151 !important; /* ボタン背景：薄めのダークグレー */
  color: #f1f5f9 !important; /* ×アイコンの色：白 */
  border: 1px solid #4b5563 !important; /* 枠線：馴染むグレー */
  transition: all 0.3s ease;
}

/* ホバー時の挙動 */
body.dark-mode .sidebar-menu-close-button:hover,
body.dark-mode .menu-close-button:hover {
  background-color: #ef4444 !important; /* ホバー時は「閉じる」らしく赤系、または青(#2563eb)でも可 */
  color: #fff !important;
  border-color: #ef4444 !important;
}

/* --------------------------------------------------
   9. サイドバー・ウィジェット見出しの修正
   -------------------------------------------------- */
/* サイドバー見出しの背景色が白く残る問題を解消 */
body.dark-mode #sidebar h3,
body.dark-mode .sidebar h3,
body.dark-mode .sidebar .widget-title,
body.dark-mode .widget-sidebar-title {
  background-color: transparent !important; /* 背景色を透明に */
  background: none !important; /* スキンによるグラデーション背景等も削除 */
  color: #f1f5f9 !important; /* 文字色をはっきりした白に */
  border-bottom: 2px solid #4b5563 !important; /* 下線をダークモード用のグレーに */
  padding: 10px 0 !important; /* 余白調整（デザイン崩れ防止） */
}

/* 下線アクセント（青い棒）の調整 */
body.dark-mode #sidebar h3::after,
body.dark-mode .sidebar h3::after,
body.dark-mode .sidebar .widget-title::after,
body.dark-mode .widget-sidebar-title::after {
  background-color: #60a5fa !important; /* 暗い背景でも目立つ明るい青 */
}

/* TradingViewウィジェットを最上部に固定 */
#tv-fixed-ticker {
  position: fixed; /* 絶対固定 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99999; /* 最前面に表示 */
  background-color: #ffffff; /* 背景色 */
  border-bottom: 1px solid #e0e0e0; /* 下線 */
  height: 84px; /* 高さを明示（ガタつき防止） */
  overflow: hidden; /* はみ出した部分（著作権表記など）を隠す保険 */
}

/* リスト全体のスタイル */
.ta-check-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 2em 0 !important;
}

/* --- カードのスタイル（共通・ライトモード） --- */
.ta-check-item {
  display: flex;
  align-items: flex-start;
  background: #fdfdfd; /* ライト時の背景：ほぼ白 */
  border: 1px solid #e0e0e0;
  border-left: 5px solid #27c96d; /* アクセントの緑 */
  border-radius: 8px; /* 角を少し丸く */
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

/* ホバー時の動き */
.ta-check-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* --- ダークモード対応 (Cocoon) --- */
body.dark-mode .ta-check-item {
  background: #2a2a2a; /* ダーク時の背景：濃いグレー */
  border-color: #444; /* 枠線を暗く */
  border-left-color: #27c96d; /* 緑はそのまま */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* --- アイコンスタイル --- */
.ta-check-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-right: 15px;
  color: #27c96d; /* チェックの色 */
  background: #e6f9ee; /* アイコン背景（薄い緑） */
  border-radius: 50%;
  padding: 5px;
  box-sizing: border-box;
}

/* ダークモード時のアイコン背景 */
body.dark-mode .ta-check-icon {
  background: #1b3320; /* 暗い緑に変更して馴染ませる */
}

/* --- テキストエリア --- */
.ta-check-content {
  flex-grow: 1;
}

/* 項目タイトル */
.ta-check-title {
  display: block;
  font-weight: bold;
  font-size: 1.1em;
  color: #333;
  margin-bottom: 6px;
}
/* ダークモード時のタイトル */
body.dark-mode .ta-check-title {
  color: #eee; /* 白文字 */
}

/* 説明文 */
.ta-check-desc {
  display: block;
  font-size: 0.95em;
  color: #666;
  line-height: 1.6;
}
/* ダークモード時の説明文 */
body.dark-mode .ta-check-desc {
  color: #aaa; /* 薄いグレー文字 */
}

/* --- クリーン＆ミニマルCTA --- */
.ta-cta-box-clean {
  /* 背景を透過させ、上下に薄い線を入れる */
  background: transparent;
  padding: 70px 20px;
  text-align: center;
  margin: 50px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.dark-mode .ta-cta-box-clean {
  border-color: rgba(255, 255, 255, 0.1);
}

/* テキストを大きく、堂々と */
.ta-cta-micro-clean {
  display: block;
  font-size: 1.6em; /* かなり大きく */
  color: #222;
  font-weight: 900; /* 極太 */
  margin-bottom: 40px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
body.dark-mode .ta-cta-micro-clean {
  color: #fff;
}

/* --- CTAボックス（すりガラス風） --- */
.ta-cta-box-glass {
  position: relative;
  background: rgba(255, 255, 255, 0.3); /* ライトモード：半透明の白 */
  backdrop-filter: blur(20px); /* すりガラス効果 */
  -webkit-backdrop-filter: blur(20px); /* Safari対応 */
  border: 1px solid rgba(255, 255, 255, 0.4); /* 薄い枠線 */
  border-radius: 24px; /* 丸みを強く */
  padding: 60px 30px;
  text-align: center;
  margin: 60px 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05); /* 柔らかく大きな影 */
  overflow: hidden;
}

/* 背景の光の反射演出 */
.ta-cta-box-glass::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0) 60%
  );
  pointer-events: none;
  z-index: 0;
}

/* ダークモード対応 */
body.dark-mode .ta-cta-box-glass {
  background: rgba(30, 30, 30, 0.4); /* ダークモード：半透明の黒 */
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
body.dark-mode .ta-cta-box-glass::before {
  background: radial-gradient(
    circle at center,
    rgba(255, 215, 0, 0.1) 0%,
    rgba(255, 255, 255, 0) 60%
  );
}

.ta-cta-content {
  position: relative;
  z-index: 1;
}

/* テキスト回り */
.ta-cta-micro {
  display: block;
  font-size: 1.2em;
  color: #444;
  font-weight: 700;
  margin-bottom: 35px;
  letter-spacing: 0.05em;
}
body.dark-mode .ta-cta-micro {
  color: #eee;
}
.ta-cta-micro::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: #ffc107; /* アクセントの黄色い線 */
  margin: 15px auto 0;
  border-radius: 2px;
}

/* ボタンデザイン（発光感を強化） */
.ta-cta-btn-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 鮮やかなグラデーション */
  background: linear-gradient(45deg, #ffd700, #ffb300);
  color: #fff !important; /* 文字を白にして高級感を出す */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  font-size: 1.4em;
  font-weight: 800;
  text-decoration: none !important;
  padding: 20px 50px;
  border-radius: 50px;
  /* 強い発光影と光沢 */
  box-shadow:
    0 10px 25px rgba(255, 160, 0, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  width: 100%;
  max-width: 460px;
}
.ta-cta-btn-glass:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow:
    0 20px 40px rgba(255, 160, 0, 0.6),
    inset 0 2px 0 rgba(255, 255, 255, 0.6);
  filter: brightness(1.1);
}
.ta-btn-icon {
  margin-left: 15px;
  transition: transform 0.3s ease;
}
.ta-cta-btn-glass:hover .ta-btn-icon {
  transform: translateX(5px);
}

.ta-cta-sub {
  display: block;
  font-size: 0.9em;
  color: #888;
  margin-top: 25px;
}
body.dark-mode .ta-cta-sub {
  color: #aaa;
}

/* --- 追加：開発案内セクションのスタイル --- */
.ta-dev-section {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.1); /* 薄い区切り線 */
}
body.dark-mode .ta-dev-section {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.ta-dev-title {
  font-size: 1.1em;
  font-weight: bold;
  color: #555;
  margin-bottom: 15px;
}
body.dark-mode .ta-dev-title {
  color: #ddd;
}

.ta-dev-link {
  display: inline-block;
  color: #555;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 12px 30px;
  border-radius: 30px;
  font-size: 0.95em;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.5);
}
body.dark-mode .ta-dev-link {
  background: rgba(0, 0, 0, 0.3);
  color: #ccc;
  border-color: rgba(255, 255, 255, 0.3);
}
.ta-dev-link:hover {
  background: #fff;
  color: #333;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
body.dark-mode .ta-dev-link:hover {
  background: #eee;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {
  /* 1023px以下で画面下にモバイルメニューが出る場合の調整 */
  body {
    margin-top: 50px !important;
  }
}

/*834px以下*/
@media screen and (max-width: 834px) {
  .banner-container {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 0 24px;
  }
  .banner-container::-webkit-scrollbar {
    display: none;
  }
  .banner-container > * {
    flex: 0 0 90%;
    scroll-snap-align: center;
  }
  .coming-soon-wrapper img {
    width: 100%;
    height: auto;
  }

  body.dark-mode .mobile-footer-menu-buttons .menu-button .menu-button-in {
    color: #fff !important;
  }
}

@media screen and (max-width: 782px) {
  body {
    margin-top: 38px !important;
  }
}

/*480px以下*/
@media screen and (max-width: 480px) {
  .logo-header img {
    width: 200px;
  }
  .coming-soon-text {
    font-size: 1.3em;
  }

  .theme-toggle-btn {
    top: 100px; /* 上からの距離 */
    right: 20px;
  }
}