@charset "UTF-8";
/*
Theme Name: PODCAST EXPO - Base Styles
Description: サイト全体の共通スタイル・リセット・グリッド定義
*/

/* ----------------------------------------------------------
MODERN RESET (2026 Optimized)
---------------------------------------------------------- */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset,
form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer,
header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}body {line-height: 1;}img {vertical-align: bottom;}


/* ----------------------------------------------------------
BODY & GLOBAL SETTINGS
---------------------------------------------------------- */
html{
  background-color: #000;
}
body {
margin: 0;
font-family: 'Jost', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "YuGothic", "游ゴシック体", "Meiryo", sans-serif;
font-size: 16px;
font-feature-settings: "palt";
overflow: hidden;
height: 100vh;
background-image: url('../images/base/base-bg-pcex.jpg');
/* background-image: url('../images/demo/bg3.jpg'); */
background-size: 100vw 100vh;
background-repeat: no-repeat;
background-position: center center;
color: #fff;
}

body.pe-teaser {
overflow: inherit;
height: inherit;
background: inherit;
}

.pc { display: block !important; }
@media (max-width: 768px) {
.pc { display: none !important; }
}

.sp { display: none !important; }
@media (max-width: 768px) {
.sp { display: block !important; }
}


/* ----------------------------------------------------------
LINK RESET
---------------------------------------------------------- */
a {
color: #fff !important;
text-decoration: none;
}

a:hover {
color: #000;
}

img {
width: 100%;
display: block;
}


/* ----------------------------------------------------------
SCROLLBAR HIDDEN
---------------------------------------------------------- */
.pcex--base,
.pcex--nav,
.pcex--main {
-ms-overflow-style: none;
scrollbar-width: none; 
}

.pcex--base::-webkit-scrollbar,
.pcex--nav::-webkit-scrollbar,
.pcex--main::-webkit-scrollbar {
display: none;
}


/* ----------------------------------------------------------
LAYOUT CONFIG (VARIABLES)
---------------------------------------------------------- */
:root {
/* 幅の設定 */
--w-gap:   20px;
--w-base: 18vw;
--w-nav:  16vw;
--w-side:  60px;

/* 高さの設定 */
--h-top:   24px;    /* Headerの高さ */
--h-tit:   40px;    /* Title行の高さ */
--h-foot:  24px;    /* Footerの高さ */

/* 線の設定 */
--c-line: rgba(255, 255, 255, 0.5);
/* --c-line: rgba(0, 0, 0, 0.5); */
--w-line: 1px;

/* エントリー（記事）用余白 */
--entry-lr-gap: 2%;
--entry-btm-gap: 2%;
}

*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}


/* ----------------------------------------------------------
GRID LAYOUT DEFINITION (.pcex--shell)
---------------------------------------------------------- */
.pcex--shell {
display: grid;
width: 100%;
height: 100%;

/* 列定義: Gap | Base | Nav | Main | Side | Gap */
grid-template-columns: 
var(--w-gap) 
var(--w-base) 
var(--w-nav) 
minmax(0, 1fr) 
var(--w-side) 
var(--w-gap);

/* 行定義: Head | Title | Body | Foot */
grid-template-rows: 
var(--h-top) 
var(--h-tit) 
minmax(0, 1fr) 
var(--h-foot);

/* エリア配置 */
grid-template-areas:
"head   head      head      head      head     head"
"gap-l  base-tit  nav-tit   main-tit  btn      gap-r"
"gap-l  base-body nav-body  main-body message  gap-r"
"foot   foot      foot      foot      foot     foot";
}

/* ----------------------------------------------------------
BORDER MANAGEMENT
---------------------------------------------------------- */
.pcex--head, .pcex--foot,
.pcex--gap-l, .pcex--gap-r,
.pcex--base_tit, .pcex--nav_tit, .pcex--main_tit, .pcex--btn,
.pcex--base, .pcex--nav, .pcex--main, .pcex--message {
border-color: var(--c-line);
border-style: solid;
border-width: 0;
position: relative;
}

.pcex--head { border-bottom-width: var(--w-line); }
.pcex--foot { border-top-width: var(--w-line); }

.pcex--gap-l { border-right-width: var(--w-line); }

.pcex--base_tit,
.pcex--nav_tit,
.pcex--main_tit,
.pcex--btn {
border-right-width: var(--w-line);
border-bottom-width: var(--w-line);
}

.pcex--base,
.pcex--nav,
.pcex--main,
.pcex--message {
border-right-width: var(--w-line);
}

/* ヘッダー・フッター左右の縦線（疑似要素） */
.pcex--head:before,
.pcex--foot:before {
content: '';
width: var(--w-gap);
height: var(--h-top);
border-right: var(--w-line) solid var(--c-line);
position: absolute;
left: 0;
top: 0;
}

.pcex--head:after,
.pcex--foot:after {
content: '';
width: var(--w-gap);
height: var(--h-top);
border-left: var(--w-line) solid var(--c-line);
position: absolute;
right: 1px;
top: 0;
}


/* ----------------------------------------------------------
AREA STYLES (Header, Footer, Gaps, Titles)
---------------------------------------------------------- */
.pcex--head {
grid-area: head;
display: flex;
align-items: center;
font-size: 0.5em;
padding: 0 var(--w-gap);
}

.pcex--foot {
grid-area: foot;
display: flex;
align-items: center;
font-size: 0.5em;
padding: 0 var(--w-gap);
}

.pcex--gap-l { grid-area: gap-l; }
.pcex--gap-r { grid-area: gap-r; }

.pcex--base_tit {
grid-area: base-tit;
display: flex;
align-items: center;
font-weight: 500;
padding-left: 8px;
}

.pcex--nav_tit {
grid-area: nav-tit;
display: flex;
align-items: center;
font-weight: 500;
padding-left: 8px;
}

.pcex--main_tit {
grid-area: main-tit;
display: flex;
align-items: center;
font-weight: 500;
padding-left: 8px;
}

.pcex--btn { 
grid-area: btn; 
display: flex; 
align-items: center; 
justify-content: center; 
cursor: pointer;
background: #000;
color: #fff;
}


/* ----------------------------------------------------------
BODY AREA STYLES (Base, Nav, Main, Message)
---------------------------------------------------------- */
.pcex--base {
grid-area: base-body;
/* Flexで縦並び・スクロール制御（修正統合済み） */
display: flex !important;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
padding: 0;
}

.pcex--nav {
grid-area: nav-body;
overflow-y: auto;
}

.pcex--main {
grid-area: main-body;
overflow-y: auto;
}

.pcex--message { 
grid-area: message;
overflow: hidden;
writing-mode: horizontal-tb;
background: var(--bg-msg);
}


/* ----------------------------------------------------------
BREADCRUMBS (Pankuzu)
---------------------------------------------------------- */
.pcex--head .pankuzu_area {
display: flex;
list-style: none;
}

.pcex--head .pankuzu_area li {
display: flex;
align-items: center;
margin: 0 0 0 1em;
}
.pcex--head .pankuzu_area li:not(:last-child)::after {
content: "→";
margin: 0 0 0 1em;
}
.pcex--head .pankuzu_area a {
text-decoration: none;
color: #000;
}


/* ----------------------------------------------------------
FOOTER COPYRIGHT
---------------------------------------------------------- */
.cr {
padding: 0 1em;
}


/* ----------------------------------------------------------
TICKER (Message Area Animation)
---------------------------------------------------------- */
.pcex--ticker-wrap {
display: flex;
flex-direction: column;
width: 100%;
animation: ticker-scroll 40s linear infinite;
}

.pcex--ticker-item {
writing-mode: vertical-rl;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
font-size: 2em;
font-weight: 500;
}

@keyframes ticker-scroll {
0% { transform: translateY(0); }
100% { transform: translateY(-50%); }
}


/* ----------------------------------------------------------
BASE COLUMN ITEMS (Logo, News, Date)
---------------------------------------------------------- */
/* Logo Area */
.base-logo {
flex: 0 0 auto;
}

.base-logo img {
width: 100%;
height: auto;
}

/* Date Image Area */
.base-date {
flex: 0 0 auto;
position: static !important;
width: 95%;
margin: 10px auto;
}

/* News List Area (Center Scrollable) */
.base-news {
flex: 1;
overflow-y: auto;
min-height: 0;
-ms-overflow-style: none;
scrollbar-width: none;
border-top: var(--w-line) solid var(--c-line);
border-bottom: var(--w-line) solid var(--c-line);
position: relative;
}

.base-news::-webkit-scrollbar {
display: none;
}

.base-news-tit {
padding: 3%;
font-weight: 500;
border-top: var(--w-line) solid var(--c-line);
}

.base-news-item {
display: block;
text-decoration: none;
border-bottom: var(--w-line) solid var(--c-line);
}

.base-news-item:hover {
opacity: 0.7;
}

.base-news-date {
font-size: 0.6rem;
padding: 0 5%;
margin-bottom: 4px;
display: block;
}

.base-news-title {
font-size: 0.8rem;
padding: 0 5%;
line-height: 1.4;
display: block;
margin-bottom: 8px;
}

.base-news-img {
width: 100%;
margin-bottom: 10px;
overflow: hidden;
padding: 0 5%;
border-bottom: var(--w-line) dashed var(--c-line);
}

.base-news-img img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}


/* Nav 2-Column Layout (Creator / Booth Only) */
body.single-creator .pcex--nav,
body.post-type-archive-creator .pcex--nav,
body.single-booth .pcex--nav,
body.post-type-archive-booth .pcex--nav {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}

body.single-creator .sort_area,
body.post-type-archive-creator .sort_area,
body.single-booth .sort_area,
body.post-type-archive-booth .sort_area {
width: 100%;
}

body.single-creator .pcex--nav .nav-item,
body.post-type-archive-creator .pcex--nav .nav-item,
body.single-booth .pcex--nav .nav-item,
body.post-type-archive-booth .pcex--nav .nav-item {
width: 50%;
box-sizing: border-box;
}

body.single-creator .pcex--nav .nav-item img,
body.post-type-archive-creator .pcex--nav .nav-item img,
body.single-booth .pcex--nav .nav-item img,
body.post-type-archive-booth .pcex--nav .nav-item img {
aspect-ratio: 1 / 1;
object-fit: cover;
padding: 0;
}


/* ----------------------------------------------------------
MAIN LAYOUT WRAPPER (Page)
---------------------------------------------------------- */
.pcex--main-main_layout-wrap {
padding: 0 5%;
font-size: 1.06em;
line-height: 1.6;
margin-bottom: 80px;
font-weight: 300;
}


/* ----------------------------------------------------------
LAYOUT UTILITY: EXPAND MAIN
(Top Page / Front-Main)
---------------------------------------------------------- */
body.home,
body.layout-expand-main {
--w-nav: 0px !important;
}

body.home .pcex--nav,
body.home .pcex--nav_tit,
body.layout-expand-main .pcex--nav,
body.layout-expand-main .pcex--nav_tit {
display: none !important;
border-right-width: 0;
overflow: hidden;
}

body.home .pcex--main,
body.layout-expand-main .pcex--main {
width: 100% !important;
}