@charset "UTF-8";

/* ==========================================================
MOBILE LAYOUT FIX (PX Specification)
Target: Max-width 768px (PHP側で制御)
========================================================== */

/* 1. リセット & 変数定義 (px固定) */
html, body {
background-color: #000;
height: 100vh;
height: 100dvh;
overflow-y: auto !important;
font-weight: 500;
}
:root {
--w-gap: 8px;    /* 左右の余白 */
--h-top: 20px;    /* ヘッダーの高さ */
--w-msg: 24px;    /* 右側エリア幅 */
--c-line: rgba(255, 255, 255, 0.4);
--w-line: 1px;
}

/* フォントサイズ調整 */
.pcex--ticker-item {
font-size: 4vw;
}

/* 2. シェル（外枠）のGrid定義 */
.pcex--shell {
display: grid;
height: auto;
min-height: 100vh;
margin-bottom: 10px;

/* 左余白 | メイン(可変) | 右スペース(固定) | 右余白 */
grid-template-columns: var(--w-gap) 1fr var(--w-msg) var(--w-gap);

/* Head | Logo | Main | Nav(★追加) | News | Date | Foot */
/* auto を1つ増やして6行から7行へ */
grid-template-rows: var(--h-top) auto auto auto auto auto auto !important;

grid-template-areas:
"head    head       head     head"
"gap-l   base-logo  btn      gap-r"
"gap-l   main-body  .        gap-r"
"gap-l   nav-body   .        gap-r" /* ★ここに Nav を追加 */
"gap-l   base-news  .        gap-r"
"gap-l   base-date  .        gap-r"
"foot    foot       foot     foot" !important;
}

/* 3. 固定ヘッダー */
.pcex--head {
grid-area: head;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--h-top);
background: #000;
z-index: 9999;
border-bottom: var(--w-line) solid var(--c-line);
padding: 0 var(--w-gap);
display: flex;
align-items: center;
}
/* PC用装飾解除 */
.pcex--head:before, .pcex--head:after {
}

/* ----------------------------------------------------------
パンくずリスト修正 (Breadcrumb Fix)
---------------------------------------------------------- */

/* 1. 親要素の設定 */
ul.pankuzu_area {
display: flex !important;
width: 100% !important;
max-width: 100% !important; /* 【重要】画面幅を超えない設定 */
box-sizing: border-box;
padding-right: 10px;        /* 右端の余白 */
overflow: hidden;
white-space: nowrap;
flex-wrap: nowrap;
align-items: center;
}

/* 2. 固定ラベル部分（縮小禁止） */
ul.pankuzu_area li {
flex: 0 0 auto;
display: block;
white-space: nowrap;
}

/* 3. タイトル部分（省略対象） */
.pankuzu_truncate {
display: block !important;
flex: 1 1 0% !important;    /* 残りの幅を埋める */
min-width: 0 !important;    /* 押し出し防止 */

/* 省略記号設定 */
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100%;
}

/* ラベル切り替え */
.sp-label { display: inline; }
.pc-label { display: none; }


/* 4. メニューボタン (固定配置) */
.pcex--btn {
position: fixed;
top: var(--h-top);
right: var(--w-gap);
width: calc(var(--w-msg) + 1px);
height: 60px;
z-index: 9990;
background: #000;
display: flex !important;
align-items: center;
justify-content: center;
border-bottom: var(--w-line) solid var(--c-line);
border-right: var(--w-line) solid var(--c-line);
border-left: var(--w-line) solid var(--c-line);
}
.pcex--btn span {
display: inline-block;
transform: rotate(90deg);
font-size: 14px;
font-weight: 300;
position: relative;
right: -1px;
letter-spacing: .02em;
}


/* 5. Messageエリア (右端固定) */
.pcex--message {
position: fixed !important;
top: 0;
bottom: 0;
right: var(--w-gap);
width: var(--w-msg);
z-index: 10;
grid-area: auto !important;
border-right: var(--w-line) solid var(--c-line);
pointer-events: none;
}


/* 6. コンテンツエリア定義 */

/* Base要素の分解 */
.pcex--base {
display: contents !important;
}

/* ロゴエリア */
.base-logo {
grid-area: base-logo;
display: flex !important;
align-items: center;
border-bottom: var(--w-line) solid var(--c-line);
border-right: var(--w-line) solid var(--c-line);
min-height: 60px; 
}
.base-logo img {
flex: 0 0 auto;
width: 150px;
padding: 10px;
}

/* メインコンテンツ */
.pcex--main {
grid-area: main-body;
overflow: visible;
height: auto !important;
border-right: var(--w-line) solid var(--c-line);
}

/* ナビゲーションエリア (復活) */
.pcex--nav {
display: block !important; /* 表示させる */
grid-area: nav-body;
border-right: var(--w-line) solid var(--c-line);
border-top: var(--w-line) solid var(--c-line); /* Mainとの境界線 */
width: 100%;
/* 必要に応じて内部の余白調整 */
padding-bottom: 20px;
}

/* ニュースエリア */
.base-news {
grid-area: base-news;
display: block !important;
border-top: var(--w-line) solid var(--c-line);
border-right: var(--w-line) solid var(--c-line);
}

/* 日付エリア */
.base-date {
grid-area: base-date;
display: block !important;
width: 100%;
border-right: var(--w-line) solid var(--c-line);
padding: 20px 0 30px;
margin: 0;
}
.base-date img {
width: 96%;
height: auto;
max-width: initial;
display: block;
margin: 0 auto;
}
/* フッター */
.pcex--foot {
grid-area: foot;
display: flex;
justify-content: center;
padding: 10px var(--w-gap) ;
border-top: var(--w-line) solid var(--c-line);
background: #000;
z-index: 99;
position: fixed;
bottom: 0;
width: 100%;
}
.pcex--foot:before, .pcex--foot:after {}


/* 7. 非表示要素・調整 */
.pcex--base_tit, 
.pcex--main_tit, 
.pcex--nav_tit, 
.base-news-tit {
display: none !important;
}

/* Gapエリア */
.pcex--gap-l {
display: block !important;
border-right: var(--w-line) solid var(--c-line);
}
.pcex--gap-r {
display: block !important;
/* 右端はボーダーなし */
}

/* ==========================================================

以下、部分修正

========================================================== */
.obj-maintit {
overflow: initial;
width: 100%;
height: 85dvh;
}
.obj-maintit img {
animation: top-bg-scroll 90s linear infinite;
}

/* ==========================================================
top teaser
========================================================== */
.pcex--main .teaser-mv {
width: 100%;
margin: 0 auto;
height:  85dvh;
padding: 0;
}
.pcex--teaser .teaser-mv-img {
padding: 10dvh 0 0;
}
.pcex--teaser .teaser-scroll {
display: block;
}
.pcex--teaser .teaser-mv-img img {
width: 45dvh;
max-width: inherit;
height: auto;
display: block;
margin: 0 auto;
}
.pcex--teaser .teaser-intro {
padding: 80px 0 80px;
}
.pcex--teaser .teaser-cts-img img {
width: 60vw;
margin-bottom: 40px;
}
.pcex--teaser .teaser-cts-tex p {
font-size: 0.9em;
text-align: center;
}
.pcex--teaser .teaser-btn {
font-size: 1.1rem;
}
.pcex--teaser .teaser-cts {
padding: 80px 0 80px;
}
.pcex--teaser .teaser-intro-tit {
font-size: 1.4em;
margin-bottom: 24px;
text-align: center;
line-height: 1.5;
font-weight: 500;
}
.teaser-intro-tex p {
font-size: .98em;
font-weight: 400;
}

/* ==========================================================

以下、部分修正

========================================================== */
.entry-presents{
font-size: .8em;
padding-top: 0.6em !important;
padding-bottom: 0.9em !important;
}
.entry-wrap .entry-title {
font-size: 1.2em;
padding-top: 0.6em !important;
padding-bottom: 0.9em !important;
line-height: 1;
}
.entry-info {
font-size: .7em;
padding-top: 0.6em !important;
padding-bottom: 0.9em !important;
}
.entry-detail{
font-size: .94em;
font-weight: 400;
}
.entry-wrap .entry-detail p{
line-height: 2em;
}

[id^="creator-"] .entry-img{
aspect-ratio: 1 / 1;
}


/* ==========================================================
nav
========================================================== */

/* 1. コンテナ定義 */
.pcex--nav {
display: flex !important;
flex-wrap: wrap !important;
align-content: flex-start;
padding: 0 !important;
width: 100%;
}

/* 2. デフォルト設定（Session等）: 2列 & 16:9 */
.pcex--nav .nav-item {
width: 50% !important;
box-sizing: border-box;
border-bottom: var(--w-line) solid var(--c-line);
border-right: var(--w-line) solid var(--c-line);
}

/* 画像比率 16:9 */
.pcex--nav .nav-item img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
aspect-ratio: 16 / 9; /* ★Session用 */
}

/* 偶数番目の右ボーダーを消す（2列時） */
.pcex--nav .nav-item:nth-child(2n) {
border-right: none;
}


/* 3. Creator / Booth 専用設定: 3列 & 1:1 */
body.post-type-archive-creator .pcex--nav .nav-item,
body.single-creator .pcex--nav .nav-item,
body.post-type-archive-booth .pcex--nav .nav-item,
body.single-booth .pcex--nav .nav-item {
width: 33.333% !important;
}

/* 画像比率 1:1 */
body.post-type-archive-creator .pcex--nav .nav-item img,
body.single-creator .pcex--nav .nav-item img,
body.post-type-archive-booth .pcex--nav .nav-item img,
body.single-booth .pcex--nav .nav-item img {
aspect-ratio: 1 / 1; /* ★Creator/Booth用 */
}

/* 3列時のボーダー調整 */
/* 一旦2列用の指定をリセット */
body.post-type-archive-creator .pcex--nav .nav-item:nth-child(2n),
body.single-creator .pcex--nav .nav-item:nth-child(2n),
body.post-type-archive-booth .pcex--nav .nav-item:nth-child(2n),
body.single-booth .pcex--nav .nav-item:nth-child(2n) {
border-right: var(--w-line) solid var(--c-line);
}
/* 3列ごとの右ボーダーを消す */
body.post-type-archive-creator .pcex--nav .nav-item:nth-child(3n),
body.single-creator .pcex--nav .nav-item:nth-child(3n),
body.post-type-archive-booth .pcex--nav .nav-item:nth-child(3n),
body.single-booth .pcex--nav .nav-item:nth-child(3n) {
border-right: none;
}

.pcex--nav a img{
padding: 0;
}


/* ==========================================================
event
========================================================== */
.event-bnr-area.type_p7 {
background-size: cover;
height: 28vw;
}

.event-bnr-area .p7_logo {
width: 24vw;
position: absolute;
left: 3%;
top: 5vw;
}
.event-bnr-area h2 {
position: absolute;
right: 3%;
top: 10vw;
font-size: 3.8vw;
font-weight: 500;
}
h3.catch_phrase {
border-bottom: none;
font-size: 1.4em;
margin-top: 3.5em;
font-weight: 300;
}
.catch_phrase_text {
font-size: 0.9em;
line-height: 1.8em;
font-weight: 400;
margin-bottom: 6em;
color: rgba(255, 255, 255, 0.7);
}
h3 {
font-size: 1.2em;
margin-top: 2em;
margin-bottom: 1em;
}
.pcex--main-main_layout-wrap {
padding: 0 3%;
font-size: 1em;
}
.ticket-body {
padding: 20px 6px;
}
.price-note {
font-size: 0.6em;
}
.ticket-header {
border-right: 1px solid #000;
}
.col-action .ticket-header{
display: none;
}
.ticket-btn {
font-size: 1.1rem;
}
ul.caution li {
margin-left: 1.3em;
}
.event-info-dl {
font-size: 1em;
}
.event-info-dl .ticket-btn {
margin: 0 auto;
display: block;
}

.event-bnr-area.type_pcwe {
height: 54vw;
}
.event-bnr-area .pcwe_logo {
width: 35vw;
left: 3%;
top: 19vw;
}
.type_pcwe h2 {
position: absolute;
right: 3%;
bottom: 10px;
font-size: 2.8vw;
font-weight: 500;
top: initial;
}

/* ==========================================================
アーカイブページ
========================================================== */
.archive--main {
min-height: 60vh;
}
.archive--main .main_logo {
width: 48vw;
margin-bottom: 10vw;
}
.archive--main .main_tex p:nth-child(1) {
font-size: 2.7em;
}
.archive--main .main_tex p:nth-child(2) {
font-size: 0.7em;
}

/* ==========================================================
MOBILE MENU OPTIMIZATION (768px or less)
========================================================== */
.pcex--menu-overlay {
top: 20px;
right: 33px;
bottom: 20px;
width: calc(100% - (var(--w-gap) * 2) - calc(var(--w-msg) - -1px));
background-image: url('../../images/demo/bgx.jpg');
background-size: 100vw 100vh;
background-repeat: no-repeat;
background-position: center center;
border-left: 0;
}
/* アニメーションの調整（スライド量をスマホ用に適正化） */
@keyframes fadeInRight {
from { opacity: 0; transform: translateX(0px); }
to { opacity: 1; transform: translateX(0); }
}

.pcex--menu-overlay .menu-inner {
padding: 20px; /* 余白をスマホサイズに凝縮 */
}

.pcex--menu-overlay ul {
text-align: left; /* スマホでは左寄せの方が視認性が高い */
}
.pcex--menu-overlay li {
margin-bottom: 0; /* paddingで制御するためリセット */
}
.pcex--menu-overlay a {
font-size: 1rem;
padding: 20px 0;
border-bottom:  none;
}
/* 最後の項目の線は不要 */
.pcex--menu-overlay li:last-child a {
border-bottom: none;
}