@charset "utf-8";

/* =========================================
   BASE
========================================= */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", serif;
    background: #1c1a0f;
}
body.is-story-active {
    background-color: #27220b;
}
body.is-scroll-locked {
    overflow: hidden;
}

a {
    transition: 1s;
}

img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.mobile {
    display: block;
}
.pc {
    display: none;
}
@media (min-width: 768px) {
    .mobile {
        display: none;
    }
    .pc {
        display: flex;
        width: 100%;
    }
}

.image {
    background-color: #27220b;
}
.image.fixed {
    position: sticky;
    top: 0;
    z-index: -1;
}

/* =========================================
   UI COMPONENTS (Overrides for cineui.css)
========================================= */
/* Loading */
.loading {
    background-color: #1c1a0f;
}
.loading_logo_base {
    aspect-ratio: 237.01 / 171.77;
}

/* Modal */
.cine-modal-video-list li.is-current {
    background: #6b845d;
}

/* ナビゲーション文言の非表示 */
.nav-toggle-text {
    display: none;
}

/* =========================================
   TOP
========================================= */
.content {
    background: #1c1a0f;
    box-shadow: 0 5px 5px 5px rgba(0,0,0,.5);
}
.main-vidual {
    margin: 0;
}
.pc-left {
    width: 50%;
}
.pc-right {
    display: flex;
    flex-direction: column;
    width: 50%;
    padding: 2% 3%;
    box-sizing: border-box;
}
.pc-logo {
    width: 70%;
    margin: 22% auto 0;
}
.pc-lead {
    width: 80%;
    margin: auto auto 0;
}
.pc-credit {
    width: 100%;
    margin: 3% auto 0;
}
.pc-publicdate {
    width: 100%;
    margin: 5% auto 0;
}

.publicdate.mobile {
    width: 80%;
    margin: 10% auto 0;
}

/* =========================================
   MVTK & SNS
========================================= */
.mvtk {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 10% 10% 5%;
}
@media (min-width: 768px) {
    .mvtk {
        padding: 5% 5% 2.5%;
        background: #1c1a0f;
    }
}

.sns {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 0 10% 10%;
}
.sns div {
    width: 30px;
}
.sns img {
    width: 100%;
    height: auto;
}
@media (min-width: 768px) {
    .sns {
        padding: 0 5% 5%;
        background: #1c1a0f;
    }
    .sns a {
        transition: 1s;
    }
    .sns a:hover {
        opacity: 0.7;
    }
}

/* =========================================
   INTRODUCTION
========================================= */
.intro {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 100%;
    background: #1c1a0f;
}
.intro_bg,
.intro_content {
    grid-area: 1 / 1;
}
.intro_bg {
    align-self: start;
    z-index: 0;
}
.intro_bg img {
    display: block;
    width: 100%;
    height: auto;
}
.intro_content {
    z-index: 1;
    padding-bottom: 90px;
}
.intro_lead {
    width: 80%;
    margin: 53% auto 0;
}
.intro_lead img {
    display: block;
    width: 100%;
    height: auto;
}
@media (min-width: 768px) {
    .intro_lead {
        margin: 35% auto 0;
    }
}

.intro_text {
    width: 80%;
    margin: 7% auto 0;
    box-sizing: border-box;
}
.intro_text p {
    margin: 2rem 0 0;
    font-family: serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.8);
}
.intro_text p:first-of-type {
    margin-top: 0;
}
.intro_review {
    width: 80%;
    margin: 5% auto 0;
    max-width: 600px;
}

@media (min-width: 1280px) {
    .intro_text {
        column-count: 2;
        column-gap: 60px;
    }
    .intro_text p {
        margin-bottom: 1.5em;
        break-inside: avoid;
    }
}

.intro_gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 80%;
    margin: 5% auto 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}
.intro_gallery li {
    width: 49%;
    margin-top: 1%;
}
@media (min-width: 768px) {
    .intro_review {
        margin-top: 6rem;
    }
    .intro_gallery li {
        width: 32.9%;
        margin-top: 0.4%;
    }
}
@media (min-width: 1024px) {
    .intro_gallery {
        margin-top: 6rem;
        width: 90%;
    }
    .intro_gallery li {
        width: 16.5%;
        margin-top: 0;
    }
}

/* =========================================
   STORY
========================================= */
.story {
    background: #27220b;
}
.story img {
    max-width: 100%;
    height: auto;
}
.story_content {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 10%;
    background: #27220b;
}
.story_title {
    margin-top: 10%;
    font-family: "Special Elite", cursive;
    font-size: 2rem;
    color: #a5947a;
}
.story_lead {
    margin-top: 10%;
}
.story_text {
    margin-top: 60px;
    font-family: serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #a5947a;
}
.story_gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    margin: 3rem auto 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}
.story_gallery li {
    width: 49.5%;
    margin-top: 0.5%;
}

@media (min-width: 1024px) {
    .story {
        position: relative;
        background: transparent;
    }
    .story_img {
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        width: 50%;
        height: 100vh;
    }
    .story_img img {
        width: 100%;
        height: 100vh;
        object-fit: cover;
    }
    .story_content {
        width: 50%;
        margin-left: 50%;
        padding: 10% 5%;
        box-sizing: border-box;
    }
}

/* =========================================
   CAST
========================================= */
.cast {
    padding: 15%;
    background: #e1dbc0;
}
.cast_title {
    font-family: "Special Elite", cursive;
    font-size: 2rem;
    text-align: center;
    color: rgba(0,0,0,0.6);
}
.cast_box {
    max-width: 1000px;
    margin: 10% auto 0;
    padding: 0;
    list-style: none;
}
/* --- スマホ表示（基本設定） --- */
.cast_box li {
    width: 100%;
    display: flex;
    flex-direction: column; /* 縦並び */
    gap: 20px;             /* 画像とテキストの間隔 */
    margin-bottom: 60px;    /* リスト項目同士の間隔 */
}
.cast_box li:last-child {
    margin-bottom: 0;
}
.cast_img {
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
}
.cast_box img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.cast_text {
    text-align: left;      /* テキストエリア全体を左寄せ */
}
.cast_box h3 {
    margin: 0 0 12px 0;
    font-family: sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    text-align: center;      /* 見出しのテキストも左寄せ */
    color: rgba(0,0,0,0.8);
}
.cast_box h3 span {
    display: block;
    font-family: serif;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0;
}
.cast_box p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.8;
    color: rgba(0,0,0,0.8);
}

/* --- PC・タブレット表示（768px以上） --- */
@media (min-width: 768px) {
    .cast {
        padding: 10%;
    }
    .cast_box {
        margin-top: 5%;
    }
}
@media (min-width: 1024px) {
    .cast_box li {
        flex-direction: row;  /* 横並びに切替 */
        gap: 50px;            /* 画像とテキストの間の余白 */
    }
    .cast_img {
        width: 320px;        /* 画像エリアの幅を300px固定 */
        flex-shrink: 0;      /* 画面幅が狭まっても300pxを維持 */
    }
    .cast_box h3 {
        text-align: left;
    }
}

/* =========================================
   STAFF
========================================= */
.staff {
    padding: 15%;
    background: #1c1a0f;
}
.staff_title {
    font-family: "Special Elite", cursive;
    font-size: 2rem;
    text-align: center;
    color: rgba(255,255,255,0.6);
}
.staff_box {
    width: 100%;
    margin: 10% auto 0;
}
.staff_box .staff_img {
    max-width: 320px;
    margin: 0 auto;
}
.staff_box .staff_img img {
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.staff_box .staff_img+h3 {
    margin-top: 15px;
}
.staff_box h3 {
    margin: 0;
    font-family: sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    text-align: center;
    color: rgba(255,255,255,1);
}
.staff_box h3 .staff_role {
    display: block;
    font-family: serif;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0;
}
.staff_box h3 .inEnglish {
    display: block;
    font-family: serif;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0;
}

.staff_box p {
    color: rgba(255,255,255,0.7);
    line-height: 1.8;
}

@media (min-width: 768px) {
    .staff {
        padding: 10%;
    }
    .staff_box {
        max-width: 800px;
        margin-top: 5%;
    }
}
@media (min-width: 1024px) {
    .staff_box {
    }
}

/* =========================================
   COMMENT
========================================= */

.comment {
    padding: 15%;
    background: #d0d0d0;
}
.comment_title {
    font-family: "Special Elite", cursive;
    font-size: 2rem;
    text-align: center;
    color: rgba(0,0,0,1);
}
.comment p {
    margin-top: 10%;
    text-align: center;
}

/* =========================================
   FOOTER
========================================= */
.footer {
    padding: 10% 0;
    background: #1c1a0f;
}
.footer_logo {
    width: 40%;
    margin: 0 auto;
}
.footer_publicdate {
    width: 27%;
    margin: 20px auto 0;
}
.footer_billing {
    width: 90%;
    margin: 10px auto 0;
}

@media (min-width: 768px) {
    .footer {
        padding: 7% 0;
    }
    .footer_logo {
        width: 30%;
    }
    .footer_publicdate {
        width: 22%;
    }
    .footer_billing {
        margin-top: 15px;
        width: 80%;
    }
}
@media (min-width: 1024px) {
    .footer {
        padding: 6% 0;
    }
    .footer_logo {
        width: 25%;
    }
    .footer_publicdate {
        width: 17%;
    }
    .footer_billing {
        margin-top: 20px;
        width: 70%;
    }
}

/* --- 無効化メニュー用スタイル --- */
.nav-list li.is-disabled {
  opacity: 0.3;
  pointer-events: none; /* クリック・タップ操作を無効化 */
}

.nav-list li.is-disabled a {
}