/* ============================================================
   en-Taku モーション追加部品 v1.0（2026-08-28）
   円卓粒子canvas（ヒーロー背景）＋ タグマーキー
   - 現行テーマ entaku-v2 に追加で読み込む前提（既存CSSは触らない）
   - クラスは全部 et- 接頭辞（衝突回避）
   - 色はここの変数だけで調整可能
   ============================================================ */
:root{
  --etm-gold:#B98A44;        /* 粒・飾りの金 */
  --etm-gold-light:#D9B36C;  /* 明るい金（火の粉） */
  --etm-brown:#5C4430;       /* 帯の文字色 */
  --etm-line:#D8CBB2;        /* 帯の罫線 */
  --etm-band:#ECE3CF;        /* 帯の背景（生成りの一段深い色） */
}

/* ---- 円卓canvas：既存ヒーローの背景に敷く ---- */
.hero{ position:relative; }
.hero .hero-inner{ position:relative; z-index:1; }
.et-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;   /* クリックを一切奪わない */
}

/* ---- タグマーキー（配信スタイルの流れる帯） ---- */
.et-ribbon{
  border-top:1px solid var(--etm-line);
  border-bottom:1px solid var(--etm-line);
  background:var(--etm-band);
  overflow:hidden;
  padding:14px 0;
}
.et-ribbon-track{
  display:flex;
  align-items:center;
  gap:2.2em;
  width:max-content;
  padding-left:2.2em;
  animation:et-slide 128s linear infinite;  /* 流速はここ（大きいほど遅い）。8周分を流すため32s×4（体感速度は2周×32sと同じ） */
  font-size:13.5px;
  letter-spacing:.22em;
  color:var(--etm-brown);
}
.et-ribbon-track i{
  font-style:normal;
  color:var(--etm-gold);
  font-size:9px;
}
@keyframes et-slide{ to{ transform:translateX(-50%); } }

/* ---- 実物スクショ掲載枠（サンプルポータル / 匿名カルテ） ---- */
.et-showcase{
  background:var(--etm-band);
  border-top:1px solid var(--etm-line);
  border-bottom:1px solid var(--etm-line);
  padding:72px 24px;
}
.et-showcase-inner{ max-width:960px; margin:0 auto; }
.et-showcase-label{
  font-size:11px;
  letter-spacing:.3em;
  color:var(--etm-gold);
  margin:0 0 12px;
}
.et-showcase-h{
  font-size:clamp(1.3rem, 4vw, 1.7rem);
  font-weight:600;
  letter-spacing:.05em;
  margin:0 0 12px;
}
.et-showcase-lead{
  font-size:14px;
  line-height:2;
  color:var(--etm-brown);
  max-width:38em;
  margin:0 0 36px;
}
.et-shots{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
}
.et-shot{
  position:relative;
  background:#FBF7EE;
  border:1px solid var(--etm-line);
  border-radius:2px;
  overflow:hidden;
  box-shadow:0 14px 30px -22px rgba(92,68,48,.5);
  transition:transform .3s ease, box-shadow .3s ease;
}
.et-shot:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -24px rgba(92,68,48,.6);
}
.et-shot img{
  display:block;
  width:100%;
  max-height:460px;
  object-fit:cover;
  object-position:top;   /* 縦長スクショは上部を見せる */
}
.et-shot-badge{
  position:absolute;
  top:10px; left:10px;
  font-size:10px;
  letter-spacing:.18em;
  color:#FBF7EE;
  background:var(--etm-gold);
  border-radius:2px;
  padding:4px 10px;
}
.et-shot-cap{
  font-size:12px;
  line-height:1.9;
  color:var(--etm-brown);
  padding:12px 14px 14px;
  margin:0;
  border-top:1px solid var(--etm-line);
}
.et-showcase-note{
  font-size:11px;
  color:var(--etm-brown);
  opacity:.75;
  margin:20px 0 0;
}

/* ---- 演出停止環境：帯は静的に折り返し、canvasはJS側で静止画1枚 ---- */
@media (prefers-reduced-motion: reduce){
  .et-ribbon-track{
    animation:none;
    width:auto;
    flex-wrap:wrap;
    justify-content:center;
    padding:0 24px;
    row-gap:.4em;
  }
}