@charset "UTF-8";

/* =========================================
   1. Layout & Spacing (PC)
========================================= */
.section__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 120px 40px;
}

.hide-pc {
    display: none !important;
}

.show-sp {
    display: none !important;
}

/* =========================================
   2. Header & Navigation (PC)
========================================= */
.menu-button,
.mobile-menu {
    display: none !important;
}

.header__nav {
    display: flex;
    gap: 40px;
}

.header__nav-link {
    position: relative;
    padding-bottom: 5px;
}

.header__nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.header__nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* =========================================
   3. Introduction (PC)
========================================= */
.intro__hero-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* 中央揃えから上揃えに変更し、自然な並びに */
    gap: 80px;
    margin-bottom: 100px;
}

.intro__hero-visual {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* 写真同士の余白 */
}

/* 重なり（絶対配置）を解除 */
.intro__photo-frame.frame--sub {
    position: static;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* 影を控えめに調整 */
}

.intro__hero-text {
    width: 50%;
}

/* 4枚のコラージュ写真も重なりを解除し、2列のグリッドで綺麗に並べる */
.intro__collage {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    /* 写真同士の余白 */
    margin-top: 100px;
    height: auto;
    /* 高さを自動調整に変更 */
}

.intro__collage-item {
    position: static;
    /* 絶対配置を解除 */
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* 個別の座標指定（top, left等）は不要になるため無効化または削除 */
.collage--1,
.collage--2,
.collage--3,
.collage--4 {
    width: 100%;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
}

/* =========================================
   4. Story (PC)
========================================= */
.story__split-view {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
    margin-top: 80px;
}

.story__visual-column {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* 写真同士の余白 */
}

/* サブ画像の重なり（絶対配置）を解除 */
.story__scene-card.scene--sub {
    position: static;
    width: 100%;
    border: none;
    /* 重ねるための太い枠線を削除 */
}

.story__prose-column {
    width: 50%;
    padding-top: 0;
}

/* =========================================
   5. Cast & Modal (PC)
========================================= */
.cast__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.cast__card-thumb img {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.cast__card:hover .cast__card-thumb img {
    transform: scale(1.08);
}

.cast-modal__dialog {
    width: 800px;
}

/* =========================================
   6. Staff (PC)
========================================= */
.staff__credits-grid {
    gap: 60px;
}

/* =========================================
   7. SNS Hover Effects (PC)
========================================= */
.header__sns-link:hover .header__sns-icon,
.footer__share--list a:hover {
    transform: translateY(-3px);
    color: var(--color-primary);
}

.header__sns-icon {
    transition: transform 0.3s ease, color 0.3s ease;
}