@charset "utf-8";

/*
**********************************************************************
* soukai2026.css — 令和8年度 蹊友会総会 特設ページ
*
* 配色・イラストは入稿チラシ（A4巻三つ折 表面）から採取。
* ストライプのアーチをページ全体の下地とし、上下端を半楕円で閉じた
* カプセル状にしている。半楕円は左右端で接線が垂直になるため、
* 直線部分との継ぎ目が角張らない。
*
* 想定読者は年配の会員が中心。本文は17px以上を基本とし、装飾より
* 可読性を優先する。今年度は会場が変わるため、会場ブロックは独立させて
* 埋もれない扱いにしている。
*
* 構成：①タイトル ②挨拶文 ③特別講演 ④開催概要 ⑤会場 ⑥注意事項
*       ⑦お申し込み ＋ 常時表示CTA ＋ サプライズゲスト（アーチ下端）
*********************************************************************
*/

.gm {
	/* --- 色（チラシからの実測値） --- */
	--pink: #ed047c;
	--mint: #57c5c2;
	--yellow: #ffea3f;
	--blue: #2056ae;   /* フォーカスリング。イラスト内の青と同色 */
	--stripe-a: #f3def1;
	--stripe-b: #f2cae8;
	--ink: #3c343a;
	--ink-soft: #675c65;
	--tint: #fff5fa;
	--rule: #f0e2ea;

	/* --- 角丸（4段のみ） --- */
	--r-s: 8px;
	--r-m: 16px;
	--r-l: 28px;
	--r-pill: 999px;

	/* --- 余白スケール --- */
	--s2: 8px;
	--s3: 12px;
	--s4: 16px;
	--s5: 24px;
	--s6: 32px;
	--s7: 48px;
	--s8: 64px;

	/* --- 書体 --- */
	--font-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
	--font-body: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

	/* --- アーチ幾何 --- */
	/* 半楕円の縦横比。チラシのドーム（幅611.867／高さ256.114）に合わせている */
	--arch-cap-ratio: 2.3891;

	--stripes: linear-gradient(90deg, var(--stripe-a) 0 50%, var(--stripe-b) 50% 100%);
	--stripe-size: 5.63% 100%;

	/*
	 * 人物イラストはアーチ上端から約17%（アーチ幅比）はみ出す。
	 * .gm が overflow:hidden のため、その逃げを上パディングで確保する。
	 * はみ出し量はアーチ幅に比例するので padding も vw 基準で追従させる。
	 */
	position: relative;
	overflow: hidden;
	padding: clamp(48px, 18vw, 195px) var(--s5) clamp(24px, 3vw, 48px);
	background: #fff;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.9;
}

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

/*
 * :where() で詳細度を 0 にしておく。base.css / common.css が素の要素
 * セレクタで組まれているため、通常の書き方だと後段のクラス指定
 * （.gm-notes など）が打ち消される。
 */
.gm :where(p, ul, dl, dd, figure, h1, h2, h3, h4) {
	margin: 0;
	padding: 0;
}

.gm :where(ul) {
	list-style: none;
}

.gm :focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
}

.gm-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.gm-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==================================================================
   アーチ ─ ページ全体の下地
   ================================================================== */

.gm-arch {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
}

.gm-arch__crown {
	position: relative;
	aspect-ratio: var(--arch-cap-ratio);
}

.gm-arch__cap {
	position: absolute;
	inset: 0;
	background-image: var(--stripes);
	background-size: var(--stripe-size);
	clip-path: url(#gmArchCap);
}

/* hero-figures.svg は viewBox 0 0 617.96 288.6。アーチ幅に対し
   横幅は約101%、左に約0.6%はみ出す位置がチラシの構図と一致する。 */
.gm-arch__figures {
	position: absolute;
	left: -0.6%;
	bottom: 29%;
	width: 101%;
	height: auto;
}

/*
 * 半楕円は左右端で全幅に開くので、帯をそのまま接げば継ぎ目は出ない。
 * 端数丸めの筋だけ 1px の重なりで潰す。
 *
 * position/z-index：crown は位置指定要素なので、何もしないと cap の
 * ストライプが静的な body の内容（ドーム内に引き上げたタイトル）を覆う。
 * flow-root：これが無いとタイトルの負マージンが親に伝播（マージン相殺）し、
 * 帯の矩形がドームより上にせり出して左右に段差が出る。
 */
.gm-arch__body {
	position: relative;
	z-index: 1;
	display: flow-root;
	margin-top: -1px;
	padding: 0 clamp(var(--s4), 5.5%, 64px) clamp(var(--s5), 3vw, 40px);
	background-image: var(--stripes);
	background-size: var(--stripe-size);
}

.gm-arch__tail {
	position: relative;
	margin-top: -1px;
	/* 上端より浅い楕円。左右端の接線は垂直のままなので
	   直線部分との継ぎ目は角張らない。
	   シルエットが裾より下まで立つので、ここは浅めで足りる。 */
	aspect-ratio: 3.4;
	background-image: var(--stripes);
	background-size: var(--stripe-size);
	clip-path: url(#gmArchFoot);
}

/* ==================================================================
   共通パーツ
   ================================================================== */

/* ストライプの上に置く白いカード */
.gm-card {
	padding: clamp(var(--s5), 3.5vw, var(--s7));
	border-radius: var(--r-l);
	background: #fff;
}

.gm-arch__body > * + * {
	margin-top: clamp(var(--s5), 3.5vw, var(--s7));
}

.gm-heading {
	margin-bottom: var(--s5);
	color: var(--pink);
	font-family: var(--font-display);
	font-size: clamp(23px, 3.2vw, 32px);
	font-weight: 900;
	letter-spacing: .08em;
	line-height: 1.3;
	text-align: center;
	text-wrap: balance;
}

.gm-heading::after {
	display: block;
	width: min(220px, 50%);
	margin: var(--s3) auto 0;
	border-top: 3px dashed var(--stripe-b);
	content: "";
}

.gm-tag {
	display: inline-block;
	padding: 3px var(--s3) 4px;
	border-radius: var(--r-s);
	background: var(--pink);
	color: #fff;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.5;
	white-space: nowrap;
}

/* ==================================================================
   ① タイトル ／ ② 挨拶文
   ================================================================== */

.gm-hero {
	padding-top: 0;
	text-align: center;
}

.gm-hero__title {
	margin-top: -27%;
}

.gm-hero__title img {
	display: block;
	width: clamp(280px, 58%, 620px);
	height: auto;
	margin: 0 auto;
}

.gm-hero__when {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-top: var(--s5);
	padding: var(--s2) var(--s5);
	border-radius: var(--r-pill);
	background: #fff;
	color: var(--pink);
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1;
}

.gm-hero__when-date {
	padding-bottom: 2px;
	font-size: clamp(18px, 2.3vw, 26px);
	font-weight: 900;
	letter-spacing: .02em;
}

.gm-hero__when-date i {
	margin: 0 1px;
	font-style: normal;
}

.gm-hero__when-day {
	display: grid;
	place-items: center;
	width: 1.6em;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--pink);
	color: #fff;
	font-size: clamp(12px, 1.4vw, 15px);
}

.gm-hero__when-time {
	color: var(--ink);
	font-size: clamp(16px, 1.9vw, 19px);
}

.gm-hero__card {
	max-width: 720px;
	margin: clamp(var(--s5), 3.5vw, var(--s7)) auto 0;
	text-align: left;
}

.gm-hero__card p {
	font-size: clamp(15px, 1.7vw, 17px);
	line-height: 2;
}

.gm-hero__card p + p {
	margin-top: 1em;
}

.gm-hero__signature {
	margin-top: var(--s5);
	font-weight: 500;
	text-align: right;
}

.gm-hero__signature small {
	font-size: 13px;
	font-weight: 400;
}

/* ==================================================================
   ③ 特別講演 ─ ページの目玉
   まず「誰が」を見せる。左に写真と氏名、右に講演内容をまとめる。
   ================================================================== */

.gm-lecture__grid {
	display: grid;
	grid-template-columns: minmax(220px, 300px) 1fr;
	gap: clamp(var(--s5), 4vw, var(--s7));
	align-items: center;
}

.gm-lecture__photo {
	overflow: hidden;
	border-radius: 50%;
	background: #fff;
	box-shadow: 10px 10px 0 var(--stripe-b);
}

.gm-lecture__photo img {
	display: block;
	width: 100%;
	height: auto;
}

.gm-lecture__profile figcaption {
	text-align: center;
}

/* チラシと同じく、氏名は白箱＋黄色のオフセット影 */
.gm-lecture__name {
	position: relative;
	display: inline-block;
	/* 写真の下端に食い込ませる（em なので文字サイズに追従） */
	margin-top: -1.05em;
	padding: var(--s2) var(--s5);
	border: 2px solid var(--pink);
	border-radius: var(--r-s);
	background: #fff;
	box-shadow: 5px 5px 0 var(--stripe-b);
	color: var(--pink);
	font-family: var(--font-display);
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 900;
	letter-spacing: .08em;
	line-height: 1.4;
}

.gm-lecture__name small {
	margin-left: 2px;
	font-size: .55em;
}

.gm-lecture__role {
	display: block;
	margin-top: var(--s4);
	color: var(--ink-soft);
	font-size: 13px;
	line-height: 1.7;
}

/* 講演タイトルは画像文字。2点を同じ倍率で縦に積む
   （150.58 / 198.66 = 0.758 が同スケールでの横幅比） */
.gm-lecture__headline-a {
	display: block;
	width: 75.8%;
	max-width: 380px;
	height: auto;
}

.gm-lecture__headline-b {
	display: block;
	width: 100%;
	max-width: 500px;
	height: auto;
	margin-top: var(--s3);
}

.gm-lecture__summary {
	margin-top: clamp(var(--s5), 3vw, var(--s6));
	font-size: clamp(16px, 1.9vw, 19px);
	font-weight: 500;
	line-height: 2;
}

/* --- 経歴アコーディオン --- */

.gm-career {
	margin-top: var(--s5);
	border: 2px solid var(--stripe-b);
	border-radius: var(--r-m);
	background: var(--tint);
}

.gm-career__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	padding: var(--s3) var(--s5);
	color: var(--pink);
	cursor: pointer;
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .06em;
	list-style: none;
}

.gm-career__toggle::-webkit-details-marker {
	display: none;
}

.gm-career__toggle:hover .gm-career__label {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gm-career__icon {
	position: relative;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--pink);
}

.gm-career__icon::before,
.gm-career__icon::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	content: "";
	transform: translate(-50%, -50%);
	transition: transform .2s ease;
}

.gm-career__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.gm-career[open] .gm-career__icon::after {
	transform: translate(-50%, -50%) rotate(180deg);
}

/* 閉じアニメーション中は [open] のままなので、アイコンだけ先に戻す
   （詳細度は [open] 側と同値。後に置いて上書きしている） */
.gm-career.is-collapsing .gm-career__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.gm-career__list {
	padding: 0 var(--s5) var(--s5);
}

.gm-career__list > div {
	display: grid;
	grid-template-columns: 68px 1fr;
	gap: var(--s3);
	padding: var(--s3) 0;
	border-top: 1px solid var(--rule);
}

.gm-career__list dt {
	color: var(--pink);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.8;
}

.gm-career__list dd {
	font-size: 14px;
	line-height: 1.8;
}

/* ==================================================================
   ④ 開催概要
   1行1項目の縦並び。上から順に読み下せる形にしている。
   ================================================================== */

/* 公演日時：日付画像と時刻をひとつの行にまとめる。
   値が2段になるので、ラベルは値全体の中央からわずかに上へ寄せる。
   親の `.gm-facts__list > div`（クラス＋型）に詳細度で負けるため、
   セレクタを子結合子付きのクラス2つにして上書きする。 */
.gm-facts__list > .gm-facts__when {
	align-items: center;
}

.gm-facts__when dt {
	position: relative;
	top: -1em;
}

.gm-facts__when img {
	display: block;
	width: min(100%, 220px);
	height: auto;
	margin-bottom: var(--s2);
}

.gm-facts__time {
	display: block;
}

.gm-facts__time small {
	margin-left: 2px;
}

.gm-facts__list {
	max-width: 640px;
	margin: 0 auto;
}

.gm-facts__list > div {
	display: grid;
	grid-template-columns: 108px minmax(0, 1fr);
	gap: var(--s4);
	align-items: baseline;
	padding: var(--s3) 0;
	border-top: 1px solid var(--rule);
}

.gm-facts__list > div:first-of-type {
	border-top: 0;
}

.gm-facts__list dt {
	padding: 4px 0 5px;
	border-radius: var(--r-pill);
	background: var(--mint);
	color: #fff;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.5;
	text-align: center;
}

.gm-facts__list > div:last-of-type dt {
	background: var(--pink);
}

.gm-facts__list dd {
	font-size: clamp(18px, 2vw, 20px);
	font-weight: 500;
	line-height: 1.6;
	/* 「大阪成蹊学園蹊友会 会員」が語中で折れて一文字だけ残るのを防ぐ */
	word-break: keep-all;
}

.gm-facts__list dd small {
	/* margin-left: var(--s3); */
	/* color: var(--ink-soft); */
	/* 受付時間は開催時間と同じ大きさで揃える */
	font-size: inherit;
	/* font-weight: 400; */
}

.gm-facts__list > div:last-of-type dd {
	/* 色はピンクに統一（曜日だけ赤くしない）。書体は他項目と揃える */
	color: var(--pink);
}

/* ==================================================================
   ⑤ 会場（今年度から変更のため独立ブロックで強調）
   ================================================================== */

.gm-venue {
	padding: clamp(var(--s5), 3.5vw, var(--s7));
	border: 3px solid var(--pink);
	border-radius: var(--r-l);
	background: #fff;
	text-align: center;
}

.gm-venue__label {
	display: inline-block;
	padding: 3px var(--s4) 4px;
	border-radius: var(--r-pill);
	background: var(--pink);
	color: #fff;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.5;
}

.gm-venue__name {
	margin-top: var(--s3);
	color: var(--pink);
	font-family: var(--font-display);
	font-size: clamp(23px, 3.4vw, 38px);
	font-weight: 900;
	letter-spacing: .02em;
	line-height: 1.3;
	text-wrap: balance;
}

.gm-venue__address {
	margin-top: var(--s2);
	font-size: clamp(15px, 1.7vw, 17px);
	line-height: 1.7;
}

/*
 * venue-map.svg は地図の実データが viewBox の縦 14.4%〜63.4% にあり、
 * 上下に空白を抱えている。枠で切り抜いて実データだけを見せる。
 * 書き出された SVG は viewBox のみで width/height を持たず intrinsic size が
 * 0 になるため object-fit では切れない。overflow:hidden ＋ 負マージンで処理する。
 * （％マージンは親の「幅」基準。画像高さ＝幅×231.9/248.75＝0.9323倍）
 * ※ 次回書き出し時にアートボードを実データに合わせれば、この指定は不要。
 */
/* SVG 自体が角丸のカード枠を持っているので、CSS 側では枠を足さない
   （足すと二重枠になり、切り抜き位置とも合わず中途半端に見える） */
.gm-venue__map {
	position: relative;
	margin-top: var(--s5);
	aspect-ratio: 2.05;
	overflow: hidden;
}

.gm-venue__map img {
	display: block;
	width: 100%;
	height: auto;
	margin-top: -12%;
}

.gm-venue__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s2) var(--s6);
	margin-top: var(--s4);
}

.gm-venue__links a {
	color: var(--pink);
	font-size: 16px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gm-venue__links a:hover {
	text-decoration-thickness: 2px;
}

/* ==================================================================
   ⑥ 注意事項
   ================================================================== */

.gm-notes {
	max-width: 800px;
	margin: 0 auto;
}

.gm-notes li {
	position: relative;
	padding: 0 0 var(--s3) var(--s5);
	font-size: clamp(15px, 1.7vw, 17px);
	line-height: 1.8;
}

.gm-notes li + li {
	padding-top: var(--s3);
	border-top: 1px solid var(--rule);
}

.gm-notes li::before {
	position: absolute;
	top: .68em;
	left: 0;
	width: 10px;
	height: 10px;
	border: 3px solid var(--mint);
	border-radius: 50%;
	content: "";
}

.gm-notes li + li::before {
	top: calc(.68em + var(--s3));
}

/* ==================================================================
   ⑦ お申し込み
   ================================================================== */

.gm-apply {
	text-align: center;
}

/* ボタンと同じピル形だと見分けがつかないので、チラシの「お楽しみに」と
   同じ逆ハの字のあしらいにする */
.gm-apply__deadline {
	display: flex;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	align-items: center;
	gap: var(--s4);
	color: var(--pink);
	font-family: var(--font-display);
	font-size: clamp(16px, 2vw, 20px);
	font-weight: 700;
	line-height: 1.5;
}

.gm-apply__deadline::before,
.gm-apply__deadline::after {
	flex: none;
	width: 2px;
	height: 1.5em;
	border-radius: 2px;
	background: currentColor;
	content: "";
}

.gm-apply__deadline::before {
	transform: rotate(-20deg);
}

.gm-apply__deadline::after {
	transform: rotate(20deg);
}

.gm-apply__button {
	position: relative;
	display: inline-block;
	min-width: min(460px, 100%);
	margin-top: var(--s4);
	padding: var(--s5) var(--s8);
	border-radius: var(--r-pill);
	background: var(--pink);
	color: #fff !important;
	font-family: var(--font-display);
	font-size: clamp(19px, 2.4vw, 24px);
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.4;
	text-decoration: none;
	box-shadow: 6px 6px 0 #fff;
	transition: transform .18s ease, box-shadow .18s ease;
}

.gm-apply__button::after {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-left: var(--s3);
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: "";
	transform: translateY(-2px) rotate(45deg);
}

.gm-apply__button:hover {
	transform: translate(3px, 3px);
	box-shadow: 3px 3px 0 #fff;
}

.gm-apply__note {
	margin-top: var(--s3);
	color: var(--ink-soft);
	font-size: 14px;
}

/* ==================================================================
   サプライズゲスト ─ ページ下端で中央寄りに立たせる
   左にシルエット、右に吹き出し。吹き出しは surprise-bubble.svg の
   図形だけを 180°回転してあるので、尻尾と輪郭の切れ目が左上に来て
   シルエットを指す（文字は正立のまま、傾きの向きも保たれる）。
   ① シルエットが下からせり上がり、少し遅れて ② 吹き出しが弾んで出る。
   ================================================================== */

.gm-surprise {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/* gap: clamp(2px, 1vw, 18px); */
}

.gm-surprise__people,
.gm-surprise__balloon {
	/* 少し行き過ぎてから戻る＝コミカルな「ヒョコッ」 */
	transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
}

/* ① シルエット */
.gm-surprise__people {
	width: clamp(200px, 29vw, 360px);
	height: auto;
	transform: translateY(105%);
}

.gm-surprise.is-in .gm-surprise__people {
	transform: translateY(0);
}

/* ② 吹き出し（シルエットに少し遅れて） */
.gm-surprise__balloon {
	position: absolute;
	top: 0;
	left: 50%;
	opacity: 0;
	transform: scale(.4) rotate(15deg) translate(50%, 10px);
	transform-origin: 12% 30%;
	transition-delay: .38s;
}

.gm-surprise.is-in .gm-surprise__balloon {
	opacity: 1;
	transform: scale(1) rotate(15deg) translate(50%, 10px);
	transform-origin: 100% 100%;
}

.gm-surprise__bubble {
	display: block;
	width: clamp(145px, 24vw, 245px);
	height: auto;
}

/* 「お楽しみに」は吹き出しの上、尻尾と反対の右寄りに置く */
.gm-surprise__label {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -110%);
	width: 60%;
	height: auto;
}

/* ==================================================================
   常時表示のお申し込み導線
   1440px 以上は画面右端からせり出す縦型、それ未満は画面下部のバー。
   （1440px 未満だと本文カラム 1100px と重なるため）

   表示・非表示は visibility ＋ transform で行う。display:none だと
   アニメーションできず、opacity だけだと隠れている間もリンクを
   フォーカスできてしまうため。
   ================================================================== */

.gm-sticky {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(var(--s4), 3vw, var(--s6));
	padding: var(--s3) var(--s4);
	border-top: 3px solid var(--pink);
	background: #fff;
	box-shadow: 0 -6px 20px rgba(124, 43, 91, .14);
	visibility: hidden;
	opacity: 0;
	transform: translateY(110%);
	transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .25s ease, visibility 0s linear .4s;
}

.gm-sticky.is-shown {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .25s ease, visibility 0s;
}

.gm-sticky__deadline {
	display: flex;
	align-items: center;
	gap: var(--s3);
	color: var(--pink);
	font-family: var(--font-display);
	line-height: 1;
	white-space: nowrap;
}

.gm-sticky__label {
	padding: 4px var(--s3) 5px;
	border-radius: var(--r-s);
	background: var(--pink);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
}

.gm-sticky__date {
	font-size: 30px;
	font-weight: 900;
	letter-spacing: .02em;
}

.gm-sticky__date i {
	margin: 0 1px;
	font-style: normal;
}

.gm-sticky__button {
	flex: 0 1 320px;
	padding: var(--s4) var(--s5);
	border-radius: var(--r-pill);
	background: var(--pink);
	color: #fff !important;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .04em;
	text-align: center;
	text-decoration: none;
	box-shadow: 3px 3px 0 var(--stripe-b);
}

@media screen and (min-width: 1440px) {
	/* 画面右端に貼り付き、右からせり出す */
	.gm-sticky {
		top: 50%;
		right: 0;
		bottom: auto;
		left: auto;
		flex-direction: column;
		gap: var(--s4);
		width: 164px;
		padding: var(--s5) var(--s4);
		border: 3px solid var(--pink);
		border-right: 0;
		border-radius: var(--r-l) 0 0 var(--r-l);
		box-shadow: -6px 0 24px rgba(124, 43, 91, .16);
		transform: translate(110%, -50%);
	}

	.gm-sticky.is-shown {
		transform: translate(0, -50%);
	}

	.gm-sticky__deadline {
		flex-direction: column;
		gap: var(--s2);
	}

	.gm-sticky__date {
		font-size: 36px;
	}

	.gm-sticky__button {
		width: 100%;
		flex: none;
		padding: var(--s3) var(--s2);
		font-size: 16px;
		white-space: nowrap;
	}
}

/*
 * 下部バー表示時、フッター末尾が隠れないよう逃がす。
 * body に padding を足すと帯が地の色（透過）で抜けるため、
 * フッターの外枠側に余白と同色の背景を持たせて延長する。
 */
@media screen and (max-width: 1439px) {
	.gm-page #inc-footer {
		padding-bottom: 82px;
		background-color: #ddccde;
	}
}

/*
 * シルエットの足元をフッターに接させる。
 * 共通フッターは自身の margin-top のほか、内側の .wrapper が持つ 45px が
 * margin collapsing で外へ突き抜けて隙間を作るため、flow-root で閉じ込める
 * （余白はフッターの内側に残るので、詰まって見えることはない）。
 */
.gm-page #inc-footer footer {
	display: flow-root;
	margin-top: 0;
}

/* ==================================================================
   レスポンシブ
   ================================================================== */

@media screen and (max-width: 900px) {
	.gm-lecture__grid {
		grid-template-columns: 230px 1fr;
		gap: var(--s5);
	}
}

@media screen and (max-width: 767px) {
	.gm {
		padding-right: var(--s4);
		padding-left: var(--s4);
	}

	/* ドームは上ほど幅が狭い。320px 幅でもタイトルが収まる範囲で
	   目一杯まで引き上げ、イラストとの空きを詰める。 */
	.gm-hero__title {
		margin-top: -27%;
	}

	.gm-hero__title img {
		width: min(88%, 380px);
	}

	.gm-hero__when {
		flex-wrap: wrap;
		justify-content: center;
		padding: var(--s3) var(--s4);
	}

	.gm-hero__when-time {
		padding-left: 0;
		border-left: 0;
	}

	.gm-card {
		padding: var(--s5) var(--s4);
		border-radius: var(--r-m);
	}

	.gm-hero__signature {
		text-align: left;
	}

	.gm-lecture__grid {
		grid-template-columns: 1fr;
	}

	.gm-lecture__profile {
		max-width: 250px;
		margin: 0 auto;
	}

	.gm-lecture__photo {
		box-shadow: 6px 6px 0 var(--stripe-b);
	}

	.gm-lecture__headline-a,
	.gm-lecture__headline-b {
		margin-right: auto;
		margin-left: auto;
	}

	.gm-career__toggle {
		padding: var(--s3) var(--s4);
		font-size: 15px;
	}

	.gm-career__list {
		padding: 0 var(--s4) var(--s4);
	}

	.gm-career__list > div {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.gm-facts__list > div {
		grid-template-columns: 92px minmax(0, 1fr);
		gap: var(--s3);
	}

	.gm-facts__list dd {
		font-size: 18px;
	}

	.gm-venue {
		padding: var(--s5) var(--s4);
		border-radius: var(--r-m);
	}

	.gm-apply__deadline {
		flex-wrap: wrap;
		justify-content: center;
		max-width: 100%;
	}

	.gm-apply__button {
		width: 100%;
		min-width: 0;
		padding: var(--s5) var(--s4);
	}

	.gm-arch__tail {
		aspect-ratio: 1.9;
	}

	/* 端末が狭いと左右いっぱいまで詰まるので、少し小さくして余白を残す */
	.gm-surprise__people {
		width: clamp(200px, 40vw, 360px);
	}

	.gm-surprise__bubble {
		width: clamp(140px, 38vw, 180px);
	}

	.gm-surprise__balloon {
		margin-bottom: var(--s5);
		margin-left: -6vw;
	}

	.gm-surprise__label {
		width: 54%;
	}

	.gm-sticky {
		gap: var(--s4);
		padding: var(--s3);
	}

	.gm-sticky__label {
		font-size: 12px;
	}

	.gm-sticky__date {
		font-size: 24px;
	}

	.gm-sticky__button {
		flex: 1;
		padding: var(--s3) var(--s4);
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gm *,
	.gm *::before,
	.gm *::after {
		transition: none !important;
		animation: none !important;
	}

	/* 動きを止める設定でも内容が隠れたままにならないようにする */
	.gm-surprise__people,
	.gm-surprise__balloon {
		opacity: 1;
		transform: none;
	}
}

/* ==================================================================
   印刷
   ================================================================== */

@media print {
	.gm-page #inc-footer {
		padding-bottom: 0;
	}

	.gm {
		padding-top: var(--s5);
	}

	.gm-sticky {
		display: none;
	}

	.gm-surprise__people,
	.gm-surprise__balloon {
		opacity: 1;
		transform: none;
	}

	.gm-lecture,
	.gm-facts,
	.gm-venue,
	.gm-apply {
		break-inside: avoid;
	}

	/* 印刷時は経歴を開いた状態で出す */
	.gm-career__list {
		display: block !important;
	}

	.gm-career__toggle {
		display: none;
	}

	.gm-apply__button {
		box-shadow: none;
	}
}