@charset "UTF-8";
/* news.css
映画『存在のすべてを』オフィシャルサイト NEWS/固定ページ共通スタイル
（common.cssの後に読み込む。news一覧・記事詳細・ページネーション・メディア情報・404 等） */
/*------------------------------------------------------------*/
/* --- コンテンツ枠の最小高さ：内容が少ないページ（404等）でもフッターをブラウザ下部に配置 --- */
#container {
 display: flex;
 flex-direction: column;
 min-height: 100vh; /* svh非対応ブラウザ用フォールバック */
 min-height: 100svh;
}
#main {
 flex: 1 0 auto;
}
.contents {
 width: 100%;
 margin-left: auto;
 margin-right: auto;
}
/* --- 背景グラデーション（NEWS系ページ専用の上書き） ---
   common.css の #container::after（紙テクスチャ画像）をここで上書きし、
   ブランドカラー（--base-beige / --base-bluegray）を白で薄めたグラデーションに差し替える。
   position/top/left/width/height/z-index は common.css の指定をそのまま流用し、
   background と animation のみ上書きする（@keyframes gradientBG は common.css のものを流用）。 */
#container::after {
 background: linear-gradient(120deg,
  color-mix(in srgb, var(--base-beige) 22%, #f3f4f5) 0%,
  #f3f4f5 38%,
  color-mix(in srgb, var(--base-bluegray) 24%, #f3f4f5) 68%,
  color-mix(in srgb, var(--base-beige) 14%, #f3f4f5) 100%);
 background-size: 400% 400%;
 animation: gradientBG 20s ease infinite;
}
/* --- NEWS系ページ共通：横型ロゴヘッダー --- */
.news-header {
 padding: 80px 0 clamp(12px, 1vw, 20px); /* clampはmin≦maxが必須（20px,1vw,12pxだと常に20px評価になる）*/
 text-align: center;
}
.news-header-logo {
 display: inline-block;
 width: clamp(240px, 28vw, 400px);
}
.news-header-logo a {
 display: block;
}
.news-header-logo img {
 width: 100%;
 height: auto;
}
/* --- NEWS系ページ専用：右上Xリンク（フッターと同じ .sns-x を右上固定で使う） --- */
.news-header-sns {
 position: fixed;
 top: clamp(10px, 2vw, 16px);
 right: clamp(10px, 2vw, 16px);
 z-index: 1010;
}
/* --- NEWS一覧ページ：タイトル・説明文 --- */
.news-page-head {
 max-width: 1080px;
 width: 90%;
 margin: 0 auto clamp(2.4rem, 4vw, 4rem);
 text-align: center;
}
.pagettl.en {
 font-weight: 600;
 font-size: clamp(2.2rem, 3.4vw, 3.2rem);
 letter-spacing: 0.3em;
 color: var(--base-beige);
}
.news-page-cat { /* カテゴリー・タグ一覧の見出し下ラベル（category.php / tag.php） */
 margin-top: 0.6rem;
 font-size: clamp(1.4rem, 1.6vw, 1.6rem);
 letter-spacing: 0.1em;
 color: var(--base-darkgray);
}
.news-page-desc {
 margin-top: 1.2rem;
 font-size: clamp(1.4rem, 1.5vw, 1.5rem);
 color: var(--base-darkgray);
}
/* --- NEWS一覧・関連記事：カードグリッド --- */
.news-grid {
 max-width: 1080px;
 width: 90%;
 margin: 0 auto;
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: clamp(24px, 3vw, 40px);
 padding-bottom: clamp(3rem, 4vw, 4rem);
}
.news-card a {
 display: block;
 width: 100%;
 height: 100%;
 background: #fff;
 border-radius: 2px;
 padding: clamp(8px, 2vw, 20px);
}
.news-card-thumb {
 width: 100%;
 aspect-ratio: 3 / 2;
 overflow: hidden;
 border-radius: 2px;
}
.news-card-thumb img {
 width: 100%;
 height: 100%;
 object-fit: contain;
 transition: opacity 0.3s ease;
}
.news-card a:hover .news-card-thumb img {
 opacity: 0.75;
}
.news-card-body {
 padding-top: 0.5em;
}
.news-card-title {
 font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
 font-size: clamp(1.3rem, 1.5vw, 1.6rem);
 letter-spacing: normal;
 line-height: 1.6em;
 display: -webkit-box;
}
.news-card-date {
 display: inline-block;
 font-size: clamp(1rem, 1.2vw, 1.2rem);
 letter-spacing: 0.06em;
 color: var(--base-bluegray);
}
.news-card-cat {
 display: inline-block;
 margin-left: 0.8em;
 font-size: clamp(1rem, 1.2vw, 1.2rem);
 letter-spacing: 0.04em;
 color: var(--base-beige);
}
@media screen and (max-width: 768px) {
 .news-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
 }
 .news-related .news-grid .news-card:nth-child(n+3) {
  display: none;
 }
}
/* --- ページネーション --- */
#pagination {
 display: flex;
 justify-content: center;
 margin: clamp(1.6rem, 2vw, 2rem) auto clamp(2rem, 4vw, 4rem);
}
#pagination ul.page-numbers {
 display: flex;
 align-items: center;
 gap: 8px;
 list-style: none;
}
#pagination .page-numbers {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 40px;
 height: 40px;
 padding: 0 0.6em;
 font-size: 1.5rem;
 font-weight: 600;
 color: var(--base-black);
 border-radius: 2px;
}
#pagination a.page-numbers:not(.current) {
 background-color: #fff;
}
#pagination .page-numbers.current, #pagination a.page-numbers:hover {
 background: var(--base-beige);
 color: var(--base-white);
}
/* --- 記事詳細（NEWS） --- */
/* 記事本体（タイトルヘッダー＋本文＋シェア＋メタ）を白背景のボックスで囲む。
   .news-grid と同じ max-width/width にして一覧グリッドと左右端を揃える（404にも .article-single 経由で適用される）。 */
.article-single {
 max-width: 1080px;
 width: 90%;
 margin: clamp(1rem, 2vw, 2rem) auto;
 padding: clamp(2.4rem, 4vw, 4.8rem) clamp(2.2rem, 4vw, 4rem);
 background: #fff;
 border-radius: 2px;
}
.article-single-head {
 max-width: 820px;
 margin: 0 auto clamp(2rem, 3vw, 3rem);
 text-align: center;
 border-bottom: 1px solid rgba(74, 70, 66, 0.2);
 padding-bottom: clamp(2rem, 3vw, 3rem);
}
.article-date {
 display: inline-block;
 font-size: 1.4rem;
 letter-spacing: 0.06em;
 color: var(--base-bluegray);
}
.article-single-head .category-list {
 display: inline-block;
 margin-left: 1em;
 font-size: 1.3rem;
 color: var(--base-beige);
}
.article-single-head .pagettl {
 margin-top: 0.6rem;
 font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
 font-size: clamp(2rem, 2.8vw, 2.8rem);
 line-height: 1.6em;
}
.entry-content {
 max-width: 820px;
 margin: 0 auto;
 font-size: clamp(1.5rem, 1.6vw, 1.6rem);
 line-height: 2em;
}
.entry-content p {
 /* px固定にする。em だと段落自身のフォントサイズに比例するため、
    見出し代わりの大きい段落（WPの has-large-font-size ＝36px）だけ
    下の余白が 64.8px になり、本文（16px→28.8px）と揃わない。 */
 margin-bottom: 24px;
}
.entry-content h1, .entry-content h2 {
 margin: 3rem 0 2rem;
 position: relative;
 font-size: clamp(1.8rem, 4vw, 2.8rem);
 font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.entry-content h3 {
 margin: 0 0 1em;
 font-size: clamp(1.7rem, 1.9vw, 2rem);
 line-height: 1.6em;
}
.entry-content h4 {
 margin: 0 0 0.8em;
 font-size: clamp(1.5rem, 1.6vw, 1.7rem);
 line-height: 1.6em;
}
.entry-content ul,
.entry-content ol {
 margin: 0 0 1.8em 1.4em;
}
.entry-content ul li {
 list-style: disc;
}
.entry-content ol li {
 list-style: decimal;
}
.entry-content li {
 margin-bottom: 0.6em;
 line-height: 1.8em;
}
/* --- リンク（本文中。common.css の a{color:inherit;text-decoration:none;display:inline-block} を本文用に上書き） --- */
.entry-content a {
 display: inline;
 color: var(--base-beige);
 text-decoration: underline;
 text-underline-offset: 0.15em;
 overflow-wrap: break-word;
}
.entry-content a:hover {
 text-decoration: none;
}
/* --- 強調・ハイライト --- */
.entry-content strong,
.entry-content b {
 font-weight: 700;
}
.entry-content mark {
 padding: 0 0.15em;
 background-color: rgba(59, 152, 188, 0.18);
 color: inherit;
}
/* --- 引用（blockquote） --- */
.entry-content blockquote {
 margin: 1.8em 0;
 padding: 0.6em 1.2em;
 border-left: 3px solid var(--base-gray);
 color: var(--base-darkgray);
}
.entry-content blockquote p:last-child {
 margin-bottom: 0;
}
/* --- コード（インライン code・pre） --- */
.entry-content code {
 padding: 0.1em 0.4em;
 border-radius: 2px;
 background-color: rgba(74, 70, 66, 0.08);
 font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
 font-size: 0.9em;
}
.entry-content pre {
 margin: 0 0 1.8em;
 padding: 1em 1.2em;
 border-radius: 2px;
 background-color: rgba(74, 70, 66, 0.08);
 overflow-x: auto;
 line-height: 1.7em;
}
.entry-content pre code {
 padding: 0;
 background: none;
}
/* --- 図版（figure / figcaption）。figure.wp-block-table は下でより高い詳細度で上書き --- */
.entry-content figure {
 margin: 2em auto;
}
.entry-content figure img {
 width: auto;
 max-width: 100%;
 height: auto;
 margin: 0 auto;
}
.entry-content figcaption {
 margin-top: 0.6em;
 font-size: clamp(1.2rem, 1.3vw, 1.3rem);
 line-height: 1.8em;
 color: var(--base-bluegray);
 text-align: center;
}
/* --- 画像ブロック（wp-block-image：エディタ挿入画像の配置） --- */
.entry-content .wp-block-image {
 max-width: 100%;
 margin: 2em auto;
 text-align: center;
}
.entry-content .wp-block-image .alignleft,
.entry-content .wp-block-image .alignright,
.entry-content .wp-block-image .aligncenter,
.entry-content .wp-block-image.is-resized {
 display: table;
 margin: 2em auto;
}
.entry-content .wp-block-image img {
 width: auto;
 max-width: 100%;
 height: auto;
 margin: 0 auto;
}
/* --- ボタンブロック（wp-block-button） --- */
.entry-content .wp-block-button {
 margin: 2em auto;
 text-align: center;
}
.entry-content .wp-block-button__link {
 display: inline-block;
 padding: 0.8em 2em;
 border-radius: 2px;
 background-color: var(--base-beige);
 color: var(--base-white);
 font-weight: 600;
 text-decoration: none;
 transition: opacity 0.2s ease-out;
}
.entry-content .wp-block-button__link:hover {
 opacity: 0.75;
 text-decoration: none;
}
/* --- 区切り線（wp-block-separator／hr：common.css の hr{border:0} を本文用に打ち消す） --- */
.entry-content hr,
.entry-content .wp-block-separator {
 height: 0;
 margin: 3rem auto;
 border: 0;
 border-top: 1px solid var(--base-gray);
}
.entry-content .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
 max-width: 200px;
}
/* --- 埋め込み（wp-block-embed：エディタ挿入のYouTube等をレスポンシブ化。単体HTMLの .youtube-container とは別系統） --- */
.entry-content .wp-block-embed {
 margin: 1.8em auto;
}
.entry-content .wp-block-embed.is-type-video .wp-block-embed__wrapper {
 position: relative;
 width: 100%;
 aspect-ratio: 16 / 9;
}
.entry-content .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
}
/* --- ギャラリー（wp-block-gallery） --- */
.entry-content .wp-block-gallery {
 margin: 2em auto;
 justify-content: center;
}
/* --- 見出し h5・h6（h2>h3>h4>h5>h6 の階層。font-weight:600 は common.css の h1〜h6 で付与済み） --- */
.entry-content h5 {
 margin: 0 0 0.8em;
 font-size: clamp(1.4rem, 1.5vw, 1.5rem);
 line-height: 1.6em;
}
.entry-content h6 {
 margin: 0 0 0.8em;
 font-size: clamp(1.3rem, 1.4vw, 1.4rem);
 line-height: 1.6em;
 color: var(--base-darkgray);
}
/* --- テーブル（メディア情報等。エディタの「テーブル」ブロック＝figure.wp-block-table を想定） --- */
.entry-content .wp-block-table {
 margin: 0 0 1em;
 overflow-x: auto; /* SPでは横スクロールで欠け防止 */
}
.entry-content table,
.wp-block-table table {
 width: 100%;
 border-collapse: collapse;
 border-spacing: 0;
 vertical-align: middle;
 font-feature-settings: "palt" 1;
}
.entry-content th, .entry-content td,
.wp-block-table th, .wp-block-table td {
 padding: 1em 0.8em;
 border: 1px solid rgba(74, 70, 66, 0.25);
 text-align: left;
 vertical-align: middle;
 word-break: normal;
 font-size: 0.9em;
 line-height: 1.6em;
}
/* 1行目は見出し行（エディタのテーブルはthead無しのtbody構成のため tr:first-of-type で対応） */
.entry-content table tr:first-of-type th,
.entry-content table tr:first-of-type td,
.wp-block-table table tr:first-of-type th,
.wp-block-table table tr:first-of-type td {
 padding: 0.6em 0.8em;
 text-align: center;
 white-space: nowrap;
 background: rgba(74, 70, 66, 0.06);
 font-family: "Noto Serif JP", serif;
 font-weight: 600;
}
/* NEWバッジ（セル内の em で入力） */
.entry-content td em,
.wp-block-table td em {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-style: normal;
 font-size: 0.95em;
 line-height: 1em;
 padding: 2px 5px 3px;
 margin-right: 5px;
 border-radius: 2px;
 background-color: var(--base-beige);
 color: var(--base-white);
}
/* テーブル下の注記 */
.entry-content .cap {
 margin-bottom: 0.4em;
 font-size: clamp(1.2rem, 1.3vw, 1.3rem);
 line-height: 1.8em;
 color: var(--base-darkgray);
}
.youtube-container {
 position: relative;
 width: 100%;
 aspect-ratio: 16 / 9;
 margin: 1.8em 0;
}
.youtube-container iframe {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
}
/* --- シェアボタン（記事詳細） --- */
.arti-sharing-wrapper {
 max-width: 820px;
 margin: clamp(6rem, 6vw, 8rem) auto;
}
.arti-sharing-inner {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 gap: 12px;
}
.arti-sharing-inner .item {
 display: inline-flex;
}
.arti-sharing-inner .link {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 90px;
 gap: 0.5em;
 padding: 0.1em 1em;
 border: 1px solid rgba(74, 70, 66, 0.35);
 border-radius: 2px;
 font-size: 1.2rem;
 color: var(--base-black);
 transition: opacity 0.3s ease;
}
.arti-sharing-inner .link:hover {
 opacity: 0.6;
}
.arti-sharing-inner svg {
 width: 18px;
 height: 18px;
}
.arti-sharing-inner svg.svg-line {
 width: 24px;
 height: 24px;
}
/* --- メタ情報（カテゴリー・タグ） --- */
.meta {
 max-width: 820px;
 margin: clamp(1.6rem, 2vw, 2.4rem) auto 0;
 display: flex;
 flex-direction: column;
 gap: 0.8em;
}
.meta .category-list,
.meta .tags-list {
 display: flex;
 align-items: flex-start;
 flex-wrap: wrap;
 gap: 0.6em;
}
.meta .group {
 display: inline-block;
 padding-top: 0.2em;
 font-size: 1.2rem;
 letter-spacing: 0.1em;
 color: var(--base-bluegray);
}
.meta ul {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5em;
}
.meta ul li a {
 display: inline-flex;
 align-items: center;
 padding: 0.02em 1em;
 border-radius: 2px;
 font-size: 1.3rem;
 font-weight: 600;
 color: var(--base-beige);
 transition: opacity 0.3s ease;
 background: rgba(150, 163, 173, 0.2);
}
.meta ul li a:hover {
 opacity: 0.6;
}
/* --- 前後記事ナビ（楓式：中央仕切り線1本・サムネイルは外側の端に配置） --- */
.post-navigation {
 max-width: 1080px;
 width: 90%;
 margin: clamp(3rem, 4vw, 4rem) auto 0;
 display: grid;
 grid-template-columns: repeat(2, 1fr);
}
.post-navigation li.nav-previous {
 padding-right: clamp(20px, 3vw, 40px);
}
.post-navigation li.nav-next {
 padding-left: clamp(20px, 3vw, 40px);
 border-left: 1px solid rgba(74, 70, 66, 0.2); /* 中央の仕切り線はnav-next側のborderのみで表現（二重線防止） */
}
.post-navigation a {
 display: grid;
 grid-template-columns: clamp(100px, 12vw, 130px) 1fr;
 grid-template-rows: auto 1fr;
 align-items: center;
 column-gap: clamp(8px, 1.2vw, 12px);
 row-gap: 0.6em;
 padding: clamp(1rem, 2vw, 1.6rem) 0;
}
.post-navigation .meta-nav {
 grid-column: 2;
 grid-row: 1;
 display: block;
 font-size: clamp(1.4rem, 1.6vw, 1.6rem);
 font-weight: 600;
 letter-spacing: 0.1em;
 color: var(--base-beige);
}
.post-navigation .nav-thumb {
 grid-column: 1;
 grid-row: 1 / 3;
 display: block;
 width: 100%;
 aspect-ratio: 3 / 2;
 overflow: hidden;
 border-radius: 2px;
 background: #fff;
}
.post-navigation .nav-thumb img {
 width: 100%;
 height: 100%;
 object-fit: contain;
 transition: opacity 0.3s ease;
}
.post-navigation a:hover .nav-thumb img {
 opacity: 0.75;
}
.post-navigation .nav-title {
 grid-column: 2;
 grid-row: 2;
 display: -webkit-box;
 font-size: 1.4rem;
 line-height: 1.6em;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
/* nav-next は列順を反転し、サムネイルを外側（右端）・テキストを内側（左）に置く */
.post-navigation .nav-next a {
 grid-template-columns: 1fr clamp(100px, 12vw, 130px);
}
.post-navigation .nav-next .nav-thumb {
 grid-column: 2;
}
.post-navigation .nav-next .meta-nav,
.post-navigation .nav-next .nav-title {
 grid-column: 1;
 text-align: right;
}
@media screen and (max-width: 768px) {
 .article-single {
  width: 100%;
 }
 .post-navigation {
  grid-template-columns: 1fr;
  row-gap: 2rem;
 }
 .post-navigation li.nav-previous {
  padding-right: 0;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(74, 70, 66, 0.2); /* SPは縦罫線ではなく区切りの横罫線1本に切替 */
 }
 .post-navigation li.nav-next {
  padding-left: 0;
  border-left: none;
 }


}
/* --- 関連記事 --- */
.news-related {
 max-width: 1080px;
 width: 90%;
 margin: clamp(4rem, 6vw, 6rem) auto;
}
.news-related .news-grid {
 width: 100%;
}
.news-related .title {
 text-align: center;
 margin-bottom: 2rem;
 font-size: clamp(1.6rem, 2vw, 2.4rem);
 font-weight: 600;
 letter-spacing: 0.1em;
 color: var(--base-beige);
}
.news-related .news-more {
 margin-top: 0;
 justify-content: center;
}
/* --- 404 / COMING SOON --- */
.notfound {
 max-width: 820px;
 margin: 0 auto;
 padding: clamp(6rem, 12vw, 12rem) 0;
 text-align: center;
 font-size: clamp(1.8rem, 2.4vw, 2.4rem);
 letter-spacing: 0.2em;
 color: var(--base-darkgray);
}
/* --- 固定ページ：メディア情報（サブナビ・ページ内タイトル） --- */
.gnav .menu {
  max-width: 820px;
  margin: 0 auto clamp(1.6rem, 2vw, 2.4rem);
  display: flex;
  justify-content: center;
  gap: clamp(5px, 1vw, 12px);
}
.gnav .menu li {
  flex: 1 1 0%;
}
.gnav .menu li a {
 display: block;
 text-align: center;
 padding: 0.2em;
 border: 1px solid rgba(74, 70, 66, 0.35);
 border-radius: 2px;
 font-size: clamp(1.3rem, 1.4vw, 1.4rem);
 font-feature-settings: "palt" 1;
 letter-spacing: 0.06em;
 color: var(--base-black);
 transition: opacity 0.3s ease, background 0.3s ease;
}
.gnav .menu li a:hover {
 background: rgba(74, 70, 66, 0.06);
}
.ttl-media {
 max-width: 820px;
 margin: clamp(3rem, 4vw, 4rem) auto clamp(1.6rem, 2vw, 2rem);
 font-size: clamp(1.8rem, 2.2vw, 2.2rem);
 line-height: 1.6em;
 color: var(--base-beige);
 text-align: center;
}
/* --- バナーエリア --- */
.banner-area {
 max-width: 1080px;
 width: 90%;
 margin: clamp(3rem, 4vw, 4rem) auto 0;
}
.banner-area a {
 display: block;
}
.flexbox.banner {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 20px;
 list-style: none;
}
.flexbox.banner li {
 width: 23%;
 max-width: 260px;
}
.flexbox.banner li img {
 width: 100%;
 height: auto;
 border-radius: 2px;
}
@media screen and (max-width: 768px) {
 .flexbox.banner li {
  width: 48%;
 }
}