.syonei-page { background: #fff; }
.syonei-main { background-image: url("../img/tv/syonei2026/syonei-background01.webp"); background-position: left top; background-repeat: repeat; background-size: auto; }
.syonei-content { width: min(1000px, 100%); margin-inline: auto; padding: 20px 10px 40px; background: rgb(255 255 255 / .8); }
.syonei-title { margin: 0 0 30px; padding: 0; color: var(--rbc-text); background: none; border: 0; font-size: 30px; font-weight: 700; line-height: 1.45; font-family: "Yuji Syuku", serif;}
.syonei-onair { display: flex; width: min(100%, 760px); margin: 0 auto 36px; border-block: 1px solid #9d8974; }
.syonei-onair dt, .syonei-onair dd { margin: 0; padding: 14px 22px; }
.syonei-onair dt { min-width: 120px; color: #fff; background: #8f2e14; font-weight: 700; text-align: center; }
.syonei-onair dd { flex: 1; background: #fffc; }
.syonei-poster { width: min(100%, 724px); margin: 0 auto 26px; text-align: center; }
.syonei-poster img, .syonei-chart img { display: block; max-width: 100%; height: auto; margin: auto; }
.syonei-movie { width: min(100%, 900px); aspect-ratio: 16 / 9; margin: 0 auto 36px; background: #111; }
.syonei-movie iframe { display: block; width: 100%; height: 100%; border: 0; }
.syonei-news { width: min(100%, 900px); margin: 0 auto 54px; padding: 24px 18px 12px; border: 1.5px solid #8c8f94; background: #fffd; position: relative; }
.syonei-news h3 { position: absolute; top: -18px; left: 24px; margin: 0; padding: 3px 10px; color: #333; background: #f7f4ef; font-size: 18px; }
.syonei-news ul { max-height: 160px; margin: 0; padding: 0 12px; overflow-y: auto; list-style: none; }
.syonei-news li { padding: 6px 0; font-size: 14px; line-height: 1.6; }
.syonei-news time { color: #6a615b; }
.syonei-news a { color: var(--rbc-main); text-decoration: underline; }
.syonei-anchor-nav { display: flex; justify-content: center; gap: clamp(14px, 5vw, 50px); margin: 0 auto 76px; }
.syonei-anchor-nav a { display: block; width: min(29%, 250px); transition: transform .2s ease; }
.syonei-anchor-nav a:hover { transform: scale(1.05); opacity: 1; }
.syonei-anchor-nav img { display: block; width: 100%; height: auto; }
.syonei-section { scroll-margin-top: 120px; margin: 0 auto 76px; }
.syonei-section > h3 { margin: 0 0 28px; padding-bottom: 12px; color: #501807; border-bottom: 2px solid #8f2e14; font-family: "Yuji Syuku", serif; font-size: clamp(28px, 4vw, 38px); text-align: center; }
.syonei-story { text-align: center; }
.syonei-prologue { margin: 80px auto 20px; font-family: "Yuji Syuku", "Yu Mincho", serif; font-size: 23px; line-height: 2; text-align: left; writing-mode: vertical-rl; }
.syonei-prologue p { margin: 0 0 0 50px; }
.syonei-prologue--mobile { display: none; }
.syonei-tabs { display: grid; grid-template-columns: repeat(5, 1fr); width: min(100%, 950px); margin: 24px auto 0; }
.syonei-tabs input { position: absolute; opacity: 0; }
.syonei-tabs label { padding: 12px 4px; color: #666; background: #eee; border: 1px solid #ccc; border-bottom: 0; cursor: pointer; font-family: "Yuji Syuku", serif; font-size: 18px; font-weight: 700; }
.syonei-tabs input:checked + label { color: #fff; background: #8f2e14; border-color: #8f2e14; }
.syonei-tab-panels { grid-column: 1 / -1; min-height: 150px; padding: 25px; border: 1px solid #8f2e14; background: #fffd; text-align: left; }
.syonei-tab-panel { display: none; }
.syonei-tab-panel h2 { width: 100%; margin: 0 0 15px; padding: 0 0 16px; color: initial; background: none; border-bottom: 2px solid #8f2e14; font-family: "Yuji Syuku", "Yu Mincho", serif; font-size: 32px; letter-spacing: .08em; }
.syonei-tab-panel p { margin: 0; color: #333; font-size: 16px; line-height: 1.8; }
#episode-1:checked ~ .syonei-tab-panels .syonei-tab-panel:nth-child(1),
#episode-2:checked ~ .syonei-tab-panels .syonei-tab-panel:nth-child(2),
#episode-3:checked ~ .syonei-tab-panels .syonei-tab-panel:nth-child(3),
#episode-4:checked ~ .syonei-tab-panels .syonei-tab-panel:nth-child(4),
#episode-5:checked ~ .syonei-tab-panels .syonei-tab-panel:nth-child(5) { display: block; }
.syonei-chart { margin: 0; }
.syonei-cast { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 80px; padding: 20px; }
.syonei-cast details { flex: 0 1 350px; min-width: 0; }
.syonei-cast summary { list-style: none; cursor: pointer; text-align: center; }
.syonei-cast summary::-webkit-details-marker { display: none; }
.syonei-cast summary img { display: block; width: 210px; max-width: 100%; height: 210px; margin: 0 auto 15px; border-radius: 8px; object-fit: cover; }
.syonei-cast summary span { display: block; font-size: 17px; line-height: 1.8; }
.syonei-cast details p { display: none; }
.syonei-modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 24px; background: rgb(0 0 0 / .7); }
.syonei-modal[hidden] { display: none; }
.syonei-modal__dialog { position: relative; width: min(500px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 30px; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgb(0 0 0 / .2); }
.syonei-modal__dialog h2 { margin: 0 0 15px; text-align: center; }
.syonei-modal__dialog img { display: block; width: min(300px, 100%); height: auto; margin: 0 auto 15px; border-radius: 6px; }
.syonei-modal__dialog p { margin: 0; color: #444; font-size: 15px; line-height: 1.6; }
.syonei-modal__close { display: block; margin: 18px auto 0; padding: 10px 20px; color: #fff; background: #333; border: 0; border-radius: 4px; cursor: pointer; }
.syonei-credit { margin-top: 70px; color: #3f251d; font-family: "Yuji Syuku", "Yu Mincho", serif; font-size: 18px; line-height: 1.8; text-align: center; }
.syonei-credit p { margin: 0 0 24px; }
.syonei-credit strong { font-size: 22px; }
@media (max-width: 767px) { .syonei-content { padding-bottom: 60px; } .syonei-onair { margin-bottom: 26px; } .syonei-onair dt, .syonei-onair dd { padding: 11px; } .syonei-onair dt { min-width: 92px; } .syonei-news { margin-bottom: 38px; } .syonei-anchor-nav { gap: 9px; margin-bottom: 48px; } .syonei-anchor-nav a { width: 32%; } .syonei-prologue { margin-inline: 6px; font-size: 17px; } .syonei-tabs label { font-size: 14px; } .syonei-tab-panel { min-height: 110px; padding: 18px; } .syonei-cast { gap: 22px 14px; padding: 10px 0; } .syonei-cast details { flex-basis: calc(50% - 7px); } .syonei-cast summary span { font-size: 14px; } .syonei-modal__dialog { padding: 24px; } }

@media (max-width: 767px) {
  .syonei-content { width: 100%; padding: 0 15px 20px; }
  .syonei-title { margin-bottom: 20px; font-size: 20px; }
  .syonei-tab-panels { min-height: 110px; padding: 18px; }
  .syonei-tab-panel { min-height: 0; padding: 0; }
  .syonei-tab-panel h2 { font-size: 25px; }
}

@media (max-width: 428px) {
  .syonei-prologue--desktop { display: none; }
  .syonei-prologue--mobile { display: block; height: 350px; margin-top: 40px; font-size: 16px; }
  .syonei-prologue--mobile p { margin-left: 0; }
}