@charset "utf-8";

/* =========================================================
   open_top27.css
   2027出展募集デザイン 日本語TOP（ja/index.php）専用
   - 全セレクタを .t27（<main class="t27">）配下にスコープし、他ページ・ヘッダー・フッターへ干渉させない
   - 命名: mv(MV) / rn(名称変更帯) / nw(NEWS) / vn(開催のご案内) / ar(ARCHIVE)
   - PCはカンプ(2000px幅)の0.7倍＝1400px幅を基準に作成。MVのみ幅に比例して縮小
   - ブレークポイント: タブレット max-width 1000px（既存踏襲）／スマホ max-width 600px
   ========================================================= */

/* ---------- フォント（LINE Seed JP。ファミリー名は他ページと共通） ---------- */
@font-face {
	font-family: 'LINESeedJP';
	src: url('/font/LINESeedJP_OTF_Rg.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'LINESeedJP';
	src: url('/font/LINESeedJP_OTF_Bd.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'LINESeedJP';
	src: url('/font/LINESeedJP_OTF_Eb.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* ---------- 共通リセット（グローバル指定の流入対策） ---------- */
.t27 {
	--u: calc(min(1vw, 19.2px) / 14); /* MV用の比例単位（1400px幅で1px） */
	--ff: 'LINESeedJP', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	--ff-en: 'LINESeedJP', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; /* 欧文・数字もカンプに合わせ LINE Seed に統一（Montserrat は使わない） */
	font-family: var(--ff);
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: #111;
	background: #fff;
	overflow-x: clip;
}

.t27 *,
.t27 *::before,
.t27 *::after {
	box-sizing: border-box;
}

.t27 h1,
.t27 h2,
.t27 h3,
.t27 h4,
.t27 p,
.t27 ul,
.t27 li,
.t27 figure {
	margin: 0;
	padding: 0;
	letter-spacing: inherit;
}

.t27 ul {
	list-style: none;
}

.t27 h1,
.t27 h2,
.t27 h3,
.t27 h4 {
	font-size: inherit;
	line-height: 1.4;
	font-weight: 700;
}

.t27 section {
	margin: 0;
}

.t27 img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

.t27 small,
.t27 b,
.t27 em,
.t27 i {
	font-style: normal;
	font-size: inherit;
	line-height: inherit;
}

.t27 b {
	font-weight: 700;
}

.t27 a {
	text-decoration: none;
	color: inherit;
	transition: opacity 0.2s;
}

.t27 a:hover {
	opacity: 0.8;
}

/* =========================================================
   MV
   ========================================================= */
.t27 .mv {
	background: #5db8e0 url(../images/top/mv2027/mv.webp) center / cover no-repeat;
	overflow: hidden;
}

.t27 .mv_in {
	position: relative;
	max-width: 1920px;
	margin: 0 auto;
	aspect-ratio: 4000 / 2208;
}

.t27 .mv_in>* {
	position: absolute;
}

/* ロゴ画像は主催帯込み・周囲に余白あり（1394x590）。内容がカンプ位置に来るよう余白分をマイナス配置 */
.t27 .mv_logo {
	left: 0;
	top: calc(-29 * var(--u));
	width: calc(488 * var(--u));
}

.t27 .mv_logo>img {
	aspect-ratio: 1394 / 590;
	object-fit: contain;
}

.t27 .mv_catch {
	left: calc(36 * var(--u));
	top: calc(168 * var(--u));
	width: calc(790 * var(--u));
	z-index: 2;
}

.t27 .mv_copy {
	left: calc(52 * var(--u));
	top: calc(331 * var(--u));
	font-size: calc(20.5 * var(--u));
	font-weight: 700;
	line-height: 1.72;
	letter-spacing: 0.08em;
	color: #111;
	text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 34px rgba(255, 255, 255, 0.95), 0 0 54px rgba(255, 255, 255, 0.8), 0 0 80px rgba(255, 255, 255, 0.6);
}

.t27 .mv_btn {
	left: calc(50 * var(--u));
	top: calc(430 * var(--u));
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(12 * var(--u));
	width: calc(296 * var(--u));
	height: calc(60 * var(--u));
	border-radius: calc(6 * var(--u));
	background: #f7ed00;
	box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 60, 120, 0.25);
	font-size: calc(21 * var(--u));
	font-weight: 900;
	letter-spacing: 0.1em;
	color: #111;
	transition: background-color 0.3s;
}

/* ホバー: 不透明度ではなく黄緑（#b7d100）へ */
.t27 .mv_btn:hover {
	opacity: 1;
	background: #b7d100;
}

/* 矢印（右端の片側だけ折り返す）。TOP（.mv_btn）と横浜・名古屋TOP（.vmv_btn）で共通 */
.t27 .mv_btn i,
.t27 .vmv_btn i {
	position: relative;
	top: calc(3 * var(--u)); /* 文字の中心より上に見えるため下げる */
	width: calc(34 * var(--u));
	height: 1px;
	background: #111;
}

.t27 .mv_btn i::after,
.t27 .vmv_btn i::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: calc(12 * var(--u));
	height: 1px;
	background: #111;
	transform: rotate(35deg);
	transform-origin: right center;
}

.t27 .mv_photo {
	left: calc(590 * var(--u));
	top: calc(172 * var(--u));
	width: calc(790 * var(--u));
}

.t27 .mv_photo img {
	aspect-ratio: 2628 / 1520;
	object-fit: contain;
}

.t27 .mv_cards {
	left: calc(52 * var(--u));
	top: calc(533 * var(--u));
	width: calc(516 * var(--u));
	display: flex;
	gap: calc(12 * var(--u));
}

.t27 .mv_card {
	position: relative;
	flex: 1;
	display: block;
	min-width: 0;
	height: calc(171 * var(--u));
	padding: calc(19 * var(--u)) calc(16 * var(--u)) 0;
	border-radius: calc(6 * var(--u));
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #111;
	white-space: nowrap;
	overflow: hidden;
}

/* 上端の帯はグラデーション（YOKOHAMA: 青→シアン / NAGOYA: 赤→ピンク） */
.t27 .mv_card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: calc(4 * var(--u));
}

.t27 .mv_y {
	background: linear-gradient(180deg, rgba(198, 224, 247, 0.92), rgba(206, 231, 250, 0.78));
}

.t27 .mv_y::before {
	background: linear-gradient(90deg, #127ebd, #2ed5e0);
}

.t27 .mv_n {
	background: linear-gradient(180deg, rgba(240, 238, 242, 0.92), rgba(238, 236, 240, 0.78));
}

.t27 .mv_n::before {
	background: linear-gradient(90deg, #db4053, #e077b0);
}

.t27 .mv_area {
	font-family: var(--ff-en);
	font-size: calc(22 * var(--u));
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
}

.t27 .mv_y .mv_area {
	color: #0a43ff;
}

.t27 .mv_n .mv_area {
	color: #f10000;
}

.t27 .mv_date {
	margin-top: calc(6 * var(--u));
	font-family: var(--ff-en);
	line-height: 1.2;
	white-space: nowrap;
}

.t27 .mv_date b {
	font-size: calc(33 * var(--u));
	font-weight: 700;
	letter-spacing: -0.01em;
}

.t27 .mv_date small {
	margin: 0 calc(9 * var(--u)) 0 calc(2 * var(--u));
	font-family: var(--ff);
	font-size: calc(10.5 * var(--u));
	font-weight: 700;
	color: #555;
}

.t27 .mv_place {
	display: flex;
	align-items: center;
	gap: calc(4 * var(--u));
	margin-top: calc(8 * var(--u));
	font-family: var(--ff-en);
	font-size: calc(15 * var(--u));
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	white-space: nowrap;
}

.t27 .mv_place small {
	font-family: var(--ff);
	font-size: calc(8.5 * var(--u));
	font-weight: 400;
}

.t27 .mv_place i {
	font-size: calc(18 * var(--u));
}

.t27 .mv_y .mv_place i {
	color: #0a43ff;
}

.t27 .mv_n .mv_place i {
	color: #f10000;
}

.t27 .mv_on {
	display: flex;
	align-items: baseline;
	gap: calc(16 * var(--u));
	margin-top: calc(10 * var(--u));
	font-family: var(--ff-en);
	line-height: 1.3;
}

.t27 .mv_on span {
	font-size: calc(12.5 * var(--u));
	font-weight: 400;
	letter-spacing: 0.12em;
}

.t27 .mv_y .mv_on span {
	color: #0a43ff;
}

.t27 .mv_n .mv_on span {
	color: #f10000;
}

.t27 .mv_on b {
	font-size: calc(17 * var(--u));
	font-weight: 700;
}

/* =========================================================
   名称変更帯
   ========================================================= */
.t27 .rn {
	background: #48c2d1;
}

.t27 .rn_in {
	position: relative;
	display: grid;
	/* ロゴ | タイトル+本文 | ボタン。rn_txt は contents にしてタイトルとボタンを同じ行に揃える */
	grid-template-columns: 221px 1fr auto;
	grid-template-rows: auto auto;
	align-content: center;
	align-items: center;
	column-gap: 68px;
	row-gap: 8px;
	max-width: 1400px;
	min-height: 177px;
	margin: 0 auto;
	/* 左右余白はMVの内容左端（1400px幅で52px）に揃える。狭い幅では縮小 */
	padding: 28px var(--rn-pr) 28px var(--rn-pl);
	--rn-pl: clamp(24px, 3.714vw, 52px);
	--rn-pr: clamp(24px, 5.43vw, 76px);
}

.t27 .rn_logo {
	grid-row: 1 / 3;
}

.t27 .rn_txt {
	display: contents;
}

.t27 .rn_ttl {
	grid-column: 2;
	grid-row: 1;
	font-size: 17px;
	letter-spacing: 0.06em;
}

.t27 .rn_txt p {
	grid-column: 2 / 4;
	grid-row: 2;
	font-size: 14.5px;
	line-height: 1.72;
	letter-spacing: 0.01em;
}

.t27 .rn_btn {
	grid-column: 3;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 196px;
	height: 31px;
	border: 2px solid #1a5fe0;
	border-radius: 4px;
	padding-top: 2px; /* LINE Seed JP は字面が上寄りのため、約1px下げて視覚的に中央へ */
	background: rgba(255, 255, 255, 0.22);
	color: #1a5fe0;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
}

/* =========================================================
   NEWS（1行）
   ========================================================= */
.t27 .nw {
	background: #fff;
}

.t27 .nw_in {
	display: flex;
	align-items: center;
	gap: 0 30px;
	max-width: 1400px;
	min-height: 59px;
	margin: 0 auto;
	padding: 8px 61px;
}

.t27 .nw_head {
	flex: none;
	font-family: var(--ff-en);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.15em;
	line-height: 1;
}

.t27 .nw_date {
	flex: none;
	font-family: var(--ff-en);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.t27 .nw_label {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.t27 .nw_label .topic_ann,
.t27 .nw_label .topic_news,
.t27 .nw_label .topic_info,
.t27 .nw_label .topic_impo {
	display: inline-block;
	min-width: 45px;
	padding: 3px 8px;
	background: #e50c0c;
	color: #fff;
	text-align: center;
	letter-spacing: 0.08em;
}

.t27 .nw_yh {
	color: #005bac;
}

.t27 .nw_ng {
	color: #f00;
}

.t27 .nw_on {
	color: #04b305;
}

.t27 .nw_ttl {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: #222;
}

.t27 .nw_all {
	flex: none;
	margin-left: auto;
	font-family: var(--ff-en);
	font-size: 12px;
	letter-spacing: 0.08em;
	border-bottom: 1px solid #111;
	line-height: 1.4;
}

/* =========================================================
   開催のご案内（2会場）
   ========================================================= */
.t27 .vn {
	background: #dfe8ee url(../images/top/mv2027/info_bg.webp) center top / cover no-repeat;
}

.t27 .vn_in {
	max-width: 1158px; /* 内容幅1110px + 左右24px */
	margin: 0 auto;
	padding: 49px 24px 60px;
}

.t27 .vn_head {
	text-align: center;
	text-shadow: 0 0 6px #fff, 0 0 10px #fff, 0 0 14px rgba(255, 255, 255, 0.8);
}

.t27 .vn_sym,
.t27 .ar_sym {
	width: 42px;
	aspect-ratio: 152 / 138; /* symbol.webp（開催のご案内・ARCHIVE見出しで共通） */
	margin: 0 auto;
}

.t27 .vn_lead1 {
	margin-top: 22px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.t27 .vn_h2 {
	margin-top: 12px;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.t27 .vn_lead2 {
	margin-top: 22px;
	font-size: 15px;
	line-height: 1.7;
	letter-spacing: 0.03em;
}

/* カードは最大524px（1400px幅の現行寸法）。狭くなると列幅を縮め、カード間は最低20px確保する */
.t27 .vn_cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 524px));
	justify-content: space-between;
	align-items: stretch; /* aspect-ratio 付きでも2枚の高さを揃える */
	column-gap: 20px;
	margin-top: 28px;
	padding: 0 1px;
}

/* カード内の寸法は --k（カード幅/524）で比例縮小。カード自身がコンテナ（cqw=カード幅の1%） */
.t27 .vn_card {
	--k: calc(100cqw / 524);
	container-type: inline-size;
	position: relative;
	width: 100%;
	aspect-ratio: 1500 / 1742;
	padding-bottom: 58px; /* 吹き出し(下端4px・高さ約37px・浮遊7px)が最終行に重ならない余白。ボタンは下端をまたぐ */
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 6px;
	text-align: center;
	box-shadow: 0 6px 20px rgba(0, 20, 60, 0.12);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* ホバーで浮き上がる（影を強める） */
.t27 .vn_card:hover {
	transform: translateY(-8px);
	box-shadow: 0 18px 36px rgba(0, 20, 60, 0.26);
}

.t27 .vn_y {
	background-color: #c9e9f5;
	background-image: url(../images/top/mv2027/card_y_bg.webp);
}

.t27 .vn_n {
	background-color: #f4dee7;
	background-image: url(../images/top/mv2027/card_n_bg.webp);
}

/* 会場タイトルロゴ（和英サブ込み画像。カンプ実測 約402x36px） */
.t27 .vn_ttl {
	padding-top: calc(28 * var(--k));
}

.t27 .vn_ttl img {
	display: block;
	/* 横浜・名古屋で画像高さ(181px)が同じなので高さ固定で文字サイズを揃える */
	width: auto;
	height: calc(68 * var(--k));
	max-width: 92%;
	margin: 0 auto;
	object-fit: contain;
}

.t27 .vn_theme {
	/* 画像差し替え（1731x287 / 1664x287）で文字周りの余白が減ったため、旧画像と同じ文字サイズになる幅に縮める */
	width: calc(302 * var(--k));
	/* 画像の縦横比のまま表示（theme_y/theme_nで実寸が異なるため固定比は指定しない） */
	height: auto;
	/* 旧画像と同じ文字位置・下の間隔になるよう上下マージンで調整 */
	margin: calc(-3 * var(--k)) auto calc(12 * var(--k));
}

.t27 .vn_date {
	margin-top: 0;
	font-family: var(--ff-en);
	line-height: 1.2;
}

.t27 .vn_date b {
	font-size: max(22px, calc(36 * var(--k)));
	font-weight: 700;
	letter-spacing: -0.02em;
}

.t27 .vn_date small {
	margin: 0 calc(6 * var(--k)) 0 1px;
	font-family: var(--ff-en);
	font-size: max(10px, calc(14 * var(--k)));
	font-weight: 500;
}

.t27 .vn_place {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 6px;
	font-family: var(--ff-en);
	font-size: max(13px, calc(17 * var(--k)));
	font-weight: 700;
	line-height: 1.3;
}

.t27 .vn_place small {
	font-family: var(--ff);
	font-size: max(9px, calc(11 * var(--k)));
	font-weight: 500;
}

.t27 .vn_place i {
	font-size: max(15px, calc(19 * var(--k)));
}

.t27 .vn_y .vn_place i,
.t27 .vn_y .vn_on span {
	color: #0a43ff;
}

.t27 .vn_n .vn_place i,
.t27 .vn_n .vn_on span {
	color: #f10000;
}

.t27 .vn_on {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 14px;
	margin-top: 5px;
	font-family: var(--ff-en);
	line-height: 1.3;
}

.t27 .vn_on span {
	font-size: max(10px, calc(13 * var(--k)));
	font-weight: 500;
	letter-spacing: 0.1em;
}

.t27 .vn_on b {
	font-size: max(14px, calc(19 * var(--k)));
	font-weight: 700;
}

.t27 .vn_on b small {
	margin: 0 5px 0 1px;
	font-size: max(8px, calc(10 * var(--k)));
	font-weight: 500;
}

.t27 .vn_band {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: calc(48 * var(--k));
	margin-top: calc(26 * var(--k));
	color: #fff;
	font-size: max(13px, calc(18 * var(--k)));
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.06em;
}

.t27 .vn_y .vn_band {
	background: linear-gradient(90deg, #006fb5, #00eced);
}

.t27 .vn_n .vn_band {
	background: linear-gradient(90deg, #e70a24, #ef4e99);
	font-size: max(12px, calc(16 * var(--k)));
	text-align: left;
}

.t27 .vn_band img {
	flex: none;
	width: max(15px, calc(20 * var(--k)));
	height: max(15px, calc(20 * var(--k)));
	filter: brightness(0) saturate(100%) invert(100%); /* 黒パスのSVGを白化（帯の背景色に乗せるため） */
}

.t27 .vn_body {
	padding: 0 calc(14 * var(--k)) 0 calc(26 * var(--k));
	text-align: left;
}

.t27 .vn_h4 {
	margin-top: calc(17 * var(--k));
	font-size: max(13px, calc(17 * var(--k)));
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

.t27 .vn_tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(9 * var(--k));
	margin-top: calc(11 * var(--k));
}

.t27 .vn_tiles li {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: calc(120 * var(--k));
	padding: calc(14 * var(--k)) 2px 8px;
	border-radius: 8px;
	color: #fff;
	text-align: center;
}

.t27 .vn_y .vn_tiles li {
	background: #0086c0;
}

.t27 .vn_n .vn_tiles li {
	background: #f2649d;
}

.t27 .vn_tiles em {
	display: grid;
	place-items: center;
	flex: none;
	width: max(26px, calc(38 * var(--k)));
	height: max(26px, calc(38 * var(--k)));
	border-radius: 50%;
	font-family: var(--ff-en);
	font-size: max(13px, calc(17 * var(--k)));
	font-weight: 500;
	line-height: 1;
}

.t27 .vn_y .vn_tiles em {
	background: #0070a0;
}

.t27 .vn_n .vn_tiles em {
	background: #dc3779;
}

.t27 .vn_tiles span {
	margin-top: calc(12 * var(--k));
	font-size: max(11px, calc(14 * var(--k)));
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: 0.03em;
}

.t27 .vn_rec {
	margin-top: calc(9 * var(--k));
}

.t27 .vn_rec li {
	position: relative;
	padding-left: 12px;
	font-size: max(11px, calc(13 * var(--k)));
	line-height: 1.92;
	letter-spacing: 0;
}

.t27 .vn_rec li::before {
	content: '・';
	position: absolute;
	left: -2px;
	top: 0;
}

/* ボタンはカード下端をまたぐ（高さの半分が枠外）。左右中央は left:50% + translateX(-50%) で厳密に合わせる。
   ラベルは中央、右側の線は絶対配置（デザインどおり文字がボタン中央に来る） */
.t27 .vn_btn {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(210px, calc(297 * var(--k)));
	height: max(40px, calc(50 * var(--k)));
	border-radius: 6px;
	color: #fff;
	font-size: max(14px, calc(17 * var(--k)));
	font-weight: 700;
	letter-spacing: 0.1em;
	box-shadow: 0 5px 12px rgba(0, 30, 80, 0.25);
	isolation: isolate;
	overflow: hidden;
}

/* ホバー色: グラデは transition できないため、単色レイヤーをフェードイン（色はヘッダーGNAVのイベント色） */
.t27 .vn_btn::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.3s;
}

.t27 .vn_y .vn_btn::before {
	background: #0041ff;
}

.t27 .vn_n .vn_btn::before {
	background: #ff0000;
}

.t27 a.vn_btn:hover {
	opacity: 1;
}

.t27 .vn_btn:hover::before {
	opacity: 1;
}

.t27 .vn_y .vn_btn {
	background: linear-gradient(90deg, #006fb5, #00ebed);
}

.t27 .vn_n .vn_btn {
	background: linear-gradient(90deg, #e70a24, #e1498e);
}

.t27 .vn_btn span {
	margin-right: -0.1em; /* 末尾の字間分を相殺して文字を中央に */
}

.t27 .vn_btn i {
	position: absolute;
	right: max(14px, calc(26 * var(--k)));
	top: 50%;
	width: max(20px, calc(34 * var(--k)));
	height: 1px;
	background: #fff;
}

.t27 .vn_balloon {
	position: absolute;
	right: max(10px, calc(78 * var(--k)));
	bottom: 4px;
	padding: 5px 9px;
	border-radius: 6px;
	background: #f7ed00;
	color: #c4161c;
	font-size: 11px;
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-align: center;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
	pointer-events: none;
	animation: t27_float 2.2s ease-in-out infinite alternate;
}

@keyframes t27_float {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-7px);
	}
}

/* 展示会写真ストリップ（無限スクロール） */
.t27 .vn_strip {
	overflow: hidden;
	margin-top: 0;
	padding-bottom: 46px; /* カンプ：スライダー下〜ARCHIVE上の余白（vn背景が続く） */
}

.t27 .vn_track {
	display: flex;
	gap: 14px;
	width: max-content;
	animation: t27_marquee 100s linear infinite;
}

.t27 .vn_track li {
	flex: none;
	height: 205px; /* 高さ固定・幅は画像の元比率なり（850x565） */
	background: rgba(255, 255, 255, 0.35);
	border-radius: 10px;
	overflow: hidden;
}

.t27 .vn_track img {
	width: auto;
	max-width: none;
	height: 100%;
}

/* 10枚×2周のうち1周分（半分）だけ流して継ぎ目なくループさせる */
@keyframes t27_marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-50% - 7px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.t27 .vn_track,
	.t27 .vn_balloon {
		animation: none;
	}

	.t27 .vn_card,
	.t27 .vn_btn::before,
	.t27 .mv_btn {
		transition: none;
	}

	.t27 .vn_card:hover {
		transform: none;
	}
}

/* =========================================================
   ARCHIVE
   ========================================================= */
.t27 .ar {
	background: #0a1b34 url(../images/top/mv2027/archive_bg.webp) center / cover no-repeat;
	color: #fff;
}

.t27 .ar_in {
	max-width: 1236px;
	margin: 0 auto;
	padding: 45px 24px 66px;
}

.t27 .ar_head {
	text-align: center;
}

.t27 .ar_h2 {
	margin-top: 12px;
	font-family: var(--ff-en);
	font-size: 38px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.1em;
}

.t27 .ar_sub {
	margin-top: 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.2em;
}

.t27 .ar_row {
	display: grid;
	grid-template-columns: 139px 1fr;
	column-gap: 24px;
	align-items: center;
	margin-top: 21px;
}

.t27 .ar_head+.ar_row {
	margin-top: 55px;
}

.t27 .ar_year {
	font-family: var(--ff-en);
	font-size: 38px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
}

.t27 .ar_list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 21px;
}

.t27 .ar_card {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 128px;
	padding: 10px 18px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.8);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #111;
}

.t27 .ar_card img {
	flex: none;
	width: 150px;
	object-fit: cover;
	background: rgba(17, 40, 80, 0.12); /* 画像未配置時も枠を保つ（altの文字は出さない） */
	font-size: 0;
}

.t27 .ar_card>div {
	min-width: 0;
}

.t27 .ar_ttl {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.03em;
}

.t27 .ar_link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 5px;
	font-size: 17px;
	line-height: 1.4;
}

.t27 .ar_link span {
	border-bottom: 1px solid #111;
}

.t27 .ar_link i,
.t27 .ar_more i {
	color: #1a6fd0;
	font-size: 0.85em;
}

.t27 .ar_stat {
	margin-top: 2px;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.t27 .ar_stat b {
	font-weight: 500;
}

.t27 .ar_more {
	margin-top: 30px;
	text-align: center;
}

.t27 .ar_more a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.t27 .ar_more span {
	border-bottom: 1px solid #fff;
}

.t27 .ar_more i {
	color: #5aa8ff;
}

/* =========================================================
   ハンバーガーメニュー（.sp_nav）の旧表示を維持
   原因: 上の共通リセット `.t27 ul { margin:0; padding:0 }` と `.t27` のフォント指定が、
   .sp_nav 内（style.css の `.nav_content ul { margin:0 auto; padding-top:60px }` や
   旧 <main class="open_top"> が与えていた font-size/line-height/letter-spacing/color）より強く当たり、
   メニューが左寄せ・幅狭になっていた。.sp_nav 内だけ旧値に戻す（TOP本体のスタイルは触らない）
   ========================================================= */
.t27 .sp_nav {
	font-size: 14px;
	line-height: 28px;
	letter-spacing: 1.4px;
	color: #000;
}

.t27 .sp_nav .nav_list {
	margin: 0 auto;
	padding-top: 60px;
}

.t27 .sp_nav img {
	display: inline;
	width: 16px;
	height: 16px;
}

/* =========================================================
   タブレット（max-width: 1000px）
   - MVは縦積み（中央揃え）。日付カードは2列のまま
   - 名称変更帯・開催のご案内・NEWSはPCの構成を維持（縮小のみ）
   ========================================================= */
@media screen and (max-width: 1000px) {

	/* ---- MV: 縦積み・中央揃え ---- */
	.t27 .mv {
		background-position: 62% center;
	}

	.t27 .mv_in {
		display: flex;
		flex-direction: column;
		align-items: center;
		aspect-ratio: auto;
		max-width: 760px;
		padding: 28px 24px 40px;
		text-align: center;
	}

	.t27 .mv_in>* {
		position: static;
		width: auto;
	}

	.t27 .mv_logo {
		width: min(480px, 100%);
		margin: -34px auto -40px;
	}

	.t27 .mv_catch {
		align-self: stretch;
		margin: 18px -6px 0;
	}

	.t27 .mv_copy {
		margin-top: 8px;
		font-size: 17px;
		line-height: 1.75;
	}

	.t27 .mv_btn {
		width: 100%;
		max-width: 340px;
		height: 56px;
		margin: 20px auto 0;
		font-size: 19px;
		gap: 10px;
		border-radius: 6px;
	}

	.t27 .mv_btn i,
	.t27 .vmv_btn i {
		top: 2px;
		width: 26px;
	}

	.t27 .mv_btn i::after,
	.t27 .vmv_btn i::after {
		width: 10px;
	}

	.t27 .mv_photo {
		align-self: stretch;
		margin-top: 22px;
	}

	.t27 .mv_cards {
		align-self: stretch;
		gap: 12px;
		margin-top: 22px;
		text-align: left;
	}

	.t27 .mv_card {
		height: auto;
		padding: 18px 16px 14px;
		border-radius: 6px;
	}

	.t27 .mv_card::before {
		height: 4px;
	}

	.t27 .mv_area {
		font-size: 19px;
	}

	.t27 .mv_date {
		margin-top: 4px;
	}

	.t27 .mv_date b {
		font-size: clamp(24px, 4.4vw, 32px);
	}

	.t27 .mv_date small {
		font-size: 12px;
		margin: 0 5px 0 2px;
	}

	.t27 .mv_place {
		margin-top: 6px;
		font-size: clamp(13px, 2.1vw, 16px);
		gap: 6px;
	}

	.t27 .mv_place small {
		font-size: 10px;
	}

	.t27 .mv_place i {
		font-size: 17px;
	}

	.t27 .mv_on {
		flex-wrap: wrap;
		gap: 0 10px;
		margin-top: 6px;
	}

	.t27 .mv_on span {
		font-size: 11px;
	}

	.t27 .mv_on b {
		font-size: 16px;
	}

	/* ---- 名称変更帯（PC構成のまま。ボタンは右上） ---- */
	.t27 .rn_in {
		grid-template-columns: clamp(160px, 22vw, 221px) 1fr auto;
		column-gap: clamp(24px, 4vw, 68px);
	}


	.t27 .rn_txt p {
		font-size: 13.5px;
		line-height: 1.75;
	}

	.t27 .rn_txt br {
		display: none;
	}

	/* ---- NEWS ---- */
	.t27 .nw_in {
		padding: 8px clamp(24px, 6vw, 61px);
		gap: 0 20px;
	}

	/* ---- 開催のご案内 ---- */
	.t27 .vn_in {
		padding: 40px 24px 56px;
	}

	.t27 .vn_lead1 {
		margin-top: 18px;
		font-size: 14px;
		letter-spacing: 0.04em;
	}

	.t27 .vn_h2 {
		font-size: 28px;
		letter-spacing: 0.03em;
	}

	.t27 .vn_lead2 {
		margin-top: 16px;
		font-size: 14px;
		text-shadow: 0 0 6px #fff, 0 0 10px #fff;
	}

	.t27 .vn_lead2 br {
		display: none;
	}

	.t27 .vn_cards {
		column-gap: 20px;
		margin-top: 32px;
		padding: 0;
	}

	.t27 .vn_track li {
		height: 155px;
	}

	.t27 .vn_strip {
		padding-bottom: 36px;
	}

	.t27 .vn_track {
		gap: 12px;
	}

	@keyframes t27_marquee {
		from {
			transform: translateX(0);
		}

		to {
			transform: translateX(calc(-50% - 6px));
		}
	}

	/* ---- ARCHIVE ---- */
	.t27 .ar_in {
		padding: 36px 16px 48px;
	}

	.t27 .ar_h2 {
		font-size: 30px;
	}

	.t27 .ar_head+.ar_row {
		margin-top: 32px;
	}

	.t27 .ar_row {
		display: block;
		margin-top: 28px;
	}

	.t27 .ar_year {
		margin-bottom: 10px;
		font-size: 28px;
		text-align: left;
	}

	.t27 .ar_list {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.t27 .ar_card {
		gap: 14px;
		min-height: 0;
		padding: 10px 14px;
	}

	.t27 .ar_card img {
		width: 128px;
	}

	.t27 .ar_ttl {
		font-size: 16px;
	}

	.t27 .ar_link {
		font-size: 15px;
	}

	.t27 .ar_stat {
		font-size: 13px;
	}

	.t27 .ar_more {
		margin-top: 28px;
	}
}

/* NEWS は 1000px 以下で折り返し（タイトルが省略されすぎないように） */
@media screen and (max-width: 1000px) {
	/* ---- NEWS: 折り返し ---- */
	.t27 .nw_in {
		flex-wrap: wrap;
		gap: 4px 12px;
		padding: 14px 20px;
	}

	.t27 .nw_head {
		font-size: 20px;
		width: 100%;
	}

	.t27 .nw_date {
		font-size: 14px;
	}

	.t27 .nw_ttl {
		flex: 0 0 100%;
		white-space: normal;
		font-size: 14px;
		line-height: 1.6;
		letter-spacing: 0.04em;
	}

	.t27 .nw_all {
		margin-left: 0;
	}
}

/* =========================================================
   会場カード縦積み（max-width: 768px / タブレット縦以下）
   ========================================================= */
@media screen and (max-width: 768px) {

	.t27 .vn_cards {
		grid-template-columns: minmax(0, 524px);
		justify-content: center;
		row-gap: 56px;
		margin-top: 32px;
	}

	/* スマホは幅いっぱいの縦積み。内部寸法は比例縮小せず固定px（--k:1px）で旧SPと同じ値 */
	.t27 .vn_card {
		--k: 1px;
		aspect-ratio: auto;
		background-size: 100% 100%;
	}

	.t27 .vn_ttl {
		padding: 24px 12px 0;
	}

	.t27 .vn_theme {
		width: min(300px, 74%);
	}

	.t27 .vn_date b {
		font-size: 32px;
	}

	.t27 .vn_date small {
		font-size: 12px;
	}

	.t27 .vn_place {
		font-size: 16px;
	}

	.t27 .vn_band {
		font-size: 15px;
	}

	.t27 .vn_n .vn_band {
		font-size: 14px;
	}

	.t27 .vn_body {
		padding: 0 16px;
	}

	.t27 .vn_btn {
		width: 297px;
		height: 50px;
	}

	.t27 .vn_tiles {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.t27 .vn_tiles li {
		flex-direction: row;
		justify-content: flex-start;
		gap: 14px;
		min-height: 62px;
		padding: 10px 16px;
		text-align: left;
	}

	.t27 .vn_tiles span {
		margin-top: 0;
	}

	.t27 .vn_tiles span br {
		display: none;
	}

	.t27 .vn_rec li {
		line-height: 1.7;
		margin-bottom: 4px;
	}

	.t27 .vn_on {
		flex-wrap: wrap;
		gap: 2px 10px;
	}

	.t27 .vn_band {
		padding: 8px 12px;
	}

}

/* =========================================================
   スマホ（max-width: 600px）
   ========================================================= */
@media screen and (max-width: 600px) {

	/* ---- MV ---- */
	.t27 .mv_in {
		max-width: 640px;
		padding: 24px 20px 36px;
	}

	.t27 .mv_logo {
		width: min(440px, 100%);
		margin: -30px auto -36px;
	}

	.t27 .mv_copy {
		font-size: 15px;
	}

	.t27 .mv_btn {
		max-width: 320px;
		height: 54px;
		margin-top: 18px;
		font-size: 18px;
	}

	.t27 .mv_cards {
		flex-direction: column;
	}

	.t27 .mv_card {
		flex: none;
		padding: 18px 18px 14px;
	}

	.t27 .mv_date b {
		font-size: 32px;
	}

	.t27 .mv_date small {
		margin: 0 7px 0 2px;
	}

	.t27 .mv_place {
		font-size: 16px;
		gap: 8px;
	}

	.t27 .mv_place i {
		font-size: 18px;
	}

	.t27 .mv_on {
		flex-wrap: nowrap;
		gap: 0 16px;
	}

	.t27 .mv_on span {
		font-size: 12px;
	}

	.t27 .mv_on b {
		font-size: 17px;
	}

	/* ---- 名称変更帯: 縦積み・ボタンは本文の下 ---- */
	.t27 .rn_in {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		min-height: 0;
		padding: 28px 20px;
	}

	.t27 .rn_txt {
		display: block;
	}

	.t27 .rn_logo {
		width: 200px;
	}

	.t27 .rn_ttl {
		margin-bottom: 6px;
		font-size: 16px;
	}

	.t27 .rn_txt p {
		font-size: 13.5px;
	}

	.t27 .rn_btn {
		width: 100%;
		max-width: 260px;
		height: 38px;
		font-size: 13px;
	}

	/* ---- 開催のご案内: カード縦積み ---- */
	.t27 .vn_in {
		padding: 36px 16px 56px;
	}

	/* ---- 会場カード内: カード幅(cqw)に応じて縮小し、320pxでも日付・会期を1行に収める ---- */
	.t27 .vn_ttl {
		padding: 22px 10px 0;
	}

	.t27 .vn_date b {
		font-size: clamp(22px, 8.6cqw, 32px);
	}

	.t27 .vn_date small {
		margin: 0 clamp(3px, 1.6cqw, 6px) 0 1px;
		font-size: clamp(9px, 3.4cqw, 12px);
	}

	.t27 .vn_place {
		gap: 6px;
		font-size: clamp(13px, 4.6cqw, 16px);
	}

	.t27 .vn_place small {
		font-size: clamp(9px, 3cqw, 11px);
	}

	.t27 .vn_on {
		flex-wrap: nowrap;
		gap: 0 clamp(6px, 2.4cqw, 10px);
		padding: 0 8px;
		white-space: nowrap;
	}

	.t27 .vn_on span {
		font-size: clamp(9px, 3cqw, 12px);
		letter-spacing: 0.04em;
	}

	.t27 .vn_on b {
		font-size: clamp(14px, 5.2cqw, 19px);
	}

	.t27 .vn_on b small {
		margin: 0 clamp(2px, 1.2cqw, 5px) 0 1px;
		font-size: clamp(8px, 2.8cqw, 10px);
	}

	.t27 .vn_band {
		font-size: clamp(12px, 4.2cqw, 15px);
		letter-spacing: 0.03em;
	}

	.t27 .vn_n .vn_band {
		font-size: clamp(12px, 3.9cqw, 14px);
	}

	.t27 .vn_body {
		padding: 0 14px;
	}

	.t27 .vn_tiles li {
		gap: 10px;
		padding: 10px 12px;
	}

	.t27 .vn_tiles span {
		font-size: clamp(11px, 3.7cqw, 14px);
		line-height: 1.5;
		letter-spacing: 0.02em;
		text-wrap: balance;
	}

	.t27 .vn_btn {
		width: min(297px, calc(100% - 40px));
	}

	.t27 .vn_lead1 {
		margin-top: 16px;
		font-size: 13px;
	}

	.t27 .vn_h2 {
		font-size: 25px;
	}

	.t27 .vn_lead2 {
		font-size: 13px;
		text-align: left;
	}

	.t27 .vn_strip {
		padding-bottom: 32px;
	}

	.t27 .vn_track {
		gap: 10px;
	}

	.t27 .vn_track li {
		height: 130px;
	}

	@keyframes t27_marquee {
		from {
			transform: translateX(0);
		}

		to {
			transform: translateX(calc(-50% - 5px));
		}
	}
}

/* ---------- アーカイブ一覧ページ（ja/archive/）用: .t27 で包んだ include のみ ----------
   崩れの原因: 下層ページは style_under.css の `.under_page main { background:#fff }` で本文が白背景になり、
   白文字（年・見出し）と白半透明カード（rgba(255,255,255,.8)）が背景に溶けて見えなくなっていた。
   → #archive_history（このページ専用ID）の section にTOPのARCHIVEと同じ濃紺背景を敷く */
#archive_history>section {
	background: #0a1b34 url(../images/top/mv2027/archive_bg.webp) center / cover no-repeat;
}

#archive_history .c_wrap {
	max-width: 1236px;
	padding: 56px 24px 72px;
}

.t27.ar_pg {
	background: transparent;
	color: #fff;
}

.t27.ar_pg .ar_in {
	max-width: none;
	padding: 0;
}

.t27.ar_pg .ar_row:first-child {
	margin-top: 0;
}

@media screen and (max-width: 1000px) {
	#archive_history .c_wrap {
		padding: 36px 16px 48px;
	}
}


/* =========================================================
   英語TOP（en/index.php）用の微調整（body.en 起点。日本語版のレイアウトは変えない）
   曜日が英字（WED等）・ボタンが英文になる分の幅調整のみ
   ========================================================= */
.en .t27 .mv_btn span {
	white-space: nowrap;
	letter-spacing: 0.04em;
}

/* vn_y .vn_band: 英語版は2行になり、中央寄せ(flex justify-content:center)だと
   span がflexの残り幅いっぱいに広がりアイコンが帯の左端に張り付いてしまうため、
   名古屋バンドと同じ「左寄せ＋明示的な<br>」に揃える（アイコンはテキスト先頭に隣接） */
.en .t27 .vn_y .vn_band {
	text-align: left;
}

/* PC幅のみ（SP・タブレットは日本語版と同じpx指定のまま） */
@media screen and (min-width: 1001px) {
	.en .t27 .mv_btn {
		font-size: calc(17 * var(--u));
	}

	.en .t27 .mv_date small {
		margin: 0 calc(5 * var(--u)) 0 calc(1 * var(--u));
		font-size: calc(8 * var(--u));
		letter-spacing: 0;
	}
}

@media screen and (max-width: 1000px) {
	.en .t27 .mv_btn {
		font-size: 17px;
	}
}

/* mv_copy: 英文は日本語版より長いため、フォトコラージュ（left:590u）にかぶる前で折り返す */
@media screen and (min-width: 1001px) {
	.en .t27 .mv_copy {
		max-width: calc(520 * var(--u));
		/* 英文は3行になり日本語版(2行)より高さが出るため、ボタン(top:430u)にかぶらないよう縮小 */
		font-size: calc(16.5 * var(--u));
		line-height: 1.5;
	}
}

/* vn_btn: 英文ラベル「Click here for details」は日本語版の固定幅に収まらないため、幅を広げてサイズを少し詰める */
.en .t27 .vn_btn {
	width: max(230px, calc(340 * var(--k)));
	font-size: max(12px, calc(14.5 * var(--k)));
	letter-spacing: 0.03em;
}

/* vn_balloon: クライアント確認（1019大成社）により、浮遊アニメーションは止める。
   英語版はボタン文言「Click here for details」が長く、日本語版と同じ高さだとボタン文字にかぶるため、
   ボタンの上端より上に来るよう少し持ち上げる（ボタンはカード下端をまたぐ配置＝高さの半分より上なら非衝突） */
.en .t27 .vn_balloon {
	/* ボタン上端に少しだけかかる位置（ボタン文字より上の余白部分のみ重ねる） */
	bottom: max(14px, calc(17 * var(--k)));
	right: max(-6px, calc(-8 * var(--k)));
	animation: none;
}

/* vn_n（名古屋）カード: 英文の「こんな方におすすめ」が日本語版より行数が増えて吹き出しの余白を侵食するため、
   下余白を少し広げて最終行と吹き出しが重ならないようにする */
.en .t27 .vn_card.vn_n {
	padding-bottom: 66px;
}


/* =========================================================
   会場TOP（open_top27.css 内セクション）
   2027出展募集デザイン 会場TOP（ja/yokohama/・en/yokohama/ ほか、名古屋へも流用予定）専用
   - 共通ベース／.rn 名称変更帯／.nw NEWS 1行は本ファイル上部の大TOP用定義を流用
   - <main class="t27 t27v"> 配下にスコープ。会場TOP固有分だけをこのセクションに持つ
   - 命名: vmv(会場MV) / ol(OUTLINE)。大TOPの mv* と衝突させない
   - 会場固有色は body の id（header.php が出し分ける #yokohama / #nagoya）でスコープして上書きする。
     マークアップ側に .vmv_yh 等の修飾クラスは付けない（#nagoya .t27 .vmv {...} のように ID 起点で当てる）
   - PCはカンプ(2000px幅)の0.7倍＝1400px幅を基準。MVのみ --u（open_top27.css 定義）で幅に比例して縮小
   - ブレークポイント: 1000px（名称変更帯・NEWS は open_top27.css 側で対応）／768px（MV縦積み・OUTLINE縦積み）

   【画像】
   - MV背景写真: images/yokohama/top/2027_exb/mv.webp（納品済み）／images/nagoya/top/2027_exb/mv.webp（名古屋・未支給。届くまで背景色のみ表示）
   - MVロゴ: images/common/2027_logo.webp（納品済み・光彩付き・横浜/名古屋で共通画像）
   - ol_sym: images/common/apple-touch-icon.png（納品済み）
   - OUTLINE背景写真: 旧来の /images/yokohama/top/outline_bg.webp を流用（.area_page .t27 #outline.ol で指定。名古屋は #nagoya.area_page .t27 #outline.ol で色だけ上書き）
   ========================================================= */

/* ---------- 共通 ---------- */
.t27v {
	--vblue: #3283d0; /* MV左パネルの青（横浜） */
}

/* =========================================================
   会場MV（vmv）
   ========================================================= */
.t27 .vmv {
	position: relative;
	/* 背景写真が無い間も崩れないよう、フォールバック色を敷く */
	background: #6fa6d6 url(../images/yokohama/top/2027_exb/mv.webp) center / cover no-repeat;
	overflow: hidden;
}

.t27 .vmv_in {
	position: relative;
	max-width: 1920px;
	margin: 0 auto;
	aspect-ratio: 2000 / 1005; /* カンプ比率 */
}

/* 左から青グラデを重ねる（左1/3は不透明に近く、右へ透明にフェード）。下ほど濃くする */
.t27 .vmv::before,
.t27 .vmv::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.t27 .vmv::before {
	background: linear-gradient(90deg, rgba(52, 136, 212, 0.95) 0, rgba(52, 136, 212, 0.88) 28%, rgba(52, 136, 212, 0.45) 40%, rgba(52, 136, 212, 0) 54%);
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0, rgba(0, 0, 0, 0.3) 38%, #000 70%);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0, rgba(0, 0, 0, 0.3) 38%, #000 70%);
}

/* 左側の白い光彩（カンプ実測: 上端〜MVの高さ45%付近まで白く、60%付近で消える。横は幅の約1/3まで） */
.t27 .vmv::after {
	background: linear-gradient(90deg, rgba(232, 244, 255, 0.7) 0, rgba(232, 244, 255, 0.5) 20%, rgba(232, 244, 255, 0.24) 35%, rgba(228, 242, 255, 0) 52%);
	-webkit-mask-image: linear-gradient(180deg, #000 0, #000 45%, rgba(0, 0, 0, 0) 68%);
	mask-image: linear-gradient(180deg, #000 0, #000 45%, rgba(0, 0, 0, 0) 68%);
}

/* 左カラム（幅680/2000）。中身はこのカラム内で水平中央 */
/* 中身はMVの高さに対して上下中央。ロゴは光彩の余白を打ち消しているので、
   ロゴの文字上端までの空き ≒ ONLINE STAGE1 下端からの空き になる */
.t27 .vmv_main {
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	bottom: 0;
	width: calc(500 * var(--u));
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
}

/* ロゴ（images/common/2027_logo.webp 1313x862）。光彩をトリミングすると境目が見えるため画像はそのまま表示し、
   上下の光彩の余白（実測: 文字・シンボルの上に高さの26.0%、下に26.8%）を margin のマイナスで打ち消す。
   箱の高さ 480x862/1313=315 → 上82・下84。光彩は透過なので周囲と重なっても問題ない */
.t27 .vmv_logo {
	width: calc(480 * var(--u));
	margin: calc(-82 * var(--u)) 0 calc(-84 * var(--u));
}

.t27 .vmv_logo img {
	width: 100%;
	aspect-ratio: 1313 / 862;
}

/* 出展のお申込みボタン（色はカンプの黄緑、ホバーは大TOPのボタン色 #f7ed00） */
.t27 .vmv_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(12 * var(--u));
	width: calc(310 * var(--u));
	height: calc(57 * var(--u));
	margin-top: calc(36 * var(--u)); /* ロゴ下端〜ボタン（空き①） */
	border-radius: calc(6 * var(--u));
	background: #c8ea01;
	box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 60, 120, 0.25);
	font-size: calc(21 * var(--u));
	font-weight: 900;
	letter-spacing: 0.1em;
	color: #111;
	transition: background-color 0.3s;
}

.t27 .vmv_btn:hover {
	opacity: 1;
	background: #f7ed00;
}

.t27 .vmv_btn span {
	white-space: nowrap;
}

/* 英語版: ボタン文言が長いため小さめにして1行に収める */
.t27 .vmv_en .vmv_btn {
	gap: calc(10 * var(--u));
	font-size: calc(17 * var(--u));
	letter-spacing: 0.04em;
}

.t27 .vmv_en .vmv_btn i {
	width: calc(24 * var(--u));
}

.t27 .vmv_area {
	margin-top: calc(48 * var(--u)); /* ボタン〜YOKOHAMA の文字上端が空き①の1.5倍になるよう、行の上の余白分を引いた値（実測で調整） */
	font-family: var(--ff-en);
	font-size: calc(36 * var(--u));
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-indent: 0.16em; /* 末尾の字間分を相殺して中央に */
}

.t27 .vmv_date {
	margin-top: calc(16 * var(--u));
	font-family: var(--ff-en);
	line-height: 1.2;
	white-space: nowrap;
}

.t27 .vmv_date b {
	font-size: calc(35 * var(--u));
	font-weight: 700;
	letter-spacing: -0.01em;
}

.t27 .vmv_date small {
	margin: 0 calc(8 * var(--u)) 0 calc(2 * var(--u));
	font-family: var(--ff-en);
	font-size: calc(12.5 * var(--u));
	font-weight: 400;
}

.t27 .vmv_place {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(6 * var(--u));
	margin-top: calc(8 * var(--u));
	font-family: var(--ff-en);
	font-size: calc(18 * var(--u));
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.t27 .vmv_place i {
	font-size: calc(18 * var(--u));
}

/* ONLINE STAGE1 ボックス（白半透明・青文字） */
.t27 .vmv_on {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(22 * var(--u));
	width: calc(310 * var(--u)); /* 申込ボタン・日付行と横幅を揃える */
	height: calc(47 * var(--u));
	margin-top: calc(15 * var(--u));
	border-radius: calc(3 * var(--u));
	background: rgba(255, 255, 255, 0.82);
	color: #7792db;
	font-family: var(--ff-en);
	white-space: nowrap;
}

/* 「ONLINE」「STAGE1」の2段は横幅を揃える。
   LINE Seed Bold では STAGE1 の方が約4%短いため、STAGE1 だけ字間を広げて合わせる（末尾の字間は margin で相殺） */
.t27 .vmv_on span {
	font-size: calc(15 * var(--u));
	font-weight: 700;
	line-height: 1.1;
	text-align: left;
}

.t27 .vmv_on span em {
	display: block;
	font-style: normal;
	letter-spacing: 0.1em;
	margin-right: -0.1em;
}

.t27 .vmv_on span em+em {
	letter-spacing: 0.138em;
	margin-right: -0.138em;
}

.t27 .vmv_on b {
	font-size: calc(20 * var(--u));
	font-weight: 700;
	letter-spacing: 0.02em;
}

.t27 .vmv_on b small {
	margin: 0 calc(5 * var(--u)) 0 calc(1 * var(--u));
	font-size: calc(10 * var(--u));
	font-weight: 400;
}

/* Think the future!（画像は上下左右に透明余白あり 1731x287。旧画像 939x210 と同じ文字サイズ・位置になるよう調整） */
.t27 .vmv_theme {
	position: absolute;
	z-index: 2;
	right: calc(13 * var(--u));
	bottom: calc(19 * var(--u));
	width: calc(606 * var(--u));
	aspect-ratio: 1731 / 287;
}

/* =========================================================
   NEWS（会場TOPの調整）: カンプは View ALL が黄緑のボタン
   ========================================================= */
.t27v .nw_all {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 5px 14px;
	border-bottom: 0;
	background: #c8ea01;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #111;
	transition: background-color 0.3s;
}

.t27v .nw_all:hover {
	opacity: 1;
	background: #b7d100;
}

.t27v .nw_all::after {
	content: '';
	width: 14px;
	height: 1px;
	background: #111;
}

/* =========================================================
   OUTLINE（ol）
   ========================================================= */
.t27 .ol {
	position: relative;
	overflow: hidden;
}

/* 背景: 旧 .area_page #outline（open_top.css。グラデ＋/images/yokohama/top/outline_bg.webp を multiply）の方が
   詳細度が高く .t27 .ol の指定が効かないため、同じ #outline を含むセレクタで上書きする。
   色は左 #95C8EE → 右 #9DD7E8 の横グラデ。写真は下端に敷き、同じグラデの半透明を重ねて薄く見せる */
.area_page .t27 #outline.ol {
	background-color: #9dd7e8;
	background-image:
		linear-gradient(90deg, rgba(149, 200, 238, 0.55) 0%, rgba(157, 215, 232, 0.55) 100%),
		url(/images/yokohama/top/outline_bg.webp),
		linear-gradient(90deg, #95c8ee 0%, #9dd7e8 100%);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-size: cover, contain, cover;
	background-position: center, 0 100%, center;
	background-blend-mode: normal;
}

.t27 .ol_in {
	position: relative;
	max-width: 788px; /* カンプ表幅 1126/2000 */
	margin: 0 auto;
	padding: 60px 24px 66px;
	box-sizing: content-box;
}

.t27 .ol_head {
	text-align: center;
}

.t27 .ol_sym {
	width: 30px;
	aspect-ratio: 114 / 99; /* images/common/apple-touch-icon.png */
	margin: 0 auto;
}

.t27 .ol_h2 {
	margin-top: 10px;
	font-family: var(--ff-en);
	font-size: 38px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.15em;
	text-indent: 0.15em;
}

.t27 .ol_sub {
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* 表: カードなし・透明。行区切りは細いグレー線。dl 内の文言・構造は触らず見た目だけ当てる */
.t27 .ol_body {
	margin-top: 56px;
}

.t27 .ol_body dl {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

.t27 .ol_body dl>div {
	display: grid;
	grid-template-columns: 142px minmax(0, 1fr);
	align-items: start;
	padding: 21px 0 22px;
	border-bottom: 1px solid rgba(70, 85, 100, 0.45);
}

.t27 .ol_body dl>div:first-child {
	padding-top: 0;
}

.t27 .ol_body dl>div:last-child {
	border-bottom: 0;
}

.t27 .ol_body dt,
.t27 .ol_body dd {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	width: auto;
	float: none;
}

.t27 .ol_body dt {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0.04em;
}

.t27 .ol_body dt span {
	display: block;
	font-size: inherit;
}

.t27 .ol_body dd {
	font-size: 15px;
	font-weight: 400; /* dt(700)の一段階下 */
	line-height: 1.8;
	letter-spacing: 0.03em;
	color: #222;
}

/* カンプでは dt 以外は太字にしていないため、既存クラス由来の強調は無効化する。
   色も明示（旧 .area_page #outline dl.border_list dd .bold_txt { color:#0066b3 } が
   id="outline" 経由で誤爆していたため、dl 側のクラス名は border_list → ol_list に変更済み。念のため上書き） */
.t27 .ol_body .bold_txt {
	font-weight: 400;
	color: inherit;
}

.t27 .ol_body .small_txt {
	font-size: 12.5px;
}

/* 英語版: 項目名が長い（Cooperating Organizations 等）ため左列を広げ、欧文は小さめに */
.t27 .ol_en .ol_in {
	max-width: 860px;
}

.t27 .ol_en .ol_body dl>div {
	grid-template-columns: 200px minmax(0, 1fr);
}

.t27 .ol_en .ol_body dt {
	font-size: 13px;
	letter-spacing: 0.06em;
	padding-right: 12px;
}

.t27 .ol_en .ol_body dd {
	font-size: 14px;
	line-height: 1.75;
	letter-spacing: 0.02em;
}

/* =========================================================
   会場固有色（NAGOYA）: body#nagoya で横浜の青系配色をピンク系に上書き
   カンプ（hitoteku_261019_nagoya_TOP）からの実測値。MV写真未支給のため
   ::before/::after の重ねグラデは概算。実写真支給後に画面で要微調整
   ========================================================= */
#nagoya .t27 .vmv {
	background-color: #c86b80;
	background-image: url(../images/nagoya/top/2027_exb/mv.webp);
}

#nagoya .t27 .vmv::before {
	background: linear-gradient(90deg, rgba(203, 107, 128, 0.95) 0, rgba(203, 107, 128, 0.88) 28%, rgba(203, 107, 128, 0.45) 40%, rgba(203, 107, 128, 0) 54%);
}

#nagoya .t27 .vmv::after {
	background: linear-gradient(90deg, rgba(255, 240, 245, 0.7) 0, rgba(255, 240, 245, 0.5) 20%, rgba(255, 240, 245, 0.24) 35%, rgba(255, 238, 244, 0) 52%);
}

/* 会場名「Aichi Sky Expo」に続く施設名の和文/英文（カッコ内）はカンプで一回り小さい */
#nagoya .t27 .vmv_place small {
	margin-left: 0.3em;
	font-size: 0.72em;
	font-weight: 400;
}

/* EN施設名 "(Aichi International Exhibition Center)" は横幅に関わらず常に2段で組む
   （「アイコン＋Aichi Sky Expo」の行はそのまま保ち、施設名だけ次の行へ折り返す） */
#nagoya .t27 .vmv_en .vmv_place {
	flex-wrap: wrap;
	row-gap: 2px;
	white-space: normal;
}

#nagoya .t27 .vmv_en .vmv_place small {
	flex-basis: 100%;
	margin-left: 0;
	text-align: center;
}

#nagoya .t27 .vmv_on {
	background: rgba(255, 209, 222, 0.92);
	color: #da738e;
}

/* テーマ画像（Build the future! / 1664x287）は横浜のThink the future!と比率が異なる */
#nagoya .t27 .vmv_theme {
	right: calc(15 * var(--u));
	bottom: calc(21 * var(--u));
	width: calc(602 * var(--u));
	aspect-ratio: 1664 / 287;
}

/* OUTLINE背景: 旧 open_top.css の名古屋配色（#fcdef0→#ecdafd）を踏襲 */
#nagoya.area_page .t27 #outline.ol {
	background-color: #ecdafd;
	background-image:
		linear-gradient(90deg, rgba(252, 222, 241, 0.55) 0%, rgba(236, 218, 254, 0.55) 100%),
		url(/images/yokohama/top/outline_bg.webp),
		linear-gradient(90deg, #fcdef0 0%, #ecdafd 100%);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-size: cover, contain, cover;
	background-position: center, 0 100%, center;
	background-blend-mode: normal;
}

/* =========================================================
   タブレット以下（max-width: 1000px）: 名称変更帯・NEWS は open_top27.css で対応済み
   ========================================================= */
@media screen and (max-width: 1000px) {
	.t27 .ol_in {
		padding: 48px 24px 56px;
	}
}

/* =========================================================
   MV・OUTLINE縦積み（max-width: 768px）
   MVは写真を全面に敷き、青の半透明を重ねた上に中身を中央揃えで載せる（写真の下に分けない）。
   Think the future! は下端に配置
   ========================================================= */
@media screen and (max-width: 768px) {
	.t27 .vmv {
		background: #2f80cc url(../images/yokohama/top/2027_exb/mv.webp) center / cover no-repeat;
	}

	/* 文字が読めるよう全面に青を重ねる（上は写真を少し見せ、中央〜下はやや濃く。濃すぎない程度） */
	.t27 .vmv::before {
		background: linear-gradient(180deg, rgba(52, 136, 212, 0.35) 0, rgba(52, 136, 212, 0.65) 35%, rgba(52, 136, 212, 0.65) 75%, rgba(52, 136, 212, 0.4) 100%);
		-webkit-mask-image: none;
		mask-image: none;
	}

	.t27 .vmv::after {
		display: none;
	}

	/* 下端に Think the future!（939x210）の高さ分を確保 */
	.t27 .vmv_in {
		aspect-ratio: auto;
		max-width: 640px;
		padding-bottom: calc(min(92vw, 560px) * 210 / 939 + 12px);
	}

	.t27 .vmv_theme {
		right: auto;
		left: 50%;
		bottom: 26px;
		width: min(86vw, 520px);
		max-width: none;
		transform: translateX(-50%);
	}

	/* PC側の #nagoya 指定（right/bottom/width）を打ち消す */
	#nagoya .t27 .vmv_theme {
		right: auto;
		bottom: 28px;
		width: min(86vw, 520px);
	}

	.t27 .vmv_main {
		position: relative;
		left: auto;
		top: auto;
		bottom: auto;
		width: 100%;
		padding: 36px 20px 24px;
	}

	/* 光彩の余白の打ち消し（PCと同じ比率: 幅×0.171／0.176） */
	.t27 .vmv_logo {
		width: min(400px, (100vw - 40px) * 0.88);
		margin: calc(min(400px, (100vw - 40px) * 0.88) * -0.171) 0 calc(min(400px, (100vw - 40px) * 0.88) * -0.176);
	}

	.t27 .vmv_btn {
		width: 100%;
		max-width: 320px;
		height: 54px;
		margin-top: 24px;
		font-size: 19px;
		gap: 10px;
		border-radius: 6px;
	}

	.t27 .vmv_en .vmv_btn {
		gap: 8px;
		font-size: 16px;
	}

	.t27 .vmv_en .vmv_btn i {
		width: 18px;
	}

	.t27 .vmv_area {
		margin-top: 30px;
		font-size: 30px;
	}

	.t27 .vmv_date {
		margin-top: 8px;
	}

	.t27 .vmv_date b {
		font-size: clamp(28px, 9vw, 36px);
	}

	.t27 .vmv_date small {
		margin: 0 6px 0 2px;
		font-size: clamp(10px, 3vw, 12px);
	}

	.t27 .vmv_place {
		gap: 6px;
		margin-top: 8px;
		font-size: 17px;
	}

	.t27 .vmv_place i {
		font-size: 17px;
	}

	.t27 .vmv_on {
		gap: 14px;
		width: 100%;
		max-width: 320px;
		height: 50px;
		margin-top: 16px;
		border-radius: 4px;
	}

	.t27 .vmv_on span {
		font-size: 13px;
	}

	.t27 .vmv_on b {
		font-size: clamp(16px, 5vw, 19px);
	}

	.t27 .vmv_on b small {
		margin: 0 3px 0 1px;
		font-size: 9.5px;
	}

	/* ---- OUTLINE: 項目名と内容を縦積み ---- */
	.t27 .ol_in {
		padding: 40px 20px 48px;
	}

	.t27 .ol_h2 {
		font-size: 30px;
	}

	.t27 .ol_body {
		margin-top: 36px;
	}

	.t27 .ol_body dl>div,
	.t27 .ol_en .ol_body dl>div {
		display: block;
		padding: 16px 0 18px;
	}

	.t27 .ol_body dt,
	.t27 .ol_en .ol_body dt {
		margin-bottom: 6px;
		padding-right: 0;
		font-size: 14px;
	}

	.t27 .ol_body dd,
	.t27 .ol_en .ol_body dd {
		font-size: 14px;
		line-height: 1.75;
	}
}

/* ---- 会場固有色（NAGOYA・768px以下）: 全面オーバーレイをピンク系に ---- */
@media screen and (max-width: 768px) {
	#nagoya .t27 .vmv {
		background: #c86b80 url(../images/nagoya/top/2027_exb/mv.webp) center / cover no-repeat;
	}

	#nagoya .t27 .vmv::before {
		background: linear-gradient(180deg, rgba(203, 107, 128, 0.35) 0, rgba(203, 107, 128, 0.65) 35%, rgba(203, 107, 128, 0.65) 75%, rgba(203, 107, 128, 0.4) 100%);
	}
}

/* =========================================================
   会場TOP追加ブロック（NAGOYA）: NEWS下・OUTLINE上（#achievement）
   デザイン案 hitoteku_261019_nagoya_TOP_MV_below（2000px幅）の0.7倍で作成。
   - 背景1層目: #achievement 全体に achievement_bg.webp
   - 背景2層目: .vf_plan（「貴社の目的に合ったプラン」見出し〜2カード）に薄い白レイヤー
   - 来場者の3つの特徴は、call_for_exhibitors.css の該当ルールをベースに表示崩れ防止のため移植し、
     TOP用にデザイン案の見た目へ調整（特別プランページとは見た目が異なるのが正）
   ========================================================= */
.t27 #achievement {
	/* 写真の上に薄い白レイヤーを重ね、特別プランページ由来のグラフ画像を見やすくする */
	background: linear-gradient(rgb(255 255 255 / 60%), rgb(255 255 255 / 30%)), #d9d9d9 url(../images/nagoya/top/2027_exb/achievement_bg.webp) center top / cover no-repeat;
}

.t27 #achievement .vf_in {
	max-width: 1100px; /* 来場者の3つの特徴は特別プランページと同じ内容幅 */
	margin: 0 auto;
	padding: 48px 24px 46px;
	box-sizing: content-box;
}

/* 文字は写真の上に載るため白い光彩で読ませる（.vn_head と同じ値） */
.t27 .vf_lead,
.t27 .vf_plan_ttl {
	text-shadow: 0 0 6px #fff, 0 0 10px #fff, 0 0 14px rgba(255, 255, 255, 0.8);
}

.t27 .vf_lead {
	text-align: center;
}

.t27 .vf_sym {
	/* symbol.webp（152x138）は本体94x80の周囲に余白がある。本体が開催概要の .ol_sym と同じ30px幅になる大きさにし、余白分を打ち消す */
	width: 48px;
	aspect-ratio: 152 / 138;
	margin: -9px auto;
}

.t27 .vf_lead_ttl {
	margin-top: 18px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.t27 .vf_lead_txt {
	margin-top: 22px;
	font-size: 15px;
	line-height: 1.7;
	letter-spacing: 0.02em;
}

/* ---- 来場者の3つの特徴（call_for_exhibitors.css から移植しTOP用に調整） ---- */
.t27 #achievement .visitor_features_heading {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 25px;
	margin: 60px 0 44px;
}

/* 名古屋の光彩付きロゴ（images/common/2027_logo_ng_glow.webp） */
.t27 #achievement .visitor_features_heading img {
	width: auto;
	height: 78px; /* 画像547x95のうちロゴ本体512x60が約420x49px（特別プランページのロゴと同じ幅）になる大きさ */
	max-width: none;
	margin: -14px -14px -15px -15px; /* 光彩の余白分を打ち消す */
}

.t27 #achievement .visitor_features_heading_txt {
	color: #e9463c;
	font-size: 35px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	text-shadow: 0 0 6px #fff, 0 0 10px #fff, 0 0 14px rgba(255, 255, 255, 0.8);
}

.t27 #achievement .visitor_features_heading_txt strong {
	font-weight: 700;
	font-size: 1.55em;
	line-height: 0.8;
}

.t27 .visitor_feature {
	margin-bottom: 44px;
}

.t27 .visitor_feature:last-child {
	margin-bottom: 0;
}

.t27 .visitor_feature h3 {
	display: flex;
	align-items: stretch;
	width: 100%;
	margin: 0 0 20px;
	padding: 0;
	overflow: hidden;
	border-radius: 0 10px 999px 0;
	font-size: 20px;
	line-height: 1.35;
	text-align: left;
}

.t27 .visitor_feature h3 .visitor_feature_num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 53px;
	padding: 9px 14px;
	background: #2e2e2f;
	color: #fff;
	font-weight: 700;
}

.t27 .visitor_feature h3 .visitor_feature_ttl {
	display: flex;
	align-items: center;
	flex: 1;
	padding: 9px 30px 9px 18px;
	background: linear-gradient(90deg, #e04743 0%, #db4540 22%, #bd3c37 38%, #bb3b36 75%, #d74440 86%, #d4433f 100%);
	color: #f2f3f6;
	font-weight: 700;
}

.t27 .visitor_feature .feature_lead {
	font-weight: 700;
	font-size: calc(1em + 2px);
}

.t27 .visitor_feature .feature_desc {
	margin-bottom: 1.5em;
	font-size: 17.6px; /* 特別プランページと同じ */
	line-height: 1.8;
}

.t27 .visitor_feature .feature_desc .stat_red {
	color: #e60013;
}

.t27 .visitor_feature figure {
	margin: 0 0 1em;
}

.t27 .visitor_feature img {
	width: 100%;
	height: auto;
	display: block;
}

/* 特徴1の写真2枚（nagoya-feature-01 / -01-02）。特別プランページの .feature_imgs と同じ見た目にする */
.t27 .visitor_feature .feature_imgs {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 24px;
	margin: 0 0 1em;
}

.t27 .visitor_feature .feature_imgs figure {
	flex: 1 1 calc(50% - 12px);
	max-width: calc(50% - 12px);
	min-width: 0;
	margin: 0;
	box-sizing: border-box;
}

.t27 .visitor_feature .feature_imgs figure:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 867 / 987;
	background: #fff;
	border: 4px solid #000;
	border-radius: 18px;
	padding-right: 32px;
}

.t27 .visitor_feature .feature_imgs img {
	width: 100%;
}

.t27 .visitor_feature .feature_imgs figure:first-child img {
	flex-shrink: 0;
}

/* ---- 背景2層目: 貴社の目的に合ったプラン＋2カード ---- */
.t27 .vf_plan {
	padding: 40px 24px 51px;
	background: rgba(255, 255, 255, 0.38);
}

.t27 .vf_plan_ttl {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.05em;
	text-align: center;
}

.t27 .vf_plan_cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 476px));
	justify-content: center;
	column-gap: 28px;
	margin-top: 26px;
}

/* 画像（938x484）は影込みで四辺44pxの余白がある。見えているカード（850x396）を枠に合わせ、影は外へはみ出させる */
.t27 .vf_plan_card {
	display: block;
	transition: transform 0.35s ease;
}

.t27 .vf_plan_card img {
	display: block;
	width: 110.353%;
	max-width: none;
	margin: -5.176%;
	transition: filter 0.35s ease;
}

/* ホバーで浮き上がる（全体TOPの開催のご案内カードと同じ動き） */
.t27 .vf_plan_card:hover {
	opacity: 1;
	transform: translateY(-8px);
}

.t27 .vf_plan_card:hover img {
	filter: drop-shadow(0 12px 16px rgba(0, 20, 60, 0.18));
}

@media (prefers-reduced-motion: reduce) {
	.t27 .vf_plan_card,
	.t27 .vf_plan_card img {
		transition: none;
	}

	.t27 .vf_plan_card:hover {
		transform: none;
	}
}

@media screen and (max-width: 768px) {
	.t27 .vf_lead_ttl {
		font-size: 21px;
	}

	.t27 .vf_lead_txt {
		font-size: 14px;
		text-align: left;
	}

	.t27 .vf_lead_txt br {
		display: none;
	}

	.t27 #achievement .visitor_features_heading {
		gap: 10px;
		margin: 44px 0 28px;
	}

	.t27 #achievement .visitor_features_heading img {
		height: 54px;
		margin: -9px -9px -10px -10px;
	}

	.t27 #achievement .visitor_features_heading_txt {
		font-size: 26px;
	}

	.t27 .visitor_feature h3 {
		font-size: 17px;
	}

	.t27 .visitor_feature .feature_desc {
		font-size: 15px;
	}

	.t27 .vf_plan_ttl {
		font-size: 19px;
	}

	.t27 .vf_plan_cards {
		grid-template-columns: minmax(0, 476px);
		row-gap: 22px;
	}
}

@media screen and (max-width: 480px) {
	.t27 .visitor_feature h3 {
		font-size: 15px;
	}

	.t27 .visitor_feature h3 .visitor_feature_ttl {
		padding-right: 16px;
	}
}

@media screen and (max-width: 650px) {
	.t27 .visitor_feature .feature_imgs {
		flex-direction: column;
		gap: 16px;
	}

	.t27 .visitor_feature .feature_imgs figure {
		flex: 1 1 auto;
		max-width: none;
		width: 100%;
	}

	.t27 .visitor_feature .feature_imgs figure:first-child {
		aspect-ratio: auto;
	}
}
/* ---- 会場TOP追加ブロック（NAGOYA）ここまで ---- */