@charset "UTF-8";

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

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

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

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

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


/************************************
** ▼ガンプラ共通グリッドスタイル（検索＋トップページ）▼
************************************/

/* グリッドレイアウト（PC5列・スマホ2列→1列） */
.gunpla-grid,
.gunpla-grid-home {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

@media (max-width: 768px) {
  .gunpla-grid,
  .gunpla-grid-home {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .gunpla-grid,
  .gunpla-grid-home {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 360px) {
  .gunpla-grid,
  .gunpla-grid-home {
    grid-template-columns: 1fr;
  }
}

/* 各アイテムのボックス全体 */
.gunpla-item {
  border: px solid #ccc;
  padding: px;
  background: #fff;
  text-align: center;
}

/* 再販日ラベル */
.resale-area {
  margin-bottom: 10px;
}

.resale-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.resale-label {
  width: 25%;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
}

.resale-date {
  display: inline-block;
  padding: 2px 8px;
  background-color: #e0f0ff;
  border-radius: 4px;
  font-size: 10px;
  text-align: right;
}

/* アイキャッチ */
.gunpla-thumb {
  margin-bottom: 10px;
}

.gunpla-thumb img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* タイトル */
.gunpla-grid h2.gunpla-title,
.gunpla-grid-home h2.gunpla-title {
  all: unset !important;
  font-size: 12px !important;
  margin-bottom: 15px !important;
  height: 60px !important;
  overflow: hidden !important;
  line-height: 20px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  text-align: left !important;
  padding: 10px !important;
  background-color: var(--cocoon-xx-thin-color) !important;
  border-radius: var(--cocoon-badge-border-radius) !important;
}

/* ECバナー全体のスタイル */
.shop-links {
  border: 2px solid #000;
  padding: 10px;
  margin-bottom: 8px;
  background-color: #f5f5f5;
  border-radius: 8px;
  max-width: 600px;
  margin: 0 auto;
}

/* ECサイトで在庫を確認の文字 */
.shop-links .ec-banner-header span {
  font-size: 12px !important;
  font-weight: bold !important;
  text-align: center !important;
  display: block !important;
}

/* ECリンクバナー画像（共通） */
.gunpla-grid .shop-links img,
.gunpla-grid-home .shop-links img {
  height: 40px !important;
  width: auto !important;
  max-height: 40px !important;
  max-width: 100% !important;
  object-fit: contain;
  display: inline-block;

  /* 👇 ここから追加 */
  border-radius: 6px;     /* 角を少し丸める（数値はお好みで） */
  margin: 4px 6px;        /* 上下4px・左右6pxの余白を追加 */
}

/************************************
** ▲ガンプラ共通グリッドスタイルここまで▲
************************************/

/************************************
** ▼詳細ページカラーガイド表デザイン▼
************************************/

table.color-guide {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 14px;
}

.color-guide th,
.color-guide td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

.color-guide thead th {
  background: #3a3a3a; !important;
  font-weight: bold;
  color: #ffffff;
}

.color-guide tbody tr:nth-child(odd) {
  background-color: #f0f0f0;
}
.color-guide tbody tr:nth-child(even) td {
  background-color: #fff
}

/************************************
** ▲詳細ページカラーガイド表デザイン▲
************************************/

/************************************
** ▼詳細ページギャラリーデザイン▼
************************************/
/* ギャラリー全体ラッパー */
.custom-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 各画像の枠 */
.gallery-item {
  flex: 0 0 calc(20% - 10px); /* PC時：5列 */
  box-sizing: border-box;
}

/* 最初の画像だけ特別に横幅100% */
.gallery-item.featured {
  flex: 0 0 100%;
}

/* 画像調整 */
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* スマホ時：3列 */
@media (max-width: 768px) {
  .gallery-item {
    flex: 0 0 calc(33.333% - 10px);
  }
  .gallery-item.featured {
    flex: 0 0 100%;
  }
}

/************************************
** ▲詳細ページギャラリーデザイン▲
************************************/

/************************************
** ▼ポチップリンクデザイン▼
************************************/
<style>
.paint-link-list {
  list-style: none;
  padding: 0;
}
.paint-link-list li {
  margin-bottom: 1em;
}
.paint-link-list li.checked .linker-area {
  display: none;
}
</style>

/************************************
** ▲ポチップリンクデザイン▲
************************************/

/************************************
** ▼詳細ページ用スライダー▼
************************************/
.related-gunpla-slider {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

.related-gunpla-grid {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: max-content;
}

.related-gunpla-item {
  flex: 0 0 auto;
  width: 160px;
  text-align: left;
}

.related-thumb img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.related-title {
  font-size: 12px;
  margin-top: 6px;
}

/************************************
** ▲詳細ページ用スライダー▲
************************************/

/************************************
** ▼詳細Pスライダー用表示style▼
************************************/
.related-gunpla-box {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0;
  margin: 20px 0;
}

.related-gunpla-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  min-width: 100%;
}

.related-gunpla-item {
  flex: 0 0 auto;
  width: 160px;
  background: #f9f9f9;
  border-radius: 6px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.related-gunpla-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.related-title {
  font-size: 0.8rem;
  padding: 6px;
  color: #333;
  text-align: left;
}
/************************************
** ▲詳細Pスライダー用表示style▲
************************************/

/************************************
** ▼詳細P固定表style▼
************************************/
////ボックス
.gunpla-info-box {
  background-color: #f8fbf8;
  border: 1px solid #ddd;
  padding: 1em;
  margin: 1.5em 0;
  border-radius: 6px;
}

.gunpla-info-list {
  display: flex;
  flex-direction: column;
}

.gunpla-info-list .info-row {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ddd;
}

.gunpla-info-list .info-row dt {
  width: 25%;
  font-weight: bold;
  background-color: #f0f0f0; 
  padding: 0.5em 0.75em;
  margin: 0;
  line-height: 1.7;
}

.gunpla-info-list .info-row dd {
  width: 75%;
  margin: 0;
  padding: 0.5em 0.75em;
  line-height: 1.7;
}




/************************************
** ▲詳細P固定表style▲
************************************/

/************************************
** ▼ガンプラ詳細ページ目次▼
************************************/

.gunpla-toc {
  background: #ffffff;
  border: 2px solid #ccc;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
}

.gunpla-toc .toc-title {
  font-weight: bold;
  margin-bottom: 10px;
  color: #454545;
  font-size: 15px;
}

.gunpla-toc .toc-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.gunpla-toc .toc-list li {
  margin-bottom: 8px;
}

.gunpla-toc .toc-list a {
  text-decoration: none;
  color: #0066cc;
  display: inline-block;
  padding-left: 1em;
  position: relative;
  transition: color 0.2s;
}

.gunpla-toc .toc-list a::before {
  content: "▶";
  position: absolute;
  left: 0;
  color: #999;
}

.gunpla-toc .toc-list a:hover {
  color: #003366;
}
.toc-toggle {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

.ec-banner img {
  border-radius: 8px;        /* ⬅️ 角を丸く（8px、お好みで調整可） */
  width: 80%;               /* ⬅️ 枠内で100%表示 */
  max-width: 300px;          /* ⬅️ 最大幅300px（バナーの基準サイズ） */
  height: auto;              /* ⬅️ 比率維持 */
  margin: 12px auto;
  display: block;
}

/************************************
** ▲ガンプラ詳細ページ目次▲
************************************/

/************************************
** ▼ガンプラ詳細ページECリンク▼
************************************/

.ec-box {
  border: 2px solid #ccc;
  border-radius: 6px;
  margin-bottom: 24px;
  position: relative;
  padding: 16px 16px 12px;
  background-color: #f9f9f9;
}

.ec-box-title {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #f9f9f9;
  padding: 0 8px;
  font-weight: bold;
  font-size: 18px;
  color: #333;
  white-space: nowrap;  /* ← 折り返し防止！ */
}

.ec-box-content {
  margin-top: 8px;
}
/************************************
** ▲ガンプラ詳細ページECリンク▲
************************************/

/************************************
** ▼ガンプラ詳細ページECリンク▼
************************************/

/* 投稿ページ（single）用のタイトル装飾 */
.single .entry-title {
  background: #505050 !important;
  color: #fff !important;
  padding: 2rem 2rem;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1.6rem;
  text-align: left;
  box-sizing: border-box;
  margin-bottom: 1em;
}



/************************************
** ▼カラーDB検証エリアイメージ▼
************************************/
.colordb-image-item {
  text-align: center;
  margin-bottom: 20px;
}

/************************************
** ▲ヘッダー+グローバルメニュー▲
************************************/
/* ==============================
   検索バー
============================== */
/* 検索バー */
.header-search input[type="search"] {
  border: 2px solid #f2b960; /* ゴールド枠 */
  border-radius: 6px;
  padding: 6px 10px;
}
.header-search button {
  background-color: #1a4b83; /* ブルー */
  color: #fff;
  border-radius: 6px;
}
.header-search button:hover {
  background-color: #f2b960; /* ゴールド */
}


/* ==============================
   Header & Global Menu Customization
   Anaheim Plamodelnics 専用
   メインカラー: #1a4b83 (ブルー)
   アクセントカラー: #f2b960 (ゴールド)
============================== */

/* ==============================
   Header Top Area
============================== */
.header-top {
  background: #bebebd;
  width: 100%;
}
.header-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  max-width: 1400px;
  margin: 0 auto;
  height: 32px !important;
  box-sizing: border-box;
}
.header-top .catch-copy {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  color: #333;
  white-space: nowrap;
  font-weight: bold;
}
.header-top .search-box.input-box {
  display: flex;
  align-items: center;
  background: transparent !important;
  border: none !important;
  border-radius: 3px;
  padding: 0 !important;
  margin: 0 !important;
  height: 24px !important;
  box-sizing: border-box;
  overflow: hidden !important;
  gap: 0 !important;
  width: 250px !important;
  max-width: 100%;
}
.header-top .search-box.input-box .search-edit {
  flex: none !important;
  width: calc(100% - 80px) !important;
  height: 22px !important;
  line-height: 22px !important;
  font-size: 14px !important;
  padding: 0 6px !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  -webkit-appearance: none;
  appearance: none;
}
.header-top .search-box.input-box .search-submit {
  flex: none !important;
  width: 80px !important;
  height: 22px !important;
  line-height: 22px !important;
  font-size: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 3px 3px 0;
  background: #1a4b83 !important;
  color: #ffffff !important;
  font-weight: bold;
  cursor: pointer !important;
  box-sizing: border-box !important;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 1025px) {
  .header-top .search-box.input-box .search-submit:hover {
    background: #f2b960 !important;
    color: #1a4b83 !important;
  }
}
.header-top .search-box.input-box .search-edit::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

/* ==============================
   Header Bottom Area
============================== */
.pc-header {
  display: block;
  background: #fff;
}

.header-bottom {
  position: relative;
  width: 100%;
  height: 80px;
  background: #1a4b83;
  overflow: hidden;
}
.header-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: #f2b960;
  z-index: 0;
}
.header-bottom::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1400px;
  height: 100%;
  background: linear-gradient(120deg,
    #f2b960 0,
    #f2b960 310px,
    #1a4b83 310px,
    #1a4b83 100%
  );
  z-index: 1;
}
.header-bottom-inner {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 10px 20px;
  box-sizing: border-box;
}
.site-logo img {
  height: 80px;
  width: auto;
}

/* PCグローバルメニュー */
.header-bottom .pc-menu .pc-menu-list {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-bottom .pc-menu .pc-menu-list li {
  width: 150px;
  height: 100px;
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
}
.header-bottom .pc-menu .pc-menu-list li a {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #fff !important;
  text-decoration: none !important;
  position: relative;
}
.header-bottom .pc-menu .pc-menu-list li a .menu-desc {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #fff !important;
  font-weight: normal;
  opacity: 0.85;
  line-height: 1.2;
}
.header-bottom .pc-menu .pc-menu-list li a:hover {
  background: rgba(255, 255, 255, 0.1); 
}
.header-bottom .pc-menu .pc-menu-list li a::before,
.header-bottom .pc-menu .pc-menu-list li a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 3px;
  background: #f2b960;
  transition: width 0.3s ease;
}
.header-bottom .pc-menu .pc-menu-list li a::before {
  top: 20%;
  right: 0;
}
.header-bottom .pc-menu .pc-menu-list li a::after {
  bottom: 20%;
  left: 0;
}
.header-bottom .pc-menu .pc-menu-list li a:hover::before,
.header-bottom .pc-menu .pc-menu-list li a:hover::after {
  width: 100%;
}

/* ロゴアニメ */
.site-logo img {
  height: 70px;
  width: auto;
  transition: transform 0.3s ease;
}
.site-logo img:hover {
  transform: scale(1.1);
}

/* 追従ヘッダー */
@media screen and (min-width: 1024px) {
  .header-bottom-fixed {
    position: fixed;
    top: -100px;
    left: 0;
    width: 100%;
    height: 80px;
    background: #1a4b83;
    overflow: hidden;
    opacity: 0;
transition: all 0.7s ease;
    z-index: 9999;
  }
  .header-bottom-fixed::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: #f2b960;
    z-index: 0;
  }
  .header-bottom-fixed::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1400px;
    height: 100%;
    background: linear-gradient(120deg,
      #f2b960 0,
      #f2b960 310px,
      #1a4b83 310px,
      #1a4b83 100%
    );
    z-index: 1;
  }
  .header-bottom-fixed .header-bottom-inner {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 10px 20px;
    box-sizing: border-box;
  }
  .header-bottom-fixed .site-logo img {
    height: 70px;
    width: auto;
    transition: transform 0.3s ease;
  }
  .header-bottom-fixed .site-logo img:hover {
    transform: scale(1.1);
  }
  .header-bottom-fixed .pc-menu .pc-menu-list {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .header-bottom-fixed .pc-menu .pc-menu-list li {
    width: 150px;
    height: 100px;
    margin: 0;
    padding: 0;
    text-align: center;
    position: relative;
  }
  .header-bottom-fixed .pc-menu .pc-menu-list li a {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff !important;
    text-decoration: none !important;
    position: relative;
  }
  .header-bottom-fixed .pc-menu .pc-menu-list li a .menu-desc {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #fff !important;
    font-weight: normal;
    opacity: 0.85;
    line-height: 1.2;
  }
  .header-bottom-fixed .pc-menu .pc-menu-list li a:hover {
    background: rgba(255, 255, 255, 0.1); 
  }
  .header-bottom-fixed .pc-menu .pc-menu-list li a::before,
  .header-bottom-fixed .pc-menu .pc-menu-list li a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 3px;
    background: #f2b960;
    transition: width 0.3s ease;
  }
  .header-bottom-fixed .pc-menu .pc-menu-list li a::before {
    top: 20%;
    right: 0;
  }
  .header-bottom-fixed .pc-menu .pc-menu-list li a::after {
    bottom: 20%;
    left: 0;
  }
  .header-bottom-fixed .pc-menu .pc-menu-list li a:hover::before,
  .header-bottom-fixed .pc-menu .pc-menu-list li a:hover::after {
    width: 100%;
  }
  .header-bottom-fixed.active {
    top: 0;
    opacity: 1;
  }
}

@media screen and (max-width: 1023px) {
  .header-bottom-fixed { display: none !important; }
}


/* ==============================
   スマホ対応
============================== */
@media screen and (min-width: 1025px) {
  .sp-header,
  .sp-menu,
  .menu-overlay {
    display: none !important;
  }
}
@media screen and (max-width: 1024px) {
  .pc-header {
    display: none !important;
  }
}
@media screen and (max-width: 1024px) {
  .sp-header .site-logo img {
    max-height: 36px;
    width: auto;
  }
}
@media screen and (max-width: 1024px) {
  .sp-menu .sp-menu-list li a::before {
    content: "▶ ";
    color: #1a4b83;
    margin-right: 6px;
  }
}
@media screen and (max-width: 1024px) {
  .sp-header {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 50px !important;
    z-index: 3000 !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  body {
    padding-top: 50px;
  }
}
@media screen and (max-width: 1024px) {
  .sp-menu .sp-menu-list li a .menu-desc {
    display: none !important;
  }
}

/* ==============================
   スマホ表示ヘッダー
============================== */
.sp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 12px;
  background: #fff;
  border-bottom: 1px solid #ddd;
  z-index: 1000;
  position: relative;
}
.sp-header .hamburger,
.sp-header .search-trigger {
  font-size: 22px;
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
}
.sp-menu {
  position: fixed;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100%;
  background: #fff;
  box-shadow: 2px 0 6px rgba(0,0,0,0.3);
  transition: left 0.3s ease;
  z-index: 1001;
  padding: 20px;
}
.sp-menu.active {
  left: 0;
}
.sp-menu .close-menu {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  float: right;
}
.sp-menu .sp-menu-list {
  list-style: none;
  margin: 40px 0 0 0;
  padding: 0;
}
.sp-menu .sp-menu-list li a {
  display: block;
  padding: 12px 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(to right, #1a4b83, #f2b960) 1; 
}

/* 検索オーバーレイ */
.sp-search-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  z-index: 1002;
  justify-content: center;
  align-items: center;
}
.sp-search-overlay.active {
  display: flex;
}
.sp-search-box {
  background: #fff;
  padding: 16px;
  border-radius: 6px;
  width: 80%;
  max-width: 320px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.sp-search-box form {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sp-search-input {
  flex: 1;
  height: 36px;
  padding: 0 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 3px 0 0 3px;
  margin: 0;
}
.sp-search-submit {
  flex: 0 0 70px;
  height: 36px;
  background: #1a4b83;
  color: #fff;
  border: none;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
  margin: 0;
  transition: background 0.3s ease;
}
.sp-search-submit:hover {
  background: #f2b960;
  color: #fff;
}
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: none;
  z-index: 1000;
}
.menu-overlay.active {
  display: block;
}
@media screen and (min-width: 1025px) {
  .sp-header,
  .sp-menu,
  .menu-overlay,
  .sp-search-overlay {
    display: none !important;
  }
}

/* ==============================
   スマホ時の横スクロール制御
============================== */
html, body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}
.wrap,
.container,
.entry-content {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Cocoon標準ヘッダー非表示 */
header#header {
  display: none !important;
}

/* カルーセル縦スクロール非表示 */
.carousel {
  overflow-y: hidden;
}
.carousel .slick-dots {
  position: relative;
  bottom: 0;
  margin-top: 12px;
}
/************************************
** ▲ヘッダー+グローバルメニュー▲
************************************/






/* ===============================
   本文・サイドバー共通ベース
=============================== */
.toc-main, .toc-sidebar {
  border: 2px solid #ddd;
  font-size: 14px;
  line-height: 1.6;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
}

/* タイトル：::marker でListView風。中央寄せ・太字なし・左ズレなし */
.toc-title{
  display: list-item;           /* ::marker を出すために必須 */
  list-style-position: inside;  /* 左に飛ばない（外側に出さない） */
  list-style-type: none;        /* 既定マーカーは無効化（色は触らない） */
  padding-inline-start: 0;      /* UA既定のインデント打ち消し */
  margin-left: 0;               /* 念のため左余白ゼロ */
  font-weight: 400;             /* 太字にしない */
  text-align: center;           /* 中央寄せ */
  padding: 10px;                /* 既存のまま */
}




/* ===============================
   本文用（折り畳みあり）
=============================== */
.entry-content .toc{
  width: 100%;
  margin: 20px auto;
}

.entry-content .toc .toc-list{
  padding: 10px 0;
}

/* 1024px以上：ワイド70% */
@media (min-width: 1024px){
  .entry-content .toc{
    width: 70%;
  }
}
/* gunpla の記事ページだけ：本文の目次を 100% に */
.single-gunpla .entry-content .toc{
  width: 100%;
}

/* 目次タイトル（gunpla の記事だけ） */
.single-gunpla .entry-content .toc .toc-title{
  font-size: 14px;            /* 文字サイズを小さく */
  padding-block: 6px;         /* 上下の内側余白を削る（左右は現状キープ） */
  margin-block: 0;            /* 万一の上下マージンもカット */
}

/* 以前つけた「1024px以上は70%」を上書きする用 */
@media (min-width: 1024px){
  .single-gunpla .entry-content .toc{
    width: 100%;
    margin-top: 0; 
  }
}



/* ===============================
   サイドバー用（常時展開＋追従）
=============================== */
/* サイドバー目次：タイトル＆開閉トグルを強制非表示 */
.toc-widget-box .toc > label.toc-title,
.toc-widget-box input.toc-checkbox{
  display: none !important;
}

/* サイドバー目次：常に中身を表示に固定（開閉ロジック無効化） */
.toc-widget-box .toc-content{
  display: block !important;
  height: auto !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ===============================
   サイドバー目次：追従・閉じるボタンなし・デザインは今のまま
=============================== */
/* PCのみで検証（必要なら min-width は外してOK） */
@media (min-width:1024px){
  /* sticky を殺す祖先側の overflow/transform/contain を無効化 */
  #sidebar,
  .sidebar,
  .sidebar.nwa.cf,
  #sidebar-scroll,
  .sidebar-scroll{
    overflow: visible !important;
    transform: none !important;
    contain: none !important;
  }

  /* 追従させる対象（どちらか片方でも可） */
  .sidebar .widget_toc,
  .sidebar-scroll .widget_toc{
    position: sticky !important;
    top: 100px !important;  /* ヘッダー高に合わせて調整 */
  }

  /* 目次が長い場合でもレイアウトが崩れないように */
  .sidebar .widget_toc .toc{
    max-height: calc(100vh - 120px);
    overflow: auto;
  }
}



/* ===============================
   リスト基本
=============================== */
.toc-list li {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.toc-list li > a {
  display: block;
  color: #333;
  padding: 3px 0 3px 26px; /* アイコン幅22px＋余白14px（初期値） */
  text-decoration: none;
  position: relative;
}

/* 常時表示の下線（テキストのみ） */
.toc-list li > a::after {
  content: "";
  position: absolute;
  left: 28px; /* アイコン＋余白ぶん（初期値） */
  right: 0;
  bottom: 0; /* テキストに近づける距離は自由調整 */
  height: 1px;
  background: #e0e0e0;
}
.toc-list li ul {
  margin-left: 20px;
  padding-left: 0;
}
.toc-list li ul li:last-child > a::after {
  content: none; /* 最後は下線消す */
}

/* ===============================
   第1階層：数字バッジ（H2）
=============================== */
.toc-list {
  counter-reset: toc-counter;
}
.toc-list > li { counter-increment: toc-counter; }
.toc-list > li > a::before {
  content: counter(toc-counter) ".";
  position: absolute;
  left: 0;
  /* フォールバック → calcで1行目センターに揃える */
  top: 10px;
  top: calc(3px + (1lh - 22px)/2);
  background: #1a4b83;
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 4px;
}

/* ===============================
   第2階層：ゴールドの■（H3以下）
   ─ 折り返しで潜らないよう absolute 配置
=============================== */
.toc-list li li > a::before{
  content: "";
  position: absolute;
  left: 0;
  top: calc(3px + (1lh - 10px)/2); /* 1行目センター */
  width: 10px;
  height: 10px;
  background: #f2b960;
  border-radius: 2px; /* 角丸不要なら削除 */
}

/* ===============================
   階層別オーバーライド（調整ポイント）
=============================== */
/* H2（数字バッジ）：22px + 余白12px = 34px */
.toc-list > li > a { padding-left: 34px; }
.toc-list > li > a::after { left: 34px; }

/* H3以下（■）：10px + 余白8px = 18px */
.toc-list li li > a { padding-left: 18px; }
.toc-list li li > a::after { left: 18px; }




/* ===============================
   スクロール位置調整（固定ヘッダー対策）
=============================== */
.entry-content [id]::before{
  content: "";
  display: block;
  height: 100px;
  margin-top: -100px;
  pointer-events: none;
}


/* ===============================
   コクーン見出し無効▼
=============================== */
.article h2::before {
border-top: none;
}
.article h2::after {
border-bottom: none;
}
.article h2{
border: none;
}
.article h3::before {
border-top: none;
}
.article h3::after {
border-bottom: none;
}
.article h3{
border: none;
}
.article h4::before {
border-top: none;
}
.article h4::after {
border-bottom: none;
}
.article h4{
border: none;
}
.article h5::before {
border-top: none;
}
.article h5::after {
border-bottom: none;
}
.article h5{
border: none;
}
.article h6::before {
border-top: none;
}
.article h6::after {
border-bottom: none;
}
.article h6{
border: none;
}

/* ===============================
   コクーン見出し無効▲
=============================== */

/* ===============================
   タブボックス幅変更▼
=============================== */
.entry-content .cocoon-block-tab .tab-label-group {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr; /* ← 等分 */
}

.entry-content .cocoon-block-tab .tab-label{
  padding-top: 8px;
  padding-bottom: 8px;
  /* または padding-block: 8px; でもOK */
  font-weight: 700;
}
/* ===============================
   タブボックス幅変更▲
=============================== */

/* 文字部分だけ塗りたい場合（任意、不要なら外してOK） */
.wp-block-cocoon-blocks-label-box-1 .label-box-label-text{
  background: #fff;
  /* padding: 0 .3em;  ← 文字周りだけ少し塗りを広げたい時だけ */
}

/* サイドバー見出し：人気記事 / 目次（中央200pxの二色下線＋右端ゴールドのカットイン＋英語副題） */
h3.widget-sidebar-title.widget-title,
h3.widget-sidebar-scroll-title.widget-title{
  position: relative;
  background: #fff;
  text-align: center;             /* 見出しテキストは中央 */
  padding-bottom: 23px;        /* ★ 下線＋副題の余白を23に変更 */
  margin: 1rem 0 .75rem;
  z-index: 0;

/* 下線：上=青3px、下=金5px、合計8pxで200px固定 */
background-image: linear-gradient(
  to bottom,
  #1a4b83 0 3px,       /* 青を3px */
  #f2b960 3px 8px      /* 金を5px */
);
background-repeat: no-repeat;
background-size: 200px 8px;       /* 幅200px × 高さ8px */
background-position: center bottom;

}

/* カットイン（金を右端にシュッと上げる） */
h3.widget-sidebar-title.widget-title::before,
h3.widget-sidebar-scroll-title.widget-title::before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(calc(100px - 20px)); /* 200px下線の右端−幅20px */
  width: 20px;                /* 幅20px */
  height: 20px;               /* 高さ20px */
  background: #f2b960;
  clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
  z-index: 1;
  pointer-events: none;
}

/* ── 英語副題（下線のすぐ上に中央揃え） ── */
h3.widget-sidebar-title.widget-title::after{
  content: "- Popular -";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 10px;                  /* ★ 下線に近づけた */
  font-size: 11px;
  line-height: 1;
  letter-spacing: .08em;
  color: #333;                   /* ★ ダークグレーに変更 */
  opacity: .9;                   /* 少し濃くして視認性UP */
  z-index: 2;
  pointer-events: none;
}

h3.widget-sidebar-scroll-title.widget-title::after{
  content: "- Contents -";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 10px;                  /* ★ 下線に近づけた */
  font-size: 11px;
  line-height: 1;
  letter-spacing: .08em;
  color: #333;                   /* ★ ダークグレーに変更 */
  opacity: .9;
  z-index: 2;
  pointer-events: none;
}





/* PC：3カラム */
.ap-related{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

/* カードの見た目（リンク色を継承＆装飾をOFF） */
.ap-related .ap-card a{ 
  position:relative; display:block; color:inherit; text-decoration:none;
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.ap-related .ap-card a:hover,
.ap-related .ap-card a:visited{ color:inherit; }   /* 青→赤問題を抑止 */

/* サムネ＆拡大演出 */
.ap-related .ap-thumb{ position:relative; overflow:hidden; }
.ap-related .ap-thumb img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; transition:transform .3s ease; }
.ap-related .ap-card a:hover .ap-thumb img{ transform:scale(1.1); } /* 10%拡大 */

/* 薄いホバー背景（カード全体） */
.ap-related .ap-card a::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.06); opacity:0; transition:opacity .2s ease;
}
.ap-related .ap-card a:hover::after{ opacity:1; }

/* タイトル */
.ap-related .ap-title{ font-size:14px; line-height:1.5; margin:8px 12px 12px; color:#111; }

/* 左上タグ（カルーセル風） */
.ap-related .ap-tag{
  position:absolute; top:8px; left:8px; z-index:2;
  display:inline-block; padding:2px 8px; font-size:12px; line-height:1.6;
  color:#fff; background:rgba(0,0,0,.6); border-radius:9999px; backdrop-filter:blur(2px);
}

/* SP：1カラム、左サムネ／右タイトル */
@media (max-width:768px){
  .ap-related{ display:block; }
  .ap-related .ap-card{ margin:10px 0; }
  .ap-related .ap-card a{ display:flex; align-items:center; gap:12px; }
  .ap-related .ap-thumb{ flex:0 0 auto; width:120px; height:80px; border-radius:8px; }
  .ap-related .ap-thumb img{ width:120px; height:80px; aspect-ratio:auto; }
  .ap-related .ap-title{ margin:0; font-size:14px; }
}
/* カードの角丸＆枠線をオフ */
.ap-related .ap-card a{
  border: none;
  border-radius: 0;
}

/* アイキャッチ（サムネ）の角丸をオフ（PC/SP共通） */
.ap-related .ap-thumb,
.ap-related .ap-thumb img{
  border-radius: 0;
}

/* SP用で角丸を付けていた場合の上書き */
@media (max-width:768px){
  .ap-related .ap-thumb{ border-radius: 0; }
  .ap-related .ap-thumb img{ border-radius: 0; }
}


/* 左上タグ：角丸なし・白枠・文字小さめ */
.ap-related .ap-tag{
  border-radius: 0;
  border: 1px solid #fff;
  background: rgba(0,0,0,.45);  /* うっすら背景は残して視認性キープ */
  font-size: 11px;
  padding: 2px 6px;
  line-height: 1.6;
  top: 2px;
  left: 2px;
}
@media (max-width:768px){
  .ap-related .ap-tag{
    font-size: 10px;
    padding: 1px 5px;
  }
}




/* サイトカラー */
:root{
  --ap-color-primary: #6a6a6a;  /* 青 */
  --ap-color-gold:    #1a4b83;  /* 金 */
}

/* もっとみるボタン（通常） */
.c-related-more{
  margin-top:16px;
  text-align:center;   /* ← ボタンを中央寄せ */
}

.c-btn.c-btn--more{
  display:inline-block;
  padding:.85em 1.25em;
  background:var(--ap-color-primary);
  color:#fff;
  text-decoration:none;
  border:none;
  border-radius:4px;             /* ← 通常はわずかに角丸 */
  line-height:1.4;
  font-size:.95rem;
  font-weight:600;
  text-align:center;
  white-space:normal;            /* 改行 <br> を有効 */
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  transform:scale(1);            /* 基準サイズ */
  transition:
    background-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease,
    border-radius .18s ease,     /* ← ホバー時の角丸変化を滑らかに */
    color .18s ease;
  cursor:pointer;
}

/* ホバー／フォーカス時 */
.c-btn.c-btn--more:hover,
.c-btn.c-btn--more:focus-visible{
  background:var(--ap-color-gold);
  color:#fff;
  transform:scale(1.05);         /* 5%大きく */
  border-radius:3px;             /* ← ホバー時はさらにシャープに */
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  outline:none;
}

/* モバイルで幅いっぱいにしたい時（任意） */
/*
.c-related-more .c-btn.c-btn--more{ width:100%; }
*/

/* 視覚効果を控えたい人向け */
@media (prefers-reduced-motion: reduce){
  .c-btn.c-btn--more{ transition:none; }
}










/* ====== ColorDB フォーム：ピル型チェックボックス ====== */
/* ====== ColorDB フォーム：ピル型チェックボックス ====== */
.ap-colordb-archive .searchandfilter ul{
  margin:0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:.5rem .5rem;
}
.ap-colordb-archive .searchandfilter ul li{
  margin:0; padding:0; list-style:none;
}

/* チェックボックスは非表示、ラベルをボタン化 */
.ap-colordb-archive .searchandfilter input[type="checkbox"]{
  position:absolute; opacity:0; pointer-events:none;
}
.ap-colordb-archive .searchandfilter label{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.46rem .84rem;              /* ほんの少しだけ内側余白を広げる */
  border:1px solid #1a4b83;
  border-radius:4px;                 /* 角の丸みを控えめに */
  font-size:.90rem; line-height:1;
  color:#1a4b83; background:#fff; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.ap-colordb-archive .searchandfilter input[type="checkbox"]:checked + label{
  background:#1a4b83; color:#fff; border-color:#1a4b83;
  box-shadow:0 0 0 2px rgba(26,75,131,.15);
}
.ap-colordb-archive .searchandfilter label:hover{
  background:#f2f7ff;
}

/* 見出しやブロック間余白 */
.ap-colordb-archive .sf-field-taxonomy,
.ap-colordb-archive .sf-field-submit,
.ap-colordb-archive .sf-field-reset{
  margin-bottom:.75rem;
}
.ap-colordb-archive .sf-field-taxonomy > .sf-label,
.ap-colordb-archive .sf-field-taxonomy > label{
  display:block; font-weight:600; margin-bottom:.35rem;
}

/* ===== ボタン共通の寸法（高さ・角丸・左右余白）を統一 ===== */
.ap-colordb-archive{
  --ap-btn-h: 42px;     /* ボタン高さ：必要なら 40–44px で微調整OK */
  --ap-btn-px: 16px;    /* 左右パディング */
  --ap-btn-radius: 4px; /* 角丸 */
  --ap-accent: #1a4b83; /* テーマ色（必要なら変更） */
}

/* 送信とリセットの“中身そのもの”に寸法を適用（強めに当てる） */
.ap-colordb-archive .searchandfilter li.sf-field-submit > input[type="submit"],
.ap-colordb-archive .searchandfilter li.sf-field-reset  > a.search-filter-reset{
  box-sizing:border-box;
  height:var(--ap-btn-h) !important;
  line-height:var(--ap-btn-h) !important; /* テキストの縦位置安定 */
  padding:0 var(--ap-btn-px) !important;
  border-radius:var(--ap-btn-radius) !important;
  font:inherit; font-weight:600;
  display:inline-block; text-align:center;
  cursor:pointer; text-decoration:none;
}

/* 主ボタン：絞り込む（塗り） */
.ap-colordb-archive .searchandfilter li.sf-field-submit > input[type="submit"]{
  background:var(--ap-accent) !important;
  color:#fff !important; border:0 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.08) !important;
  transition:transform .02s ease, filter .15s ease, box-shadow .2s ease;
}
.ap-colordb-archive .searchandfilter li.sf-field-submit > input[type="submit"]:hover{ filter:brightness(1.06); }
.ap-colordb-archive .searchandfilter li.sf-field-submit > input[type="submit"]:active{ transform:translateY(1px); }
.ap-colordb-archive .searchandfilter li.sf-field-submit > input[type="submit"]:focus-visible{
  outline:2px solid #d2e4ff; outline-offset:2px;
}

/* 副ボタン：条件をクリア（アウトライン） */
.ap-colordb-archive .searchandfilter li.sf-field-reset > a.search-filter-reset{
  background:#fff !important; color:var(--ap-accent) !important;
  border:1px solid #b8c7da !important;
  transition:background .15s ease, border-color .15s ease;
  margin-left:.5rem; /* 横並び時の間隔。縦積み運用なら消してOK */
}
.ap-colordb-archive .searchandfilter li.sf-field-reset > a.search-filter-reset:hover{
  background:#f7fbff; border-color:#9fb3cc;
}
.ap-colordb-archive .searchandfilter li.sf-field-reset > a.search-filter-reset:focus-visible{
  outline:2px solid #e4eefc; outline-offset:2px;
}















/* ====== ColorDB 一覧 共通 ====== */
.ap-colordb-archive .ap-colordb-results.ap-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.4rem; /* 余白半分 */
}
@media (min-width:1024px){
  .ap-colordb-archive .ap-colordb-results.ap-grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:.5rem;
  }
}

/* カード */
.ap-colordb-archive .ap-card{
  display:flex; flex-direction:column; gap:.5rem;
  background:#fff; border:none; overflow:hidden;
  transition:background-color .2s ease;
}
.ap-colordb-archive .ap-card:hover{ background:#f7f7f7; } /* 薄いグレー */

.ap-colordb-archive .ap-card__thumb{ position:relative; overflow:hidden; }
.ap-colordb-archive .ap-card__thumb img{
  width:100%; height:auto; display:block;
  aspect-ratio:16/9; object-fit:cover;
  transform:scale(1); transition:transform .25s ease;
}
.ap-colordb-archive .ap-card:hover .ap-card__thumb img{ transform:scale(1.1); } /* 10%ズーム */

/* 左上タグ（表示のみ） */
.ap-colordb-archive .ap-card__thumb .ap-tag{
  position:absolute; top:2px; left:2px;
  border-radius:0; border:1px solid #fff;
  background:rgba(0,0,0,.45);
  color:#fff; line-height:1.6; font-size:11px; padding:2px 6px;
  pointer-events:none; user-select:none;
}
@media (max-width:768px){
  .ap-colordb-archive .ap-card__thumb .ap-tag{ font-size:10px; padding:1px 5px; }
}

/* タイトル：常に3行ぶんの高さを確保（2行でも3行分のスペースを維持） */
.ap-colordb-archive .ap-card__title{ margin:0 .75rem; }
.ap-colordb-archive .ap-card__title a{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; text-decoration:none; color:inherit;
  font-size:1rem; line-height:1.4;
  min-height:calc(1.4em * 3); max-height:calc(1.4em * 3);
}

/* 日付 */
.ap-colordb-archive .ap-card__foot{
  display:flex; align-items:center; justify-content:flex-start;
  padding:0 .75rem .75rem;
}
.ap-colordb-archive .ap-date{ font-size:.85rem; color:#666; }

/* フォームと結果の間のスペース */
.ap-colordb-archive .ap-search{ margin-bottom:16px; }
@media (min-width:1024px){
  .ap-colordb-archive .ap-search{ margin-bottom:24px; }
}

/* 日付の前に「丸矢印（更新）」アイコンを追加（文字グリフ版） */
.ap-colordb-archive .ap-date{
  display:inline-flex; align-items:center; gap:.4em;
}
.ap-colordb-archive .ap-date::before{
  content:"⟳";           /* 候補1：⟳（U+27F3）／候補2：↻（U+21BB） */
  font-size:1em;
  line-height:1;
  opacity:.9;            /* ほんのり落として主張を抑える */
  transform:translateY(-1px); /* 視覚センタリング微調整 */
}
/* 中央揃えを安定させる：行高を1に＆少しだけ下げる */
.ap-colordb-archive .ap-date{
  display:inline-flex; align-items:center; gap:.4em; line-height:1;
}
.ap-colordb-archive .ap-date::before{
  content:"⟳"; font-size:1em; line-height:1; opacity:.9;
  transform:translateY(0.08em); /* 0.06–0.12emで微調整OK */
}







/* ===== Single ColorDB：疑似タグ行（詰め＆黒ベース） ===== */
.ap-colordb-single .ap-article-head{ margin-bottom:.75rem; }

.ap-colordb-single .ap-pseudotags ul{
  margin:.45rem 0 .9rem;           /* 少し詰める */
  padding:0; list-style:none;
  display:flex; flex-wrap:wrap;
  gap:.35rem .45rem;               /* タグ間も少し詰める */
}
.ap-colordb-single .ap-pseudotags li{ margin:0; padding:0; list-style:none; }

.ap-colordb-single .ap-pseudotags a.ap-tag{
  display:inline-flex; align-items:center; gap:.45em;
  padding:.30rem .338rem;          /* 内側余白を少しだけ減 */
  border:none;                     /* 外周線なし */
  border-radius:2px;               /* 角2px */
  background:#000;                 /* 黒背景 */
  color:#fff;                      /* 白フォント */
  text-decoration:none;
  line-height:1.2;                 /* ほんのり詰め気味 */
  font-size:.74rem;
  transition:background .15s ease;
}
.ap-colordb-single .ap-pseudotags a.ap-tag:hover{
  background:#333;                 /* ホバーでグレー */
}

/* 疑似タグ：フォルダアイコン（縦+15%＆上に0.10em, 競合排除のため1本化） */
body.ap-colordb-single .ap-pseudotags ul li a.ap-tag::before{
  content:"";
  display:inline-block;
  width:1.25em;              /* 横は1.25emのまま */
  height:1.25em;             /* ベースの高さ */
  flex:0 0 1.25em;
  background-color: currentColor;

  /* ← ここで“いっぺんに”やる：上に0.10em＆縦方向に1.15倍 */
  transform: translateY(-0.10em) scaleY(1.15);
  transform-origin: center;

  /* マスクは常に要素サイズいっぱい */
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M10 4h1.6l1.8 2H20a2 2 0 0 1 2 2v2H2V6a2 2 0 0 1 2-2h6zM22 9v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9h20z"/>\
</svg>') center / 100% 100% no-repeat;
          mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M10 4h1.6l1.8 2H20a2 2 0 0 1 2 2v2H2V6a2 2 0 0 1 2-2h6zM22 9v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9h20z"/>\
</svg>') center / 100% 100% no-repeat;
}

/* 目印クラスがある場合の短縮版 */
body.ap-colordb-single .entry-tags{ display:none !important; }