@charset "utf-8";

:root {
	--area-main-decoration-height:13;

	--color-base1	:#fff;
	--color-base2	:#eee;
	--color-main1	:#EA7399;
	--color-main2	:#F4B7CA;
	--color-main3	:#ffe0ea;
	--color-accent1	:#396;
	--color-accent2	:#369;
	--color-text	:#222;
	--color-link	:#B0000A;

	--color-headline-text	:#099;
	--color-headline-bg 	:#e8fff4;

	--color-headline-text2	:#fff;
	--color-headline-bg2	:#099;

	--color-label-bg	:#FFF7D8;

	--color-button-go	:#e4007f;
	--color-button-back	:#a5a5a5;
/*
	--color-headline-text	:#555;
	--color-headline-bg		:#dcdcdc;
	--color-table-border	:#8d8d8d;
*/
	--color-main-bg			:#fff;

	--color-input-text-sample	:#999;

	--color-attention		:#c00;

	--color-ui-bg			:#e4007f;
	--color-ui-shadow		:transparent;

	--color-ui-mono-bg		:#a5a5a5;
	--color-ui-mono-shadow	:transparent;

	--color-ui-text			:#fff;

	--animation-time:0.6s;
}

html {
	font-size: 16px;
	overflow-y:scroll;
}

.small {
font-size: 0.75rem; /* 75% of the baseline */
}

.large {
font-size: 1.25rem; /* 125% of the baseline */
}

body, input, select, textarea {
	font-size: 0.875rem;
	line-height:1.5;
	background-color:var(--color-base1);
}

.not-ui-fonts {
	font-family:"Noto Sans", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, Segoe, Arial, sans-serif, "Apple Color Emoji", "Segoe Emoji", "Segoe Symbol", "Noto Color Emoji", monospace !important;
}

strong {
	font-weight:bold;
	color:#c00;
}

em {
	font-style: normal;
	font-weight:bold;
}

a{
	color:var(--color-link);}

p, ul {
	margin-bottom:0.5rem;
}

main ul {
	list-style-type: circle;
	list-style-position: inside;
}

main ol {
	list-style-type: decimal;
	list-style-position: inside;
}

ul.attention li,
li.attention {
	list-style: none;
}

ul.attention li:before,
li.attention:before {
	content:"※";
	color:var(--color-attention);
	margin-right: 0.15em;
}

header h1,
header h2
{
	color:var(--color-headline-text);
}

main h2,
main h3,
main h4,
main h5,
main h6 {
	color:var(--color-headline-text);
	margin: 1em 0;
	padding: 0.25em 0.5em;
}

main h2 {
	background-color: var(--color-headline-bg);
}

main h3 {
	border-bottom: 0.25rem solid var(--color-headline-bg);
}

h2 {font-size: 1.5rem;}
h3 {font-size: 1.33rem;}
h4 {font-size: 1.13rem;}
h5 {font-size: 1rem;}
h5 {font-size: 0.875rem;}


.width_full {
	width:100% !important;
}


.wrap_button {
	text-align:center;
	padding:0.5em 0;
}

input[type=submit], button {
	cursor:pointer;
	
	display:inline-block;
	
	padding:0.75em 2em;
	border:none;
}



button#go_next {
	background-color: var(--color-button-go) !important;
	color:#fff;
}

button#go_next:disabled {
	background-color: var(--color-ui-mono-bg) !important;
	opacity:0.33;
	cursor:default;
}

button#go_prev {
	background-color: var(--color-button-back) !important;
	color:#fff;
}

.button {
	background-color: var(--color-button-go);
	color:#fff;
}

.button.twitter {
	background-color: #1d9bf0;
	color:#fff;
}

a.button {
	display: inline-block;
}

button, label.wrap_ui {
    cursor:pointer;
}

button, a.button {
    color:var(--color-ui-text);
    background-color:var(--color-ui-bg);
}

button:hover, a.button:hover {
    opacity: 0.75;
}

button, label.wrap_ui {
    cursor:pointer;
}

button, a.button {
    color:var(--color-ui-text) !important;
    background-color:var(--color-ui-bg) !important;
	opacity: 1;
}

button:hover, a.button:hover {
    opacity: 0.75;
}

button, input, textarea, select,
label.wrap_ui,
[type='text'], [type='email'], [type='url'],
[type='password'], [type='number'], [type='date'],
[type='datetime-local'], [type='month'], [type='search'],
[type='tel'], [type='time'], [type='week'], [multiple] {
    border-radius:0.33rem !important;
}

label.wrap_ui {
	display: block;
	padding: 0.75rem 0.5rem;

	border: 0.125rem solid var(--color-main2);
}

label.wrap_ui.checked {
	background-color: var(--color-main3);
	font-weight: bold;
}

label.wrap_ui input[type="radio"],
label.wrap_ui input[type="checkbox"] {
	margin-right: 1em;
}

.auth_ok_message {
	font-size: 200%;
	color:var(--color-headline-text);
}