/* ============================================================
   PHASE FREE Meet デザイン準拠 - ボディー部分 新規CSS
   対象: 出展者一覧ページ / 出展者詳細ページ
   既存CSSはそのまま残し、本ファイルを"後から"読み込むことで
   ボディー部分のみ上書きします。
   スコープ: body#page-exhibitor2023-pre (一覧) / body#page-exh01_2023 (詳細)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Lato:wght@400;700;900&display=swap');
/* style.css除去でFont Awesomeの読み込みが失われたため、SNSアイコン表示用に取り込む */
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

:root{
	--pf-black: #3E3A39;
	--pf-white: #ffffff;
	--pf-gray01: #898989;
	--pf-gray02: #C6C6C6;
	--pf-gray03: #F5F5F5;
	--pf-red: #E8465A;
	--pf-blue: #70C7DA;
	--pf-beige: #B5B39D;
	--pf-font-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
	--pf-font-en: "Lato", "Zen Kaku Gothic New", sans-serif;
}

body#page-exhibitor2023-pre,
body#page-exh01_2023{
	background: var(--pf-gray03);
	font-family: var(--pf-font-jp);
	color: var(--pf-black);
}

/* ------------------------------------------------------------
   style.css を外す場合の最低限の代替(このファイルの範囲=一覧・詳細ページのみ)
   ※ ヘッダー・フッターを巻き込まないよう、必ず #page の中だけに絞る
   ------------------------------------------------------------ */
body#page-exhibitor2023-pre,
body#page-exh01_2023{
	overflow-x: hidden;
}
body#page-exhibitor2023-pre #page h1, body#page-exhibitor2023-pre #page h2, body#page-exhibitor2023-pre #page h3,
body#page-exhibitor2023-pre #page h4, body#page-exhibitor2023-pre #page h5, body#page-exhibitor2023-pre #page h6,
body#page-exhibitor2023-pre #page p, body#page-exhibitor2023-pre #page ul, body#page-exhibitor2023-pre #page li,
body#page-exh01_2023 #page h1, body#page-exh01_2023 #page h2, body#page-exh01_2023 #page h3,
body#page-exh01_2023 #page h4, body#page-exh01_2023 #page h5, body#page-exh01_2023 #page h6,
body#page-exh01_2023 #page p, body#page-exh01_2023 #page ul, body#page-exh01_2023 #page li{
	margin: 0;
	padding: 0;
	line-height: 1.6;
}
body#page-exhibitor2023-pre #page ul, body#page-exh01_2023 #page ul{
	list-style: none;
}
body#page-exhibitor2023-pre #page img, body#page-exh01_2023 #page img{
	max-width: 100%;
	height: auto;
	border: none;
	vertical-align: top;
}
body#page-exhibitor2023-pre #page a, body#page-exh01_2023 #page a{
	text-decoration: none;
	color: inherit;
	transition: .2s;
}
body#page-exhibitor2023-pre .block_link,
body#page-exh01_2023 .block_link{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
body#page-exhibitor2023-pre .block_link a,
body#page-exh01_2023 .block_link a{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
body#page-exhibitor2023-pre #page,
body#page-exh01_2023 #page{
	min-height: 60vh;
	box-sizing: border-box;
}
body#page-exhibitor2023-pre #page *,
body#page-exh01_2023 #page *{
	box-sizing: border-box;
}

/* 共通: セクション見出し(ドット + 太字) ------------------------------ */
body#page-exhibitor2023-pre .pf-ttl,
body#page-exh01_2023 .exh_desc_text h4{
	position: relative;
	display: block;
	margin: 40px 0 16px;
	padding-left: 22px !important;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--pf-black);
}
body#page-exh01_2023 .exh_desc_text h4::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 0 !important;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	background: var(--pf-red);
}
body#page-exh01_2023 .exh_desc_text h4:first-of-type,
body#page-exh01_2023 .exh_desc_text h4.ttl-first{
	margin-top: 0 !important;
}

/* 共通: ボタン(サイトのpillボタンに合わせる) -------------------------- */
.pf-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 10px 28px;
	border-radius: 50px;
	background: var(--pf-red);
	border: 1px solid var(--pf-red);
	color: #fff !important;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none !important;
	transition: background .3s ease, color .3s ease;
}
.pf-btn::after{
	content: "";
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}
.pf-btn:hover{
	background: #fff;
	color: var(--pf-red) !important;
	opacity: 1 !important;
}


/* ============================================================
   一覧ページ
   ============================================================ */
body#page-exhibitor2023-pre #page_title{
	width: 100%;
	max-width: none;
	height: auto !important;
	min-height: 300px;
	/*margin: 0 0 64px -3px;*/
	margin: 0 0 84px 0;
	padding-top: 114px;
	padding-bottom: 40px;
	padding-left: max(40px, calc((100% - 1120px) / 2));
	padding-right: calc(40px + 3px);
	box-sizing: border-box;
	background: #fff;
	border-radius: 0 0 120px 0;
	border-top: none !important;
	border-bottom: 3px solid var(--pf-gray02);
	border-right: 3px solid var(--pf-gray02);
	overflow: hidden;
}
body#page-exhibitor2023-pre #page_title h2{
	position: static !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	width: auto !important;
	text-align: left !important;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--pf-black);
}
/* 旧デザインの装飾線(title_border.png)を完全に無効化 */
body#page-exhibitor2023-pre #page_title h2::after{
	content: none !important;
}
body#page-exhibitor2023-pre #page_title .page_title_catch{
	position: relative;
	display: block;
	text-align: left !important;
	margin-top: 8px !important;
	padding-left: 24px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: normal;
	color: var(--pf-black);
	text-transform: none;
}
body#page-exhibitor2023-pre #page_title .page_title_catch::before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	display: block;
	width: 16px;
	height: 16px;
	background: var(--pf-red);
}

body#page-exhibitor2023-pre #page.exhibitor-pre section{
	padding-bottom: 80px;
}
body#page-exhibitor2023-pre #page.exhibitor-pre .inner{
	max-width: 1120px;
	width: 92%;
	margin: 0 auto;
}

body#page-exhibitor2023-pre ul.exh_list{
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 32px 24px !important;
	list-style: none !important;
	width: 100% !important;
	float: none !important;
}
@media screen and (max-width: 900px){
	body#page-exhibitor2023-pre ul.exh_list{
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 20px 16px !important;
	}
}
@media screen and (max-width: 560px){
	body#page-exhibitor2023-pre ul.exh_list{
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
}

body#page-exhibitor2023-pre li.exhibitor_box{
	position: relative;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	float: none !important;
	display: block !important;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(62,58,57,0.08);
	transition: transform .3s ease, box-shadow .3s ease;
}
body#page-exhibitor2023-pre li.exhibitor_box:hover{
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(62,58,57,0.14);
}

/* アクセントドット(サイトのnav同様、3色をnth-childでローテーション) */
body#page-exhibitor2023-pre li.exhibitor_box::before{
	content: "";
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--pf-blue);
}
body#page-exhibitor2023-pre li.exhibitor_box:nth-child(3n - 1)::before{
	background: var(--pf-red);
}
body#page-exhibitor2023-pre li.exhibitor_box:nth-child(3n)::before{
	background: var(--pf-gray01);
}

body#page-exhibitor2023-pre .exh_eyecatch{
	width: 100% !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--pf-gray03);
}
body#page-exhibitor2023-pre .exh_eyecatch img{
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	transition: transform .5s ease;
}
body#page-exhibitor2023-pre li.exhibitor_box:hover .exh_eyecatch img{
	transform: scale(1.06);
}

body#page-exhibitor2023-pre .exh_name{
	width: auto !important;
	writing-mode: horizontal-tb !important;
	margin: 18px 20px 8px !important;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
}
body#page-exhibitor2023-pre .exh_outline{
	width: auto !important;
	writing-mode: horizontal-tb !important;
	margin: 0 20px !important;
	font-size: 14px;
	line-height: 1.7;
	color: var(--pf-gray01);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body#page-exhibitor2023-pre .exh_bottom{
	display: flex;
	justify-content: flex-end;
	margin: 16px 20px 20px !important;
}
body#page-exhibitor2023-pre .exh_more{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--pf-red);
}
body#page-exhibitor2023-pre .exh_more::after{
	content: "";
	width: 6px;
	height: 6px;
	border-top: 2px solid var(--pf-red);
	border-right: 2px solid var(--pf-red);
	transform: rotate(45deg);
}

body#page-exhibitor2023-pre .block_link{
	position: absolute;
	inset: 0;
	z-index: 3;
}
body#page-exhibitor2023-pre .block_link a{
	display: block;
	width: 100%;
	height: 100%;
}


/* ============================================================
   詳細ページ
   ============================================================ */
body#page-exh01_2023 section.exh_desc{
	padding: 0 0 80px;
}
body#page-exh01_2023 section.exh_desc .inner{
	max-width: 1120px;
	width: 92%;
	margin: 0 auto;
}

/* ヘッダー部(店舗名+SNS) : 一覧ページの #page_title と統一デザイン */
body#page-exh01_2023 .exh_desc_header{
	width: 100%;
	min-height: 300px;
	background: #fff;
	border-radius: 0 0 120px 0;
	border-top: none !important;
	border-bottom: 3px solid var(--pf-gray02);
	border-right: 3px solid var(--pf-gray02);
	overflow: hidden;
	box-sizing: border-box;
	margin-bottom: 64px;
	margin-right: -3px;
	padding-top: 114px;
	padding-bottom: 40px;
	padding-left: max(40px, calc((100% - 1120px) / 2));
	padding-right: calc(max(40px, calc((100% - 1120px) / 2)) + 3px);
}
body#page-exh01_2023 .exh_desc_header .inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	box-sizing: border-box;
	margin: 0 !important;
}
/* 一覧ページと同じ「PHASE FREE Meet」ラベル(赤い四角+太字)を追加 */
body#page-exh01_2023 .exh_desc_header::after{
	content: "Exhibition";
	display: block;
	width: 100%;
	height: 20px;
	margin-top: 12px;
	padding-left: 24px;
	font-size: 20px;
	font-weight: 700;
	line-height: 20px;
	color: var(--pf-black);
	background: linear-gradient(var(--pf-red), var(--pf-red)) no-repeat left center / 16px 16px;
	box-sizing: content-box;
}
body#page-exh01_2023 .exh_name{
	font-size: 48px;
	font-weight: 700;
	line-height: 1.5;
}
body#page-exh01_2023 .exh_name a{
	color: var(--pf-black);
	text-decoration: none;
	border-bottom: none;
}
body#page-exh01_2023 .sns_list{
	display: flex;
	gap: 10px;
}
body#page-exh01_2023 .sns_list a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--pf-gray03);
	color: var(--pf-black) !important;
	font-size: 15px;
	transition: background .3s ease, color .3s ease;
}
body#page-exh01_2023 .sns_list a:hover{
	background: var(--pf-red);
	color: #fff !important;
	opacity: 1;
}

/* 画像とテキストを50/50の2カラムに */
body#page-exh01_2023 .exh_desc .flex.m40-t.m40-b{
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 48px;
}
body#page-exh01_2023 .exh_desc_img{
	width: calc(50% - 24px) !important;
	max-width: none !important;
	flex: 0 0 calc(50% - 24px);
	border-radius: 24px;
	overflow: hidden;
}
body#page-exh01_2023 .slider-exh{
	position: relative;
}
body#page-exh01_2023 .slider-exh .swiper-wrapper{
	display: flex !important;
}
body#page-exh01_2023 .slider-exh .swiper-slide{
	flex-shrink: 0;
	width: 100% !important;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 24px;
}
body#page-exh01_2023 .slider-exh .swiper-slide img,
body#page-exh01_2023 .slider-exh img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
}
body#page-exh01_2023 .slider-thumbnail{
	margin-top: 10px;
}
body#page-exh01_2023 .slider-thumbnail .swiper-slide{
	border-radius: 10px;
	overflow: hidden;
	opacity: .5;
	cursor: pointer;
	transition: opacity .3s ease;
}
body#page-exh01_2023 .slider-thumbnail .swiper-slide-thumb-active{
	opacity: 1;
	outline: 2px solid var(--pf-red);
	outline-offset: -2px;
}
body#page-exh01_2023 .slider-thumbnail img{
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
body#page-exh01_2023 .swiper-button-next,
body#page-exh01_2023 .swiper-button-prev{
	width: 40px;
	height: 40px;
	background: rgba(255,255,255,.85);
	border-radius: 50%;
}
body#page-exh01_2023 .swiper-button-next::after,
body#page-exh01_2023 .swiper-button-prev::after{
	font-size: 16px;
	color: var(--pf-black);
}

/* テキストブロック */
body#page-exh01_2023 .exh_desc_text{
	width: calc(50% - 24px) !important;
	max-width: none !important;
	flex: 0 0 calc(50% - 24px);
	margin: 0 !important;
}
@media screen and (max-width: 900px){
	body#page-exh01_2023 .exh_desc .flex.m40-t.m40-b{
		gap: 32px;
	}
	body#page-exh01_2023 .exh_desc_img,
	body#page-exh01_2023 .exh_desc_text{
		width: 100% !important;
		flex: 0 0 100%;
	}
}
body#page-exh01_2023 .exh_product{
	display: inline-block;
	padding: 10px 20px;
	background: rgba(112,199,218,0.15);
	border-radius: 12px;
	font-size: 16px;
	font-weight: 700;
	color: var(--pf-black);
}
body#page-exh01_2023 .exh_product_detail p{
	margin-top: 4px !important;
	margin-bottom: 1em !important;
	font-size: 15px;
	line-height: 1.9;
	color: var(--pf-black);
}
body#page-exh01_2023 .exh_desc_text > p{
	margin-bottom: 1em !important;
	line-height: 1.9;
}
body#page-exh01_2023 h4.exh_product_ttl,
body#page-exh01_2023 .exh_desc_text h4{
	margin: 40px 0 16px !important;
}

/* ブース番号バッジ */
body#page-exh01_2023 .exh_booth{
	display: inline-flex;
	margin-left: 8px;
}
body#page-exh01_2023 .booth_bg{
	display: inline-block;
	padding: 4px 14px;
	border-radius: 50px;
	background: var(--pf-red);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

/* 戻るボタン */
body#page-exh01_2023 .btn.m80-t{
	display: flex;
	justify-content: center;
	margin: 64px auto 0 !important;
	padding: 0 24px !important;
	width: 100%;
	box-sizing: border-box !important;
}
body#page-exh01_2023 .btn.m80-t a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	max-width: 100%;
	padding: 10px 32px;
	border-radius: 50px;
	background: var(--pf-black);
	border: 1px solid var(--pf-black);
	color: #fff !important;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none !important;
	box-sizing: border-box;
	transition: background .3s ease, color .3s ease;
}
body#page-exh01_2023 .btn.m80-t a:hover{
	background: #fff;
	color: var(--pf-black) !important;
	opacity: 1;
}

@media screen and (max-width: 768px){
	body#page-exh01_2023 .exh_name{ font-size: 20px; }
	body#page-exh01_2023 .exh_desc_text h4,
	body#page-exhibitor2023-pre .pf-ttl{ font-size: 17px; }
	body#page-exhibitor2023-pre #page_title .page_title_catch{ padding-left: 22px; font-size: 18px; }
	body#page-exhibitor2023-pre #page_title{ min-height: 200px; padding: 80px 24px 20px; margin: 0 0 64px 0; border-radius: 0 0 60px 0; }
	body#page-exh01_2023 .exh_desc_header{ min-height: 200px; padding-top: 80px; border-radius: 0 0 60px 0; }
	body#page-exhibitor2023-pre #page_title h2{ font-size: 32px; }
	body#page-exh01_2023 section.exh_desc{ padding-top: 0; }
}

/* ------------------------------------------------------------
   ヘッダーの応急対応: PC表示ではSPメニューパネル(.gnav_wrap)を
   強制非表示にする（右上に空白パネルが浮いてしまう不具合の対策）
   本来はcommon.css側のメディアクエリで制御されるはずの箇所です。
   ------------------------------------------------------------ */
@media screen and (min-width: 901px){
	.gnav_wrap{
		display: none !important;
	}
}
@media screen and (max-width: 900px){
	.gnav:not(.active) .gnav_wrap{
		display: none !important;
	}
}