/* Nikotama Custom Styles

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap');

/* Color Variables */
:root {
    --color-brown: #80290D;
    --color-brown-dark: #822C11;
    --color-gray: #555555;
    --color-gray-light: #707070;
    --color-yellow: #F5F85A;
    --color-teal: #10BBA6;
    --color-orange: #F5B10D;
    --color-white: #ffffff;
    --color-black: #000000;
}

/* Base Styles */
html {
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: 'Shippori Antique B1', sans-serif;
    color: var(--color-gray);
    background-color: white !important;
    background-image: url('../img/tone-bg.webp');
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: 0 0;
    background-size: 70% auto;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 768px) {
    body {
        background-size: 60% auto;
    }
}

/* Override Fuji TV common styles */
#cx_spContentsWrap,
#pc-bg {
    background-color: transparent !important;
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
}

/* Main Visual Section */
.nikotama-mainvisual {
    width: 100%;
    margin: 0 auto;
    background: var(--color-white);
    position: relative;
    z-index: 2;
}

.nikotama-mainvisual img {
    width: 100%;
    max-width: clamp(320px, 100vw, 1280px);
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Announcement Section */
.announcement-section {
    width: 100%;
    /* max-width: clamp(320px, 100vw, 1920px); */
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.announcement-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-orange);
    opacity: 0.28;
}

.announcement-content {
    width: 100%;
    max-width: 80vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 1.5vw, 17px);
    margin-top: clamp(16px, 2vw, 21.5px);
    margin-bottom: clamp(33px, 5vw, 48px);
    z-index: 2;
}

.announcement-text {
    text-align: center;
    color: var(--color-gray);
    font-size: 0;
    line-height: 1.5;
}

.announcement-text span {
    font-size: clamp(16px, 2vw, 28px);
}

.announcement-text .large-number {
    font-size: clamp(24px, 4vw, 48px);
}

.announcement-text-break {
    display: none;
}

.announcement-text-break-426 {
    display: none;
}

.announcement-line {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
    flex-wrap: wrap;
}

.announcement-logo {
    width: clamp(200px, 25vw, 302px);
    height: clamp(36px, 4vw, 46px);
    padding: clamp(6px, 0.8vw, 8px) clamp(20px, 3vw, 34px);
    position: relative;
    background-image: url('../img/btn-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: clamp(20px, 3vw, 30px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(16px, 2.5vw, 32px);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.announcement-logo:hover {
    opacity: 0.8;
}

.announcement-logo img {
    height: clamp(20px, 2.5vw, 30px);
    width: auto;
}

.announcement-logo-text {
    color: var(--color-gray-light);
    font-size: clamp(14px, 1.5vw, 16px);
    letter-spacing: 3.2px;
}

.announcement-social {
    display: flex;
    gap: clamp(20px, 3.5vw, 41px);
    align-items: center;
}

.announcement-social-link {
    display: block;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.announcement-social-link:hover {
    opacity: 0.7;
}

.announcement-social-logo {
    width: clamp(20px, 2.5vw, 30px);
    height: clamp(20px, 2.5vw, 30px);
    display: block;
    object-fit: contain;
}

/* Navigation Section */
.introduction-section {
    width: 100%;
    /* max-width: clamp(320px, 100vw, 1920px); */
    margin: 0 auto;
    padding: clamp(8px, 1vw, 10px) 0;
    background-image: url('../img/obi.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}

/* Decorative Images */
.decorative-images {
    position: relative;
    width: 100%;
    max-width: clamp(320px, 100vw, 1920px);
    margin: 0 auto;
    pointer-events: none;
    z-index: 2;
}

.decorative-image {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.decorative-image--top-right {
    right: 1%;
    transform: translateY(-44%);
    width: clamp(200px, 23vw, 433px);
    height: auto;
    max-width: 30vw;
}

.decorative-image--bottom-left {
    left: 7%;
    transform: translateY(143%);
    width: clamp(264px, 28vw, 520px);
    height: auto;
}

.decorative-image--top-left {
    top: 0;
    left: 0;
    width: clamp(200px, 25vw, 400px);
    height: auto;
    max-width: 30vw;
}

.decorative-image--bottom-right {
    bottom: 0;
    right: 0;
    width: clamp(200px, 25vw, 400px);
    height: auto;
    max-width: 30vw;
}

/* Video Section */
.video-section {
    width: 100%;
    margin: clamp(100px, 15vw, 200px) auto clamp(156px, 20vw, 216px) auto;
    position: relative;
    z-index: 1;
    overflow: visible;
}

@media (max-width: 768px) {
    .video-section {
        margin: clamp(200px, 25vw, 300px) auto clamp(200px, 25vw, 300px) auto;
    }
}

.video-section::before {
    content: '';
    position: absolute;
    top: clamp(-200px, -15vw, -100px);
    width: 200%;
    height: calc(clamp(100px, 15vw, 200px) + clamp(156px, 20vw, 216px) + (clamp(320px, 50vw, 972px) * 9 / 16));
    background: var(--color-orange);
    opacity: 0.28;
    z-index: -1;
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0%, 100% 55%, 0% 100%);
}

@media (max-width: 768px) {
    .video-section::before {
        top: clamp(-300px, -25vw, -200px);
        height: calc(clamp(200px, 25vw, 400px) + clamp(200px, 25vw, 300px) + (clamp(320px, 50vw, 972px) * 9 / 16));
        clip-path: polygon(0 0, 100% 0%, 100% 55%, 0% 100%);
    }
}

.video-wrapper {
    width: 100%;
    max-width: clamp(320px, 50vw, 972px);
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.introduction-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 8vw, 106px);
    padding: clamp(8px, 1vw, 10px) 0;
}

.introduction-nav a {
    color: var(--color-brown-dark);
    font-size: clamp(20px, 2.5vw, 28px);
    font-family: 'Viga', sans-serif;
    text-decoration: none;
    transition: opacity 0.3s;
}

.introduction-nav span {
    color: var(--color-gray-light);
    font-size: clamp(20px, 2.5vw, 28px);
    font-family: 'Viga', sans-serif;
}

.introduction-nav a:hover {
    opacity: 0.7;
}

/* Section Titles */
.section-title {
    font-family: 'Viga', sans-serif;
    font-size: clamp(40px, 8vw, 80px);
    color: var(--color-brown);
    text-align: center;
    margin: 0;
    line-height: 1;
    margin-inline: auto;
}

.section-title-large {
    font-size: clamp(40px, 8vw, 80px);
}

/* Introduction Content */
.introduction-content-wrapper {
    width: 100%;
    max-width: clamp(320px, 100vw, 1280px);
    margin: 0 auto clamp(120px, 15vw, 200px);
    padding: 0 1.2rem;
    box-sizing: border-box;
}

.introduction-content-wrapper .section-title {
    background-image: url('../img/intro-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: clamp(20px, 3vw, 36px);
    width: 100%;
    max-width: clamp(700px, 80vw, 1084px);
    margin-bottom: clamp(20px, 3vw, 40px);
}

.introduction-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: clamp(16px, 2vw, 26px) clamp(30px, 5vw, 66px);
    align-items: start;
    margin-inline: auto;
    max-width: clamp(700px, 80vw, 1084px);
}

.introduction-text {
    padding: 0;
}

.introduction-text p {
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: clamp(20px, 2.5vw, 26px);
    color: var(--color-gray);
    margin-bottom: clamp(12px, 1.5vw, 20px);
    margin-top: 0 !important;
}

.introduction-text-top {
    grid-column: 1;
    grid-row: 1;
}

.introduction-image-top-right {
    grid-column: 2;
    grid-row: 1;
}

.introduction-image-center-left {
    grid-column: 1;
    grid-row: 2;
}

.introduction-text-center {
    grid-column: 2;
    grid-row: 2;
}

.introduction-image-bottom-right {
    grid-column: 2;
    grid-row: 3;
}

.introduction-image {
    width: 100%;
}

.introduction-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Episode Section */
.episode-section {
    width: 100%;
    max-width: clamp(320px, 100vw, 1084px);
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(40px, 6vw, 80px) clamp(18px, 3vw, 36px);
    justify-items: center;
}

.episode-item {
    width: clamp(150px, 20vw, 244px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 1.5vw, 18px);
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.episode-item:hover {
    opacity: 0.8;
    transform: translateY(-5px);
}

.episode-item:focus {
    outline: clamp(1px, 0.2vw, 2px) solid var(--color-brown);
    outline-offset: clamp(2px, 0.4vw, 4px);
    border-radius: clamp(4px, 0.8vw, 8px);
}

.episode-image-wrapper {
    width: clamp(150px, 20vw, 244px);
    height: clamp(150px, 20vw, 244px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 155px;
    border: 1px solid var(--color-gray-light);
    overflow: hidden;
}

.episode-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.episode-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: clamp(24px, 3vw, 32px);
    font-family: 'Viga', sans-serif;
    line-height: clamp(30px, 4vw, 50px);
    text-align: center;
    z-index: 2;
}

.episode-title {
    text-align: center;
    color: var(--color-gray);
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.5;
}

/* Story Section */
.story-section {
    width: 100%;
    margin: 0 auto clamp(240px, 24vw, 360px);
    position: relative;
    z-index: 2;
    overflow: visible;
}

.story-section::before {
    content: '';
    position: absolute;
    top: calc(clamp(-200px, -15vw, -120px) + 23.2px);
    width: 100%;
    height: 154%;
    background: var(--color-yellow);
    opacity: 0.28;
    z-index: -1;
    pointer-events: none;
    clip-path: polygon(0 15%, 100% 0%, 100% 75%, 0% 100%);
}

@media (max-width: 768px) {
    .story-section::before {
        clip-path: polygon(0 7%, 100% 0%, 100% 93%, 0% 100%);
        height: 117%;
    }
}

@media (max-width: 545px) {
    .story-section::before {
        clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
        height: 112%;
    }
}

.decorative-image--story-icon {
    top: 0;
    right: -10%;
    width: auto;
    height: clamp(120px, 20vw, 238px);
    object-fit: contain;
    transform: translateY(-50%);
    /* 画像の下端がstory-lineから1/5程度下がる */
}

.story-header,
.chart-header {
    display: flex;
    align-items: baseline;
    justify-content: center;
    max-width: clamp(230px, 70vw, 1084px);
    margin: 0 auto;
    padding: 0 0.8rem;
    position: relative;
}

.story-header {
    margin-bottom: clamp(44px, 9vw, 66.7px);
}

.chart-header {
    margin-bottom: clamp(32px, 6vw, 50px);
}

.story-title {
    font-family: 'Viga', sans-serif;
    font-size: clamp(40px, 8vw, 80px);
    color: var(--color-brown);
    margin: 0;
    line-height: 1;
    z-index: 2;
}

.story-line-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    margin-left: -59px;
}

.story-line {
    height: auto;
    max-height: 32px;
    width: clamp(150px, 52vw, 829px);
    object-fit: contain;
}

.story-icon {
    width: auto;
    height: clamp(90px, 20vw, 238px);
    object-fit: contain;
}

.story-content {
    display: flex;
    align-items: flex-start;
}

.story-image-wrapper {
    width: clamp(140px, 20vw, 278px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 4;
}

.story-image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.story-role {
    padding-left: clamp(12px, 2vw, 24px);
    margin-top: clamp(6px, 1vw, 10px);
}

.story-role-name {
    color: black;
    font-size: clamp(16px, 2vw, 20px);
    letter-spacing: 2px;
    margin-bottom: -8px;
}

@media (max-width: 1040px) {
    .story-role-name {
        margin-bottom: clamp(-10px, -2vw, -15px);
    }
}

.story-role-actor {
    color: black;
    font-size: clamp(36px, 3.2vw, 50px);
    line-height: clamp(40px, 6vw, 66px);
    letter-spacing: -0.2vw;
    white-space: nowrap;
}

.story-text-wrapper {
    width: clamp(250px, 30vw, 298px);
    padding: clamp(6px, 0.8vw, 8px) clamp(10px, 1.3vw, 13px);
    background: white;
    margin-top: clamp(12px, 2vw, 24px);
    margin-left: clamp(-24px, -3vw, -20px);
    min-height: clamp(250px, 35vw, 415px);
    box-sizing: border-box;
}

@media (max-width: 1040px) {
    .story-text-wrapper {
        width: clamp(250px, 70vw, 485px);
        min-height: clamp(200px, 20vw, 265px);
        margin-left: clamp(-15px, -2vw, -10px);
    }
}

.story-text {
    color: var(--color-brown);
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: clamp(20px, 2.5vw, 25px);
}

/* Comment Section */
.comment-section::before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 112%;
    background: var(--color-teal);
    opacity: 0.28;
    z-index: -1;
    pointer-events: none;
    clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
}

@media (max-width: 1040px) {
    .comment-section::before {
        clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
        height: 105.5%;
    }
}

.comment-section {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding-bottom: clamp(120px, 24vw, 272px);
    overflow: visible;
}

.comment-decorative-images {
    position: relative;
    width: 100%;
    max-width: clamp(320px, 100vw, 1920px);
    margin: 0 auto;
    pointer-events: none;
    z-index: 2;
}

.comment-decorative-image {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.comment-decorative-image--cat {
    top: 0;
    right: 0;
    transform: translate(0, -50%);
    width: auto;
    height: clamp(165px, calc(42vw - 285px), 521px);
    object-fit: contain;
}

@media (max-width: 768px) {
    .comment-decorative-image--cat {
        height: clamp(80px, calc(43vw - 125px), 266px);
        transform: translate(-30%, 7%);
    }
}

.comment-header {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: clamp(230px, 70vw, 1084px);
    margin: 0 auto;
    padding: 0 0.8rem;
    margin-bottom: clamp(25px, 6vw, 40px);
}

.comment-title {
    color: var(--color-brown);
    font-size: clamp(40px, 8vw, 80px);
    font-family: 'Viga', sans-serif;
    margin: 0;
    line-height: 1;
}

.comment-line {
    flex: 1;
    height: auto;
    max-height: clamp(20px, 3vw, 33px);
    object-fit: contain;
    margin-left: clamp(-133px, -18vw, -86px);
    max-width: clamp(100px, 70vw, 854px);
    object-fit: contain;
    z-index: -1;
}

.comment-content-grid {
    width: 100%;
    max-width: clamp(320px, 100vw, 1084px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(3px, 0.5vw, 5px);
    position: relative;
    z-index: 1;
}

/* Cast & Staff Section */
.cast-staff-section {
    width: 100%;
    margin: 0 auto clamp(30px, 20vw, 74.3px);
    padding: clamp(40px, 6vw, 80px) 0 clamp(120px, 15vw, 244px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(36px, 5vw, 72px);
}

.cast-staff-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/office.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.12;
    z-index: 0;
    pointer-events: none;
}

.cast-staff-section>* {
    position: relative;
    z-index: 1;
}

/* Cast & Staff Decorative Images */
.cast-staff-decorative-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    pointer-events: none;
    z-index: 2;
}

.cast-staff-decorative-image {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.cast-staff-decorative-image--top-left {
    top: clamp(-10%, calc(-28vw + 180px), -3%);
    left: 3%;
    width: clamp(200px, 25vw, 400px);
    height: auto;
    max-width: 30vw;
}

.cast-staff-decorative-image--bottom-right {
    bottom: 7%;
    right: 2%;
    width: clamp(200px, 25vw, 400px);
    height: auto;
    max-width: 30vw;
}

.cast-staff-header {
    width: 100%;
    max-width: clamp(320px, 100vw, 900px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cast-staff-title {
    text-align: center;
    color: black;
    font-size: clamp(40px, 8vw, 80px);
    font-family: 'Viga', sans-serif;
    margin-bottom: clamp(-20px, -2.5vw, -28px);
}

.cast-staff-title .ampersand {
    font-size: clamp(35px, 7vw, 70px);
}

.cast-staff-line {
    width: 100%;
    height: auto;
    max-height: clamp(30px, 4vw, 50px);
    object-fit: contain;
    z-index: -1;
}

/* ベース（PC） */
.cast-staff-content {
    display: flex;
    gap: clamp(8px, 1.8vw, 64px);
    padding: 2rem 3rem;
    justify-content: center;
}

.cast-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.7rem;
}

.staff-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Grid方針（B）: リストは中身幅のブロックとして中央に見せ、列位置を固定する */
.cast-list,
.staff-list {
    width: max-content;
}

.cast-staff-list-title {
    text-align: center;
    font-size: clamp(16px, 1.6vw, 24px);
    letter-spacing: 0.12em;
    line-height: 1.2;
    margin-bottom: 1.2rem;
    white-space: nowrap;
}

.cast-list {
    --role-col: 144px;
}

.staff-list {
    --role-col: 240px;
}

.cast-list-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* main cast（先頭2名）だけを「カード化して横並び」にする */
.main-cast-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(8px, 1.2vw, 24px);
    row-gap: 0;
    justify-content: center;
    align-self: center;
}

/* main cast は「縦積みカード」を維持（全体のgrid化の影響を打ち消す） */
/* .main-cast-list .cast-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    min-height: auto;
    line-height: 2;
} */

/* .main-cast-list .cast-item .role {
    width: auto;
    text-align: center;
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--color-gray);
} */

.main-cast-list .cast-item .name {
    white-space: normal;
    text-align: center;
}

.cast-item,
.staff-item {
    display: grid;
    grid-template-columns: var(--role-col, 144px) auto;
    align-items: baseline;
    min-height: 2em;
    margin-bottom: 1.7rem;
}

/* spacer の直前の行だけ余白を付けない */
.cast-item:has(+ .cast-item--spacer) {
    margin-bottom: 0;
}

.cast-item--spacer,
.staff-item--spacer {
    height: 1.62em;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cast-item--spacer {
    justify-content: center;
    font-size: clamp(16px, 1.6vw, 24px);
    color: var(--color-gray);
}

.cast-item--spacer:not(:empty) {
    font-size: calc(clamp(16px, 1.6vw, 24px) * 1.25);
}

.cast-item--spacer::before {
    content: '';
    width: 118px;
    flex-shrink: 0;
}

.cast-item--spacer::after {
    content: '';
    width: 118px;
    flex-shrink: 0;
}

.cast-item--special .name {
    text-align: center;
    width: 100%;
}

.sp-only {
    display: none;
}

.dumb-only {
    display: none;
}

.cast-item .role {
    text-align: right;
    font-size: clamp(16px, 1.6vw, 24px);
    width: var(--role-col, 144px);
    flex-shrink: 0;
    white-space: nowrap;
    justify-self: end;
    padding-right: 1rem;
    border-right: 1px solid currentColor;
    /* '｜' の代替（列境界を常に揃える） */
}

/* .cast-item .role:not(:empty)::after,
.staff-item .role:not(:empty)::after {
    content: '';
} */

.staff-item .role {
    text-align: right;
    font-size: clamp(16px, 1.6vw, 24px);
    width: var(--role-col, 240px);
    flex-shrink: 0;
    white-space: nowrap;
    justify-self: end;
    padding-right: 1rem;
    border-right: 1px solid currentColor;
}

.cast-item .name,
.staff-item .name {
    font-size: clamp(16px, 1.6vw, 24px);
    font-weight: bold;
    white-space: nowrap;
    padding-left: 1rem;
}

/* role が空の行は区切りと余白を消す */
.cast-item .role:empty,
.staff-item .role:empty {
    border-right: none;
    /* padding-right: 0; */
}


/* タブレット（1080px以下） */
@media (max-width: 1080px) {
    .cast-staff-content {
        padding: 1.5rem 2rem;
    }

    .cast-list {
        --role-col: 120px;
    }

    .staff-list {
        --role-col: 216px;
    }

    .cast-item .role {
        font-size: clamp(14px, 1.8vw, 16px);
    }

    .cast-item--spacer::before {
        width: 97px;
    }
}

/* スマートフォン（768px以下） - 縦並びバージョン */
@media (max-width: 1024px) {
    .cast-staff-content {
        flex-direction: column;
        gap: 6rem;
        padding: 1.5rem;
        align-items: center;
    }

    .cast-list,
    .staff-list {
        max-width: 100%;
    }

    /* SPでは main cast も1列に戻す（SPは全体が縦並びなので） */
    /* .main-cast-list {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 1.5em;
    } */


    .cast-item,
    .staff-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
    }

    .staff-item:has(.role:empty) {
        margin-top: -1.5em;
    }

    .cast-item .role:not(:empty)::after,
    .staff-item .role:not(:empty)::after {
        content: '';
    }

    .cast-item .role,
    .staff-item .role {
        width: auto;
        text-align: center;
        border-bottom: 1px solid var(--color-gray);
        border-right: none;
        padding-right: 0;
    }





    .cast-item .name,
    .staff-item .name {
        white-space: break-spaces;
        text-align: center;
        padding-left: 0;
    }

    .cast-item--spacer::before,
    .cast-item--spacer::after {
        content: none;
        width: auto;
        flex: none;
    }


}

/* さらに小さい画面（480px以下）- オプション */
@media (max-width: 480px) {
    .sp-only {
        display: block;
    }
}

@media (max-width: 419px) {
    .sp-only {
        display: block;
    }
}

@media (max-width: 352px) {
    .dumb-only {
        display: block;
    }
}

/* Chart Section */
.chart-section {
    width: 100%;
    max-width: clamp(320px, 100vw, 1084px);
    margin: 0 auto;
    margin-bottom: clamp(65px, 10vw, 131px);
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3vw, 48px);
    position: relative;
    overflow: visible;
}

.chart-section>* {
    position: relative;
    z-index: 1;
}

.chart-decorative-image--icon {
    position: absolute;
    top: 0;
    left: -19%;
    width: auto;
    height: clamp(80px, 15vw, 233px);
    object-fit: contain;
    transform: translateY(-41%);
    pointer-events: none;
}

@media (max-width: 768px) {
    .chart-decorative-image--icon {
        left: 0;
    }
}

.chart-icon {
    width: auto;
    height: clamp(80px, 15vw, 233px);
    object-fit: contain;
}

.chart-line {
    flex: 1;
    height: auto;
    max-height: clamp(20px, 3vw, 33px);
    max-width: clamp(100px, 47vw, 886px);
    object-fit: contain;
    z-index: 2;
    margin-right: -67px;
}

@media (max-width: 768px) {
    .chart-header {
        justify-content: flex-end;
        max-width: 100%;
        margin: 0;
        margin-bottom: clamp(20px, 4vw, 32px);
    }

    .chart-line {
        max-width: 72vw;
        width: 100%;
    }
}

@media (max-width: 535px) {
    .chart-line {
        max-width: 68vw;
        width: 100%;
    }
}



.chart-title {
    color: var(--color-brown);
    font-size: clamp(40px, 8vw, 80px);
    font-family: 'Viga', sans-serif;
    margin: 0;
    line-height: 1;
    z-index: 2;
    white-space: nowrap;
}

/* ===== 相関図コンテナ（背景 + 人物分離） ===== */
.chart-container {
    position: relative;
    max-width: 1084px;
    margin: 0 auto;
}

.chart-bg {
    display: block;
    width: 100%;
    height: auto;
}

.chart-characters {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* 人物画像ボタン */
.chart-character {
    position: absolute;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.3s ease;
}

.chart-character img {
    display: block;
    width: 100%;
    height: auto;
}

/* ホバーエフェクト（上に浮き上がる） */
.chart-character:hover {
    transform: translateY(-8px);
}

.chart-character:focus {
    outline: 2px solid #ff6b00;
    outline-offset: 2px;
}

/* 主人公（浅尾温子）は少し大きく浮き上がる */
.chart-character--main:hover {
    transform: translateY(-12px);
}

/* マスコット（むるたん）のホバー */
.chart-character--mascot:hover {
    transform: translateY(-6px) scale(1.1);
}

/* 旧スタイル（互換性のため） */
.chart-image-wrapper {
    position: relative;
    width: 100%;
    display: inline-block;
}

.chart-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Chart Modal */
.chart-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.chart-modal.is-open {
    visibility: visible;
    pointer-events: auto;
}

.chart-modal.is-visible {
    opacity: 1;
}

.chart-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

.chart-modal__content {
    position: relative;
    /* background: white;
    border-radius: clamp(8px, 1.2vw, 12px); */
    max-width: 90vw;
    max-height: 90vh;
    padding: clamp(20px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 2vw, 20px);
    transform: scale(0.9);
    transition: transform 0.3s ease;
    z-index: 10000;
    overflow-y: auto;
}

.chart-modal.is-visible .chart-modal__content {
    transform: scale(1);
}

/* .chart-modal__close {
    position: absolute;
    top: clamp(10px, 1.5vw, 15px);
    right: clamp(10px, 1.5vw, 15px);
    width: clamp(30px, 4vw, 40px);
    height: clamp(30px, 4vw, 40px);
    border: none;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    cursor: pointer;
    font-size: clamp(18px, 2.5vw, 24px);
    line-height: 1;
    color: var(--color-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10001;
} */

.chart-modal__close:hover,
.chart-modal__close:focus {
    background: var(--color-brown);
    color: white;
    outline: none;
    transform: rotate(90deg);
}

.chart-modal__image-wrapper {
    width: 100%;
    max-width: clamp(250px, 35vw, 400px);
    margin: 0 auto;
}

.chart-modal__image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: clamp(4px, 0.8vw, 8px);
}

.chart-modal__info {
    text-align: center;
}

.chart-modal__name {
    font-family: 'Viga', sans-serif;
    font-size: clamp(24px, 3vw, 32px);
    color: var(--color-brown);
    margin: 0 0 clamp(6px, 1vw, 10px);
}

.chart-modal__role {
    font-size: clamp(14px, 2vw, 18px);
    color: var(--color-gray);
    margin: 0;
}

/* スクロールロック用 */
body.modal-open {
    overflow: hidden;
}

/* ORIGINAL & MUSIC Container */
.original-music-container {
    position: relative;
    width: 100%;
    overflow: visible;
}

.original-music-container::before {
    content: '';
    position: absolute;
    top: calc(clamp(-74.3px, -20vw, -30px) - 190px);
    width: 100%;
    height: 140%;
    background: var(--color-yellow);
    opacity: 0.28;
    z-index: 0;
    pointer-events: none;
    clip-path: polygon(0 13%, 100% 0%, 100% 100%, 0% 100%);
}

/* Original Section */
.original-section {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(50px, 10vw, 130px);
    position: relative;
    padding-bottom: clamp(80px, 52vw, 194.4px);
}

/* Original Decorative Images */
.original-decorative-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.original-decorative-image {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.original-decorative-image--bottom-left {
    bottom: 0;
    left: 5%;
    width: clamp(200px, 17vw, 400px);
    height: auto;
    max-width: 30vw;
}

.original-decorative-image--center {
    top: 40%;
    left: 12%;
    /* transform: translate(-50%, 100%); */
    width: clamp(200px, 36vw, 553px);
    height: auto;
    z-index: -1;
}

@media (max-width: 768px) {
    .original-decorative-image--center {
        top: 27%;
        left: 39%;
        transform: translateX(-38%);
        width: clamp(250px, 82vw, 350px);
    }
}

.original-image-wrapper {
    width: auto;
    height: clamp(280px, 35vw, 413px);
    position: relative;
    order: 0;
}

.original-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.original-content-wrapper {
    width: 100%;
    max-width: clamp(320px, 100vw, 1084px);
    margin: 0 auto;
    padding: clamp(20px, 3vw, 40px) clamp(10px, 2vw, 20px);
    display: flex;
    gap: clamp(50px, 10vw, 154.4px);
    align-items: center;
    z-index: 3;
    position: relative;
}

.original-content {
    width: clamp(300px, 45vw, 542px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: clamp(10px, 1.5vw, 16px);
    order: 1;
}

.original-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.original-title {
    text-align: right;
    color: black;
    font-size: clamp(30px, 6vw, 60px);
    font-family: 'Viga', sans-serif;
    letter-spacing: clamp(3px, 0.6vw, 6px);
    margin: 0 0 -18.3px;
    z-index: 2;
}

.original-line {
    width: 100%;
    height: auto;
    max-height: clamp(20px, 3vw, 30px);
    object-fit: contain;
}

.original-text {
    width: clamp(300px, 45vw, 527px);
    text-align: left;
}

.original-text .title {
    color: black;
    font-size: clamp(20px, 3vw, 30px);
    line-height: clamp(20px, 2.5vw, 26px);
    margin-bottom: clamp(6px, 1vw, 10px);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .original-text .title {
        white-space: normal;
        margin-bottom: clamp(12px, 2vw, 24px);
    }
}

.original-text-small {
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: clamp(20px, 2.5vw, 26px);
    margin-top: clamp(6px, 1vw, 10px);
}

@media (max-width: 768px) {
    .original-text-small {
        white-space: nowrap;
    }
}

.original-text .description {
    color: black;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: clamp(20px, 2.5vw, 26px);
}

/* Original Button */
.original-button {
    display: inline-block;
    padding: clamp(12px, 1.5vw, 16px) clamp(24px, 3vw, 32px);
    background-color: #FF6A11;
    color: white;
    text-decoration: none;
    border-radius: 33px;
    font-size: clamp(14px, 1.8vw, 18px);
    font-weight: bold;
    text-align: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
    order: 3;
    align-self: flex-end;
    margin-top: clamp(16px, 2vw, 24px);
    width: clamp(200px, 100%, 542px);
    box-sizing: border-box;
}

.original-button:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

.original-button:focus {
    outline: 2px solid #FF6A11;
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .original-image-wrapper {
        order: 3;
    }

    .original-content {
        order: 2;
    }

    .original-button {
        order: 1;
        align-self: center;
        width: 100%;
        max-width: clamp(200px, 80vw, 400px);
        margin-top: clamp(20px, 3vw, 30px);
    }
}

/* Footer */
.footer-section {
    width: 100%;
    margin: 0 auto;
    background-image: url('../img/ending_view.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vw, 10px);
    position: relative;
    z-index: 6;
    min-height: 100vw;
    padding-bottom: clamp(200px, 35vw, 531px);
}


.footer-content {
    width: 100%;
    max-width: clamp(320px, 100vw, 1084px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(25px, 4vw, 51px);
}

.footer-section-title {
    text-align: center;
    color: white;
    font-size: clamp(40px, 8vw, 80px);
    font-family: 'Viga', sans-serif;
    margin-bottom: clamp(12px, 2vw, 20px);
}

/* News Section */
.news-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
}

.news-container {
    padding: 3.125em;
    margin-top: 3.4375em;
    background-color: #fff;
    box-sizing: border-box;
    width: clamp(17.5em, calc(100vw - 2.5em), 67.75em);
    margin-inline: auto;
}


.slider {
    position: relative;
    width: 100%;
    margin: auto;
}

/* VOD Section */
.vod-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 3vw, 37px);
    width: clamp(17.5em, calc(100vw - 2.5em), 67.75em);
    margin-inline: auto;
}

.vod-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(15px, 2.5vw, 30px);
    flex-wrap: wrap;
}

.vod-item {
    width: 527px;
    height: 90px;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(6px, 1vw, 10px);
    box-sizing: border-box;
}

/* フルデザイン時（.vod-logo-wrapper が存在する場合） */
.vod-item:has(.vod-logo-wrapper) {
    height: 193px;
}

/* デフォルト：ロゴのみ中央配置 */
.vod-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.vod-logo-link:hover {
    opacity: 0.8;
}

.vod-logo {
    height: clamp(32px, 4vw, 46px);
    width: auto;
    max-width: 100%;
}

/* フルデザイン時：.vod-logo-wrapper または .vod-latest-episode が存在する場合 */
.vod-item:has(.vod-logo-wrapper),
.vod-item:has(.vod-latest-episode:not(:only-child)) {
    /* align-items: flex-start; */
    padding: clamp(20px, 3vw, 30px);
}

.vod-item:has(.vod-logo-wrapper) .vod-logo-link,
.vod-item:has(.vod-latest-episode:not(:only-child)) .vod-logo-link {
    display: none;
}

.vod-logo-wrapper {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.5vw, 26px);
}

.vod-latest-episode {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(16px, 2.5vw, 28px);
}

.vod-latest-episode img {
    height: clamp(32px, 4vw, 46px);
    width: auto;
}

.vod-latest-episode-text {
    width: clamp(200px, 30vw, 311px);
    height: clamp(36px, 4vw, 47px);
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.vod-latest-episode-text:hover {
    opacity: 0.8;
}

.vod-latest-episode-text span {
    color: var(--color-gray-light);
    font-size: clamp(16px, 2vw, 20px);
    letter-spacing: clamp(2px, 0.4vw, 4px);
    background-image: url('../img/btn-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: clamp(15px, 2.3vw, 23px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(200px, 30vw, 311px);
    height: clamp(36px, 4vw, 47px);
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
}

.vod-download {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: clamp(6px, 1vw, 10px);
}

.vod-download-text {
    width: clamp(100px, 12vw, 147px);
    color: var(--color-gray-light);
    font-size: clamp(11px, 1.2vw, 16px);
    line-height: clamp(16px, 2vw, 20px);
    letter-spacing: 1.28px;
}

.vod-download-button {
    display: flex;
    gap: clamp(6px, 1vw, 10px);
    align-items: center;
}

.vod-download-link {
    display: inline-block;
    transition: opacity 0.3s ease;
}

.vod-download-link:hover {
    opacity: 0.8;
}

.vod-download-link img {
    height: clamp(30px, 4vw, 40px);
    width: auto;
    display: block;
}

/* SNS Section */
.footer-section .sns-container {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 2.5vw, 28px);
}

.sns-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(15px, 2.5vw, 30px);
    flex-wrap: wrap;
    width: clamp(17.5em, calc(100vw - 2.5em), 67.75em);
    margin-inline: auto;
}

.sns-item {
    width: 527px;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.sns-item.black {
    background: black;
}

.sns-item.white {
    background: white;
}

.sns-item:hover {
    opacity: 0.8;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sns-item:focus {
    outline: clamp(1px, 0.2vw, 2px) solid var(--color-brown);
    outline-offset: clamp(2px, 0.4vw, 4px);
    border-radius: clamp(2px, 0.4vw, 4px);
}

.sns-handle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(16px, 2.5vw, 29px);
}

.sns-handle .logo {
    width: clamp(35px, 4.5vw, 50px);
    height: clamp(35px, 4.5vw, 50px);
    object-fit: contain;
    display: block;
}

.sns-handle .logo.instagram {
    width: clamp(40px, 5.5vw, 60px);
    height: clamp(40px, 5.5vw, 60px);
    object-fit: contain;
}

.sns-handle .handle {
    color: white;
    font-size: clamp(28px, 4vw, 40px);
    font-family: 'Inter', sans-serif;
}

.sns-item.white .sns-handle .handle {
    color: black;
}

/* Music Section */
.music-section {
    width: 100%;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 40px) clamp(10px, 2vw, 20px) clamp(65px, 10vw, 133px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(28px, 4.5vw, 57px);
    background: var(--color-white);
    position: relative;
    z-index: 2;
}

.music-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-yellow);
    opacity: 0.28;
    z-index: -1;
    pointer-events: none;
}

.music-header {
    width: 100%;
    max-width: clamp(320px, 100vw, 1084px);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(20px, 3.5vw, 39px);
}

.music-title {
    color: black;
    font-size: clamp(30px, 6vw, 60px);
    font-family: 'Viga', sans-serif;
    letter-spacing: clamp(3px, 0.6vw, 6px);
    margin: 0;
}

.music-line {
    flex: 1;
    height: auto;
    max-height: clamp(20px, 3vw, 32px);
    object-fit: contain;
    max-width: clamp(300px, 70vw, 890px);
}

@media (max-width: 768px) {
    .music-line {
        max-width: 60%;
    }
}

.music-content {
    text-align: center;
    color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 3vw, 32.2px);
}

.music-artwork {
    max-width: clamp(196px, 25vw, 336px);
    width: 100%;
    height: auto;
    display: block;
}

.music-text {
    font-size: clamp(28px, 4vw, 38px);
    line-height: clamp(38px, 6vw, 50px);
}

.music-label {
    font-size: calc(clamp(28px, 4vw, 38px) / 1.267);
    line-height: calc(clamp(38px, 6vw, 50px) / 1.267);
}

@media (max-width: 768px) {
    .music-content {
        gap: clamp(15px, 2vw, 25px);
    }

    .music-text {
        font-size: clamp(14px, 2vw, 20px);
        line-height: clamp(28px, 2.5vw, 40px);
    }

    .music-label {
        font-size: calc(clamp(14px, 2vw, 20px) / 1.267);
        line-height: calc(clamp(28px, 2.5vw, 40px) / 1.267);
    }
}

/* Decorative Background Elements */
#fp-contents {
    position: relative;
    /* 親要素を相対配置に */
}

.decorative-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 10000px;
    /* 十分な高さを確保 */
    max-width: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
    /* hiddenからvisibleに変更 */
    overflow-x: hidden;
    /* 横スクロールのみ防止 */
}

.decorative-rect {
    position: absolute;
    opacity: 0.28;
}




.decorative-rect.yellow-2 {
    width: 2157px;
    height: 1409px;
    left: -156px;
    top: 8945px;
    transform: rotate(-6deg);
    background: var(--color-yellow);
}

/* Responsive */
@media (max-width: 1280px) {
    .decorative-image--top-right {
        width: 300px;
        max-width: 25vw;
    }

    .decorative-image--top-left {
        width: 250px;
        max-width: 25vw;
    }

    .decorative-image--bottom-right {
        width: 250px;
        max-width: 25vw;
    }

    .section-title {
        font-size: clamp(40px, 6vw, 60px);
    }

    .chart-title {
        font-size: clamp(40px, 6vw, 60px);
    }

    .introduction-nav {
        gap: 50px;
        flex-wrap: wrap;
    }

    .introduction-nav a {
        font-size: clamp(20px, 2.5vw, 24px);
    }

    .story-title {
        font-size: clamp(40px, 6vw, 60px);
    }

    .story-section {
        justify-content: center;
    }

    .comment-title {
        font-size: clamp(40px, 6vw, 60px);
    }

    .comment-line {
        max-height: 40px;
    }

    .introduction-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .introduction-text-top,
    .introduction-image-top-right,
    .introduction-image-center-left,
    .introduction-text-center,
    .introduction-image-bottom-right {
        grid-column: 1;
    }

    .introduction-text-top {
        grid-row: 1;
    }

    .introduction-image-top-right {
        grid-row: 2;
    }

    .introduction-image-center-left {
        grid-row: 4;
    }

    .introduction-text-center {
        grid-row: 3;
    }

    .introduction-image-bottom-right {
        grid-row: 6;
    }
}

@media (max-width: 426px) {
    .announcement-text-break-426 {
        display: inline;
    }
}

@media (max-width: 634px) {
    .announcement-text-break {
        display: inline;
    }

    .announcement-line {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 1040px) {
    .comment-content-grid {
        grid-template-columns: 1fr;
        gap: 2vw;
        padding: 0 10px;
    }

    .story-content {
        justify-content: center;
    }

    .story-role-actor {
        font-size: clamp(26px, 3.2vw, 30px);
    }

    .decorative-image--bottom-left {
        transform: translateY(135%);
    }
}

@media (max-width: 768px) {

    /* 相関図ホバーエフェクト調整 */
    .chart-character:hover {
        transform: translateY(-5px);
    }

    .chart-character--main:hover {
        transform: translateY(-8px);
    }

    .introduction-section {
        background-image: url('../img/obi-sp.webp');
        background-size: 100% auto;
        background-position: center center;
        background-repeat: no-repeat;
        padding: 0;
    }

    .decorative-image--top-right {
        right: 1%;
        transform: translateY(-98%);
        width: clamp(200px, 23vw, 433px);
        height: auto;
        max-width: 433px;
    }

    .decorative-image--bottom-left {
        left: 4%;
        transform: translateY(140%);
        width: 210px;
        height: auto;
    }

    .decorative-image--top-left {
        width: 150px;
        max-width: 30vw;
    }

    .decorative-image--bottom-right {
        width: 150px;
        max-width: 30vw;
    }

    .section-title {
        font-size: clamp(30px, 4vw, 40px);
    }

    .announcement-text {
        font-size: clamp(16px, 2vw, 20px);
    }

    .announcement-text .large-number {
        font-size: clamp(28px, 3.5vw, 36px);
    }

    .introduction-nav {
        gap: clamp(12px, 2vw, 20px);
        flex-direction: column;
        align-items: center;
        padding: 0;
    }

    .introduction-nav a {
        font-size: clamp(18px, 2vw, 20px);
    }

    .comment-cast-staff-container::before {
        left: clamp(-70px, -3.5vw, -70px);
        width: clamp(1300px, 120vw, 2162px);
        /* 小サイズ画面: -6度の回転をclip-pathで表現 */
        clip-path: polygon(0 calc(60px + 21%), 100% 60px, 100% calc(100% - 60px), 0 calc(100% + 21%));
    }

    .original-content-wrapper {
        flex-direction: column-reverse;
    }

    .introduction-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .introduction-text-top,
    .introduction-image-top-right,
    .introduction-image-center-left,
    .introduction-text-center,
    .introduction-image-bottom-right {
        grid-column: 1;
    }

    .introduction-text-top {
        grid-row: 1;
    }

    .introduction-image-top-right {
        grid-row: 2;
    }

    .introduction-image-center-left {
        grid-row: 4;
    }

    .introduction-text-center {
        grid-row: 3;
    }

    .introduction-image-bottom-right {
        grid-row: 5;
    }

    .episode-section {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        max-width: 80%;
    }


    .chart-title {
        font-size: clamp(40px, 6vw, 60px);
    }

    .chart-character {
        width: 50px;
        height: 50px;
    }


    .comment-title {
        font-size: clamp(30px, 4vw, 40px);
    }

    .comment-line {
        max-height: 30px;
    }

    .chart-modal__content {
        width: 95vw;
        max-width: 500px;
        padding: 30px 20px;
    }

    .chart-modal__name {
        font-size: clamp(18px, 2.5vw, 24px);
    }

    .chart-modal__role {
        font-size: clamp(14px, 1.5vw, 16px);
    }

    .episode-item {
        width: 200px;
    }

    .episode-image-wrapper {
        width: 200px;
        height: 200px;
    }

    .story-content {
        /* justify-content: center; */
        flex-direction: column;
        justify-self: center;
    }

    .story-image-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .story-role {
        padding-left: 0;
    }

    .story-role-name,
    .story-role-actor {
        white-space: nowrap;
    }

    .vod-content {
        flex-direction: column;
    }

    .sns-content {
        flex-direction: column;
    }
}

/* 599px以下 - VOD/SNSセクションのサイズ調整 */
@media (max-width: 599px) {
    .vod-item {
        width: calc(100vw - 40px);
        max-width: 527px;
        height: auto;
        min-height: 90px;
        padding: 12px;
        box-sizing: border-box;
    }

    /* ロゴのみ表示時 */
    .vod-logo-link {
        width: 100%;
        height: 100%;
        min-height: 90px;
    }

    .vod-logo {
        height: clamp(28px, 5vw, 46px);
    }

    /* フルデザイン時 */
    .vod-item:has(.vod-logo-wrapper),
    .vod-item:has(.vod-latest-episode:not(:only-child)) {
        min-height: 193px;
    }

    .vod-logo-wrapper {
        width: 100%;
        gap: 10px;
        align-items: center;
        justify-content: center;
    }

    .vod-latest-episode {
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    .vod-latest-episode img {
        height: clamp(24px, 4.5vw, 40px);
    }

    .vod-latest-episode-text {
        width: auto;
        max-width: 250px;
        min-width: 0;
    }

    .vod-latest-episode-text span {
        width: 100%;
        max-width: 250px;
        font-size: clamp(12px, 2.2vw, 18px);
        height: clamp(28px, 4.5vw, 42px);
        letter-spacing: clamp(1px, 0.3vw, 3px);
        padding: 0 12px;
    }

    .vod-download {
        /* flex-wrap: wrap; */
        gap: 6px;
        align-items: center;
    }

    .vod-download-text {
        width: auto;
        max-width: 120px;
        font-size: clamp(9px, 1.8vw, 14px);
        line-height: clamp(14px, 2vw, 18px);
        letter-spacing: 1px;
    }

    .vod-download-button {
        gap: 6px;
    }

    .vod-download-link img {
        height: clamp(22px, 4vw, 36px);
    }

    .sns-item {
        width: calc(100vw - 40px);
        max-width: 527px;
        height: auto;
        min-height: 90px;
        padding: 15px;
        box-sizing: border-box;
    }

    .sns-handle {
        gap: 12px;
    }

    .sns-handle .logo {
        width: clamp(30px, 5vw, 50px);
        height: clamp(30px, 5vw, 50px);
    }

    .sns-handle .logo.instagram {
        width: clamp(35px, 5.5vw, 60px);
        height: clamp(35px, 5.5vw, 60px);
    }

    .sns-handle .handle {
        font-size: clamp(20px, 4vw, 40px);
    }
}

@media (max-width: 545px) {
    .episode-section {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* めざましmediaボタン */
.btn_mezamashi-media {
    display: block;
    float: right;
    margin: 0 10px 10px 0;
}

.btn_mezamashi-media a {
    display: inline-block;
    padding: 4px 10px;
    color: #2FAEE5;
    font-size: 90%;
    font-weight: bold;
    background-color: #fff;
}

.btn_mezamashi-media a img {
    display: inline-block;
    width: 110px;
    margin-left: 0.5em;
    vertical-align: text-bottom;
}

.btn_mezamashi-media a:hover {
    opacity: 0.5;
}

@media screen and (max-width: 768px) {
    .btn_mezamashi-media a img {
        width: 80px;
    }
}