@charset "utf-8";

/* ==========================================================================
   しあわせる。富山 2026年11月開催 本公開サイト（トップ / セッション詳細）
   デザインカンプ: web_2026_3.pdf（トップ）/ 20261002_web_セッション.pdf（セッション詳細）
   カンプは 1300px 幅想定。PDF の実測値を 1300px に換算して当てている
   SP カンプなし → 2025年度サイト・ティザーの崩し方に合わせた
   ティザー（/2026/assets/）の画像を流用し、このサイト固有のものは /2026/site/ に置く
   ========================================================================== */

/* 本文の Noto Sans JP（scripts/build_noto_subset.py で作った 1 ウェイト 1 ファイル。ライセンスは fonts/OFL.txt）
   Google Fonts の細切れ配信だと遅い回線で文字ごとに代わりのフォントが混ざるので、自前で配信する（2026-10-05） */
@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(/2026/site/fonts/NotoSansJP-Medium.woff2) format("woff2");
}

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(/2026/site/fonts/NotoSansJP-Bold.woff2) format("woff2");
}

:root {
	--color-text: #201816;
	--color-white: #ffffff;
	--color-blue: #3d94d6;
	/* 山の線画（tateyama.png）の青 */
	--color-day1: #1b7fc0;
	/* DAY1・SESSION 番号・日付の青（カンプ実測） */
	--color-day2: #5a6dbd;
	/* DAY2 の紫（カンプ実測。card2.png / day2_line.png と同系） */
	--color-theme: #1b6fb7;
	/* テーマ見出し・本文の青 */
	--color-red: #B83B2D;
	/* フォーム（ティザーの事前登録と同じ赤） */
	--color-gray-bg: #f4f4f2;
	--color-line: #c9c9c9;
	--color-black: #000000;

	--header-height: 120px;
	--container: 1140px;

	/* 書体（カンプ指定 → 実際に使うもの）
	   ゴシックMB101 M  → Noto Sans JP 500（自前の 1 ファイル。下の @font-face）
	   ゴシックMB101 DB → 見出ゴMB31 に寄せた（羽田さん 10/5「Noto Sans JP と見出ゴMB31 をなるべく使用」。PC にも反映）
	                     変数名 --font-db は既存の指定から参照しているので残す
	   見出ゴMB31       → Midashi Go MB31（Xserver Webフォント）
	   TypeSquare はこのドメインが配信先に未登録のため使えない */
	--font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	--font-db: "Midashi Go MB31", var(--font-body);
	--font-midashi: "Midashi Go MB31", var(--font-body);
	--font-inter: "Inter", Arial, sans-serif;
	--font-arial: Arial, "Helvetica Neue", sans-serif;
	/* 互換（既存の指定から参照） */
	--font-main: var(--font-body);
	--font-en: var(--font-arial);
}

/* --------------------------------------------------------------- リセット */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height);
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 500;
	color: var(--color-text);
	background: var(--color-white);
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

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

ul {
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

[hidden] {
	display: none !important;
}

.u-sp {
	display: none;
}

/* =========================================================== 共通パーツ */
/* 罫線の枠だけのボタン（当日のセッションはこちら / MORE / VIEW ALL） */
.c-btn {
	display: inline-block;
	min-width: 180px;
	padding: 10px 28px;
	border: 1px solid var(--color-text);
	background: var(--color-white);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	transition: background-color .3s, color .3s;
}

.c-btn:hover {
	background: var(--color-text);
	color: var(--color-white);
}

.c-btn--s {
	min-width: 126px;
	padding: 6px 20px;
	font-family: var(--font-en);
	font-size: 12px;
}

.c-heading {
	font-family: var(--font-arial);
	font-size: clamp(32px, 3.6vw, 46px);
	/* Arial 65Q */
	font-weight: 400;
	letter-spacing: .01em;
	line-height: 1.2;
	text-align: center;
}

/* 立山の線画（ティザーと同じ素材 tateyama.png＝支給 ttymill.jpg と同じ絵の透過版）幅 1200px */
.c-mountain {
	max-width: 1200px;
	aspect-ratio: 2396 / 292;
	margin: 200px auto 0;
	background: url(/2026/assets/images/tateyama.png?260922) center / contain no-repeat;
}

.c-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 14px;
	color: #8c8c8c;
	font-family: var(--font-db);
	font-size: 14.2px;
	/* DB 20Q */
}

/* LIVE（支給 live.jpg・68×23） */
.c-live {
	display: block;
	width: 68px;
	height: 23px;
	background: url(/2026/site/images/live.jpg) center / contain no-repeat;
	font-size: 0;
}

/* 人物写真: 正方形＋右下に日ごとの色の線（DAY1 青 day1_line.png / DAY2 紫 day2_line.png）。写真が無いあいだはグレーの箱 */
.c-photo {
	position: relative;
	display: block;
	flex: none;
	width: 78px;
	aspect-ratio: 1;
	isolation: isolate;
}

.c-photo::after {
	content: "";
	position: absolute;
	inset: 4px -5px -5px 4px;
	z-index: -1;
	background: url(/2026/site/images/day1_line.png) right bottom / 100% 100% no-repeat;
}

.is-day2 .c-photo::after {
	background-image: url(/2026/site/images/day2_line.png);
}

.c-photo img,
.c-photo.is-empty::before {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #d9d9d9;
}

.c-photo.is-empty::before {
	content: "";
}

.c-photo--l {
	width: 130px;
}

.c-photo--l::after {
	inset: 6px -8px -8px 6px;
}

/* =========================================================== ヒーロー
   背景 main.jpg。文字は支給画像（200% 書き出し。title.png 465px / day.png 472px / kihon.png 707px で配置）
   ティザーと同じく、写真と文字は画面に固定（fixed）し、ヘッダー以下が上に重なってせり上がる。
   .p-hero は画面 1 枚分の高さを確保するだけの枠。本文側（ヘッダー・main・フッター）は白地で上に乗せる */
.p-hero {
	position: relative;
	z-index: 0;
	height: 100vh;
	height: 100svh;
}

.p-hero__media {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100vh;
	height: 100svh;
	padding: 70px 20px clamp(120px, 17vh, 180px);
	background: #6f8496 url(/2026/site/images/main.jpg) center / cover no-repeat;
	text-align: center;
}

/* パララックス（PC・SP 共通・デザイナー指示 20260925_web_TOPパララックス.pdf。SP にも入れる: popo 10/5）
   ヒーローを画面 3 枚分の高さにして、その間スクロールに合わせて main.js が 0〜1 の値を入れる
     --cam  空のアップから山の全景へ下りる（写真の上端を起点に 2.8 倍から等倍へ引く。終点は従来のファーストビューと同じ構図）
     --logo ロゴが浮かび上がる / --text 開催情報が浮かび上がる
   最後まで進むとヘッダー以下が下からせり上がる（ここは従来どおり）。JS が無いときは 1（最終形）で表示
   「視差効果を減らす」設定の人には出さない */
@media (prefers-reduced-motion: no-preference) {
	.p-hero {
		height: 300vh;
		/* SP のアドレスバーの伸び縮みで高さが揺れないよう、小さい方の画面高さを使う */
		height: 300svh;
	}

	.p-hero__media {
		isolation: isolate;
		overflow: hidden;
		background-image: none;
	}

	.p-hero__media::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		background: url(/2026/site/images/main.jpg) center / cover no-repeat;
		transform-origin: 50% 0;
		transform: scale(calc(2.8 - 1.8 * var(--cam, 1)));
		will-change: transform;
	}

	.p-hero__title {
		opacity: var(--logo, 1);
	}

	.p-hero__lower {
		opacity: var(--text, 1);
	}
}

.is-top main,
.is-top .l-footer {
	position: relative;
	z-index: 1;
	background: var(--color-white);
}

.p-hero__title img {
	display: block;
	width: 465px;
}

.p-hero__lower {
	margin-top: auto;
}

.p-hero__sub img {
	display: block;
	width: 472px;
	margin-inline: auto;
}

.p-hero__info {
	margin-top: 40px;
}

.p-hero__info img {
	display: block;
	width: 707px;
	margin-inline: auto;
}

/* =========================================================== ヘッダー
   トップ: ヒーローの下に置き、スクロールしたら上部に貼り付く／下層: 最初から上部。高さ 120px */
.l-header {
	position: sticky;
	top: 0;
	z-index: 50;
	height: var(--header-height);
	background: var(--color-white);
}

.l-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	height: 100%;
	max-width: 1300px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 60px);
}

.l-header__logo {
	flex-shrink: 0;
	font-family: var(--font-db);
	font-size: clamp(18px, 1.8vw, 24px);
	letter-spacing: .02em;
	white-space: nowrap;
}

.l-header__nav {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 24px);
}

.l-header__list {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2.4vw, 32px);
	font-family: var(--font-db);
	font-size: 14px;
	white-space: nowrap;
}

.l-header__list a:hover,
.l-header__sns a:hover {
	opacity: .6;
}

.l-header__sns {
	display: flex;
	align-items: center;
	gap: 12px;
}

.l-header__sns li,
.l-header__sns img {
	flex-shrink: 0;
}

.l-header__sns img,
.l-header__sns svg {
	display: block;
	width: 28px;
	height: 28px;
}

/* 子メニュー（ABOUT・しあわせる。富山の過去回）。PC はマウスを乗せる／キーボードで移ると下に開く */
.l-header__has-sub {
	position: relative;
}

.l-header__has-sub > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 0 3px 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.l-header__sub {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 10;
	min-width: 200px;
	padding: 14px 0 10px;
	border-radius: 8px;
	background: var(--color-white);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
	font-size: 13px;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 6px);
	transition: opacity .2s, transform .2s, visibility .2s;
}

.l-header__has-sub:hover > .l-header__sub,
.l-header__has-sub:focus-within > .l-header__sub {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.l-header__sub a {
	display: block;
	padding: 7px 20px;
	white-space: nowrap;
}

.l-header__toggle {
	display: none;
	position: relative;
}

/* =========================================================== テーマ（ヘッダーからラベルまで 270px。背景は支給 mtg.png） */
.p-theme {
	position: relative;
	overflow: hidden;
	padding: 270px 20px 120px;
	background: url(/2026/site/images/mtg.png) center 150px / 1163px auto no-repeat;
}

.p-theme__inner {
	display: grid;
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	gap: clamp(30px, 6vw, 80px);
	align-items: start;
	max-width: var(--container);
	margin-inline: auto;
}

/* 2025年度の透過動画（848×1440。形が動く枠の中で映像が入れ替わる） */
.p-theme__photo {
	width: 100%;
	margin-top: -40px;
	aspect-ratio: 848 / 1440;
}

.p-theme__photo video {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

.p-theme__label {
	display: block;
	max-width: 570px;
	padding: 8px 24px;
	border: 1px solid var(--color-text);
	border-radius: 999px;
	background: var(--color-white);
	font-size: 21.3px;
	/* M 30Q */
	letter-spacing: .04em;
	text-align: center;
}

.p-theme__title {
	margin-top: 50px;
	color: var(--color-theme);
	font-family: var(--font-midashi);
	font-size: clamp(28px, 3vw, 39px);
	/* 見出ゴMB31 55Q */
	font-weight: 400;
	letter-spacing: .04em;
	line-height: 1.5;
}

.p-theme__text {
	margin-top: 18px;
	color: var(--color-theme);
	font-family: var(--font-midashi);
	font-size: clamp(17px, 1.9vw, 24.8px);
	/* 見出ゴMB31 35Q */
	font-weight: 400;
	line-height: 1.75;
}

.p-theme__btn {
	margin-top: 50px;
	padding-left: 110px;
}

.p-theme__btn .c-btn {
	min-width: 300px;
	padding-block: 16px;
	font-family: var(--font-body);
	font-size: 17.7px;
	/* M 25Q */
	font-weight: 500;
}

/* =========================================================== 開催概要（背景は支給 ttym.jpg） */
.p-about {
	padding: 90px 20px 50px;
	background: #fff url(/2026/site/images/ttym.jpg) center bottom / cover no-repeat;
}

.p-about__inner {
	max-width: 980px;
	margin-inline: auto;
}

.p-about__title {
	font-size: clamp(22px, 2.5vw, 31.9px);
	/* M 45Q */
	font-weight: 500;
	line-height: 1.5;
}

.p-about__lead {
	margin-top: 26px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--color-text);
	font-size: clamp(15px, 1.6vw, 21.3px);
	/* M 30Q */
	line-height: 1.65;
}

.p-about__table {
	display: grid;
	grid-template-columns: 5em 1fr;
	gap: 30px 0;
	margin-top: 26px;
	font-size: clamp(15px, 1.6vw, 21.3px);
	/* M 30Q */
	line-height: 1.65;
}

/* =========================================================== INFORMATION（トップの新着3件）
   中身は既存 CMS の /inc/top_news_list.php が出力する HTML（クラス名は CMS 側の固定）
     .news_col > .news_thumb_wrapper > a > .news_thumb(background-image) ＋ a > .news_date / .news_title
   写真は角丸＋右下に青いグラデーションの線（支給 Lline.png）。写真未登録は news_noimage.png を下に敷く */
.p-info {
	max-width: var(--container);
	margin-inline: auto;
	padding: 200px 20px clamp(70px, 8vw, 110px);
}

.p-info .c-heading,
.p-newslist .c-heading {
	font-family: Arial, var(--font-main);
	font-size: clamp(32px, 3.6vw, 46px);
	/* 65Q */
}

.p-info__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 320px));
	justify-content: space-between;
	gap: 40px 24px;
	margin-top: 36px;
}

.news_col a {
	display: block;
}

/* 写真（トップ・一覧共通） */
.news_thumb_wrapper,
.p-news__thumb {
	position: relative;
	display: block;
	aspect-ratio: 320 / 192;
	isolation: isolate;
}

.news_thumb_wrapper::after,
.p-news__thumb::after {
	content: "";
	position: absolute;
	inset: 8px -8px -9px 10px;
	z-index: -1;
	background: url(/2026/site/images/lline.png) right bottom / 100% 100% no-repeat;
	pointer-events: none;
}

.news_thumb_wrapper a,
.news_thumb,
.p-news__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 12px;
}

.news_thumb_wrapper a {
	background: url(/2026/site/images/news_noimage.png) center / cover no-repeat;
	overflow: hidden;
}

.news_thumb {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	transition: opacity .3s;
}

.p-news__thumb img {
	object-fit: cover;
	transition: opacity .3s;
}

.news_col a:hover .news_thumb,
.p-news__link:hover img {
	opacity: .8;
}

.news_date,
.p-news__date {
	display: block;
	color: #1b7fc0;
	font-family: Arial, var(--font-main);
	font-size: 17.7px;
	/* 25Q */
	line-height: 1.4;
}

.news_date {
	margin: 24px 0 0;
}

.news_title {
	margin: 4px 0 0;
	font-size: 17.7px;
	/* M 25Q */
	line-height: 1.5;
}

.p-info__all {
	margin-top: clamp(40px, 5vw, 64px);
	text-align: center;
}

/* =========================================================== お知らせ一覧（/infomation/・CMS テンプレート） */
.p-newslist {
	max-width: 1020px;
	margin-inline: auto;
	padding: clamp(60px, 8vw, 110px) 20px clamp(80px, 10vw, 140px);
}

.p-news {
	margin-top: clamp(36px, 5vw, 60px);
}

.p-news__item + .p-news__item {
	margin-top: clamp(40px, 5vw, 64px);
}

.p-news__link {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 0 50px;
	align-items: start;
}

.p-news__date {
	font-family: var(--font-main);
	font-size: 24.8px;
	/* DB 35Q */
	font-weight: 700;
}

.p-news__title {
	display: block;
	margin-top: 6px;
	font-size: 24.8px;
	/* DB 35Q */
	font-weight: 700;
	line-height: 1.5;
}

.p-news__excerpt {
	display: -webkit-box;
	margin-top: 8px;
	overflow: hidden;
	font-size: 21.3px;
	/* DB 30Q */
	font-weight: 700;
	line-height: 1.6;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.p-news__link:hover .p-news__title {
	text-decoration: underline;
}

/* =========================================================== お知らせ記事（?mode=newsDetail・CMS テンプレート） */
.p-article {
	padding: clamp(50px, 7vw, 100px) 20px clamp(80px, 10vw, 140px);
}

.p-article__inner {
	max-width: 1020px;
	margin-inline: auto;
}

.p-article__date {
	display: block;
	color: #1b7fc0;
	font-size: 24.8px;
	/* DB 35Q */
	font-weight: 700;
	line-height: 1.4;
}

.p-article__title {
	margin-top: 6px;
	font-size: clamp(24px, 2.8vw, 35.4px);
	/* DB 50Q */
	font-weight: 700;
	line-height: 1.5;
}

.p-article__fig {
	margin: clamp(30px, 4vw, 40px) 0 0;
}

.p-article__fig img {
	display: block;
	width: 100%;
	height: auto;
}

.p-article__fig figcaption {
	margin-top: 8px;
	font-size: 14px;
	color: #555;
}

.p-article__text {
	margin-top: clamp(28px, 4vw, 36px);
	font-size: 19.8px;
	/* M 28Q */
	line-height: 1.9;
	overflow-wrap: anywhere;
}

.p-article__text a {
	color: #1b7fc0;
	text-decoration: underline;
}

.p-article__back {
	margin-top: clamp(60px, 8vw, 100px);
	text-align: center;
}

/* =========================================================== SCHEDULE / TIMETABLE
   左 DAY1（青）・右 DAY2（紫）。切り替えはしない（SP のみ日付タブ）。
   カード枠は支給 card.png（DAY1）/ card2.png（DAY2）をカードの大きさに合わせて敷く（565×696 相当。右下に色の線） */
.p-schedule {
	padding: 125px 20px clamp(80px, 9vw, 130px);
	background: var(--color-gray-bg);
}

.p-schedule__inner {
	max-width: var(--container);
	margin-inline: auto;
}

.p-schedule__lead {
	max-width: 960px;
	margin: 45px auto 0;
	font-size: clamp(15px, 1.6vw, 21.3px);
	/* M 30Q */
	line-height: 1.65;
}

/* SP 用の日付切替（PC は .p-schedule__day の見出しを出す） */
.p-schedule__switch {
	display: none;
}

.p-schedule__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 12px;
	margin-top: 90px;
	/* 中央の縦線（見出しの高さだけ） */
	background: linear-gradient(var(--color-text), var(--color-text)) center top / 1px 160px no-repeat;
}

/* 左右のカードの高さを行ごとに揃える（県庁 10/5）。--rows は build.py が入れる */
.p-schedule__col {
	display: grid;
	grid-row: span var(--rows);
	grid-template-rows: subgrid;
	row-gap: 0;
}

.p-schedule__day {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 160px;
	padding-top: 40px;
	line-height: 1.1;
}

.p-schedule__day-label {
	font-family: var(--font-inter);
	font-size: clamp(38px, 4vw, 50px);
	/* Inter Bold 71Q */
	font-weight: 700;
}

.p-schedule__day-date {
	margin-top: 6px;
	font-family: var(--font-midashi);
	font-size: clamp(22px, 2.5vw, 31.9px);
	/* 見出ゴMB31 45Q */
	font-weight: 400;
}

.is-day1 .p-schedule__day {
	color: var(--color-day1);
}

.is-day2 .p-schedule__day {
	color: var(--color-day2);
}

/* セッションカード（トップ） */
.c-sess {
	display: flex;
	flex-direction: column;
	margin-top: 30px;
	padding: 36px 56px 54px 36px;
	background: url(/2026/site/images/card.png) left top / 100% 100% no-repeat;
}

.is-day2 .c-sess {
	background-image: url(/2026/site/images/card2.png);
}

.c-sess__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.c-sess__no {
	color: #1e93cc;
	font-family: var(--font-db);
	font-size: 17.7px;
	/* DB 25Q */
	letter-spacing: .02em;
	line-height: 1.3;
}

.c-sess__no span {
	font-size: 24.8px;
	/* DB 35Q */
}

.c-sess__when {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--color-text);
}

.c-sess__time {
	font-family: var(--font-db);
	font-size: clamp(20px, 2.2vw, 24.8px);
	/* DB 35Q */
	line-height: 1.3;
	white-space: nowrap;
}

.c-sess__place {
	font-family: var(--font-db);
	font-size: 16.3px;
	/* DB 23Q */
	line-height: 1.4;
	text-align: right;
}

.c-sess__place span {
	display: block;
}

.c-sess__title {
	margin-top: 22px;
	font-family: var(--font-db);
	font-size: clamp(21px, 2.2vw, 28.4px);
	/* DB 40Q */
	font-weight: 400;
	line-height: 1.45;
}

/* タイトルの 2 行目（「― 〜」）。改行して続け、文字の大きさは下の副題と同じ（県庁 10/6） */
.c-title2 {
	display: block;
}

.c-sess__title .c-title2 {
	margin-top: 8px;
	font-size: clamp(15px, 1.5vw, 19.8px);
	/* .c-sess__sub と同じ */
	line-height: 1.5;
}

.p-detail__title .c-title2 {
	margin-top: 12px;
	font-size: clamp(19px, 2vw, 26px);
	/* .p-detail__sub と同じ */
	line-height: 1.55;
}

.c-sess__sub {
	margin-top: 8px;
	/* タイトルと一体の副題なので、タイトルと同じ黒（県庁 10/5） */
	font-family: var(--font-db);
	font-size: clamp(15px, 1.5vw, 19.8px);
	line-height: 1.5;
}

.c-sess .c-tags {
	margin-top: 10px;
}

.c-sess__sps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px 18px;
	margin-top: 34px;
}

.c-sess__sp {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.c-sess__sp-text {
	min-width: 0;
	padding-top: 6px;
}

.c-sess__sp-name {
	display: block;
	font-family: var(--font-db);
	font-size: 17.7px;
	/* DB 25Q */
	line-height: 1.4;
}

.c-sess__sp-role {
	display: block;
	margin-top: 6px;
	font-family: var(--font-db);
	font-size: 10.6px;
	/* DB 15Q */
	line-height: 1.45;
}

.c-sess__more {
	/* 高さを揃えて伸びたカードでも MORE は下端に置く */
	margin-top: auto;
	padding-top: 40px;
	text-align: center;
}

.c-sess__more .c-btn {
	min-width: 138px;
	padding: 8px 20px;
	font-family: var(--font-inter);
	font-size: 14.2px;
	/* Inter Regular 20Q */
	font-weight: 400;
}

/* =========================================================== セッション詳細（全体 1020px：左 255px＋本文 700px） */
.p-sessions {
	padding: 90px 20px 0;
}

.p-detail {
	max-width: 1020px;
	margin-inline: auto;
	padding-bottom: clamp(80px, 10vw, 140px);
}

.p-detail__intro {
	display: grid;
	grid-template-columns: 255px minmax(0, 700px);
	justify-content: space-between;
	gap: 40px;
}

.p-detail__aside {
	padding-left: 30px;
}

.p-detail__aside-ttl {
	margin-top: 30px;
	font-family: var(--font-db);
	font-size: 21px;
	/* カンプは DB 35Q（24.8px）。255px 幅で 2 行に収めるため少し詰める */
	line-height: 1.7;
}

.p-detail__aside-txt {
	margin-top: 18px;
	font-family: var(--font-db);
	font-size: 15px;
	line-height: 2;
}

.p-detail__main .c-sess__head {
	justify-content: flex-start;
	gap: 16px;
}

.p-detail__main .c-sess__when {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding-bottom: 0;
	border: 0;
}

.p-detail__main .c-sess__time {
	font-size: clamp(24px, 2.4vw, 28.4px);
	/* DB 40Q */
}

.p-detail__main .c-sess__place {
	font-size: clamp(16px, 1.6vw, 21.3px);
	/* DB 30Q */
	text-align: left;
}

.p-detail__main .c-sess__place span {
	display: inline;
	margin-right: 1em;
}

.p-detail__title {
	margin-top: 16px;
	font-family: var(--font-db);
	font-size: clamp(26px, 3vw, 39px);
	/* DB 55Q */
	font-weight: 400;
	line-height: 1.45;
}

.p-detail__sub {
	margin-top: 12px;
	font-family: var(--font-db);
	font-size: clamp(19px, 2vw, 26px);
	font-weight: 400;
	line-height: 1.55;
}

.p-detail .c-tags {
	margin-top: 14px;
	font-size: 17.7px;
	/* DB 25Q */
}

.p-detail__summary {
	margin-top: 30px;
	font-size: clamp(16px, 1.6vw, 21.3px);
	/* M 30Q */
	line-height: 1.85;
}

.p-detail .c-mountain {
	margin-top: 80px;
	max-width: 920px;
}

.p-detail .c-heading {
	margin-top: 130px;
}

.p-speakers {
	margin-top: 100px;
}

.p-speaker {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr) minmax(0, 635px);
	gap: 0 28px;
	align-items: start;
}

.p-speaker + .p-speaker {
	margin-top: 70px;
}

.p-speaker__mod {
	color: var(--color-day1);
	font-family: var(--font-db);
	font-size: 14.2px;
}

.p-speaker__name {
	font-family: var(--font-db);
	font-size: clamp(22px, 2.2vw, 28.4px);
	/* DB 40Q */
	line-height: 1.35;
}

.p-speaker__role {
	margin-top: 10px;
	color: var(--color-day1);
	font-family: var(--font-db);
	font-size: 14.2px;
	/* DB 20Q */
	line-height: 1.55;
}

.is-day2 .p-speaker__role,
.is-day2 .p-speaker__mod {
	color: var(--color-day2);
}

.p-speaker__bio {
	font-size: 16.3px;
	/* M 23Q */
	line-height: 2;
}

/* こんな方々に聴いてみてほしい!（イラストは支給 girl.png 183×215） */
.c-audience__illust {
	display: block;
	width: 183px;
	aspect-ratio: 183 / 215;
	background: url(/2026/site/images/girl.png) center / contain no-repeat;
}

/* =========================================================== フッター */
.l-footer__logo {
	padding: 58px 20px;
	text-align: center;
}

.l-footer__address {
	padding: 8px 20px;
	background: var(--color-black);
	color: var(--color-white);
	font-size: 11px;
	line-height: 1.79;
	text-align: center;
}

/* =========================================================== お申込みボタン（右下固定。支給 moushikomi.png 166×250）
   マウスオーバーでほんの少し揺れる（カンプ注記） */
.c-float {
	position: fixed;
	right: clamp(12px, 2vw, 28px);
	bottom: clamp(12px, 2vw, 28px);
	z-index: 40;
	display: block;
	width: 166px;
	aspect-ratio: 166 / 250;
	background: url(/2026/site/images/moushikomi.png) center / contain no-repeat;
	transform-origin: 50% 90%;
}

.c-float span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.c-float:hover,
.c-float:focus-visible {
	animation: float-wiggle .6s ease-in-out;
}

@keyframes float-wiggle {
	0%, 100% { transform: rotate(0); }
	20% { transform: rotate(-5deg); }
	45% { transform: rotate(4deg); }
	70% { transform: rotate(-2deg); }
}

/* =========================================================== モーダル（参加申込） */
.c-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 20px;
	overflow-y: auto;
}

.c-modal__overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .8);
}

.c-modal__body {
	position: relative;
	width: min(600px, 100%);
	margin-block: 40px;
}

.c-modal__close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 36px;
	height: 36px;
	color: var(--color-white);
	font-size: 30px;
	line-height: 1;
}

.c-apply {
	padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 44px);
	border-radius: 14px;
	background: var(--color-white);
}

.c-apply__title {
	font-size: clamp(20px, 2vw, 25px);
	font-weight: 700;
	text-align: center;
}

.c-apply__lead {
	margin-top: 10px;
	font-size: 14px;
	text-align: center;
}

.c-apply__form {
	margin-top: 24px;
}

.c-field {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.c-field__label {
	display: block;
	margin-bottom: 8px;
	padding: 0;
	font-size: 14px;
	font-weight: 700;
}

.c-req,
.c-opt {
	display: inline-block;
	margin-left: 6px;
	padding: 0 7px;
	border-radius: 4px;
	font-size: 11px;
	line-height: 1.7;
	vertical-align: 1px;
}

.c-req {
	background: var(--color-red);
	color: var(--color-white);
}

.c-opt {
	border: 1px solid #b5b5b5;
	color: #6b6360;
}

.c-input {
	display: block;
	width: 100%;
	height: 50px;
	padding: 0 14px;
	border: 1px solid #b5b5b5;
	border-radius: 8px;
	background: var(--color-white);
	color: var(--color-text);
	font: inherit;
	font-size: 16px;
	/* iOS のズームを防ぐため 16px 以上 */
}

textarea.c-input--area {
	height: auto;
	min-height: 96px;
	padding: 12px 14px;
	line-height: 1.6;
	resize: vertical;
}

select.c-input {
	appearance: none;
	padding-right: 36px;
	background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23201816' stroke-width='1.6'/%3E%3C/svg%3E") right 14px center no-repeat;
}

.c-input:focus,
.c-choice input:focus-visible+span,
.c-check input:focus-visible {
	outline: 2px solid var(--color-red);
	outline-offset: 1px;
}

.c-input[aria-invalid="true"],
.c-choices[aria-invalid="true"] .c-choice span {
	border-color: var(--color-red);
}

.c-choices {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.c-choices--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c-choice {
	position: relative;
	cursor: pointer;
}

.c-choice input {
	position: absolute;
	opacity: 0;
}

.c-choice span {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 54px;
	padding: 6px 8px;
	border: 1px solid #b5b5b5;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.c-choice small {
	font-size: 12px;
	font-weight: 400;
}

.c-choice input:checked+span {
	border-color: var(--color-red);
	background: #fbf1ef;
	box-shadow: inset 0 0 0 1px var(--color-red);
}

.c-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.7;
	cursor: pointer;
}

.c-check input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--color-red);
}

.c-check--consent {
	margin-top: 16px;
	font-weight: 700;
}

.c-check a {
	text-decoration: underline;
}

/* ハニーポット: 画面外に置き、人には見えない */
.c-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.c-apply__turnstile {
	display: flex;
	justify-content: center;
	min-height: 65px;
	margin-top: 20px;
}

.c-apply__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 56px;
	margin-top: 18px;
	border-radius: 10px;
	background: var(--color-red);
	color: var(--color-white);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .04em;
	transition: opacity .3s;
}

.c-apply__submit:hover {
	opacity: .85;
}

.c-apply__submit:disabled {
	opacity: .5;
	cursor: wait;
}

.c-apply__msg {
	min-height: 1.6em;
	margin-top: 12px;
	color: var(--color-red);
	font-size: 14px;
	line-height: 1.6;
}

.c-apply__done {
	margin-top: 20px;
	text-align: center;
}

.c-apply__done-title {
	margin-bottom: 8px;
	font-size: 20px;
	font-weight: 700;
}

.c-apply__done-btn {
	margin-top: 22px;
}

/* =========================================================== タブレット
   ヘッダーは本番の書体（ゴシックMB101 Bold）でロゴ約 440px＋メニュー 5 項目＋SNS＝約 1340px 要る
   （2026-10-04 実機の画面で確認）。それより狭い 1400px 以下はハンバーガーにする */
@media screen and (max-width: 1400px) {
	/* --- ヘッダー: 1400px 以下はロゴ左・右に角丸枠のハンバーガー（ティザーと同じ） --- */
	.l-header__inner {
		padding-inline: 16px;
	}

	.l-header__toggle {
		display: block;
		width: 33px;
		height: 28px;
		border: 1px solid var(--color-text);
		border-radius: 3.5px;
	}

	.l-header__toggle span {
		position: absolute;
		left: 8.75px;
		width: 13.5px;
		height: 1.5px;
		background: var(--color-text);
		transition: transform .3s, opacity .3s;
	}

	.l-header__toggle span:nth-child(1) { top: 8px; }
	.l-header__toggle span:nth-child(2) { top: 12.25px; }
	.l-header__toggle span:nth-child(3) { top: 16.5px; }
	.l-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
	.l-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.l-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.25px) rotate(-45deg); }

	.l-header__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 6px 20px 22px;
		background: #f8f8f8;
		border-top: 1px solid #e5e5e5;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity .25s, transform .25s, visibility .25s;
	}

	.l-header__nav.is-open {
		visibility: visible;
		opacity: 1;
		transform: none;
	}

	.l-header__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		font-size: 16px;
	}

	.l-header__list a {
		display: block;
		padding: 12px 0;
	}

	.l-header__sns {
		margin-top: 10px;
		gap: 12px;
	}

	.l-header__sns img,
	.l-header__sns svg {
		width: 32px;
		height: 32px;
	}

	/* ハンバーガーの中では子メニューを開いたまま字下げして並べる */
	.l-header__has-sub > a::after {
		display: none;
	}

	.l-header__sub {
		position: static;
		min-width: 0;
		padding: 0 0 6px 1em;
		border-radius: 0;
		background: none;
		box-shadow: none;
		font-size: 14px;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.l-header__sub a {
		padding: 7px 0;
		white-space: normal;
	}

	/* メニューが縦に長くなったので、画面からはみ出す分はメニューの中でスクロール */
	.l-header__nav {
		max-height: calc(100svh - var(--header-height));
		overflow-y: auto;
	}

	:root {
		--header-height: 80px;
	}

	.p-speaker {
		grid-template-columns: 130px minmax(0, 1fr);
	}

	.p-speaker__bio {
		grid-column: 2;
		margin-top: 16px;
	}

	.p-detail__intro {
		grid-template-columns: 220px minmax(0, 1fr);
	}

	.p-detail__aside {
		padding-left: 0;
	}

	.c-sess {
		padding: 30px 44px 48px 28px;
	}
}

/* =========================================================== SP（2025年度サイト・ティザーの崩し方に合わせる） */
@media screen and (max-width: 767px) {
	:root {
		--header-height: 52px;
	}

	.u-sp {
		display: inline;
	}

	.u-pc {
		display: none;
	}

	/* --- ヘッダー --- */
	.l-header__logo {
		font-size: 14px;
	}

	/* --- ヒーロー: 文字画像を画面幅に合わせて縮める --- */
	.p-hero__media {
		padding-top: 48px;
		padding-bottom: 110px;
	}

	.p-hero__title img {
		width: min(465px, 78vw);
	}

	.p-hero__sub img {
		width: min(472px, 84vw);
	}

	.p-hero__info {
		margin-top: 24px;
	}

	.p-hero__info img {
		width: min(707px, 92vw);
	}

	/* --- テーマ: 写真を上、本文を下に --- */
	.p-theme {
		padding: 80px 20px 70px;
		background-size: 160% auto;
		background-position: center top 40px;
	}

	.p-theme__photo {
		margin-top: 0;
	}

	.p-theme__title {
		margin-top: 32px;
	}

	.p-theme__btn {
		margin-top: 32px;
		padding-left: 0;
	}

	.c-mountain {
		margin-top: 80px;
	}

	.p-theme__inner {
		grid-template-columns: 1fr;
		justify-items: center;
	}

	.p-theme__photo {
		width: min(200px, 56vw);
	}

	.p-theme__label {
		width: 100%;
		font-size: 15px;
	}

	.c-heading {
		font-size: 28px;
	}

	/* SP カンプ（10/5）: 動画は出さず、ラベル・見出し・本文・ボタンを中央に */
	.p-theme__photo {
		display: none;
	}

	.p-theme__body {
		text-align: center;
	}

	.p-theme__title {
		font-size: 21px;
		/* 見出ゴMB31 60Q */
	}

	.p-theme__text {
		font-size: 14px;
		/* 見出ゴMB31 40Q */
	}

	.p-theme__btn .c-btn {
		min-width: 0;
		width: min(100%, 220px);
		padding-block: 10px;
		font-size: 13px;
	}

	/* --- 開催概要 --- */
	.p-about__title {
		font-size: 5vw;
	}

	.p-about__table {
		grid-template-columns: 4.5em 1fr;
		gap: 16px 0;
	}

	/* --- INFORMATION: 薄い青の帯に、日付＋タイトルだけの一覧（写真なし。SP カンプ 10/5） --- */
	.p-info {
		max-width: none;
		margin-top: 60px;
		padding: 40px 20px 36px;
		background: #f2f7fc;
	}

	.p-info .c-heading {
		font-size: 30px;
	}

	.p-info__list {
		grid-template-columns: 1fr;
		gap: 18px;
		margin-top: 24px;
	}

	.p-info .news_thumb_wrapper {
		display: none;
	}

	.p-info .news_date {
		margin-top: 0;
		font-size: 15px;
	}

	.p-info .news_title {
		margin-top: 0;
		font-size: 14px;
	}

	.p-info__all {
		margin-top: 28px;
	}

	.p-news__link {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.p-news__date,
	.p-article__date {
		font-size: 16px;
	}

	.p-news__title {
		font-size: 18px;
	}

	.p-news__excerpt {
		font-size: 15px;
	}

	.p-article__text {
		font-size: 16px;
	}

	/* --- SCHEDULE: DAY1 → DAY2 を縦に並べ、各日の先頭に日付切替（羽田さん 10/5 SP カンプ。タブ切替はやめた） --- */
	.p-schedule {
		padding-top: 70px;
	}

	.p-schedule__lead {
		margin-top: 28px;
	}

	.p-schedule__cols {
		display: block;
		margin-top: 0;
		background: none;
	}

	.p-schedule__col {
		display: block;
	}

	.p-schedule__day {
		display: none;
	}

	/* 中央に縦線。表示中の日は日の色、もう一方は黒でその日の先頭へのリンク */
	.p-schedule__switch {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin-top: 56px;
		padding-top: 4px;
		background: linear-gradient(var(--color-text), var(--color-text)) center top / 1px 100% no-repeat;
	}

	.p-schedule__switch-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 18px 0;
		color: var(--color-text);
		line-height: 1.1;
	}

	.p-schedule__switch-item .p-schedule__day-label {
		font-size: 25px;
		/* Inter Bold 71Q */
	}

	.p-schedule__switch-item .p-schedule__day-date {
		margin-top: 4px;
		font-size: 16px;
		/* 見出ゴMB31 45Q */
	}

	.p-schedule__switch-item.is-day1 {
		color: var(--color-day1);
	}

	.p-schedule__switch-item.is-day2 {
		color: var(--color-day2);
	}

	a.p-schedule__switch-item:hover {
		opacity: .6;
	}

	/* カード: SP 用の縦長カード画像（card_sp.png / card2_sp.png・656×1280）。
	   登壇者 1 列でカードの高さが大きく変わるので、角と線の形を保ったまま中央だけ伸ばす（border-image の 9 分割） */
	.p-schedule .c-sess {
		position: relative;
		isolation: isolate;
		margin: 24px 0 0;
		padding: 26px 30px 36px 20px;
		background: none;
	}

	.p-schedule .c-sess::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border: 30px solid transparent;
		border-image: url(/2026/site/images/card_sp.png) 60 fill / 30px stretch;
	}

	.p-schedule .is-day2 .c-sess::before {
		border-image-source: url(/2026/site/images/card2_sp.png);
	}

	/* 定員・部屋は時刻の右に右寄せ 2 行（PC と同じ） */
	.p-schedule .c-sess__place {
		font-size: 11px;
	}

	.p-schedule .c-sess__time {
		font-size: 16px;
	}

	.p-schedule .c-sess__title {
		margin-top: 16px;
		font-size: 17px;
	}

	.p-schedule .c-sess__sub,
	.p-schedule .c-sess__title .c-title2 {
		font-size: 14px;
	}

	.c-sess__sps {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-top: 24px;
	}

	.c-sess__sp {
		align-items: center;
	}

	.c-photo {
		width: 69px;
	}

	.c-sess__sp-name {
		font-size: 16px;
	}

	.c-sess__sp-role {
		font-size: 10px;
	}

	.c-sess__more {
		padding-top: 28px;
	}

	.c-sess__more .c-btn {
		min-width: 100px;
		padding: 6px 16px;
		font-size: 12px;
	}

	.p-sessions {
		padding-top: 50px;
	}

	.p-detail .c-mountain {
		margin-top: 50px;
	}

	.p-detail .c-heading {
		margin-top: 70px;
	}

	.p-speakers {
		margin-top: 50px;
	}

	.p-speaker + .p-speaker {
		margin-top: 48px;
	}


	/* --- セッション詳細: 1列に --- */
	.p-detail__intro {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* 「こんな方々に」は SP では本文の下に、イラストと横並びで出す */
	.p-detail__aside {
		order: 1;
		display: grid;
		grid-template-columns: 90px minmax(0, 1fr);
		gap: 4px 18px;
		margin-top: 36px;
		padding: 24px 0 0;
		border-top: 1px solid var(--color-line);
	}

	.p-detail__aside .c-audience__illust {
		grid-row: span 2;
		width: 90px;
	}

	.p-detail__aside-ttl {
		margin-top: 0;
		font-size: 17px;
	}

	.p-detail__aside-txt {
		margin-top: 0;
		font-size: 14px;
	}

	.p-speaker {
		grid-template-columns: 90px minmax(0, 1fr);
		gap: 0 20px;
	}

	.c-photo--l {
		width: 90px;
	}

	.p-speaker__name {
		font-size: 19px;
	}

	.p-speaker__bio {
		grid-column: 1 / -1;
		margin-top: 18px;
	}



	/* --- お申込みボタン --- */
	.c-float {
		width: 100px;
	}

	/* --- フォーム --- */
	.c-choices {
		grid-template-columns: 1fr;
	}

	.c-choices--2 {
		grid-template-columns: 1fr 1fr;
	}

	/* 参加日は 4 択で文字が長いので SP は 1 列（PC は 2×2） */
	.c-choices--day {
		grid-template-columns: 1fr;
	}

	.c-choice span {
		flex-direction: row;
		gap: 8px;
		min-height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	* {
		transition: none !important;
	}
}