/* ============================================================
   Topics section (top page only)
   Scoped to .HomeTopics* classes — does not touch base.css
   ============================================================ */

.HomeTopics{ --ht-accent:#5B87BC; --ht-text:#333333; --ht-heading:#595757; --ht-line:#E2E2E2; --ht-radius:8px;
  --ht-cat01:#EF774D; --ht-cat02:#5B87BC; --ht-cat03:#A5C14D; --ht-cat04:#C16BB5;
  display:block; margin:0 0 120px 0; padding:0; width:100%;}

.HomeTopicsInner{ display:block; margin:0 auto; padding:0; width:100%; max-width:1100px; box-sizing:border-box;}

.HomeTopicsHead{ display:block; margin:0 0 32px 0; padding:0; text-align:center;}
.HomeTopicsEyebrow{ display:block; margin:0; padding:0; font-family:'Jost', sans-serif; font-weight:normal; font-size:1.3rem; letter-spacing:2px; color:var(--ht-accent);}
.HomeTopicsTitle{ display:block; margin:6px 0 0 0; padding:0; font-family:'Zen Old Mincho', serif; font-weight:500; font-size:3.2rem; color:var(--ht-heading);}

.HomeTopicsFilter{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:0 0 32px 0; padding:0;}
.HomeTopicsFilter__btn{ display:inline-block; margin:0; padding:8px 22px; border:1px solid var(--ht-line); border-radius:999px;
  font-family:"Noto Sans JP", sans-serif; font-weight:normal; font-size:1.4rem; color:var(--ht-text); background:#FFFFFF; cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;}
.HomeTopicsFilter__btn:hover{ border-color:var(--ht-accent);}
.HomeTopicsFilter__btn:focus-visible{ outline:3px solid #333333; outline-offset:2px;}
.HomeTopicsFilter__btn.active{ color:#FFFFFF; background:#333333; border-color:#333333;}
.HomeTopicsFilter__btn.active[data-cat="cat01"]{ background:var(--ht-cat01); border-color:var(--ht-cat01);}
.HomeTopicsFilter__btn.active[data-cat="cat02"]{ background:var(--ht-cat02); border-color:var(--ht-cat02);}
.HomeTopicsFilter__btn.active[data-cat="cat03"]{ background:var(--ht-cat03); border-color:var(--ht-cat03);}
.HomeTopicsFilter__btn.active[data-cat="cat04"]{ background:var(--ht-cat04); border-color:var(--ht-cat04);}

.HomeTopicsGrid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; margin:0 0 40px 0; padding:0; width:100%;}

.HomeTopicsCard{ display:flex; flex-direction:column; height:100%; margin:0; padding:20px 22px; box-sizing:border-box;
  border:1px solid var(--ht-line); border-radius:var(--ht-radius); background:#FFFFFF;
  transition:border-color .2s ease, box-shadow .2s ease;}
.HomeTopicsCard:hover{ border-color:var(--ht-accent); box-shadow:0 6px 16px rgba(0,0,0,0.06);}

.HomeTopicsCard__meta{ display:flex; align-items:center; gap:12px; margin:0 0 12px 0; padding:0;}
.HomeTopicsCard__meta time{ display:inline-block; margin:0; padding:0; font-family:'Jost', sans-serif; font-weight:normal; font-size:1.4rem; color:#999999;}
.HomeTopicsCard__category{ display:inline-block; margin:0; padding:3px 12px 2px; border-radius:4px;
  font-family:"Noto Sans JP", sans-serif; font-weight:normal; font-size:1.2rem; color:#FFFFFF; line-height:1.5; text-align:center;}
.HomeTopicsCard__category.cat01{ background:var(--ht-cat01);}
.HomeTopicsCard__category.cat02{ background:var(--ht-cat02);}
.HomeTopicsCard__category.cat03{ background:var(--ht-cat03);}
.HomeTopicsCard__category.cat04{ background:var(--ht-cat04);}

.HomeTopicsCard__title{ display:block; flex:1 1 auto; margin:0 0 16px 0; padding:0;
  font-family:"Noto Sans JP", sans-serif; font-weight:700; font-size:1.5rem; line-height:1.6; color:var(--ht-text);}

.HomeTopicsCard__link{ display:inline-flex; align-items:center; gap:4px; align-self:flex-start; margin-top:auto; padding:2px 0;
  font-family:"Noto Sans JP", sans-serif; font-weight:700; font-size:1.3rem; color:var(--ht-accent); text-decoration:none;}
.HomeTopicsCard__link span{ transition:transform .2s ease;}
.HomeTopicsCard__link:hover span{ transform:translateX(5px);}
.HomeTopicsCard__link:focus-visible{ outline:3px solid #333333; outline-offset:2px;}

.HomeTopicsEmpty{ display:none; margin:0 0 40px 0; padding:40px 20px; box-sizing:border-box;
  border:1px dashed var(--ht-line); border-radius:var(--ht-radius);
  font-family:"Noto Sans JP", sans-serif; font-size:1.4rem; color:var(--ht-text); text-align:center;}
.HomeTopicsEmpty.is-visible{ display:block;}

.HomeTopicsMore{ display:block; margin:0 auto; padding:0; text-align:center;}
.HomeTopicsMoreLink{ display:inline-flex; align-items:center; gap:8px; margin:0; padding:16px 40px; box-sizing:border-box;
  border:2px solid var(--ht-accent); border-radius:999px; font-size:1.4rem; font-weight:700; color:var(--ht-accent);
  text-decoration:none; background:#FFFFFF; transition:background-color .2s ease, color .2s ease;}
.HomeTopicsMoreLink:hover{ background:var(--ht-accent); color:#FFFFFF;}
.HomeTopicsMoreLink:focus-visible{ outline:3px solid #333333; outline-offset:2px;}

.HomeYouTube{ display:block; margin:-48px 0 120px; padding:0; width:100%;}
.HomeYouTubeCard{ position:relative; overflow:hidden; width:calc(100% - 48px); max-width:1100px; margin:0 auto; padding:48px 56px; box-sizing:border-box; border:1px solid #E2E2E2; border-radius:8px; background:linear-gradient(135deg, #F7FAFD 0%, #FFFFFF 70%); text-align:center;}
.HomeYouTubeCard::before{ position:absolute; top:-52px; right:-42px; width:180px; height:126px; border-radius:30px; background:#D71920; content:""; opacity:.08; transform:rotate(-8deg);}
.HomeYouTubeLead{ max-width:720px; margin:18px auto 28px; color:#333333; font-size:1.5rem; line-height:1.9;}
.HomeYouTubeLink{ position:relative;}
.HomeYouTubeLink::before{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:20px; border-radius:5px; color:#FFFFFF; background:#D71920; content:"▶"; font-size:10px; line-height:1;}

@media (prefers-reduced-motion: reduce) {
  .HomeTopicsCard{ transition:none;}
  .HomeTopicsFilter__btn{ transition:none;}
  .HomeTopicsCard__link span{ transition:none;}
  .HomeTopicsMoreLink{ transition:none;}
}

@media (max-width: 1100px) {
  .HomeTopicsInner{ padding-left:24px; padding-right:24px;}
  .HomeTopics{ margin:0 0 80px 0;}
  .HomeTopicsTitle{ font-size:2.6rem;}
  .HomeYouTube{ margin:-24px 0 80px;}
  .HomeYouTubeCard{ width:auto; margin:0 24px; padding:42px 36px;}
}

@media (max-width: 640px) {
  .HomeTopicsInner{ padding-left:20px; padding-right:20px;}
  .HomeTopicsTitle{ font-size:2.2rem;}
  .HomeTopicsFilter{ justify-content:flex-start;}
  .HomeTopicsGrid{ grid-template-columns:1fr; gap:16px;}
  .HomeTopicsCard{ padding:18px 20px;}
  .HomeTopicsMoreLink{ width:100%; max-width:360px; justify-content:center; padding:16px 20px;}
  .HomeYouTube{ margin:-16px 0 64px;}
  .HomeYouTubeCard{ margin:0 20px; padding:34px 20px;}
  .HomeYouTubeLead{ margin:16px auto 24px; font-size:1.4rem; text-align:left;}
  .HomeYouTubeLink{ max-width:none;}
}