/*
Theme Name: AFFINGER4 Child
Template: affinger4
Version: 20160912β
*/
.post .thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;   /* 枠を3:2に固定 */
  overflow: hidden;
  background: #fff;       /* 余白は白で表示 */
}

.post .thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;    /* 見切れずに全部表示 */
  object-position: center;
  display: block;
}

/*WPP */

.category-label a,
.enquetes dt a {
    position: relative;
    display: block;
    width: 120px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background-color: #222;
    text-decoration: none;
}

.category-label a:before,
.enquetes dt a:before {
    content: "";
    position: absolute;
    top: 0;
    right: -15px !important;
    width: 0;
    height: 0;
    border-width: 10px !important;
    border-style: solid;
    border-color: #222;
    border-right-color: transparent !important;
}

.entry .category-label,
.enquetes dt {
    position: absolute;
    /*    top: 0;
    left: 0;
    margin-top: 10px;*/
}

.widget .category-label a {
    margin-bottom: 5px;
    width: 100px;
    height: 20px;
    line-height: 20px;
    font-size: 11px;
}

.widget .category-label a:before {
    right: -10px;
    border-width: 10px;
}

/*カテゴリカラー */
.category-label .cat-id-7,
.category-label .category-7 {
    background-color: #4ca29f;
}

.category-label .cat-id-7:before,
.category-label .category-7:before {
    border-color: #4ca29f;
}

.category-label .cat-id-8,
.category-label .category-8 {
    background-color: #e7a800;
}

.category-label .cat-id-8:before,
.category-label .category-8:before {
    border-color: #e7a800;
}

.category-label .cat-id-11,
.category-label .category-11 {
    background-color: #2c609a;
}

.category-label .cat-id-11:before,
.category-label .category-11:before {
    border-color: #2c609a;
}

.category-label .cat-id-10,
.category-label .category-10 {
    background-color: #3aabd2;
}

.category-label .cat-id-10:before,
.category-label .category-10:before {
    border-color: #3aabd2;
}

.category-label .cat-id-13,
.category-label .category-13 {
    background-color: #df5b26;
}

.category-label .cat-id-13:before,
.category-label .category-13:before {
    border-color: #df5b26;
}

.category-label .cat-id-12,
.category-label .category-12 {
    background-color: #755b7e;
}

.category-label .cat-id-12:before,
.category-label .category-12:before {
    border-color: #755b7e;
}

.category-label .cat-id-9,
.category-label .category-9 {
    background-color: #e03638;
}

.category-label .cat-id-9:before,
.category-label .category-9:before {
    border-color: #e03638;
}


.category-label .cat-id-7:before,
.category-label .cat-id-8:before,
.category-label .cat-id-11:before,
.category-label .cat-id-10:before,
.category-label .cat-id-9:before,
.category-label .cat-id-13:before,
.category-label .cat-id-12:before, {
    border-right-color: transparent;
}

/*余白 */
.wp-block-heading {
	margin: 1em!important;
}

/* ========== カテゴリアイコン（Gutenberg カテゴリーブロック用・完成版） ========== */
/* 調整はここだけ（px） */
.widget.ad{
  --icon-left: 8px;      /* アイコンの左余白 */
  --icon-size: 28px;     /* アイコンの一辺（大きくしたい時はここを増やす） */
  --icon-gap: 8px;       /* アイコンと文字の間隔 */
}

/* ベース（リスト初期化） */
.widget.ad .wp-block-categories-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 各行の見た目 */
.widget.ad .wp-block-categories-list .cat-item > a{
  position: relative;
  padding: 10px 0 10px calc(var(--icon-left) + var(--icon-size) + var(--icon-gap));
  border-bottom: 1px dotted #ccc;
  text-decoration: none;
}

/* 最終行の線を消す */
.widget.ad .wp-block-categories-list .cat-item:last-child > a{
  border-bottom: 0;
}

/* 疑似要素でアイコン（背景ショートハンドの上書き影響を受けない安全策） */
.widget.ad .wp-block-categories-list .cat-item > a::before{
  content: "";
  position: absolute;
  left: var(--icon-left);
  top: 50%;
  width: var(--icon-size);
  height: var(--icon-size);
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: contain;
}

/* ===== ID別アイコン割り当て =====
   置き場所に合わせてパスを変更してください。
   テーマ内に置く場合：/wp-content/themes/【子テーマ名】/images/xxx.png
   アップロードフォルダの場合：/wp-content/uploads/年/月/xxx.png
*/

/* コウモリ駆除（cat-item-12） */
.widget.ad .wp-block-categories-list .cat-item-12 > a::before{
  background-image: url('/blog/wp-content/uploads/2025/09/cat_icon_12.png');
}

/* ゴキブリ駆除（cat-item-13） ←あなたが指定した uploads の例 */
.widget.ad .wp-block-categories-list .cat-item-13 > a::before{
  background-image: url('/blog/wp-content/uploads/2025/09/cat_icon_13.png');
}

/* シロアリ駆除（cat-item-10） */
.widget.ad .wp-block-categories-list .cat-item-10 > a::before{
  background-image: url('/blog/wp-content/uploads/2025/09/cat_icon_10.png');
}

/* ネズミ駆除（cat-item-11） */
.widget.ad .wp-block-categories-list .cat-item-11 > a::before{
  background-image: url('/blog/wp-content/uploads/2025/09/cat_icon_11.png');
}

/* ハチ駆除（cat-item-8） */
.widget.ad .wp-block-categories-list .cat-item-8 > a::before{
  background-image: url('/blog/wp-content/uploads/2025/09/cat_icon_8.png');
}

/* 害獣駆除（cat-item-7） */
.widget.ad .wp-block-categories-list .cat-item-7 > a::before{
  background-image: url('/blog/wp-content/uploads/2025/09/cat_icon_7.png');
}

/* 害虫駆除（cat-item-9） */
.widget.ad .wp-block-categories-list .cat-item-9 > a::before{
  background-image: url('/blog/wp-content/uploads/2025/09/cat_icon_9.png');
}

/* ===== レスポンシブ（任意） ===== */
@media (max-width: 480px){
  .widget.ad{ --icon-size: 24px; } /* モバイルは少し小さく */
}

/* ===== 必要ならホバー（任意） ===== */
/*
.widget.ad .wp-block-categories-list .cat-item > a:hover{
  opacity: .85;
}
*/

/* ===== 関連記事（PC幅）を強制グリッド化 ===== */
@media (min-width: 1025px){
  .main .kanren > ul{
    display: grid !important;                              /* flex指定をつぶす */
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .main .kanren > ul > li.kanren-item{
    width: auto !important;          /* 古いflex幅の残りを無効化 */
    min-width: 0 !important;         /* タイトルのはみ出し防止 */
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
  }
}

/* ===== サムネを4:3に統一 ===== */
.main .kanren a.kanren-item__thumbnail,
.main .kanren a.kanren-item__thumbnail img{
  display: block !important;
  width: 100% !important;
}
.main .kanren a.kanren-item__thumbnail img{
  aspect-ratio: 4 / 3;
  height: auto !important;
  object-fit: cover;
}

/* ===== タイトルを強制横書き（縦書き指定を打ち消し）===== */
.main .kanren .kanren-item__content,
.main .kanren .kanren-item__content *,
.main .kanren .kanren-item__content h5,
.main .kanren .kanren-item__content h5 a{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;         /* 全体指定の break-all を無効化 */
  overflow-wrap: break-word !important;
  line-height: 1.5;
  display: block;
}

/* スマホ/タブレットの列数（必要に応じて調整） */
@media (max-width: 1024px){
  .main .kanren > ul{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 600px){
  .main .kanren > ul{ grid-template-columns: 1fr !important; }
}


/* 関連記事のカテゴリラベルを全て非表示にする */
.main .kanren .category-label {
  display: none !important;
}

/* トップページ*/
/* カテゴリボックスの見た目（PC2カラム×2行、スマホ1カラム） */
.home-catbox{ background:#f3fbff; padding:20px; border-radius:10px; margin:28px 0; }
.home-catbox__head{ margin:0 0 14px; }
.home-catbox__title{
  background:#1e88e5; color:#fff; display:inline-block;
  padding:.5em .9em; border-radius:8px; font-weight:700; font-size:1.05rem;
}

.home-catbox__grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* PC: 2列 */
}
@media (max-width: 768px){
  .home-catbox__grid{ grid-template-columns: 1fr; }
}

.home-catbox__card{
  display:grid; grid-template-columns: 42% 1fr; gap:12px;
  background:#fff; border:1px solid #e5eef5; border-radius:10px;
  padding:10px; text-decoration:none;
  box-shadow:0 2px 8px rgba(9,30,66,.06);
}
.home-catbox__card:hover{ transform:translateY(-1px); transition:.15s; }

.home-catbox__thumb img{
  width:100%; aspect-ratio: 4 / 3; height:auto; object-fit:cover; display:block; border-radius:6px;
}
.home-catbox__entry-title{
  font-size:.98rem; line-height:1.5; color:#2b5d86; margin:0;
}

.home-catbox__more{ margin-top:16px; text-align:center; }
.home-catbox__btn{
  display:inline-block; background:#1e88e5; color:#fff; padding:.7em 1.2em;
  border-radius:999px; font-weight:700; text-decoration:none;
}
.home-catbox__btn::after{ content:"▶"; margin-left:.5em; font-size:.85em; }


/*カテゴリ毎にh2、h3、h4タグの色を変える*/

/*カテゴリ家電のh2、h3、h4タグの色*/
.category-hachi h2:before {
    background: rgba(231, 168, 0, 0.8);
    /*h2の〇で前の濃い方*/
}
.category-hachi h2:after {
    background: rgba(231, 168, 0, 0.3);
    /*h2の〇で後ろの薄い方*/
}
.category-hachi h3{
    border-top: solid 3px #e7a800;
    border-bottom: solid 3px #e7a800;
}
.category-hachi h4 {
    border-left: solid 4px #e7a800;
}


/*カテゴリ害虫のh2、h3、h4タグの色*/
.category-gaichyu h2:before {
    background: rgba(224, 54, 56, 0.8);
    /*h2の〇で前の濃い方*/
}
.category-gaichyu h2:after {
    background: rgba(224, 54, 56, 0.3);
    /*h2の〇で後ろの薄い方*/
}
.category-gaichyu h3{
    border-top: solid 3px #e03638;
    border-bottom: solid 3px #e03638;
}
.category-gaichyu h4 {
    border-left: solid 4px #e03638;
}


/*カテゴリネズミのh2、h3、h4タグの色*/
.category-nezumi h2:before {
    background: rgba(60, 146, 174, 0.8);
    /*h2の〇で前の濃い方*/
}
.category-nezumi h2:after {
    background: rgba(60, 146, 174, 0.3);
    /*h2の〇で後ろの薄い方*/
}
.category-nezumi h3{
    border-top: solid 3px #2c609a;
    border-bottom: solid 3px #2c609a;
}
.category-nezumi h4 {
    border-left: solid 4px #2c609a;
}


/*カテゴリ害獣のh2、h3、h4タグの色*/
.category-gaijyu h2:before {
    background: rgba(76, 162, 159, 0.8);
    /*h2の〇で前の濃い方*/
}
.category-gaijyu h2:after {
    background: rgba(76, 162, 159, 0.3);
    /*h2の〇で後ろの薄い方*/
}
.category-gaijyu h3{
    border-top: solid 3px #4ca29f;
    border-bottom: solid 3px #4ca29f;
}
.category-gaijyu h4 {
    border-left: solid 4px #4ca29f;
}


/*カテゴリコウモリのh2、h3、h4タグの色*/
.category-koumori h2:before {
    background: rgba(117,91,126, 0.8);
    /*h2の〇で前の濃い方*/
}
.category-koumori h2:after {
    background: rgba(117,91,126, 0.3);
    /*h2の〇で後ろの薄い方*/
}
.category-koumori h3{
    border-top: solid 3px #755b7e;
    border-bottom: solid 3px #755b7e;
}
.category-koumori h4 {
    border-left: solid 4px #755b7e;
}



/*カテゴリシロアリのh2、h3、h4タグの色*/
.category-shiroari h2:before {
    background: rgba(58,171,210, 0.8);
    /*h2の〇で前の濃い方*/
}
.category-shiroari h2:after {
    background: rgba(58,171,210, 0.3);
    /*h2の〇で後ろの薄い方*/
}
.category-shiroari h3{
    border-top: solid 3px #3aabd2;
    border-bottom: solid 3px #3aabd2;
}
.category-shiroari h4 {
    border-left: solid 4px #3aabd2;
}

/*カテゴリゴキブリのh2、h3、h4タグの色*/
.category-gokiburi h2:before {
    background: rgba(223, 91, 38, 0.8);
    /*h2の〇で前の濃い方*/
}
.category-gokiburi h2:after {
    background: rgba(223, 91, 38, 0.3);
    /*h2の〇で後ろの薄い方*/
}
.category-gokiburi h3{
    border-top: solid 3px #df5b26;
    border-bottom: solid 3px #df5b26;
}
.category-gokiburi h4 {
    border-left: solid 4px #df5b26;
}

/* カテゴリーページのタイトルだけ線を消す */
body.category .entry-title {
  border-top: none !important;
  border-bottom: none !important;
}
/* トップページの一覧タイトルだけ線を消す */
body.home .entry-title,
body.home .row > .hentry .entry-summary .entry-title {
  border-top: none !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* サイドの見出しにアイコンを中央並びで追加 */

/* ==== 設定（ここだけ差し替えればOK） ==== */
:root{
  --icon-popular:   url("https://www.voicenote.jp/blog/wp-content/uploads/2025/09/icon_mark_rank.png");
  --icon-category:  url("https://www.voicenote.jp/blog/wp-content/uploads/2025/09/icon_mark_menu.png");
  --icon-size: 20px;     /* PCのアイコンサイズ */
  --icon-gap:  8px;      /* 文字との間隔 */
}

/* ▼ 人気：popular-posts直前の見出し */
.kanren > .widget.ad:has(+ .widget.ad .popular-posts) > h2.wp-block-heading{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--icon-gap); width:100%; text-align:center; position:relative; isolation:isolate;
}
.kanren > .widget.ad:has(+ .widget.ad .popular-posts) > h2.wp-block-heading::after{
  content:""; display:inline-block; order:-1; z-index:2;
  width:var(--icon-size); height:var(--icon-size);
  background: var(--icon-popular) no-repeat center/contain;
}

/* ▼ カテゴリー：カテゴリ一覧直前の見出し */
.kanren > .widget.ad:has(+ .widget.ad .wp-block-categories-list) > h2.wp-block-heading{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--icon-gap); width:100%; text-align:center; position:relative; isolation:isolate;
}
.kanren > .widget.ad:has(+ .widget.ad .wp-block-categories-list) > h2.wp-block-heading::after{
  content:""; display:inline-block; order:-1; z-index:2;
  width:var(--icon-size); height:var(--icon-size);
  background: var(--icon-category) no-repeat center/contain;
}

/* スマホ微調整 */
@media (max-width: 600px){
  :root{ --icon-size:16px; --icon-gap:6px; }
}

/* :has() 非対応ブラウザ向け（順番が固定のときだけ使用）
.kanren > .widget.ad:nth-of-type(3) > h2.wp-block-heading{ …人気… }
.kanren > .widget.ad:nth-of-type(1) > h2.wp-block-heading{ …カテゴリー… }
*/
/* アイコンを小さめに */
/* もっと小さく / ちょい大きく（数値だけ変えればOK） */
.kanren > .widget.ad:has(+ .widget.ad .popular-posts) > h2.wp-block-heading::after,
.kanren > .widget.ad:has(+ .widget.ad .wp-block-categories-list) > h2.wp-block-heading::after{
  width: 18px !important;
  height: 18px !important;
}

/* 文字との間隔 */
.kanren > .widget.ad:has(+ .widget.ad .popular-posts) > h2.wp-block-heading,
.kanren > .widget.ad:has(+ .widget.ad .wp-block-categories-list) > h2.wp-block-heading{
  gap: 5px !important;
}

/* スマホだけさらに小さくする例 */
@media (max-width: 600px){
  .kanren > .widget.ad:has(+ .widget.ad .popular-posts) > h2.wp-block-heading::after,
  .kanren > .widget.ad:has(+ .widget.ad .wp-block-categories-list) > h2.wp-block-heading::after{
    width: 16px !important;
    height: 16px !important;
  }
  .kanren > .widget.ad:has(+ .widget.ad .popular-posts) > h2.wp-block-heading,
  .kanren > .widget.ad:has(+ .widget.ad .wp-block-categories-list) > h2.wp-block-heading{
    gap: 4px !important;
  }
}

/* もし縦位置がわずかにズレるなら（アイコンを上下に微調整） */
.kanren > .widget.ad:has(+ .widget.ad .popular-posts) > h2.wp-block-heading::after,
.kanren > .widget.ad:has(+ .widget.ad .wp-block-categories-list) > h2.wp-block-heading::after{
  transform: translateY(-2px); /* -2px〜2pxで調整 */
}

/* .kanren 配下の見出しだけ三角を消す */
.kanren .wp-block-heading::before{
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
  position: static !important;
  margin: 0 !important;
  transform: none !important;
}