/* ==========================================================================
   Base & Variables
   ========================================================================== */
:root {
  --side-space: 40px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: #000;
  color: white;
  font-family: 'Inter', 'Shippori Mincho', serif;
  -webkit-font-smoothing: antialiased;
  min-width: 850px;
}

.header--overlay,
.hero__news,
.section-label,
.movie-text h3,
.movie-year,
.movie-director,
.cd-title,
.cd-artist,
.movie-details summary {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
}

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--side-space);
}

/* ==========================================================================
   Header (Overlay)
   ========================================================================== */
.header--overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 850px;
  height: 80px;
  z-index: 1000;
  
}

.header__inner {
  padding: 30px var(--side-space);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__brand {
  display: flex;
  align-items: center;
  padding: 10px 0; /* 上下にゆとりを持たせる */
  margin-left: -5px;
  cursor: pointer;
  gap: 16px;
}

.header__title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 5px 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: #fff;
display: inline-block;

line-height: 1;
  vertical-align: middle;
}

.header__title a {
  text-decoration: none !important;
  color: #fff !important;
  display: block;
  
}





.header__title img {
  display: block;
  transform: translateY(2px);
}

.header__logo img {
  width: 40px;
  height: auto;
}

.nav__list {
  display: flex;
  gap: 50px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  font-family: 'Inter', sans-serif;
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-weight: 700;
  transition: opacity 0.4s ease;

}

.nav a:hover {
  opacity: 0.5;
}



/* PCではチェックボックスとハンバーガーを隠す */
.nav-check, 
.hamburger {
  display: none;
}

/* ヘッダーの横並びを確定させる */
.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}






/* ==========================================================================
   Top Page Hero Slider
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  filter: brightness(0.8) ;

  animation: cinematicFade 50s linear infinite;


}

.slide1 { background-image: url("../img/hero1.jpg"); animation-delay: 0s; }
.slide2 { background-image: url("../img/hero6.jpg"); animation-delay: 10s; }
.slide3 { background-image: url("../img/hero3.jpg"); animation-delay: 20s; }
.slide4 { background-image: url("../img/hero2.jpg"); animation-delay: 30s; }
.slide5 { background-image: url("../img/hero4.jpg"); animation-delay: 40s; }

@keyframes cinematicFade {
  /* 0%: 開始と同時に一定のスピードで拡大を開始 */
  0% { 
    opacity: 0; 
    transform: scale(1.0); 
  }
  
  /* 5%: フェードイン完了時、既に拡大は進行している（約1.04倍） */
  5% { 
    opacity: 1; 
  }
  
  /* 20%: フェードアウト開始時も、同じスピードで拡大中（約1.16倍） */
  20% { 
    opacity: 1; 
  }
  
  /* 25%: 完全に消えるその瞬間まで拡大を続ける */
  25% { 
    opacity: 0; 
    transform: scale(1.2); /* ★ 1.15から少し上げて、動きをより強調 */
  }

  /* 25%〜100%: 見えないところで、ゆっくり次の出番(1.0)に向けて戻る */
  100% { 
    opacity: 0; 
    transform: scale(1.0); 
  }
}




/* ==========================================================================
   Top Page News Section (Horizontal Mask Slide & Hover Fixed)
   ========================================================================== */
.hero__news {
  position: absolute;
  top: 200px;
  left: var(--side-space);
  right: var(--side-space); /* ★ 右側の限界を設定し、突き抜けを防ぐ */
  max-width: 650px;         /* ★ 文字が長すぎてもこの幅で折り返す */
  color: white;
  z-index: 5;
}

/* ニュースタイトル */
.hero__news-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.3em;
  padding-bottom: 25px;
  overflow: hidden;   
  display: block;
}

.hero__news-title span {
display: inline-block;
  transform: translateX(-105%);
  /* スライド後に点滅が始まる設定 */
  animation: 
    newsMaskSlide 1.8s cubic-bezier(0.1, 1, 0.2, 1) forwards,
    newsFlicker 6s infinite 2.3s;

}


.news-blink {
  font-weight: 700 !important;
  /* ニュースが横からスライドして登場する時間（約1.5秒）を待ってから点滅を開始させます */
  animation: newsHighlightBlink 3s ease-in-out infinite 1.5s;
}

/* ホタルの光のようにスッと暗くなり、ほんのり光を帯びるパルスアニメーション */
@keyframes newsHighlightBlink {
  0%, 100% {
    opacity: 1;
    /* 明るい時は文字の周りにごく薄い白の光（グロウ）をまとわせます */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6); 
  }
  50% {
    opacity: 0.3; /* スッと背景に溶け込むように暗くします */
    text-shadow: none;
  }
}




.hero__news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各ニュース行 */
.hero__news-list li {
  overflow: hidden;   
  margin-bottom: 0px;   
}

/* ニュースリンク本体 */
.hero__news-list a {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;                
  letter-spacing: 0.08em;
  display: inline-flex;
  gap: 0px;
  align-items: flex-start; /* ★ 複数行対応のため上揃えに変更 */
  text-decoration: none;
  color: white;
  padding-bottom: 2px;
  transform: translateX(-105%);
  animation: newsMaskSlide 1.8s cubic-bezier(0.1, 1, 0.2, 1) forwards;
  position: relative;

}


.news-date {
  font-variant-numeric: tabular-nums;
  width: 75px; 
  display: inline-block;            
  color: rgba(255, 255, 255, 0.7); 
 flex-shrink: 0;
 color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.02em;
}

.hero__news-list a span:not(.news-date) {
  white-space: normal; /* ★ PC版でも折り返しを許可する */
  /* ★ 追加：日本語の単語途中での不自然な改行を防ぎます */
  word-break: keep-all !important; 
  /* ★ 追加：URLなどの長い英単語は枠外に突き抜けずに折り返します */
  overflow-wrap: anywhere !important;
  line-height: 1.6;    /* ★ 行間をゆったり取る */
  text-decoration: underline;
  text-decoration-color: transparent; /* 最初は透明にしておく */
  text-underline-offset: 4px;         /* 文字と線の隙間 */
  transition: text-decoration-color 0.4s ease;
}

.hero__news-list a:hover span:not(.news-date) {
  text-decoration-color: #fff; /* ホバーで線を白く浮かび上がらせる */
}


/* 遅延の設定 */
.hero__news-list li:nth-child(1) a { animation-delay: 0.8s; }
.hero__news-list li:nth-child(2) a { animation-delay: 1.1s; }
.hero__news-list li:nth-child(3) a { animation-delay: 1.4s; }

/* 復活！ホバー時の下線 */
.hero__news-list a::after {
  display: none !important;
}

.hero__news-list a:hover::after {
  width: 100%;
}

/* ★ アニメーション定義（X軸=横方向へ戻る） */
@keyframes newsMaskSlide {
  to {
    transform: translateX(0);
  }
}



/* NEWSアーカイブ：長尺記事用の装飾 */

.news-list-container {
  max-width: 750px; /* 他のページより少し広めに取って、ゆとりを出します */
  margin: 0 auto;
}

.news-entry {
  padding: 80px 0;   /* 記事ごとの区切りを贅沢に取り、混ざらないようにします */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  scroll-margin-top: 120px; /* ジャンプ時のヘッダー被り防止 */
}

.news-entry:last-child {
  border-bottom: none;
}

.news-header {
  margin-bottom: 35px;
}

.news-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 20px;   /* タイトルは少し大きめに、存在感を出します */
  font-weight: 600;
  line-height: 1.6;
  color: #fff;
}



/* ==========================================================================
   汎用 NEWSページ（news.html）の画像設定
   ========================================================================== */
.news-image-wrap {
  margin-bottom: 40px;
  text-align: center; /* 写真を中央に配置 */
}

.news-image-wrap img {
  width: 80%; 
  max-width: 500px; 
  height: auto;
  margin: 0 auto;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.1); 
  filter: brightness(0.9);
  transition: transform 0.6s ease;
}

.news-entry:hover .news-image-wrap img {
  transform: scale(1.02);
  filter: brightness(1.0);
}

/* ==========================================================================
   ビール専用 NEWSページ（news_beer.html）の横スライダー設定
   ========================================================================== */
.page-news-beer .news-slider-wrapper {
  position: relative;
  width: 100%; 
  margin: 0 auto 40px;
}

/* ビールページだけの画像エリア設定に上書き */
.page-news-beer .news-image-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; 
  margin-bottom: 0;
  text-align: left; /* 汎用の center を打ち消す */
}

.page-news-beer .news-image-wrap::-webkit-scrollbar {
  display: none;
}

/* ビールページだけの画像設定に上書き */
.page-news-beer .news-image-wrap img {
  flex: 0 0 100%;            
  width: 100%;
  max-width: none; /* 汎用の 500px 上限を解除 */
  margin: 0;       /* 汎用の margin を解除 */
  aspect-ratio: 3 / 2;       
  object-fit: cover;         
  scroll-snap-align: center;
  transform: none; /* ホバー時の拡大アニメーションを無効化 */
}

.page-news-beer .news-entry:hover .news-image-wrap img {
  transform: none; /* 汎用の拡大を解除 */
}

/* ビールページだけの矢印設定 */
.page-news-beer .news-slider-wrapper::before,
.page-news-beer .news-slider-wrapper::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.4); 
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; 
  transition: all 0.4s ease;
  z-index: 10;
}

.page-news-beer .news-slider-wrapper::before {
  content: '←';
  left: 15px; 
}

.page-news-beer .news-slider-wrapper::after {
  content: '→';
  right: 15px; 
}




/* -------------------------------------------
   新規追加：リンク横並び ＆ 専用背景設定 
------------------------------------------- */

/* リンクを複数並べるための設定 */
.news-action-row {
  display: flex;
  flex-wrap: wrap; /* スマホ等で狭い場合は自動で改行 */
  gap: 30px;       /* ボタン同士の隙間 */
  margin-top: 40px;
  margin-bottom: 40px;
}

/* ビールページ専用の背景設定 */
.page-news-beer .page-bg {
  /* ここにビール専用の背景画像パスを指定してください */
  background-image: url("../img/beer_bg.jpg"); 
  background-color: rgba(0, 0, 0, 0.6); 
  background-blend-mode: overlay;
}

.image-caption {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 12px;
  letter-spacing: 0.05em;
  text-align: right;
}

/* 本文エリアの設定 */
.news-body p {
  font-family: 'Shippori Mincho', serif;
  font-size: 14px;   /* 長文でも疲れないサイズ */
  line-height: 2.2;  /* 他のページよりさらに行間を広げ、読みやすさを追求 */
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 2em; /* 段落ごとの隙間 */
  letter-spacing: 0.04em;
}


/* ==========================================================================
   NEWSページ：シネマティック・トーン補正
   ========================================================================== */



/* 2. 記事タイポグラフィの最適化（13px基準） */
.news-entry {
  padding: 60px 30px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(30px);
  animation: revealUp 1.0s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

.news-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 14px; /* 他の作品名と統一 */
  font-weight: 600;
  line-height: 1.8;
  color: #fff;
  letter-spacing: 0.05em;
}

.news-body p {
  font-family: 'Shippori Mincho', serif;
  font-size: 13px; /* 本文サイズを他ページと統一 */
  line-height: 2.2; /* 読みやすさを追求した広い行間 */
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.04em;
}

.news-btn {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter', sans-serif;
  
  /* サイズを 10px → 11.5px (実質12px級) へアップ */
  font-size: 11.5px;
  font-weight: 600;              /* 500から600へ。文字の輪郭をはっきりさせます */
  letter-spacing: 0.2em;         /* 0.25emから少し詰め、塊としての読みやすさを優先 */
  
  color: #fff !important;        /* 透過を止め、最初から100%の白に */
  text-decoration: none !important; 
  
  /* 下線も「添え物」ではなく「境界」として太く */
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.5); 
  padding-bottom: 5px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
}

.news-btn::after {
  content: '↗';
  font-size: 10px;               /* 矢印もサイズアップ */
  margin-left: 12px;
  opacity: 0.7;
}

.news-btn:hover {
  border-bottom: 1.5px solid #fff;
  opacity: 0.6;                  /* ホバー時は逆に少し抜くことで「反応」を演出 */
  padding-left: 8px;             /* スライド量を増やし、動的な視覚効果を強調 */
}




/* ==========================================================================
   Cinema Page Layout (Right Blank Design)
   ========================================================================== */


.cinema-main {
  position: relative; /* 子要素（footer）の基準点 */
  z-index: 1;
  width: 900px;  
  margin-left: auto;
  margin-right: auto;
  padding: 140px var(--side-space) 250px;
  box-sizing: border-box;
}

  .page-music .cinema-main {
  width: 900px;
}

.cinema-container {
  padding: 0;
}

.section-label {
  font-size: 15px;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,1);
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.series-group {
  margin-bottom: 100px;
}

.series-title {
  font-family: 'Shippori Mincho', serif; 
  font-size: 14px;                       
  letter-spacing: 0.2em;                 
  color: rgba(255, 255, 255, 0.7);       
  text-transform: none;                  
  margin-bottom: 35px;                  
  
 
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  padding-left: 10px;
}







/* Movie List Grid */
.movie-list {
  display: grid;
  grid-template-columns: 260px 260px 260px;
  justify-content: space-between;
  row-gap: 50px;
}

.movie-poster {
  width: 100%;
  max-width: 100%; 
  aspect-ratio: 2 / 3;
  margin-bottom: 25px;
  overflow: visible;
  background-color: transparent;
  overflow: hidden;
  position: relative; /* 文字を画像の上に配置するための基準点 */
}

.movie-poster img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: transparent;
  filter: brightness(1.0);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.movie-item:hover .movie-poster img {
  transform: scale(1.05);
  filter: brightness(0.4);
}

/* data-label の文字を中央に表示する設定 */
.movie-poster::after {
  content: attr(data-label); /* HTMLの data-label の値を読み取ります */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.25em;
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 2;
  pointer-events: none;
}

/* ホバー時に文字を浮かび上がらせる */
.movie-item:hover .movie-poster::after {
  opacity: 1;
}

.movie-text .movie-year {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
  display: block;
}

.movie-text h3 {
  font-family: 'Shippori Mincho', serif;
  font-size: 12px;
  letter-spacing: 0.02em;
  margin: 0 0 2px 0;
  font-weight: 600;
  color: #fff;
  line-height: 1.5;
  overflow: visible;
  text-overflow: clip;
}

.movie-text .movie-subtitle {
  font-size: 9px;
  color: #fff;
  min-height: 1.2em; 
  display: block;
  margin: 0 0 15px 0; 
}

.movie-director {
  font-family: 'Shippori Mincho', serif;
  font-size: 11px; 
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7); 
  letter-spacing: 0.05em;
  margin: 0 0 0 0; 
  line-height: 1.4;
}



/* ==========================================================================
   Action Row: Link & Read More Button (Vertical Layout)
   ========================================================================== */

/* PC版：二つのボタンを縦に並べる */
.movie-action-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px; /* ボタン同士の隙間を一定にする */
  margin-top: 25px;
}

/* リンクと READ MORE のデザインを完全に統一する */
.movie-external-links a,
.movie-details summary {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.6) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 6px;
  transition: all 0.4s ease;
  cursor: pointer;
  list-style: none; /* summaryのポッチを消す */
}

/* ホバー時の挙動を統一 */
.movie-external-links a:hover,
.movie-details summary:hover {
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}



/* 315行目付近：外部リンクに共通で矢印をつける */
.movie-external-links a::after {
  content: '↗';           /* 矢印を表示 */
  font-size: 8px;         /* 少し小さめに */
  margin-left: 8px;       /* 文字との距離 */
  opacity: 0.6;           /* 控えめに表示 */
  transition: opacity 0.3s ease;
  display: inline-block;
  vertical-align: middle;
}

.movie-external-links a:hover::after {
  opacity: 1;             /* ホバーで明るく */
}

/* ★ リンクが空（中身がない）ときは、矢印もろとも非表示にする */
.movie-external-links a:empty,
.movie-external-links a:empty::after {
  display: none !important;
}






/* Movie Details (READ MORE) */
.movie-details summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 4px;
  margin-top: 10px;
  transition: all 0.4s ease;
}

.movie-details summary:hover {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}

.movie-details summary::after {
  content: '↓';
  font-size: 8px;
  margin-left: 12px;
  transition: transform 0.4s ease;
}

.movie-details[open] summary::after {
  transform: rotate(180deg);
}

.details-content {
  font-family: 'Shippori Mincho', serif;
  font-size: 11px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.6);
 letter-spacing: 0.02em;
  padding: 12px 0 10px 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   Related Music Section (CD List)
   ========================================================================== */
.cinema-related {
  width: 100%;
  padding-top: 80px;
  border-top: none;
  margin-top: 50px;
}

.cd-list {
  display: grid;
  grid-template-columns: 260px 260px 260px;
  justify-content: space-between;
  row-gap: 60px;
}

.cd-link {
  text-decoration: none;
  color: inherit;
  display: block;
}



.cd-item img {
width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  filter: brightness(1.0);
  margin-bottom: 15px;
  display: block;
  transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1), filter 0.8s ease;
}

.cd-link:hover img,
.cd-item:hover img {
  transform: scale(1.05);
  filter: brightness(0.4) !important; /* ★ 1.1 から 0.4 へ */
}


.cd-poster {
  position: relative; /* 文字を画像の上に配置するための基準点 */
  overflow: hidden;
  margin-bottom: 15px;
}

/* ホバー時の画像暗転（img 自体ではなく枠基準で制御） */
.cd-item:hover .cd-poster img {
  transform: scale(1.05);
  filter: brightness(0.4) !important;
}

/* ラベルの絶対中央配置（top: 50% で完璧に揃います） */
.cd-poster::after {
  content: attr(data-label);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.25em;
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 5;
  pointer-events: none;
}

/* ホバーした時だけラベルを表示 */
.cd-item:hover .cd-poster::after {
  opacity: 1;
}





.cd-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0 0 2px 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: clip !important;
}

.cd-subtitle {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 10px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.03em;
  margin-bottom: 15px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cd-artist {
  font-family: 'Shippori Mincho', serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  text-transform: none;
  letter-spacing: 0.03em;
  margin: 0;
}

/* ==========================================================================
   Global Footer Elements
   ========================================================================== */
/* TOPページ用（hero基準） */
.hero__content {
  position: fixed;
  bottom: 20px;
  left: 0;
  width: 100%;
  min-width: 850px;
  padding-left: var(--side-space); /* 左端から40px固定 */
  box-sizing: border-box;
  z-index: 100;
pointer-events: none; /* コンテンツのクリックを邪魔しない */
}

.hero__brand {
  position: fixed;
  bottom: 10px;
  left: 0;
  width: 100%;
  min-width: 850px;
  padding-right: var(--side-space);
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  z-index: 100;
  pointer-events: none;
  
}



.hero__logo {
  width: 40px;
  height: auto;
}

.hero__catch img {
  width: 300px;
  height: auto;
}

.hero__copy {
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 1);
  transform: translateY(0);
}


/* ==========================================================================
   Page Background: Main Page Style Fade-In
   ========================================================================== */

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1; /* コンテンツの裏側 */
  background-size: cover;
  background-position: center;
 
  filter: brightness(0.8); /* メインページと同じ明度調整 */
  
  /* 初期状態は透明 */
  opacity: 0;
  /* メインページの cinematicFade (5%) と同等の 2.5s〜3s でフェード */
  animation: bgFadeIn 3s ease-in-out forwards;

/* iPhoneでのスクロールを滑らかにするための追加プロパティ */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;

}

/* 各ページごとの画像指定 */
.page-cinema .page-bg {
  background-image: url("../img/hero1.jpg");
  background-color: rgba(0, 0, 0, 0.6);
  background-blend-mode: overlay;
}

.page-book .page-bg {
  background-image: url("../img/hero1.jpg");
  background-color: rgba(0, 0, 0, 0.6);
  background-blend-mode: overlay;
}

.page-music .page-bg {
  background-image: url("../img/hero1.jpg"); /* ミュージックページ */
  background-color: rgba(0, 0, 0, 0.6);
  background-blend-mode: overlay;
}

.page-about .page-bg {
  background-image: url("../img/hero1.jpg"); /* ★ここにお好きな画像パスを */
  background-color: rgba(0, 0, 0, 0.6);      /* 明るすぎる場合は 0.7 などに上げてください */
  background-blend-mode: overlay;
}

.page-news .page-bg {
  background-image: url("../img/hero1.jpg"); /* 他のページと共通の画像、または任意のもの */
  background-color: rgba(0, 0, 0, 0.6);
  background-blend-mode: overlay;
}

.page-news-beer .page-bg {
  background-image: url("../img/sekai.jpg"); /* 他のページと共通の画像、または任意のもの */
  background-color: rgba(0, 0, 0, 0.6);
  background-blend-mode: overlay;
}



/* フェードインアニメーション */
@keyframes bgFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ==========================================================================
   Fade Overlay (ぼかしによる境界線の消失)
   ========================================================================== */

/* 1. 土台の設定：シネマ、ブック、ミュージックに適用 */
.page-cinema::before,
.page-cinema::after,
.page-book::before,
.page-book::after,
.page-music::before,
.page-music::after,
.page-about::before, 
.page-about::after,
.page-news::before, 
.page-news::after

{
  content: "";
  position: fixed;
  left: 0;
  width: 100%;
  min-width: 850px;
  z-index: 50;
  pointer-events: none;
  
  /* ぼかしの強さを設定 */
  backdrop-filter: blur(13px); 
  -webkit-backdrop-filter: blur(13px); /* Safari用 */
}

/* 2. 上部のぼかしフェード */
.page-cinema::before,
.page-book::before,
.page-music::before,
.page-about::before,
.page-news::before
{
  top: 0;
  height: 150px;
  /* 背景を真っ黒ではなく、ごく薄いグレーにすると文字が読みやすくなります */
  background: rgba(0, 0, 0, 0.05); 
  
mask-image: linear-gradient(to bottom, 
    black 0px, 
    black 80px,       /* ナビゲーションの高さ分はしっかりぼかす */
    transparent 140px /* ラベルが始まる140px直前で完全に透明化 */
  );
  -webkit-mask-image: linear-gradient(to bottom, 
    black 0px, 
    black 80px, 
    transparent 140px
  );
}

/* 3. 下部のぼかしフェード */
.page-cinema::after,
.page-book::after,
.page-music::after, 
.page-about::after,
.page-news::after
{
  bottom: 0;
  height: 0px;
  background: rgba(0, 0, 0, 0.05);
  
  /* 下から上へ向かってぼかしを消していく */
  mask-image: linear-gradient(to top, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
}


/* ==========================================================================
   Cinema & Book: Infinite Sequential Reveal
   ========================================================================== */

/* 660行目付近：作品カード（movie-item）の構造を定義 */
.movie-item, .cd-item {
  display: block;
  text-decoration: none !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 30px; /* ここだけで余白を管理します */
  background: rgba(255, 255, 255, 0.02);
  box-sizing: border-box;
  transition: all 0.5s ease;
  height: 100%;
  
  /* アニメーション：ここだけに設定します */
  opacity: 0;
  transform: translateY(30px);
  animation: revealUp 1.0s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

/* 内部リンク（movie-poster-link）は「箱」としての装飾を消します */
.movie-poster-link {
  display: block;
  text-decoration: none !important;
  color: inherit !important;
  padding: 0;         /* 余白を 0 にして重複を防ぎます */
  border: none;       /* 枠線も消します */
  background: none;   /* 背景も消します */
}

/* リンク内にある全ての文字を白に固定（下線も出さない） */
.movie-item *, .cd-item *, .movie-poster-link * {
  text-decoration: none !important;
  color: #fff !important;
}

/* ホバー時の装飾：カード全体が光るようにします */
.movie-item:hover, .cd-item:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}




/* アニメーションの定義（少し動きを小さくして上品に） */
@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* 1. 基本のディレイ（フォトブックや最初のグループ用） */
.movie-item:nth-child(1)  { animation-delay: 0.2s; }
.movie-item:nth-child(2)  { animation-delay: 0.4s; }
.movie-item:nth-child(3)  { animation-delay: 0.6s; }

/* 2. シネマページ専用：2つ目のグループ（木村作品）を遅らせる */
/* 最初のグループが3枚あるので、0.8s から開始させます */
.series-group:nth-of-type(2) .movie-item:nth-child(1) { animation-delay: 1.4s; }
.series-group:nth-of-type(2) .movie-item:nth-child(2) { animation-delay: 1.6s; }
.series-group:nth-of-type(2) .movie-item:nth-child(3) { animation-delay: 1.8s; }

.series-group:nth-of-type(2) .movie-item:nth-child(n+4) { animation-delay: 2.0s; }

/* 3. 関連CDリスト：木村作品が終わった後に開始 */
.cd-item:nth-child(1) { animation-delay: 1.4s; }
.cd-item:nth-child(2) { animation-delay: 1.6s; }
.cd-item:nth-child(3) { animation-delay: 1.8s; }
.cd-item:nth-child(4) { animation-delay: 2.0s; }

/* フォトブック側のアイテム数が多い場合のための予備設定（一気にでないように） */
.movie-item:nth-child(4)  { animation-delay: 0.8s; }
.movie-item:nth-child(5)  { animation-delay: 1.0s; }
.movie-item:nth-child(6)  { animation-delay: 1.2s; }
.movie-item:nth-child(n+7) { animation-delay: 1.4s; }







/* ==========================================================================
   Photo Book: Perfect Alignment Grid
   ========================================================================== */

/* 1. グリッドの横ラインを揃える */
.page-book .movie-list {
  display: grid;
  grid-template-columns: 260px 260px 260px; /* 縦のライン（3列）を固定 */
  justify-content: space-between;
  row-gap: 60px; /* 行間を少し広げて、整列を際立たせる */
  align-items: start; /* 上端を揃える */
}


.page-book .movie-poster {
  width: 100%;
  height: 220px; 
  aspect-ratio: auto; 
  margin-bottom: 25px;
  

  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent; 
}


.page-book .movie-poster img {
  max-width: 100%;
  max-height: 100%; 
  width: auto;     
  height: auto;    
  

  box-sizing: border-box;
  border: none;
  object-fit: contain; 
}


.page-book .movie-text h3 {
  font-size: 11px; 
  white-space: nowrap;      
  overflow: hidden;         
  text-overflow: ellipsis;  
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}

.page-book .movie-subtitle {
  font-size: 8px; 
  color: rgba(255, 255, 255, 0.7);
}






/* Music Page: Special 5-Column Grid Layout (Fixed) */

/* 1. グリッドの強制5等分 */
.page-music .cd-list {
  display: grid !important;
  /* minmax(0, 1fr) を使うことで、文字が長くても幅を突き破らないようにします */
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important; 
  gap: 40px 20px; /* 上下の間隔はゆったり、左右は12pxに絞る */
  width: 100% !important;
}

/* 2. 額装（padding）の極限スリム化 */
.page-music .cd-item {
  display: flex !important;
  flex-direction: column !important;
  padding: 15px !important;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  box-sizing: border-box; /* 枠線と余白を幅に含める */
}

.cd-info {
  flex-grow: 1; /* ★ これでテキスト部分が伸び、ボタンエリアを下に押し下げます */
  margin-bottom: 10px;
}

/* 3. 画像とテキストの最適化 */
.page-music .cd-item img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  margin-bottom: 8px;
}

.page-music .cd-title {
  font-size: 11px !important;
  margin-bottom: 4px;
  line-height: 1.3;
  /* 長いタイトルは「...」で省略して、レイアウト崩れを防ぐ */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-music .cd-artist {
font-size: 10px !important; /* 9px → 10px */
  opacity: 0.8 !important;   /* 0.5 → 0.8（かなりハッキリします） */
  letter-spacing: 0.05em;   /* わずかに文字間を広げて読みやすく */
}


/* Music Page: Seamless Infinite Loop & High Visibility */

.page-music .cd-title, 
.page-music .cd-artist {
  display: flex;
  gap: 50px;
  overflow: hidden !important;
  white-space: nowrap;

  /* 右端を少しぼかして、文字が消えていく演出を追加 */
  mask-image: linear-gradient(to right, black 0%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 0%, black 85%, transparent 100%);

}

/* アーティスト名の視認性を強化 */
.page-music .cd-artist {
  font-size: 10px !important; /* 9px → 10px へ */
  opacity: 1 !important;   /* 0.5 → 0.9 へ。ほぼ白に見えるまで濃くします */
  margin-top: 2px;
}

.page-music .cd-title {
  font-size: 11px !important; /* タイトルもわずかに強調 */
  opacity: 1;
}

.page-music .cd-title span, 
.page-music .cd-artist span {
  display: inline-block;
  flex-shrink: 0;
  padding-right: 0px; /* 文字同士の隙間を少し広げて、ループを読みやすく */
}

/* 平常時は1つ目だけを表示 */
.page-music .cd-title span:nth-child(2),
.page-music .cd-artist span:nth-child(2) {
  display: none; 
}

/* 【重要】はみ出している（is-overflowing）項目にマウスが乗った時だけ、2つ目を表示してループさせます */
.cd-item:hover .is-overflowing span:nth-child(2) {
  display: inline-block;
  padding-left: 0 !important; /* ★パディングを 0 にして、1つ目と完全に同じ幅にします */
}

.cd-item:hover .is-overflowing span {
  animation: seamlessLoop var(--speed, 7s) linear infinite;
}

/* 1. Musicページでは暗転(0.4)を打ち消し、元の通り明るく(1.1)する */
.page-music .cd-item:hover img {
  filter: brightness(1.1) !important;
  transform: scale(1.05);
}

/* 2. Musicページでは中央のラベル（::after）を表示しない */
.page-music .cd-item::after {
  display: none !important;
}

/* 3. ホバー時の反応（文字の白さ）も元の通りに戻す */
.page-music .cd-item:hover {
  background: rgba(255, 255, 255, 0.05);
}





@keyframes seamlessLoop {
 0% { transform: translateX(0); }
  /* ★「自分の幅（100%）＋ 隙間（50px）」分だけ動かすことで、2つ目が1つ目の位置にピタリと重なります */
  100% { transform: translateX(calc(-100% - 50px)); }
}


.category-switch {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 50px;
  padding-left: 2px;
}

/* スイッチボタンの基本デザイン */
.switch-btn {
  background: none;
  border: none;
  padding: 0 0 4px 0;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid transparent;
  transition: all 0.4s ease;
}

/* アクティブ（選択中）の状態 */
.switch-btn.is-active {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}

.switch-divider {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* 表示・非表示のコントロール */
.cd-group {
  display: none;
  opacity: 0;
}

.cd-group.is-visible {
  display: block;
  animation: groupReveal 0.8s ease forwards;
}

@keyframes groupReveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* Musicページ専用：アクションエリアの設定 */

.page-music .cd-action-row {
  display: flex;
  flex-direction: column; /* 二段に並べる */
  min-height: 65px;
  gap: 8px;               /* ボタン同士の隙間を狭く */
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05); /* 境界線を薄く入れる */
}

.page-music .cd-btn {
font-family: 'Inter', 'Noto Sans JP', sans-serif; /* 日本語フォントを考慮 */
  font-size: 10px;         /* 8px → 11px へ拡大 */
  font-weight: 500;
  letter-spacing: 0.1em;   /* 日本語に合わせて文字間を微調整 */
  
  /* 通常時の視認性：0.4(40%) → 0.7(70%) へ濃くして、読みやすくします */
  color: rgba(255, 255, 255, 0.7) !important; 
  
  text-decoration: none !important;
  line-height: 1.5;
  transition: all 0.3s ease;
  display: block;
}

.page-music .cd-btn:hover {
 color: #fff !important;   /* ホバーで100%の白に */
  opacity: 1;
  transform: translateX(4px); /* スライド幅も少し広げて反応を良くします */
}


/* メタ情報（日付・番号）のデザイン */
.cd-meta {
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5)!important; /* かなり控えめに */
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

/* 音楽ページ専用の詳細ボタン */
.page-music .cd-details {
  margin-top: auto; /* ★ これでリンクの数に関わらず、一番下に配置されます */
  padding-top: 5px;
}

.cd-details summary {
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.4) !important;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 4px;
  transition: all 0.3s ease;
}

.cd-details summary:hover {
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

/* 展開されるコンテンツ（非常に狭いので余白を最小化） */
.cd-details .details-content {
  font-family: 'Shippori Mincho', serif;
  font-size: 9px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
  padding: 10px 0 0 5px;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 5px;
}



.page-music .cd-btn:empty {
  display: none !important;
}




.legacy-link {
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 1) !important; /* コピーライトより少し薄く */
  text-decoration: none !important;
  margin-right: 30px;         /* ロゴとの距離をしっかり取る */
  transition: all 0.4s ease;
  pointer-events: auto;       /* ★ 親要素の none を解除してクリック可能に */
}

.legacy-link:hover {
  color: rgba(255, 255, 255, 1) !important;
  transform: translateY(-1px); /* わずかに浮かせて「押せる」ことを示唆 */
}





/* ABOUTページ */



.company-profile {
  margin-top: 50px;   /* 100px → 50px へ圧縮 */
  padding-top: 40px;  /* 80px → 40px へ圧縮 */
  border-top: 0px solid rgba(255, 255, 255, 0.05);
}

.profile-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;          /* 30px → 15px へ。項目間の距離を半分に */
  max-width: 700px;
  margin: 0 auto;
}

.profile-item {
  display: grid;
  grid-template-columns: 160px 1fr; 
  align-items: flex-start !important;
  padding-bottom: 12px; 
  border-bottom: 0px solid rgba(255, 255, 255, 0.02);
}

.profile-item dt {
  font-family: 'Inter', sans-serif;
  font-size: 10px;     
  font-weight: 500;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.4); /* 色維持 */
  padding-top: 7px;
}

.profile-item dd {
  margin: 0;
  font-family: 'Shippori Mincho', serif;
  font-size: 12px;    /* サイズ維持 */
  line-height: 2;     /* 優雅な行間 2 をそのまま維持 */
  color: rgba(255, 255, 255, 0.85); /* 色維持 */
  letter-spacing: 0.04em;
}


.en-sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  opacity: 0.6;
  display: block;
  margin-top: -4px; /* 行間が広すぎる場合に微調整 */
}


/* メールアドレス専用：馴染みつつ「押せる」スタイル */

.profile-link {
  color: inherit !important;        /* リンクの青を消し、周囲の文字色と合わせます */
  text-decoration: none !important; /* 標準の下線を消します */
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* 非常に薄い下線 */
  padding-bottom: 2px;
  transition: all 0.4s ease;
  display: inline-block;
  line-height: 1.2;                 /* 下線を文字に少し近づけます */
}

.profile-link:hover {
  border-bottom: 1px solid rgba(255, 255, 255, 0.8); /* ホバーで線が白く浮き上がります */
  opacity: 0.6;                     /* わずかに文字を薄くして、クリックできる感を出します */
}


/* style0417.css：問い合わせフォーム専用スタイル */

.contact-form {
  max-width: 700px;
  margin: 40px auto 0;
  padding-top: 14px;
}

/* 入力欄：背景を透かし、タイポグラフィの品格を維持 */
.form-input, .form-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.03); /* 極めて薄い背景色 */
  border: 1px solid rgba(255, 255, 255, 0.1); /* 繊細な枠線 */
  padding: 12px 0 12px 12px;
  color: #fff;
  font-family: 'Shippori Mincho', serif;
  font-size: 13px; /* 本文のサイズと同期 */
  box-sizing: border-box;
  transition: all 0.4s ease;
  border-radius: 0; /* 角を丸めずシャープに */
}

/* プレースホルダー（案内文字）の色を薄く設定 */
.form-input::placeholder, .form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.2);
  font-size: 11px;
}

/* 入力中：枠線を少しだけ浮かび上がらせる */
.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
}

.form-textarea {
  height: 180px;
  line-height: 1.8;
  resize: vertical; /* 縦方向のみリサイズ許可 */
}

.form-action {
  margin-top: 60px;
  text-align: center;
}

/* ボタン：既存の news-btn を継承しつつ、フォーム用に微調整 */
.form-action .news-btn {
  background: none;
  cursor: pointer;
  padding: 0 0 8px 0;
  border-top: none;
  border-left: none;
  border-right: none;
}

/* style0417.css：ABOUT & INQUIRY 左揃え統一 */

/* 1. 表（ABOUT）とフォーム（INQUIRY）の左端を見出しに合わせる */
.profile-grid, 
.contact-form {
  max-width: 100% !important; 
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2. 不要になった INQUIRY 専用の囲いをリセット */
.inquiry-section {
  max-width: 100%;
  margin: 100px 0 0;  /* 中央寄せを解除 */
}

.inquiry-section .section-label {
  width: 100%;        /* 見出しは 900px 幅いっぱいに使います */
}

.contact-form {
  margin-top: 40px;
}




@media screen and (max-width: 1000px) and (min-width: 851px) {
  /* 1. メニュー間の隙間を 50px から 30px へ凝縮 */
  .nav__list {
    gap: 30px; 
  }

  /* 2. メニュー文字の「アキ」を 0.25em から 0.15em へ微調整 */
  .nav a {
    letter-spacing: 0.15em;
  }

  /* 3. ロゴとタイトルの隙間も少し詰める */
  .header__brand {
    gap: 10px;
  }
}





 /* ==========================================================================
   Responsive & Hamburger Menu (Final Perfect Fix)
   ========================================================================== */
@media screen and (max-width: 850px) {


  /* 1. PC用の制約を強制解除 */
  body, .header--overlay { 
    min-width: 0 !important; 
    width: 100%;
  }




  .header__inner { 
    min-width: 0 !important;
    padding: 20px 25px; /* 左右の余白を少し広げてバランスを整える */
    box-sizing: border-box;
  }

  .header__logo img { width: 42px; }
  .header__title { font-size: 13px; letter-spacing: 0.25em; }

  /* 2. ハンバーガー：見えないバグを修正 */
  .hamburger {
    display: block !important;
    cursor: pointer;
    width: 25px;
    height: 18px;
    position: relative; /* 子要素の基準点 */
    margin-left: auto;
    z-index: 1100;
    padding: 15px; 
  margin-top: -15px;
  margin-right: -15px;
  }

  .hamburger span {
    display: block;
    position: absolute; /* これがないと top が効きません */
    width: 100%;        /* これがないと幅が0になります */
    height: 1px;
    background-color: #fff;
    transition: all 0.4s ease;
    left: 15px; /* パディング分だけ内側に寄せる */
  width: 25px;
  }

  .hamburger span:nth-child(1) { top: 15px; }
.hamburger span:nth-child(2) { top: 24px; }
.hamburger span:nth-child(3) { top: 33px; }



  /* 開閉アニメーション */
  .nav-check:checked ~ .hamburger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .nav-check:checked ~ .hamburger span:nth-child(2) { opacity: 0; }
  .nav-check:checked ~ .hamburger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  /* 3. ナビゲーション展開 */
  .nav {
    position: fixed; top: 0; right: -100%; width: 100%; height: 100vh;
    background: rgba(0, 0, 0, 0.98); display: flex; align-items: center;
    justify-content: center;
    transition: right 0.5s cubic-bezier(0.2, 1, 0.3, 1); z-index: 1050;
  }
  .nav-check:checked ~ .nav { right: 0; }

 .nav__list {
display: flex !important;
  flex-direction: column !important;
  /* ★ center ではなく stretch にするか、削除します。これで土台が横に広がります */
  align-items: stretch !important; 
  gap: 0;                            /* ボタン同士の境界線を密着させる */
  width: 100%;
  padding: 0;                        /* 40pxの余白を消して、画面端までボタンにします */
  box-sizing: border-box;
  list-style: none;            /* 念のためポッチを消す */
}


.nav__list li {
  width: 100%;
}

.nav a {
display: block; 
  width: 100%;
  padding: 25px 0;             /* さらに厚みを持たせて押しやすくします */
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-sizing: border-box;      /* パディングを含めて 100% にする */
}


/* ニュースの各行を、画面端まで反応するボタンにする */
.hero__news-list li {
  margin-bottom: 0 !important; /* 隙間をゼロにして、境界線で区切る */
}

.hero__news-list a {
display: flex !important;
  align-items: flex-start !important;
  width: 100vw;
  margin-left: calc(var(--side-space) * -1);
  padding: 22px var(--side-space) !important;
  background: transparent;     /* 平常時は透明にして背景を活かす */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 境界線をより繊細に */
  transition: all 0.3s ease;
  position: relative;
  box-sizing: border-box !important;
}

/* タップした瞬間のフィードバック */
.hero__news-list a:active {
  background: rgba(255, 255, 255, 0.05);
  padding-left: calc(var(--side-space) + 5px) !important; /* わずかに右に動く演出 */
}


.hero__news-list a::after {
  display: none !important;
}

/* ★ 修正：スマホ版の「→」アイコンは、別のパーツ(::before)を使って新しく作ります */
.hero__news-list a::before {
  content: "→";
  position: absolute;
  right: var(--side-space);
  top: 25px; /* 複数行になっても上部に固定 */
  font-size: 10px;
  opacity: 0.3;
  font-family: 'Inter', sans-serif;
  pointer-events: none;
}

.news-date {
  width: 85px !important;
  font-size: 9px !important;    /* 日付を小さくして、タイトルとの対比をつける */
  color: rgba(255, 255, 255, 0.4) !important;
  letter-spacing: 0.1em;
  line-height: 1.6 !important;  /* ★ 日付の高さを調整 */
}

.hero__news-list a span:not(.news-date) {
  font-size: 12px !important;   /* タイトルの視認性を確保 */
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.9);
  flex: 1;
  padding-right: 20px;         /* 矢印との重なり防止 */
  min-width: 0;                   /* ★ はみ出し防止の魔法の1行 */
  white-space: normal !important; /* ★ 画面端で自動的に折り返す */
  word-break: keep-all !important;     /* ★追加：単語の変な位置で折れるのを防ぐ */
  overflow-wrap: anywhere !important;  /* ★追加：長いURLなどはみ出さずに折る */
  line-height: 1.5 !important;    /* ★ 複数行になったときの美しい行間 */
}



.news-btn {
    display: flex !important;
    justify-content: center;
    align-items: center;      /* ★追加：縦方向もど真ん中に配置 */
    text-align: center;       /* ★追加：2行に折り返された時も、文字を中央で揃える */
    line-height: 1.4;         /* ★追加：2行になった時の行間を美しく */

    width: 100% !important;
    padding: 16px 15px !important; /* ★修正：左右に少し余白(15px)を持たせ、文字が枠に張り付くのを防ぐ */
    box-sizing: border-box !important; /* ★追加：パディングを含めて幅を計算 */


    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 2px;
    font-size: 11px !important;
    color: #fff !important;
    text-decoration: none !important; /* スマホでも確実に消します */
  }







  /* 4. メインコンテンツ：美しく贅沢な余白 */
  .cinema-main {
 width: 100% !important; /* スマホでは 100% を最優先にします */
    padding: 110px 25px 120px;
    box-sizing: border-box;
  }



  .movie-list, .cd-list, .page-book .movie-list {
    grid-template-columns: 1fr;
    gap: 55px; /* アイテム間の距離を広げて「展示」感を出す */
  }

  /* 5. 額装プロポーションの改善 */
  .movie-item, .cd-item {
    padding: 30px 20px !important; /* 内側の余白を少し絞ってスッキリさせます */
    margin-bottom: 0;
  }


  /* スマホ版：タップした瞬間に「押した感」を出すフィードバック */
.movie-item:active, .cd-item:active {
  background: rgba(255, 255, 255, 0.08) !important;
  transform: scale(0.98);      /* わずかに沈むアニメーション */
  transition: transform 0.1s;
}


  .movie-poster { margin-bottom: 25px; }

  .page-book .movie-poster { 
    height: auto !important; 
    margin-bottom: 25px;
    display: block;
  }

  .page-book .movie-poster img {
    width: 100% !important;      /* ★ 横幅を枠いっぱいに広げる */
    height: auto !important;     /* ★ 縦横比を維持 */
    max-height: none !important; /* ★ PC版の制限を解除 */
    object-fit: cover;           /* ★ 隙間なく埋める */
  }



/* 作品タイトルの当たり判定を上下に広げる */
.movie-text h3, .cd-title {
  padding: 0;             /* 文字の上下に「見えないボタン領域」を作る */
  margin-top: 0;           /* レイアウトが崩れないよう相殺 */
}

/* ==========================================================================
   Action Row: Final Unified Style (PC & Mobile)
   ========================================================================== */

/* 1. スマホ版：アクションエリアの最終調整（@media 内） */
/* ※このブロックは必ず @media screen and (max-width: 850px) の中に入れてください */

  .movie-action-row {
    display: flex !important;
    flex-direction: column !important; /* 常に「リンクが上、詳細が下」 */
    align-items: center !important;
    gap: 12px !important;
    margin-top: 25px !important;
  }

  /* 空のリンク（幽霊ボタン）を完全に消し去る */
  .movie-external-links a:empty { display: none !important; }
  .movie-external-links:not(:has(a:not(:empty))) { display: none !important; }

  /* リンクと READ MORE を「揃いの全幅ボタン」にする */
  .movie-external-links, .movie-details { width: 100% !important; }

  .movie-external-links a,
  .movie-details summary {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    padding: 15px 0 !important;
    margin: 0 !important; /* ★ここで古い 25px 設定を完全に上書き消去 */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 2px !important;
    font-size: 11px !important;
    box-sizing: border-box !important;
  }

  /* 矢印（↗）と下向き（↓）のアイコンを中央に配置 */
  .movie-external-links a::after { content: '↗'; margin-left: 8px; font-size: 8px; opacity: 0.8; }
  .movie-details summary::after { content: '↓'; margin-left: 10px; font-size: 8px; }

/* --- ここまでがスマホ用設定 --- */

/* 2. ミュージックページの調整など、残りの設定をここに集約 */
  .page-music .cd-list { grid-template-columns: 1fr 1fr !important; gap: 20px 12px; }
  .page-music .cd-title span:nth-child(2), .page-music .cd-artist span:nth-child(2) { display: none !important; }

  /* コピーライト（右下）の最終位置 */
  .hero__brand {
    position: fixed !important; bottom: 10px !important; left: 0 !important; width: 100% !important;
    display: flex !important; justify-content: center !important; z-index: 100;
  }



  .page-music .cd-action-row {
  display: grid !important;
  grid-template-rows: 44px 44px auto !important; /* 3つの席を固定 */
  gap: 10px !important;
  margin-top: 20px !important;
  }

  .cd-meta {
    font-size: 9px !important; /* スマホでは少し視認性を上げる */
    margin-bottom: 8px;
  }

/* リンクも詳細ボタンも、すべて「揃いのボタン」へ */
  .page-music .cd-btn,
  .cd-details summary {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    padding: 12px 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.02);
    font-size: 10px !important;
    border-radius: 2px;
    margin: 0 !important;
  }

  .cd-details .details-content {
    font-size: 11px !important; /* スマホでは読みやすさ優先 */
    padding: 15px 10px;
  }


  .page-music .cd-list {
    grid-template-columns: 1fr 1fr !important; 
    gap: 20px 12px; 
    width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important; 
  }

  .page-music .cd-item {
display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  }

  .page-music .cd-link {
flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

  /* スマホでの文字サイズ調整 */
  .page-music .cd-title {
    font-size: 12px !important;
    margin-bottom: 4px;
  }

  .page-music .cd-artist {
    font-size: 11px !important;
  }

  .page-music .cd-details {
  grid-row: 3 / 4 !important; 
  margin-top: 0 !important; /* ★1272行目の25pxをここで無効化 */
}

/* スマホ時（@media内）：スライド用の2つ目の文字を隠す */
.page-music .cd-title span:nth-child(2),
.page-music .cd-artist span:nth-child(2) {
  display: none !important;
}

/* ついでにスマホではスライドも止める */
.page-music .cd-title span, 
.page-music .cd-artist span {
  animation: none !important;
  white-space: normal !important; /* 長いタイトルを折り返して表示 */
}



.movie-details summary {
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 100%;                  /* 横幅いっぱいをボタンにする */
  padding: 14px 0 !important;   /* 上下に十分な「指のスペース」を確保 */
  margin-top: 25px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important; /* 繊細な枠線を追加 */
  background: rgba(255, 255, 255, 0.03);
  font-size: 11px !important;
  border-radius: 2px;
}

.movie-details summary::after {
  margin-left: 10px;
}

/* ボタンのデザイン：押しやすさを維持 */
.page-music .cd-btn,
.cd-details summary {
display: flex !important;
  justify-content: center;
  align-items: center;
  height: 44px !important;   /* 指定席の高さと一致させる */
  padding: 0 !important;      /* 余計なパディングで膨らませない */
  margin: 0 !important;       /* ★1272行目の余白を完全リセット */
  box-sizing: border-box !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  font-size: 10px !important;
  border-radius: 2px !important;
}





  /* 6. テキストの洗練 */
  .section-label { font-size: 12px; margin-bottom: 50px; letter-spacing: 0.4em; }
  .movie-text h3 { font-size: 14px; white-space: normal; line-height: 1.6; }
  .movie-details summary { font-size: 10px; margin-top: 15px; }

  /* 7. コピーライト（右端の署名） */
  .hero__content, .hero__logo { display: none !important; }
  .hero__brand {
    position: fixed !important; 
    bottom: 10px !important; 
    right: 0px !important;
    left: 0px !important; 
    width: 100% !important; 
    padding: 0 !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important; 
    pointer-events: none;
    z-index: 100;
  }

  .hero__copy {
    font-size: 7px !important; 
    opacity: 1; 
    letter-spacing: 0.05em;
    text-align: center; /* 念のための保険 */
  }


.legacy-link {
    margin-right: 15px;       /* 画面幅に合わせて距離を縮める */
    font-size: 7px;           /* コピーライトのサイズに合わせる */
    opacity: 1;
  }


.profile-item {
    grid-template-columns: 1fr;
    gap: 6px;         
    padding-bottom: 15px; 
  }

  .profile-item dt {
    padding-top: 0; 
  }

}