@charset "UTF-8";

/* ==========================================================================
   Reset & Variables
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dt,
dd,
table,
th,
td {
    margin: 0;
    padding: 0;
}
ul,
ol {
    list-style: none;
}
button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font: inherit;
}

/* リンク全般の下線設定 (テキストリンクは下線アリ) */
a {
    color: inherit;
    text-decoration: underline;
}
a:hover {
    opacity: 0.8;
}

:root {
    --primary-red: #c60019;
    --text-main: #333333;
    --text-light: #666666;
    --border-color: #dddddd;
    --bg-light: #f5f5f5;
    --bg-dark: #111111;
}

body {
    font-family:
        "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", Meiryo, sans-serif;
    color: var(--text-main);
    line-height: 1.6;
    background-color: #fff;
    /* PC表示で画面幅が1280pxを下回った場合はそのままのレイアウトを維持 */
    min-width: 1280px;
}

/* モバイルメニュー開閉時に背景をスクロールさせない用 */
body.is-fixed {
    overflow: hidden;
}

.text-red {
    color: var(--primary-red) !important;
}

/* ==========================================================================
   Utility Padding Classes (余白調整用ユーティリティ)
   ========================================================================== */

/* Padding Top */
.padtp5 {
    padding-top: 5px;
}
.padtp10 {
    padding-top: 10px;
}
.padtp20 {
    padding-top: 20px;
}
.padtp30 {
    padding-top: 30px;
}
.padtp40 {
    padding-top: 40px;
}

/* Padding Bottom */
.padbtm5 {
    padding-bottom: 5px;
}
.padbtm10 {
    padding-bottom: 10px;
}
.padbtm20 {
    padding-bottom: 20px;
}
.padbtm30 {
    padding-bottom: 30px;
}
.padbtm40 {
    padding-bottom: 40px;
}

/* ==========================================================================
   汎用テンプレート用スタイル (.generic-content)
   ========================================================================== */
.generic-content {
    color: var(--text-main);
    line-height: 1.8;
}

/* 通常テキストの余白 */
.generic-content p {
    margin-bottom: 24px;
}

/* 中見出し (h3) - 薄グレー下線 */
.generic-content h3 {
    font-size: 20px;
    font-weight: bold;
    margin: 50px 0 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid #e0e0e0;
}

/* 小見出し (h4) - 左ブロックなし */
.generic-content h4 {
    font-size: 18px;
    font-weight: bold;
    margin: 40px 0 15px;
}

/* 箇条書き・番号付きリスト */
.generic-content ul,
.generic-content ol {
    margin-bottom: 30px;
    padding-left: 1.5em;
}
.generic-content ul {
    list-style-type: disc;
}
.generic-content ol {
    list-style-type: decimal;
}
.generic-content li {
    margin-bottom: 8px;
}

/* テーブル（表組み） */
.table-wrapper {
    width: 100%;
    overflow-x: auto; /* スマホではみ出した場合は横スクロール */
    margin-bottom: 30px;
}
.generic-content table {
    width: 100%;
    min-width: 600px; /* テーブルが崩れない最低幅を設定 */
    border-collapse: collapse;
}
.generic-content th,
.generic-content td {
    border: 1px solid var(--border-color);
    padding: 15px 20px;
    text-align: left;
    vertical-align: middle;
}
.generic-content th {
    background-color: var(--bg-light); /* #f5f5f5 */
    font-weight: bold;
    width: 25%; /* 見出し列の幅目安 */
}

/* スマホ表示の微調整 */
@media (max-width: 768px) {
    .generic-content h3 {
        font-size: 20px;
        margin: 40px 0 15px;
    }
    .generic-content h4 {
        font-size: 16px;
        margin: 30px 0 15px;
    }
    .generic-content th,
    .generic-content td {
        padding: 12px 15px;
        font-size: 14px;
    }
}

/* ==========================================================================
   Header Area
   ========================================================================== */
.top-color-band {
    width: 100%;
    height: 12px;
    background-color: var(--primary-red);
}

.site-header {
    width: 100%;
    background-color: #fff;
    position: relative;
    z-index: 1000;
}

.header-inner {
    width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
    position: relative;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 2;
}

.logo-mark {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

/* ロゴテキストを1.5倍に、行間調整 */
.logo-text {
    font-size: 30px;
    font-weight: bold;
    line-height: 1.05;
    color: var(--primary-red);
    letter-spacing: 1px;
    margin: 0;
}

.logo-text span {
    font-size: 16.5px;
    color: #333;
    font-weight: normal;
    letter-spacing: 0;
    display: block;
    line-height: 1.1;
    margin-top: 2px;
}

/* 右上のグラデーション装飾（SVG） */
.header-bg-graphic {
    position: absolute;
    top: 0;
    right: -20px;
    width: 380px;
    height: 100%;
    background-image: url("../images/head_leftbg_logo.svg");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain;
    z-index: 0;
    pointer-events: none;
}

.header-nav-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.global-nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
}

/* ヘッダ内のメニューリンクは下線を消す */
.global-nav a {
    text-decoration: none;
    font-size: 14px;
    color: #333;
    transition: font-weight 0.2s;
}

.global-nav a.active {
    font-weight: bold;
    border-bottom: 3px solid #000;
    padding-bottom: 9px;
}

.lang-link {
    text-decoration: none;
    font-size: 13px;
    color: #666;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
}

/* SVG言語アイコン */
.icon-lang {
    margin-right: 4px;
    color: #666;
}

/* ハンバーガーボタンとSP用メニューはPCで非表示 */
.hamburger-btn,
.sp-nav-overlay {
    display: none;
}

/* ==========================================================================
   Search Area
   ========================================================================== */
.search-container {
    width: 1280px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

/* 検索ボックス全体を囲んで角丸にする */
.search-box-wrapper {
    border-radius: 8px;
    overflow: hidden;
}

.search-header {
    background-color: #000;
    color: #fff;
    padding: 15px 25px;
}

.search-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-logo {
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 15px;
}

.search-logo span {
    font-size: 11px;
    letter-spacing: 2px;
    color: #888;
    font-weight: normal;
}

.header-buttons {
    display: flex;
    gap: 10px;
}

/* ヘッダ右上のボタン（ホバーで白黒反転） */
.btn-guide {
    background-color: #fff;
    color: #000;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}
.btn-guide:hover {
    background-color: #000;
    color: #fff;
    border: 1px solid #fff;
    opacity: 1;
}

.search-panel {
    background-color: #efefef;
    padding: 25px;
}

.search-row {
    display: flex;
    align-items: center;
}

.search-label {
    width: 160px;
    font-weight: bold;
    font-size: 16px;
    color: #000;
}

.search-input-group {
    display: flex;
    flex-grow: 1;
    height: 44px;
    background-color: #fff;
    border: 1px solid #aaa;
}

.select-wrapper {
    position: relative;
    width: 160px;
    border-right: 1px solid #aaa;
}

.select-wrapper::after {
    content: "▼";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #666;
    pointer-events: none;
}

.search-select {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0 30px 0 15px;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    font-size: 15px;
    color: #666;
    cursor: pointer;
}

.search-input {
    flex-grow: 1;
    border: none;
    padding: 0 15px;
    font-size: 15px;
    outline: none;
}

/* 検索ボタン（ホバーで赤白反転） */
.search-btn {
    background-color: var(--primary-red);
    color: #fff;
    border: 1px solid var(--primary-red);
    width: 120px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}
.search-btn:hover {
    background-color: #fff;
    color: var(--primary-red);
}

.search-divider {
    height: 1px;
    background-color: #ccc;
    margin: 20px 0;
}

.index-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-grow: 1;
}

/* インデックス検索ボタン（ホバーでグレー反転） */
.index-buttons a {
    display: inline-block;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 8px 25px;
    font-size: 14px;
    color: #666;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
}
.index-buttons a:hover {
    background-color: #666;
    color: #fff;
    border-color: #666;
    opacity: 1;
}
.index-buttons a.active {
    background-color: #000;
    color: #fff;
    border-color: #000;
}
.index-buttons a.active:hover {
    background-color: #fff;
    color: #000;
}

/* ==========================================================================
   Main Content
   ========================================================================== */
.main-content {
    /* padding調整：水平方向の余白は .content-inner 側で制御する */
    padding: 0 0 40px;
}

.content-inner {
    width: 1280px;
    margin: 0 auto;
    padding: 0 20px; /* 検索ボックス側と同じ余白を設定して幅を合わせる */
}

/* メインコンテンツ内リンク色一括指定 */
.main-content a {
    color: var(--primary-red);
}

/* ==========================================================================
   見出し（作品詳細）の設定
   ========================================================================== */
.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;

    /* 下線デザインを疑似要素で行うため、元のボーダーを消去・相対配置に */
    border-bottom: none;
    padding-bottom: 5px;
    position: relative;
    z-index: 1;
}

.section-heading::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 14px; /* 太く薄いグレーの下線 */
    background-color: #fbfbfb; /* 薄いグレー #fbfbfb に調整 */
    z-index: -1; /* テキストの後ろに回り込む */
}

.heading-ja {
    font-size: 24px;
    letter-spacing: 0.1em; /* 文字間隔を広げる */
    font-weight: bold;
    display: block; /* flexからblockに変更 */
    /* align-items: center; と gap: 8px; は削除（またはコメントアウト） */
}

/* 1文字目だけを赤くする指定 */
.heading-ja::first-letter {
    color: var(--primary-red);
}

.heading-en {
    font-size: 32px;
    color: #eaeaea;
    font-weight: bold;
    line-height: 1;
}

.movie-header {
    margin-bottom: 30px;
}

/* 作品タイトルを1.5倍に */
.movie-title {
    font-size: 42px;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 15px;
}

.movie-title-en {
    font-size: 27px;
    font-weight: normal;
    color: var(--text-light);
}

.movie-meta {
    font-size: 14px;
    color: var(--text-main);
}

.movie-overview-layout {
    display: flex;
    gap: 40px;
    margin-bottom: 50px;
}

.overview-text-area {
    flex: 1;
}

.overview-content {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
}

.read-more-btn {
    width: fit-content; /* テキストの幅に合わせる */
    margin-left: auto; /* 右寄せにする */
    background: none;
    border: none;
    color: var(--text-main);
    cursor: pointer;
    padding: 10px 0;
    font-size: 14px;
}

.read-more-btn:hover {
    text-decoration: underline;
}
.simultaneous-screening {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 15px;
}

/* ==========================================================================
   代用表記　従来コードを新しいものに合わせる
   ========================================================================== */
p.otherinfo2 {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px 20px;
    background-color: transparent;
    font-size: 13px;
    line-height: 1.6;
}

/* 背景なし・グレーのボーダーのみ */
.notice-box {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px 20px;
    background-color: transparent;
    font-size: 13px;
    line-height: 1.6;
}

/* ポスター画像の横幅を最大150pxに制限 */
.movie-poster {
    width: 100%;
    max-width: 150px;
    flex-shrink: 0;
}

.poster-img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}

.copyright {
    font-size: 11px;
    color: #999;
}

/* ==========================================================================
   Accordion / Details Areas
   ========================================================================== */
.accordion-group {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.pc-flex-row {
    display: flex;
    gap: 40px;
}

.pc-half {
    flex: 1;
}

.responsive-details summary {
    list-style: none;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}
.responsive-details summary::-webkit-details-marker {
    display: none;
}

.summary-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.summary-title {
    font-size: 20px;
    font-weight: bold;
}
.summary-title-en {
    font-size: 24px;
    color: #eaeaea;
    font-weight: bold;
    line-height: 1;
}

.toggle-icon {
    display: none;
}

/* 1. スタッフ・キャスト（.pc-flex-row内のブロック）のPC設定：グレー背景 */
.pc-flex-row .responsive-details {
    background-color: var(--bg-light); /* #f5f5f5 */
    border-radius: 8px;
    padding: 20px;
}
.pc-flex-row .responsive-details summary {
    list-style: none;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
}
.pc-flex-row .responsive-details summary::-webkit-details-marker {
    display: none;
}
.pc-flex-row .summary-title-en {
    color: #cccccc; /* 背景がグレーなので少し濃く */
}

/* 2. アコーディオン見出し（ストーリー・受賞歴・シリーズ）の太い下線設定 */
.accordion-group > .responsive-details {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
}
.accordion-group > .responsive-details summary {
    list-style: none;
    padding: 15px 0 5px 0; /* 下線に合わせて調整 */
    border-bottom: none; /* 元の細線を削除(詳細度で上書き) */
    margin-bottom: 15px;
    background-color: transparent;
    position: relative;
    z-index: 1;
}
.accordion-group > .responsive-details summary::-webkit-details-marker {
    display: none;
}
.accordion-group > .responsive-details[open] summary {
    border-bottom: none; /* 開いた時の破線も削除(詳細度で上書き) */
}

/* 太く薄いグレーの下線 */
.accordion-group > .responsive-details summary::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 14px;
    background-color: #fbfbfb; /* 薄いグレー #fbfbfb に調整 */
    z-index: -1;
}

.accordion-group > .responsive-details .details-body {
    padding-bottom: 20px;
}

.details-body {
    font-size: 14px;
    line-height: 1.8;
}

.credit-list li {
    margin-bottom: 5px;
}

/* 作品詳細ページ：キャスト欄（.cast-list は index-cast.html 用のグリッド化と同名だが、
   ここでは <p> 内に「/」区切りでリンクを並べる構造のため、通常のインライン表示に戻す */
.responsive-details .cast-list {
    display: block;
    gap: 0;
    border-top: none;
    padding-top: 0;
    margin-bottom: 0;
    line-height: 2.2;
}
.responsive-details .cast-list a {
    display: inline;
    color: var(--primary-red);
    text-decoration: underline;
    font-size: 15px;
    transition: opacity 0.2s;
}
.responsive-details .cast-list a:hover {
    opacity: 0.7;
}

.story-layout {
    display: flex;
    gap: 30px;
}
.story-text {
    flex: 1;
    text-align: justify;
}

/* 場面画像の横幅を最大128pxに制限 */
.story-image {
    width: 100%;
    max-width: 128px;
    flex-shrink: 0;
}
.story-image img {
    width: 100%;
    display: block;
    margin-bottom: 5px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    width: 100%;
}

.footer-top-band {
    background-color: #000;
    color: #fff;
    padding: 15px 0;
}

.footer-top-inner {
    width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-end; /* 右寄せ */
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    padding: 0 20px;
}

.member-label {
    font-size: 14px;
    line-height: 1.5; /* 改行時の行間を自然な高さに調整 */
    display: inline-block; /* 行間の設定を正しく効かせるための指定 */
    text-align: center; /* 複数行になった際に中央揃えで綺麗に見せる */
}

.member-links {
    display: flex;
    flex-direction: row;
    gap: 30px;
    flex-wrap: wrap;
}

/* リンクを破線の下線に変更 */
.member-links a {
    font-size: 14px;
    text-decoration: underline dashed; /* 破線 */
    text-underline-offset: 3px; /* 下線の位置を少し離す */
}
.member-links a:hover {
    text-decoration: underline solid; /* ホバー時は実線に */
}

.footer-middle-band {
    background-color: #1a1a1a;
    color: #fff;
    padding: 50px 0;
}

.footer-middle-inner {
    width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 50px;
    align-items: flex-start; /* 全カラムを上端で揃える */
    padding: 0 20px;
}

.footer-logo {
    flex-shrink: 0;
    width: 250px;
}

.footer-logo .logo-text {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
    color: #fff;
    white-space: nowrap; /* テキストの折り返しを禁止 */
}

.footer-logo .logo-text span {
    font-size: 10px;
    color: #888;
    font-weight: normal;
}

.footer-sitemap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 1;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start; /* サイトマップ内のカラムも上端で揃える */
}

.sitemap-col h4 {
    margin-top: 0; /* ブラウザデフォルトのマージンを消去して高さを揃える */
    font-size: 14px;
    margin-bottom: 15px;
    font-weight: bold;
    line-height: 1.6;
}
/* 見出し部分は下線なし */
.sitemap-col h4 a {
    text-decoration: none;
}
.sitemap-col h4 a:hover {
    text-decoration: underline;
}

.sitemap-col ul li {
    font-size: 13px;
    margin-bottom: 10px;
    color: #ccc;
}

.standalone-links {
    margin-top: 0;
}

.sitemap-col .standalone-links li {
    font-size: 14px;
    margin-bottom: 15px;
    color: #fff;
    font-weight: bold;
    line-height: 1.6; /* 見出し行と高さを合わせる */
}

.footer-bottom-band {
    background-color: #000;
    color: #888;
    text-align: center;
    padding: 15px 20px;
    font-size: 12px;
}

/* ==========================================================================
   Page Top Button
   ========================================================================== */
.page-top-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    background-color: var(--primary-red);
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 990;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        background-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.page-top-btn:hover {
    background-color: #a00014;
}

.page-top-btn.is-show {
    opacity: 1;
    visibility: visible;
}

.page-top-btn svg {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   Mobile Responsive (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    body {
        /* スマホ時は最小幅の制限を解除 */
        min-width: 0;
    }

    .header-inner,
    .search-container,
    .content-inner,
    .footer-top-inner,
    .footer-middle-inner {
        width: 100%;
        padding: 0 15px;
    }

    /* Header Overwrites */
    .site-header {
        position: sticky; /* スクロール追従してメニュー開閉をスムーズに */
        top: 0;
    }
    .header-main {
        flex-direction: row; /* スマホではロゴとハンバーガーを横並び */
        padding: 15px 0;
    }

    /* スマホ時のロゴ折り返し防止とサイズ調整 */
    .logo-area {
        gap: 10px; /* 画像とテキストの隙間を少し詰める */
        max-width: calc(
            100% - 40px
        ); /* ハンバーガーボタンと被らないように制限 */
    }
    .logo-mark {
        width: 40px; /* スマホではロゴを少し小さくしてテキスト幅を確保 */
        height: 40px;
    }
    .logo-text {
        white-space: nowrap; /* 折り返し防止 */
        font-size: 16px; /* スマホ用に縮小 */
    }
    .logo-text span {
        font-size: 10px; /* スマホ用に縮小 */
    }

    .header-nav-area,
    .header-bg-graphic {
        display: none; /* PC用ナビと背景装飾は非表示 */
    }

    /* ハンバーガーボタン */
    .hamburger-btn {
        display: block;
        width: 30px;
        height: 24px;
        position: relative;
        z-index: 1000; /* ヘッダーやメニューより上に */
    }
    .hamburger-btn span {
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: #000;
        border-radius: 2px;
        transition: all 0.3s ease;
    }
    .hamburger-btn span:nth-child(1) {
        top: 0;
    }
    .hamburger-btn span:nth-child(2) {
        top: 10px;
    }
    .hamburger-btn span:nth-child(3) {
        bottom: 0;
    }

    /* ハンバーガーボタン "×" 状態 */
    .hamburger-btn.is-active span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }
    .hamburger-btn.is-active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger-btn.is-active span:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
    }

    /* スマホ用オーバーレイメニュー (背景の黒半透明) */
    .sp-nav-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.6); /* 裏側が暗く見えるように */
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition:
            opacity 0.3s ease,
            visibility 0.3s ease;
    }
    .sp-nav-overlay.is-active {
        opacity: 1;
        visibility: visible;
    }

    /* 赤いメニュー本体（右側に寄せるドロワー） */
    .sp-nav-inner {
        position: absolute;
        top: 0;
        right: 0;
        width: 85%; /* 左側に15%の空きを作る */
        height: 100%;
        background-color: var(--primary-red);
        overflow-y: auto;
        padding: 130px 20px 40px; /* ヘッダーと最初の項目との間隔を空ける */
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }

    .sp-nav-overlay.is-active .sp-nav-inner {
        transform: translateX(0);
    }

    .sp-nav-list {
        border-top: 1px solid rgba(255, 255, 255, 0.3);
    }
    .sp-nav-list > li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    /* アコーディオンのトグルボタン */
    .sp-nav-toggle {
        display: flex;
        align-items: center;
        width: 100%;
        text-align: left;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        padding: 18px 0;
        text-decoration: none;
    }
    .sp-nav-toggle::before {
        content: "＋";
        display: inline-block;
        width: 30px;
        font-size: 20px;
        font-weight: normal;
    }
    .sp-nav-toggle.is-open::before {
        content: "－";
    }

    /* ==========================================================================
       【暫定】スマホメニューを最上層のみの表示にするための一時調整
       HTMLの子階層(sp-nav-sub)を削除している間、「＋」アイコンを非表示にし、
       他の直接リンクとインデントを揃えています。
       アコーディオンを復活させる際は、この暫定ブロックをまるごと削除してください。
       ========================================================================== */
    .sp-nav-toggle {
        padding-left: 30px; /* ＋アイコン分の幅を、直接リンクと同じインデントとして確保 */
    }
    .sp-nav-toggle::before {
        display: none; /* 「＋」「－」を非表示化 */
    }

    /* 直接リンク（トップ用） */
    .sp-nav-link-direct {
        display: block;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        padding: 18px 0 18px 30px; /* ＋記号の幅に合わせる */
        text-decoration: none;
    }

    /* サブメニュー */
    .sp-nav-sub {
        display: none; /* 初期非表示 */
        padding: 0 0 15px 30px; /* インデント */
    }
    .sp-nav-sub li {
        margin-bottom: 15px;
    }
    .sp-nav-sub li:last-child {
        margin-bottom: 0;
    }
    .sp-nav-sub a {
        color: #fff;
        font-size: 14px;
        text-decoration: none;
    }

    /* ENGLISH リンク */
    .sp-nav-bottom {
        margin-top: 40px;
        text-align: right;
    }
    .sp-lang-link {
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }

    .sp-lang-link .icon-lang {
        color: #fff;
    }

    /* ==========================================================================
       Search Overwrites (モバイル時の帯とレイアウト調整)
       ========================================================================== */
    /* Search Overwrites */
    .search-inner {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start; /* ★ここをstretchからflex-startに変更（ボタンが幅100%になるのを防ぐ） */
    }

    /* ★検索ボックスタイトル */
    .search-logo {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    /* ★使用方法などのボタンを縦並びから横並び（元のサイズ）に戻す */
    .header-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* ■ここが重要：見出しと入力フォームを縦に並べる（改行させる） */
    .search-row {
        flex-direction: column; /* 縦並びにする */
        align-items: flex-start; /* 左寄せ */
        gap: 10px; /* 見出しとフォームの間隔 */
    }
    .search-label {
        width: 100%;
    }

    /* 入力グループを横並び(row)にして1行に収める */
    .search-input-group {
        width: 100%;
        flex-direction: row;
        height: 44px;
        border: 1px solid #aaa;
        gap: 0;
        background: #fff;
    }

    /* セレクトボックスを縮めて固定（狭いスマホでも余裕を持たせるため90pxに） */
    .select-wrapper {
        width: 90px;
        height: 100%;
        background: transparent;
        border: none;
        border-right: 1px solid #aaa;
        flex-shrink: 0;
    }

    /* 検索入力欄は残りの幅をすべて使う */
    .search-input {
        height: 100%;
        border: none;
        flex-grow: 1;
        width: 10px;
        padding: 0 10px;
    }

    /* 検索ボタンの幅を縮めて固定（70pxに） */
    .search-btn {
        width: 70px;
        height: 100%;
        flex-shrink: 0;
        font-size: 14px;
        letter-spacing: normal;
        padding: 0;
    }

    .search-divider {
        margin: 15px 0;
        width: 100%;
    }

    /* インデックス検索ボタン群の調整（2行:4個+3個で折り返す） */
    .index-buttons {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .index-buttons a {
        flex: 1 1 calc(25% - 6px); /* 1行4個を目安に、7個なら自動で2行(4+3)になる */
        min-width: 0;
        padding: 8px 0;
        font-size: 12px;
        text-align: center;
        white-space: nowrap;
    }
    /* Content Overwrites */
    .heading-en {
        font-size: 20px;
    }
    .movie-overview-layout {
        flex-direction: column;
    }

    .movie-poster {
        margin: 0 auto 20px;
        order: -1;
    }

    .pc-flex-row {
        flex-direction: column;
        gap: 0;
    }
    .accordion-group {
        gap: 0;
    }

    .section-heading {
        margin-top: 40px;
        margin-bottom: 20px;
    }

    /* =========================================================
       アコーディオン部分のスマホ用スタイル調整
       ========================================================= */
    .responsive-details {
        margin-bottom: 15px;
        border-radius: 8px;
        overflow: hidden;
    }
    .responsive-details summary {
        margin-bottom: 0;
    }

    /* トグルアイコンの定義 */
    .toggle-icon {
        display: block;
        position: relative;
        width: 20px;
        height: 20px;
    }
    .toggle-icon::before,
    .toggle-icon::after {
        content: "";
        position: absolute;
        background-color: var(--text-main);
        transition: transform 0.3s;
    }
    .toggle-icon::before {
        top: 9px;
        left: 0;
        width: 20px;
        height: 2px;
    }
    .toggle-icon::after {
        top: 0;
        left: 9px;
        width: 2px;
        height: 20px;
    }
    .responsive-details[open] .toggle-icon::after {
        transform: rotate(90deg);
        opacity: 0;
    }

    /* スマホ：スタッフ・キャスト（グレー背景） */
    .pc-flex-row .responsive-details {
        background-color: var(--bg-light); /* 背景あり */
        padding: 0;
    }
    .pc-flex-row .responsive-details summary {
        padding: 15px 20px;
        border-bottom: none;
        background-color: transparent;
    }
    .pc-flex-row .responsive-details[open] summary {
        border-bottom: 1px dashed #ddd;
    }
    .pc-flex-row .responsive-details .details-body {
        padding: 15px 20px;
    }

    /* スマホ：ストーリー・受賞歴・シリーズ（背景なし） */
    .accordion-group > .responsive-details {
        background-color: transparent; /* 背景なし */
        padding: 0;
        border-radius: 0; /* 背景がないので角丸不要 */
    }
    .accordion-group > .responsive-details summary {
        padding: 15px 0 5px 0; /* 左右の余白を消して太い下線に合わせる */
        border-bottom: none;
        background-color: transparent;
        position: relative;
        z-index: 1;
    }
    .accordion-group > .responsive-details[open] summary {
        border-bottom: none;
    }

    /* スマホ用の太い下線 */
    .accordion-group > .responsive-details summary::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 14px;
        background-color: #fbfbfb; /* 薄いグレー #fbfbfb */
        z-index: -1;
    }

    .accordion-group > .responsive-details .details-body {
        padding: 15px 0; /* 左右の余白を消す */
    }

    .summary-title {
        font-size: 18px;
    }
    .summary-title-en {
        display: none;
    }

    .story-layout {
        flex-direction: column;
    }
    .story-image {
        margin-top: 15px;
    }

    /* Footer Overwrites */
    .footer-top-inner {
        flex-direction: column;
        align-items: flex-end; /* スマホ時も右寄せを維持 */
        gap: 15px;
    }
    .member-links {
        justify-content: flex-end; /* スマホ時も右寄せを維持 */
        gap: 15px 20px;
    }
    .footer-middle-inner {
        flex-direction: column;
        gap: 40px;
    }
    .footer-logo {
        width: 100%;
        text-align: center;
    }
    .footer-logo .logo-text {
        white-space: normal; /* スマホ時は折り返し許可 */
    }
    .footer-sitemap {
        gap: 30px 20px;
    }
    .sitemap-col {
        width: calc(50% - 10px);
    }
    .standalone-links {
        margin-top: 10px;
    }
}

/* ==========================================================================
   Search Result List (PC & Mobile Common)
   ========================================================================== */

/* 検索結果件数と表示切り替えボタンのコンテナ */
.search-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.search-result-header .sort-wrapper {
    /* 検索ボックスの .select-wrapper と同じスタイルを適用 */
    position: relative;
    width: 160px;
    height: 44px;
    border: 1px solid #aaa;
    background: #fff;
}

.search-result-header .sort-wrapper::after {
    /* 検索ボックスの .select-wrapper::after と同じ「▼」アイコン */
    content: "▼";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #666;
    pointer-events: none;
}

.search-result-header .sort-select {
    /* 検索ボックスの .search-select と同じスタイル */
    width: 100%;
    height: 100%;
    border: none;
    padding: 0 30px 0 15px;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    font-size: 15px;
    color: #666;
    cursor: pointer;
}

.result-count {
    font-size: 16px;
    font-weight: bold;
}

/* 表示切り替えボタン（PCでは非表示） */
.view-controls {
    display: none;
}

/* 検索結果リストの大枠 */
.movie-list-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 40px;
}

/* 1件のアイテム（PCは横並び） */
.movie-list-item {
    display: flex;
    gap: 30px;
    padding-bottom: 30px;
    border-bottom: 1px dashed #ccc;
    position: relative; /* 子要素のabsoluteリンクを基点にする */
}

/* ブロック全体をクリック可能にする */
.movie-list-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.movie-list-thumb,
.movie-list-info {
    position: relative;
    z-index: 2;
}
.movie-list-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* 追加したリンク用タグをブロック全体に広げる */
.movie-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* 他の要素より上に配置 */
    text-indent: -9999px; /* 見えないようにする */
}

/* タイトルなどの既存リンクと干渉しないように */
.movie-list-title a {
    position: relative;
    z-index: 11; /* ブロックリンクより上に置くと、タイトルだけ別のリンクにできる */
}

/* サムネイル（ポスター画像） */
.movie-list-thumb {
    width: 150px;
    flex-shrink: 0;
}

.movie-list-thumb img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 画像がない場合のプレースホルダー */
.no-image {
    width: 100%;
    max-width: 150px;
    aspect-ratio: 2 / 3;
    background-color: #eee;
    color: #999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* テキスト情報エリア */
.movie-list-info {
    flex-grow: 1;
}

/* 作品タイトル */
.movie-list-title {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 5px;
}

/* リスト内のタイトルリンクは下線を消す */
.movie-list-title a {
    text-decoration: none;
    color: #000; /* リンクでも黒に固定 */
}
.movie-list-title a:hover {
    text-decoration: underline;
}

/* 英語タイトル */
.movie-list-title-en {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 15px;
}

/* メタ情報・配給製作 */
.movie-list-meta,
.movie-list-company {
    font-size: 14px;
    color: var(--text-main);
    line-height: 1.5;
    margin-bottom: 5px;
}

/* キャスト情報（ラベルと名前の横並び） */
.movie-list-cast {
    display: flex;
    margin-top: 15px;
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
}

.cast-label {
    flex-shrink: 0;
    font-weight: bold;
    color: var(--text-main);
}

/* ==========================================================================
   Search Result List (Mobile Responsive)
   ========================================================================== */
@media (max-width: 768px) {
    /* スマホ時は表示切り替えボタンを表示 */
    .view-controls {
        display: flex;
        gap: 10px;
    }

    .view-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 36px;
        height: 36px;
        border: 1px solid #ccc;
        background-color: #fff;
        color: #999;
        border-radius: 4px;
        transition: all 0.2s ease;
    }

    .view-btn.active {
        background-color: var(--text-main);
        color: #fff;
        border-color: var(--text-main);
    }

    /* --------------------------------------------------
       スマホ：リスト表示（デフォルト / 縦積み）
       -------------------------------------------------- */
    .movie-list-item {
        flex-direction: column; /* 画像とテキストを縦積みに */
        gap: 15px;
    }

    .movie-list-thumb {
        width: 120px; /* スマホ時は画像を少し小さく */
    }

    .movie-list-title {
        font-size: 20px;
    }

    .movie-list-meta,
    .movie-list-company,
    .movie-list-cast {
        font-size: 13px; /* テキストサイズを調整 */
    }

    .movie-list-cast {
        flex-direction: column; /* キャストラベルと名前も縦積みに */
    }
    .cast-label {
        margin-bottom: 2px;
    }

    /* --------------------------------------------------
       スマホ：グリッド表示
       (JSで #movie-list に 'view-grid' クラスが付与された時のスタイル)
       -------------------------------------------------- */
    .movie-list-container.view-grid {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px 4%; /* 縦20px、横4%の隙間 */
    }

    .movie-list-container.view-grid .movie-list-item {
        width: 48%; /* 横に2列並べる */
        border-bottom: none;
        padding-bottom: 10px;
        gap: 10px;
    }

    /* グリッド表示時の画像・NoImageサイズ制限 */
    .movie-list-container.view-grid .movie-list-thumb,
    .movie-list-container.view-grid .movie-list-thumb img,
    .movie-list-container.view-grid .no-image {
        width: 100%;
        max-width: 150px; /* ここで最大150pxに制限 */
        margin: 0 auto; /* 中央寄せ */
    }

    /* タイトル以外のテキスト情報を非表示にする */
    .movie-list-container.view-grid .movie-list-title-en,
    .movie-list-container.view-grid .movie-list-meta,
    .movie-list-container.view-grid .movie-list-company,
    .movie-list-container.view-grid .movie-list-cast {
        display: none;
    }

    .movie-list-container.view-grid .movie-list-title {
        font-size: 15px; /* タイトルを小さく */
        text-align: center;
        line-height: 1.4;
    }
}

/* --------------------------------------------------
light追加
       -------------------------------------------------- */

/* ソートプルダウンとレイアウト調整 */
.search-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.sort-select {
    padding: 5px 10px;
    border: 1px solid #ccc;
}

.movie-list-container.view-grid .movie-list-overview {
    display: none;
}

@media (max-width: 768px) {
    .search-result-header {
        justify-content: space-between;
    }
    .result-count {
        display: none;
    } /* スマホ時、件数は見出し直下に別途配置などを検討 */
}

/* --- 検索結果ヘッダーと件数表示の調整 --- */
.result-count-text {
    font-size: 14px;
    font-weight: bold;
    margin-top: -20px; /* 見出しとの余白を詰める */
    margin-bottom: 20px;
}

/* --- グリッド表示時の画像幅を最大150pxに強制固定 --- */
@media (max-width: 768px) {
    .movie-list-container.view-grid .movie-list-item {
        width: 48%;
        display: flex;
        flex-direction: column;
        align-items: center; /* 画像を中央寄せ */
    }

    .movie-list-container.view-grid .movie-list-thumb {
        width: 100%;
        max-width: 150px; /* グリッド時、画像幅を最大150pxに制限 */
        margin: 0 auto;
    }

    .movie-list-container.view-grid .movie-list-thumb img {
        width: 100%;
        height: auto;
    }

    .movie-list-container.view-grid .no-image {
        max-width: 150px; /* NoImageにも適用 */
        margin: 0 auto;
    }
}

/* --------------------------------------------------
著作権表記
       -------------------------------------------------- */

.list-copyright {
    font-size: 10px;
    color: #999;
    margin-top: 5px;
    text-align: left;
}

/* --------------------------------------------------
ページネーション
       -------------------------------------------------- */

/* ページネーション全体 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 10px; /* 上側の余白 */
    margin-bottom: 60px; /* 下側の余白（フッターとの間隔） */
}
/* スマホ時は少し詰める場合 */
@media (max-width: 768px) {
    .pagination {
        margin-top: 30px;
        margin-bottom: 40px;
    }
}
/* 各ボタンのデザイン */
.pagination .page-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    background-color: #fff;
    text-decoration: none;
    color: var(--text-main);
    font-weight: bold;
    border-radius: 4px;
    transition: all 0.2s ease;
}

/* ホバー時 */
.pagination .page-link:hover:not(.current) {
    background-color: #f0f0f0;
    border-color: #ccc;
}

/* 現在のページ */
.pagination .page-link.current {
    background-color: var(--text-main);
    color: #fff;
    border-color: var(--text-main);
    pointer-events: none;
}

/* 省略記号 */
.page-dots {
    color: var(--text-light);
    padding: 0 5px;
    font-weight: bold;
}

/* 非活性（disabled）時のスタイル */
.pagination .page-link.disabled {
    background-color: #f9f9f9;
    color: #ccc;
    border-color: #eee;
    cursor: not-allowed;
    pointer-events: none; /* クリックを完全に無効化 */
}

/* ==========================================================================
   インデックス共通スタイル（スタッフ一覧・作品名一覧）
   ========================================================================== */
.index-page-container {
    margin-bottom: 40px;
}
.index-description {
    font-size: 14px;
    margin-bottom: 20px;
}

/* ==========================================================================
   【スタッフ一覧】 役割・50音行の選択肢（検索ボックスと同じボタンスタイル）
   ========================================================================== */
.staff-role-nav,
.index-row-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}
.staff-role-nav a,
.index-row-nav a {
    display: inline-block;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 8px 25px;
    font-size: 14px;
    color: #666;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
}
.staff-role-nav a:hover,
.index-row-nav a:hover {
    background-color: #666;
    color: #fff;
    border-color: #666;
}
.staff-role-nav a.active,
.index-row-nav a.active {
    background-color: #000;
    color: #fff;
    border-color: #000;
}
.staff-role-nav a.active:hover,
.index-row-nav a.active:hover {
    background-color: #fff;
    color: #000;
}

/* ==========================================================================
   【スタッフ一覧】 氏名リスト表示部分
   ========================================================================== */
.staff-list-area {
    margin-bottom: 40px;
}
.staff-list-heading {
    font-size: 22px;
    font-weight: bold;
    padding-left: 15px;
    border-left: 4px solid var(--primary-red);
    margin-bottom: 20px;
    scroll-margin-top: 30px;
}
.staff-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 40px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    margin-bottom: 50px;
}
.staff-list a {
    display: inline-block;
    color: var(--text-main);
    text-decoration: underline;
    font-size: 15px;
    transition:
        color 0.3s ease,
        opacity 0.3s ease;
    line-height: 1.4;
}
.staff-list a:hover {
    color: var(--primary-red);
    opacity: 0.8;
}

/* ==========================================================================
   【制作一覧】 氏名リスト表示部分
   ========================================================================== */
.production-area {
    margin-bottom: 40px;
}
.production-list-heading {
    font-size: 22px;
    font-weight: bold;
    padding-left: 15px;
    border-left: 4px solid var(--primary-red);
    margin-bottom: 20px;
    scroll-margin-top: 30px;
}
.production-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 40px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    margin-bottom: 50px;
}
.production-list a {
    display: inline-block;
    color: var(--text-main);
    text-decoration: underline;
    font-size: 15px;
    transition:
        color 0.3s ease,
        opacity 0.3s ease;
    line-height: 1.4;
}
.production-list a:hover {
    color: var(--primary-red);
    opacity: 0.8;
}

/* ==========================================================================
   【作品名一覧】 各行のテキストリンクグループ（薄グレーのボタン化）
   ========================================================================== */
.index-lines-wrapper {
    border-top: 2px solid var(--text-main);
    padding-top: 30px;
}
.index-line-group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--border-color);
}
.index-line-label {
    width: auto;
    min-width: 60px;
    flex-shrink: 0;
    font-weight: bold;
    font-size: 20px;
    margin-right: 60px;
    padding-top: 0;
}

/* 5等分のグリッドにして均等配置（PC時） */
.title-index-char-links {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px 10px;
}

/* テキストリンクを薄グレーのボタン（ブロック）に変更 */
.title-index-char-links a {
    display: flex;
    justify-content: space-between; /* 文字と数字を左右に分ける */
    align-items: center;
    background-color: var(--bg-light); /* 薄いグレー背景 */
    color: var(--text-main);
    text-decoration: none; /* 下線をなくす */
    font-size: 15px;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.title-index-char-links a:hover {
    background-color: var(--border-color); /* ホバー時は少し濃いグレーに */
    color: var(--primary-red);
}

/* （ 件数 ）の部分 */
.title-index-char-links a span {
    font-size: 13px;
    font-weight: normal;
    color: var(--text-light);
    transition: color 0.3s ease;
}

.title-index-char-links a:hover span {
    color: var(--primary-red);
}

/* ==========================================================================
   【配給一覧】 氏名リスト表示部分
   ========================================================================== */
.distribution-list-area {
    margin-bottom: 40px;
}
.distribution-list-heading {
    font-size: 22px;
    font-weight: bold;
    padding-left: 15px;
    border-left: 4px solid var(--primary-red);
    margin-bottom: 20px;
    scroll-margin-top: 30px;
}
.distribution-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 40px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    margin-bottom: 50px;
}
.distribution-list a {
    display: inline-block;
    color: var(--text-main);
    text-decoration: underline;
    font-size: 15px;
    transition:
        color 0.3s ease,
        opacity 0.3s ease;
    line-height: 1.4;
}
.distribution-list a:hover {
    color: var(--primary-red);
    opacity: 0.8;
}

/* ==========================================================================
   【キャスト一覧】 氏名リスト表示部分
   ========================================================================== */
.cast-list-area {
    margin-bottom: 40px;
}
.cast-list-heading {
    font-size: 22px;
    font-weight: bold;
    padding-left: 15px;
    border-left: 4px solid var(--primary-red);
    margin-bottom: 20px;
    scroll-margin-top: 30px;
}
.cast-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 40px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    margin-bottom: 50px;
}
.cast-list a {
    display: inline-block;
    color: var(--text-main);
    text-decoration: underline;
    font-size: 15px;
    transition:
        color 0.3s ease,
        opacity 0.3s ease;
    line-height: 1.4;
}
.cast-list a:hover {
    color: var(--primary-red);
    opacity: 0.8;
}

/* ==========================================================================
   【スタッフ／製作／配給／キャスト一覧】検索結果テキストリンクのグレーボックス化
   PC: 1行2列のグリッド表示 / SP: 1行1列
   ========================================================================== */
.index-page-container .staff-list,
.index-page-container .production-list,
.index-page-container .distribution-list,
.index-page-container .cast-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 30px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    margin-bottom: 50px;
    align-items: stretch;
}

.index-page-container .staff-list li,
.index-page-container .production-list li,
.index-page-container .distribution-list li,
.index-page-container .cast-list li {
    display: flex;
    margin: 0;
    padding: 0;
    width: auto;
}

.index-page-container .staff-list a,
.index-page-container .production-list a,
.index-page-container .distribution-list a,
.index-page-container .cast-list a {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--bg-light);
    color: var(--text-main);
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 4px;
    transition: all 0.3s ease;
    width: 100%;
    height: 100%;
}

.index-page-container .staff-list a:hover,
.index-page-container .production-list a:hover,
.index-page-container .distribution-list a:hover,
.index-page-container .cast-list a:hover {
    background-color: var(--border-color);
    color: var(--primary-red);
    opacity: 1;
}

@media (max-width: 768px) {
    .index-page-container .staff-list,
    .index-page-container .production-list,
    .index-page-container .distribution-list,
    .index-page-container .cast-list {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px 0;
        margin-bottom: 40px;
    }

    .index-page-container .staff-list li,
    .index-page-container .production-list li,
    .index-page-container .distribution-list li,
    .index-page-container .cast-list li {
        width: 100%;
    }

    .index-page-container .staff-list a,
    .index-page-container .production-list a,
    .index-page-container .distribution-list a,
    .index-page-container .cast-list a {
        font-size: 14px;
        padding: 10px 15px;
    }
}

/* ==========================================================================
   スマホ表示の微調整
   ========================================================================== */
@media (max-width: 768px) {
    /* スタッフ一覧用 */
    .staff-role-nav a,
    .index-row-nav a {
        padding: 8px 15px;
        font-size: 13px;
    }
    .staff-list {
        gap: 12px 20px;
        margin-bottom: 40px;
    }
    .staff-list-heading {
        font-size: 20px;
    }

    /* 作品名一覧用 */
    .index-line-group {
        flex-direction: column;
        gap: 12px;
    }
    .index-line-label {
        width: 100%;
        font-size: 18px;
        padding-left: 10px;
        border-left: 4px solid var(--primary-red);
        margin-right: 0;
        margin-bottom: 15px;
    }
    .title-index-char-links {
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px 10px;
    }

    /* スマホ時のボタン内余白・サイズ調整 */
    .title-index-char-links a {
        font-size: 14px;
        padding: 8px 10px;
    }
    .title-index-char-links a span {
        font-size: 12px;
    }
}

/* ==========================================================================
   シリーズ一覧ページ用スタイル追加
   ========================================================================== */

/* シリーズ一覧のリスト (件数を含むため、少し広めに取る) */
.series-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 40px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    margin-bottom: 50px;
}

.series-list li {
    /* PCでは3列（文字長によっては4列でも可。今回は余裕を持たせて3列） */
    width: calc(33.333% - 27px);
}

.series-list a {
    display: flex;
    justify-content: space-between; /* シリーズ名と件数を左右に分ける場合 */
    align-items: center;
    color: var(--text-main);
    text-decoration: none; /* 下線を消してボタンっぽくするか、リンクっぽくするか */
    font-size: 15px;
    padding: 8px 12px;
    background-color: var(--bg-light); /* 薄いグレー背景 */
    border-radius: 4px;
    transition: all 0.3s ease;
}

.series-list a:hover {
    background-color: var(--border-color);
    color: var(--primary-red);
}

.series-list a span {
    font-size: 13px;
    color: var(--text-light);
}

.series-list a:hover span {
    color: var(--primary-red);
}

/* 会社名の見出し */
.series-list-heading {
    font-size: 22px;
    font-weight: bold;
    padding-left: 15px;
    border-left: 4px solid var(--primary-red);
    margin-bottom: 20px;
}

/* --- スマホ表示の微調整 --- */
@media (max-width: 768px) {
    .series-list {
        flex-direction: column; /* スマホでは縦1列に並べる */
        gap: 10px 0;
        margin-bottom: 40px;
    }

    .series-list li {
        width: 100%;
    }

    .series-list a {
        font-size: 14px;
        padding: 10px 15px;
    }

    .series-list-heading {
        font-size: 20px;
    }
}

/* ==========================================================================
   公開年一覧（インデックス）ページ用スタイル
   ========================================================================== */
.year-list-area {
    margin-top: 30px;
    margin-bottom: 60px;
}

.year-list-group {
    margin-bottom: 40px;
}

/* 年代の見出し */
.year-list-heading {
    font-size: 20px;
    font-weight: bold;
    padding-left: 15px;
    border-left: 4px solid var(--primary-red);
    margin-bottom: 20px;
}

/* 年のリスト（10年分を綺麗に収めるためPCは5列） */
.year-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5列×2行で10年分が綺麗に揃う */
    gap: 15px 20px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

/* リンクテキスト（シリーズと同じグレーブロック風に変更） */
.year-list a {
    display: flex;
    justify-content: space-between; /* 2019年 と (数) を左右に分ける */
    align-items: center;
    background-color: var(--bg-light); /* 薄いグレー背景 */
    color: var(--text-main);
    text-decoration: none; /* 下線をなくす */
    font-size: 15px;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.year-list a:hover {
    background-color: var(--border-color); /* ホバー時に少し濃いグレーに */
    color: var(--primary-red);
}

/* （ 件数 ）の部分 */
.year-list a span {
    font-size: 13px;
    font-weight: normal;
    color: var(--text-light);
    transition: color 0.3s ease;
}

.year-list a:hover span {
    color: var(--primary-red);
}

/* --- スマホ表示の微調整 --- */
@media (max-width: 768px) {
    .year-list-group {
        margin-bottom: 30px;
    }

    .year-list-heading {
        font-size: 18px;
    }

    .year-list {
        grid-template-columns: repeat(2, 1fr); /* スマホは2列に */
        gap: 12px 10px;
    }

    /* スマホ時のブロック内の余白と文字サイズ調整 */
    .year-list a {
        font-size: 14px;
        padding: 8px 10px;
    }

    .year-list a span {
        font-size: 12px;
    }
}

/* ==========================================================================
   トップページ固有スタイル (Pickup / Update)
   ========================================================================== */
.pickup-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px; /* ★ブロック間の隙間を30pxから15pxに狭めました */
}

.pickup-card {
    display: flex;
    flex-direction: column;
    padding: 0 10px; /* ★カードの内側に少し余白を持たせてバランスを調整 */
}

/* ★社名を20px・背景なしに変更し、2色の特殊な下線を設定 */
.pickup-company {
    font-size: 20px; /* 22pxから20pxに調整 */
    font-weight: bold;
    color: var(--text-main);
    background-color: transparent; /* 背景なし */
    padding: 0 0 8px 0; /* 背景用のパディングを解除し、下線との隙間用に下だけ余白を入れる */
    margin-bottom: 15px;
    border-radius: 0; /* 角丸を解除 */
    text-align: left; /* 下線に合わせて左寄せに変更 */
    position: relative; /* 下線の位置を決めるための基準設定 */
}

/* ★左から1/3が赤・2/3がグレーの細線（下線）を作る設定 */
.pickup-company::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px; /* 細線（1px） */
    /* linear-gradientで33.33%（1/3）の位置で色を正確に区切る */
    background: linear-gradient(
        to right,
        var(--primary-red) 33.33%,
        #ccc 33.33%
    );
}

/* ★画像はセンタリングしつつ、少し横幅を広げて隙間を埋める */
.pickup-img-wrap {
    margin: 0 auto 12px auto;
    padding: 0;
    max-width: 180px;
    width: 100%;
}

.pickup-img-wrap img {
    width: 100%;
    max-width: 150px;
    height: auto;
    display: block;
    background-color: #eee;
}

.pickup-copyright {
    font-size: 10px;
    color: #999;
    text-align: right;
    margin-top: 3px;

    line-height: 1.2;
}

/* ★タイトルをサイズアップ */
.pickup-title {
    font-size: 18px; /* 16pxから18pxにアップ */
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.4;
}

.pickup-desc {
    font-size: 13px;
    color: var(--text-main);
    margin-bottom: 15px;
    flex-grow: 1;
}

/* ボタンは右端に小さく。白背景にベースカラーのテキスト */
.pickup-link {
    align-self: flex-end;
    margin-top: auto;
    background-color: #fff;
    color: var(--primary-red);
    border: 1px solid #ccc; /* 枠線グレー */
    text-decoration: none;
    padding: 5px 15px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.pickup-link:hover {
    background-color: var(--primary-red);
    border-color: var(--primary-red);
    color: #fff;
}

/* Update (新着情報) */
.update-list {
    margin-bottom: 60px;
    border-top: none; /* ★上のラインを削除 */
}

.update-list li {
    border-bottom: none; /* ★下のライン（各項目の区切り線）を削除 */
    padding: 15px 10px;
}

.update-list a {
    display: flex;
    align-items: flex-start;
    padding: 15px 10px;
    text-decoration: none;
    color: var(--text-main);
    transition: background-color 0.3s;
}

.update-list a:hover {
    background-color: var(--bg-light);
}

.update-date {
    width: 100px;
    flex-shrink: 0;
    font-size: 14px;
    color: var(--text-light);
    font-weight: bold;
}

.update-text {
    font-size: 15px;
    line-height: 1.5;
}

/* ==========================================================================
   スマホ表示の微調整
   ========================================================================== */
@media (max-width: 768px) {
    /* Pickupはスマホで縦1列に変更 */
    .pickup-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* スマホ表示の微調整 */
    .pickup-company {
        font-size: 18px; /* スマホ用は少しコンパクトに */
        padding: 0 0 6px 0; /* 下の余白のみ調整 */
    }

    .pickup-title {
        font-size: 16px; /* スマホ用に少し調整 */
    }

    .pickup-desc {
        font-size: 14px;
    }

    /* Updateはスマホでは日付を上に改行させる */
    .update-list a {
        flex-direction: column;
        gap: 5px;
        padding: 15px 5px;
    }

    .update-date {
        width: auto;
        font-size: 13px;
    }

    .update-text {
        font-size: 14px;
    }
}

/* ==========================================================================
   新トップページ専用スタイル (ラフ画像・スマホ表示最適化版)
   ========================================================================== */
.top-main {
    padding-top: 40px;
}

/* 見出し共通 (TOPICS / NEWS) */
.section-title-large {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid #222;
    padding-bottom: 5px;
    margin-bottom: 20px;
}
.section-title-large h2 {
    font-size: 56px;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 2px;
    font-family: "Helvetica Neue", Arial, sans-serif;
}
.section-title-large .sub-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 6px;
}

/* ボタン：四隅がやや丸みを帯びる程度（4px） */
.btn-wrap-right {
    text-align: right;
    margin-top: auto;
}
.btn-rounded,
.btn-rounded-small {
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px; /* 四隅がやや丸みを帯びる程度に修正 */
    color: #666;
    text-decoration: none;
    background: #fff;
    transition: background-color 0.3s;
}
.btn-rounded {
    padding: 8px 30px;
    font-size: 13px;
}
.btn-rounded-small {
    padding: 6px 20px;
    font-size: 11px;
}
.btn-rounded:hover,
.btn-rounded-small:hover {
    background: #f0f0f0;
}

/* PC用レイアウト：TOPICSとNEWS、過去トピックスのグリッド制御 */
.top-topics-news-wrapper {
    display: grid;
    grid-template-columns: 48% 1fr;
    column-gap: 50px;
    row-gap: 40px;
    margin-bottom: 60px;
}
.top-topics {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    width: 100%;
}
.top-news {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: 100%;
}
.top-row-2.past-topics {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    display: flex;
    gap: 20px;
}

/* ① 最新TOPICS */
.latest-article img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
    border-radius: 4px;
}
.latest-text {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* ① NEWS（グレー背景付きリスト） */
.news-list-top {
    background-color: #f8f9fa;
    padding: 10px 20px;
    border-radius: 4px;
}
.news-list-top li {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
}
.news-list-top li:last-child {
    border-bottom: none;
}
.news-list-top .date {
    width: 100px;
    flex-shrink: 0;
}
.news-list-top a {
    color: #0056b3;
    text-decoration: none;
}
.news-list-top a:hover {
    text-decoration: underline;
}

/* ② 3つの過去トピックス（上下ライン・パディングと幅の最適化） */
.mini-card {
    flex: 1;
    border-top: 1px solid #ddd; /* 上のライン */
    border-bottom: 1px solid #ddd; /* 下のライン */
    border-left: none; /* 左右ラインなし */
    border-right: none;
    padding: 15px 0; /* ★左右パディングを0にして横幅を極限まで広げる */
    display: flex;
    flex-direction: column;
}
.mini-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 15px; /* 画像とテキストの隙間 */
    margin-bottom: 10px;
    width: 100%; /* ★親枠いっぱいに広げる */
}
.mini-card-img {
    width: 100px;
    height: 100px; /* ★画像を大きく戻す (適度なサイズに) */
    flex-shrink: 0;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    margin-inline-start: 5px;
    margin-inline-end: 5px;
    margin-block: 0;
}
.mini-card-img img {
    width: 100%;
    height: 100%;
    display: block;
    aspect-ratio: 16 / 9; /* サムネイルをきれいな比率に */
    object-fit: cover;
}
.mini-card-text {
    font-size: 14px;
    line-height: 1.5;
    font-weight: bold;
    flex: 1; /* ★残りの幅をすべてテキストエリアに割り当てる */
    width: 100%;
}
/* ③ 固定メッセージ2つ */
.top-row-3 {
    display: flex;
    gap: 50px;
    margin-bottom: 40px;
}
.announce-left {
    width: 45%;
}
.announce-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
}
.announce-text {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 25px;
}
.btn-wrap-center-pc-right {
    text-align: right;
}
.announce-right {
    width: 55%;
    background-color: #f0f0f0;
    border-radius: 4px;
    padding: 30px;
    font-size: 13px;
    line-height: 1.8;
    color: #333;
}

/* ④ 赤文字注釈 */
.top-red-notice {
    color: var(--primary-red);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 60px;
}

/* ⑤ 解説、ボタン付きリンクバナー3種 */
.top-row-4 {
    display: flex;
    gap: 25px;
    margin-bottom: 80px;
}
.feature-card {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.feature-img {
    margin: 0;
    padding: 0;
}
.feature-img img {
    width: 100%;
    height: auto;
    display: block;
}
.feature-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.feature-text-group {
    margin-bottom: 20px;
    flex-grow: 1;
}
.feature-text-main {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 1.6;
}
.feature-text-sub {
    font-size: 13px;
    color: #0056b3;
    line-height: 1.6;
}

/* ⑥ テキストリンク付きバナー4種 */
.top-row-5 {
    display: flex;
    gap: 20px;
}
.banner-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.banner-title {
    font-size: 12px;
    font-weight: bold;
    height: 36px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 10px;
}

.banner-item img {
    width: 100%;
    max-width: 250px;
    height: 70px; /* ★画像の「高さ」を固定*/
    object-fit: contain; /* ★画像の縦横比を崩さずに、指定した高さの枠内に*/
    margin-bottom: 10px;
}
.banner-link {
    font-size: 12px;
    color: #0056b3;
    text-decoration: none;
    margin-top: auto; /* ★テキストリンクの位置水平に */
}
.banner-link:hover {
    text-decoration: underline;
}
/* フッター会員企業が増えた時用の折り返し設定（将来10社程度対応） */
.footer-top-inner {
    flex-wrap: wrap;
    align-items: flex-start;
    /* ★縦と横のgapを分けて指定します */
    row-gap: 5px; /* 上下に改行された時の行間（狭くスッキリと） */
    column-gap: 30px; /* 左右に並んでいる時の隙間（維持） */
}
.member-label {
    font-size: 14px;
    line-height: 1.5;
}
.member-links {
    flex-wrap: wrap;
    white-space: normal;
    justify-content: flex-end;
    gap: 4px 24px;
}
.member-links a {
    white-space: nowrap;
    line-height: 1.4;
}

/* ==========================================================================
   スマホ表示の微調整 (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    .section-title-large h2 {
        font-size: 40px;
    }

    /* スマホ時の並び替え */
    .top-topics-news-wrapper {
        display: flex;
        flex-direction: column;
        gap: 30px;
        margin-bottom: 40px;
    }
    .top-topics {
        order: 1;
    }

    /* ★過去トピックスの縦並びと、二重線の防止 */
    .top-row-2.past-topics {
        order: 2;
        flex-direction: column;
        gap: 0; /* 隙間をなくして線をくっつける */
    }
    .top-row-2.past-topics .mini-card {
        border-bottom: none; /* 下の線を消して二重線を防ぐ */
    }
    .top-row-2.past-topics .mini-card:last-child {
        border-bottom: 1px solid #ddd; /* 一番最後のカードだけ下の線をつける */
    }

    .top-news {
        order: 3;
    }

    .top-row-3 {
        flex-direction: column;
        gap: 30px;
    }
    .top-topics,
    .top-news,
    .announce-left,
    .announce-right {
        width: 100%;
    }
    .btn-wrap-center-pc-right {
        text-align: center;
    }
    /* ⑤解説付きバナー（スマホ時スライダー：左右のハミ出し・ズレを完全修正） */
    .sp-slider-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
        margin-bottom: 30px; /* スライダー全体と次のブロックとの余白はここで管理 */
    }
    .top-row-4 {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* scroll-behavior は指定しない：JS(base.js)のscrollTo()側でsmooth/autoを都度制御しているため、
           ここでCSSからもsmoothを指定すると、ループ時の瞬間リセット(auto)まで滑らかに見えてしまい、
           「左端まで巻き戻る」ように見える不具合の原因になる */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0;
        margin-bottom: 0; /* PC用の80pxをスマホでは無効化(ドットとの余白はsp-slider-dots側で管理) */
        padding-bottom: 15px;
        cursor: grab;
    }
    .top-row-4:active {
        cursor: grabbing;
    }
    .top-row-4::-webkit-scrollbar {
        display: none;
    }

    /* ★カードの幅と外側の余白(margin)の合計をぴったり100%にする魔法の計算 */
    .feature-card {
        /* コンテナの幅(100%)から、左右の余白合計(30px)を引いたサイズに固定 */
        min-width: calc(100% - 30px);
        width: calc(100% - 30px);
        margin: 0 15px; /* カードの外側に左右15pxずつの余白を持たせる */
        padding: 0; /* ★カード自体にはpaddingを付けない（枠線と画像がズレるのを防ぐ） */
        scroll-snap-align: center;
        flex: none;
    }
    /* スライダーの現在位置を示すドットページネーション */
    .sp-slider-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
    }
    .sp-slider-dots .dot {
        width: 8px;
        height: 8px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background-color: #ddd;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .sp-slider-dots .dot.is-active {
        width: 20px;
        border-radius: 4px;
        background-color: var(--primary-red);
    }

    /* ⑥テキスト付きバナー（スマホ時：確実にはみ出さず2列にするGrid設定） */
    .top-row-5 {
        display: grid;
        grid-template-columns: repeat(
            2,
            1fr
        ); /* どんな画面幅でも強制的に均等の2列にする */
        gap: 20px 15px; /* 上下20px、左右15pxの隙間 */
    }
    .banner-item {
        width: 100%;
        margin: 0;
    }
    .banner-title {
        display: none;
    }
    .banner-link {
        display: none;
    }

    /* スマホ時：フッター4社のテキストリンクを縮小して1行に強制配置 */
    .footer-top-inner {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;
    }
    .member-links {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        white-space: nowrap;
        justify-content: center;
        gap: 6px;
    }
    .member-links a {
        font-size: 11px;
        white-space: nowrap;
    }
}

/* ==========================================================================
   検索結果一覧（通常リスト表示）のスマホレイアウト修正
   ========================================================================== */
@media (max-width: 768px) {
    /* movie-list-container が view-grid クラスを持っていない（＝通常リスト表示）時のみ適用 */
    .movie-list-container:not(.view-grid) .movie-list-item {
        display: grid;
        grid-template-columns: 100px 1fr;
        grid-template-rows: auto auto auto;
        /* ★上下の余白は12px、左右(画像とテキストの間)の余白を24pxに広げました */
        gap: 12px 36px;
        align-items: start;
        position: relative;
        padding: 20px 0;
    }

    /* 作品リンク（カード全体をクリック可能に） */
    .movie-list-container:not(.view-grid) .movie-link {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    /* 1行目：タイトル（2列ぶち抜き） */
    .movie-list-container:not(.view-grid) .movie-list-info {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        display: contents;
    }

    .movie-list-container:not(.view-grid) .movie-list-title {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        font-size: 24px;
        font-weight: bold;
        line-height: 1.4;
        margin: 0;
    }

    /* 2行目左：画像エリア */
    .movie-list-container:not(.view-grid) .movie-list-thumb {
        grid-column: 1 / 2;
        grid-row: 2 / 4;
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin: 0;
    }
    .movie-list-container:not(.view-grid) .movie-list-thumb img {
        width: 100%;
        height: auto;
        display: block;
        border: 1px solid #eee;
    }

    /* 2行目右：概要テキスト */
    .movie-list-container:not(.view-grid) .movie-list-overview {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        font-size: 18px;
        line-height: 1.6; /* ★行間も少し広げて読みやすく調整 */
        color: var(--text-main);
        margin: 0;
        /* 行数制限（4行程度で三点リーダーにする） */
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 3行目：著作権表示（右下に配置） */
    .movie-list-container:not(.view-grid) .list-copyright {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
        font-size: 10px;
        color: #999;
        text-align: left;
        margin: 0;
        align-self: end; /* 下に寄せる */
    }
}

/* ==========================================================================
   ポップアップ (モーダル) スタイル
   ========================================================================== */
/* 背景の黒い半透明エリア */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

/* ポップアップが開いた時の状態 */
.modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* ポップアップの白い箱 */
.modal-container {
    background-color: #fff;
    width: 90%;
    max-width: 600px;
    border-radius: 8px;
    position: relative;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}
.modal-overlay.is-active .modal-container {
    transform: translateY(0);
}

/* 閉じる(×)ボタン */
.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    color: #666;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}
.modal-close-btn:hover {
    color: #000;
}

/* ポップアップ内のテキスト */
.modal-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--primary-red);
    padding-bottom: 10px;
}
.modal-text {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 20px;
}
.modal-note {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    color: #666;
}
.modal-alert {
    color: var(--primary-red);
    font-weight: bold;
    margin-bottom: 0;
    margin-top: 30px;
    text-align: center;
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
    .modal-container {
        padding: 30px 20px;
    }
    .modal-title {
        font-size: 18px;
    }
    .modal-text {
        font-size: 14px;
    }
}

/* ==========================================================================
   代用表記一覧ページ用スタイル (Substitute Characters)
   2列固定・高さ固定・折り返し禁止・中央揃え 統合版
   ========================================================================== */

.substitute-grid {
    display: grid;
    /* 2列固定 */
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 60px;
}

.substitute-card {
    display: flex;
    align-items: center; /* 垂直中央揃えで統一 */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 12px 7px;
    width: 100%;
    height: 50px; /* 高さ固定 */
    box-sizing: border-box;
    overflow: hidden;
}

.sub-formal {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-right: 15px;
}
.sub-formal img {
    max-height: 22px;
    width: auto;
    display: block;
}

.sub-arrow {
    color: var(--primary-red);
    font-size: 11px;
    line-height: 50px; /* カード高さと同期 */
    margin-right: 10px;
    flex-shrink: 0;
}

.sub-alt {
    flex: 1;
    font-size: 14px;
    line-height: 50px; /* カード高さと同期 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* はみ出しを省略 */
}

.sub-alt a {
    color: #0056b3;
    text-decoration: none;
    display: block;
}
.sub-alt a:hover {
    text-decoration: underline;
}

/* 50音インデックスボタン */
.syllabary-index {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 50px 0;
    /* ★PC時は中央寄せ */
    justify-content: center;
}

/* ==========================================================================
   50音インデックスのアクティブ状態（反転表示）
   ========================================================================== */
.syllabary-index li a.active {
    background-color: #000 !important; /* 黒背景に反転 */
    color: #fff !important;            /* 白文字 */
    border-color: #000 !important;     /* 枠線も黒に */
    pointer-events: none;              /* アクティブなページ自体のリンクを無効化 */
}


/* スマホ用：左詰め */
@media (max-width: 768px) {
    .syllabary-index {
        justify-content: flex-start; /* ★スマホ時は左詰め */
    }
    .syllabary-index li a {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }
}
.syllabary-index li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
}
.syllabary-index li a:hover {
    background-color: var(--primary-red);
    color: #fff;
}

.index-heading {
    font-size: 22px;
    padding-bottom: 10px;
    border-bottom: 2px solid #222;
    margin-top: 50px;
    margin-bottom: 20px;
}

/* スマホ用：1列 */
@media (max-width: 768px) {
    .substitute-grid {
        grid-template-columns: 1fr;
    }
}

/* --- ガイドページ専用調整 --- */

/* サイトポリシー見出し上のマージン確保 */
.section-margin-top {
    margin-top: 60px;
}

/* 3列固定のカテゴリレイアウト */
.howto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.howto-card {
    background-color: #fafafa;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
}
.howto-card.empty {
    background-color: transparent;
    border: none;
}

/* 既存の text-red クラスを適用 */
.text-red {
    color: var(--primary-red);
}

/* スマホ対応 */
@media (max-width: 768px) {
    .howto-grid {
        grid-template-columns: 1fr;
    }
}

/* --- 見出しの装飾（このページでは英語サブタイトルを非表示にする） --- */
.heading-en {
    font-size: 32px;
    color: #eaeaea;
    font-weight: bold;

    line-height: 1;
    display: none;
}

/* ==========================================================================
   フリー検索用スタイル（キャスト・スタッフなど人名のみ）
   ========================================================================== */
.result-list-area {
    margin-top: 30px;
    margin-bottom: 60px;
}

.result-list-group {
    margin-bottom: 40px;
}

/* 年代の見出し */
.result-list-heading {
    font-size: 20px;
    font-weight: bold;
    padding-left: 15px;
    border-left: 4px solid var(--primary-red);
    margin-bottom: 20px;
}

/* リスト（PC: 2列グリッド・ボックスグレー背景） */
.result-list-area .result-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 30px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    align-items: stretch;
}

.result-list-area .result-list li {
    display: flex;
    margin: 0;
    padding: 0;
    width: auto;
}

/* リンクテキスト（グレーブロック風） */
.result-list-area .result-list a {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--bg-light); /* 薄いグレー背景 */
    color: var(--text-main);
    text-decoration: none; /* 下線をなくす */
    font-size: 15px;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 4px;
    transition: all 0.3s ease;
    width: 100%;
    height: 100%;
}

.result-list-area .result-list a:hover {
    background-color: var(--border-color); /* ホバー時に少し濃いグレーに */
    color: var(--primary-red);
}

/* （ 件数 ）の部分 */
.result-list-area .result-list a span {
    font-size: 13px;
    font-weight: normal;
    color: var(--text-light);
    transition: color 0.3s ease;
    flex-shrink: 0;
    margin-left: 5px;
    display: inline-block;
}

.result-list-area .result-list a:hover span {
    color: var(--primary-red);
}

/* --- スマホ表示の微調整 --- */
@media (max-width: 768px) {
    .result-list-group {
        margin-bottom: 30px;
    }

    .result-list-heading {
        font-size: 18px;
    }

    .result-list-area .result-list {
        grid-template-columns: repeat(1, 1fr); /* スマホは1列 */
        gap: 10px;
    }

    /* スマホ時のブロック内の余白と文字サイズ調整 */
    .result-list-area .result-list a {
        font-size: 14px;
        padding: 8px 10px;
    }

    .result-list-area .result-list a span {
        font-size: 12px;
    }
}

/* --- ピックアップ内 公式サイトリンク調整 --- */
.pickup-official-link {
    display: inline-block;
    align-self: flex-start; /* 左寄せを維持 */
    font-size: 13px;
    color: var(--primary-red); /* 映連の赤色テキスト */
    text-decoration: underline; /* リンク下線あり */
    margin-bottom: 8px; /* 概要テキストとの隙間 */
    font-weight: bold;
    position: relative;
    z-index: 5; /* 「詳細を見る」のブロック判定より上に配置してクリック可能に */
}

.pickup-official-link:hover {
    opacity: 0.7;
    text-decoration: none; /* ホバー時に下線を消す演出 */
}



/* =========================================================
   大型スマホ・タブレット横画面時の対策
   ========================================================= */

/* 画面幅1024px以下 ＋ 横長画面（幅＞高さ）の時に適用 */
@media screen and (max-width: 1024px) and (orientation: landscape) {

    /* -------------------------------------------
       1. 画面はみ出し・強制PC表示化の対策
    ------------------------------------------- */
    body {
        overflow-x: hidden;
    }
    
    /* 主要なコンテナの幅を固定値から100%に強制し、画面に収める */
    .header-inner,
    .search-box-wrapper,
    .content-inner,
    .footer-top-inner,
    .footer-middle-inner {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* 各インデックス検索ページのボタン群がはみ出さないように折り返しを許可 */
    .index-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    /* 検索入力欄やプルダウンがはみ出さないように調整 */
    .search-input-group {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    .search-input-group > * {
        max-width: 100% !important;
    }

    /* 横長リストがはみ出す場合、横スクロールで対応できるようにする */
    .main-content {
        max-width: 100vw !important;
        overflow-x: hidden !important; 
    }

    /* -------------------------------------------
       2. 「映連データベースとは」ポップアップの対策
    ------------------------------------------- */
    #js-about-modal .modal-container {
        /* 横幅を画面の90%まで拡大 */
        width: 90% !important;
        max-width: 90% !important;
        /* 高さを画面内に収め、見切れないようにする */
        max-height: 90vh !important;
        display: flex !important;
        flex-direction: column !important;
        margin: auto !important; 
    }

    #js-about-modal .modal-content {
        /* 縦方向に見切れる場合は内部でスクロールできるようにする */
        overflow-y: auto !important;
        /* 閉じるボタンなどの余白を考慮した高さを設定 */
        max-height: calc(90vh - 40px) !important; 
        padding: 15px !important;
    }
}

/* noto-sans-jp-regular - japanese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-sans-jp-v56-japanese-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-500 - japanese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/noto-sans-jp-v56-japanese-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-700 - japanese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-sans-jp-v56-japanese-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}