@charset "UTF-8";
/* top.css
映画『存在のすべてを』オフィシャルサイト TOP固有スタイル
（common.cssの後に読み込む。KV・トレーラー・video-modal・feature・cast/staff/original・news-teaser 等） */
/*------------------------------------------------------------*/
/* 本文はゴシック（body）。見出し・人名は明朝を維持する */
.name, .comment-name {
 font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
/* --- アニメーションの基本設定 --- */
/* KV写真：ブラー→1秒でクリア＋ゆっくり縮小（1.2→1.0 / 14s＝従来の1.4倍） */
.kv-photo {
 transform: scale(1.2);
 filter: blur(20px);
 transition: transform 14s cubic-bezier(0.16, 1, 0.3, 1), filter 1s ease-out;
 will-change: transform, filter;
}
.kv-photo.is-active {
 transform: scale(1);
 filter: blur(0);
}
/* メインビジュアル（フルスクリーンKV） */
.main {
 position: relative;
 width: 100%;
 height: 100vh; /* svh非対応ブラウザ用フォールバック */
 height: 100svh;
 /* 最小アスペクト比16:9を維持（縦長でレイアウトが崩れないよう高さを制限） */
 max-height: 56.25vw;
 /* 極端に低い時はこの高さを確保し、縦スクロールで全体を表示 */
 min-height: 660px;
 overflow: hidden;
}
.main .kv, .main .kv picture {
 width: 100%;
 height: 100%;
 display: block;
}
.kv-photo {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
}
/* テキストの可読性確保用スクリム（上部＋全体のわずかな暗がり） */
.main::before {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(to bottom, rgba(1, 1, 1, 0.32) 0%, rgba(1, 1, 1, 0.08) 24%, rgba(1, 1, 1, 0) 46%);
 pointer-events: none;
 z-index: 1;
}
/* テキストの可読性確保用スクリム（下部グラデーション） */
.main::after {
 content: "";
 position: absolute;
 left: 0;
 bottom: 0;
 width: 100%;
 height: 32%;
 background: linear-gradient(to top, rgba(1, 1, 1, 0.5), rgba(1, 1, 1, 0));
 pointer-events: none;
 z-index: 1;
}
/* KV上のテキスト要素（ポスター構図：コピー左／ロゴ右／公開日・ビリング） */
.kv-copy {
 position: absolute;
 inset: 0;
 z-index: 2;
 pointer-events: none;
}
.kv-copy img {
 display: block;
 width: 100%;
 height: auto;
}
/* 縦組要素は高さ基準 */
.kv-catch img, .kv-billing img, .kv-logo img {
 width: auto;
 height: 100%;
}
/* drop-shadow はビリング・公開日・クレジットのみ（ロゴ・キャッチには付けない） */
.kv-billing img, .kv-date img, .kv-credit img {
 filter: drop-shadow(0 1px 10px rgba(1, 1, 1, 0.5));
}
/* KV要素は opacity＋ぼかしでふわっと表示（配置用 transform と競合させない） */
.kv-fade {
 opacity: 0;
 filter: blur(6px);
 transition: opacity 2.8s ease-out, filter 2.8s ease-out;
 will-change: opacity, filter;
}
.kv-fade.is-active {
 opacity: 1;
 filter: blur(0);
}
/* 表示順：ロゴ → キャッチコピー → 公開日・ビリング（transition-delay で制御） */
.kv-logo {
 transition-delay: 0.3s;
}
.kv-catch {
 transition-delay: 1.2s;
}
.kv-billing {
 transition-delay: 1.9s;
}
.kv-date {
 transition-delay: 1.9s;
}
.kv-credit {
 transition-delay: 2.3s;
}
/* PC：logo+billing はセットボックスで比率維持。幅基準＋svhキャップ min(vw,svh) で縦横比が変わっても崩れない */
.kv-set {
 top: min(0.6vw, 1svh);
 right: min(0.4vw, 0.6svh);
 height: min(98%, 95svh);
 width: auto;
 position: absolute;
 display: flex;
 flex-direction: row-reverse;
}
.kv-logo {
 top: 0;
 right: 0;
 height: 100%;
 width: auto;
}
.kv-billing {
 top: 34%;
 height: 60%;
 right: 1.6rem;
 width: auto;
 position: relative;
}
.kv-catch {
 top: min(0.6vw, 1svh);
 left: min(0.4vw, 0.6svh);
 height: min(98%, 95svh);
 position: absolute;
}
.kv-set-bottom {
 left: clamp(130px, 8.2vw, 300px);
 bottom: clamp(20px, 3.6vh, 42px);
 width: clamp(520px, 50vw, 820px);
 position: absolute;
}
.kv-date {
 width: clamp(160px, 20vw, 280px);
}
/* 公開日＋公式X を1行に。下端（＝日付画像下端＝白文字ベースライン）で揃える */
.kv-date-row {
 display: flex;
 align-items: flex-end;
 gap: clamp(16px, 2vw, 26px);
 margin-bottom: 2rem; /* 旧 .kv-date の下余白を行へ移動 */
}
.kv-credit {
 width: 100%;
}
@media screen and (min-width: 769px) {
 .kv-catch, .kv-set {
  min-height: 640px;
 }
}
/* SP：KVは画面高フル。ロゴ/コピー/ビリングは上部 1:1.414 領域内、公開日/クレジットは .main 下部に配置 */
@media screen and (max-width: 768px) {
 .main {
  max-height: none;
  min-height: 0;
 }
 .kv-set {
  inset: 0;
  width: auto;
  top: 2.1vw;
  right: 0.7vw;
  height: 137.9vw;
  max-height: 640px;
 }
 .kv-logo {
  width: auto;
 }
 .kv-billing {
  top: clamp(220px, 20svh, 240px);
  right: 1rem;
  height: 60.5vw;
 }
 .kv-catch {
  top: 2.1vw;
  left: 0.7vw;
  bottom: auto;
  height: 139vw;
  max-height: 640px;
 }
 .kv-set-bottom {
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(14px, 2.2vh, 32px);
  width: min(88vw, 360px);
  position: absolute;
  text-align: center;
 }
 .kv-date {
  width: clamp(150px, 46vw, 230px);
  margin: 0;
 }
 .kv-date-row {
  justify-content: center; /* SPは中央寄せ（旧 margin:auto の代替） */
  margin-bottom: 1rem;
 }
 .kv-credit {
  width: 100%;
 }
}
.article {
 max-width: 940px;
 width: 86%;
 margin: auto;
 overflow: hidden;
}
.article p {
 margin-bottom: 2.18rem;
 margin-bottom: 2.2rem;
 line-height: 2em;
 text-align: justify;
 font-size: clamp(1.5rem, 1.8vw, 1.8rem);
}
.article figure {
 margin: 2.4rem 0;
}
.section {
 padding: 50px 0;
 width: 100%;
 max-width: 100%;
 overflow-x: hidden;
}
.section .title {
 font-weight: 600;
 font-size: clamp(1.8rem, 3vw, 3rem);
 letter-spacing: 0.35em;
 line-height: 1em;
 text-align: center;
 margin-bottom: 4rem;
 color: var(--base-beige);
 margin-left: auto;
 margin-right: auto;
}
.name {
 font-size: clamp(2.4rem, 3.2vw, 3.4rem);
 letter-spacing: 1px;
 line-height: 1.6em;
 white-space: nowrap;
 display: flex;
 justify-content: center;
 align-items: baseline;
}
.name.book {
 margin-bottom: 1rem;
}
.name span {
 display: block;
 line-height: 1.6em;
}
.name .post {
 font-size: .6em;
 margin-right: 12px;
}
.name .sub {
 font-size: clamp(1.2rem, 1.8vw, 1.8rem);
}
.original .original-ph {
 width: 50%;
 max-width: 240px;
}
.original .original-ph img {
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 border: 1px solid rgba(0, 0, 0, 0.1);
}
@media screen and (min-width : 769px) {
 .section {
  padding: 80px 0;
 }
 .original {
  display: flex;
  justify-content: space-between;
 }
 .original .info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
 }
 .original .info .btn-area {
  order: 3;
 }
 .original .original-ph.sp {
  display: none;
 }
 .original .original-ph {
  margin-left: 8%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
 }
}
@media screen and (max-width: 768px) {
 .original .original-ph {
  margin: 3rem auto;
 }
}
/* ------------------------------
	動画
------------------------------ */
.bg_movie {
 position: relative;
 overflow: hidden;
 width: 100%;
 margin: clamp(4rem, 9vw, 8rem) auto;
}
.__movie-wrap {
 width: 90%;
 max-width: 940px;
 margin: auto;
 display: flex;
 justify-content: center;
 align-content: center;
}
.__movie-wrap-inner {
 width: 100%;
 margin: auto;
}
.__movie-wrap-inner iframe {
 display: block;
 width: 100%;
 max-width: 100%;
 height: auto;
 aspect-ratio: 1.77777778;
 -o-object-fit: cover;
 object-fit: cover;
}
.credit {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin: auto;
 gap: 30px;
 max-width: 900px;
 width: 86%;
}
.credit .logo {
 width: 74%;
 max-width: 500px;
}
.credit .roadshow {
 width: 50%;
 max-width: 340px;
}
.credit .billing01 {
 max-width: 400px;
 width: 70%;
 margin: 20px auto;
}
/* KV：公開日(kv-date)横。日付高さを超えない白抜き正円、下端でベースラインを揃える。
   .kv-copy が pointer-events:none のため auto を明示。演出は animation で行い、
   .sns-x のhover用 transition と競合させない */
.sns-x.kv-sns {
 pointer-events: auto;
 width: auto;
 height: clamp(28px, 3vw, 46px); /* kv-date 高さ(約23〜41px)を常に下回る */
 aspect-ratio: 1 / 1;
 flex: 0 0 auto;
 color: #fff;
 border-color: rgba(255, 255, 255, 0.7);
 opacity: 0;
 position: relative;
 bottom: -2.5px;
}
.sns-x.kv-sns svg {
 width: 52%;
 height: 52%;
 filter: drop-shadow(0 1px 10px rgba(1, 1, 1, 0.5)); /* 日付画像と同じ影 */
}
.sns-x.kv-sns.is-active {
 opacity: 1;
 animation: kvSnsIn 2.8s ease-out 1.9s backwards; /* kv-date と同じタイミングで出現 */
}
@keyframes kvSnsIn {
 from { opacity: 0; filter: blur(6px); }
 to   { opacity: 1; filter: blur(0); }
}
.scroll-trigger {
 position: absolute;
 top: 300px;
 left: 0;
 width: 1px;
 height: 1px;
 pointer-events: none;
 visibility: hidden;
}
/* ------------------------------
	レスポンシブ
------------------------------ */
.sp {
 display: none;
}
@media screen and (max-width: 768px) {
 .sp {
  display: block;
 }
 .pc {
  visibility: hidden;
  display: none;
 }
}
/* ------------------------------
	Video Modal
------------------------------ */
.video-modal {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.9);
 -webkit-backdrop-filter: blur(14px);
 backdrop-filter: blur(14px);
 z-index: 10000;
 opacity: 0;
 visibility: hidden;
 overflow-y: auto;
 transition: opacity 0.8s ease, visibility 0.8s;
 display: flex;
 justify-content: center;
 align-items: flex-start;
}
.video-modal.is-active {
 opacity: 1;
 visibility: visible;
}
.video-modal-content {
 width: 90%;
 max-width: 1000px;
 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: clamp(12px, 2vh, 20px);
 /* 縦幅が狭いときは中央寄せをやめてスクロールできるように */
 margin: auto;
 padding: clamp(44px, 8vh, 72px) 0;
}
.video-modal-frame {
 width: 100%;
 position: relative;
 aspect-ratio: 16 / 9;
}
.video-modal-frame #player {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
/* 予告 / 特報 切替タブ（動画下・ブロックボタン／2列グリッド） */
.video-tabs {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 6px;
 width: 100%;
}
.video-tab {
 width: 100%;
 font-family: "Noto Serif JP", serif;
 font-weight: 600;
 font-size: clamp(1.5rem, 1.5vw, 2rem);
 letter-spacing: 0.12em;
 color: var(--base-white);
 background: var(--base-bluegray);
 border: 0;
 border-radius: 2px;
 padding: 0.5em 1em;
 cursor: pointer;
 transition: background 0.3s ease;
 text-align: center;
}
.video-tab:hover {
 background: #7d8a95;
}
.video-tab.is-active {
 background: var(--base-beige);
 color: var(--base-white);
}
/* トレーラー部のタブは動画幅に合わせて中央寄せ */
.trailer-tabs {
 width: 90%;
 max-width: 940px;
 margin: 12px auto 0;
}
.video-modal-close {
 position: fixed;
 top: clamp(14px, 2.5vh, 28px);
 right: clamp(14px, 2.5vw, 30px);
 z-index: 10001;
 background: none;
 border: none;
 color: #010101;
 cursor: pointer;
 line-height: 1;
 transition: opacity 0.3s, transform 0.3s;
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 0;
}
.video-modal-close:hover {
 opacity: 0.7;
 transform: scale(1.1);
}
.video-modal-close svg {
 width: 42px;
 height: 42px;
 fill: #fff;
}
@media screen and (max-width: 768px) {
 .video-modal-close svg {
  width: 34px;
  height: 34px;
 }
}
/* ------------------------------
	Trailer Area Trigger
------------------------------ */
.trailer-inner {
 position: relative;
}
/* ============================================================
	Feature（Introduction + Story ／ bg.eps 全画面パララックス背景）
============================================================ */
.feature {
 position: relative;
 overflow: hidden;
 isolation: isolate;
}
/* パララックス背景レイヤー（上下に余白を持たせ、translateで動かしても隙間が出ないようにする） */
.feature-bg {
 position: absolute;
 left: 0;
 top: -11%;
 width: 100%;
 height: 124%;
 z-index: -2;
 will-change: transform;
 pointer-events: none;
}
.feature-bg picture,
.feature-bg img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center 55%;
 display: block;
}
/* スクリム：上下（テキスト帯）は暗く、中央（人物＝母子）は明るく抜く */
.feature::before {
 content: "";
 position: absolute;
 inset: 0;
 z-index: -1;
 background: linear-gradient(to bottom, rgba(1, 1, 1, 0.6) 0%, rgba(1, 1, 1, 0.5) 30%, rgba(1, 1, 1, 0.12) 46%, rgba(1, 1, 1, 0.12) 66%, rgba(1, 1, 1, 0.52) 82%, rgba(1, 1, 1, 0.62) 100%);
 pointer-events: none;
}
/* 人物（母子）を見せるための、テキストを置かない中央の余白帯 */
.feature-gap {
 min-height: clamp(200px, 34vh, 400px);
}
.feature-section .title {
 color: var(--base-white);
}
.feature-inner {
 max-width: 940px;
 width: 86%;
 margin: 0 auto;
 color: var(--base-white);
}
.feature-inner p {
 margin-bottom: 1.8rem;
 line-height: 2.2em;
 text-align: justify;
 font-size: clamp(1.45rem, 1.6vw, 1.6rem);
 text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.feature-inner p:last-child {
 margin-bottom: 0;
}
.feature-inner .feature-lead {
 font-size: clamp(1.7rem, 2.4vw, 2.4rem);
 line-height: 1.9em;
 text-align: center;
 margin-bottom: 2.6rem;
}
/* STORY：キャッチコピー画像（前代未聞の二児同時誘拐事件…） */
.feature-inner .feature-catch {
 max-width: 800px;
 width: 100%;
 margin: 0 auto clamp(2rem, 3vw, 3rem);
}
.feature-catch img {
 filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.55));
}
/* INTRODUCTION：受賞歴バッジ */
.feature-award {
 max-width: 720px;
 width: 100%;
 margin: 3.6rem auto 0;
}
.feature-award img {
 filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.5));
}
@media screen and (max-width: 768px) {
 .feature-inner .feature-lead {
  text-align: justify;
 }
 .feature-catch {
  margin-bottom: 2.4rem;
 }
}
/* ============================================================
	Cast Comment（写真＋名前＋コメント／PC2列・SP1列アコーディオン）
============================================================ */
.comment-list {
 max-width: 1080px;
 width: 90%;
 margin: 0 auto;
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 column-gap: clamp(28px, 4vw, 56px);
 row-gap: clamp(40px, 5vw, 76px);
 align-items: start;
}
.comment-box {
 display: flex;
 flex-direction: column;
}
/* 主演2名は大きく（フル幅・中央寄せ） */
.comment-box.lead {
 max-width: 840px;
 width: 100%;
 margin-inline: auto;
}
.comment-photo {
 width: 60%;
}
.comment-box.lead .comment-photo {
 width: 100%;
}
.comment-photo img {
 width: 100%;
 aspect-ratio: 3 / 2;
 object-fit: cover;
 border-radius: 2px;
 box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);
}
.comment-name {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 font-size: clamp(2.4rem, 2.4vw, 2.6rem);
 line-height: 1.5em;
 letter-spacing: 1px;
 margin-top: 1.4rem;
}
.comment-box.lead .comment-name {
 font-size: clamp(2.8rem, 3.2vw, 3.4rem);
}
.comment-slash {
 margin: 0 0.25em;
 color: var(--base-bluegray);
}
.comment-role {
 position: relative;
 display: inline-block;
 font-size: 0.7em;
}
.comment-rt {
 position: absolute;
 left: 50%;
 bottom: 75%;
 transform: translateX(-50%);
 margin-bottom: 0.35em;
 font-size: 0.5em;
 font-weight: 400;
 letter-spacing: 0.12em;
 line-height: 1;
 white-space: nowrap;
 color: var(--base-darkgray);
}
.comment-yaku {
 font-size: 0.58em;
 margin-left: 0.5em;
 color: var(--base-darkgray);
}
.comment-text {
 margin-top: 1.1rem;
}
/* PCサイト Comment 表示
@media screen and (min-width: 769px) {
 .comment-text {
  margin-top: 0;
 }
 .comment-text::before {
  content: "Comment";
  font-family: "Noto Serif JP", serif;
  font-size: 1.3rem;
  letter-spacing: 0.16em;
  line-height: 1em;
 }
}
*/
.comment-text p {
 font-size: clamp(1.45rem, 1.5vw, 1.5rem);
 line-height: 2em;
 text-align: justify;
 margin-bottom: 0;
}
.comment-text p:last-child {
 margin-bottom: 0;
}
/* Commentトグルは PC では非表示（コメント常時表示） */
.comment-toggle {
 display: none;
}
/* SP：1列＋コメントをアコーディオン（初期非表示） */
@media screen and (max-width: 768px) {
 .comment-list {
  grid-template-columns: 1fr;
  row-gap: 46px;
 }
 .comment-box.lead {
  max-width: none;
 }
 .comment-name {
  justify-content: center;
  text-align: center;
  margin-top: 1.3rem;
 }
 .comment-photo {
  width: 76%;
  margin: auto;
 }
 .comment-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60%;
  gap: 0.7em;
  margin: 1.2rem auto 0;
  padding: 0.4em 1em;
  border: none;
  border-top: 1px solid rgba(74, 70, 66, 0.35);
  border-bottom: 1px solid rgba(74, 70, 66, 0.35);
  background: transparent;
  color: var(--base-black);
  font-size: 1.3rem;
  letter-spacing: 0.16em;
  cursor: pointer;
 }
 .comment-toggle::after {
  content: "";
  width: 6px;
  height:6px;
  border-right: 1.5px solid var(--base-beige);
  border-bottom: 1.5px solid var(--base-beige);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.35s ease;
  margin-top: 2px;
 }
 .comment-box.is-open .comment-toggle::after {
  transform: translateY(1px) rotate(-135deg);
 }
 .comment-text {
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.45s ease;
 }
 .comment-box.is-open .comment-text {
  margin-top: 1.1rem;
 }
}
/* ============================================================
	STAFF・ORIGINAL：フォントサイズを CAST に統一
	（人名 .name は .comment-name と同サイズ／本文は .comment-text と同サイズ）
============================================================ */
.original p {
 font-size: clamp(1.4rem, 1.5vw, 1.6rem);
}
/* STAFF：監督コメント（CASTのcomment機構を写真なしで再利用。
   .lead は使わず幅指定の競合を回避） */
.staff-comment {
 width: 90%;
 max-width: 780px;
 margin: clamp(2rem, 3vw, 3rem) auto 0;
}
/* ============================================================
	NEWS（TOP誘導枠／一覧／詳細／ページネーション／NEWS用ヘッダー）
============================================================ */
/* --- TOP：NEWS誘導枠（.main と #trailer の間）：PCは左タイトル・右一覧の2カラム --- */
.news-teaser {
 padding-top: clamp(3rem, 6vw, 6rem);
 padding-bottom: 0;
 max-width: 940px;
 width: 90%;
 margin: 0 auto;
 display: flex;
 align-items: flex-start;
 gap: clamp(24px, 4vw, 30px);
}
.news-teaser .title {
 flex: 0 0 auto;
 width: auto;
 min-width: 160px;
 margin: 0;
 text-align: left;
}
.news-teaser-body {
 flex: 1;
 min-width: 0;
}
.news-list {
 max-width: none;
 width: 100%;
 margin: 0;
 border-top: 1px solid rgba(74, 70, 66, 0.2);
}
.news-item {
 border-bottom: 1px solid rgba(74, 70, 66, 0.2);
}
.news-item a {
 display: flex;
 align-items: baseline;
 gap: clamp(16px, 2.4vw, 32px);
 padding: 1.4em 0.4em;
 width: 100%;
}
.news-item a:hover {
 opacity: 0.6;
}
.news-date {
 flex: 0 0 auto;
 font-size: clamp(1.3rem, 1.4vw, 1.5rem);
 letter-spacing: 0.06em;
 color: var(--base-bluegray);
}
.news-title {
 display: block;
 font-size: clamp(1.4rem, 1.5vw, 1.6rem);
 line-height: 1.7em;
}
@media screen and (max-width: 768px) {
 .news-teaser {
  flex-direction: column;
  gap: 0;
 }
 .news-teaser .title {
  width: auto;
  min-width: 0;
  text-align: center;
  margin: clamp(2.4rem, 6vw, 3rem) auto;
 }
 .news-item a {
  flex-direction: column;
  gap: 0;
  padding: 0.8em 0.4em 1em;
 }
 .news-more {
  justify-content: center;
  margin-bottom: clamp(2.4rem, 6vw, 3rem);
 }
}