#terms-pop-area { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; justify-content: center; align-items: center; z-index: 999; }
#terms-pop-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.35; }
#terms-pop-wrap { position: relative; width: 100%; height: 100%; background: #f8fafb; text-align: left; }
#terms-pop-area.on { display: flex; }
#terms-pop-wrap { display: flex; flex-direction: column; }
#terms-pop-header {
	position: relative; width: 100%; border-bottom: 1px solid #e5e5e5;
	padding-top: constant(safe-area-inset-top);
	padding-top: env(safe-area-inset-top);
}
#terms-pop-title { width: 100%; font-size: 14px; line-height: 44px; height: 44px; font-weight: bold; text-align: center; }
#terms-pop-content { width: 100%; padding: 30px 20px; flex-grow: 1; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: none; }
#terms-pop-close { position: absolute; bottom: 0; right: 0; width: 44px; height: 44px; padding: 15px; cursor: pointer; opacity: 0.5; }
#terms-pop-close:hover { opacity: 1; }
#terms-pop-footer {
	display: none; width: 100%; font-size: 14px; line-height: 44px; border-top: 1px solid #e5e5e5; text-align: center;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}


#terms-title { width: 100%; margin-bottom: 30px; display: flex; justify-content: center; }
#terms-title > div { font-size: 14px; line-height: 1; background: #000; color: #fff; padding: 9px 14px; border-radius: 50px; font-weight: bold; }
#terms-sub-title { width: 100%; font-size: 12px; line-height: 16px; background: #eee; border-radius: 10px; padding: 10px 13px; }
.terms { width: 100%; word-break: break-all; }
.terms ol { float: left; width: 100%; box-sizing: border-box; padding: 0 0 0 20px; margin: 5px 0; font-weight: normal; }
.terms ul { float: left; width: 100%; box-sizing: border-box; padding: 0 0 0 20px; margin: 5px 0; font-weight: normal; list-style-type: disc; }
.terms li { float: left; width: 100%; box-sizing: border-box; margin: 0; font-weight: bold; }
.terms p { float: left; box-sizing: border-box; margin: 0; font-weight: normal; }
.terms header { width: 100%; }
.terms main { width: 100%; font-size: 12px; line-height: 16px; font-weight: normal; }
.terms span { font-weight: normal; }
.terms > p { font-size: 12px; line-height: 16px; margin: 5px 0 0; }
.terms > ol { margin-top: 0; }
.terms > ol > li { font-size: 15px; padding-top: 25px; margin-bottom: 20px; border-top: 1px solid #eee; }
.terms > ol > li:first-child { border: none; margin-top: 10px; }
.terms > ol > li > header { line-height: 20px; margin-bottom: 10px; }
.terms > ol > li > p { margin-bottom: 5px; }
.terms main > p { margin-bottom: 5px; }
.terms main li { margin-top: 5px; }
.terms main > ol { margin: 0 0 5px; }
.terms main > ol > li > header { margin-bottom: 2px; }
.terms ul > li { margin: 1px 0; }

#terms-pop-area.update .terms point { color: orange; }


@media screen and (min-width: 431px) {
	#terms-pop-area { padding: 30px; }
	#terms-pop-wrap { width: 100%; height: 100%; max-width: 500px; max-height: 700px; background: #fff; box-shadow: 1px 1px 15px rgba(0,0,0,0.1); border-radius: 20px; overflow: hidden; }
	#terms-pop-close { display: block; }
	#terms-pop-content { padding: 30px; }
}

@media all and (display-mode: standalone) {

	#terms-pop-footer { display: block; }

}



html.dark #terms-pop-back { opacity: 0.65; }
html.dark #terms-pop-wrap { background: #222; }
html.dark #terms-pop-header, html.dark #terms-pop-footer { border-color: #333; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
html.dark #terms-sub-title { background: #333; }
html.dark .terms > ol > li { border-color: #333; }
html.dark #terms-title > div { background: #ddd; color: #111; }

@media screen and (min-width: 431px) {

	html.dark #terms-pop-wrap { box-shadow: 0 0 20px #000; }

}