@charset "UTF-8";

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

/************************************
** 1) 基本変数・テーマ上書き
************************************/
/* ボーダー変数を強制的に無効化 */
:root{
  --cocoon-basic-border-color: transparent !important;
}

/************************************
** 2) 全体共通（タイポグラフィ・ベース）
************************************/
body{
  font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
  color: #2c3e50;
  line-height: 1.6;
}


/************************************
** 4) ヘッダーとナビゲーション
************************************/
#header-container{
  position: relative;
  z-index: 0;
}
#header-container::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height:100%;
  background: linear-gradient(to bottom, #ffffff 0%, #99d6c3 100%);
  z-index:-1;
  border-bottom: 1px solid #a3bbb4;
  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; }
#navi ul li a{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#354b5e;
  padding:12px 16px;
  font-size:1rem;
  line-height:1.5;
  font-weight:bold;
  text-decoration:none;
  transition: all 0.3s ease;
}
#navi ul li a:hover{
  background-color:#e5f5f1;
  color:#f47c27;
}
#navi ul li a::after{
  content:"";
  position:absolute;
  bottom:6px;
  left:0;
  width:0%;
  height:1px;
  background-color:#f47c27;
  transition: width 0.25s ease-in-out;
}
#navi ul li a:hover::after{ width:100%; }

#navi ul li.current-menu-item > a{
  background-color:#cbe1dc;
  font-weight:bold;
  border-bottom: 2px solid #f47c27;
}

/* サブメニュー無効化 */
.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;
}

/************************************
** 5) レイアウト（メイン・余白）
************************************/
#main{
  background-color:#f0f5f4;
  box-shadow: 0 0 15px rgba(0,0,0,0.06);
  border-radius:8px;
  padding:24px;
  margin-top:0;
}
main.site-main,
#main,
.content{
  margin-top:0 !important;
  padding-top:1em !important;
}

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

/************************************
** 6) リンク（基本）
************************************/
a{
  color:#f47c27;
  text-decoration:none;
}
a:hover{
  color:#fbc4a7;
  text-decoration:underline;
}

/************************************
** 7) 見出し（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:#2c3e50;
  line-height:1.5;
  margin:2em 0 1em;
  padding-left:2.4em;
  border-radius:4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  background-clip: padding-box;
  border:none !important;
  outline:none !important;
  position:relative;
}

/* 見出しアイコン */
.entry-content h2::before,
.entry-content h3::before,
.entry-content h4::before,
.entry-content h5::before,
.entry-content h6::before{
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  font-size:1.1em;
  color:#f47c27;
  position:absolute;
  left:0.8em;
  top:50%;
  transform: translateY(-50%);
}

/* h2 */
.entry-content h2{
  font-size:1.6em;
  font-weight:700;
  background: linear-gradient(to right, #e3f7f3, #eafaf7);
  border-left: 8px solid #f47c27 !important;
  padding:0.8em 2.4em;
  margin-bottom:1.8em;
}
.entry-content h2::before{ content:"\f058"; }

/* h3 */
.entry-content h3{
  font-size:1.4em;
  font-weight:600;
  background: linear-gradient(to right, #eafaf7, #f2fdfb);
  border-left: 6px solid #f47c27 !important;
  padding:0.6em 2.3em;
  margin-bottom:1.5em;
}
.entry-content h3::before{ content:"\f08d"; }

/* h4 */
.entry-content h4{
  font-size:1.2em;
  font-weight:650;
  background: linear-gradient(to right, #f2fdfb, #f8fefc);
  border-left: 5px solid #f47c27 !important;
  padding:0.5em 2.2em;
  margin-bottom:1.2em;
}
.entry-content h4::before{ content:"\f0eb"; }

/* h5 */
.entry-content h5{
  font-size:1.05em;
  background: linear-gradient(to right, #f6fefc, #fcfefd);
  border-left: 3px solid #f47c27 !important;
  padding: 0.35em 2.2em;
  font-weight:650;
  margin-bottom:1.0em;
}
.entry-content h5::before{ content:"\f05a"; }

/* h6 */
.entry-content h6{
  font-size:2em;
  background: linear-gradient(to right, #fbfefc, #ffffff);
  border-left: 1px dotted #f47c27 !important;
}
.entry-content h6::before{ content:"\f249"; }

/* 見出しホバーアニメーション */
.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:#ffa94d;
  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); }
}

/* フォントサイズ */
.font-10pt{ font-size:10pt; }

/************************************
** 8) カード（カテゴリ記事リスト）
************************************/
.card-post-grid.card-post-list{ display:block; }

card-post.card-post-list{
  display:flex;
  align-items:flex-start;
}

.card-post{
  display:flex;
  align-items:flex-start;
  gap:16px;
  border:1px solid #ccc;
  border-radius:6px;
  padding:12px;
  margin-bottom:1.5em;
  background:#fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.card-thumb img{
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:4px;
}
.card-body{
  flex:1;
  padding:0;
}
.card-title{
  margin:0 0 0.5em;
  font-size:1.1em;
}
.card-excerpt{
  font-size:0.9em;
  color:#555;
}

/************************************
** 9) タブUI（カテゴリ内タブ）
************************************/
.child-category-guide{
  font-size:1rem;
  font-weight:bold;
  color:#2c3e50;
  margin-bottom:1.0em;
  padding-left:0.2em;
  text-align:left;
}
.child-category-guide i{
  margin-right:0.4em;
  color:#f47c27;
  font-size:1.1em;
  vertical-align:middle;
}

.child-category-tabs{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:12px;
  row-gap:1.2em;
  margin:0 0 2em;
  justify-content:flex-start;
}

.tab-btn{
  background: linear-gradient(to bottom, #99d6c3 0%, #ffffff 100%);
  border:none;
  border-radius:6px;
  padding:10px 16px;
  border-bottom: 2px solid transparent;
  font-size:1rem;
  color:#2c3e50;
  cursor:pointer;
  transition: all 0.2s ease;
}
.tab-btn:hover{
  background:#e5f5f1;
  color:#f47c27;
}
.tab-btn.active{
  background:#cbe1dc;
  font-weight:bold;
  border-bottom: 2px solid #f47c27;
}

.tab-content{
  display:none;
  animation: fadeIn 0.2s ease-in-out;
}
.tab-content.active{ display:block; }

@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

.tab-btn::before{
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  margin-right:0.5em;
  display:inline-block;
}

/************************************
** 10) カテゴリーページ（導入文）
************************************/
.category-title{ margin-bottom:30px; }
.category-intro{
  margin-top:12px;
  margin-bottom:30px;
}
.category-intro p{
  margin:0;
  line-height:1.7;
}

/************************************
** 11) フッター（カテゴリ一覧・もっと見る）
************************************/
/* フッターメニュー（How to Apps） */
.tab-content.ft-active{ display:block; }

.footer-category-container{
  display:flex;
  flex-wrap:wrap;
  gap:2em;
  margin-bottom:2em;
  background: linear-gradient(to bottom, #e0f4ee, #f8f8f8);
  padding:2em;
  border-radius:8px;
  justify-content:flex-start;
}
.footer-windows{ justify-content:flex-start !important; }
.footer-android{ justify-content:flex-start !important; }

.footer-category-block h3{
  font-size:0.95em;
  color:#2c3e50;
  margin-bottom:0.6em;
  border-left: 4px solid #f47c27;
  padding-left:0.9em !important;
  box-sizing: content-box;
  text-align:left;
}

.footer-category-list{
  display:flex;
  flex-direction:column;
  gap:0.4em;
  padding-left:0;
  margin-bottom:1.5em;
  list-style:none;
  text-align:left;
}
.footer-category-list li{
  font-size:0.8em;
  color:#354b5e !important;
  display:flex !important;
  align-items:center;
  text-align:left;
}
.footer-category-list li a{
  color:#354b5e !important;
  text-decoration:none;
}
.footer-category-list li a:hover{
  color:#ffa94d !important;
  text-decoration:underline;
}
.footer-category-list li i{
  margin-right:0.4em;
  color:#f47c27;
}

/* 折りたたみ（A） */
.footer-category-list li.collapsed{ display:none; }
.footer-category-list.expanded li.collapsed{ display:flex; }
.footer-category-list li:last-child{ display:block !important; }

/* toggle button（A） */
.toggle-button{
  background:none;
  border:none;
  color:#1abc9c;
  cursor:pointer;
  font-size:0.9em;
  margin-top:0.4em;
  padding:0;
}

/* フッターのもっと見る（B：同セレクタ再定義） */
.footer-category-list li{
  display:none !important;
  list-style:none;
}
.footer-category-list:not(.expanded) li:nth-child(1),
.footer-category-list:not(.expanded) li:nth-child(2){
  display:flex !important;
  align-items:center;
}
.footer-category-list.expanded li{
  display:flex !important;
  align-items:center;
}
.footer-category-list li:last-child{
  display:block !important;
}

/* ボタン（B：同セレクタ再定義） */
.toggle-button{
  background:none;
  border:none;
  color:#1abc9c;
  cursor:pointer;
  font-size:0.9em;
  margin-top:0.4em;
  padding:0;
}
.toggle-button::before{
  content:"" !important;
  display:none !important;
}

/************************************
** 12) ボックススタイル
************************************/
.entry-content .is-style-sticky-green.has-box-style{
  background-color:#d6f0e7 !important;
  border-left: 4px solid #2c3e50 !important;
  color:#2c3e50 !important;
  padding:1.2em;
  margin:1.5em 0;
  border-radius:6px;
  font-size:0.95em;
  line-height:1.6;
}

.entry-content .is-style-sticky-red.has-box-style{
  background-color:#fdecea !important;
  border-left: 4px solid #d93025 !important;
  color:#2c3e50 !important;
  padding:1.2em;
  margin:1.5em 0;
  border-radius:6px;
  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 #99d6c3 !important;
}

/************************************
** 13) ユーティリティ（インデント・余白）
************************************/
.indent-3em{ padding-left:3em; text-indent:0; }
.indent-2em{ padding-left:2em; text-indent:0; }

.my-custom-narrow-margin{ margin-bottom:0.8em !important; }

/************************************
** 14) サイドバー
************************************/
#sidebar,
.sidebar{
  background-color:#f0f5f4;
  color:#666666;
  padding:1em;
}

/* ウィジェットボックス */
.sidebar .widget,
#sidebar .widget{
  background-color:#f0f5f4;
  border:1px solid #ddd;
  border-radius:6px;
  padding:1em;
  margin-bottom:1.5em;
  box-shadow:none;
}

/* ウィジェットタイトル */
.sidebar .widget-title,
#sidebar .widget-title{
  background:none;
  color:#2c3e50;
  font-weight:bold;
  font-size:1.05em;
  padding:0.6em 1em;
  border-left: 4px solid #99d6c3;
  margin:-1em -1em 1em;
  border-radius:4px 4px 0 0;
  display:flex;
  align-items:center;
}

/* タイトル左アイコン */
.sidebar .widget-title::before,
#sidebar .widget-title::before{
  content:"\f054";
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  color:#f47c27;
  margin-right:0.6em;
  font-size:1em;
}

/* リンク */
.sidebar a,
#sidebar a{
  color:#f47c27;
  text-decoration:none;
}
.sidebar a:hover,
#sidebar a:hover{
  color:#fbc4a7;
  text-decoration:underline;
}

/* リスト */
.sidebar ul,
#sidebar ul{ padding-left:1.2em; }
.sidebar ul li{
  margin-bottom:0.6em;
  color:#354b5e;
}

/* 画像 */
.sidebar img{
  display:block;
  max-width:100%;
  height:auto;
  margin:0.5em auto;
  border-radius:4px;
}

/************************************
** 15) Windows / Android 切り替え（フッター等）
************************************/
.category-tabs{
  display:flex;
  gap:0.5em;
  margin:0 0 1em 0;
  padding-left:0.4em;
  list-style:none;
}
.category-tabs li{
  cursor:pointer;
  padding:0.6em 1.2em;
  background:#f0f5f4;
  border-radius:8px;
  font-weight:bold;
  color:#2c3e50;
  transition: background 0.2s;
}
.category-tabs li.ft-active{
  background:#2c3e50;
  color:#ffffff;
}
.category-tabs li:hover{ background:#e5f5f1; }

/************************************
** 16) グローバルメニューのアイコン
************************************/
/* Windows・Androidメニュー共通 */
.menu-windows > a,
.menu-android > a,
.menu-case-study > a,
.menu-beginners > a,
.menu-howtoit > 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;
}

.menu-windows > a::before,
.menu-android > a::before,
.menu-case-study > a::before,
.menu-beginners > a::before,
.menu-howtoit > 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('/wp-content/uploads/2025/04/windows11-logo.png');
}

/* Android */
.menu-android > a::before{
  width:26px;
  height:26px;
  background-image:url('/wp-content/uploads/2025/04/droid-icon.png');
}

/* ケーススタディ */
.menu-case-study > a::before{
  width:22px;
  height:22px;
  background-image:url('/wp-content/uploads/2026/01/case-study-icon.png');
}

/* 初心者 */
.menu-beginners > a::before{
  width:30px;
  height:30px;
  background-image:url('/wp-content/uploads/2025/04/Beginner-icon.png');
}

/* How to IT */
.menu-howtoit > a::before{
  width:26px;
  height:26px;
  background-image:url('/wp-content/uploads/2025/04/Ladybug.png');
}

/************************************
** 17) サイト内検索フォーム
************************************/
.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;
}

/************************************
** 18) 孫カテゴリーセレクトメニュー
************************************/
.grandchild-select-group{
  display:block;
  width:100%;
  max-width:400px;
}

.grandchild-label{
  margin-bottom:1.0em;
  display:block;
  font-weight:bold;
  color:#88c2b5;
}
.grandchild-label i{
  margin-right:0.4em;
  color:#2c3e50;
  font-size:1.1em;
  vertical-align:middle;
}

.grandchild-select{
  position:relative;
  padding:8px 40px 8px 12px;
  border-radius:4px;
  border:1px solid #ccc;
  font-size:1em;
  line-height:1.5;
  margin-bottom:2.5em;
  max-width:400px;
  width:100%;
  background-color:#fff;
  color:#2c3e50;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:none;
  cursor:pointer;
}
.grandchild-select:focus{
  border-color:#1abc9c;
  box-shadow: 0 0 0 2px rgba(26,188,156,0.2);
  outline:none;
}

.grandchild-select-wrapper{
  position:relative;
  display:block;
  width:100%;
  max-width:400px;
}
.grandchild-select-wrapper::after{
  content:"\f107";
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  position:absolute;
  right:12px;
  top:25px;
  transform: translateY(-50%);
  pointer-events:none;
  color:#2c3e50;
  font-size:1em;
}

/************************************
** 19) 目次（TOC）
************************************/
.toc-content{
  background-color:#f8fbfb;
  border: 2px solid #99d6c3;
  color:#2c3e50;
  border-radius:8px;
  padding:1.5em;
  margin-bottom:1.5em;
}
.toc-title{
  font-weight:bold;
  font-size:1.1em;
  color:#2c3e50;
  margin-bottom:0.6em;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.6em;
}
.toc-title::before{
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  content:"\f5a0";
  margin-right:0.5em;
  color:#f47c27;
}
.toc-list li{
  list-style:none;
  margin:0.6em 0;
  padding-left:1.8em;
  position:relative;
  line-height:1.6;
}
.toc-list li::before{
  content:"✔";
  color:#99d6c3;
  position:absolute;
  left:0;
  font-size:0.9em;
}
.toc-list li a{
  color:#2c3e50;
  text-decoration:none;
}
.toc-list li a:hover{
  text-decoration:underline;
  color:#f47c27;
}

/************************************
** 20) リスト（新着・更新、タグ対応）
************************************/
.post-list,
.tag-posts-list{
  list-style-type:none;
  padding:0;
  margin:0;
}
.post-list li,
.tag-posts-list li{
  display:flex;
  align-items:flex-start;
  padding-top:1.0em;
  padding-bottom:1.2em;
  margin-bottom:1em;
  border-bottom: 1px solid #99d6c3;
}
.post-list li:first-child,
.tag-posts-list li:first-child{
  border-top:none;
}
.post-list li .post-info,
.tag-posts-list li .post-info{
  margin-bottom:0;
}
.post-list li .post-title,
.tag-posts-list li .post-title{
  font-weight:600;
  font-size:1.2em;
  color:#f47c27;
  margin:0;
}
.post-title::before{ content:none !important; }
.post-list li .post-excerpt,
.tag-posts-list li .post-excerpt{
  color:#354b5e;
  font-size:0.9em;
  margin-top:0.3em;
}
.post-list li a,
.tag-posts-list li a{
  text-decoration:none;
}
.post-list li a:hover .post-title,
.tag-posts-list li a:hover .post-title{
  text-decoration:underline;
  color:#f4b183;
}
.post-list li img,
.tag-posts-list li img{
  width:60px;
  height:60px;
  margin-right:15px;
  border-radius:6px;
  object-fit:cover;
  margin-bottom:0.3em;
}
.post-list li .post-info{
  flex:1 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
}

/************************************
** 21) popular30_all（サイドバー用リスト）
************************************/
.category-posts-list{
  list-style-type:none;
  padding:0;
  margin:0;
}
.category-posts-list li{
  display:flex;
  align-items:flex-start;
  padding-top:0.6em;
  padding-bottom:0.8em;
  margin-bottom:0.8em;
  border-bottom: 1px solid #99d6c3;
}
.category-posts-list li:first-child{ border-top:none; }
.category-posts-list li .post-info{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  margin-bottom:0;
  min-width:0;
}
.category-posts-list li .post-title{
  font-weight:600;
  font-size:0.95em;
  color:#f47c27;
  margin:0;
  line-height:1.4;
  word-break: break-word;
}
.category-posts-list .post-title::before{ content:none !important; }
.category-posts-list li .post-excerpt{
  color:#354b5e;
  font-size:0.8em;
  margin-top:0.2em;
  line-height:1.5;
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow:hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.category-posts-list li a{ text-decoration:none; }
.category-posts-list li a:hover .post-title{
  text-decoration:underline;
  color:#f4b183;
}
.category-posts-list li img{
  width:48px;
  height:48px;
  margin-right:10px;
  border-radius:6px;
  object-fit:cover;
  margin-bottom:0.2em;
}

/************************************
** 22) トップページタブ（tab-label-group）
************************************/
ul.tab-label-group{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  width:100%;
  margin-top:2.5em;
  margin-bottom:0;
  padding-left:0;
}
ul.tab-label-group li.tab-label{
  flex:1 1 auto;
  text-align:center;
  padding:0.8em 1.6em;
  font-size:1.1em;
  font-weight:bold;
  border-radius:8px 8px 0 0;
  background-color:#f0f0f0;
  color:#2c3e50;
  margin-right:0;
  cursor:pointer;
  transition: background 0.3s, color 0.3s;
  list-style:none;
  border-bottom:none;
}
ul.tab-label-group li.tab-label.is-active{
  background-color:#2c3e50;
  color:#fff;
  border-radius:8px 8px 0 0;
}
.tab-content-group{
  border-top: 2px solid #2c3e50;
  padding-top:1em;
  margin-top:0;
}

/************************************
** 23) カテゴリータブアイコン
************************************/
/* Windows */
.category-win-internet-cloud-tools::before{ content:"\f0ac"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.category-win-network-remote-tools::before{ content:"\f233"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.category-win-security-privacy::before{ content:"\f21b"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.category-win-disk-file-management::before{ content:"\f07c"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.category-win-backup-recovery::before{ content:"\f1c0"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.category-win-media-suite::before{ content:"\f008"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.category-win-disc-copy-ripping::before{ content:"\f51f"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.category-win-video-audio::before{ content:"\f144"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.category-win-images-ebooks::before{ content:"\f02d"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.category-win-system-tools::before{ content:"\f085"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.category-win-virtualization-tools::before{ content:"\f233"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.category-win-productivity-tools::before{ content:"\f0ae"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.category-win-web-authoring-wp-plugins::before{ content:"\f121"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.category-win-mobile-tools::before{ content:"\f3cd"; font-family:"Font Awesome 5 Free"; font-weight:900; }

/* Android */
.category-android-network-tools::before{ content:"\f6ff"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.category-android-remote-tools::before{ content:"\f233"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.category-android-security-privacy::before{ content:"\f21b"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.category-android-system-tools::before{ content:"\f085"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.category-android-productivity-tools::before{ content:"\f0ae"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.category-android-file-tools::before{ content:"\f07c"; font-family:"Font Awesome 5 Free"; font-weight:900; }

/* ケーススタディ */
.category-apps-settings::before{ content:"\f1de"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.category-hardware-setings::before{ content:"\f2db"; font-family:"Font Awesome 5 Free"; font-weight:900; }

/************************************
** 24) windows/ Android 疑似タブ（記事用）
************************************/
.pseudo-tabs{
  display:flex;
  justify-content:center;
  gap:0;
  margin:2em 0;
  border:1px solid #ccc;
  border-radius:8px;
  overflow:hidden;
  background:#f0f0f0;
}
.tab-button{
  flex:1;
  text-align:center;
  padding:0.8em 1em;
  text-decoration:none;
  font-weight:bold;
  color:#2c3e50;
  background:#f0f0f0;
  border-right:1px solid #ccc;
  transition: background 0.2s, color 0.2s;
}
.tab-button:last-child{ border-right:none; }
.tab-button:hover{ background:#e0e0e0; }
.active-tab{
  background:#2c3e50;
  color:#ffffff;
  cursor:default;
}

/************************************
** 25) 用語解説ボックス
************************************/
.glossary-title{
  position:relative;
  background:#f8fbfb;
  border: 2px solid #99d6c3;
  border-radius:8px;
  padding:0.5em 1.2em;
  margin:2em 0 1em 0;
  font-size:0.9em;
  font-weight:bold;
  color:#2c3e50;
  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:#99d6c3;
}

/************************************
** 26) ウィジェット：文字数カウンタ
************************************/
.char-count-widget{
  background:#f0f5f4;
  border:1px solid #ccc;
  border-radius:8px;
  padding:1em;
  margin-bottom:1.5em;
  color:#2c3e50;
  font-size:0.95em;
  line-height:1.5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.char-count-widget label{
  display:block;
  margin-bottom:0.5em;
  font-weight:bold;
}
.char-count-widget textarea{
  width:100%;
  padding:0.6em;
  border:1px solid #ccc;
  border-radius:4px;
  font-size:0.95em;
  box-sizing:border-box;
  min-height:6em;
}
.char-count-widget .char-count-result{
  margin-top:0.8em;
  font-weight:bold;
  color:#f47c27;
  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;
}

/************************************
** 27) ウィジェット：アスペクト比計算機
************************************/
.aspect-ratio-widget{
  background:#f0f5f4;
  border:1px solid #ccc;
  border-radius:8px;
  padding:1em;
  margin-bottom:1.5em;
  color:#2c3e50;
  font-size:0.95em;
  line-height:1.5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.aspect-ratio-widget h3{ margin-top:0; }
.aspect-ratio-note{
  font-size:0.9em;
  color:#f47c27;
  margin-bottom:0.8em;
  font-weight:bold;
}
.aspect-ratio-widget label{
  display:block;
  margin-bottom:0.5em;
  font-weight:bold;
}
.aspect-ratio-widget input[type="number"]{
  width:100%;
  padding:0.4em;
  margin-top:0.2em;
  border:1px solid #ccc;
  border-radius:4px;
  font-size:0.95em;
  box-sizing:border-box;
}
.aspect-ratio-widget button{
  background:#f47c27;
  color:#fff;
  border:none;
  border-radius:4px;
  padding:0.6em 1.2em;
  cursor:pointer;
  margin-top:0.8em;
  transition: background 0.3s ease;
}
.aspect-ratio-widget button:hover{ background:#ffa94d; }
.aspect-ratio-widget .result{
  margin-top:1em;
  font-weight:bold;
  color:#f47c27;
  display:flex;
  align-items:center;
  gap:0.5em;
}
.aspect-ratio-widget .result::before{
  content:"\f058";
  font-family:"Font Awesome 5 Free";
  font-weight:900;
}

/************************************
** 28) ウィジェット：ローマ字変換
************************************/
.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 #ccc;
  border-radius:4px;
}
.romanizer-widget label{
  color:#2c3e50;
  display:block;
  font-weight:bold;
  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:#f47c27;
  color:#fff;
  border:none;
  border-radius:4px;
  font-size:0.9em;
  cursor:pointer;
}
.romanizer-result{
  display:flex;
  align-items:center;
  margin-top:1em;
  font-weight:bold;
  color:#2c3e50;
  gap:0.5em;
}
.romanizer-result .icon-label::before{
  content:"\f058";
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  margin-right:0.3em;
  color:#f47c27;
}
.romanizer-result .icon-label{ font-weight:bold; }
.romanizer-widget-note{
  font-size:0.9em;
  color:#2c3e50;
  margin-bottom:0.8em;
}

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

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

/************************************
** 31) Kadenceの調整
************************************/
.kt-tabs-title-list{ justify-content:center !important; }
.wp-block-kadence-iconlist{ padding-left:1em; text-indent:0; }
.summary-table{ table-layout:fixed; width:100%; }
.kt-accordion-pane .kt-accordion-content{ font-size:14px; }

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

/************************************
** 33) 旧版記事：最新記事への誘導テキスト
************************************/
.latest-version-notice{
  background-color:#f8fbfb;
  border-left: 4px solid #1abc9c;
  padding:1em 1.2em;
  margin:1.5em 0;
  font-size:0.95em;
  color:#2c3e50;
  line-height:1.6;
  border-radius:4px;
  position:relative;
}
.latest-version-notice::before{
  content:"\f1da";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  color:#f47c27;
  margin-right:0.6em;
}

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

/************************************
** 35) レスポンシブ（空枠）
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}