/* =========================
   Tag page base reset
   （テーマ側の“全体枠”をタグだけ無効化）
========================= */
body.tag #topigai,
body.tag #contents,
body.tag #main,
body.tag #inside{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* 幅や余白で“枠っぽく見える”のも止める */
body.tag #inside,
body.tag #main,
body.tag #contents{
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   PIXEL.ORDER Tag Archive (po-tag.css)
   - /archives/tag/〜 のカード表示を安定化
   ========================================================= */

/* 斜め演出などの残骸を、この範囲だけ無効化 */
#inside .po-tagArchive,
#inside .po-tagArchive *{
  transform: none !important;
}

/* 全体幅 */
#inside{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 14px;
}

/* タグの見出し枠（既存クラスに合わせる） */
.po-archiveIntro{
  margin: 12px 0 18px;
  padding: 16px 16px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background: rgba(0,0,0,0.14);
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
}
.po-archiveIntro__main{
  margin: 0;
  font-weight: 900;
  letter-spacing: .03em;
  line-height: 1.6;
}
.po-archiveIntro__sub{
  margin: 8px 0 0;
  opacity: .78;
  font-size: 13px;
  line-height: 1.85;
}

/* グリッド */
#inside .po-tagArchive{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 10px 0 22px;
}

/* カード */
#inside .po-tagArchive .po-archiveCard{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background: rgba(0,0,0,0.18);
  box-shadow: 0 16px 40px rgba(0,0,0,0.26);
  overflow: hidden;
}

/* サムネ枠：ここで“でかい画像”を封じる */
#inside .po-tagArchive .po-archiveCard__thumb{
  display: block;
  width: 100%;
  overflow: hidden;
  /* 高さ揃えの本体：比率固定が一番崩れない */
  aspect-ratio: 4 / 3;
}

/* 画像：中央寄せでトリミング */
#inside .po-tagArchive .po-archiveCard__thumb img,
#inside .po-tagArchive .po-tagCard__img{
  width: 100%;
  /*height: 100%;*/
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}

/* タイトル */
#inside .po-tagArchive .po-archiveCard__title{
  display: block;
  padding: 12px 14px 14px;
  text-decoration: none;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.02em;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* hover */
@media (hover:hover){
  #inside .po-tagArchive .po-archiveCard:hover{
    filter: brightness(1.04);
    border-color: rgba(255,255,255,0.20);
    transform: translateY(-2px);
  }
}

/* pager 余白 */
.po-archivePager{
  padding: 8px 0 24px;
}

/* Responsive */
@media (max-width: 900px){
  #inside .po-tagArchive{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  #inside .po-tagArchive{ grid-template-columns: 1fr; }
}

/* =========================================================
   Tag CTA (C-1 light hub)
   - タグページだけに“軽い購入導線”
   ========================================================= */
.po-tagCta{
  margin: 12px auto 18px;
  max-width: 860px;
  padding: 14px 14px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0));
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
}

.po-tagCta__title{
  font-weight: 800;
  letter-spacing: 0.03em;
  margin: 0 0 10px;
  opacity: 0.98;
}

.po-tagCta__main{
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 10px;
}

.po-tagCta .po-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 18px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 800;
  line-height: 1;
  box-sizing: border-box;
}

.po-tagCta .po-btn > span{
  display: inline-block;
  line-height: 1.25;
}

@media (min-width: 521px){
  .po-tagCta__main{ flex-wrap: nowrap; }
  .po-tagCta__main .po-btn{
    flex: 1 1 0;
    width: 0;
    max-width: 320px;
  }
}

@media (max-width: 520px){
  .po-tagCta .po-btn{
    width: 100%;
    height: 50px;
  }
}

.po-tagCta .po-btn--primary{
  background: rgba(255,153,51,0.95);
  border: 2px solid rgba(255,153,51,0.95);
  color: #000;
}

.po-tagCta .po-btn--sub{
  background: transparent;
  border: 2px solid rgba(255,255,255,0.70);
  color: #fff;
}

.po-tagCta__others{
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.92rem;
  opacity: 0.90;
}

.po-tagCta__others a{ text-decoration: underline; }

.po-archiveIntro__hint{
  margin: 8px 0 0;
  font-size: 0.95rem;
  line-height: 1.75;
  opacity: 0.88;
}

/* --- tag archive: 変な外枠（フレーム）を消す --- */
body.tag #page,
body.tag #wrap,
body.tag #wrapper,
body.tag #contents,
body.tag #main,
body.tag #content,
body.tag #container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}











/* tag archive: フレーム元が #main / #inside の場合を完全に潰す */
html body.tag #main,
html body.tag #inside {
  background: none !important;        /* background-image もまとめて消える */
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: 0 !important;
  filter: none !important;            /* drop-shadow系対策 */
}

/* 疑似要素で枠を描いてるケース */
html body.tag #main::before,
html body.tag #main::after,
html body.tag #inside::before,
html body.tag #inside::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* border-image を使ってるケース（念のため） */
html body.tag #main,
html body.tag #inside {
  border-image: none !important;
}

/* tagページだけ：#main のフレーム要素を消す */
body.tag #main{
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* tagページ：フレームの本体は #inside */
body.tag #inside{
  background-image: none !important;
  background-color: transparent !important;

  border: 0 !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;

  border-radius: 0 !important;
}

/* 余白まで「枠っぽい」なら（必要なときだけ） */
body.tag #inside{
  padding: 0 !important;
}

/* tag archive：フレームの正体（#main + #inside の背景画像）を殺す */
body.tag #main,
body.tag #inside{
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* まだ「枠っぽい」余白が残るときだけON */
body.tag #main,
body.tag #inside{
  padding: 0 !important;
}

/* tag archive: #main / #inside の背景フレームを強制的に消す */
#main,
#inside{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}