@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.8
*/

/************************************
** How to IT カラーパレット（全体最適化版）
** 目的：
** - body(#e9e9e9)基準で「白浮き」を抑える
** - ヘッダー／見出し／カード群の階調を揃える
** - グローバルナビ／ボタン／枠線を変数で統一
************************************/
:root{
  /* ===== ベース背景 ===== */
  --bg-body: #e9e9e9;          /* body 背景（基準） */
  --bg-main: #f3f3f3;          /* #main 背景（bodyより明るいが白に寄せない） */
  --bg-sub:  #f3f3f3;          /* widget/カード（bg-mainより僅かに締める） */

  /* 補助UI（青灰の主張を弱め、全体階調と整合させる） */
  --bg-soft: #efefef;          /* ナビhover/見出し帯/補助UI */
  --bg-soft-2:#e9e9e9;         /* アクティブ背景（強め） */

  --bg-footer-top:#ededed;     /* フッター上部 */
  --bg-footer-btm:#f3f3f3;     /* フッター下部 */
  --bg-table-th:#efefef;       /* テーブルth */

  /* ===== テキスト ===== */
  --text-main: #2f3a44;        /* 本文・見出し */
  --text-sub:  #4a5a68;        /* ナビ/フッター補助 */
  --text-muted:#666666;        /* 抜粋・補足 */
  --text-on-dark:#ffffff;      /* 暗背景上のテキスト（必要時のみ） */

  /* ===== ボーダー・区切り（「青灰」より階調優先で統一） ===== */
  --border-main:#cfd3d7;       /* 入力/タブ線 */
  --border-sub: #d6dade;       /* テーブル/カード枠 */
  --divider:    #cfd3d7;       /* リスト区切り線（薄） */

  /* ===== アクセント（How to Apps と共通） ===== */
  --accent-main:#f47c27;       /* 主要アクセント */
  --accent-sub: #ffa94d;       /* hover/強調 */
  --accent-pastel:#fbc4a7;     /* 補足色（淡） */

  /* ===== How to IT 主軸（ブルー/グレイ：濃度を少し上げる） ===== */
  --it-primary:#3f647d;        /* リンク/要所の青（濃度UP） */
  --it-primary-2:#2f4f63;      /* 線・枠（さらに濃い） */

  /* ===== 状態色 ===== */
  --success:#2f8c75;           /* 中立/ヒント系の線 */
  --success-soft:#9db7c6;      /* アイコンhover等（控えめ差し色） */
  --danger:#d93025;            /* 警告線 */
  --danger-bg:#fdecea;         /* 警告背景 */

  /* ===== 影 ===== */
  --shadow-soft: 0 0 14px rgba(0,0,0,0.035);
  --shadow-widget: 0 2px 6px rgba(0,0,0,0.055);

  /* ===== フォーカス ===== */
  --focus-ring: 0 0 0 2px rgba(244,124,39,0.25);

  /* ===== ヘッダー階調（変数化：後で微調整しやすい） ===== */
  --hdr-grad-top:#f2f2f2;
  --hdr-grad-mid:#e6e6e6;
  --hdr-grad-btm:#d8d8d8;
  --hdr-border:#cfcfcf;

  /* ===== 見出し階調（ヘッダーより一段弱い） ===== */
  --hd-grad-top:#f0f0f0;
  --hd-grad-mid:#e7e7e7;
  --hd-grad-btm:#dfdfdf;


/* ===== Footer grad: headerの逆方向 =====  */
  --ftr-grad-top: #f3f3f3;
  --ftr-grad-mid: #e6e6e6; 
  --ftr-grad-btm: #d8d8d8; 
  --ftr-border:   #cfcfcf; 
}

/************************************
** 全体共通設定
************************************/
body{
  font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
  color: var(--text-main);
  background-color: var(--bg-body);
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.entry-content{
  letter-spacing:normal;
}

html, body{ overflow-x: hidden; }

/************************************
** メインコンテンツのスタイル
************************************/
#main{
  background-color: var(--bg-main);
  color: var(--text-main);
  border-radius: 8px;
  padding: 24px;
  margin-top: 0 !important;
  padding-top: 1em !important;
  display: block;
  box-shadow: var(--shadow-soft);
  border: 1px solid color-mix(in srgb, var(--divider) 55%, transparent 45%);
}

main.site-main,
.content{
  margin-top: 0 !important;
  padding-top: 1em !important;
}

/************************************
** リンクの基本スタイル
************************************/
a{
  color: var(--it-primary);
  text-decoration: none;
}
a:hover{
  color: var(--accent-main);
  text-decoration: underline;
}

/************************************
** ヘッダーとナビゲーション
************************************/
#header-container{
  position: relative;
  z-index: 0;
}

#header-container::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height:100%;
  z-index:-1;

  background: linear-gradient(
    to bottom,
    var(--hdr-grad-top) 0%,
    var(--hdr-grad-mid) 50%,
    var(--hdr-grad-btm) 100%
  ) !important;

  border-bottom: 1px solid var(--hdr-border) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

/* 背景透明指定（実体背景は ::before に集約） */
#header,
#navi,
#header .header-in,
#header .header-container,
#navi-in{
  background: transparent !important;
}

#header .header-container{
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* ナビゲーション全体 */
#navi{
  z-index: 9999;
  position: relative;
}

#navi ul li{ position: relative; white-space: nowrap; }

#navi ul li a{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--it-primary) !important;
  padding: 12px 16px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
  border-radius: 6px;
}

#navi ul li a:hover{
  background-color: var(--bg-soft) !important;
  color: var(--accent-main) !important;
}

#navi ul li a::after{
  content:"";
  position:absolute;
  bottom:6px;
  left:0;
  width:0%;
  height:1px;
  background-color: var(--accent-main);
  transition: width 0.25s ease-in-out;
}
#navi ul li a:hover::after{ width:100%; }

/* アクティブページ */
#navi ul li.current-menu-item > a{
  background-color: var(--bg-soft-2) !important;
  border-bottom: 2px solid var(--accent-main);
  color: var(--text-main) !important;
}

/* サブメニュー無効化 */
.top-has-sub .fa-angle-down,
.sub-menu{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  height:0 !important;
  overflow:hidden !important;
  transition:none !important;
  animation:none !important;
}

/************************************
** 16) グローバルメニューのアイコン
************************************/

/* ===== グローバルメニュー共通 ===== */
.menu-windows > a,
.menu-android > a,
.menu-topics > a,
.menu-howtoapps > a{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  min-width:140px;
  padding:8px 12px;
  font-weight:bold;
  white-space:nowrap;
}

/* 共通 ::before */
.menu-windows > a::before,
.menu-android > a::before,
.menu-topics > a::before,
.menu-howtoapps > a::before{
  content:"";
  display:inline-block;
  flex-shrink:0;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

/* ===== Windows ===== */
.menu-windows > a::before{
  width:24px;
  height:24px;
  background-image:url('https://how-to-it.com/wp-content/uploads/2025/12/windows11-logo.png');
}

/* ===== Android ===== */
.menu-android > a::before{
  width:26px;
  height:26px;
  background-image:url('https://how-to-it.com/wp-content/uploads/2025/12/droid-icon.png');
}

/* ===== トピックス ===== */
.menu-topics > a::before{
  width:22px;
  height:22px;
  background-image:url('https://how-to-it.com/wp-content/uploads/2025/12/satellite-antenna-icon.png');
}

/* ===== How to Apps（てんとう虫） ===== */
.menu-howtoapps > a::before{
  width:22px;
  height:22px;
  background-image:url('https://how-to-it.com/wp-content/uploads/how-to-apps-icon.png');
}

/************************************
** ボタンのスタイル
************************************/
.button,
.wp-block-button__link{
  background-color: var(--accent-main);
  color: var(--text-on-dark);
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background-color .2s ease, color .2s ease;
}
.button:hover,
.wp-block-button__link:hover{
  background-color: var(--accent-sub);
  color: var(--text-on-dark);
}

/************************************
** H1と本文（.entry-content）の間隔調整
************************************/
.entry-title{ margin-bottom: 1.8em; }
.entry-content{ margin-top: 0 !important; }

/************************************
** タイトル前アイコンのスタイル
************************************/
.post-title::before,
.card-title::before{
  content:"\f058";
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  font-size:1.1em;
  color: var(--accent-main);
  margin-right:0.6em;
  vertical-align:middle;
}

/************************************
** 見出し（H2～H6）
************************************/
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6{
  font-family:'M PLUS Rounded 1c','Noto Sans JP',sans-serif;
  color: var(--text-main);
  padding-left: 2.6em;
  margin: 2.6em 0 1.5em;
  border-radius: 8px;
  position: relative;
  line-height: 1.55;
  border: none !important;
}

/* アイコン共通 */
.entry-content h2::before,
.entry-content h3::before,
.entry-content h4::before,
.entry-content h5::before{
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  font-size:1.05em;
  color: var(--accent-main);
  position:absolute;
  left:0.85em;
  top:50%;
  transform:translateY(-50%);
  width:1.0em;
  text-align:center;
}

/* ===== h2 ===== */
.entry-content h2{
  background: linear-gradient(to bottom, var(--hd-grad-top) 0%, var(--hd-grad-mid) 55%, var(--hd-grad-btm) 100%);
  border: 1px solid rgba(0,0,0,0.055);
  border-left: 8px solid var(--accent-main) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.045);
  padding: 0.8em 2.4em;
  font-size: 1.7em;
  font-weight: 700;
}
.entry-content h2::before{ content:"\f058"; }

/* ===== h3 ===== */
.entry-content h3{
  background: linear-gradient(to bottom, #efefef 0%, #e6e6e6 55%, #dedede 100%);
  border: 1px solid rgba(0,0,0,0.05);
  border-left: 6px solid var(--accent-main) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  padding: 0.6em 2.3em;
  font-size: 1.5em;
  font-weight: 650;
}
.entry-content h3::before{ content:"\f08d"; }

/* ===== h4 ===== */
.entry-content h4{
  background: linear-gradient(to bottom, #eeeeee 0%, #e4e4e4 55%, #dcdcdc 100%);
  border: 1px solid rgba(0,0,0,0.045);
  border-left: 5px solid var(--accent-main) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.035);
  padding: 0.5em 2.2em;
  font-size: 1.4em;
  font-weight: 650;
}
.entry-content h4::before{ content:"\f0eb"; }

/* ===== h5 ===== */
.entry-content h5{
  background: linear-gradient(to bottom, #ededed 0%, #e3e3e3 55%, #dbdbdb 100%);
  border: 1px solid rgba(0,0,0,0.04);
  border-left: 4px solid var(--accent-main) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  padding: 0.35em 2.2em;
  font-size: 1.3em;
  font-weight: 650;
}
.entry-content h5::before{ content:"\f05a"; }

/* h6は現状維持 */
.entry-content h6{
  font-size:24px;
  font-weight:700;
  color: var(--text-main);
  padding-top:40px;
}
.entry-content h6::before{
  color: var(--accent-main);
  font-family:"Font Awesome 5 Free";
  content:"\f0c1";
  margin-right:10px;
}

/* ホバー：色変化を抑制 */
.entry-content h2:hover::before,
.entry-content h3:hover::before,
.entry-content h4:hover::before,
.entry-content h5:hover::before,
.entry-content h6:hover::before{
  animation: icon-bounce 0.4s ease;
  color: rgba(244,124,39,0.65) !important;
  transition: color 0.3s ease;
}
@keyframes icon-bounce{
  0%{ transform: translateY(-50%) scale(1); }
  30%{ transform: translateY(-55%) scale(1.15); }
  50%{ transform: translateY(-50%) scale(0.95); }
  100%{ transform: translateY(-50%) scale(1); }
}

/************************************
** タブメニュー
************************************/
@media (min-width: 1024px){
  .child-category-tabs{
    max-width: 700px;
    margin: 1.5em auto 1em;
  }
}

/* タブコンテナ */
.child-category-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  margin-top:1.5em;
  margin-bottom:1em;
  padding:20px;
  list-style:none;
  justify-content:center;
  background-color: var(--bg-soft);
  border: 1px solid var(--divider);
  border-radius: 10px;
  box-shadow: none;
}

/* タブボタン */
.child-category-tabs button{
  border: 1px solid var(--divider);
  background-color: var(--bg-main);
  padding:10px 20px;
  border-radius: 8px;
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  display:flex;
  align-items:center;
  gap:0.6em;
  white-space:normal;
  color: var(--text-main);
}
.child-category-tabs button:hover{
  background-color: var(--bg-soft-2);
  color: var(--accent-main);
  border-color: color-mix(in srgb, var(--it-primary) 35%, var(--divider) 65%);
}
.child-category-tabs button.active{
  background-color: var(--bg-soft-2);
  color: var(--text-main);
  box-shadow: inset 0 -2px 0 var(--accent-main);
  border-color: color-mix(in srgb, var(--it-primary-2) 45%, var(--divider) 55%);
}

/* タブアイコン */
.category-windows-install::before,
.category-windows-upgrade::before,
.category-windows-backup::before,
.category-windows-customize::before,
.category-windows-settings::before,
.category-windows-troubleshooting::before,
.category-windows-basic-knowledge::before,
.category-windows-alternative-os::before,
.category-android-os::before,
.category-degoogle-os::before,
.category-android-x86::before,
.category-amazon-fire::before,
.category-chrome-os::before,
.category-topics-security-privacy::before,
.category-topics-app-selection-guide::before,
.category-topics-account-license::before,
.category-topics-hardware-firmware::before,
.category-topics-ai-literacy::before,
.category-topics-digital-ethics-literacy::before,
.category-topics-software-industry-trends::before
{
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  margin-right:0.4em;
  display:inline-block;
}
/* Win */
.category-windows-upgrade::before{ content:"\f0aa"; }
.category-windows-install::before{ content:"\f019"; }
.category-windows-customize::before{ content:"\f1de"; }
.category-windows-troubleshooting::before{ content:"\f7d9"; }
.category-windows-basic-knowledge::before{ content:"\f518"; }
.category-windows-settings::before{ content:"\f085"; }
.category-windows-backup::before{ content:"\f0a0"; }
.category-windows-alternative-os::before{
  content:"\f17c";
  font-family:"Font Awesome 5 Brands";
  font-size:1.2em;
  vertical-align:middle;
  margin-right:0.4em;
}
/* Android */
.category-android-os::before{
  content:"\f17b";
  font-family:"Font Awesome 5 Brands";
  font-weight:900;
}
.category-degoogle-os::before{ content:"\f21b"; }
.category-android-x86::before{ content:"\f108"; }
.category-amazon-fire::before{ content:"\f06d"; }
.category-chrome-os::before{
  content:"\f268";
  font-family:"Font Awesome 5 Brands";
  font-weight:900;
}
/* Topics */
.category-topics-security-privacy::before{ content:"\f3ed"; }
.category-topics-app-selection-guide::before{ content:"\f005"; }
.category-topics-account-license::before{ content:"\f09d"; }
.category-topics-hardware-firmware::before{ content:"\f2db"; }
.category-topics-ai-literacy::before{ content:"\f544"; }
.category-topics-google-enshittification::before{
  content:"\f1a0";
  font-family:"Font Awesome 5 Brands";
  font-weight:900;
}
.category-topics-digital-ethics-literacy::before{ content:"\f05a"; }
.category-topics-software-industry-trends::before{ content:"\f1fe"; }

.child-category-tabs button + button{ margin-left:0; }

/************************************
** 目次・用語解説・補助UI
************************************/
/* Cocoonの基本枠色を無効化 */
:root{ --cocoon-basic-border-color: transparent !important; }

/* 目次：枠だけ（背景なし） */
.toc-content{
  background: transparent !important;
  border: 2px solid var(--it-primary-2) !important;
  color: var(--text-main);
  border-radius: 10px;
  padding: 1.5em;
  margin-bottom: 1.5em;
}

/* ===== 補助UI（枠内） ===== */
.glossary-title,
.pseudo-tabs,
.child-category-tabs{
  background-color: var(--bg-soft);
  border: 1px solid var(--divider);
  box-shadow: 0 1px 0 rgba(0,0,0,0.03); 
}

/* 目次タイトル */
.toc-title{
  font-weight: 700;
  font-size: 1.05em;
  color: var(--text-main);
  margin-bottom: 0.8em;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:0.6em;
}
.toc-title::before{
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  content:"\f5a0";
  color: var(--accent-main);
}

/* 目次リスト */
.toc-list{ margin:0; padding:0; }
.toc-list li{
  list-style:none;
  margin:0.55em 0;
  padding-left:1.6em;
  position:relative;
  line-height:1.65;
}
.toc-list li::before{
  content:"•";
  color: var(--it-primary);
  position:absolute;
  left:0;
  top:0.05em;
  font-size:1.1em;
  line-height:1;
}
.toc-list li a{
  color: var(--text-main);
  text-decoration:none;
}
.toc-list li a:hover{
  text-decoration:underline;
  color: var(--accent-main);
}

/************************************
** カテゴリーメニューのナビゲーションテキスト
************************************/
.child-category-guide,
.category-navigation-text{
  font-weight:700;
  font-size:1rem;
  color: var(--text-main);
  margin: 2.5em 0;
  display:flex;
  align-items:center;
  gap:0.5em;
  padding-left:0;
}
.child-category-guide i,
.category-navigation-text i{
  margin-right:0.2em;
  color: var(--accent-main);
  font-size:1.1em;
  vertical-align:middle;
}

/************************************
** タブコンテンツの初期設定
************************************/
.tab-content{ display:none; padding:0; margin:0; }
.tab-content.active,
.tab-content[data-category-id]{ display:block; }
.ajax-post-list{ list-style:none; padding:0; margin:0; color: var(--text-main); }

/************************************
** プレースホルダー
************************************/
.loading-placeholder{
  color: var(--text-muted);
  font-style: italic;
  margin: 0.5em 0;
}

/************************************
** モバイル対応
************************************/
@media (max-width: 768px){
  .child-category-tabs{ flex-direction: column; padding: 0; }
  .child-category-tabs button{ width: 100%; }
  .footer-category-list{ grid-template-columns: 1fr; gap: 0.6em; }
  .footer-category-block h3{ font-size: 1.1em; }
  .footer-category-container{
	  background: linear-gradient(
    to bottom,
    var(--ftr-grad-top) 0%,
    var(--ftr-grad-mid) 55%,
    var(--ftr-grad-btm) 100%
  );
  border: 1px solid var(--ftr-border);
}
}

/************************************
** グローバルメニュー選択時、ドロップダウンメニューのラベル非表示
************************************/
.grandchild-label{ display:none; }
.js-active .grandchild-label{ display:block; }

/************************************
** 共通アイコンカラー調整（※目次のリストマーカーは除外）
************************************/
.entry-content h2::before,
.entry-content h3::before,
.entry-content h4::before,
.entry-content h5::before,
.entry-content h6::before,
.grandchild-label i,
.tab-btn::before{
  color: var(--accent-main);
}
/* 目次マーカーは it-primary を維持 */
.toc-list li::before{ color: var(--it-primary) !important; }

/************************************
** サイドバー（How to IT：ライト）
************************************/
#sidebar,
.sidebar{
  background-color: var(--bg-main);
  color: var(--text-main);
  padding: 1em;
}

.sidebar .widget,
#sidebar .widget{
  background-color: var(--bg-sub);
  border: 1px solid var(--border-sub);
  border-radius: 8px;
  padding: 1em;
  margin-bottom: 1.5em;
  box-shadow: var(--shadow-widget);
}

.sidebar .widget-title,
#sidebar .widget-title{
  background-color: var(--bg-soft);
  color: var(--text-main);
  font-weight:700;
  font-size:1.05em;
  padding:0.6em 1em;
  border-left:5px solid var(--accent-main);
  margin:-1em -1em 1em;
  border-radius: 6px 6px 0 0;
  display:flex;
  align-items:center;
  border-bottom: 1px solid color-mix(in srgb, var(--divider) 60%, transparent 40%);
}

.sidebar .widget-title::before,
#sidebar .widget-title::before{
  content:"\f054";
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  color: var(--accent-main);
  margin-right:0.6em;
  font-size:1em;
}

.sidebar a,
#sidebar a{
  color: var(--it-primary);
  text-decoration:none;
}
.sidebar a:hover,
#sidebar a:hover{
  color: var(--accent-main);
  text-decoration:underline;
}

.sidebar ul,
#sidebar ul{ padding-left: 1.2em; }
.sidebar ul li{
  margin-bottom:0.6em;
  color: var(--text-main);
}
.sidebar img{
  display:block;
  max-width:100%;
  height:auto;
  margin:0.5em auto;
  border-radius:4px;
}

/************************************
** フッターメニュー
************************************/
.footer-category-container{
  display:flex;
  flex-wrap:wrap;
  gap:1.2em;
  margin-bottom:2em;
  background: linear-gradient(to bottom, var(--bg-footer-top), var(--bg-footer-btm));
  padding: 1.5em;
  border-radius: 10px;
  justify-content: space-around;
  border: 1px solid color-mix(in srgb, var(--divider) 55%, transparent 45%);
}

.footer-category-block h3{
  font-size:1.05em;
  color: var(--text-main);
  margin-bottom:0.6em;
  border-left:4px solid var(--accent-main);
  padding-left:0.6em;
}

.footer-category-list{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:0.8em;
  padding-left:0;
  margin-bottom:1.5em;
  list-style:none;
}

.footer-category-list li{
  font-size:0.85em;
  color: var(--text-sub) !important;
}
.footer-category-list li a{
  color: var(--text-sub) !important;
  text-decoration:none;
}
.footer-category-list li a:hover{
  color: var(--accent-sub) !important;
  text-decoration:underline;
}
.footer-category-list li i{
  margin-right:0.4em;
  color: var(--accent-main);
}
.footer .fa-linux{
  background-color: var(--accent-main);
  color: var(--text-on-dark);
  padding:0.1em;
  border-radius:50%;
}

/************************************
** リスト（新着・更新、人気記事、カテゴリ共通）
************************************/
.post-list,
.category-posts-list,
.popular-posts-30days{
  list-style-type:none;
  padding:0;
  margin:0;
}

.post-list > li,
.category-posts-list > li,
.popular-posts-30days > li{
  display:flex;
  align-items:flex-start;
  padding-top:1em;
  margin-bottom:1em;
  border-bottom: 1px solid var(--divider);
}

.post-list > li:first-child,
.category-posts-list > li:first-child,
.popular-posts-30days > li:first-child{
  border-top:none;
}

.post-list > li .post-title,
.category-posts-list > li .post-title,
.popular-posts-30days > li .post-title{
  font-weight:600;
  font-size:1.2em;
  color: var(--accent-main);
  margin:0;
}
.post-title::before{ content:none !important; }

.post-list > li .post-excerpt,
.category-posts-list > li .post-excerpt,
.popular-posts-30days > li .post-excerpt{
  color: var(--text-muted);
  font-size:0.9em;
  margin-top:0.3em;
}

.post-list > li img,
.category-posts-list > li img,
.popular-posts-30days > li img{
  width:60px;
  height:60px;
  margin-right:15px;
  border-radius:8px;
  object-fit:cover;
  flex-shrink:0;
}
.post-list > li .post-info{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

/************************************
** トップページタブボタン
************************************/
ul.tab-label-group{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  width:100%;
  margin-bottom:0;
  padding-left:0;
  margin-top:2.5em;
}

ul.tab-label-group li.tab-label{
  padding:0.8em 1.6em;
  font-size:1.1em;
  font-weight:700;
  border: 1px solid var(--border-sub);
  border-radius: 10px 10px 0 0;
  background-color: var(--bg-main);
  color: var(--text-main);
  margin-right:0;
  cursor:pointer;
  transition: background-color .2s ease, color .2s ease;
  list-style:none;
  border-bottom:none;
  flex: 1 1 auto;
  text-align:center;
}
ul.tab-label-group li.tab-label.is-active{
  background-color: var(--bg-soft-2);
  color: var(--text-main);
  box-shadow: inset 0 -2px 0 var(--accent-main);
}

.tab-content-group{
  border-top: 3px solid var(--it-primary-2);
  border-bottom:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  padding-top:1em;
  margin-top:0;
}

/************************************
** 検索・セレクト・フォーム
************************************/
.search-form{
  margin:1.2em auto 1em;
  max-width:640px;
  padding:0 1em;
}
.search-form input[type="search"]{
  width:100%;
  padding:12px 16px;
  font-size:1em;
  border:1px solid #ccc;
  border-radius:10px;
  background-color:#fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}
.search-form input[type="search"]:focus{
  border-color:#1abc9c;
  box-shadow: 0 0 0 2px rgba(26,188,156,0.2);
  outline:none;
}
.search-hint{
  font-size:0.9em;
  color:#666;
  margin-top:0.5em;
  text-align:center;
  line-height:1.5;
}

/************************************
** ブロック間の間隔
************************************/
.my-custom-narrow-margin{ margin-bottom:0.8em !important; }

/************************************
** インデント
************************************/
.indent-3em{ padding-left:3em; text-indent:0; }
.indent-2em{ padding-left:2em; text-indent:0; }

/************************************
** 用語解説ボックス
************************************/
.glossary-title{
  position:relative;
  background: var(--bg-soft);
  border: 1px solid var(--divider);
  border-radius:10px;
  padding:0.5em 1.2em;
  margin:2em 0 1em 0;
  font-size:0.9em;
  font-weight:700;
  color: var(--text-main);
  display:inline-block;
}
.glossary-title::after{
  content:"";
  position:absolute;
  bottom:-20px;
  left:0.8em;
  width:0;
  height:0;
  border:10px solid transparent;
  border-top-color: var(--divider);
}

/************************************
** ボックススタイル（透過調整版）
************************************/
.entry-content .is-style-sticky-green.has-box-style{
  background-color: rgba(47, 140, 117, 0.12) !important;
  border-left: 4px solid var(--success) !important;
  color: var(--text-main) !important;
  padding:1.2em;
  margin:1.5em 0;
  border-radius:8px;
  font-size:0.95em;
  line-height:1.6;
}
.entry-content .is-style-sticky-red.has-box-style{
  background-color: rgba(217, 48, 37, 0.10) !important;
  border-left: 4px solid var(--danger) !important;
  color: var(--text-main) !important;
  padding:1.2em;
  margin:1.5em 0;
  border-radius:8px;
  font-size:0.95em;
  line-height:1.6;
}
.entry-content .label-box.label-box-green,
.entry-content .is-style-blank-box-green{
  border: 4px solid rgba(47, 140, 117, 0.55) !important;
  background-color: rgba(47, 140, 117, 0.08) !important;
  color: var(--text-main) !important;
  padding:1.2em;
  margin:1.5em 0;
  border-radius:8px;
  font-size:0.95em;
  line-height:1.6;
}

/************************************
** 文字数カウンタ
************************************/
.char-count-widget{
  background: var(--bg-sub);
  border: 1px solid var(--border-sub);
  border-radius:10px;
  padding:1em;
  margin-bottom:1.5em;
  color: var(--text-main);
  font-size:0.95em;
  line-height:1.5;
  box-shadow: var(--shadow-widget);
}
.char-count-widget label{
  display:block;
  margin-bottom:0.5em;
  font-weight:700;
}
.char-count-widget textarea{
  width:100%;
  padding:0.6em;
  border: 1px solid var(--border-main);
  border-radius:8px;
  font-size:0.95em;
  box-sizing:border-box;
  min-height:6em;
}
.char-count-widget .char-count-result{
  margin-top:0.8em;
  font-weight:700;
  color: var(--accent-main);
  display:flex;
  align-items:center;
  gap:0.5em;
}
.char-count-widget .char-count-result::before{
  content:"\f058";
  font-family:"Font Awesome 5 Free";
  font-weight:900;
}

/************************************
** アスペクト比計算機
************************************/
.aspect-ratio-widget{
  background: var(--bg-sub);
  border: 1px solid var(--border-sub);
  border-radius:10px;
  padding:1em;
  margin-bottom:1.5em;
  color: var(--text-main);
  font-size:0.95em;
  line-height:1.5;
  box-shadow: var(--shadow-widget);
}
.aspect-ratio-widget h3{ margin-top:0; }
.aspect-ratio-note{
  font-size:0.9em;
  color: var(--accent-main);
  margin-bottom:0.8em;
  font-weight:700;
}
.aspect-ratio-widget label{
  display:block;
  margin-bottom:0.5em;
  font-weight:700;
}
.aspect-ratio-widget input[type="number"]{
  width:100%;
  padding:0.4em;
  margin-top:0.2em;
  border: 1px solid var(--border-main);
  border-radius:8px;
  font-size:0.95em;
  box-sizing:border-box;
}
.aspect-ratio-widget button{
  background: var(--accent-main);
  color: var(--text-on-dark);
  border:none;
  border-radius:8px;
  padding:0.6em 1.2em;
  cursor:pointer;
  margin-top:0.8em;
  transition: background-color .2s ease;
}
.aspect-ratio-widget button:hover{ background: var(--accent-sub); }
.aspect-ratio-widget .result{
  margin-top:1em;
  font-weight:700;
  color: var(--accent-main);
  display:flex;
  align-items:center;
  gap:0.5em;
}
.aspect-ratio-widget .result::before{
  content:"\f058";
  font-family:"Font Awesome 5 Free";
  font-weight:900;
}

/************************************
** ローマ字変換
************************************/
.romanizer-widget input.romanizer-input{
  width:100%;
  padding:0.6em;
  margin-top:0.5em;
  box-sizing:border-box;
  font-size:0.95em;
  border: 1px solid var(--border-main);
  border-radius:8px;
}
.romanizer-widget label{
  color: var(--text-main);
  display:block;
  font-weight:700;
  margin-bottom:0.4em;
}
.romanizer-button-wrapper{
  margin-top:1.0em;
  margin-bottom:1.2em;
}
.romanizer-button-wrapper button{
  padding:0.4em 0.8em;
  background-color: var(--accent-main);
  color: var(--text-on-dark);
  border:none;
  border-radius:8px;
  font-size:0.9em;
  cursor:pointer;
}
.romanizer-result{
  display:flex;
  align-items:center;
  margin-top:1em;
  font-weight:700;
  color: var(--text-main);
  gap:0.5em;
}
.romanizer-result .icon-label::before{
  content:"\f058";
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  margin-right:0.3em;
  color: var(--accent-main);
}
.romanizer-result .icon-label{ font-weight:700; }
.romanizer-widget-note{
  font-size:0.9em;
  color: var(--text-main);
  margin-bottom:0.8em;
}

/************************************
** クリップフレーム
************************************/
.is-style-clip-box{
  background-color: var(--bg-table-th);
  border-radius:10px;
  padding:0.8em;
  padding-left:1.0em;
  box-sizing:border-box;
}

/************************************
** Smart Slider3
************************************/
.kb-table-container .kb-table-data p{ margin:0; }
.entry-content .n2-ss-slider{ margin-bottom:2em !important; }

/************************************
** Kadenceの調整
************************************/
.kt-tabs-title-list{ justify-content: center !important; }
.wp-block-kadence-iconlist{ padding-left:1em; text-indent:0; }
.kt-tab-inner-content-inner{ color: var(--text-main); }

/************************************
** 問い合わせの Blueskyアイコン
************************************/
.bluesky-icon{
  height:1em !important;
  width:auto !important;
  vertical-align:text-bottom;
  margin-right:0.2em;
  display:inline-block;
}

/************************************
** エディタの見出しカラー調整
************************************/
.editor-styles-wrapper h2,
.editor-styles-wrapper h3{
  background-color: var(--bg-soft);
  color: var(--text-main);
}

/************************************
** WordPress管理画面で自動保存メッセージを非表示化
************************************/
.components-notice.is-warning{ display:none !important; }

/************************************
** クラシックエディタの Cocoon マーカー無効化
************************************/
.marker-yellow,
.marker-pink,
.marker-green,
.marker-blue,
.marker-orange,
.marker-gray,
.marker-red{
  background:none !important;
  color:inherit !important;
  padding:0 !important;
  border:none !important;
  box-shadow:none !important;
}

/************************************
** AdSense 広告の中央寄せ
************************************/
.ads-before-3rd-h2{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:2em 0;
  text-align:center;
}

/************************************
** カラー変更（記事内の直指定色を上書き）
************************************/
.entry-content [style*="color: #ff0000"],
.entry-content [style*="color: #FF0000"],
.entry-content [style*="color: rgb(255, 0, 0)"],
.entry-content [style*="color: red"]{
  color: var(--accent-main) !important;
}
.entry-content [style*="color: #0000ff"],
.entry-content [style*="color: #0000FF"],
.entry-content [style*="color: rgb(0, 0, 255)"],
.entry-content [style*="color: blue"]{
  color: var(--it-primary) !important;
}

/* blockquote / preformatted */
.wp-block-preformatted,
.wp-block-quote{
  color: var(--text-main);
  border-radius:10px;
}

/* Cocoonのインフォメーションボックス（情報）用フォントカラー指定 */
.information-box.common-icon-box{ color: var(--text-main); }

/************************************
** WP Show Posts
************************************/
.wp-show-posts .wp-show-posts-entry-title{
  font-size:22px;
  font-weight:700;
}
.wp-show-posts-entry-summary{
  font-size:0.8em;
  border-bottom: 1px solid var(--border-main);
}