@charset "utf-8";

/* closing notice（公開終了のお知らせのポップアップ）
	@php part/closing_notice.php
	@js  closing_notice.js
	見た目は about の枠（about_frame.svg の角の水色）・.btn・.modal_wrap に合わせている
	動きはグリッチが基本。サイトの blinkOpacity（style.css）と mask-bg（水色の帯で文字を出す）も使う
	光の点滅は 1 秒に 3 回までにしている（画面全体を明るく光らせない）。動きを減らす設定の人には動かさない
===============================
*/

.closingNotice{
	--cnBlue: #37BEF0;
	--cnFrame: #62BBEB;
	--cnMagenta: #F0379B;
	--cnStart: .15s; /* 箱が出始める時間 */

	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10010;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	background-color: rgba(12, 13, 96, .85);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

	.closingNotice.is-open{
		display: flex;
		animation: cnBackdropIn .6s linear both;
	}

	.closingNotice.is-closing{
		animation: cnBackdropFade .65s ease-in both;
	}

/* 開いている間は後ろのページを動かさない */
html.is-closingNoticeOpen,
html.is-closingNoticeOpen body{
	overflow: hidden !important;
}


/* 箱
===============================
*/

.closingNotice_box{
	position: relative;
	width: 100%;
	max-width: 760px;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	background-color: rgba(15, 15, 15, .6);
	border-radius: 6px;
	outline: none;
}

	/* 横線から開き、ずれ・色のにじみ・切れを伴って落ち着く */
	.closingNotice.is-open .closingNotice_box{
		animation: cnBoxIn .8s steps(1, end) var(--cnStart) both;
	}

	/* 閉じる時は、右下の NOTICE ボタンへ縮みながら移る（最小化）。行き先は js が --cnMinX などで渡す */
	.closingNotice.is-closing .closingNotice_box{
		--cnMinX: 0px;
		--cnMinY: 0px;
		--cnMinSX: .2;
		--cnMinSY: .1;
		animation: cnBoxMinimize .65s linear both;
	}


/* 角だけの水色の枠（about_frame.svg と同じ形）。外側から寄ってきて、その後は時々点滅する */
.closingNotice_corner{
	--dx: 0px;
	--dy: 0px;
	position: absolute;
	z-index: 2;
	width: 36px;
	height: 36px;
	border: 4px solid var(--cnFrame);
	pointer-events: none;
}
	.closingNotice_corner--tl{ --dx: -14px; --dy: -14px; top: 0; left: 0; border-right: none; border-bottom: none; border-top-left-radius: 14px; }
	.closingNotice_corner--tr{ --dx: 14px; --dy: -14px; top: 0; right: 0; border-left: none; border-bottom: none; border-top-right-radius: 14px; }
	.closingNotice_corner--bl{ --dx: -14px; --dy: 14px; bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: 14px; }
	.closingNotice_corner--br{ --dx: 14px; --dy: 14px; bottom: 0; right: 0; border-left: none; border-top: none; border-bottom-right-radius: 14px; }

	.closingNotice.is-open .closingNotice_corner{
		animation:
			cnCornerIn .7s steps(1, end) calc(var(--cnStart) + .45s) both,
			blinkOpacity 3.2s linear calc(var(--cnStart) + 1.6s) infinite;
	}
	.closingNotice.is-open .closingNotice_corner--tr{ animation-delay: calc(var(--cnStart) + .52s), calc(var(--cnStart) + 2.1s); }
	.closingNotice.is-open .closingNotice_corner--bl{ animation-delay: calc(var(--cnStart) + .58s), calc(var(--cnStart) + 2.6s); }
	.closingNotice.is-open .closingNotice_corner--br{ animation-delay: calc(var(--cnStart) + .64s), calc(var(--cnStart) + 1.9s); }


/* 走査線（細い横線と、上から下へ流れる水色の光） */
.closingNotice_scan{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	border-radius: 6px;
	pointer-events: none;
	overflow: hidden;
	background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px);
}
	.closingNotice_scan::after{
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: linear-gradient(to bottom, transparent 0, rgba(55, 190, 240, .09) 50%, transparent 100%) no-repeat;
		background-size: 100% 140px;
		animation: cnScan 5.5s linear calc(var(--cnStart) + 1s) infinite both;
	}


/* 閉じる（右上の×）。マウスを乗せるとグリッチ */
.closingNotice_x{
	position: absolute;
	top: 14px;
	right: 14px;
	width: 44px;
	height: 44px;
	z-index: 3;
	cursor: pointer;
	/* 本文をスクロールした時に、文字と重ならないように */
	background-color: rgba(15, 15, 15, .7);
	border-radius: 50%;
}
	.closingNotice_x::before,
	.closingNotice_x::after{
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 26px;
		height: 2px;
		background-color: #FFF;
		transition: background-color .3s;
	}
	.closingNotice_x::before{ transform: translate(-50%, -50%) rotate(45deg); }
	.closingNotice_x::after{ transform: translate(-50%, -50%) rotate(-45deg); }
	.closingNotice_x:hover::before,
	.closingNotice_x:hover::after,
	.closingNotice_x:focus-visible::before,
	.closingNotice_x:focus-visible::after{
		background-color: var(--cnBlue);
	}
	.closingNotice_x:hover,
	.closingNotice_x:focus-visible{
		animation: cnJitter .35s steps(1, end) both;
	}

	.closingNotice.is-open .closingNotice_x{
		animation: cnFlickerIn .5s steps(1, end) calc(var(--cnStart) + .7s) both;
	}
	.closingNotice.is-open .closingNotice_x:hover,
	.closingNotice.is-open .closingNotice_x:focus-visible{
		animation: cnFlickerIn .5s steps(1, end) calc(var(--cnStart) + .7s) both, cnJitter .35s steps(1, end) both;
	}


/* 中身
===============================
*/

.closingNotice_scroll{
	position: relative;
	z-index: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 64px 72px 56px;
}

	/* 開いている間、時々（js で is-glitch を付けた時）中身が軽くずれて色がにじむ */
	.closingNotice_scroll.is-glitch{
		animation: cnContentGlitch .28s steps(1, end) both;
	}


/* 見出し: 開いた時に強いグリッチ、その後も数秒ごとに短いグリッチ */
.closingNotice_ttl{
	font-size: 22px;
	font-weight: 500;
	line-height: 1.6;
	text-align: center;
}
	/* about の帯と同じ水色の線。点滅しながら伸びる */
	.closingNotice_ttl::after{
		content: "";
		display: block;
		width: 48px;
		height: 3px;
		margin: 1.25rem auto 0;
		background-color: var(--cnBlue);
		transform-origin: left center;
	}
	.closingNotice.is-open .closingNotice_ttl::after{
		animation: cnLineIn .6s steps(1, end) calc(var(--cnStart) + .75s) both;
	}

.closingNotice_glitch{
	position: relative;
	display: inline-block;
}
	.closingNotice_glitch::before,
	.closingNotice_glitch::after{
		content: attr(data-text);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		pointer-events: none;
	}
	.closingNotice_glitch::before{ color: var(--cnBlue); }
	.closingNotice_glitch::after{ color: var(--cnMagenta); }

	.closingNotice.is-open .closingNotice_glitch{
		animation:
			cnTextIn .7s steps(1, end) calc(var(--cnStart) + .35s) both,
			cnJitterIdle 4.6s steps(1, end) calc(var(--cnStart) + 2.2s) infinite;
	}
	.closingNotice.is-open .closingNotice_glitch::before{
		animation:
			cnSliceA .7s steps(1, end) calc(var(--cnStart) + .35s) both,
			cnSliceAIdle 4.6s steps(1, end) calc(var(--cnStart) + 2.2s) infinite;
	}
	.closingNotice.is-open .closingNotice_glitch::after{
		animation:
			cnSliceB .7s steps(1, end) calc(var(--cnStart) + .35s) both,
			cnSliceBIdle 4.6s steps(1, end) calc(var(--cnStart) + 2.2s) infinite;
	}


/* 本文: サイトの mask-bg と同じく、水色の帯が横切った所から文字が出る（段落ごとに少しずつ遅らせる） */
.closingNotice_body{
	margin-top: 2rem;
	font-size: 15px;
	font-weight: 300;
	line-height: 2;
}
	.closingNotice_body p + p{
		margin-top: 1.25em;
	}

.closingNotice_reveal{
	--i: 0;
	position: relative;
}
	.closingNotice_reveal::after{
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #3CADE4;
		transform: scaleX(0);
		transform-origin: left center;
		pointer-events: none;
	}
	.closingNotice.is-open .closingNotice_reveal::after{
		animation: cnWipe .75s cubic-bezier(.8, 0, .17, 1) calc(var(--cnStart) + .85s + .12s * var(--i)) both;
	}
	.closingNotice.is-open .closingNotice_revealTxt{
		animation: cnRevealTxt .75s steps(1, end) calc(var(--cnStart) + .85s + .12s * var(--i)) both;
	}

/* 公開終了の日時: 水色。数秒ごとに色がにじんでずれる */
.closingNotice_em{
	position: relative;
	display: inline-block;
	font-weight: 500;
	color: var(--cnBlue);
}
	.closingNotice_em::before,
	.closingNotice_em::after{
		content: attr(data-text);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		pointer-events: none;
	}
	.closingNotice_em::before{ color: #FFF; }
	.closingNotice_em::after{ color: var(--cnMagenta); }
	.closingNotice.is-open .closingNotice_em::before{
		animation: cnSliceAIdle 3.4s steps(1, end) calc(var(--cnStart) + 2.6s) infinite;
	}
	.closingNotice.is-open .closingNotice_em::after{
		animation: cnSliceBIdle 3.4s steps(1, end) calc(var(--cnStart) + 2.6s) infinite;
	}


/* 会社名: 点滅しながら1つずつ出る */
.closingNotice_sign{
	margin-top: 2rem;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.9;
	text-align: right;
}
	.closingNotice_sign li{
		--i: 0;
	}
	.closingNotice.is-open .closingNotice_sign li{
		animation: cnFlickerIn .5s steps(1, end) calc(var(--cnStart) + 1.5s + .12s * var(--i)) both;
	}


/* CLOSE: マウスを乗せるとグリッチ */
.closingNotice_foot{
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

.closingNotice_btn{
	width: 200px;
	font-size: 18px;
	font-weight: 300;
	letter-spacing: .1em;
}
	.closingNotice_btn::before,
	.closingNotice_btn::after{
		content: attr(data-text);
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		border-radius: inherit;
		background-color: var(--cnBlue);
		opacity: 0;
		pointer-events: none;
	}
	.closingNotice_btn::before{ color: #0C0D60; }
	.closingNotice_btn::after{ color: var(--cnMagenta); }

	.closingNotice.is-open .closingNotice_btn{
		animation: cnFlickerIn .5s steps(1, end) calc(var(--cnStart) + 1.7s) both;
	}
	.closingNotice.is-open .closingNotice_btn:hover,
	.closingNotice.is-open .closingNotice_btn:focus-visible{
		animation: cnFlickerIn .5s steps(1, end) calc(var(--cnStart) + 1.7s) both, cnJitter .4s steps(1, end) both;
	}
	.closingNotice_btn:hover::before,
	.closingNotice_btn:focus-visible::before{
		animation: cnSliceA .4s steps(1, end) both;
	}
	.closingNotice_btn:hover::after,
	.closingNotice_btn:focus-visible::after{
		animation: cnSliceB .4s steps(1, end) both;
	}


/* もう一度開くボタン（右下）
	ポップアップが開いている間（.closingNotice.is-open）は隠し、閉じると点滅しながら出る。
	スマホのメニュー（.Gnavi・z-index 100）より下、ページの中身より上に置く
===============================
*/

.closingNoticeOpen{
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 18px 28px 18px 24px;
	color: #FFF;
	text-align: left;
	background-color: rgba(15, 15, 15, .75);
	border-radius: 6px;
	cursor: pointer;
	animation:
		cnFlickerIn .5s steps(1, end) .1s both,
		cnOpenIn .5s steps(1, end) .1s both;
}

	.closingNotice.is-open ~ .closingNoticeOpen{
		display: none;
	}

	/* 角の枠（左上と右下だけ） */
	.closingNoticeOpen::before,
	.closingNoticeOpen::after{
		content: "";
		position: absolute;
		width: 18px;
		height: 18px;
		border: 2px solid var(--cnFrame, #62BBEB);
		pointer-events: none;
		transition: width .3s, height .3s;
	}
	.closingNoticeOpen::before{ top: 0; left: 0; border-right: none; border-bottom: none; border-top-left-radius: 6px; }
	.closingNoticeOpen::after{ right: 0; bottom: 0; border-left: none; border-top: none; border-bottom-right-radius: 6px; }

	.closingNoticeOpen:hover::before,
	.closingNoticeOpen:hover::after,
	.closingNoticeOpen:focus-visible::before,
	.closingNoticeOpen:focus-visible::after{
		width: 100%;
		height: 100%;
	}

	.closingNoticeOpen:hover,
	.closingNoticeOpen:focus-visible{
		animation:
			cnFlickerIn .5s steps(1, end) .1s both,
			cnOpenIn .5s steps(1, end) .1s both,
			cnJitter .4s steps(1, end) both;
	}

	.closingNoticeOpen:focus-visible{
		outline: 2px solid #37BEF0;
		outline-offset: 3px;
	}

.closingNoticeOpen_en{
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: .2em;
	color: #37BEF0;
}

/* 状態を知らせる点（サイトの blinkOpacity で点滅） */
.closingNoticeOpen_dot{
	width: 7px;
	height: 7px;
	background-color: #37BEF0;
	animation: blinkOpacity 2s linear 0s infinite;
}

.closingNoticeOpen_glitch{
	position: relative;
	display: inline-block;
}
	.closingNoticeOpen_glitch::before,
	.closingNoticeOpen_glitch::after{
		content: attr(data-text);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		pointer-events: none;
	}
	.closingNoticeOpen_glitch::before{ color: #FFF; animation: cnSliceAIdle 4.2s steps(1, end) 1.2s infinite; }
	.closingNoticeOpen_glitch::after{ color: #F0379B; animation: cnSliceBIdle 4.2s steps(1, end) 1.2s infinite; }

	.closingNoticeOpen:hover .closingNoticeOpen_glitch::before,
	.closingNoticeOpen:focus-visible .closingNoticeOpen_glitch::before{
		animation: cnSliceA .4s steps(1, end) both;
	}
	.closingNoticeOpen:hover .closingNoticeOpen_glitch::after,
	.closingNoticeOpen:focus-visible .closingNoticeOpen_glitch::after{
		animation: cnSliceB .4s steps(1, end) both;
	}

.closingNoticeOpen_ja{
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .05em;
}


/* keyframes
===============================
steps(1, end) で、次の区切りまで同じ形のまま止めてから跳ぶ（グリッチらしいカクつき）
*/

@keyframes cnBackdropIn{
	0%{ opacity: 0; }
	20%{ opacity: .7; }
	28%{ opacity: .35; }
	50%{ opacity: 1; }
	100%{ opacity: 1; }
}

@keyframes cnBackdropFade{
	0%{ background-color: rgba(12, 13, 96, .85); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
	100%{ background-color: rgba(12, 13, 96, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
}

@keyframes cnBoxIn{
	0%{ opacity: 0; transform: scaleY(.01); clip-path: inset(0 0 0 0); filter: none; box-shadow: none; }
	8%{ opacity: 1; transform: translateX(-14px) scaleY(.01); filter: brightness(2.2); }
	16%{ transform: translateX(10px); clip-path: inset(12% 0 64% 0); filter: none; box-shadow: -5px 0 0 var(--cnMagenta), 5px 0 0 var(--cnBlue); }
	24%{ transform: translate(-7px, 2px); clip-path: inset(58% 0 6% 0); }
	32%{ transform: translate(5px, -2px); clip-path: inset(0 0 0 0); box-shadow: 4px 0 0 var(--cnMagenta), -4px 0 0 var(--cnBlue); }
	40%{ transform: translateX(0); clip-path: inset(30% 0 42% 0); }
	48%{ transform: translateX(-3px); clip-path: inset(0 0 0 0); box-shadow: -2px 0 0 var(--cnMagenta), 2px 0 0 var(--cnBlue); }
	58%{ transform: translateX(2px); clip-path: inset(72% 0 0 0); filter: none; box-shadow: none; }
	66%, 100%{ opacity: 1; transform: none; clip-path: inset(0 0 0 0); filter: none; box-shadow: none; }
}

/* 始めの 3 割は短いグリッチ（カクつき）、その後は滑らかに縮みながら右下へ。最後に薄くなって、ボタンと入れ替わる */
@keyframes cnBoxMinimize{
	0%{ animation-timing-function: steps(1, end); opacity: 1; transform: none; box-shadow: none; }
	10%{ animation-timing-function: steps(1, end); transform: translateX(-7px); box-shadow: -5px 0 0 var(--cnMagenta), 5px 0 0 var(--cnBlue); }
	20%{ animation-timing-function: steps(1, end); transform: translateX(5px); box-shadow: 4px 0 0 var(--cnMagenta), -4px 0 0 var(--cnBlue); }
	28%{ animation-timing-function: cubic-bezier(.55, 0, .25, 1); opacity: 1; transform: none; box-shadow: -2px 0 0 var(--cnMagenta), 2px 0 0 var(--cnBlue); }
	86%{ animation-timing-function: linear; opacity: 1; }
	100%{ opacity: 0; transform: translate(var(--cnMinX), var(--cnMinY)) scale(var(--cnMinSX), var(--cnMinSY)); box-shadow: none; }
}

@keyframes cnCornerIn{
	0%{ opacity: 0; transform: translate(var(--dx), var(--dy)); }
	20%{ opacity: 1; }
	32%{ opacity: 0; transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .5)); }
	48%{ opacity: 1; transform: translate(calc(var(--dx) * .2), calc(var(--dy) * .2)); }
	64%, 100%{ opacity: 1; transform: none; }
}

@keyframes cnFlickerIn{
	0%{ opacity: 0; }
	25%{ opacity: 1; }
	40%{ opacity: .2; }
	60%, 100%{ opacity: 1; }
}

@keyframes cnLineIn{
	0%{ opacity: 0; transform: scaleX(0); }
	20%{ opacity: 1; transform: scaleX(.3); }
	40%{ opacity: .3; transform: scaleX(.6); }
	60%{ opacity: 1; transform: scaleX(1.4); }
	80%, 100%{ opacity: 1; transform: scaleX(1); }
}

@keyframes cnTextIn{
	0%{ opacity: 0; transform: none; }
	14%{ opacity: 1; transform: translateX(-4px) skewX(-12deg); }
	28%{ transform: translateX(3px) skewX(8deg); }
	42%{ transform: translateX(-2px); }
	57%{ opacity: .4; transform: none; }
	71%, 100%{ opacity: 1; transform: none; }
}

@keyframes cnSliceA{
	0%{ opacity: 1; clip-path: inset(0 0 82% 0); transform: translate(-7px, 0); }
	16%{ clip-path: inset(38% 0 42% 0); transform: translate(6px, 0); }
	32%{ clip-path: inset(76% 0 4% 0); transform: translate(-4px, 0); }
	48%{ clip-path: inset(14% 0 62% 0); transform: translate(5px, 0); }
	64%{ clip-path: inset(54% 0 26% 0); transform: translate(-2px, 0); }
	80%, 100%{ opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
}

@keyframes cnSliceB{
	0%{ opacity: 1; clip-path: inset(70% 0 8% 0); transform: translate(6px, 0); }
	16%{ clip-path: inset(6% 0 74% 0); transform: translate(-5px, 0); }
	32%{ clip-path: inset(44% 0 36% 0); transform: translate(4px, 0); }
	48%{ clip-path: inset(84% 0 0 0); transform: translate(-6px, 0); }
	64%{ clip-path: inset(22% 0 58% 0); transform: translate(3px, 0); }
	80%, 100%{ opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
}

/* 開いた後の短いグリッチ（周期のうち最後の 1 割ほどだけ動く） */
@keyframes cnSliceAIdle{
	0%, 89%{ opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
	90%{ opacity: 1; clip-path: inset(10% 0 66% 0); transform: translate(-5px, 0); }
	92%{ clip-path: inset(60% 0 18% 0); transform: translate(4px, 0); }
	94%{ clip-path: inset(30% 0 48% 0); transform: translate(-3px, 0); }
	96%, 100%{ opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
}

@keyframes cnSliceBIdle{
	0%, 89%{ opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
	90%{ opacity: 1; clip-path: inset(64% 0 12% 0); transform: translate(4px, 0); }
	92%{ clip-path: inset(4% 0 78% 0); transform: translate(-4px, 0); }
	94%{ clip-path: inset(46% 0 30% 0); transform: translate(3px, 0); }
	96%, 100%{ opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
}

@keyframes cnJitterIdle{
	0%, 89%{ transform: none; }
	90%{ transform: translateX(2px) skewX(-6deg); }
	92%{ transform: translateX(-2px) skewX(4deg); }
	94%{ transform: translateX(1px); }
	96%, 100%{ transform: none; }
}

@keyframes cnJitter{
	0%{ transform: translate(-2px, 1px); }
	20%{ transform: translate(2px, -1px); }
	40%{ transform: translate(-1px, 0) skewX(-8deg); }
	60%{ transform: translate(1px, 1px); }
	80%, 100%{ transform: none; }
}

@keyframes cnContentGlitch{
	0%{ transform: translateX(-3px); filter: drop-shadow(-2px 0 var(--cnMagenta)) drop-shadow(2px 0 var(--cnBlue)); }
	30%{ transform: translateX(2px); filter: drop-shadow(2px 0 var(--cnMagenta)) drop-shadow(-2px 0 var(--cnBlue)); }
	60%{ transform: translateX(-1px); filter: none; }
	100%{ transform: none; filter: none; }
}

@keyframes cnWipe{
	0%{ transform: scaleX(0); transform-origin: left center; }
	45%{ transform: scaleX(1); transform-origin: left center; }
	55%{ transform: scaleX(1); transform-origin: right center; }
	100%{ transform: scaleX(0); transform-origin: right center; }
}

@keyframes cnRevealTxt{
	0%{ opacity: 0; }
	50%, 100%{ opacity: 1; }
}

@keyframes cnOpenIn{
	0%{ transform: translateX(12px); box-shadow: -3px 0 0 #F0379B, 3px 0 0 #37BEF0; }
	30%{ transform: translateX(-6px); }
	60%{ transform: translateX(2px); box-shadow: 2px 0 0 #F0379B, -2px 0 0 #37BEF0; }
	80%, 100%{ transform: none; box-shadow: none; }
}

@keyframes cnScan{
	0%{ background-position: 0 -140px; }
	100%{ background-position: 0 calc(100% + 140px); }
}


/* sp
===============================
*/

@media screen and (max-width: 768px){

	.closingNotice{
		padding: 24px 16px;
	}

	.closingNotice_corner{
		width: 26px;
		height: 26px;
		border-width: 3px;
	}
		.closingNotice_corner--tl{ border-top-left-radius: 10px; }
		.closingNotice_corner--tr{ border-top-right-radius: 10px; }
		.closingNotice_corner--bl{ border-bottom-left-radius: 10px; }
		.closingNotice_corner--br{ border-bottom-right-radius: 10px; }

	.closingNotice_x{
		top: 6px;
		right: 6px;
	}

	.closingNotice_scroll{
		padding: 52px 24px 36px;
	}

	.closingNotice_ttl{
		font-size: 17px;
	}

	.closingNotice_body{
		margin-top: 1.5rem;
		font-size: 14px;
		line-height: 1.9;
	}

	.closingNotice_sign{
		font-size: 13px;
	}

	.closingNotice_foot{
		margin-top: 2rem;
	}

	.closingNoticeOpen{
		right: 12px;
		bottom: 12px;
		padding: 14px 22px 14px 18px;
	}

	.closingNoticeOpen_en{
		font-size: 14px;
	}

	.closingNoticeOpen_ja{
		font-size: 13px;
	}
}


/* 動きを減らす設定の人には動かさない（最初から全部見えている） */
@media (prefers-reduced-motion: reduce){
	.closingNotice,
	.closingNotice *,
	.closingNotice *::before,
	.closingNotice *::after,
	.closingNoticeOpen,
	.closingNoticeOpen *,
	.closingNoticeOpen::before,
	.closingNoticeOpen::after,
	.closingNoticeOpen *::before,
	.closingNoticeOpen *::after{
		animation: none !important;
		transition: none !important;
	}
}