/*
Theme Name: AI DX Info
Theme URI:  https://ai-dx.info
Author:      樋口
Author URI:  https://ai-dx.info
Description: 生成AI・DX情報サイト用のレスポンシブ WordPress テーマ
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aidx-info
Tags:        blog, news, responsive, blue, modern
*/


/* ==============================================
   AI/DXインフォ  グローバルスタイル
   ============================================== */

/* ---------- カラートークン ---------- */
:root{
  --primary:#1a4f8b;          /* ベースとなる落ち着いた青 */
  --primary-light:#2f64a1;    /* ホバー時などの明るめ青 */
  --black:#000;
  --white:#fff;

  /* ボタン用グラデーション */
  --grad-cat:linear-gradient(135deg,#1a4f8b 0%,#29b6f6 100%);
  --grad-tag:linear-gradient(135deg,#6a1b9a 0%,#ec407a 100%);
}

/* ---------- リセット & ベース ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins','Zen Kaku Gothic New',sans-serif;
  line-height:1.6;
  color:var(--black);
  background:var(--white);
}
a{
  color:inherit;
  text-decoration:none;
  transition:opacity .2s;
}
a:hover{opacity:.8;}
img,video{max-width:100%;display:block;height:auto;}
.container{
  width:100%;
  max-width:1180px;      /* PC 幅を適度に制限 */
  margin-inline:auto;
  padding-inline:20px;   /* モバイル余白 */
}

/* ==============================================
   Header / Navigation
   ============================================== */
.site-header{
    position: fixed;
    top: 10px;
    left: 0;
    right: 0;
    margin: auto;
    width: 95%;
    height: 64px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(255 255 255 / 38%);
    backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    border-radius: 15px;
}
.logo a{
  font-weight:700;
  font-size:1.15rem;
  color:var(--primary);
}

/* ----- デスクトップナビ ----- */
.site-nav .nav-links{
  display:flex;
  gap:24px;
  list-style:none;
}
.site-nav .nav-links li a{
  font-weight:600;
}

/* ----- ハンバーガー ----- */
.hamburger{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:12px;
}
.hamburger span{
  display:block;
  width:24px;
  height:2px;
  background:var(--primary);
  margin:5px 0;
  transition:.3s;
}
.hamburger[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* ==============================================
   Main Visual
   ============================================== */
#mv{
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
}
#mv video{
  position:absolute;
  top:50%;left:50%;
  min-width:100%;min-height:100%;
  transform:translate(-50%,-50%);
  object-fit:cover;
}
.mv-overlay{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--white);
  text-shadow:0 2px 6px rgba(0,0,0,0.4);
}
.mv-title{
  font-size:2.4rem;
  font-weight:700;
  margin-bottom:24px;
}

/* ---------- MV Buttons ---------- */
.mv-buttons{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:center;
}

/* 共通ボタンベース */
.btn{
  position:relative;
  display:inline-flex;
  flex-direction:column;         /* 英→日 を縦積み */
  align-items:center;
  gap:4px;
  padding:14px 32px;
  font-size:1rem;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--white);
  border-radius:40px;
  overflow:hidden;
  isolation:isolate;             /* 背景エフェクト分離 */
  text-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .25s;
}
.btn:hover{transform:translateY(-2px);}

/* グラデ背景 + グロー */
.btn::before,
.btn::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:-1;
}
.btn::after{
  inset:-4px;
  filter:blur(10px) saturate(160%);
  opacity:.6;
}

/* カテゴリ (ブルー→シアン) */
.btn-categories::before{background:var(--grad-cat);}
.btn-categories::after {background:var(--grad-cat);}

/* タグ (パープル→ピンク) */
.btn-tags::before{background:var(--grad-tag);}
.btn-tags::after {background:var(--grad-tag);}

/* 英語・日本語それぞれのフォント微調整 */
.btn .en{font-size:.9em;line-height:1;}
.btn .jp{font-size:.75em;line-height:1;}

/* ===================================================
   Animated Gradient Text  (MV Title)
   =================================================== */
.gradient-text{
  /* 4色を滑らかに循環 */
  background:linear-gradient(135deg,
    #1a4f8b 0%,   /* ブルー (cat)   */
    #29b6f6 25%,  /* シアン (cat)  */
    #6a1b9a 55%,  /* パープル (tag)*/
    #ec407a 80%,  /* ピンク (tag)  */
    #1a4f8b 100%  /* 再びブルー     */
  );
  background-size:400% 400%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradientFlow 8s ease-in-out infinite;
  text-shadow:none;                /* 影を消し、発色をクリアに */
}

/* なめらかに “もわもわ” 動く */
@keyframes gradientFlow{
  0%   {background-position:0% 50%;}
  50%  {background-position:100% 50%;}
  100% {background-position:0% 50%;}
}

/* ==============================================
   Responsive
   ============================================== */
@media(max-width:768px){
  /* ハンバーガー表示 */
  .hamburger{display:block;}

  /* モバイルドロワー */
  .site-nav .nav-links{
    position:fixed;
    right:0;top:64px;
    width:220px;
    max-height:0;
    overflow:hidden;
    flex-direction:column;
    background:var(--white);
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
    transition:max-height .3s ease;
  }
  .site-nav .nav-links.open{max-height:320px;}
  .site-nav .nav-links li{padding:16px;}

  /* MV 調整 */
  .mv-title{font-size:1.8rem;}
}
/* ===================================================
   Latest by Category Section
   =================================================== */
#latest-category{
  padding:60px 0;
  background:#f7f9fc;
}
#latest-category .sec-title{
  font-size:1.6rem;
  font-weight:700;
  text-align:center;
  margin-bottom:32px;
  color:var(--primary);
}

/* カテゴリセレクト */
.cat-select-wrap{
  text-align:center;
  margin-bottom:32px;
}
#catSelect{
  appearance:none;
  font-size:1rem;
  padding:10px 20px;
  border:2px solid var(--primary);
  border-radius:30px;
  background:#fff url("data:image/svg+xml;utf8,<svg fill='%231a4f8b' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 12px center/12px;
  cursor:pointer;
  min-width:260px;
}

/* グリッド */
.card-grid{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  place-items:stretch;
}
@media(min-width:1024px){
  .card-grid{grid-template-columns:repeat(5,1fr);}
}
@media(max-width:640px){
  .card-grid{grid-template-columns:repeat(2,1fr);}
}

/* カード */
.card{
  position:relative;
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
  overflow:hidden;
  height:100%;
}
.card-link{display:flex;flex-direction:column;height:100%;color:inherit;}
.card-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.card-body{flex:1;padding:16px 16px 48px;}          /* read-more 分余白 */
.card-title{font-size:1rem;font-weight:600;margin:0 0 8px;line-height:1.3;}
.card-excerpt{font-size:.85rem;color:#555;margin:0 0 12px;}
.card-meta{display:flex;flex-wrap:wrap;gap:4px;}
.cat-badge,.tag-badge{
  display:inline-block;
  font-size:.7rem;
  padding:2px 8px;
  border-radius:12px;
  background:var(--primary);
  color:#fff;
}
.tag-badge{background:#6a1b9a;}

/* 続きを見るアイコン */
.read-more{
  position:absolute;
  right:12px;bottom:12px;
  width:32px;height:32px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;
  transition:background .2s,transform .2s;
}
.card-link:hover .read-more{
  background:var(--primary-light);
  transform:translateX(3px);
}

/* Loading / Error */
.loading,.err{text-align:center;color:#666;padding:40px 0;}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;}

/* ===================================================
   AI/DX 講座バナーカード
   =================================================== */
#elearning{
  padding:60px 0;
  background:#fff;
}
#elearning .sec-title{
  font-size:1.6rem;
  font-weight:700;
  text-align:center;
  margin-bottom:32px;
  color:var(--primary);
}

/* グリッド：PC 3 分割、可変対応 */
.banner-grid{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
@media(min-width:1024px){
  .banner-grid{grid-template-columns:repeat(3,1fr);}
}

/* 共通カード */
.banner-card{
  position:relative;
  min-height:420px;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;     /* 下寄せ */
  text-decoration:none;
  color:#fff;
  transition:transform .25s;
  cursor:pointer;
}
.banner-card:hover{transform:translateY(-4px);}
.banner-card::before{
  content:'';
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1);
  transition:transform 6s ease; /* ゆるやかズーム */
}
.banner-card:hover::before{transform:scale(1.05);}
.banner-card::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.55) 100%);
  z-index:0;
}

/* 画像差替え */
.kouza-course::before{background-image:url('images/kouza_aidx.png');}
.ai-course::before{background-image:url('images/elearning_ai.png');}
.dx-course::before{background-image:url('images/elearning_dx.png');}

/* テキストエリア */
.banner-content{
  position:relative;
  z-index:1;
  padding:24px;
  width:100%;
}
.banner-content h3{
  font-size:1.25rem;
  font-weight:700;
  margin:0 0 8px;
}
.banner-content p{
  font-size:.9rem;
  margin:0;
  line-height:1.5;
}
/* ===================================================
   Benefits Section
   =================================================== */
#benefits{
  padding:60px 0;
  background:#f5f8ff;          /* わずかに明るい */
}
#benefits .sec-title{
  font-size:1.6rem;
  font-weight:700;
  text-align:center;
  margin-bottom:40px;
  color:var(--primary);
}

/* グリッド：幅が狭い時は中央寄せ */
.benefit-grid{
  display:flex;               /* 伸縮に強い flex に変更 */
  flex-wrap:wrap;
  justify-content:center;
  gap:32px;                   /* カード間を広めに */
}
@media(min-width:1024px){
  .benefit-grid{grid-template-columns:repeat(3,1fr);}
}

/* カード共通 */
.benefit-card{
  flex:0 1 320px;             /* 最小 320px, 余れば等分 */
  max-width:340px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
  padding:32px 24px 40px;
  text-align:center;
  transition:transform .25s;
}
@media(max-width:600px){
  .benefit-card{flex:1 1 100%;}
}
.benefit-card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

/* アイコン */
.benefit-icon{
  width:72px;height:72px;
  margin:0 auto 16px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;color:#fff;
  background:var(--grad-cat);                 /* ブルー→シアン */
}
.icon-ai{background:var(--grad-cat);}         /* 既存グラデを流用 */
.icon-dx{background:var(--grad-tag);}         /* パープル→ピンク */

/* テキスト */
.benefit-title{
  font-size:1.15rem;font-weight:700;
  margin:0 0 12px;
  color:var(--primary);
}
.benefit-text{
  font-size:.9rem;line-height:1.6;color:#555;margin:0;
}
/* benefit-list を箇条書きで整形 */
.benefit-lead{
  font-size:.9rem;
  line-height:1.6;
  color:#444;
  margin:0 0 16px;
}

.benefit-list{
  list-style:none;
  padding:0;
  margin:0;
}
/* リスト行間を詰める & インデント微調整 */
.benefit-list li{
  font-size:.85rem;
  line-height:1.45;           /* 行間を 1.45 に */
  margin-bottom:10px;         /* 行間が詰まるので余白減 */
  padding-left:18px;
}
.benefit-list li::before{
  top:.55em;
  font-size:.35rem;           /* ドットをさらに小さく */
}
/* ===================================================
   FAQ (Accordion)
   =================================================== */
#faq{
  padding:60px 0;
  background:#fff;
}
#faq .sec-title{
  font-size:1.6rem;
  font-weight:700;
  text-align:center;
  margin-bottom:40px;
  color:var(--primary);
}

/* FAQ リスト */
.faq-list{
  max-width:800px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* 各 FAQ item */
.faq-item{
  border:1px solid #e0e6f0;
  border-radius:8px;
  background:#f9fbff;
  overflow:hidden;
  transition:border-color .2s;
}
.faq-item[open]{border-color:var(--primary);}

/* Summary (質問) */
.faq-item > summary{
  position:relative;
  padding:18px 48px 18px 20px;
  cursor:pointer;
  list-style:none;       /* デフォルトの ▼ を消す */
  font-weight:600;
  color:var(--primary);
}
.faq-item > summary::after{
  content:'▼';
  position:absolute;
  right:20px;top:50%;
  transform:translateY(-50%) rotate(0deg);
  transition:transform .25s;
  font-size:.8rem;
}
.faq-item[open] > summary::after{
  transform:translateY(-50%) rotate(180deg);
}

/* Answer 本文 */
.faq-item > p{
  padding:0 20px 20px;
  font-size:.9rem;
  line-height:1.6;
  color:#444;
}
.faq-item > ul{
  padding:0 20px 20px;
  list-style: none;
}

#faq-aidx .sec-title{
  font-size:1.6rem;
  font-weight:700;
  text-align:center;
  margin-bottom:40px;
  color:var(--primary);
}
/* ===================================================
   Footer
   =================================================== */
.site-footer{
  background:#0d1b2a;          /* 濃紺ベース */
  color:#d9e2ef;
  font-size:.9rem;
  margin-top: 32px;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:40px;
  padding:60px 20px 40px;
  flex-wrap:wrap;              /* SP: 折り返し */
}
.footer-col{
  flex:1 1 260px;              /* 3 カラム均等 / 最小 260px */
}
.footer-head{
  font-size:1.05rem;
  font-weight:700;
  margin:0 0 16px;
  color:#fff;
}
.footer-col ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footer-col a{
  color:#d9e2ef;
  text-decoration:none;
  transition:opacity .2s;
}
.footer-col a:hover{opacity:.7;}

/* タグは横並び・折り返し */
.tag-list{
  flex-direction:row;
  flex-wrap:wrap;
  gap:6px 10px;
}

/* コピーライト */
.footer-copy{
  text-align:center;
  padding:16px 20px;
  background:#0a1624;
  font-size:.8rem;
  color:#9fb3c8;
}

/* ===== Mobile (stack) ===== */
@media(max-width:600px){
  .footer-inner{flex-direction:column;gap:32px;}
}
/* ===================================================
   Floating Favorite Button
   =================================================== */
.fav-btn{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:9999;
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 24px;
  font-weight:600;
  font-size:.9rem;
  color:#fff;
  background:linear-gradient(135deg,#ff8a00 0%,#ff3d00 50%,#d50000 100%);
  border-radius:9999px;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  text-decoration:none;
  transition:transform .25s, box-shadow .25s;
}
.fav-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(0,0,0,.30);
}

/* アイコン調整 */
.fav-btn i{
  font-size:1rem;
}

/* ===== スマホではバー表示 ===== */
@media(max-width:640px){
  .fav-btn{
    left:20px;                /* 両端 20px 余白 */
    right:20px;
    bottom:16px;
    justify-content:center;
    border-radius:12px;
    font-size:1rem;
    padding:14px 0;
  }
  .fav-btn i{font-size:1.1rem;}
}



/* ===================================================
   Post (Single)
   =================================================== */
.post-wrapper{
  max-width:820px;
  padding:100px 20px 80px;   /* header 高さ + 余白 */
  margin-inline:auto;
}

/* パンくず */
.breadcrumb{
  font-size:.8rem;
  color:#666;
  margin-bottom:24px;
}
.breadcrumb a{color:var(--primary);}
.breadcrumb a:hover{text-decoration:underline;}

/* タイトル & メタ */
.post-title{
  font-size:2rem;
  font-weight:700;
  line-height:1.3;
  margin:0 0 12px;
}
.post-meta{
  display:flex;
  gap:12px;
  font-size:.85rem;
  color:#777;
}
.meta-cat a{
  background:var(--grad-cat);
  color:#fff;
  padding:2px 10px;
  border-radius:12px;
  font-size:.75rem;
}

/* アイキャッチ */
.post-thumb{
  margin:32px 0;
}
.post-thumb img{
  width:100%;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* 本文タイポグラフィ */
.post-content{
  font-size:1rem;
  line-height:1.8;
  color:#333;
}
.post-content h2{
  font-size:1.5rem;
  margin:40px 0 16px;
  color:var(--primary);
}
.post-content h3{
  font-size:1.25rem;
  margin:32px 0 12px;
  color:var(--primary);
}
.post-content ul,
.post-content ol{
  margin:0 0 24px 1.2em;
  padding:0;
}
.post-content blockquote{
  border-left:4px solid var(--primary);
  padding:12px 16px;
  margin:24px 0;
  background:#f2f6ff;
  font-style:italic;
}

/* タグ */
.post-tags{
  margin:40px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.post-tags a{
  font-size:.75rem;
  background:#6a1b9a;
  color:#fff;
  padding:4px 10px;
  border-radius:12px;
  text-decoration:none;
}

/* シェア */
.post-share{
  margin:32px 0;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.9rem;
}
.post-share a{
  color:var(--primary);
  font-size:1.2rem;
  transition:opacity .2s;
}
.post-share a:hover{opacity:.7;}

/* 前後ナビ */
.post-nav{
  display:flex;
  justify-content:space-between;
  margin-top:48px;
  font-size:.9rem;
}
.post-nav a{
  color:var(--primary);
  text-decoration:none;
}
.post-nav a:hover{text-decoration:underline;}

/* ───────── 目次 (Table of Contents) ───────── */
.toc {
  position: relative;           /* 必要に応じて fixed / sticky に */
  margin: 1.5rem 0 2.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid #d0d7de;    /* 薄いグレー枠線 */
  border-radius: 6px;
  background: #f8f9fa;          /* ほぼ白のグレー */
  font-size: 0.95rem;
}

.toc > ul {
  list-style: none;             /* デフォルト丸を消す */
  margin: 0;
  padding: 0;
}

.toc li {
  margin: 0.35rem 0;
  line-height: 1.45;
  /* インデント階層がある場合 */
  /* padding-left: calc(var(--depth, 0) * 1rem); */
}

.toc a {
  color: #084298;               /* ビジネス感ある濃いブルー */
  text-decoration: none;
  transition: color 0.15s ease;
}

.toc a:hover,
.toc a:focus {
  color: #0d6efd;               /* ホバーで少し明るく */
  text-decoration: underline;
}

/* 現在位置ハイライト（IntersectionObserver 等で .is-active 付与する場合） */
.toc a.is-active {
  font-weight: 600;
  color: #0a58ca;
  border-left: 3px solid #0a58ca;
  padding-left: 0.4rem;
}

/* スマホで幅いっぱいにし、フォントを少し大きく */
@media (max-width: 600px) {
  .toc {
    padding: 1rem;
    font-size: 1rem;
  }
}
/* Copy ボタン */
.copy-btn{
  position:absolute;
  top:8px;
  right:8px;
  padding:2px 8px;
  font-size:0.8rem;
  background:#0d6efd;
  color:#fff;
  border:none;
  border-radius:4px;
  cursor:pointer;
  opacity:0.85;
  transition:opacity .2s;
}
.copy-btn:hover{opacity:1;}
/* ───────── Prism 行番号ブロック ───────── */
.line-numbers {
  position: relative;
  background-color: #f6f6f6;
  padding: 10px;
  border-radius: 5px;
  margin: 10px 0;
  box-shadow: 2px 2px 2px #ccc;

  /* ★ 追加 ─ 横スクロール許可（推奨） */
  overflow-x: auto;
}

/* 行内改行を許可して横スクロールを避けたい場合は↓を使う */
/*
.line-numbers code {
  white-space: pre-wrap;     ─ 長い行を折り返す
  word-break: break-all;     ─ URL のような長い文字列も折り返す
}
*/

/* Copy ボタンが行番号列に重ならないよう調整（任意） */
.line-numbers .copy-btn {
  right: 14px;               /* 行番号幅ぶん＋α オフセット */
}

/* スマホ時：ブロック全体を左右スクロール */
@media (max-width: 600px) {
  .line-numbers {
    font-size: 0.9rem;       /* 少し縮小 */
  }
}

/* ===================================================
   Favorite Register Button on Post
   =================================================== */
.fav-register{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:24px 0 32px;          /* 上下余白 */
  padding:8px 18px;
  font-size:.9rem;
  font-weight:600;
  color:var(--primary);
  border:2px solid var(--primary);
  border-radius:9999px;
  text-decoration:none;
  transition:background .25s,color .25s;
}
.fav-register i{font-size:1rem;}
.fav-register:hover{
  background:var(--primary);
  color:#fff;
}

/* すでに登録済みの見た目 */
.fav-register.is-active{
  background:var(--primary);
  color:#fff;
}
.fav-register.is-active i::before{
  content:"\f02e";             /* Font Awesome solid bookmark */
  font-family:"Font Awesome 6 Free";
  font-weight:900;
}
/* ===================================================
   Category List Page
   =================================================== */
.cat-wrapper{
  padding:100px 20px 80px;      /* header 分 + 余白 */
}
.cat-page-title{
  font-size:2rem;
  font-weight:700;
  margin:0 0 40px;
  text-align:center;
  color:var(--primary);
}

/* グリッド */
.cat-grid{
  display:grid;
  gap:32px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

/* カード */
.cat-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:40px 20px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  text-decoration:none;
  color:var(--black);
  transition:transform .25s, box-shadow .25s;
}
.cat-card:hover{
  transform:translateY(-6px);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* アイコン */
.cat-icon{
  width:64px;height:64px;
  border-radius:50%;
  background:linear-gradient(135deg,#ff8a00 0%,#d50000 100%); /* オレンジ→赤 */
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  font-size:1.6rem;
}

/* 名前 & 件数 */
.cat-name{
  font-size:1.05rem;
  font-weight:600;
}
.cat-count{
  font-size:.8rem;
  color:#777;
}

/* モバイル調整 */
@media(max-width:600px){
  .cat-card{padding:32px 16px;}
  .cat-icon{width:56px;height:56px;font-size:1.4rem;}
}
/* ===================================================
   Tag List Page
   =================================================== */
.tag-wrapper{
  padding:100px 20px 80px;
}
.tag-page-title{
  font-size:2rem;
  font-weight:700;
  margin:0 0 40px;
  text-align:center;
  color:var(--primary);
}

/* グリッド：最小 180px で自動フィット */
.tag-grid{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}

/* タグカード */
.tag-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:28px 16px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
  text-decoration:none;
  color:var(--black);
  transition:transform .25s, box-shadow .25s;
}
.tag-card:hover{
  transform:translateY(-5px);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

/* # アイコン */
.tag-card i{
  font-size:1.4rem;
  color:#ff8a00;                      /* オレンジ系で統一 */
}

/* タグ名 & 件数 */
.tag-name{
  font-size:.95rem;
  font-weight:600;
  text-align:center;
}
.tag-count{
  font-size:.8rem;
  color:#777;
}

/* モバイル微調整 */
@media(max-width:600px){
  .tag-card{padding:24px 12px;}
  .tag-card i{font-size:1.2rem;}
}
/* ===================================================
   Archive Page
   =================================================== */
.archive-wrapper{
  padding:100px 20px 80px;
}
.archive-page-title{
  font-size:2rem;
  font-weight:700;
  margin:0 0 40px;
  text-align:center;
  color:var(--primary);
}

/* フィルター */
.archive-filter{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-bottom:40px;
  font-size:.9rem;
}
.archive-filter label{font-weight:600;color:#444;}
.archive-filter select{
  padding:6px 12px;
  border:1px solid #ccd4e0;
  border-radius:6px;
}
.archive-filter button{
  padding:6px 18px;
  border:none;
  border-radius:6px;
  background:var(--primary);
  color:#fff;
  cursor:pointer;
}
.archive-filter button:hover{opacity:.85;}

/* グリッド */
.archive-grid{
  display:grid;
  gap:32px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

/* 投稿カード */
.post-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  overflow:hidden;
  transition:transform .25s, box-shadow .25s;
}
.post-card:hover{
  transform:translateY(-6px);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.post-link{display:block;color:inherit;text-decoration:none;}
.post-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.post-card-title{
  font-size:1rem;
  font-weight:600;
  padding:16px 16px 8px;
  line-height:1.4;
}
.post-card time{
  display:block;
  font-size:.8rem;
  color:#777;
  padding:0 16px 16px;
}

/* モバイル */
@media(max-width:600px){
  .archive-filter{gap:8px;}
  .post-card-title{font-size:.95rem;}
}
/* ===================================================
   Archive Wrapper & Filter
   =================================================== */
.archive-wrapper{
  padding:100px 20px 80px;
}
.archive-page-title{
  font-size:2rem;
  font-weight:700;
  margin:0 0 40px;
  text-align:center;
  color:var(--primary);
}

/* フィルタ（既存と同） */
.archive-filter{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-bottom:40px;
  font-size:.9rem;
}
.archive-filter label{font-weight:600;color:#444;}
.archive-filter select{
  padding:6px 12px;border:1px solid #ccd4e0;border-radius:6px;
}
.archive-filter button{
  padding:6px 18px;border:none;border-radius:6px;
  background:var(--primary);color:#fff;cursor:pointer;
}
.archive-filter button:hover{opacity:.85;}

/* ページネーション */
.pager{
  display:flex;justify-content:center;align-items:center;
  gap:24px;margin:60px 0 0;font-size:.9rem;
}
.pager a{color:var(--primary);text-decoration:none;}
.pager a:hover{text-decoration:underline;}