:root {
	color: #454545;
	font-size: 16px;
	font-family: "Helvetica Neue",
		Arial,
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		Meiryo,
		sans-serif;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}
/* ユーザーが文章を範囲選択できないようにする */
*:not(input[type='text'], textarea) {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */ /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
img { pointer-events: none; }

html { margin:0; padding:0; width:100%; height:100vh; }
@supports (-webkit-touch-callout: none) {
    html {
        height: -webkit-fill-available;
	}
}
body { margin:0; padding:0; width:100%; height:100%; }

input[type='text'],
input[type='email'],
input[type='password'],
select
{
	font-size: 100%;
	padding: 0.5em;
}
.color-primary { background-color: #579f8e; }
.color-secondary { background-color: #e2fff9; }
.color-tertiary { background-color: #454545; }
.w100 { width:100%; }
.top16 { margin-top: 16px !important; }
.center { text-align: center; }
.d-none { display: none !important; }
.button-main {
	display:flex; justify-content: center; align-items: center;
	position: relative;
	width: 80%;
	height: 48px;
	max-width: 240px;
	border-radius: 24px;
	margin: 0 auto;
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .1);
	color: #454545;
	text-decoration: none;
}
.button-main:active {
	box-shadow: none;
}
.button-main:active:after {
	position: absolute;
	display: block;
	top:0; left:0; width:100%; height: 100%;
	content: "";
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 24px;
}
.button-main-positive { background-color: #579f8e; color:white; }
.button-main-negative { background-color: #aaaaaa; color:white; }
.button-main-line { background-color: #06C755; color:white; padding-left:16px; }
.button-main-line::before {
	content: "";
	position: absolute;
	left:8px;
	top: 0;
	background-image: url(/img/line.png);
	background-size: contain;
	vertical-align: middle;
	height: 48px;
	width: 48px;
}

.button-mini {
	display:flex; justify-content: center; align-items: center;
	position: relative;
	padding: 0.5em 2em;
	border:1px solid #454545;
	border-radius: 2em;
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .1);
	color: #454545;
	text-decoration: none;
}
.button-mini:active {
	box-shadow: none;
}
.button-mini:active:after {
	position: absolute;
	display: block;
	top:0; left:0; width:100%; height: 100%;
	content: "";
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 24px;
}

/** フレーム共通 **/
.main { width:100%; height: 100%; position:relative; }
.main .container { 
	position: fixed;
	width:100%; height: 100%;
}
.main .footer { position:fixed; bottom:0; left:0; width:100%; }
.main .container header { 
	position: relative;
	margin:0;
	height: 52px;
	background-color: #579f8e;
	color:white;
	font-size:110%;
	font-weight: normal;
	display:flex; justify-content: center; align-items: center;
}
.main .container article {
	padding: 24px;
}
.main .container article.no-padding {
	padding: 0;
}

.main .container-fix32 article {
	height: calc(100% - (52px + 32px));
	overflow-y: auto;
}
_::-webkit-full-page-media, _:future, .main .container-fix32 article {
	height: calc(100% - (52px + 32px + env(safe-area-inset-bottom)));
}

.main .container-fix32::after {
	content: "© 2023 SPAICE Production Committee";
	position: absolute;
	font-size: 80%;
	bottom: 0; left:0;
	width: 100%;
	height: 32px;
	background-color: #454545;
	color:#ccc;
	display:flex; justify-content: center; align-items: center;
	text-align: center;
}
_::-webkit-full-page-media, _:future, .main .container-fix32::after {
	height: calc(32px + env(safe-area-inset-bottom));
	padding-bottom: env(safe-area-inset-bottom);
}
.main .container-with-footnavi article {
	height: calc(100% - 108px);
	overflow-y: auto;
}
_::-webkit-full-page-media, _:future, .main .container-with-footnavi article {
	height: calc(100% - (108px + env(safe-area-inset-bottom)));
}

/** header-button **/
.header-back-button {
	position:absolute;
	top:8px; left:8px;
	width:36px; height:36px;
}
.header-back-button::after {
	content: "";
	display: inline-block;
	width: 36px;
	height: 36px;
	background-image: url(/img/ic_back.png);
	background-size: contain;
	vertical-align: middle;

}
.header-reload-button {
	position:absolute;
	top:8px; right:8px;
	width:36px; height:36px;
}
.header-reload-button::after {
	content: "";
	display: inline-block;
	width: 36px;
	height: 36px;
	background-image: url(/img/ic_reload.png);
	background-size: contain;
	vertical-align: middle;
}

.header-button {
	position: absolute;
	top:8px; 
	right: 16px;
	display:flex; justify-content: center; align-items: center;
	background-color: white;
	height: calc(52px - 16px);
	color: #454545;
	font-size: 80%;
	padding: 0 16px;
	border-radius: 8px;
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .1);
	text-decoration: none;
}
.header-button:active {
	box-shadow: none;
}
.header-button:active:after {
	position: absolute;
	display: block;
	top:0; left:0; width:100%; height: 100%;
	content: "";
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 8px;
}

.main footer.foot-navis {
	position:fixed;
	bottom:0; left:0; width:100%;
	height: 56px;
	display:flex; justify-content: space-between; align-items: center;
	background-color:#454545;
	padding: 0 16px;
	z-index: 10;
}
_::-webkit-full-page-media, _:future, .main footer.foot-navis {
	height: calc(56px + env(safe-area-inset-bottom));
	padding: 0 16px env(safe-area-inset-bottom);
}
.main footer.foot-navis > a > img {
	height: 36px;
}

/** ホーム画面に追加案内 **/
#addto-guide { 
	position:fixed; left: 0; right:0; width: 80%; margin:0 auto; background-color: white; 
	bottom: 56px;
	border-style: solid;
	border-color: #666;
	border-width: 1px 1px 0 1px;
	padding:0 16px 24px;
	font-size:80%;
	transition: all 500ms 0s ease;
}
#addto-guide.addto-guide-none {
	bottom: -100%;
}
#addto-guide-close { position: absolute; top: -12px; right: -12px; }
#addto-guide > h3 { font-size:100%; text-align: center; }
#addto-guide > ol { padding-left:1.5em; }
#addto-guide img.icon { height:1em; vertical-align:baseline; }
#addto-guide > footer { text-align: center; }
#addto-guide-navi { margin: 24px 0; }