:root{font-family:-apple-system,BlinkMacSystemFont,'Yu Gothic UI','Noto Sans JP',sans-serif;color:#ece9e4;background:#0a0b0c;--bg:#0a0b0c;--surface:#121315;--surface2:#1a1c1f;--gold:#dda94f;--ice:#8fa6b4;--muted:#8f9298;--line:#2a2d31}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:radial-gradient(ellipse 120% 60% at 50% 118%,rgba(221,169,79,.10),transparent 60%),linear-gradient(180deg,#08090a,#0a0b0d 60%,#0e0f11);background-attachment:fixed;min-height:100vh}button,input{font:inherit}.app{min-height:100vh}.header{height:84px;display:flex;align-items:center;padding:0 4.5vw;border-bottom:1px solid #212327;gap:34px}.brand{font-family:Georgia,serif;font-size:30px;letter-spacing:.34em;color:#ece9e4;text-decoration:none}.light-line{height:56px;width:2px;background:var(--gold);box-shadow:0 0 16px rgba(221,169,79,.5)}nav{display:flex;gap:40px;height:100%;align-items:center}nav a{color:#a7aab0;text-decoration:none;font-size:14px;height:100%;display:flex;align-items:center;position:relative}nav a.active{color:var(--gold)}nav a.active:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold)}main{width:min(1180px,92vw);margin:28px auto 48px}.search-panel{width:min(790px,74%);margin:0 auto 26px}.search-form{height:60px;display:grid;grid-template-columns:48px 1fr 126px;background:#f1eee8;border-radius:10px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.45);align-items:center}.search-form svg{width:23px;fill:none;stroke:currentColor;stroke-width:2;color:#4a4c50;justify-self:end}.search-form input{border:0;outline:0;padding:0 18px;font-size:17px;color:#1a1b1d;background:transparent}.search-form button{align-self:stretch;border:0;background:linear-gradient(135deg,#e3b25c,#c9913c);color:#1d1608;font-size:16px;font-weight:700;cursor:pointer}.search-form button:disabled{opacity:.65}.candidates{margin-top:9px;border:1px solid var(--line);border-radius:8px;background:#101113;overflow:hidden}.candidate{width:100%;border:0;border-bottom:1px solid #232529;background:transparent;color:#ece9e4;display:grid;grid-template-columns:48px 1fr 24px;gap:14px;align-items:center;text-align:left;padding:8px 14px;cursor:pointer}.candidate:last-child{border-bottom:0}.candidate:hover,.candidate:focus-visible,.candidate.selected{background:linear-gradient(90deg,rgba(221,169,79,.13),rgba(221,169,79,.03));box-shadow:inset 0 0 0 1px rgba(221,169,79,.32)}.thumb-fallback{width:48px;height:42px;border-radius:4px;background:#1a1c1f;display:block}.candidate img{width:48px;height:42px;object-fit:cover;border-radius:4px}.poster-fallback{width:100%;height:100%;background:#141619}.about{margin:48px auto 0;padding:28px 0 8px;border-top:1px solid rgba(121,166,201,.2);max-width:720px}.about h2{font-family:'Yu Mincho','Noto Serif JP',serif;font-size:22px;margin:0 0 12px}.about p{color:#9a9da3;line-height:1.9;margin:0 0 12px}.provider{cursor:default}.provider[href]{cursor:pointer}footer a{color:#a7aab0;text-decoration:none}footer a:hover,footer a:focus-visible{color:var(--gold)}.candidate strong,.candidate small{display:block}.candidate strong{font-size:14px}.candidate small{color:var(--muted);font-size:12px;margin-top:3px}.candidate svg,.provider svg{width:18px;fill:none;stroke:currentColor;stroke-width:2;color:#9b9ea4}.movie{display:grid;grid-template-columns:320px minmax(0,1fr);gap:34px;align-items:start}.poster{margin:0;position:relative;height:500px;border:1px solid #33363b;border-radius:7px;overflow:hidden;background:#0e0f11}.poster img{width:100%;height:100%;object-fit:cover}.poster:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.16));pointer-events:none}.movie-content{position:relative;padding-top:4px}.movie h1{font-family:'Yu Mincho','Noto Serif JP',serif;font-size:45px;line-height:1.2;letter-spacing:.05em;margin:0 0 10px}.meta{color:#b6b9bf;font-size:18px;margin:0 0 18px}.meta span{margin:0 12px}.overview{color:#c2c5ca;line-height:1.9;max-width:620px;margin:0 0 20px}.availability-title{display:flex;align-items:end;justify-content:space-between;margin:0 0 12px}.availability h2{font-family:'Yu Mincho','Noto Serif JP',serif;font-size:22px;margin:0}.availability time{font-size:12px;color:#8f9298}.provider-row{display:grid;grid-template-columns:155px 1fr;min-height:70px;border:1px solid var(--line);border-left:6px solid var(--gold);border-radius:7px;margin:9px 0;align-items:center;background:#111214;overflow:hidden}.provider-row.rent,.provider-row.buy{border-left-color:var(--ice)}.provider-row h3{margin:0;padding-left:18px;color:var(--gold);font-size:17px}.provider-row.rent h3,.provider-row.buy h3{color:var(--ice)}.provider-row>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:10px}.search-error,.candidates>.empty{padding:14px;color:#dc9a86;font-size:13px;margin:0}.provider{height:48px;display:grid;grid-template-columns:40px 1fr 20px;align-items:center;gap:8px;background:linear-gradient(135deg,#1d1f23,#141619);border:1px solid #2c2f34;border-radius:6px;color:#ece9e4;text-align:left;text-decoration:none}.provider:hover,.provider:focus-visible{border-color:var(--gold);transform:translateY(-1px)}.provider-mark{display:grid;place-items:center;background:#e9e5dd;color:#1a1b1d;height:100%;font-weight:800;font-size:18px}.provider-mark img{width:28px;height:28px;object-fit:contain}.provider svg{width:15px}.empty{color:var(--muted);font-size:13px}.notice{font-size:12px;color:#86898f;margin:16px 2px}.notice:before{content:'i';display:inline-grid;place-items:center;border:1px solid #5a5d62;border-radius:50%;width:16px;height:16px;margin-right:8px;font-size:10px}footer{border-top:1px solid #212327;min-height:82px;display:flex;align-items:center;gap:34px;padding:0 4.5vw;color:#83868c;font-size:12px}footer strong{font-family:Georgia,serif;color:#ece9e4;letter-spacing:.3em;font-size:20px}footer p:last-child{margin-left:auto}@media(max-width:800px){.header{height:70px;padding:0 20px;gap:18px}.brand{font-size:23px}.light-line{display:none}nav{gap:20px;margin-left:auto}nav a{font-size:12px}main{width:min(92vw,620px);margin-top:20px}.search-panel{width:100%}.search-form{grid-template-columns:42px 1fr 84px;height:54px}.search-form input{font-size:15px;padding:0 10px}.candidates{max-height:174px;overflow:auto}.movie{grid-template-columns:110px minmax(0,1fr);gap:10px 18px}.movie-content{display:contents}.poster{height:175px;grid-row:1/4}.movie h1{font-size:28px;grid-column:2;grid-row:1;margin:0;align-self:end}.meta{font-size:14px;grid-column:2;grid-row:2;margin:0}.overview{font-size:13px;line-height:1.7;grid-column:2;grid-row:3;margin:0}.availability{grid-column:1/-1;grid-row:4}.availability-title{margin-top:10px;align-items:start}.availability h2{font-size:19px}.availability time{max-width:90px;text-align:right}.provider-row{grid-template-columns:1fr}.provider-row h3{padding:10px 14px 0}.provider-row>div{grid-template-columns:1fr}.provider{height:45px}footer{padding:18px 20px;display:grid;gap:8px}footer p{margin:0}footer p:last-child{margin-left:0}}

/* --- 文字の重なり防止 --- */
.movie h1,.meta,.overview{overflow-wrap:anywhere}
.provider{height:auto;min-height:48px}
.provider>span{min-width:0}
.provider>span:not(.provider-mark){padding:7px 0;line-height:1.35;overflow-wrap:anywhere}
.provider-mark{align-self:stretch;height:auto}
.candidate>span:not(.thumb-fallback){min-width:0}
.candidate strong,.candidate small{overflow-wrap:anywhere}
.provider-row>div{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.availability-title h2{min-width:0}
.availability-title time{flex:none}

/* --- 検索を右サイドバーへ --- */
main{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:0 30px;align-items:start}
.movie{grid-area:1/1/2/2}
.search-panel{grid-area:1/2/2/3;width:auto;margin:0;position:sticky;top:24px}
.about{grid-area:2/1/3/-1}
.search-form{grid-template-columns:44px 1fr 34px 92px;height:54px}
.search-form button.search-clear{border:0;background:transparent;color:#84868b;font-size:16px;line-height:1;cursor:pointer;padding:0;visibility:hidden;align-self:center;height:26px;border-radius:50%}
.search-form.has-text button.search-clear{visibility:visible}
.search-form button.search-clear:hover,.search-form button.search-clear:focus-visible{color:#1a1b1d;background:rgba(0,0,0,.07)}
.search-form input{min-width:0;font-size:15px;padding:0 12px}
.candidates{margin-top:10px;max-height:min(520px,calc(100vh - var(--header-h) - 150px));overflow-y:auto;overscroll-behavior:contain}
.candidates:empty{display:none}
.no-stream{margin:12px 2px 0;color:#d8d4cd;font-size:15px}
[hidden]{display:none!important}
main[data-page="about"] .about{margin-top:0;padding-top:0;border-top:0}
.app{display:flex;flex-direction:column}
main{flex:1 0 auto;align-content:start}

/* 幅が足りなくなったら装飾を落として本文幅を確保 */
@media(max-width:1240px){
  .movie{grid-template-columns:240px minmax(0,1fr);gap:24px}
  .movie h1{font-size:34px}
  .poster{height:360px}
  main{grid-template-columns:minmax(0,1fr) 300px}
}

/* 2カラムが成立しない幅では1カラムに戻し、候補リストは重ねて表示 */
@media(max-width:1000px){
  main{display:block}
  .search-panel{position:relative;width:100%;margin:0 0 16px}
  .candidates{position:absolute;left:0;right:0;top:100%;z-index:5;max-height:min(58vh,320px);margin-top:9px;background:#0a1b2b;box-shadow:0 18px 40px rgba(0,0,0,.6)}
  .movie{grid-template-columns:280px minmax(0,1fr)}
  .poster{height:420px}
}

@media(max-width:800px){
  .movie{grid-template-columns:110px minmax(0,1fr);gap:10px 18px}
  .movie h1{font-size:28px}
  .poster{height:175px}
  .provider{min-height:45px}
  .candidates{max-height:min(52vh,290px)}
}

.more{margin:9px 0 0}
.more>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:11px;padding:13px 16px;border:1px solid var(--line);border-radius:7px;background:#111214;color:#c9ccd1;font-size:14px}
.more>summary::-webkit-details-marker{display:none}
.more>summary::before{content:'';flex:none;width:8px;height:8px;border-right:2px solid var(--ice);border-bottom:2px solid var(--ice);transform:rotate(-45deg);transition:transform .15s}
.more[open]>summary::before{transform:rotate(45deg)}
.more>summary:hover,.more>summary:focus-visible{border-color:var(--ice);color:#ece9e4}
.more[open]>summary{margin-bottom:2px}

/* ポスターも検索窓と同じく、スクロール中は追従させる */
.poster{position:sticky;top:24px}
@media(max-width:800px){.poster{position:relative;top:auto}}

/* ヘッダーを固定 */
:root{--header-h:84px}
.header{position:sticky;top:0;z-index:30;background:rgba(9,10,12,.94);backdrop-filter:saturate(140%) blur(10px)}
/* 吸着位置を自然位置（ヘッダー高＋main の上余白）と完全に一致させる。
   ずれていると、その差の分だけ最初にカクッと動いてから止まる。
   top は sticky のときだけ意味を持たせる（relative のまま残すと要素がずれて本文に重なる） */
:root{--main-gap:28px}
.poster{top:calc(var(--header-h) + var(--main-gap))}
.search-panel{top:calc(var(--header-h) + var(--main-gap))}
@media(max-width:1000px){.search-panel{top:auto}}
@media(max-width:800px){:root{--header-h:70px;--main-gap:20px}.poster{top:auto}}

/* 最近公開された配信中の作品 */
.recent{margin:8px 0 0}
.recent h2{font-family:'Yu Mincho','Noto Serif JP',serif;font-size:20px;margin:0 0 16px;font-weight:normal;color:#d8d4cd}
.recent-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 18px}
.recent-item{border:0;background:transparent;padding:0;text-align:left;color:inherit;cursor:pointer;display:grid;gap:8px;align-content:start}
.recent-item img,.recent-fallback{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;border-radius:6px;border:1px solid #26282c;background:#141619;transition:border-color .15s,transform .15s}
.recent-item:hover img,.recent-item:focus-visible img,.recent-item:hover .recent-fallback,.recent-item:focus-visible .recent-fallback{border-color:var(--gold);transform:translateY(-2px)}
.recent-item strong{font-size:13px;font-weight:600;line-height:1.45;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.recent-item small{font-size:12px;color:var(--muted)}
@media(max-width:800px){.recent-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.recent h2{font-size:17px}}

.tmdb-link{display:inline-grid;grid-auto-flow:column;align-items:center;gap:9px;margin:14px 2px 0;padding:11px 16px;border:1px solid var(--line);border-radius:7px;background:#111214;color:#c9ccd1;font-size:14px;text-decoration:none}
.tmdb-link:hover,.tmdb-link:focus-visible{border-color:var(--ice);color:#ece9e4}
.tmdb-link svg{width:15px}
/* 吸着できる距離は「包含ブロックの高さ − 自身の高さ」で決まる。
   負の下マージンでその距離を伸ばし、ページ末尾でも浮き上がらないようにする */
@media(min-width:1001px){.search-panel{margin-bottom:-220px}}