@charset "UTF-8";
/* ©SCHNEID
映画『存在のすべてを』 オフィシャルサイト
Kazumi Nishibayashi */
/*------------------------------------------------------------*/
.en {
 font-family: "EB Garamond", serif;
 font-optical-sizing: auto;
 font-weight: 400;
 font-style: normal;
 letter-spacing: .5px;
}
:root {
 --base-black: #333;
 --base-white: #fdf9ee;
 --base-gray: #e9e4e1;
 --base-darkgray: #4a4642;
 --base-black: #010101;
 --base-beige: rgba(198, 172, 118, 1);
 --echo-black: rgba(198, 172, 118, .4);
}
/*------------------------------------------------------------
	Reset
------------------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, nav, section, time, mark, audio, video {
 font-size: 1em;
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 background: transparent;
 vertical-align: bottom;
}
* {
 box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
 display: block;
}
html {
 font-size: 62.5%;
 scroll-padding-top: 30px;
 scroll-behavior: smooth;
 overflow-x: hidden;
}
body, table, input, textarea, select, option, h1, h2, h3, h4, h5, h6, p {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 margin: 0;
 padding: 0;
}
h1, h2, h3, h4, h5, h6 {
 font-weight: 600;
 font-feature-settings: "palt"1;
 letter-spacing: 1px;
}
table, input, textarea, select, option {
 line-height: 1.1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
:focus {
 outline: 0;
}
ins {
 text-decoration: none;
}
del {
 text-decoration: line-through;
}
hr {
 height: 0;
 margin: 0;
 padding: 0;
 border: 0;
}
a {
 color: inherit;
 text-decoration: none;
 -webkit-transition: all 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
 transition: all 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
 display: inline-block;
}
a:hover {
 cursor: pointer;
 -webkit-transition: all 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
 transition: all 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
img {
 max-width: 100%;
 width: 100%;
 height: auto;
 vertical-align: bottom;
 display: block;
}
figure, img {
 pointer-events: none;
}
/*------------------------------------------------------------
	layout
------------------------------------------------------------*/
body {
 font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
 font-size: 1.6rem;
 line-height: 2em;
 background-color: var(--base-white);
 color: var(--base-black);
 font-style: inherit;
 font-weight: 500;
 -ms-text-size-adjust: 100%;
 -webkit-text-size-adjust: 100%;
 text-rendering: geometricPrecision;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 -webkit-tap-highlight-color: transparent;
}
html.fixed, body.fixed {
 overflow: hidden;
 height: 100%;
}
b, strong, .bold {
 font-weight: 700;
}
/* Loading */
.loading {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background: linear-gradient(45deg, #fff, #333333);
 background-size: 400% 400%;
 animation: gradientBG 10s ease infinite;
 display: flex;
 justify-content: center;
 align-items: center;
 overflow: hidden;
 transition: transform 1.2s cubic-bezier(0.85, 0, 0.15, 1), opacity 0.8s ease;
}
/* 背景グラデーションが動くアニメーション */
@keyframes gradientBG {
 0% {
  background-position: 0% 50%;
 }
 50% {
  background-position: 100% 50%;
 }
 100% {
  background-position: 0% 50%;
 }
}
.loading-inner {
 opacity: 0;
 animation: fadeInText 1.5s forwards;
 width: 50%;
 max-width: 340px;
 display: block;
 margin: auto;
 position: relative;
 z-index: 10;
}
@keyframes fadeInText {
 to {
  opacity: 1;
 }
}
/* --- アニメーションの基本設定 --- */
/* メイン画像（ズームアウト） */
.kv-inner {
 overflow: hidden;
}
.kv-inner img.shrink {
 transform: scale(1.2);
 transition: transform 10s cubic-bezier(0.25, 1, 0.5, 1);
}
.kv-inner img.shrink.is-active {
 transform: scale(1);
}
/* ロゴ・ロードショー・ヘッダー（フェードアップ） */
.fade-in-up {
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 1.2s ease, transform 1.2s ease;
}
.fade-in-up.is-active {
 opacity: 1;
 transform: translateY(0);
}
.blur-in {
 opacity: 0;
 /* 15pxのブラー ＋ わずかな拡大（1.05倍に調整） */
 filter: blur(15px);
 transition: opacity 1.8s cubic-bezier(0.33, 1, 0.68, 1), filter 2.2s cubic-bezier(0.16, 1, 0.3, 1), transform 2.5s cubic-bezier(0.16, 1, 0.3, 1);
 will-change: opacity, filter, transform;
}
.blur-in.is-active {
 opacity: 1;
 filter: blur(0);
 transform: scale(1);
}
/* ディレイ設定 */
.delay-1s {
 transition-delay: 0.3s;
}
.delay-2s {
 transition-delay: 0.6s;
}
/*-- //アニメーション --*/
/* SNS */
.sns-area {
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 1.2rem;
 margin: 0 auto 30px;
}
.sns-area li a {
 overflow: hidden;
 width: 40px;
 aspect-ratio: 1;
 background-color: #fff;
 border-radius: 50%;
 transition: transform .3s ease-out, box-shadow .3s ease-out;
 display: flex;
 justify-content: center;
 align-items: center;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.sns-area li a img {
 display: block;
 width: 80%;
}
.sns-area li a:hover {
 transform: scale(1.1);
}
@media screen and (min-width : 1024px) {
 .sns-area {
  margin-top: 10px;
 }
 .sns-area li a {
  width: 50px;
 }
}
/* ------------------------------
	コンテンツ
------------------------------ */
#container {
 width: 100%;
 min-height: 100%;
 padding: 0;
 margin: 0 auto;
 position: relative;
 z-index: 1;
}
#container::before {
 content: "";
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 background: linear-gradient(45deg, #fff, #eee);
 background-size: 400% 400%;
 animation: gradientBG 10s ease infinite;
 opacity: 0;
 transition: opacity 1.2s ease;
 pointer-events: none;
}
#container.is-darken::before {
 opacity: 1;
}
#container::after {
 position: fixed;
 content: "";
 background-image: url("../images/bg.jpg");
 background-image: -webkit-image-set(url("../images/bg.webp") 1x, url("../images/bg.jpg") 1x);
 background-image: image-set(url("../images/bg.webp") type("image/webp"), url("../images/bg.jpg") type("image/jpeg"));
 background-size: 50% auto;
 top: 0;
 left: 0;
 width: 100%;
 min-height: 100%;
 height: 100vh;
 z-index: -2;
}
.main {
 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 20px;
 margin: auto;
}
.main .kv {
 max-width: 1000px;
 width: 100%;
 overflow: hidden;
 margin: auto;
 display: flex;
}
.main .kv-inner {
 width: 50%;
 overflow: hidden;
 flex-shrink: 0;
}
.kv-inner img {
 aspect-ratio: 5 / 6.4;
 width: 100%;
 object-fit: cover;
 will-change: transform;
}
.main .logo {
 width: 80%;
 max-width: 600px;
}
.main .roadshow {
 width: 60%;
 max-width: 380px;
}
/* 影をつける要素の基本設定（既存CSSに追記/修正） */
.main .logo, .main .roadshow {
 /* 初期状態でフェードインアニメーションをかけている想定 */
 opacity: 0;
 transition: opacity 1.5s ease, transform 1.5s ease;
 will-change: transform, filter, letter-spacing;
}
/* フェードイン完了時（既存のJSで付与されている想定） */
.main .logo.is-active, .main .roadshow.is-active {
 opacity: 1;
}
/* --- 滲む影を右下20pxに表示する演出 --- */
.main .logo.is-active.has-echo, .main .roadshow.is-active.has-echo {
 /* drop-shadow(X軸のズレ Y軸のズレ 滲み(ブラー) 影の色)
    右に10px、下に15pxずらし、4px滲ませる
  */
 filter: drop-shadow(10px 15px 4px var(--echo-black));
 letter-spacing: 0.15em;
 /* アニメーション：4秒かけてゆっくりと影を宿す */
 transition: filter 4s cubic-bezier(0.25, 0.46, 0.45, 0.94), letter-spacing 4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* 公開日は少しディレイさせて影を付ける */
.main .roadshow.is-active.has-echo {
 transition-delay: 0.5s;
}
@media screen and (max-width: 768px) {
 .main .logo.is-active.has-echo, .main .roadshow.is-active.has-echo {
  filter: drop-shadow(8px 8px 3px var(--echo-black));
 }
}
.article {
 max-width: 840px;
 width: 86%;
 margin: auto;
 overflow: hidden;
}
.mh50 {
 margin-bottom: 60px;
}
.article.arranged {
 display: flex;
 gap: 8vw;
 justify-content: center;
 width: 100%;
}
.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);
}
#intro .article p {
 font-size: clamp(1.5rem, 2vw, 2rem);
}
.article figure {
 margin: 2.4rem 0;
}
.section {
 padding: 50px 0;
 width: 100%;
 max-width: 100%;
 overflow-x: hidden;
}
.section .title {
 font-size: clamp(4rem, 6vw, 6rem);
 line-height: 1em;
 text-align: center;
 margin-bottom: 3rem;
 color: var(--base-beige);
 margin-left: auto;
 margin-right: auto;
}
.section .subtitle {
 font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
 font-feature-settings: "palt"1;
 display: block;
 text-align: center;
 margin-top: 2rem;
 font-variant-east-asian: proportional-alternate;
 font-size: clamp(1.8rem, 3vw, 4rem);
 margin-bottom: 1.8rem;
 line-height: 1.4em;
 white-space: nowrap;
}
.article p.txt-center {
 text-align: center;
}
.name {
 font-size: clamp(3.6rem, 4vw, 5rem);
 letter-spacing: 1px;
 line-height: 1.6em;
 white-space: nowrap;
 display: flex;
 justify-content: center;
 align-items: baseline;
}
.name span {
 display: block;
 line-height: 1.6em;
}
.name .yaku {
 font-size: .7em;
}
.name .yaku::before {
 content: "as";
 font-family: "EB Garamond", serif;
 font-optical-sizing: auto;
 font-weight: 400;
 font-style: normal;
 letter-spacing: .5px;
 color: var(--base-beige);
 display: inline-block;
 margin-right: 5px;
 font-size: .9em;
}
.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 : 1000px) {
 .main {
  padding-top: 30px;
 }
 .main .kv-inner img {
  aspect-ratio: 1;
 }
}
@media screen and (min-width : 769px) {
 .main .logo {
  margin: 5px auto 10px;
 }
 .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%;
}
.bg_movie .trailer-area {
 display: block;
 height: 100%;
}
.btn-play {
 position: absolute;
 z-index: 1;
 width: 100%;
 height: 100%;
 justify-content: center;
 align-items: center;
}
.__movie-wrap {
 width: 90%;
 max-width: 840px;
 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;
}
@media screen and (min-width : 769px) {
 .bg_movie {
  padding: 0 0 70px;
 }
}
/* ------------------------------
	フッター
------------------------------ */
.footer {
 width: 100%;
 /*padding: 80px 0 30px;*/
 padding: 30px 0;
}
.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;
}
.copyright {
 text-align: center;
 color: var(--base-darkgray);
 font-size: clamp(1.1rem, 1.2vw, 1.3rem);
}
@media screen and (max-width: 768px) {
 .footer {}
}
.scroll-trigger {
 position: absolute;
 top: 300px;
 left: 0;
 width: 1px;
 height: 1px;
 pointer-events: none;
 visibility: hidden;
}
/* ------------------------------------------------------------
    Navigation (Header) - PC/SP共通
------------------------------------------------------------ */
#header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1000;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transition: opacity 0.4s ease, visibility 0.4s;
}
/* スクロール後に表示される状態 */
#header.is-visible {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
}
.menu-item a {
 display: flex;
 font-size: 2.4rem;
 justify-content: center;
}
.menu.sns svg {
 width: 22px;
}
.menu.sns {
 display: flex;
 gap: 20px;
}
/* ------------------------------------------------------------
    MOBILE (ハンバーガーメニュー)
------------------------------------------------------------ */
@media screen and (max-width: 768px) {
 .nav-button {
  z-index: 1010;
  position: fixed;
  left: 0;
  top: 0;
  width: 80px;
  height: 63px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: var(--base-beige);
 }
 .nav-button::after {
  content: "Menu";
  font-family: "EB Garamond", serif;
  line-height: 1em;
  color: var(--base-white);
  position: absolute;
  bottom: 12px;
  left: 20%;
 }
 .nav-button.active::after {
  content: "";
 }
 .btn-menu__icon {
  position: relative;
  display: block;
  width: 60%;
 }
 .btn-menu__icon:before, .btn-menu__icon:after {
  position: absolute;
  top: 50%;
  display: block;
  width: 100%;
  height: 1.5px;
  content: "";
  background: var(--base-white);
  transition: .2s ease transform, .2s ease translate;
 }
 .btn-menu__icon:before {
  translate: 0 -13px;
 }
 .btn-menu__icon:after {
  translate: 0 -3px;
 }
 .nav-button.active .btn-menu__icon {
  background: transparent
 }
 .nav-button.active .btn-menu__icon:before {
  transform: rotate(135deg);
  translate: 0 0
 }
 .nav-button.active .btn-menu__icon:after {
  transform: rotate(225deg);
  translate: 0 0;
 }
 .nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  background: rgba(30, 30, 30, 0);
  transition: opacity 0.6s ease, background 0.6s ease, backdrop-filter 0.6s ease, visibility 0.6s;
  pointer-events: none;
  display: block;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 }
 .nav-wrap.open {
  opacity: 1;
  visibility: visible;
  background: rgba(30, 30, 30, 0.6);
  backdrop-filter: blur(8px);
  pointer-events: auto;
 }
 .nav-wrap-content {
  position: relative;
  width: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: width 0.6s cubic-bezier(0.85, 0, 0.15, 1);
  box-shadow: 10px 0 20px rgba(0, 0, 0, 0.1);
 }
 .nav-wrap.open .nav-wrap-content {
  width: 85%;
 }
 .menu.en {
  flex-direction: column;
  align-items: center;
 }
 .menu-item {
  opacity: 0;
  transform: translateY(20px);
  margin: 2vh 0;
  transition: 0.6s;
  text-align: center;
 }
 .menu-item.active {
  opacity: 1;
  transform: translateY(0);
 }
}
/* ------------------------------------------------------------
    PC (横並びメニュー)
------------------------------------------------------------ */
@media screen and (min-width: 769px) {
 /* PCではハンバーガーボタンを隠す */
 .nav-button {
  display: none !important;
 }
 .nav-wrap {
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  padding: 15px 0;
 }
 .nav-wrap .nav-wrap-content {
  display: flex;
  justify-content: center;
  align-items: center;
 }
 .menu.en {
  display: flex;
  flex-direction: row; /* 横並び */
  gap: 40px; /* メニュー間の余白 */
 }
 .menu-item {
  opacity: 1 !important; /* PCは常に表示 */
  transform: none !important;
 }
 .menu-item a:hover {
  color: var(--base-beige);
 }
 .menu.sns {
  margin-left: 50px;
 }
}
/* ------------------------------
	レスポンシブ
------------------------------ */
.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.95);
 z-index: 10000;
 opacity: 0;
 visibility: hidden;
 overflow: hidden;
 transition: opacity 0.8s ease, visibility 0.8s;
 display: flex;
 justify-content: center;
 align-items: center;
}
.video-modal.is-active {
 opacity: 1;
 visibility: visible;
}
.video-modal-content {
 width: 100%;
 max-width: 1000px;
 position: relative;
 aspect-ratio: 16 / 9;
}
.video-modal-content #player {
 width: 100% !important;
 height: 100% !important;
}
.video-modal-close {
 position: absolute;
 top: -60px;
 right: 0;
 background: none;
 border: none;
 color: #fff;
 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: 48px;
 height: 48px;
 filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
@media screen and (max-width: 1024px) {
 .video-modal-close {
  top: -55px;
 }
 .video-modal-close svg {
  width: 40px;
  height: 40px;
 }
}
@media screen and (max-width: 768px) {
 .video-modal-close {
  top: -45px;
  right: 12px;
 }
 .video-modal-close svg {
  width: 34px;
  height: 34px;
 }
}
/* ------------------------------
	Trailer Area Trigger
------------------------------ */
.trailer-inner {
 position: relative;
 cursor: pointer;
}
.trailer-inner::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 10;
}