:root{
  --bw: 2px;                  /* 枠の太さ */
  --base: #c4c4c4;            /* 通常ボーダー色（薄グレー） */
  --dur: .9s;                 /* 1周時間（速め） */
  --band-w: 300px;            /* 金の帯の幅（太く＝明るく） */
  --band-h: 900px;            /* 金の帯の高さ（ボックスより大きく） */
  --blur: 6px;                /* 帯のぼかし量（グラデ感） */
  --radius: 0;                /* 角丸（0=四角形） */

  /* shine effect */
    --shine-angle: 18deg;
    --shine-width: 28%;
    --shine-blur: 10px;
    --shine-bright: 1.6;
    --shine-dur: 0.6s;
  }
  .shine-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
  }
  .shine-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform var(--shine-dur) ease, filter var(--shine-dur) ease;
  }
  .shine-ray {
    position: absolute;
    inset: -65% -120%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
      115deg,
      rgba(255,255,255,0) calc(50% - var(--shine-width)),
      rgba(255,255,255,1) 50%,
      rgba(255,255,255,0) calc(50% + var(--shine-width))
    );
    transform: translateX(-70%) rotate(var(--shine-angle));
    opacity: 0;
    filter: blur(var(--shine-blur)) brightness(var(--shine-bright));
    mix-blend-mode: screen;
  }
  .spark {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 50px; height: 50px;
    background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 60%);
    border-radius: 50%;
    filter: blur(2px);
    mix-blend-mode: screen;
    opacity: 0;
    z-index: 3;
  }
  .shine-wrapper.is-animating .shine-ray {
    animation: shine-sweep var(--shine-dur) cubic-bezier(.22,.61,.36,1) forwards;
  }
  .shine-wrapper.is-animating img {
    transform: scale(1.02);
    animation: img-flash calc(var(--shine-dur) * 0.3) ease-out 1;
  }
  .shine-wrapper.is-animating .spark {
    animation: spark-pop calc(var(--shine-dur) * 0.45) ease-out 1;
  }
  @keyframes shine-sweep {
    0%   { transform: translateX(-70%) rotate(var(--shine-angle)); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translateX(70%) rotate(var(--shine-angle)); opacity: 0; }
  }
  @keyframes img-flash {
    0% { filter: brightness(1); }
    40% { filter: brightness(1.45); }
    100% { filter: brightness(1); }
  }
  @keyframes spark-pop {
    0% { opacity: 0; transform: scale(0.6); filter: blur(2px); }
    30% { opacity: 1; transform: scale(1.0); filter: blur(1.5px); }
    100% { opacity: 0; transform: scale(1.3); filter: blur(3px); }
  }

  ul.castlist{
  list-style:none;
}


 /* border effect */
/* ================================================
   - li自体が“枠帯”を持つ（背景=枠色、padding=枠の太さ）
   - 中身の .frame で白面＋内側 padding(15px) を作る
   - ::before の金グラデ帯を中心回転 → 枠帯だけに見える
   ================================================ */
li.castlist-item{
  width:48%; 
  position:relative;
  background: var(--base);        /* ← 枠色 */
  padding: var(--bw);             /* ← 枠の太さ */
  border-radius: var(--radius);
  overflow:hidden;
  isolation:isolate;
}
.castlist-item .frame{
  position:relative;
  z-index:1;
  width:100%; height:100%;
  background:#fff;
  border-radius: var(--radius);
  padding:10px;                   /* ← ご指定の内側padding */
  display:flex; flex-direction:column;
}

/* 200×400 サムネイルボックス（中央寄せ） */
.thumb-box{
  width:200px; height:400px;
  background:#f0f0f0 center/cover no-repeat;
  border:1px solid #e5e5e5;
}


/* 回転する金の帯（枠帯にだけ可視化） */
li.castlist-item::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width: var(--band-w);
  height: var(--band-h);
  transform: translate(-50%,-50%) rotate(0deg);
  transform-origin: 50% 50%;
  z-index:0;
  pointer-events:none;
  background: linear-gradient(90deg,
    rgba(255,231,160,0) 0%,
    rgba(255,211,110,.55) 40%,
    rgba(255,232,176,1) 50%,
    rgba(255,179,70,.9) 60%,
    rgba(255,231,160,0) 100%);
  filter: blur(var(--blur));
  opacity:0;
}

/* ホバーで右回りに一周、ease-in-out、最後はフェードアウト */
li.castlist-item:hover::before{
  animation: sweep var(--dur) ease-in-out 1 forwards;
}
@keyframes sweep{
  0%   { opacity:0; transform:translate(-50%,-50%) rotate(0deg); }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { opacity:0; transform:translate(-50%,-50%) rotate(360deg); }
}