/* =======================================================
   honkakuha.com CSS — CLEAN v3（お掃除後・単一ソース）
   - 背景はCSS変数で一元管理
   - Header / Drawer / Footer 透過
   - PC: 絶対配置（--top/--left/--w）
   - SP: この1つの @media だけ（縦並び＋順序＋画像16:9）
   - 2BOXES: ホバーで跳ねる（維持）
   - Arnold: SINGLE-SOURCE v2（サイズ安全＋ぼや光＋やわ揺れ）
======================================================= */

/* ---------- Base / Background ---------- */
:root{
  /* 画像フォルダは ../img を既定に。必要ならここだけ差し替え */
  --bg-tile: url('../img/bg-tile.png');
}
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background-color:#111;
  background-image: var(--bg-tile);
  background-repeat: repeat;
  background-position: 0 0;
  background-size: auto;
  color:#fff;
  font-family:'Shippori Mincho B1', serif;
}

/* ---------- App Layout (Header/Content/Footer) ---------- */
.container{
  min-height:100dvh;
  display:grid;
  grid-template-rows: auto 1fr auto;
}
.hero-header{ grid-row:1; }
.main-content-random{ grid-row:2; position:relative; min-height:1200px; }
.footer-marquee{ grid-row:3; background:transparent; }

/* ---------- Header / Drawer ---------- */
.header-bar{
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:.4rem .8rem; background:transparent;
}
#main-logo{ width:120px; display:block; transition: transform .35s; }
#main-logo:hover{ transform: scale(1.13) rotate(-8deg); }

.hamburger{
  width:42px; height:42px; border:1px solid #fff3; border-radius:10px;
  display:grid; place-items:center; cursor:pointer; background:#0003;
  transition: background .25s, transform .25s;
}
.hamburger:hover{ transform: translateY(-1px); }
.hamburger .bar{ width:22px; height:2px; background:#fff; position:relative; }
.hamburger .bar::before,.hamburger .bar::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:#fff;
}
.hamburger .bar::before{ top:-6px; }
.hamburger .bar::after{ top:6px; }

.nav-drawer{
  position: fixed; inset: 0 0 auto auto;
  top: 56px; right: .6rem;
  background:#111d; backdrop-filter: blur(6px);
  border:1px solid #fff2; border-radius: 12px;
  width: 280px; max-width: 90vw;
  padding: .6rem;
  transform-origin: top right;
  transform: scale(.98) translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index:60;
}
.nav-drawer.open{ opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
.nav-drawer a{
  display:block; padding:.7rem .8rem; border-radius:10px; color:#fff; text-decoration:none;
}
.nav-drawer a:hover{ background:#fff1; }

/* ---------- Cards（PC: 絶対配置） ---------- */
.content-panel{
  position:absolute;
  top: var(--top, 0);
  left: var(--left, 0);
  width: var(--w, 300px);
  color:#fff; text-decoration:none; padding:1rem;
  transition: transform .38s cubic-bezier(.33,1.81,.36,1), box-shadow .38s, filter .38s, background 1s;
  z-index:1;
  border-radius:1.2em;
}
.content-panel img{
  width:100%; display:block; border-radius:1.2em;
  transform: translate3d(0, var(--y, 0), 0) scale(var(--s, 1));
  transition: transform .55s cubic-bezier(.26,1.65,.45,.97), filter .38s;
}
.content-panel .caption{ margin-top:.6rem; font-weight:600; letter-spacing:.02em; text-align:center; }
.content-panel .desc{ opacity:.9; line-height:1.6; }

/* 共通ホバー（2boxesは後で上書き） */
.content-panel:hover{ transform: translateY(-6px) scale(1.02); filter: brightness(1.07); }
.content-panel:hover img{ --s: 1.03; }

/* ---------- PC: 座標テーブル（ここだけ編集で配置OK） ---------- */
#news      { --top:  70px; --left: 10vw; --w: 350px; } /* Bird Man */
#twoboxes  { --top:   0px; --left: 37vw; --w: 350px; }
#arnold    { --top: 130px; --left: 67vw; --w: 350px; }
#interview { --top: 530px; --left: 10vw; --w: 300px; }
#lyric     { --top: 420px; --left: 38vw; --w: 300px; }
#fhlopara  { --top: 880px; --left: 25vw; --w: 280px; }
#shop      { --top: 805px; --left: 50vw; --w: 280px; }
#contact   { --top: 550px; --left: 70vw; --w: 300px; }
#arnold{ z-index: 2; } /* 重なり保険 */

/* ---------- ToTop ---------- */
.to-top{
  position: fixed; right: 1rem; bottom: 3rem; z-index: 1000;
  width: 42px; height: 42px;
  border: 1px solid #fff2; border-radius: 10px;
  background: #0007; backdrop-filter: blur(2px);
  color: #fff; box-shadow: 0 4px 10px #0005; cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
  font: 600 14px/42px system-ui, -apple-system, "Segoe UI", sans-serif;
}
.to-top.show{ opacity: 1; pointer-events: auto; }
.to-top:hover{ transform: translateY(-2px); }

/* ---------- Footer：完全透過 ---------- */
footer,
.footer,
.footer-marquee,
footer.footer-marquee{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
.footer-marquee .marquee,
.footer-marquee .marquee-track,
footer .marquee,
footer .marquee-track{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.footer-marquee::before,
.footer-marquee::after,
footer::before,
footer::after{ content: none !important; }
.footer-marquee .marquee-track span{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4); }

/* ---------- Logo rainbow “もや” ---------- */
.logo-orbit{ position: relative; display:inline-block; isolation:isolate; }
.logo-orbit::before{
  content:""; position:absolute; inset:-12%; border-radius: 50%;
  background: conic-gradient(#ff004c,#ff0,#00ff95,#00e1ff,#6c6cff,#ff6cff,#ff004c);
  filter: blur(12px) saturate(140%); opacity: .55; z-index: 0; animation: ringSpin 6s linear infinite;
}
.logo-orbit::after{
  content:""; position:absolute; inset:0; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, #ff004c, #ff0, #00ff95, #00e1ff, #6c6cff, #ff6cff, #ff004c);
  background-size: 300% 300%;
  mix-blend-mode: screen; opacity: .95;
  -webkit-mask-image: url('../img/corp-logo001-S.png');
          mask-image: url('../img/corp-logo001-S.png');
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
          mask-repeat: no-repeat;          mask-position: center;          mask-size: contain;
  animation: hueFlow 8s linear infinite;
}
.logo-orbit:hover::after{ animation-duration:2s; }
.logo-orbit:hover::before{ opacity:.75; filter: blur(14px) saturate(160%); }
@keyframes hueFlow{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes ringSpin{ to{ transform: rotate(360deg) } }

/* ---------- 2BOXES：ホバーで跳ねる ---------- */
#twoboxes.content-panel{
  background: transparent;
  box-shadow: none;
  border: none;
  filter: none;
  backdrop-filter: none;
  transition: opacity .3s ease;
}
#twoboxes.content-panel:hover{
  transform: none; /* 共通ホバーを無効化 */
  animation: twoboxesJitter 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 16px #ff0033)
          drop-shadow(0 0 36px #ff0044)
          drop-shadow(0 0 64px #ff0066)
          brightness(1.2);
  opacity: .7;
}
#twoboxes .caption{
  display:flex; align-items:center; justify-content:center;
  text-align:center; height:100%; padding:1em; font-weight:500; color:#fff;
}
@keyframes twoboxesJitter{
  0%{transform:translateY(0)}
  12.5%{transform:translateY(-88px)}
  25%{transform:translateY(10px)}
  37.5%{transform:translateY(-40px)}
  50%{transform:translateY(5px)}
  62.5%{transform:translateY(-109px)}
  75%{transform:translateY(20px)}
  87.5%{transform:translateY(-50px)}
  100%{transform:translateY(0)}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  #main-logo, .content-panel img{ transition:none !important; }
  .logo-orbit::before, .logo-orbit::after{ animation:none !important; }
  #twoboxes.content-panel:hover{ animation:none !important; transform:none !important; }
}

/* ---------- Arnold — SINGLE-SOURCE v2（サイズ安全＋ぼや光＋やわ揺れ） ---------- */
#arnold.content-panel{
  overflow: hidden;
  border-radius: 16px;
  width: var(--w, 350px);
  max-width: 380px;
}
#arnold.content-panel img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius: inherit;
}
#arnold.content-panel::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background: linear-gradient(115deg,#fff6bf 10%,#ff8c00 35%,#ff2222 65%,#ffe073 90%);
  background-size:200% 100%; background-position:0 50%;
  mix-blend-mode: screen; opacity:0; transition: opacity .35s ease;
}
#arnold.content-panel::after{
  content:""; position:absolute; inset:-8% -10%; border-radius:inherit; pointer-events:none; z-index:1;
  background: radial-gradient(ellipse at 50% 60%,
    rgba(255,170,0,.35) 0%,
    rgba(255, 70, 0,.18) 45%,
    rgba(255,  0, 0,.10) 60%,
    transparent 80%);
  filter: blur(12px) saturate(120%);
  opacity: 0; transition: opacity .35s ease;
}
#arnold.content-panel:hover{
  transform: translateY(-4px) scale(1.04);
  animation: arnWobble 1.6s ease-in-out infinite;
}
#arnold.content-panel:hover::before{
  opacity: .92;
  animation:
    arnFlameFlow 2.1s linear infinite,
    arnFlicker   1.6s ease-in-out infinite;
  filter: brightness(1.05) saturate(110%);
}
#arnold.content-panel:hover::after{
  opacity: .85;
  animation: arnAura 2.4s ease-in-out infinite;
}
@keyframes arnFlameFlow{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
@keyframes arnFlicker  { 0%,100%{filter:brightness(1.00)} 50%{filter:brightness(1.12)} }
@keyframes arnAura     { 0%,100%{opacity:.70; transform:scale(1.00)} 50%{opacity:.95; transform:scale(1.03)} }
@keyframes arnWobble   { 0%,100%{transform:translateY(0) scale(1.02)} 50%{transform:translateY(-2px) scale(1.04)} }

/* ---------- Optional（PC：自動整列グリッドに切替・オプトイン） ---------- */
@media (min-width: 961px){
  .main-content-random.pc-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 2rem;
    padding: 1rem 2rem 3rem;
    min-height:auto;
  }
  .main-content-random.pc-grid .content-panel{
    position: static;
    width: auto;
    padding: 0;
    transform: none !important;
  }
  .main-content-random.pc-grid .content-panel img{
    width:100%; height:auto; object-fit:cover; transform:none !important;
  }
}

/* ---------- Responsive（SP: この1ブロックだけ） ---------- */
@media (max-width: 960px){
  .main-content-random{
    display:flex;
    flex-direction:column;
    gap:1rem;
    padding:1rem 1rem 2rem;
    min-height:auto;
  }
  .content-panel{
    position: static;
    width: 100%;
    max-width: none;
    transform: none;
    z-index: auto;
    padding: .6rem 0;
    box-shadow: none;
    background: none;
  }
  .content-panel img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transform: none;
  }
  /* 並び順（実在ID） */
  #news{ order: 1; }  /* Bird Man */
  #twoboxes{ order: 2; }
  #arnold{ order: 3; }
  #interview{ order: 4; }
  #lyric{ order: 5; }
  #fhlopara{ order: 6; }
  #shop{ order: 7; }
  #contact{ order: 8; }

  /* Hover演出はSPでは無効化（2boxes はもとからホバー限定で実害なし） */
  .content-panel:hover{ transform:none; filter:none; }

  /* Arnold のSP調整（縦フロー＆角丸継承） */
  #arnold.content-panel{
    width:100%;
    max-width:none;
    transform:none;
  }
  #arnold.content-panel::before,
  #arnold.content-panel::after{ border-radius: inherit; }
}

/* ---------- Accessibility（モーション軽減） ---------- */
@media (prefers-reduced-motion: reduce){
  #arnold.content-panel:hover{ animation:none; transform:none; }
  #arnold.content-panel:hover::before,
  #arnold.content-panel:hover::after{ animation:none; }
}
/* layout */
.news-container { max-width: 960px; margin: 0 auto; padding: 24px; }

/* article */
.news-article h1 { font-size: clamp(28px,4vw,36px); line-height: 1.3; margin: 4px 0 12px; }
.news-article .meta { font-size: 14px; opacity: .8; margin-bottom: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.hero img { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }

.lead p { font-size: 16px; line-height: 1.9; margin: 16px 0 8px; }
.links h2, .credits h2, .notes h2 { margin-top: 32px; font-size: 18px; }
.links ul { list-style: disc; padding-left: 1.2em; }
.post-footer { margin-top: 40px; }

/* === HOTFIX: news hero image (SP時に絶対にトリミングしない) === */
@media (max-width: 960px){
  /* 記事ページ用（どちらかのラッパーがある前提で二重に指定） */
  .news-article .hero img,
  .news-container .hero img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:center center !important;
    display:block;
  }
  /* まれに figure 自体に高さ指定がある場合の保険 */
  .news-article .hero,
  .news-container .hero{
    height:auto !important;
  }
}
/* ナビ：NEWバッジ */
.nav-drawer a .badge-new{
  display:inline-block; margin-left:.45em; padding:.06em .45em;
  font-size:.72em; line-height:1; border-radius:999px;
  background:#ff3d00; color:#fff; vertical-align:middle;
}

/* 現在地ハイライト */
.nav-drawer a.active,
.nav-drawer a[aria-current="page"]{
  background:#fff1;
}
/* ===== Header / Hamburger 固定右配置（最優先オーバーライド）===== */
.hero-header, .header-bar { position: relative; width: 100%; }

/* ボタンを常に画面の右上へ固定 */
#hamburger{
  position: fixed !important;
  top: 14px;
  right: 16px;
  left: auto !important;
  margin: 0;
  z-index: 100;              /* オーバーレイや背景より前 */
  -webkit-tap-highlight-color: transparent;
}

/* iPhone等のノッチ安全域 */
@supports (padding: env(safe-area-inset-top)){
  #hamburger{
    top: calc(12px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
  }
}

/* ロゴは左寄せのまま（保険） */
.hero-header .logo{ position: relative; z-index: 40; }

/* ドロワーとオーバーレイの層関係（必要なら） */
.nav-drawer{ position: fixed; top: 0; right: -100%; z-index: 90; }
.nav-drawer.open{ right: 0; }
.nav-overlay{ z-index: 80; }

/* スクロール時も追従（任意） */
@media (min-width:0){
  body{ padding-top: 0; } /* 既存ヘッダーの高さに依存しない */
}
/* ==== NAV Drawer Stabilizer (news用だが全頁で無害) ==== */
#overlay.overlay{ position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.45); }
#overlay[hidden]{ display:none; }

.hamburger{ position:relative; z-index:1002; } /* ドロワーより上 */

.nav-drawer{
  position:fixed !important; top:0; right:0; height:100vh;
  width:min(84vw, 340px); z-index:1001;
  background:rgba(18,18,18,.96); backdrop-filter:blur(2px);
  transform:translateX(100%); transition:transform .28s ease;
  padding:80px 20px 24px; box-shadow:-20px 0 30px rgba(0,0,0,.4);
  border-radius:12px 0 0 12px; overflow:auto;
}
/* 開状態（どちらの条件でも開くよう互換） */
.nav-drawer.open,
.nav-drawer[aria-hidden="false"]{ transform:translateX(0); }

/* 項目体裁 */
.nav-drawer a{ display:block; padding:12px 8px; color:#ddd; text-decoration:none; }
.nav-drawer a:hover{ color:#fff; }
.nav-drawer .nav-hq{ margin-top:12px; padding-top:12px; border-top:1px solid #2b2b2b; }

/* NEWSカードの標準サムネ（ご指定の汎用画像パス） */
.news-list .card img[src$="news-release-thumb.jpg"]{ object-fit:cover; }
/* ==== FIX: ロゴの虹モヤがクリックを奪う問題（pointer-events） ==== */
.logo-orbit::before,
.logo-orbit::after{
  pointer-events: none !important;  /* ← これでロゴの上に被ってもクリックを通す */
}

/* ==== FIX: クリック優先順位（確実に押せるように） ==== */
#hamburger{ z-index: 1300 !important; }
#nav.nav-drawer{ z-index: 1200 !important; }
#overlay.overlay{ z-index: 1100 !important; }  /* オーバーレイはボタンより下 */

/* ==== FIX: ロゴリンクのヒット面積と優先度（タイミング由来の取りこぼし対策） ==== */
.top-logo-btn{
  position: relative; z-index: 1050; display: inline-block;
  padding: 6px; margin: -6px;      /* 見た目そのままクリック面積だけ拡張 */
  -webkit-tap-highlight-color: transparent;
}
/* ▼ ドロップダウン（過去記事） */
.dropdown { margin-top: 22px; }
.drop-btn {
  width: 100%; text-align: left; cursor: pointer;
  background: #e9e9e9; border: 1px solid #d0d0d0; padding: 10px 12px; 
  font: inherit; border-radius: 8px;
}
@media (prefers-color-scheme: dark) {
  .drop-btn { background:#171717; border-color:#2a2a2a; color:#eee; }
}
.drop-content {
  margin-top: 6px; border: 1px solid #2a2a2a; border-radius: 8px; overflow: hidden;
  background: #111;
}
.drop-content a {
  display: block; padding: 10px 12px; text-decoration: none; color: #eaeaea;
  border-bottom: 1px solid #222;
}
.drop-content a:last-child { border-bottom: none; }
.drop-content a:hover { background: #1b1b1b; }
/* ===== hknews（トップNEWSカード）— 最小安定版 ===== */
#news.content-panel.hknews{
  /* 既存カード位置・サイズは content-panel のCSS（--top/--left/--w）に従う */
  padding: 0; color: #fff;
}

/* 表示枠を固定（ここが“キャンバス”） */
#hknews-slots{
  position: relative;
  height: 220px;              /* 見せ方に合わせて 200–260px で調整可 */
  overflow: hidden;
  border-radius: 12px;
}

/* 各スライドは同じ座標に“重ねる” */
#hknews-slots .hknews__slide{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: #fff;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}

/* 画像は必ず枠いっぱい。比率違いでも縦横を揃える */
#hknews-slots .hknews__thumb{ width:100%; height:100%; }
#hknews-slots .hknews__thumb img{
  width:100%; height:100%;
  object-fit: cover; display:block; border-radius:12px;
  pointer-events: none;
}

/* メタ表示（画像の下に出すなら必要に応じて余白調整） */
#news .hknews__meta{ padding: 6px 0 0 0; }
#news .hknews__cap{ font-size:.85rem; opacity:.8; letter-spacing:.06em; text-transform:uppercase; display:block; margin-bottom:.2em; }
#news .hknews__title{ margin:.1rem 0 .1rem 0; font-size:1.05rem; line-height:1.35; font-weight:600; }
#news .hknews__desc{ font-size:.9rem; line-height:1.55; opacity:.85; }

/* フェード（2枚想定）— 3秒ずらしで交互表示 */
#hknews-slots .hknews__slide:nth-of-type(1){ animation: hknews-fade 6s infinite; }
#hknews-slots .hknews__slide:nth-of-type(2){ animation: hknews-fade 6s infinite 3s; }
@keyframes hknews-fade{
  0%,43%   { opacity:1; pointer-events:auto; }
  50%,100% { opacity:0; pointer-events:none; }
}

/* ドット */
#news .hknews__dots{ display:flex; gap:6px; margin-top:8px; }
#news .hknews__dots span{
  width:7px; height:7px; border-radius:50%;
  background:#ff7043; opacity:.6;
}
#news .hknews__dots span:nth-child(1){ animation: hknews-dot 6s infinite; }
#news .hknews__dots span:nth-child(2){ animation: hknews-dot 6s infinite 3s; }
@keyframes hknews-dot{
  0%,43%   { transform:scale(1.25); opacity:1; background:#ff3d00; }
  50%,100% { transform:scale(1.0);  opacity:.6; background:#ff7043; }
}

/* SPは少し高めにして見やすく（任意） */
@media (max-width: 960px){
  #hknews-slots{ height: 240px; }
}
/* ===== FIX: 固定ヘッダー下に潜り込むのを防ぐ（HTML変更なし） ===== */
/* ヘッダーの高さぶんだけ、<main> の先頭に見えないスペーサーを挿入する */
:root{
  --header-gap: 92px;   /* PC時のヘッダー実高さに合わせて調整 */
  --header-gap-sp: 74px;/* SP時のヘッダー実高さに合わせて調整 */
}
#main{ position: relative; }
#main::before{
  content:"";
  display:block;
  height: var(--header-gap);
}
@media (max-width: 960px){
  #main::before{ height: var(--header-gap-sp); }
}

/* 念のため：ヘッダーが最前面、内容はその下に来るよう層を分ける */
#header{ position: sticky; top: 0; z-index: 1000; }
#main{ z-index: 0; }
/* ===== hknews：画像オーバーレイ表示（重なりは維持） ===== */
/* 枠（キャンバス） */
#hknews-slots{
  position:relative;
  height:220px;            /* 必要なら 200–260px で微調整 */
  overflow:hidden;
  border-radius:12px;
}

/* スライドは同一座標に重ねてフェード（既存のアニメはそのまま） */
#hknews-slots .hknews__slide{
  position:absolute; inset:0;
  opacity:0; pointer-events:none;   /* 可視化は既存のkeyframesで */
}

/* 画像は必ず枠いっぱい */
#hknews-slots .hknews__thumb,
#hknews-slots .hknews__thumb img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  border-radius:12px;
  pointer-events:none;
}

/* ▼ここが“キャプションを画像に重ねる”本体 */
#hknews-slots .hknews__meta{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  padding:10px 12px 12px;
  color:#fff;
  /* 下から上へ薄くなるグラデで可読性を確保 */
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.35), rgba(0,0,0,0));
}
#hknews-slots .hknews__cap{
  display:block; margin:0 0 2px;
  font-size:.82rem; letter-spacing:.06em; opacity:.9;
  text-transform:uppercase;
}
#hknews-slots .hknews__title{
  margin:0; font-weight:700; line-height:1.25;
  font-size:clamp(1rem, 1.6vw, 1.15rem);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
#hknews-slots .hknews__desc{
  margin:.25rem 0 0; line-height:1.45;
  font-size:.9rem; opacity:.9;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}

/* ドット（そのまま使ってOK。位置を画像の外に出すならここでマージンを調整） */
#news .hknews__dots{ display:flex; gap:6px; margin-top:8px; }
#news .hknews__dots span{
  width:7px; height:7px; border-radius:50%;
  background:#ff7043; opacity:.6;
}

@media (max-width:960px){
  #hknews-slots{ height:240px; }   /* SPは少し高めに */
}
/* === 共通：オーバーレイの土台はそのまま === */
#hknews-slots{ position:relative; height:220px; overflow:hidden; border-radius:12px; }
#hknews-slots .hknews__slide{ position:absolute; inset:0; opacity:0; pointer-events:none; }
#hknews-slots .hknews__thumb,
#hknews-slots .hknews__thumb img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:12px; }

/* ===== モード1：下1/3だけ重ねる（既定・分離感が強い） ===== */
.hknews.hknews--overlay-1by3 #hknews-slots .hknews__meta{
  position:absolute; left:0; right:0; bottom:0;
  height:33%;                /* ← ここが「下1/3」 */
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:10px 14px;
  color:#fff; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.35), rgba(0,0,0,0));
}
.hknews.hknews--overlay-1by3 .hknews__cap{
  display:block; font-size:.82rem; letter-spacing:.06em; opacity:.9; text-transform:uppercase; margin:0 0 2px;
}
.hknews.hknews--overlay-1by3 .hknews__title{
  margin:0; font-weight:700; line-height:1.25; font-size:clamp(1rem,1.6vw,1.15rem);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.hknews.hknews--overlay-1by3 .hknews__desc{
  margin:.35rem 0 0; line-height:1.45; font-size:.9rem; opacity:.9; 
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; /* 2行で切る */
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}

/* ===== モード2：タイトルだけ重ねる（本文は出さない） ===== */
.hknews.hknews--title-only #hknews-slots .hknews__meta{
  position:absolute; left:0; right:0; bottom:0;
  height:28%; padding:10px 14px; color:#fff; pointer-events:none;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
}
.hknews.hknews--title-only .hknews__cap{ display:block; font-size:.82rem; letter-spacing:.06em; opacity:.9; text-transform:uppercase; margin:0 0 2px; }
.hknews.hknews--title-only .hknews__title{ margin:0; font-weight:700; line-height:1.25; font-size:clamp(1rem,1.6vw,1.15rem); text-shadow:0 1px 2px rgba(0,0,0,.45); }
.hknews.hknews--title-only .hknews__desc{ display:none; }  /* ← タイトルだけにする */

/* SPは少し大きめに見せる */
@media (max-width:960px){
  #hknews-slots{ height:240px; }
}
/* === hknews スライド：アクティブ制御版 === */
#hknews-slots .hknews__slide{
  position:absolute; inset:0;
  opacity:0; pointer-events:none; z-index:0;
  transition:opacity .35s ease;
}
#hknews-slots .hknews__slide.is-active{
  opacity:1; pointer-events:auto; z-index:1;
}

/* 左ズレ補正 */
#hknews-slots .hknews__meta{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 16px 14px; /* ← 左右均等に、左端揃え */
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.35), rgba(0,0,0,0));
  color:#fff;
}
/* === hknews 左端の基準合わせ（画像とテキストの見え端を一致） === */
:root{ --hknews-gutter: 12px; } /* ← 左の揃え幅。12〜18pxで好みに調整 */

#hknews-slots{
  border-radius: 12px;
  overflow: hidden;           /* 角丸と重なりのズレ防止 */
}
#hknews-slots .hknews__thumb img{
  display: block;             /* 画像の下1px隙間防止 */
}

#hknews-slots .hknews__meta{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px var(--hknews-gutter) 14px var(--hknews-gutter); /* 左右同じ値に統一 */
  box-sizing: border-box;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.35), rgba(0,0,0,0));
  color: #fff;
  border-bottom-left-radius: 12px;    /* 角丸を画像と一致 */
  border-bottom-right-radius: 12px;
}

/* タイトル/説明の既定マージンを揃える */
#hknews-slots .hknews__title{ margin: 0; font-weight: 700; line-height: 1.25; }
#hknews-slots .hknews__desc { margin: .35rem 0 0; line-height: 1.45; }
#hknews-slots .hknews__cap  { display:block; margin: 0 0 2px; letter-spacing:.06em; opacity:.9; text-transform:uppercase; }
2:33 2025/08/282:34 2025/08/28