/* 輝くオトナの未来展2026：本体の CSS。SP（〜767px）が基本、768px 以上で PC の並び。
   数値は Figma md（01_原文/figma/）の実測。文字の下限＝本文 18px・注記 14px（指示書B §2-3-4）。 */

/* ---------- 基本 ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--c-page);
	color: var(--c-ink);
	font-family: var(--ff-jp);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.8;
	overflow-wrap: anywhere;
	line-break: strict;
}

body.otn-menu-open {
	overflow: hidden;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

img,
svg,
iframe {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

em {
	font-style: normal;
}

[lang="en"] {
	font-family: var(--ff-en);
}

a:focus-visible,
button:focus-visible {
	/*
	 * 二重の枠（濃い枠3px＋内側に白2px）。WCAG 1.4.11 の 3:1 をどの地でも満たす：
	 * 明るい地（クリーム・白・薄緑）には濃い枠が14:1以上、緑の地には白の縁が5.5:1。
	 */
	outline: 3px solid var(--c-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--c-white);
}

.otn-line {
	display: block;
}

@media (max-width: 767px) {
	.otn-pc-only {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.otn-sp-only {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0s !important;
		scroll-behavior: auto !important;
	}
}

.otn-main {
	display: block;
	overflow-x: clip;
}

/* ---------- 段 ---------- */
.otn-sec {
	position: relative;
	padding: var(--sec-py-sp) var(--sec-px);
}

@media (min-width: 768px) {
	.otn-sec {
		padding: var(--sec-py-pc) max(var(--sec-px), calc((100% - var(--w-content)) / 2));
	}
}

.otn-sec--white {
	background: var(--c-white);
}

.otn-sec-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0; /* Figma SP 09_SP_TOP：英字ラベルと見出しの間に間なし。PC は下の @media で 8px */
	margin-bottom: 20px;
	text-align: center;
}

.otn-sec-head__en {
	color: var(--c-label);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 3.12px;
}

.otn-sec-head__ja {
	font-size: clamp(24px, 9.78px + 1.852vw, 32px);
	font-weight: 700;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.otn-sec-head {
		gap: 8px;
		margin-bottom: 32px;
	}

	.otn-sec-head__en {
		color: var(--c-green);
		font-weight: 500;
		letter-spacing: 0;
	}
}

.otn-note {
	color: var(--c-ink-3);
	font-size: 14px;
	line-height: 1.7;
}

@media (min-width: 768px) {
	.otn-note {
		font-size: 15px;
	}
}

.otn-card {
	background: var(--c-white);
	border-radius: var(--r-card);
	box-shadow: var(--sh-card);
	padding: 16px;
}

.otn-card__heading {
	color: var(--c-green);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.otn-card__heading {
		font-size: 28px;
	}
}

/* ---------- ヘッダー ---------- */
.otn-header {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 65px;
	padding: 0 16px;
	background: var(--c-page);
	border-bottom: 1px solid var(--c-line);
}

.otn-header__logo {
	display: block;
	flex: none;
}

.otn-header__logo-img {
	width: 59px;
	height: 44px;
}

.otn-burger {
	position: relative;
	width: 48px;
	height: 48px;
	padding: 0;
	background: transparent;
	border: 2px solid var(--c-green);
	border-radius: var(--r-btn);
}

.otn-burger span {
	position: absolute;
	left: 11px;
	width: 22px;
	height: 2px;
	background: var(--c-green);
}

.otn-burger span:nth-child(1) {
	top: 13px;
}

.otn-burger span:nth-child(2) {
	top: 20px;
}

.otn-burger span:nth-child(3) {
	top: 27px;
}

@media (min-width: 768px) {
	.otn-header {
		height: 113px;
		padding: 0 clamp(16px, calc((100vw - 768px) * 0.0476 + 16px), 48px);
	}

	.otn-header__logo-img {
		width: 96.5px;
		height: 72px;
	}
}

.otn-nav__list {
	display: flex;
	align-items: flex-end;
	gap: clamp(12px, calc((100vw - 768px) * 0.0357 + 12px), 36px);
}

.otn-nav__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	text-decoration: none;
}

.otn-nav__ja {
	color: var(--c-ink);
	font-size: clamp(15px, calc((100vw - 768px) * 0.00446 + 15px), 18px);
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.otn-nav__en {
	color: var(--c-green);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.88px;
	white-space: nowrap;
}

.otn-nav__bar {
	display: block;
	width: 100%;
	height: 3px;
	background: transparent;
}

.otn-nav__item.is-current .otn-nav__bar {
	background: var(--c-green);
}

.otn-nav__link:hover .otn-nav__ja,
.otn-nav__link:focus-visible .otn-nav__ja {
	color: var(--c-green);
}

/* ---------- SP メニュー ---------- */
.otn-menu {
	position: fixed;
	inset: 0;
	z-index: 100;
	overflow: auto;
	padding: 0 16px 32px;
	background: var(--c-green);
	border-top: 6px solid var(--c-gold);
	color: var(--c-white);
}

.otn-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 68px;
}

.otn-menu__logo-img {
	width: 59px;
	height: 44px;
}

.otn-menu__close {
	width: 48px;
	height: 48px;
	padding: 0;
	background: var(--c-gold);
	border: 0;
	border-radius: var(--r-btn);
	color: var(--c-ink);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

.otn-menu__item {
	border-bottom: 1px solid rgba(221, 172, 0, 0.55);
}

.otn-menu__link {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 16px 4px;
	text-decoration: none;
}

.otn-menu__link::before {
	content: "";
	flex: none;
	align-self: center;
	width: 8px;
	height: 8px;
	margin-right: 4px;
	background: var(--c-gold);
	border-radius: 50%;
}

.otn-menu__ja {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
}

.otn-menu__en {
	color: var(--c-menu-en);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.5px;
}

.otn-menu__contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
}

.otn-menu__contact-head {
	color: var(--c-menu-en);
	font-size: 15px;
	font-weight: 700;
}

.otn-menu__hours {
	color: rgba(255, 255, 255, 0.9);
	font-size: 14px;
}

@media (min-width: 768px) {
	.otn-menu {
		display: none;
	}
}

/* ---------- ピル・ボタン ---------- */
.otn-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 18px;
	border: 2px solid transparent;
	border-radius: var(--r-pill);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.otn-pill--green {
	background: var(--c-green);
	border-color: var(--c-green);
	color: var(--c-white);
}

.otn-pill--gold {
	background: var(--c-gold);
	border-color: var(--c-gold);
	color: var(--c-ink);
}

.otn-pill--green-line {
	background: var(--c-white);
	border-color: var(--c-green);
	color: var(--c-green);
}

.otn-pill--gold-line {
	background: var(--c-white);
	border-color: var(--c-gold);
	color: var(--c-gold-ink);
}

.otn-pill--gray {
	background: var(--c-line);
	border-color: var(--c-line);
	color: var(--c-ink-3);
}

.otn-pill--green-pale {
	background: var(--c-green-pale);
	border-color: var(--c-green-pale);
	color: var(--c-green);
}

.otn-pill--gold-pale {
	background: var(--c-gold-pale);
	border-color: var(--c-gold-pale);
	color: var(--c-ink);
}

.otn-pill--badge {
	padding: 4px 16px;
	font-size: 14px;
	white-space: normal;
}

@media (min-width: 768px) {
	.otn-pill--badge {
		font-size: 15px;
	}
}

.otn-tel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding: 0 40px;
	background: var(--c-green);
	border-radius: var(--r-pill);
	color: var(--c-white);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.otn-tel {
		min-height: 64px;
		font-size: 24px;
	}
}

.otn-tel:hover,
.otn-tel:focus-visible,
.otn-btn--green:hover,
.otn-btn--green:focus-visible {
	background: #006d35; /* 緑 #00793b を10%暗く */
}

.otn-tel--gold {
	width: 100%;
	background: var(--c-gold);
	color: var(--c-ink);
	font-size: 21px;
}

.otn-tel--gold:hover,
.otn-tel--gold:focus-visible {
	background: #c99c00;
}

.otn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 8px 32px;
	border: 2px solid var(--c-green);
	border-radius: var(--r-pill);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}

.otn-btn--green {
	background: var(--c-green);
	color: var(--c-white);
}

.otn-btn--line {
	background: var(--c-white);
	color: var(--c-green);
}

.otn-btn--line:hover,
.otn-btn--line:focus-visible {
	background: var(--c-green-pale);
}

@media (min-width: 768px) {
	.otn-btn {
		min-height: 56px;
		font-size: 18px;
	}
}

/* ---------- 準備中の枠 ---------- */
.otn-ph {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	overflow: hidden;
	background-color: var(--c-paper);
	background-image: url("../img/placeholder-pattern.svg");
	background-size: 28px 28px;
	border-radius: var(--r-img);
	aspect-ratio: var(--ratio, 4 / 3);
}

.otn-ph__pill {
	padding: 8px 14px;
	background: var(--c-white);
	border-radius: var(--r-note);
	color: var(--c-ink-4);
	font-size: 14px;
	line-height: 1.4;
}

/* ---------- 下層の見出し ---------- */
.otn-deco {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	color: var(--c-deco);
	font-family: var(--ff-en);
	font-size: 46px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 3.12px;
	white-space: nowrap;
	user-select: none;
}

.otn-deco__l,
.otn-deco__r {
	position: absolute;
	top: -16px;
}

.otn-deco__l {
	left: -12px;
	transform-origin: top left;
	transform: rotate(-90deg) translateX(-100%);
}

.otn-deco__r {
	right: -12px;
	transform-origin: top right;
	transform: rotate(90deg) translateX(100%);
}

.otn-deco--top {
	font-size: 52px;
}

@media (min-width: 768px) {
	.otn-deco {
		font-size: clamp(46px, calc((100vw - 768px) * 0.0506 + 46px), 80px);
		letter-spacing: 4.8px;
	}

	.otn-deco__l,
	.otn-deco__r {
		top: -24px;
	}

	.otn-deco__l {
		left: -20px;
	}

	.otn-deco__r {
		right: -20px;
	}

	.otn-deco--top {
		font-size: clamp(52px, calc((100vw - 768px) * 0.1012 + 52px), 120px);
		letter-spacing: 7.2px;
	}

	.otn-deco--top .otn-deco__l {
		left: -28px;
		top: 40px;
	}

	.otn-deco--top .otn-deco__r {
		right: -28px;
		top: -60px;
	}
}

.otn-hero {
	position: relative;
	padding: 24px var(--sec-px) 20px;
	text-align: center;
}

.otn-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	max-width: var(--w-content);
	margin: 0 auto;
}

.otn-hero__en {
	color: var(--c-label);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 3.12px;
}

.otn-hero__ja {
	font-size: clamp(22px, 33.11px - 0.926vw, 26px);
	font-weight: 700;
	line-height: 1.5;
}

.otn-hero__lead {
	margin-top: 8px;
	font-size: clamp(18px, 14.44px + 0.463vw, 20px);
	line-height: 1.9;
}

.otn-hero__pills {
	display: flex;
	justify-content: center;
	gap: 14px;
	padding-top: 8px;
}

.otn-pill--hero {
	padding: 6px 20px;
	font-size: 15px;
}

@media (min-width: 768px) {
	.otn-hero {
		padding: 56px max(var(--sec-px), calc((100% - var(--w-content)) / 2)) 40px;
	}

	.otn-hero__inner {
		gap: 10px;
	}

	.otn-hero__en {
		color: var(--c-green);
		font-size: clamp(30px, -16.22px + 6.019vw, 56px);
		font-weight: 500;
		letter-spacing: 0;
	}

	.otn-hero__lead {
		margin-top: 10px;
	}

	.otn-hero__pills {
		padding-top: 12px;
	}

	.otn-pill--hero {
		padding: 8px 26px;
		font-size: 17px;
	}

	.otn-hero--news {
		padding-top: 64px;
	}

	.otn-hero--article {
		padding: 64px max(var(--sec-px), calc((100% - var(--w-article)) / 2)) 24px;
	}

	.otn-hero--article .otn-hero__ja {
		font-size: 18px;
	}

	.otn-hero__en--404 {
		font-size: 56px;
	}
}

.otn-hero__ja--tm .otn-line {
	display: block;
}

.otn-hero__lead--tm {
	max-width: 1100px;
	text-align: center;
}

/* ---------- トップ：hero ---------- */
.otn-top-hero {
	position: relative;
	overflow: hidden;
	padding: 24px 16px 28px;
}

.otn-top-hero__inner {
	position: relative;
	max-width: var(--w-content);
	margin: 0 auto;
}

.otn-top-hero__main {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.otn-top-hero__logo {
	line-height: 0;
}

.otn-top-hero__logo-img {
	width: 210px;
	height: auto;
	aspect-ratio: 252 / 188;
}

.otn-top-hero__lead {
	margin-top: 0; /* Figma SP 7:2744：logo の直後に間なし */
	font-size: 18px;
	font-weight: 700;
	line-height: 1.8;
}

.otn-top-hero__catch {
	margin-top: 18px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
}

.otn-top-hero__catch-row {
	display: block;
	white-space: nowrap; /* M-7：「を考え／る」のように1文字だけ次の行に落とさない（折り返しは行と行の間だけ） */
}

.otn-top-hero__catch .is-ima {
	/* 金は地の色だけ（design.md §6）。文字は濃い色 */
	padding: 0 0.18em;
	background: var(--c-gold);
	border-radius: 6px;
	color: var(--c-ink);
	font-style: normal;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.otn-top-hero__catch .is-mirai {
	color: var(--c-green);
}

.otn-top-hero__x {
	margin-right: 0.3em;
	font-size: 18px;
}

.otn-top-hero__info {
	margin-top: 20px;
}

.otn-info {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px 16px;
	background: var(--c-white);
	border-radius: var(--r-card);
	box-shadow: var(--sh-card);
}

.otn-info__row {
	display: grid;
	grid-template-columns: 3em 1fr;
	align-items: baseline;
	gap: 4px 12px;
}

.otn-info dt {
	color: var(--c-green);
	font-size: 18px;
	font-weight: 700;
}

.otn-info dd {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.otn-info__date {
	color: var(--c-green);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
}

.otn-info__dow {
	font-family: var(--ff-jp);
	font-size: 15px;
}

.otn-info__time {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.otn-info__venue {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
}

.otn-info__addr {
	font-size: 18px;
	line-height: 1.6;
}

.otn-pill--free {
	padding: 4px 18px;
	font-size: 16px;
}

.otn-info__row--entry dd {
	align-items: flex-start;
}

.otn-info__org {
	font-size: 18px;
	line-height: 1.6;
}

.otn-info__org a {
	color: var(--c-ink);
	font-weight: 700;
}

.otn-quick {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 16px;
}

.otn-quick__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 56px;
	padding: 0 8px; /* Figma SP 7:2932 ほか：高さ 56 固定・上下の内側余白なし */
	background: var(--c-green);
	border-radius: var(--r-card);
	color: var(--c-white);
	text-align: center;
	text-decoration: none;
}

.otn-quick__link:hover,
.otn-quick__link:focus-visible {
	background: #006d35; /* 緑 #00793b を10%暗く */
}

.otn-quick__title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.otn-quick__sub {
	color: var(--c-white);
	font-size: 14px;
	line-height: 1.3;
}

@media (min-width: 768px) {
	.otn-top-hero {
		--u: min(1px, 0.06944vw);
		padding: 64px max(var(--sec-px), calc((100% - var(--w-content)) / 2)) 0;
	}

	.otn-top-hero__main {
		flex-direction: row;
		align-items: flex-start;
		gap: calc(88 * var(--u));
		text-align: left;
	}

	.otn-top-hero__logo {
		flex: none;
		width: calc(420 * var(--u));
	}

	.otn-top-hero__logo-img {
		width: 100%;
	}

	.otn-top-hero__text {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: flex-start;
		min-width: 0;
	}

	.otn-top-hero__lead {
		margin-top: 0;
		font-size: 18px;
		font-weight: 400;
		line-height: 2;
	}

	.otn-top-hero__catch {
		margin-top: 8px;
		margin-left: -0.5em;
		font-size: max(24px, calc(40 * var(--u)));
		line-height: 1.5;
	}

	.otn-top-hero__catch-row {
		display: inline-block;
	}

	.otn-top-hero__x {
		margin: 0 0.25em;
		font-size: 1em;
	}

	.otn-top-hero__illust {
		width: calc(507 * var(--u));
		max-width: 100%;
		margin: calc(20 * var(--u)) 0 0 calc(94 * var(--u));
	}

	.otn-top-hero__info {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 24px calc(54 * var(--u));
		margin-top: calc(24 * var(--u));
	}

	.otn-info {
		flex: 1 1 560px;
		max-width: 704px;
		gap: 10px;
		padding: 14px 24px 14px 62px;
		position: relative;
	}

	.otn-info__row {
		grid-template-columns: auto 1fr;
		gap: 24px;
	}

	.otn-info dt {
		font-size: 18px;
	}

	.otn-info dd {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 24px;
	}

	.otn-info__date {
		font-size: 34px;
		line-height: 1.2;
	}

	.otn-info__dow {
		font-size: 20px;
	}

	.otn-info__time {
		font-size: 20px;
	}

	.otn-info__venue {
		font-size: 22px;
	}

	.otn-info__row--venue dd {
		gap: 0 4px;
	}

	.otn-info__addr {
		font-size: 18px;
	}

	.otn-info__row--entry {
		align-items: center;
	}

	.otn-info__row--entry dd {
		flex-wrap: nowrap;
	}

	.otn-pill--free {
		padding: 6px 22px;
		font-size: 20px;
	}

	.otn-info__org {
		/* 18px に上げたため absolute 配置だと会場の行に重なる。流し込みにして dd の頭にそろえる（2em＝dt 2文字＋gap 24px） */
		margin-left: calc(2em + 24px);
		font-size: 18px;
		line-height: 1.6;
	}

	.otn-top-hero__side {
		flex: 1 1 300px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 130px;
		padding: 0 16px;
		border-left: 1px solid var(--c-line);
		border-right: 1px solid var(--c-line);
		text-align: center;
	}

	.otn-top-hero__side-pre {
		/* 金は地の色だけ（design.md §6）。文字は濃い色のバッジ */
		display: inline-block;
		padding: 2px 14px;
		background: var(--c-gold);
		border-radius: var(--r-pill);
		color: var(--c-ink);
		font-size: 18px;
		font-weight: 700;
	}

	.otn-top-hero__side-name {
		color: var(--c-green);
		font-size: 30px;
		font-weight: 700;
		line-height: 44px;
	}

	.otn-top-hero__side-name small {
		font-size: 26px;
	}

	.otn-quick {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
		margin-top: calc(31 * var(--u));
	}

	.otn-quick__link {
		gap: 6px;
		min-height: 86px;
		padding: 20px 8px;
	}

	.otn-quick__title {
		font-size: 20px;
	}
}

@media (min-width: 768px) and (max-width: 1100px) {
	.otn-info {
		padding-left: 24px;
	}

	.otn-info__org {
		position: static;
	}
}

/* ---------- トップ：お知らせ ---------- */
.otn-sec--news {
	padding-top: 0;
	padding-bottom: 28px;
}

.otn-news-card {
	padding: 18px 16px;
	background: var(--c-white);
	border-radius: var(--r-card);
	box-shadow: var(--sh-card);
}

.otn-news-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 6px;
}

.otn-news-card__title {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.otn-news-card__en {
	color: var(--c-green);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.1;
}

.otn-news-card__ja {
	font-size: 18px;
	font-weight: 700;
}

.otn-news-card__more {
	color: var(--c-green);
	font-size: 15px;
	font-weight: 700;
}

.otn-news-card__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 0;
	border-top: 1px solid var(--c-line);
}

.otn-news-card__date {
	color: var(--c-green);
	font-size: 14px;
	line-height: 1.4;
}

.otn-news-card__link {
	font-size: 18px;
	line-height: 1.6;
}

.otn-news-card__link:hover,
.otn-news-card__link:focus-visible,
.otn-newslist__link:hover,
.otn-newslist__link:focus-visible {
	color: var(--c-green);
}

@media (min-width: 768px) {
	.otn-sec--news {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.otn-news-card {
		padding: 32px 40px;
	}

	.otn-news-card__head {
		padding-bottom: 16px;
	}

	.otn-news-card__en {
		font-size: 36px;
	}

	.otn-news-card__more {
		font-size: 18px;
	}

	.otn-news-card__item {
		flex-direction: row;
		align-items: baseline;
		gap: 28px;
		padding: 14px 4px;
	}

	.otn-news-card__date {
		flex: none;
		font-size: 16px;
		font-weight: 500;
	}
}

/* ---------- トップ：コンセプト ---------- */
.otn-concept__body {
	font-size: 18px;
	line-height: 2;
	text-align: center;
}

@media (min-width: 768px) {
	.otn-sec--concept {
		padding-top: var(--sec-py-pc-s);
		padding-bottom: var(--sec-py-pc-s);
	}

	.otn-concept__body {
		font-size: clamp(18px, 14.44px + 0.463vw, 20px);
	}
}

/* ---------- トップ：スペシャルゲスト ---------- */
.otn-sec--guest {
	padding-top: 8px;
}

.otn-guests {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.otn-guest {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.otn-guest__date {
	margin-bottom: 8px;
	color: var(--c-green);
	font-weight: 700;
	line-height: 1.3;
}

.otn-date__num {
	font-size: 20px;
}

.otn-guest__date .otn-date__dow {
	font-family: var(--ff-en);
	font-size: 14px;
}

.otn-guest__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 343 / 300; /* Figma SP 7:3507 343×300 */
	object-fit: cover;
	object-position: center 25%;
	border-radius: var(--r-img);
}

.otn-guest__name {
	margin-top: 10px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
}

.otn-guest__act {
	color: var(--c-ink-3);
	font-size: 18px;
	line-height: 1.6;
}

.otn-sec--guest .otn-note {
	margin-top: 12px;
}

@media (min-width: 768px) {
	.otn-sec--guest {
		padding-top: var(--sec-py-pc-s);
		padding-bottom: var(--sec-py-pc-s);
	}

	.otn-guests {
		flex-direction: row;
		justify-content: center;
		gap: 64px;
	}

	.otn-guest {
		align-items: center;
		gap: 12px;
		width: 340px;
		text-align: center;
	}

	.otn-guest__date {
		margin: 0;
	}

	.otn-date__num {
		font-size: 26px;
	}

	.otn-guest__date .otn-date__dow {
		font-family: var(--ff-jp);
		font-size: 18px;
	}

	.otn-guest__photo {
		height: auto;
		aspect-ratio: 4 / 5;
	}

	.otn-guest__name {
		margin: 0;
		font-size: 26px;
	}
}

/* ---------- トップ：会場のたのしみ方 ---------- */
.otn-menu-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.otn-menu-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--c-white);
	border-radius: var(--r-card);
	box-shadow: var(--sh-card);
	text-decoration: none;
}

.otn-ph--menu {
	height: 160px;
	aspect-ratio: auto;
	border-radius: 0;
}

.otn-menu-card__body {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	padding: 16px;
}

.otn-menu-card__texts {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
}

.otn-menu-card__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
}

.otn-menu-card__text {
	font-size: 18px;
	line-height: 1.7;
}

.otn-menu-card__arrow {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--c-green);
	border-radius: 50%;
	color: var(--c-white);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

.otn-menu-card:hover .otn-menu-card__title,
.otn-menu-card:focus-visible .otn-menu-card__title {
	color: var(--c-green);
}

@media (min-width: 768px) {
	.otn-menu-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.otn-ph--menu {
		height: 220px;
	}

	.otn-menu-card__body {
		align-items: center;
		padding: 24px 28px;
	}

	.otn-menu-card__title {
		font-size: 24px;
	}
}

/* ---------- トップ：見どころ ---------- */
.otn-hl-grid {
	display: grid;
	gap: 14px;
}

.otn-hl {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 18px 16px;
	background: var(--c-white);
	border: 3px solid;
	border-radius: var(--r-card);
}

.otn-hl--gold {
	border-color: var(--c-gold);
}

.otn-hl--green {
	border-color: var(--c-green);
}

.otn-pill--hl {
	padding: 6px 18px;
	font-size: 17px;
}

.otn-hl__body {
	font-size: 18px;
	line-height: 1.8;
}

.otn-hl__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.otn-chip {
	padding: 6px 14px;
	background: var(--c-white);
	border: 2px solid;
	border-radius: var(--r-pill);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.otn-chip--gold {
	border-color: var(--c-gold);
	color: var(--c-gold-ink);
}

.otn-chip--green {
	border-color: var(--c-green);
	color: var(--c-green);
}

.otn-hl__etc {
	font-size: 18px;
}

@media (max-width: 767px) {
	.otn-hl__body {
		order: 3;
	}

	.otn-hl__chips {
		order: 2;
	}
}

@media (min-width: 768px) {
	.otn-hl-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.otn-hl {
		gap: 16px;
		padding: 32px 36px;
	}

	.otn-pill--hl {
		padding: 8px 28px;
		font-size: 22px;
	}

	.otn-hl__chips {
		gap: 10px;
	}

	.otn-chip {
		padding: 8px 18px;
		font-size: 16px;
	}
}

/* ---------- トップ：タイアップ・フード・物産 ---------- */
.otn-sec--food {
	padding-top: 28px;
}

.otn-fg {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.otn-tm-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px;
	background: var(--c-white);
	border-radius: var(--r-card);
	box-shadow: var(--sh-card);
}

.otn-tm-card__media {
	width: 100%;
	height: auto;
	aspect-ratio: 311 / 140; /* Figma SP 7:7302 311×140 */
	object-fit: cover;
	border-radius: var(--r-img);
}

.otn-tm-card__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.otn-tm-card__en {
	color: var(--c-green);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.1;
}

.otn-tm-card__title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.otn-tm-card__body {
	font-size: 18px;
	line-height: 1.8;
}

.otn-tm-card__members {
	color: var(--c-ink-3);
	font-size: 18px;
	line-height: 1.8;
}

.otn-tm-card__sub {
	font-size: 18px;
	line-height: 1.8;
}

.otn-tm-card__desc {
	color: var(--c-ink-3);
	font-size: 18px;
	line-height: 1.7;
}

.otn-tm-card__btn {
	width: 100%;
	margin-top: 14px;
}

.otn-fg-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
	background: var(--c-white);
	border-radius: var(--r-card);
	box-shadow: var(--sh-card);
}

.otn-fg-card .otn-ph--sp140 {
	height: auto;
	aspect-ratio: 311 / 140; /* Figma SP 7:7392 311×140 */
	margin-bottom: 8px;
}

.otn-fg-card__title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.otn-fg-card__title-sub {
	margin-left: 1em;
	font-size: 16px;
	font-weight: 700;
}

.otn-fg-card__body {
	font-size: 18px;
	line-height: 1.8;
}

.otn-fg-card__shops {
	color: var(--c-ink-3);
	font-size: 18px;
	line-height: 1.7;
}

.otn-fg-card__photo {
	width: 100%;
	aspect-ratio: 3 / 2; /* 2026-10-20 F（H24）：27:10 では看板か人のどちらかが切れる */
	object-fit: cover;
	border-radius: var(--r-img);
}

.otn-fg-card__media--kitchen {
	position: relative;
}

.otn-fg-card__illust { /* 2026-10-21 井埜さん：お客さんの入った生成イラスト（1200×800＝3:2）を枠いっぱいに置く。枠の模様は絵の下に隠れる */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--r-img);
}

.otn-g4 {
	display: grid;
	gap: 14px;
	padding: 16px;
	background: var(--c-white);
	border-radius: var(--r-card);
	box-shadow: var(--sh-card);
}

.otn-g4__col {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.otn-g4__photo {
	width: 100%;
	aspect-ratio: 27 / 10;
	object-fit: cover;
	border-radius: var(--r-img);
}

@media (min-width: 768px) {
	.otn-sec--food {
		padding-top: var(--sec-py-pc);
	}

	.otn-fg {
		gap: 24px;
	}

	.otn-tm-card {
		flex-direction: row;
		align-items: center;
		gap: clamp(24px, calc((100vw - 768px) * 0.0238 + 24px), 40px);
		padding: 40px clamp(24px, calc((100vw - 768px) * 0.0357 + 24px), 48px);
	}

	.otn-tm-card__media {
		flex: none;
		width: clamp(200px, 26.67%, 320px);
		height: auto;
		aspect-ratio: 8 / 5;
	}

	.otn-tm-card__text {
		flex: 1;
		gap: 8px;
		min-width: 0;
	}

	.otn-tm-card__en {
		font-size: 14px;
	}

	.otn-tm-card__title {
		font-size: clamp(22px, calc((100vw - 768px) * 0.0149 + 22px), 32px);
	}

	.otn-tm-card__btn {
		width: auto;
		margin-top: 8px;
	}

	.otn-fg__row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.otn-fg-card {
		gap: 14px;
		padding: 24px;
	}

	.otn-fg-card__title {
		font-size: 22px;
	}

	.otn-g4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 72px;
		padding: 24px;
	}
}

/* ---------- トップ：同時開催・アクセス ---------- */
.otn-sec--side {
	padding-top: 0;
}

.otn-tm-card--side .otn-tm-card__text {
	gap: 6px;
}

@media (min-width: 768px) {
	.otn-sec--side {
		padding-top: var(--sec-py-pc);
	}

	.otn-tm-card__photo {
		aspect-ratio: 8 / 5;
	}
}

.otn-sec--access {
	padding-top: 0; /* Figma SP 7:8175：上の余白なし（上の段の下 32 だけ） */
}

@media (max-width: 767px) {
	.otn-sec--access.otn-sec--white {
		background: transparent; /* Figma SP 7:8175 は白の帯なし（地の色）。白のまま上の余白を 0 にすると見出しが帯の端に付くため */
	}

	.otn-sec--access .otn-sec-head {
		margin-bottom: 16px; /* Figma SP 7:8178 スペーサー h16 */
	}
}

.otn-access-row {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.otn-access-row__map {
	height: auto;
	aspect-ratio: 343 / 200; /* Figma SP 7:8179 343×200 */
}

.otn-access-row__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.otn-access-row__venue {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.5;
}

.otn-access-row__addr {
	font-size: 18px;
	line-height: 1.6;
}

.otn-access-row__body {
	font-size: 18px;
	line-height: 1.8;
}

.otn-access-row__btn {
	width: 100%;
	margin-top: 10px;
}

@media (min-width: 768px) {
	.otn-sec--access {
		padding-top: var(--sec-py-pc);
	}

	.otn-access-row {
		flex-direction: row;
		align-items: center;
		gap: 40px;
	}

	.otn-access-row__map {
		flex: none;
		width: min(520px, 45%);
		height: auto;
		aspect-ratio: 26 / 15;
	}

	.otn-access-row__text {
		flex: 1;
		align-items: flex-start;
		gap: 16px;
	}

	.otn-access-row__venue {
		font-size: 24px;
	}

	.otn-access-row__btn {
		width: auto;
		margin-top: 0;
	}
}

/* ---------- フッター ---------- */
.otn-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 28px 16px 24px;
	border-top: 1px solid var(--c-line);
	text-align: center;
}

.otn-footer__logo-img {
	width: 85.8px;
	height: 64px;
}

.otn-footer__contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.otn-footer__head {
	font-size: 16px;
	font-weight: 700;
}

.otn-tel--footer {
	width: 100%;
}

.otn-footer__hours {
	font-size: 14px;
	line-height: 1.8;
}

.otn-footer__org {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.otn-footer__organizer {
	font-size: 14px;
	font-weight: 700;
}

.otn-footer__backers {
	max-width: 1000px;
	color: var(--c-ink-2);
	font-size: 14px;
	line-height: 2;
}

.otn-footer__copy {
	margin-top: -4px; /* Figma SP 7:8226：主催〜コピーライトは 14（フッターの gap 18 から 4 詰める）。PC は下で 0 */
	color: var(--c-ink-3);
	font-size: 14px;
	font-weight: 400;
}

@media (min-width: 768px) {
	.otn-footer {
		gap: 28px;
		padding: 64px var(--sec-px) 40px;
	}

	.otn-footer__logo-img {
		width: 128.7px;
		height: 96px;
	}

	.otn-footer__copy {
		margin-top: 0;
	}

	.otn-footer__contact {
		gap: 12px;
		width: auto;
	}

	.otn-footer__head {
		font-size: 18px;
	}

	.otn-tel--footer {
		width: auto;
	}

	.otn-footer__hours {
		font-size: 16px;
	}

	.otn-footer__hours .otn-line {
		display: inline;
	}

	.otn-footer__hours .otn-line + .otn-line::before {
		content: "／";
	}

	.otn-footer__organizer {
		font-size: 16px;
	}

	.otn-footer__copy {
		font-weight: 600;
	}
}

/* ---------- SP 下の固定バー ---------- */
.otn-ctabar {
	position: sticky;
	bottom: 0;
	z-index: 20;
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	background: var(--c-bar-bg);
	border-top: 1px solid var(--c-line);
}

.otn-ctabar__btn {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	height: 52px;
	border: 2px solid var(--c-green);
	border-radius: var(--r-pill);
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
}

.otn-ctabar__btn--tel {
	background: var(--c-green);
	color: var(--c-white);
}

.otn-ctabar__btn--line {
	background: var(--c-white);
	color: var(--c-green);
}

/* ---------- 出展ブース ---------- */
.otn-sec--map {
	padding-top: 0;
	padding-bottom: 16px;
}

.otn-map-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.otn-sec--map .otn-map-card {
	padding: 0;
	background: transparent;
	box-shadow: none;
}

.otn-ph--map {
	height: auto;
	aspect-ratio: 343 / 220; /* Figma SP 7:11004 343×220 */
}

.otn-map-card__img img {
	width: 100%;
	border-radius: var(--r-img);
}

@media (max-width: 767px) {
	.otn-sec--map .otn-card__heading {
		display: none;
	}
}

@media (min-width: 768px) {
	.otn-sec--map {
		padding-top: 24px;
		padding-bottom: 48px;
	}

	.otn-sec--map .otn-map-card {
		align-items: center;
		gap: 20px;
		padding: 36px 40px;
		background: var(--c-white);
		box-shadow: var(--sh-card);
	}

	.otn-ph--map {
		height: auto;
		aspect-ratio: 1120 / 480; /* Figma PC 7:1488 幅1120（カード内）×480 */
		max-height: 480px;
	}
}

.otn-sec--filter {
	padding-top: 0;
	padding-bottom: 14px;
}

.otn-filter__heading {
	color: var(--c-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.otn-filter__chips {
	display: flex;
	gap: 8px;
	margin: 8px calc(var(--sec-px) * -1) 0;
	padding: 0 var(--sec-px) 4px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.otn-fchip {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 96px;
	padding: 12px 8px;
	background: var(--c-white);
	border: 2px solid;
	border-radius: var(--r-card);
	scroll-snap-align: start;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.otn-fchip--gold {
	border-color: var(--c-gold);
	color: var(--c-gold-ink);
}

.otn-fchip--green {
	border-color: var(--c-green);
	color: var(--c-green);
}

.otn-fchip[data-filter="all"]:not(.is-active) {
	border-color: var(--c-chip-gray);
	color: var(--c-ink-gray);
}

.otn-fchip.is-active {
	background: var(--c-green);
	border-color: var(--c-green);
	color: var(--c-white);
}

.otn-fchip__name {
	font-size: 15px;
}

.otn-fchip__count {
	font-size: 14px;
	font-weight: 400;
}

.otn-filter__result-sp {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
}

.otn-filter__result-title {
	font-size: 16px;
	font-weight: 700;
}

.otn-filter__clear {
	padding: 6px 14px;
	font-size: 14px;
}

@media (min-width: 768px) {
	.otn-sec--filter {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 14px;
		padding-bottom: 40px;
		text-align: center;
	}

	.otn-filter__heading {
		color: var(--c-ink-3);
	}

	.otn-filter__chips {
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.otn-fchip {
		width: 200px;
		padding: 14px 16px;
	}

	.otn-fchip__name {
		font-size: 19px;
	}

	.otn-fchip__count {
		font-size: 15px;
	}

	.otn-filter__result {
		width: 100%;
		margin-top: 20px;
	}

	.otn-filter__result-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding-bottom: 16px;
		border-bottom: 1px solid var(--c-line);
	}

	.otn-filter__result-title {
		font-size: 20px;
	}

	.otn-filter__clear {
		padding: 10px 20px;
		font-size: 16px;
	}

	.otn-filter__result-note {
		margin-top: 12px;
		font-size: 16px;
	}
}

.otn-sec--booths {
	padding-top: 0;
}

.otn-announce {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 32px 16px;
	background: var(--c-white);
	border: 3px dashed var(--c-line);
	border-radius: var(--r-card);
	text-align: center;
}

.otn-announce__title {
	color: var(--c-green);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
}

.otn-announce__body {
	font-size: 18px;
	line-height: 1.8;
}

/* 2026-10-20 E（H17）：出展ページの準備中（option otona_booth_coming_soon=1 の間だけ） */
.otn-announce--coming {
	text-align: center;
}

.otn-announce__en {
	margin: 0 0 8px;
	color: var(--c-green);
	font-family: var(--ff-en);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.otn-announce__btn {
	margin-top: 16px;
}

.otn-booths__heading {
	margin-bottom: 16px;
	color: var(--c-ink-3);
	font-size: 18px;
	font-weight: 700;
}

.otn-booths {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.otn-booth {
	position: relative;
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) 32px;
	align-items: start;
	gap: 12px;
	padding: 12px;
	background: var(--c-white);
	border: 2px solid transparent;
	border-radius: var(--r-card);
	box-shadow: var(--sh-booth);
}

.otn-booth.is-open {
	border-color: var(--c-green);
}

/*
 * 原稿未着（準備中）のカード。2026-09-23 検証員Must対応：
 * カード全体に opacity を掛けると中の文字（小間番号・「準備中」）まで薄まり
 * 4.5:1 を割る。さらに出現演出（.otn-motion .otn-rv-item.is-in の opacity:1）と
 * 詳細度でぶつかり、動きを減らす設定の人にだけ薄く出る不安定な作りだった。
 * → opacity は使わず、面（背景）と影だけを薄くする。文字は各要素の色のまま
 *   （動きの設定に関わらず常に同じ見え方・同じコントラスト）。
 */
.otn-booth.is-preparing {
	grid-template-columns: 96px minmax(0, 1fr);
	background: rgba(255, 255, 255, 0.55);
	box-shadow: none;
}

.otn-booth__media .otn-ph--booth,
.otn-booth__photo {
	width: 96px;
	height: 96px;
	aspect-ratio: auto;
	object-fit: contain; /* 2026-10-20 A（H03）：切らずに全体を出す */
	border-radius: var(--r-img);
}

/* 2026-10-20 A（H03）：写真だけ白地＋縁（placeholder .otn-ph--booth には当てない＝.otn-ph の模様 placeholder-pattern.svg を消さない。技術審査 S1） */
.otn-booth__photo {
	background-color: var(--c-white);
	border: 1px solid var(--c-line);
}

.otn-ph--booth .otn-ph__pill {
	display: none;
}

.otn-booth__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.otn-booth__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.otn-num {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 6px;
	background: var(--c-green);
	border-radius: var(--r-pill);
	color: var(--c-white);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

.otn-booth__company {
	order: -1;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.otn-booth__top {
	order: -2;
}

.otn-booth__company a {
	text-decoration: none;
}

.otn-booth__company a:hover,
.otn-booth__company a:focus-visible {
	color: var(--c-green);
	text-decoration: underline;
}

.otn-booth__catch {
	color: var(--c-ink-2);
	font-size: 18px;
	line-height: 1.6;
}

.otn-booth__desc {
	margin-top: 4px;
	padding-top: 8px;
	border-top: 1px solid var(--c-line);
	color: var(--c-ink-2);
	font-size: 18px;
	line-height: 1.8;
}

.otn-booth__preparing {
	color: var(--c-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
}

.otn-booth__site {
	align-self: flex-start;
	margin-top: 8px;
}

.otn-booth__acc {
	width: 32px;
	height: 32px;
	padding: 0;
	background: var(--c-green-pale);
	border: 0;
	border-radius: 50%;
	color: var(--c-green);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

@media (max-width: 767px) {
	.otn-booth:not(.is-open) .otn-booth__desc,
	.otn-booth:not(.is-open) .otn-booth__site {
		display: none;
	}

	.otn-booths:not(.is-filtering) .otn-booth.is-more:not(.is-shown) {
		display: none;
	}
}

.otn-more {
	display: block;
	width: 100%;
	min-height: 52px;
	margin-top: 14px;
	background: var(--c-white);
	border: 2px solid var(--c-green);
	border-radius: var(--r-pill);
	color: var(--c-green);
	font-size: 17px;
	font-weight: 700;
}

.otn-booths__note {
	margin-top: 12px;
	font-size: 15px;
	text-align: center;
}

@media (min-width: 768px) {
	.otn-announce {
		padding: 48px;
	}

	.otn-announce__title {
		font-size: 24px;
	}

	.otn-booths {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 24px;
	}

	.otn-booth,
	.otn-booth.is-preparing {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 24px;
		border: 0;
	}

	.otn-booth__body {
		display: contents;
	}

	/* M-3（2026-09-23）：SP と同じ順＝〈小間番号・エリアの札〉→社名→写真→キャッチ→紹介文→公式サイト */
	.otn-booth__top {
		order: -2;
		justify-content: space-between;
	}

	.otn-booth__company {
		order: -1;
		font-size: 20px;
	}

	.otn-booth__catch {
		order: 3;
		color: var(--c-ink);
		font-size: 20px;
		font-weight: 700;
	}

	.otn-booth__desc {
		order: 4;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.otn-booth__site {
		order: 6;
		margin: 0;
	}

	.otn-booth__preparing {
		order: 3;
	}

	.otn-booth__media {
		order: 0;
	}

	.otn-booth__media .otn-ph--booth,
	.otn-booth__photo {
		width: 100%;
		height: auto;
		aspect-ratio: 336 / 180; /* Figma PC 7:3184 336×180 */
	}

	.otn-booth.is-preparing .otn-ph--booth {
		height: auto;
		aspect-ratio: 336 / 140; /* Figma PC 準備中カード 336×140 */
	}

	/* 写真枠の「準備中」札は出さない（原稿未着は「詳細は順次公開します」の1か所で示す） */

	.otn-num {
		min-width: 48px;
		height: 48px;
		font-size: 22px;
	}
}

/* ---------- ステージ ---------- */
.otn-sec--stage {
	padding-top: 0;
}

.otn-tabs__note {
	color: var(--c-gold-ink);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

.otn-tabs__list {
	display: flex;
	gap: 8px;
	margin: 8px 0 16px;
}

.otn-tabs__tab {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 2px;
	height: 52px;
	background: var(--c-white);
	border: 2px solid var(--c-green);
	border-radius: var(--r-pill);
	color: var(--c-green);
	font-size: 18px;
	font-weight: 700;
}

.otn-tabs__tab[aria-selected="true"] {
	background: var(--c-green);
	color: var(--c-white);
}

@media (max-width: 767px) {
	.otn-day[data-inactive] {
		display: none;
	}

	.otn-day .otn-date-bar {
		display: none;
	}
}

.otn-day {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.otn-date-bar {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding-bottom: 8px;
	border-bottom: 3px solid var(--c-green);
	line-height: 1.2;
}

.otn-date-bar__num {
	color: var(--c-green);
	font-size: 28px;
	font-weight: 700;
}

.otn-date-bar__dow {
	font-size: 18px;
	font-weight: 700;
}

.otn-guest-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: var(--c-white);
	border: 3px solid var(--c-gold);
	border-radius: var(--r-card);
	box-shadow: var(--sh-card);
}

.otn-guest-card__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 311 / 280; /* Figma SP 7:7819 311×280 */
	object-fit: cover;
	object-position: center 25%;
	border-radius: var(--r-img);
}

.otn-guest-card__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.otn-guest-card__pill {
	padding: 4px 16px;
	font-size: 14px;
}

.otn-guest-card__name {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
}

.otn-guest-card__act {
	color: var(--c-green);
	font-family: var(--ff-en), var(--ff-jp);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.otn-programs {
	display: grid;
	gap: 14px;
}

.otn-program {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	background: var(--c-white);
	border-radius: var(--r-card);
	box-shadow: var(--sh-card);
}

.otn-program__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 311 / 150; /* Figma SP 7:7823 311×150 */
	object-fit: cover;
	object-position: center 30%;
	border-radius: var(--r-img);
}

.otn-program__name {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.5;
}

.otn-program__act {
	color: var(--c-green);
	font-family: var(--ff-en), var(--ff-jp);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
}

.otn-program__intro {
	color: var(--c-ink-2);
	font-size: 18px;
	line-height: 1.8;
}

@media (min-width: 768px) {
	.otn-sec--stage {
		display: flex;
		flex-direction: column;
		gap: 56px;
		padding-top: 24px;
		padding-bottom: 32px;
	}

	.otn-day {
		gap: 28px;
	}

	.otn-date-bar {
		gap: 20px;
		padding-bottom: 12px;
	}

	.otn-date-bar__num {
		font-size: 44px;
	}

	.otn-date-bar__dow {
		font-size: 24px;
	}

	.otn-guest-card {
		flex-direction: row;
		align-items: center;
		gap: 40px;
		padding: 32px 40px;
	}

	.otn-guest-card__photo {
		flex: none;
		width: clamp(180px, 22vw, 260px);
		height: auto;
		aspect-ratio: 4 / 5;
	}

	.otn-guest-card__info {
		gap: 12px;
	}

	.otn-guest-card__pill {
		padding: 6px 20px;
		font-size: 16px;
	}

	.otn-guest-card__name {
		font-size: 36px;
	}

	.otn-guest-card__act {
		font-size: 22px;
	}

	.otn-programs--3 {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 20px;
	}

	.otn-programs--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.otn-program {
		gap: 12px;
		padding: 24px;
	}

	.otn-program__photo {
		aspect-ratio: 339 / 160; /* Figma PC 148:13841 338.667×160（3列）。1100px 以下は 2 列でも同じ比率 */
	}

	.otn-program__name {
		font-size: 22px;
	}

	.otn-program__act {
		font-family: var(--ff-jp);
		font-size: 18px;
	}
}

.otn-sec--garapon {
	padding-top: 0;
}

.otn-garapon {
	padding: 16px;
	background: var(--c-white);
	border: 3px solid var(--c-gold);
	border-radius: var(--r-card);
	text-align: center;
}

.otn-garapon__title {
	color: var(--c-gold-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.otn-garapon__body {
	font-size: 18px;
	line-height: 1.9;
}

@media (min-width: 768px) {
	.otn-sec--garapon {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.otn-garapon {
		display: flex;
		align-items: center;
		gap: clamp(32px, 5vw, 72px);
		min-height: 242px;
		padding: 32px clamp(24px, 5.9vw, 85px);
		border-color: var(--c-green);
		text-align: left;
	}

	.otn-garapon__media {
		flex: none;
		width: 185px;
	}

	.otn-garapon__img {
		width: 185px;
		height: 100px;
		object-fit: contain;
	}

	.otn-garapon__info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.otn-garapon__pill {
		padding: 6px 20px;
	}

	.otn-garapon__title {
		color: var(--c-green);
		font-size: 30px;
	}
}

.otn-sec--notes {
	padding-top: 0;
	text-align: center;
}

.otn-notes {
	color: var(--c-ink-3);
	font-size: 14px;
	line-height: 2;
}

@media (min-width: 768px) {
	.otn-notes {
		font-size: 15px;
	}
}

/* ---------- セミナー ---------- */
.otn-sec--seminars {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 0;
	padding-bottom: 24px;
}

.otn-date-bar--seminar {
	padding: 0;
	border: 0;
}

.otn-date-bar--seminar .otn-date-bar__num {
	font-size: 20px;
}

.otn-date-bar--seminar .otn-date-bar__dow {
	color: var(--c-green);
	font-family: var(--ff-en);
	font-size: 14px;
}

.otn-seminars {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.otn-seminar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 16px;
	background: var(--c-white);
	border-left: 6px solid var(--c-green);
	border-radius: var(--r-card);
}

.otn-seminars--day1114 .otn-seminar {
	border-left-color: var(--c-gold);
}

.otn-seminar__head {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.otn-seminar__no-sp {
	color: var(--c-green);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

.otn-seminar__time-sp {
	color: var(--c-gold-ink);
	font-size: 18px;
	font-weight: 700;
}

.otn-seminar__title {
	display: flex;
	flex-direction: column;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.6;
}

.otn-seminar__series,
.otn-seminar__sub {
	font-size: inherit;
}

.otn-lecturer {
	color: var(--c-ink-2);
	font-size: 18px;
	line-height: 1.6;
}

.otn-lecturer--sp {
	color: var(--c-ink);
	font-size: 18px;
	line-height: 1.8;
}

.otn-lecturer__cont {
	padding-left: 3em;
}

.otn-lecturer__name {
	display: inline-block;
	white-space: nowrap;
}

.otn-seminar__photo {
	width: 100%;
	height: auto;
	max-width: 336px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--r-img);
}
/* 2026-10-20 F（H22）：写真の代わりの文字枠（第4回 楽天モバイル）。写真と同じ箱（.otn-seminar__photo の max-width 336・4:3・角丸）に白地と細い縁 */
.otn-seminar__photo--text {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	color: var(--c-green);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

/* 2026-10-22 今井様 14:41：ロゴの回（第4回 楽天モバイル）。写真と同じ箱で、cover で切らずに白地の中に収める。縁は文字枠と同じ */
.otn-seminar__photo--logo {
	object-fit: contain;
	object-position: center;
	background: var(--c-white);
	border: 1px solid var(--c-line);
}

.otn-seminar__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	padding-top: 12px;
	border-top: 1px solid var(--c-line);
	font-size: 18px;
	line-height: 1.6;
}

.otn-seminar__intro {
	font-size: 18px;
	line-height: 1.8;
}

@media (min-width: 768px) {
	.otn-sec--seminars {
		gap: 28px;
		padding-top: 24px;
		padding-bottom: 56px;
	}

	.otn-date-bar--seminar {
		padding-bottom: 12px;
		border-bottom: 3px solid var(--c-green);
	}

	.otn-date-bar--seminar .otn-date-bar__num {
		font-size: 44px;
	}

	.otn-date-bar--seminar .otn-date-bar__dow {
		color: var(--c-ink);
		font-family: var(--ff-jp);
		font-size: 24px;
	}

	.otn-seminars {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 24px;
		padding-bottom: 28px;
	}

	.otn-seminar,
	.otn-seminars--day1114 .otn-seminar {
		gap: 12px;
		padding: 24px;
		border-left: 0;
		box-shadow: var(--sh-card);
	}

	.otn-seminar__head {
		flex-direction: row;
	}

	.otn-seminar__series {
		font-size: 18px;
	}

	.otn-seminar__main {
		font-size: 21px;
	}

	.otn-seminar__sub {
		font-size: 18px;
	}
}

.otn-sec--apply {
	padding-top: 0;
}

.otn-apply {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 18px 16px;
	background: var(--c-white);
	border: 3px solid var(--c-gold);
	border-radius: var(--r-card);
	text-align: center;
}

.otn-apply__heading {
	color: var(--c-gold-ink);
	font-size: 18px;
	font-weight: 700;
}

.otn-apply__body {
	font-size: 18px;
	line-height: 1.8;
}

.otn-tel--apply {
	width: 100%;
	min-height: 56px;
	font-size: 19px;
}

@media (min-width: 768px) {
	.otn-apply {
		gap: 14px;
		padding: 48px 28px;
	}

	.otn-apply__heading {
		font-size: 22px;
	}

	.otn-tel--apply {
		width: auto;
		min-height: 60px;
		font-size: 22px;
	}
}

/* ---------- 同時開催 ---------- */
.otn-hero__ja--tm {
	font-size: 26px;
}

@media (min-width: 768px) {
	.otn-hero__ja--tm {
		font-size: 22px;
	}
}

.otn-sec--tm {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding-top: 8px;
}

.otn-tm__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 343 / 220; /* Figma SP 7:8792 343×220 */
	object-fit: cover;
	border-radius: var(--r-img);
}

.otn-tm__cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
}

.otn-tm__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.otn-tm__heading {
	color: var(--c-green);
	font-size: 18px;
	font-weight: 700;
}

.otn-tm__text {
	font-size: 18px;
	line-height: 1.9;
}

.otn-tm__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.otn-pill--tag {
	padding: 6px 14px;
	font-size: 14px;
}

.otn-dl {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.otn-dl > div {
	display: flex;
	gap: 24px;
	font-size: 18px;
}

.otn-dl dt {
	flex: none;
	color: var(--c-green);
	font-weight: 700;
}

.otn-tm__note {
	text-align: center;
}

@media (min-width: 768px) {
	.otn-sec--tm {
		gap: 24px;
		padding-top: 24px;
		padding-bottom: 56px;
	}

	.otn-tm__photo {
		height: auto;
		aspect-ratio: 20 / 7;
	}

	.otn-tm__cards {
		flex-direction: row;
		gap: 24px;
	}

	.otn-tm__card {
		flex: 1;
		gap: 16px;
		padding: 32px 36px;
	}

	.otn-tm__heading {
		font-size: 26px;
	}
}

/* ---------- アクセス ---------- */
.otn-sec--floormap {
	padding-top: 24px;
	padding-bottom: 48px;
}

.otn-floormap {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* 2026-09-23 本体指摘：会場マップは2枠に割らず1枚を段の幅いっぱいに（PC・SP 共通） */
.otn-floormap__main {
	width: 100%;
	height: auto;
	border-radius: var(--r-img);
}

.otn-floormap__note {
	font-size: 14px;
}

@media (min-width: 768px) {
	.otn-floormap {
		gap: 20px;
		padding: 40px 36px;
	}

	.otn-floormap__note {
		font-size: 16px;
	}
}

.otn-sec--accessmap {
	padding-top: 0;
	padding-bottom: 24px;
}

.otn-sec--accessmap .otn-accessmap {
	padding: 0;
	background: transparent;
	box-shadow: none;
}

.otn-accessmap__grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.otn-accessmap__col {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.otn-accessmap__label {
	color: var(--c-green);
	font-size: 18px;
	font-weight: 700;
}

.otn-accessmap__media {
	width: 100%;
	height: auto;
	aspect-ratio: 343 / 240; /* Figma SP 7:3700 343×240 */
	border: 0;
	border-radius: var(--r-img);
}

.otn-accessmap__venue {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.otn-accessmap__name {
	font-size: 22px;
	font-weight: 700;
}

.otn-accessmap__addr {
	font-size: 18px;
}

@media (min-width: 768px) {
	.otn-sec--accessmap {
		padding-bottom: 48px;
	}

	.otn-sec--accessmap .otn-accessmap {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 40px 36px;
		background: var(--c-white);
		box-shadow: var(--sh-card);
	}

	.otn-accessmap__grid {
		flex-direction: row;
		gap: 20px;
		margin-top: 16px;
	}

	.otn-accessmap__col {
		flex: 1;
		gap: 10px;
		min-width: 0;
	}

	.otn-accessmap__label {
		font-size: 18px;
	}

	.otn-accessmap__media {
		height: auto;
		aspect-ratio: 55 / 40;
	}
}

.otn-sec--cartrain {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 0;
	padding-bottom: 24px;
}

.otn-way {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.otn-way__heading {
	color: var(--c-green);
	font-size: 18px;
	font-weight: 700;
}

.otn-way__text {
	font-size: 18px;
	line-height: 1.9;
}

.otn-way__strong {
	color: var(--c-gold-ink);
	font-weight: 700;
}

.otn-way__text a {
	color: var(--c-green);
	font-weight: 700;
}

@media (min-width: 768px) {
	.otn-sec--cartrain {
		flex-direction: row;
		gap: 24px;
		padding-bottom: 56px;
	}

	.otn-way {
		flex: 1;
		gap: 16px;
		padding: 36px 32px;
	}

	.otn-way__heading {
		font-size: 26px;
	}
}

.otn-sec--contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-top: 0;
}

.otn-contact__heading {
	font-size: 18px;
	font-weight: 700;
}

.otn-contact__note {
	font-size: 16px;
}

.otn-contact__note + .otn-tel {
	margin-top: 8px;
}

/* ---------- お知らせ ---------- */
.otn-sec--newslist {
	padding-top: 0;
}

.otn-newslist {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.otn-newslist__item {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 16px;
	background: var(--c-white);
	border-radius: var(--r-card);
	box-shadow: var(--sh-card);
}

.otn-newslist__date {
	color: var(--c-date);
	font-size: 15px;
	font-weight: 600;
}

.otn-newslist__link {
	color: var(--c-green);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
}

.otn-newslist__excerpt {
	font-size: 18px;
	line-height: 1.7;
}

.otn-pagination {
	margin-top: 24px;
}

.otn-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.otn-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding: 0 16px;
	background: var(--c-white);
	border: 2px solid var(--c-green);
	border-radius: var(--r-pill);
	color: var(--c-green);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.otn-pagination .page-numbers.current {
	background: var(--c-green);
	color: var(--c-white);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 768px) {
	.otn-sec--newslist {
		padding: 16px max(var(--sec-px), calc((100% - var(--w-news-list)) / 2)) 72px;
	}

	.otn-newslist {
		gap: 0;
		padding: 16px 40px;
		background: var(--c-white);
		border-radius: var(--r-card);
		box-shadow: var(--sh-card);
	}

	.otn-newslist__item {
		flex-direction: row;
		align-items: baseline;
		gap: 32px;
		padding: 22px 4px;
		background: transparent;
		border-bottom: 1px solid var(--c-line);
		border-radius: 0;
		box-shadow: none;
	}

	.otn-newslist__item:last-child {
		border-bottom: 0;
	}

	.otn-newslist__date {
		flex: none;
		font-size: 16px;
	}

	.otn-newslist__link {
		color: var(--c-ink);
		font-size: 19px;
		font-weight: 400;
	}
}

/* ---------- 記事（お知らせ詳細・出展者詳細） ---------- */
.otn-sec--article {
	padding-top: 0;
}

.otn-article {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 16px;
	background: var(--c-white);
	border-radius: var(--r-card);
	box-shadow: var(--sh-card);
}

.otn-article__date {
	color: var(--c-date);
	font-size: 15px;
	font-weight: 600;
}

.otn-article__title {
	color: var(--c-green);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.6;
}

.otn-article__content {
	margin-top: 12px;
	font-size: 18px;
	line-height: 2;
}

.otn-article__content > * + * {
	margin-top: 16px;
}

.otn-article__content h2,
.otn-article__content h3,
.otn-article__content h4 {
	margin-top: 28px;
	color: var(--c-ink);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
}

.otn-article__content ul,
.otn-article__content ol {
	padding-left: 1.5em;
	list-style: disc;
}

.otn-article__content ol {
	list-style: decimal;
}

.otn-article__content img {
	width: 100%;
	height: auto;
	border-radius: var(--r-img);
}

.otn-article__content a {
	color: var(--c-green);
}

.otn-article__top {
	margin-bottom: 8px;
}

.otn-article__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain; /* 2026-10-20 A（H03） */
	border-radius: var(--r-img);
}

/* 2026-10-20 A追補：白地と縁は写真（img）だけ。準備中の枠（div.otn-ph）は紙色の地と模様のまま */
img.otn-article__photo {
	background-color: var(--c-white);
	border: 1px solid var(--c-line);
}

.otn-article__catch {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
}

.otn-article__desc {
	font-size: 18px;
	line-height: 2;
}

.otn-article__site {
	align-self: flex-start;
	margin-top: 8px;
}

.otn-article__links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--c-line);
}

.otn-article__link--top {
	background: var(--c-green);
	color: var(--c-white);
}

.otn-article--404 {
	align-items: center;
}

@media (min-width: 768px) {
	.otn-sec--article {
		padding: 16px max(var(--sec-px), calc((100% - var(--w-article)) / 2)) 72px;
	}

	.otn-article {
		padding: 48px clamp(24px, calc((100vw - 768px) * 0.0476 + 24px), 56px);
	}

	.otn-article__date {
		font-size: 17px;
	}

	.otn-article__title {
		font-size: 30px;
	}

	.otn-article__content {
		margin-top: 20px;
	}

	.otn-article__content h2,
	.otn-article__content h3,
	.otn-article__content h4 {
		font-size: 22px;
	}

	.otn-article__links {
		flex-direction: row;
		justify-content: space-between;
		margin-top: 36px;
	}

	.otn-article__links .otn-btn {
		min-height: 0;
		padding: 0;
		background: transparent;
		border: 0;
		color: var(--c-green);
		font-size: 18px;
	}

	.otn-article__links .otn-btn:hover,
	.otn-article__links .otn-btn:focus-visible {
		text-decoration: underline;
	}
}

/* SP では本文の下にバーの高さぶんの余白 */
@media (max-width: 767px) {
	.otn-footer {
		padding-bottom: 24px;
	}
}

/* ==========================================================================
   動き（2026-09-23 井埜さん指示）。JS は assets/js/motion.js（出現の合図だけ）。
   html.otn-motion は head の1行で付く。付かない（JS 無効・動きを減らす設定）時は
   隠さない＝最初から全部見える。
   ========================================================================== */

/* 1・2｜段とヒーローの出現（1回だけ） */
.otn-motion .otn-rv,
.otn-motion .otn-rv-item {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
	transition-delay: var(--rv-d, 0s);
}

/* motion.js が読めなかった時の保険：3秒たっても準備完了の印が無ければ全部見せる */
.otn-motion:not(.otn-motion-ready) .otn-rv,
.otn-motion:not(.otn-motion-ready) .otn-rv-item {
	animation: otn-rv-safety 0s linear 3s forwards;
}

.otn-motion .otn-rv.is-in,
.otn-motion .otn-rv.is-in .otn-rv-item,
.otn-motion .otn-rv-item.is-in {
	opacity: 1;
	transform: none;
}

@keyframes otn-rv-safety {
	to {
		opacity: 1;
		transform: none;
	}
}

/* 3｜きらめき✦（4秒で往復・1秒未満の点滅はしない。同時に動くのは motion.js が5個までに絞る） */
.otn-sparkle.is-twinkle {
	animation: otn-twinkle 4s ease-in-out infinite alternate;
}

@keyframes otn-twinkle {
	from {
		opacity: 0.6;
	}

	to {
		opacity: 1;
	}
}

/* 4｜背景の欧文（ウォーターマーク）：文字の流れの向きに60秒で1往復・一定の速さ。色は低いまま */
.otn-deco__l {
	animation: otn-deco-l 30s linear infinite alternate;
}

.otn-deco__r {
	animation: otn-deco-r 30s linear infinite alternate;
}

@keyframes otn-deco-l {
	from {
		transform: rotate(-90deg) translateX(-100%);
	}

	to {
		transform: rotate(-90deg) translateX(calc(-100% + 120px));
	}
}

@keyframes otn-deco-r {
	from {
		transform: rotate(90deg) translateX(100%);
	}

	to {
		transform: rotate(90deg) translateX(calc(100% - 120px));
	}
}

/* 5｜ボタン：地を10%暗く・0.2秒。フォーカスの枠は消さない */
.otn-btn,
.otn-tel,
.otn-quick__link {
	transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

.otn-btn.otn-article__link--top:hover,
.otn-btn.otn-article__link--top:focus-visible {
	background: #006d35;
	color: var(--c-white);
}

.otn-menu-card__arrow {
	transition: transform 0.2s ease-out;
}

.otn-menu-card:hover .otn-menu-card__arrow,
.otn-menu-card:focus-visible .otn-menu-card__arrow {
	transform: translateX(4px);
}

/* 6｜押せるカード：影を一段強く＋2px 上へ・0.2秒 */
.otn-menu-card,
.otn-map-card__img {
	transition: box-shadow 0.2s ease-out, transform 0.2s ease-out;
}

.otn-menu-card:hover,
.otn-menu-card:focus-visible,
.otn-map-card__img:hover,
.otn-map-card__img:focus-visible {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

/* 7｜動きを減らす設定：全部止める（出現は最初から表示・✦は静止・流れは停止） */
@media (prefers-reduced-motion: reduce) {
	.otn-motion .otn-rv,
	.otn-motion .otn-rv-item {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}

	.otn-sparkle.is-twinkle,
	.otn-deco__l,
	.otn-deco__r {
		animation: none;
	}

	.otn-menu-card:hover,
	.otn-menu-card:focus-visible,
	.otn-map-card__img:hover,
	.otn-map-card__img:focus-visible,
	.otn-menu-card:hover .otn-menu-card__arrow,
	.otn-menu-card:focus-visible .otn-menu-card__arrow {
		transform: none;
	}
}

/* ---------- 2026-09-23 第三者審査 Must 第1群 ---------- */
/* M-1：件数の食い違いの説明（全87ブースと掲載件数の差） */
.otn-filter__count-note {
	margin-top: 12px;
}

/* M-2：タイアップは絞り込みでなく、トップの参加企業一覧への案内 */
.otn-filter__tieup {
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.8;
}

.otn-filter__tieup-label {
	color: var(--c-ink-2);
	font-weight: 700;
}

.otn-filter__tieup-link {
	display: inline-block;
	min-height: 44px;
	padding: 8px 0;
	margin-right: 1em;
	color: var(--c-green);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.otn-filter__tieup-link::after {
	content: " →";
}

/* 2026-10-20 C（H10）：タイアップへの導線をボタンに（文字＋右端の矢印・SP 1 列・PC 2 列）。デザイン審査 M1 の実測＝PC1440 371×56×4 本・SP390 358×52×3 本・全部 1 行 */
.otn-filter__tieup-note {
	margin: 0 0 8px;
}

.otn-filter__tieup-list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.otn-filter__tieup-btn {
	width: 100%;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 20px;
	font-size: 15px;
	text-align: left;
}

.otn-filter__tieup-arrow {
	flex: 0 0 auto;
}

@media (min-width: 768px) {
	.otn-filter__tieup-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.otn-filter__tieup-btn {
		font-size: 16px;
	}
}

#tieup-jutaku,
#tieup-deli-j,
#tieup-food { /* 2026-10-20 C（H10） */
	scroll-margin-top: 16px;
}

/* M-6：駐車場の詳細が未定であることを正直に示す1行 */
.otn-way__pending {
	margin-top: 8px;
	color: var(--c-ink-2);
}

@media (min-width: 768px) {
	.otn-filter__tieup {
		font-size: 16px;
	}
}

/* ---------- 2026-09-23 井埜さん指摘：画像比率と SP の高さ（Figma 実測値に整合） ---------- */
@media (max-width: 767px) {
	/* 09_SP_TOP highlights（7:7261）padding-top 24 */
	.otn-sec--highlights {
		padding-top: 24px;
	}
}

@media (min-width: 1101px) {
	/* Figma PC 148:13860 542×160（2列）。1101px 以上＝Figma PC と同じ段組みの時だけ */
	.otn-programs--2 .otn-program__photo {
		aspect-ratio: 542 / 160;
	}
}

/* 固有名詞を語の途中で改行させない（井埜さん指摘 2026-09-23「JAファーマーズ高崎棟／高」）。
   包むのは inc/data.php の otona_nowrap_terms() の語だけ。長い名前は意味の切れ目で分けて包むので、SP 390 でもはみ出さない。 */
.otn-nowrap {
	white-space: nowrap;
}

/* ---------- 2026-09-23 先方 8/5 打ち合わせ：地図（略図 SVG）の組み込み ----------
   新しい部品は作らない。地図は既存の .otn-map-card__img（押せる図・拡大表示）に入れ、
   SVG の原寸比率を保つための指定だけを足す（Figma の仮枠の比率は使わない）。 */
.otn-picture {
	display: block;
}

.otn-mapfig {
	display: block;
	border-radius: var(--r-img);
}

/* 2026-10-23 S1：比率は img の width／height 属性に任せる（aspect-ratio: auto を当てると比率が消え、遅延読み込みの間 高さ 0 になり CLS が出た） */
.otn-mapfig__img {
	width: 100%;
	height: auto;
	border-radius: var(--r-img);
}

/* アクセス頁：略図は横幅いっぱい（文字を読める大きさ）、Googleマップはその下に並べる */
.otn-accessmap__grid--stack .otn-accessmap__iframe {
	aspect-ratio: 4 / 3;
}

.otn-sec--accessmap .otn-way__heading {
	margin-bottom: 8px;
}

.otn-map-card__pending {
	color: var(--c-ink-2);
}

/* トップのアクセス段：略図は小さく（押すとアクセスへ） */
.otn-access-row__map--sketch {
	aspect-ratio: auto;
	width: min(100%, 300px);
	margin-inline: auto;
}

@media (min-width: 768px) {
	.otn-accessmap__grid--stack {
		flex-direction: column;
		gap: 32px;
	}

	.otn-accessmap__grid--stack .otn-accessmap__iframe {
		aspect-ratio: 16 / 7;
	}

	.otn-access-row__map--sketch {
		width: min(480px, 42%);
		margin-inline: 0;
	}
}

/* ---------- 2026-09-23 本体指示：SP 会場マップを屋内／屋外の 2 枚に（/access/・/booth/） ----------
   新しい見た目は足さない。図は既存の .otn-mapfig、見出しは本文と同じ太字の小見出しだけ。 */
.otn-mapsplit__item {
	margin: 0;
}

.otn-mapsplit__item + .otn-mapsplit__item {
	margin-top: 24px;
}

.otn-mapsplit__label {
	margin: 0 0 8px;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.5;
}

/* ---------- 2026-09-25 前村さん配置（Figma 295:14775／299:21112）：トップの集合絵と「会場のたのしみ方」のイラスト ----------
   新しい部品は 2 つだけ＝.otn-top-hero__art（<picture>・.otn-top-hero__main の 3 番目の子）と .otn-menu-card__img（カードの絵）。
   PC は .otn-top-hero__main を格子（1 行目＝ロゴ｜文字、2 行目＝ロゴ｜絵）にして、絵をロゴの右・キャッチの下（旧 hero_illust の位置）に置く。
   SP は縦積みのまま、キャッチの下に絵（ロゴ→絵→日時＝のぼりの順）。
   文字の規則・.otn-ph の基底・.otn-pc-only・.otn-picture・motion.js は触らない。説明はこのように規則の前の行にだけ書く。 */
.otn-top-hero__art {
	width: min(100%, 332px);
	margin: 16px auto 0;
}

.otn-top-hero__art-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 664 / 686;
}

.otn-menu-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1176 / 440;
	object-fit: contain;
	background: var(--c-paper);
}

@media (min-width: 768px) {
	.otn-top-hero__main {
		display: grid;
		grid-template-columns: calc(420 * var(--u)) minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: calc(88 * var(--u));
		row-gap: calc(16 * var(--u));
	}

	.otn-top-hero__logo {
		grid-row: 1 / 3;
		grid-column: 1;
	}

	.otn-top-hero__text {
		grid-row: 1;
		grid-column: 2;
	}

	.otn-top-hero__art {
		grid-row: 2;
		grid-column: 2;
		width: 100%;
		margin: 0;
	}

	.otn-top-hero__art-img {
		aspect-ratio: 2500 / 1239;
	}
}

/* A: 2026-10-14 先方修正（富永様 10/14 メール）#1・#2・#5・#14・#16 と PDF 印刷。基底の規則（.otn-tm-card__media・.otn-tm-card__title・.otn-access-row__body・.otn-apply__heading・.otn-motion .otn-rv）は触らず、後ろで上書きする。説明は規則の前の行にだけ書く。 */
/* A #2: タイアップのカードにロゴ（写真でなく図）を入れるので、切り抜かず枠内に収め、白地と細い線を付ける */
.otn-tm-card__media--logo {
	object-fit: contain;
	padding: 12px;
	background: var(--c-white);
	border: 1px solid var(--c-line);
}

/* A #1: 題名 2 行のうち 1 行目（タイアップの冠）は本文と同じ 16px・濃い灰色にして、2 行目の催し名を主にする */
.otn-tm-card__title .otn-line:first-child {
	color: var(--c-ink-3);
	font-size: 16px;
}

/* A #5: トップのアクセス段＝チラシの 3 段（駅から徒歩＝太字／駐車場の注＝注の大きさ／電車の特典＝金の帯＋注）。金の帯の文は 2 つの .otn-line（PC は inline-flex の並びで 1 行・SP は下の max-width 767px で帯を block にして 2 行） */
.otn-access-row__body {
	font-weight: 700;
}

.otn-access-row__gift {
	margin-top: 8px;
}

.otn-access-row__pill {
	line-height: 1.5;
	text-align: center;
	white-space: normal;
}

.otn-access-row__gift .otn-access-row__note {
	display: block;
	margin-top: 4px;
}

/* A #5 SP: 金の帯を block にする（inline-flex のままだと 2 つの .otn-line が横に並んで「方／には」「プレゼン／ト!!」と語の途中で折れる＝2026-10-15 設計 A7 の実測）。.otn-line は基底 91 行で block なので 2 行になる */
@media (max-width: 767px) {
	.otn-access-row__pill {
		display: block;
	}
}

/* 2026-10-20 D（H15）：/access/ 電車の特典の本文。見出しは SP 2 行（.otn-line＝block）・PC 1 行。券の写真は SP 幅いっぱい・PC 最大 360px */
.otn-way__note--gift {
	color: var(--c-green);
	font-weight: 700;
}

.otn-way__gift {
	margin-top: 8px;
	padding: 12px 16px;
	background: var(--c-green-pale);
	border-radius: var(--r-img);
}

.otn-way__gift-title {
	margin: 0 0 4px;
	font-weight: 700;
}

.otn-way__gift-line {
	margin: 0;
	font-size: 15px;
}

.otn-way__gift-note {
	margin: 4px 0 0;
}

.otn-way__gift-photo {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 12px;
	border: 1px solid var(--c-line);
	border-radius: var(--r-img);
}

@media (min-width: 768px) {
	.otn-way__gift-title .otn-line {
		display: inline;
	}

	.otn-way__gift-title .otn-line + .otn-line::before {
		content: " ";
	}

	.otn-way__gift-photo {
		max-width: 360px;
	}
}

/* A #14: セミナーの金枠の中を見出し 1 本にして大きめに（元 18px／PC 22px）。SP は 3 行（.otn-line＝block・語の切れ目で）・PC は 1 行 */
.otn-apply__heading {
	font-size: 22px;
	line-height: 1.5;
}

/* A #16: TREE MARKET の Instagram の二次元コードと開くボタンを縦に並べて中央に（URL か二次元コードが入るまで段ごと出ない） */
.otn-tm__insta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}

.otn-tm__qr {
	display: block;
	width: 160px;
	height: auto;
	aspect-ratio: 1 / 1;
}

/* A 印刷: 出現演出（opacity 0）の段が、画面に入る前に PDF にすると白く写る（運用審査 Must5・先方 PDF の空白の原因）。印刷では全部見せる */
@media print {
	.otn-motion .otn-rv,
	.otn-motion .otn-rv-item {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}
}

@media (min-width: 768px) {
	.otn-apply__heading {
		font-size: 28px;
	}

	.otn-apply__heading .otn-line {
		display: inline;
	}

	.otn-tm__qr {
		width: 200px;
	}
}

/* ===== B: 出展ブース 2026-10-14（設計係B v3.2）：番号・屋外の札・タイアップの札・ロゴ枠・Coming Soon・続きを読む・抽選会。SP の札の字 13px（M8）・PC のタイアップ札は写真の上（M9）・公式サイトを底に（M4'）・1 等は文字の箱（M7）・印刷は全文（M10）。既存の規則は 1 行も変えず後ろで上書きする。説明は規則の前の行にだけ書く ===== */
/* B 件6: 「54-56」が 2 行に折れない */
.otn-num {
	white-space: nowrap;
}

/* B 件6: 屋外の札（白地・濃い灰の線と字） */
.otn-pill--outdoor {
	background: var(--c-white);
	border-color: var(--c-ink-3);
	color: var(--c-ink-2);
}

/* B 件9: 住宅協会タイアップの札（緑の線＝.otn-pill--green-line と同じ見た目・数える為の別名） */
.otn-pill--tieup {
	background: var(--c-white);
	border-color: var(--c-green);
	color: var(--c-green);
}

/* B 件7: 写真が無くロゴだけの出展社（6・7・51）は切らずに白地・余白で収める。SP 8px／PC 20px */
.otn-booth__photo--logo,
.otn-article__photo--logo {
	padding: 8px;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	object-fit: contain;
}

/* B 件8: Coming Soon（英字 Roboto Serif・緑）＋説明 1 行（灰・細字） */
.otn-booth__soon {
	display: block;
	color: var(--c-green);
	font-family: var(--ff-en);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.02em;
}

.otn-booth__preparing .otn-line {
	color: var(--c-ink-3);
	font-size: 15px;
	font-weight: 400;
}

/* B 件11: 抽選会（/booth/#lottery）。1 等は写真を置かず金の淡い箱に名前を大きく（M7）、2 等は白地に収める、特別賞は切り抜き。scroll-margin-top は /stage/ のボタンから飛んだ時に見出しが上端に付かないため（S2） */
.otn-sec--lottery {
	padding-top: 24px;
	scroll-margin-top: 16px;
}

.otn-lottery__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 8px;
}

.otn-lottery__lead,
.otn-lottery__name,
.otn-lottery__text {
	color: var(--c-ink-2);
	font-size: 16px;
	line-height: 1.7;
}

.otn-lottery__rank {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--c-line);
}

.otn-lottery__rank-name {
	margin-bottom: 8px;
	line-height: 1;
}

.otn-lottery__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.otn-lottery__item--first {
	grid-column: 1 / -1;
}

.otn-lottery__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-img);
	object-fit: cover;
}

.otn-lottery__img--contain {
	padding: 8px;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	object-fit: contain;
}

/* 2026-10-20 K：楽楽の湯の写真は縦長（750×1000）で 4:3 の枠に入れると上下が 44% 切れ、看板の「楽楽の湯」が上で切れる。この 1 枚だけ上寄せにして看板を全部入れる（富永様「提供写真が縦も横も切れないように」） */
.otn-lottery__img[src*="lottery-s-rakuraku"] {
	object-position: center top;
}

/* M7: 1 等＝金の淡い箱（写真なし）。写真が届いたら photo を入れる＝箱の中で写真→名前の順 */
.otn-lottery__rank--first {
	padding: 16px;
	background: var(--c-gold-pale);
	border-top: 0;
	border-radius: var(--r-img);
}

.otn-lottery__rank--first .otn-lottery__rank-name {
	margin-bottom: 4px;
}

.otn-lottery__item--first .otn-lottery__name {
	color: var(--c-gold-ink);
	font-size: 24px;
	font-weight: 700;
}

.otn-lottery__name {
	margin-top: 4px;
}

.otn-lottery__note {
	margin-top: 12px;
}

.otn-garapon--link .otn-garapon__btn {
	margin-top: 8px;
}

/* M8: SP の本文の列は 178px。番号 32＋8＋札（14px×8 字＋32＋4＝148）＝188 で折れる → 13px・左右 12px で 132（32＋8＋132＝172 ≤ 178） */
@media (max-width: 767px) {
	.otn-booth__top .otn-pill--badge {
		padding: 4px 12px;
		font-size: 13px;
	}
}

@media (min-width: 768px) {
	.otn-booth__photo--logo,
	.otn-article__photo--logo {
		padding: 20px;
	}

	.otn-booth__soon {
		font-size: 20px;
	}

	/* B（デザイン審査 M4）: PC は紹介文を 5 行で止め「続きを読む」で開く。字数超過 17 社でも行の高さがそろう */
	.otn-booth__desc {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
		overflow: hidden;
	}

	.otn-booth.is-expanded .otn-booth__desc {
		display: block;
		-webkit-line-clamp: none;
		overflow: visible;
	}

	/* S1: 「続きを読む」は文字のボタン（公式サイトのピルと見分ける） */
	.otn-booth__more {
		order: 5;
		align-self: flex-start;
		min-height: 44px;
		padding: 0 4px;
		background: none;
		border: 0;
		color: var(--c-green);
		font-size: 15px;
		font-weight: 700;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	/* M4': 公式サイトのボタンを底に付ける（空きは本文とボタンの間へ・箱の底がそろう）。ボタンの無いカードは今のまま */
	.otn-booth__site {
		margin-top: auto;
	}

	/* M9: タイアップの札は写真の左上に重ねる（写真の角 8px に対して 8px 内側） */
	.otn-booth__media {
		position: relative;
	}

	.otn-booth__tieup {
		position: absolute;
		top: 8px;
		left: 8px;
		z-index: 1;
	}

	/* Coming Soon のカードも行の高さにそろえる（2026-10-20 H・デザイン最終 S3：10/15 の「上に寄せる」は、同じ行のカードより 230px 短く下が空いて見えたのでやめた。斜線の枠の高さは変えない） */
	.otn-booth.is-preparing {
		align-self: stretch;
	}

	.otn-lottery__items {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 16px;
	}

	.otn-lottery__lead,
	.otn-lottery__name,
	.otn-lottery__text {
		font-size: 18px;
	}

	.otn-lottery__item--first .otn-lottery__name {
		font-size: 28px;
	}

	.otn-garapon--link {
		min-height: 0;
		/* S-B3（v3.2）: 絵を外した後の緑枠は中身を中央に（右 6 割が空にならない） */
		justify-content: center;
		text-align: center;
	}

	.otn-garapon--link .otn-garapon__info {
		align-items: center;
	}

	/* S-B2（v3.2）: 詳細ページの札 3 つ（番号・ゾーン・タイアップ）は左から 12px 間隔で並べる（space-between で散らさない。一覧の .otn-booth__top には効かない） */
	.otn-article__top {
		justify-content: flex-start;
		gap: 12px;
	}
}

/* M10: 先方は stg を PDF に刷って赤字を入れる。紙では 5 行止めを外して全文、「続きを読む」は出さない（A の @media print とは別の区画） */
@media print {
	.otn-booth__desc {
		display: block;
		-webkit-line-clamp: none;
		overflow: visible;
	}

	.otn-booth__more {
		display: none;
	}
}

/* ===== C: 帯の崩れ 2026-10-15（検証記録_20261015_A側_stg反映後.md §3 の 11 か所・設計係C v1.1）。A・B の区画と基底の規則は 1 行も変えず、ここで上書きする。説明は規則の前の行にだけ書く ===== */
/* C-1: 文の最後の行が 1 字（「い！」「す」「分。」「ク」）だけにならないよう、行の折り方を段落の終わりまで見て決める（text-wrap-style: pretty＝Chrome 130 以降・Edge 130 以降・Safari 26 以降・Firefox 未対応。MDN 互換表 2026-10-15）。Safari 26 の pretty は段落全体を詰め直して行数が増える（WebKit 26.4 で実測）ので、word-break: auto-phrase を持つ物（Chrome 119 以降・Edge 119 以降。Safari は Technology Preview のみ・Firefox 未対応）だけに当てる。効かないブラウザでは今と同じ折れ方＝悪くはならない。Safari が auto-phrase を正式に持った時は WebKit で §4 の前後比較をやり直す。当てる先は検証記録 §3 の文の種類＋B の出展社カードの文（catch・desc・company）と抽選会の景品名＝12 種だけ */
@supports (word-break: auto-phrase) {
	.otn-fg-card__body,
	.otn-note,
	.otn-way__text,
	.otn-tm__text,
	.otn-lottery__lead,
	.otn-garapon__body,
	.otn-hero__lead,
	.otn-apply__heading,
	.otn-booth__desc,
	.otn-booth__catch,
	.otn-booth__company,
	.otn-lottery__name {
		text-wrap-style: pretty;
	}

	/* C-1b: トップの見どころカードの文（キッチンカー「勢ぞろい！」）は PC 1280px 以上だけ文節で折る（pretty は 1 字の行を消すだけで「勢ぞ／ろい！」の語の途中の折れは残る）。1280px 未満は auto-phrase で行数が増える（390px で 5→6 行）ので当てない */
	@media (min-width: 1280px) {
		.otn-fg-card__body {
			word-break: auto-phrase;
		}
	}
}

/* C-2: トップのアクセス段の金の帯（inline-flex）。2 つの .otn-line が横に並び切らない幅（帯の必要幅 388px ＞ 文の列 331〜385px＝768〜880px の実測）では 2 段目を下の行へ送る。入り切る幅（896px 以上・SP は A の block）は今と同じ 1 行 */
.otn-access-row__pill {
	flex-wrap: wrap;
}

/* C-3: セミナーの金枠の見出し（PC は A で .otn-line を inline）。768〜912px は見出しの幅 578〜698px ＜ 必要幅 699px で最後の節「観覧いただけます」が「ま／す」で割れるので、節ごとに折れる inline-block にする（928px 以上は 1 行のまま・高さ 42px） */
@media (min-width: 768px) {
	.otn-apply__heading .otn-line {
		display: inline-block;
	}
}

/* ===== D: タイアップ欄の Deli-J ロゴ 2026-10-19（修正指示書_20261019_DeliJロゴ_JCB写真.md）。A〜C の区画と基底の規則は 1 行も変えず、ここで足す。説明は規則の前の行にだけ書く。 ===== */
/* D-1: 元が 248px 幅の小さな画像なので、枠より小さい時は元の大きさのまま置き（拡大して粗くしない）、枠より大きい時だけ縮める。枠（白地・細い線・12px の余白）は --logo のまま＝住宅協会と同じ段 */
.otn-tm-card__media--logo-sm {
	object-fit: scale-down;
}

/* ===== D: 1 等の写真 2026-10-19（修正指示書_20261019_DeliJロゴ_JCB写真.md）。写真は他の賞の写真と同じ列幅・同じ 4:3 の枠に置き、名前を写真の横に出す。
   金の箱は左右 8px だけ外へ広げ（margin -8 / padding 8）、箱の中の幅を他の等の ul と同じにする＝列の数と幅が全幅で一致する
   （箱の padding 16px のままだと 1440px で 1 等 4 列×272px・2 等 5 列×220.8px にずれる。measure_lottery.py の実測）。
   名前は SP 18px（20px は 390px で 1px はみ出す・両エンジン実測。375px より狭い幅は 4.8vw まで縮めて 320px でも列に収める）・PC 28px（変えない）。強制の上書き（感嘆符つきの宣言）0・既存の値は変えない。
   SP の名前は箱を右へ 1em（全角空白 1 字分）だけ広げる＝iPhone の Safari（WebKit）が行末の全角空白をぶら下げずに 2 行目の頭へ送り「50,000円」が 1 字右にずれるのを止める。見える文字は列の中のまま（2 エンジン×9 幅の実測）。
   4 規則とも :has() で「1 等の li に写真がある時」だけ効く＝CSS だけ先に届いた途中の状態や、写真を外して戻した後は、1 等が元の見た目（名前だけ・24/28px）のまま ===== */
.otn-lottery__rank--first:has(.otn-lottery__img) {
	margin-right: -8px;
	margin-left: -8px;
	padding-right: 8px;
	padding-left: 8px;
}

.otn-lottery__item--first:has(> .otn-lottery__img) {
	display: grid;
	grid-template-columns: inherit;
	gap: inherit;
	align-items: center;
}

.otn-lottery__item--first:has(> .otn-lottery__img) .otn-lottery__name {
	grid-column: 2 / -1;
	margin-top: 0;
	margin-right: -1em;
	font-size: min(18px, 4.8vw);
}

@media (min-width: 768px) {
	.otn-lottery__item--first:has(> .otn-lottery__img) .otn-lottery__name {
		margin-right: 0;
		font-size: 28px;
	}
}

/* 2026-10-20 C追補（C §4 #11）：タイアップへの導線ボタンを全幅で 1 行に（住宅協会の 19 字が 2 行に割れていた）。
   768〜911px は 1 列（2 列だと 1 本 314〜367px で 16px の 19 字が入らない）。389px 以下は左右の内側 20→12px・矢印との間 8→4px・字は 15px と幅の 4% の小さい方（375px で 15px のまま・320px で 12.8px）。
   390〜767px と 912px 以上は今のまま（この 2 規則が当たらない） */
@media (min-width: 768px) and (max-width: 911px) {
	.otn-filter__tieup-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 389px) {
	.otn-filter__tieup-btn {
		gap: 4px;
		padding-right: 12px;
		padding-left: 12px;
		font-size: min(15px, 4vw);
	}
}

/* 2026-10-20 D追補：抽選会の景品名（2 列）は 389px 以下で字を 16px と幅の 4.2% の小さい方に（320px で 13.44px）。1 本 122〜157px の枠に「蒸気レス電気ケトル」などの改行しない語が収まり、隣の列へはみ出さない。1 等（--first）は詳細度が高いので当たらない */
@media (max-width: 389px) {
	.otn-lottery__name {
		font-size: min(16px, 4.2vw);
	}
}

/* ===== 2026-10-20 H：最終直し（デザイン審査 最終・検証結果 全体） ===== */

/* H1（デザイン M1）：一覧カード用の order:3（768px 以上）を詳細ページに効かせない。準備中の表示を社名の直下に置く */
.otn-article .otn-booth__preparing {
	order: 0;
}

/* H2（デザイン M2）：SP の駐車場の略図の下の凡例。色は略図の P の色（parking_map_v3_sp.svg の #008B43・#1A1A1A・#DDAC00）と同じ */
.otn-parking-legend {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.8;
}

.otn-parking-legend__item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.otn-parking-legend__item::before {
	content: "";
	flex: 0 0 12px;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background-color: #1a1a1a;
}

.otn-parking-legend__item--green::before {
	background-color: #008b43;
}

.otn-parking-legend__item--gold::before {
	background-color: #ddac00;
}

/* H6（検証 S2）：768px 以上で「お車」と「電車」の箱を横に並べた時、低い方の箱を高い方に引き伸ばさない（お車の箱の下の空き 550〜605px を消す） */
@media (min-width: 768px) {
	.otn-sec--cartrain .otn-way {
		align-self: flex-start;
	}
}

/* H8（デザイン S2）：SP の一覧で、キッチンカーのカードだけ「屋外」の札を出さない（キッチンカーは全部屋外。札が 2 行に割れるのを止める）。54 番（その他・屋外）は出したまま */
@media (max-width: 767px) {
	.otn-booth[data-area="kitchen"] .otn-booth__top .otn-pill--outdoor {
		display: none;
	}
}

/* H10（デザイン S5）：講師欄の 1 行目が 2 行に折れた時、2 行目を「講師：」の後ろにそろえる（ぶら下げ。2 行目以降の .otn-lecturer__cont の 3em と同じ位置） */
.otn-lecturer:not(.otn-lecturer--sp) > .otn-line:first-child {
	padding-left: 3em;
	text-indent: -3em;
}

.otn-lecturer__name {
	text-indent: 0;
}

/* H12（G の 38 番ほか）：詳細の写真を原寸より大きく引き伸ばさない（原寸より大きい写真は今と同じ contain の縮小） */
img.otn-article__photo {
	object-fit: scale-down;
}

/* ===== H追補 2026-10-20（H27 提供写真の切れ・H10 SP の直売所）修正指示書_20261020_H追補_SP直売所とH27.md。説明は規則の前の行にだけ書く ===== */
/* H27：/stage/ のプログラム写真は切らずに全体を出す（A 章の出展社写真と同じ型＝contain・白地・縁）。写真の元の比はそのまま（_v2.webp） */
.otn-program__photo {
	object-fit: contain;
	object-position: center;
	background-color: var(--c-white);
	border: 1px solid var(--c-line);
}

@media (max-width: 767px) {
	/* H27：トップのゲスト写真は SP の枠（343:300）で頭が切れていたので、4:5 の写真を切らずに出す（PC は 4:5 の枠で切れていない＝触らない） */
	.otn-guest__photo {
		object-fit: contain;
		object-position: center;
		background-color: var(--c-white);
		border: 1px solid var(--c-line);
	}

	/* H10：SP でもキッチンカーと農畜産物直売所コーナーを PC と同じ 2 枚のカードで縦に並べる（間はカード同士の 14px＝.otn-fg と同じ） */
	.otn-fg__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	/* H10：SP では「実施協力　JAファーマーズ高崎棟高」を題の次の行に出す（題の横に続けると 16px の小見出しが途中で折れる） */
	.otn-fg-card__title-sub {
		display: block;
		margin-left: 0;
	}
}

/* H10：「農畜産物直売所コーナー」のボタンの行き先（PC と SP で同じ 1 枚のカード）。上の 16px は #tieup-food（C 章）と同じ */
#tieup-ja-farm {
	scroll-margin-top: 16px;
}

/* 2026-10-21 井埜さん「左右の両脇のやつはこれスクロールで固定にするとか？なんか結構見切れてるよね」：
   PC（1024px 以上）は両脇の欧文を画面に固定し、ページの外へはみ出させない（前は left/right を -20〜-28px にして文字の 1/4〜1/3 が画面の外で切れていた）。
   z-index:-1 で本文のカードより後ろ・地の色より前に置く（html に地の色が無く body の色が画面全体の地になるため隠れない）。大きさは左右の余白の幅に合わせる */
@media (min-width: 1024px) {
	.otn-deco,
	.otn-deco--top {
		position: fixed;
		inset: 0;
		z-index: -1;
		font-size: clamp(56px, calc((100vw - 1200px) / 2 - 12px), 104px);
		letter-spacing: 6px;
	}

	.otn-deco__l,
	.otn-deco__r,
	.otn-deco--top .otn-deco__l,
	.otn-deco--top .otn-deco__r {
		top: 96px;
	}

	.otn-deco__l,
	.otn-deco--top .otn-deco__l {
		left: 6px;
	}

	.otn-deco__r,
	.otn-deco--top .otn-deco__r {
		right: 6px;
	}
}