/* ============================================================================
 * tag_article_list_style.css   ―  デザイン刷新版（方向性D4：マット・アシンメトリー）
 * ----------------------------------------------------------------------------
 * 公開パス: /css/tag_article_list_style.css
 * 読込元  : tag_article_list_controller.php の <?php echo TAG_STYLE_HREF ?>
 *
 * 【安全性（変更なし）】
 *   ・html / body / :root、全称セレクター、要素単独セレクターは使用しない。
 *   ・既存サイトと共有し得るクラス（article02_head 等）は、すべて本機能の
 *     ルートクラス .tag_article_list_section 配下へスコープ限定する。
 *   ・アニメーションは prefers-reduced-motion で無効化する。
 * ========================================================================= */

/* ============================================================================
 * 0. デザイントークン
 * ----------------------------------------------------------------------------
 * [記事出力部分：変更禁止の変数]
 *   --tal-neon-pink / --tal-neon-cyan / --tal-neon-lime / --tal-neon-purple
 *   --tal-radius / --tal-ease / --tal-pr / --tal-pr-bg
 *   → 記事カードのホバー演出（虹色回転）・article02_body の下線・
 *     角丸・PRバッジで使用中のため、値を一切変更しない。
 * [今回変更する変数]
 *   --tal-matte*（縁・見出し・タブの地色）、--tal-accent*（アクセント）、
 *   --tal-asym-lg / --tal-asym-sm（非対称角丸の大小2値）、
 *   --tal-tab-ease（ジャンルボタン専用のアニメーション速度）
 * ========================================================================= */
.tag_article_list_section {
  --tal-bg1: #1c2226;
  --tal-bg2: #262e33;
  --tal-bg3: #14181b;
  --tal-ink: #e9edef;
  --tal-muted: #93a0a6;
  /* マット（つや消し）な地色。光沢を避け、彩度を落とした落ち着いた色調。 */
  --tal-matte-1: #2a3338;
  --tal-matte-2: #333e44;
  --tal-matte-3: #1e2529;
  /* アクセントはくすんだスモーキーティール1色（縁・見出し・タブの地の
     アクセントに使用。発色は抑えめ）。 */
  --tal-accent: #4d8a86;
  --tal-accent-deep: #326361;
  --tal-accent-soft: rgba(77, 138, 134, .18);
  /* [色変更対応] ジャンルボタンの「選択中」だけに使う、はっきり目立つ
     配色。白文字が確実に読めるよう、明るいアンバー単色ではなく
     コクのある深いオレンジ〜バーガンディ寄りのグラデーションにする
     （マットな全体トーンの中で唯一鮮やかに発色させる）。 */
  --tal-select-1: #d9752e;
  --tal-select-2: #a8431f;
  --tal-select-deep: #7a2c17;
  /* [タブ再変更対応] 未選択タブのテキスト色。従来の低彩度グレー
     （--tal-mutedをタブ文字に流用）は視認性が弱かったため、タブ専用に
     明るい寒色系のオフホワイトを新設する。選択中(白)よりわずかに
     明度を落とし、状態の違いを感じさせつつ、単体でも十分読める強さを
     持たせる。 */
  --tal-tab-text: #d8e0e6;
  /* [記事出力部分：変更禁止] 元の値のまま維持。 */
  --tal-neon-pink: #ff2fd0;
  --tal-neon-cyan: #21f2ff;
  --tal-neon-lime: #c6ff21;
  --tal-neon-purple: #8a2fff;
  --tal-pr: #ffd23f;
  --tal-pr-bg: rgba(20, 10, 35, .85);
  --tal-radius: 18px;
  --tal-ease: cubic-bezier(.2,.9,.25,1.3);
  /* [キーモチーフ] 非対称の角丸。大小2値を全体で使い回し統一感を出す。 */
  --tal-asym-lg: 28px;
  --tal-asym-sm: 4px;
  /* ジャンルボタン専用のアニメーション速度（記事側とは独立）。 */
  --tal-tab-ease: cubic-bezier(.25,.8,.3,1.1);

  position: relative;
  box-sizing: border-box;
  max-width: 1320px;
  margin: 48px auto;
  padding: 0;
  overflow: hidden;
  color: var(--tal-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
               "Noto Sans JP", Meiryo, sans-serif;
  /* [①縁対応] くすんだダークネイビーのマットなグラデーション背景。
     彩度を落とし、光を反射する印象を避ける。 */
  background: linear-gradient(165deg, var(--tal-bg1) 0%, var(--tal-bg2) 55%, var(--tal-bg3) 100%);
  /* [①縁対応・キーモチーフ] 非対称角丸（左上・右下を大きく、
     右上・左下を小さく）。単純な一重枠ではなく、外周をマットな
     ティール系グラデーションで縁取り、内側にもう1本細いラインを
     重ねる二重構成で奥行きを出す。 */
  border-radius: var(--tal-asym-lg) var(--tal-asym-sm) var(--tal-asym-lg) var(--tal-asym-sm);
  border: 2px solid transparent;
  border-image: linear-gradient(135deg,
    var(--tal-accent) 0%, var(--tal-matte-2) 45%, var(--tal-accent-deep) 100%) 1;
  box-shadow:
    0 0 0 1px rgba(77, 138, 134, .25),
    inset 0 0 0 6px rgba(0, 0, 0, .18),
    0 24px 60px -20px rgba(0, 0, 0, .7);
}
.tag_article_list_section * { box-sizing: border-box; }
/* [①縁対応] 内側のアクセントラインを疑似要素で重ね、二重の縁取りに
   奥行きを持たせる。装飾のみでクリックは透過する。派手な発光は使わず、
   ごく細い1本のラインに留めてマットな印象を保つ。 */
.tag_article_list_section::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 0;
  pointer-events: none;
  border-radius: calc(var(--tal-asym-lg) - 8px) calc(var(--tal-asym-sm) + 2px)
                 calc(var(--tal-asym-lg) - 8px) calc(var(--tal-asym-sm) + 2px);
  border: 1px solid rgba(77, 138, 134, .35);
}
/* [①縁対応] 右上・左下の鋭角側にだけ、ごく控えめなアクセント色の
   グロー（にじみ）を置き、非対称であることを視覚的に補強する。 */
.tag_article_list_section::after {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 180px;
  height: 180px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, var(--tal-accent-soft) 0%, transparent 70%);
}
/* 四隅の装飾span（コントローラー出力）は非表示のまま（変更なし）。 */
.tag_article_list_section .tag_article_list_corner { display: none; }

/* ============================================================================
 * 1. ヘッダー ― マットな質感＋非対称の「タグ風下敷き」で見せる見出し
 * ========================================================================= */
.tag_article_list_header {
  position: relative;
  z-index: 1;
  padding: 48px 44px 26px;
}
.tag_article_list_header__lead {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 2rem;
  line-height: 1.7;
  color: var(--tal-muted);
}
.tag_article_list_status_notice {
  position: relative;
  z-index: 1;
  margin: 18px 44px 0;
  padding: 12px 16px;
  border: 1px solid rgba(77, 138, 134, .4);
  border-radius: var(--tal-asym-sm) var(--tal-asym-sm) var(--tal-asym-sm) var(--tal-asym-sm);
  background: rgba(77, 138, 134, .08);
  color: var(--tal-ink);
  font-size: .92rem;
}
.tag_article_list_pr_notice { display: none; }

/* ============================================================================
 * 2. ジャンルタブ ― 非対称角丸のカプセル型（丸ピル・台形とは違う独自形状）
 * ========================================================================= */
.tag_article_list_section:not(.tag_article_list_section--js) .tag_article_list_nav {
  display: none;
}
.tag_article_list_nav {
  position: relative;
  z-index: 1;
  padding: 8px 44px 44px;
}
.tag_article_list_nav::before {
  content: "";
  position: absolute;
  left: 44px;
  right: 44px;
  bottom: 15px;
  height: 4px;
  z-index: 0;
  background: linear-gradient(90deg,
    transparent 0%, #000000 10%, #000000 90%, transparent 100%);
  opacity: .85;
}
/* [本改訂："Discover" 文字列を撤去]
   .tag_article_list_nav::after（中央のテキスト疑似要素）を削除した。
   仕切り線（::before）はそのまま維持する。 */
/* JS無効時（タブ列自体が非表示）は仕切り線も表示しない。 */
.tag_article_list_section:not(.tag_article_list_section--js) .tag_article_list_nav::before {
  display: none;
}
/* [幅調整対応] font-size:1.8rem のラベルを維持したまま336px幅・1行配置
   だと、4ボタン合計が1320px幅のセクションに収まらないと試算されたため、
   「幅を狭めて1行に収める。収まらなければ2行」というご指示に基づき、
   2行×2列のグリッド配置に変更する。これにより1ボタンあたりの利用可能
   幅が大きく確保でき、1.8remの文字サイズを保ったまま無理なく収まる。 */
.tag_article_list_tablist {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
  /* [マージン追加] ジャンルボタン群と下部の仕切り線との間に余白を持たせる。 */
  margin: 0 auto 24px;
  padding: 0 0 6px;
  max-width: 1100px;
}
/* [幅調整対応] 2行×2列グリッド化により横スクロールは発生しなくなった
   ため本来不要だが、将来ジャンル数が増えて再び横スクロールが必要に
   なった場合に備え、スタイルはそのまま残しておく（無害）。 */
.tag_article_list_tablist::-webkit-scrollbar { height: 5px; }
.tag_article_list_tablist::-webkit-scrollbar-thumb {
  background: var(--tal-accent);
  border-radius: 999px;
}
/* [③ジャンルボタン対応・キーモチーフ] 丸ピルでも台形でもない、非対称の
   角丸カプセル。左上・右下を大きく丸め、右上・左下は小さく鋭角寄りに
   することで、全体（縁・見出し）と統一感を持たせつつ独自性を出す。 */
.tag_article_list_section .tag_article_list_tab {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
  position: relative;
  /* [幅調整対応] タブリストが2行×2列のグリッドに変わったため、ボタン
     自体は固定width/flex-basisをやめ、グリッドセル幅いっぱいに広がる
     ようにする（全ボタンが自然に同一幅になり、幅の統一も引き続き
     保たれる）。 */
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* ボタン自体のfont-size（アイコン等に適用。ラベル文字は__labelの
     1.8rem指定が優先される）。 */
  font-size: 1.42rem;
  font-weight: 700;
  /* [視認性対応] 未選択タブの文字色は、従来の低彩度グレー(--tal-muted)
     から専用の明るい寒色系オフホワイト(--tal-tab-text)に変更する。
     選択中(純白)よりわずかに明度を落とすことで状態の違いを感じさせ
     つつ、単体でも十分な視認性を確保する（クリーム背景と同化しない
     寒色系であることも兼ねて確認済み）。 */
  color: var(--tal-tab-text);
  background: var(--tal-matte-1);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 22px 6px 22px 6px;
  transition: color .2s var(--tal-tab-ease), background .2s var(--tal-tab-ease),
              border-color .2s var(--tal-tab-ease), transform .2s var(--tal-tab-ease);
}
.tag_article_list_section .tag_article_list_tab::-moz-focus-inner { border: 0; }
.tag_article_list_section .tag_article_list_tab:hover {
  color: #ffffff;
  background: var(--tal-matte-2);
  border-color: rgba(77, 138, 134, .5);
  transform: translateY(-2px);
}
/* [色変更対応] 選択中のテキストは白に統一する。それに合わせて背景も、
   白文字が確実に読めるコントラストを確保できる、深みのあるオレンジ系
   グラデーションに調整する（単色べた塗りではなく濃淡をつけることで
   マットな質感の中でも立体感を持たせる）。 */
.tag_article_list_section .tag_article_list_tab[aria-selected="true"] {
  color: #ffffff;
  font-weight: 800;
  background: linear-gradient(155deg, var(--tal-select-1) 0%, var(--tal-select-2) 100%);
  border-color: var(--tal-select-deep);
  box-shadow: 0 4px 14px -4px rgba(169, 67, 31, .55);
}
.tag_article_list_section .tag_article_list_tab:focus-visible {
  outline: 2px solid var(--tal-select-1);
  outline-offset: 3px;
}
.tag_article_list_section .tag_article_list_tab__pr {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--tal-pr-bg);
  color: var(--tal-pr);
  border: 1px solid var(--tal-pr);
  font-size: .7em;
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1.6;
  text-shadow: 0 0 6px rgba(255, 210, 63, .8);
}
.tag_article_list_tab__ico { font-size: 1.1em; }
/* [文字サイズ指定対応] PC幅ではラベル自体に直接フォントサイズを指定する。 */
.tag_article_list_tab__label { white-space: nowrap; font-size: 1.8rem; }
.tag_article_list_tab--pr { /* 見た目は他タブと統一。__pr チップのみで区別。 */ }

/* ============================================================================
 * 3. 記事グリッド〜記事カード（変更禁止範囲）
 * ----------------------------------------------------------------------------
 * 以下は記事出力部分。前版から一切変更していない（値も含め従来どおり）。
 * ========================================================================= */
.tag_article_list_panel { position: relative; z-index: 1; padding: 34px 44px 48px; }
.tag_article_list_grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 30px;
  margin: 0;
  padding: 0;
}
.tag_article_list_status {
  grid-column: 1 / -1;
  padding: 48px 20px;
  text-align: center;
  color: var(--tal-muted);
  font-size: 1.05rem;
}
.tag_article_list_grid > li {
  margin: 0 !important;
  list-style: none;
}
.tag_article_list_section .tag_article_list_grid > li > a {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--tal-radius);
  overflow: hidden;
  background: rgba(20, 10, 40, .55);
  clip-path: polygon(0 0, 100% 0, 100% 92%, 92% 100%, 0 100%);
  border: 2px solid rgba(255, 255, 255, .08);
  transition: transform .32s var(--tal-ease), border-color .3s ease;
}
.tag_article_list_section .tag_article_list_grid > li > a::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from 0deg,
    var(--tal-neon-pink), var(--tal-neon-purple), var(--tal-neon-cyan),
    var(--tal-neon-lime), var(--tal-neon-pink));
  opacity: 0;
  transition: opacity .3s ease;
  animation: tal-card-spin 3.2s linear infinite paused;
}
.tag_article_list_section .tag_article_list_grid > li > a:hover,
.tag_article_list_section .tag_article_list_grid > li > a:focus-visible {
  transform: translateY(-10px) scale(1.02);
}
.tag_article_list_section .tag_article_list_grid > li > a:hover::before,
.tag_article_list_section .tag_article_list_grid > li > a:focus-visible::before {
  opacity: 1;
  animation-play-state: running;
}
@keyframes tal-card-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.tag_article_list_section .tag_article_list_grid > li > a:focus-visible {
  outline: 3px solid var(--tal-neon-lime);
  outline-offset: 4px;
}
.tag_article_list_section .article02_head {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #150a2b;
}
.tag_article_list_section .article02_head figure {
  margin: 0;
  width: 100%;
  height: 100%;
  line-height: 0;
}
.tag_article_list_section .tag_article_list_grid > li > a img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.35) contrast(1.12);
  transition: transform .6s var(--tal-ease), filter .4s ease;
}
.tag_article_list_section .tag_article_list_grid > li > a:hover img {
  transform: scale(1.14) rotate(-1.5deg);
  filter: saturate(1.7) contrast(1.2);
}
.tag_article_list_section .article02_body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 16px 16px 18px;
  background: rgba(8, 4, 20, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--tal-neon-pink), var(--tal-neon-cyan)) 1;
}
.tag_article_list_section .article02_title {
  margin: 0;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.55;
  text-shadow:
    0 0 3px rgba(0, 0, 0, .9),
    1px 1px 2px rgba(0, 0, 0, .9),
    -1px -1px 2px rgba(0, 0, 0, .9),
    1px -1px 2px rgba(0, 0, 0, .9),
    -1px 1px 2px rgba(0, 0, 0, .9);
  max-height: calc(1.55em * 4);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.tag_article_list_section .article02_pr_badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(10, 5, 24, .85);
  border: 1px solid var(--tal-pr);
  color: var(--tal-pr);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-shadow: 0 0 8px rgba(255, 210, 63, .8);
  box-shadow: 0 0 10px rgba(255, 210, 63, .4);
}

/* ============================================================================
 * 4. アクセシビリティ配慮
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .tag_article_list_section .tag_article_list_tab,
  .tag_article_list_section .tag_article_list_grid > li > a,
  .tag_article_list_section .tag_article_list_grid > li > a::before,
  .tag_article_list_section .tag_article_list_grid > li > a img {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================================
 * 5. レスポンシブ
 * ========================================================================= */
@media (max-width: 1024px) {
  .tag_article_list_section { max-width: 940px; margin: 32px auto; }
  .tag_article_list_header { padding: 40px 30px 22px; }
  .tag_article_list_header__lead { font-size: 2rem; }
  .tag_article_list_nav { padding: 6px 30px 34px; }
  .tag_article_list_nav::before { left: 30px; right: 30px; }
  .tag_article_list_panel { padding: 28px 30px 36px; }
  .tag_article_list_status_notice { margin: 16px 30px 0; }
  /* [幅調整対応] 2行×2列グリッドのため固定width/flex-basisは不要
     （width:100%をPC側から継承）。paddingのみタブレット向けに調整する。 */
  .tag_article_list_section .tag_article_list_tab { font-size: 1.3rem; padding: 12px 16px; }
  .tag_article_list_tab__label { font-size: 1.8rem; }
  .tag_article_list_tablist { max-width: 620px; }
  .tag_article_list_grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 22px;
  }
}
@media (max-width: 640px) {
  .tag_article_list_section { max-width: 100%; margin: 20px auto; border-radius: 6px; }
  .tag_article_list_header { padding: 28px 18px 18px; }
  .tag_article_list_header__lead { font-size: 1rem; }
  .tag_article_list_nav { padding: 4px 18px 26px; }
  /* [幅調整対応] ::before は「線」なので left/right をSP幅のpaddingに
     追従させる。 */
  .tag_article_list_nav::before { left: 18px; right: 18px; }
  /* [幅調整対応] スマホ幅も2行×2列グリッドのまま維持する（固定幅指定は
     不要）。コンテナのmax-widthを画面幅いっぱいに近づけ、1列あたりの
     幅を確保する。 */
  .tag_article_list_tablist { max-width: 100%; gap: 8px; }
  /* [文字サイズ指定対応] __label のみ1.8rem固定のため、スマホでは
     ボタン自体のfont-sizeと padding をやや控えめにして全体のバランスを
     取る（__labelの1.8remは変更しない）。 */
  .tag_article_list_section .tag_article_list_tab { padding: 10px 10px; font-size: .96rem; }
  .tag_article_list_tab__label { font-size: 1.2rem; }
  .tag_article_list_panel { padding: 20px 18px 28px; }
  .tag_article_list_status_notice { margin: 14px 18px 0; }
  .tag_article_list_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 14px;
  }
  .tag_article_list_section .article02_body { padding: 12px 12px 14px; }
  .tag_article_list_section .article02_title { font-size: .92rem; -webkit-line-clamp: 3; max-height: calc(1.55em * 3); }
}

/* ============================================================================
 * 6. セクション外側の背景（オプション・任意採用）
 * ----------------------------------------------------------------------------
 * 影響範囲を最小限にするラッパー方式。
 *   <div class="tag_article_list_page_bg">
 *     <?php include '.../tag_article_list_controller.php'; ?>
 *   </div>
 * ========================================================================= */
.tag_article_list_page_bg {
  --tag-page-bg-image: radial-gradient(circle at 30% 20%, rgba(255,255,255,.06) 0%, transparent 50%);
  background-color: #0e0f11;
  background-image: var(--tag-page-bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 32px 14px;
}