html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

:root {
	--base-color: #464646;
	--sub-color: #eee;
}

ul {
	list-style-type: none;
}

body {
	background: #000;
	font-family: Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	font-style: normal;
	font-size: 100%;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	text-size-adjust: 100%;
	color: #464646;
	background: #eff0f4;
}
html, body {
	width: 100%;
	height: 100%;
}

header {
	display: none;
}

.wrap {
	padding: 0 15px;
	width: 100%;
	margin: auto;
	box-sizing: border-box;
	max-width: 640px;
}
.cont {
	background: #fff;
	padding: 30px;
	box-shadow: 1px 1px 2px #ddd;
	border-radius: 6px;
}

header {
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	background: var(--base-color);
	padding: 10px 0;
}
header span {
	color: #fff;
	font-size: 11pt;
	line-height: 1.4;
}
header strong {
	font-size: 18pt;
	color: #fff;
	display: block;
	line-height: 1.2;
	margin-top: 5px;
}
main {
	margin: 2em 0;
	text-align: center;
}

main strong {
	display: block;
	font-size: 16pt;
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
	border-bottom: 1px solid #ddd;
}

.comment {
	margin: 1em 0;
	font-size: 10pt;
}
.comment span {
	color: #c00;
}

form p {
	font-size: 10pt;
	margin-bottom: 0.5em;
}
form a {
	font-size: 10pt;
	color: #65a6bf;
	text-decoration: underline;
}
form a:hover {
	text-decoration: none;
	opacity: 0.8;
}

input, textarea {
	padding: 5px;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	font-family: Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size: 16px;
	width: 140px;
}

textarea {
	width: 100%;
	max-width: 300px;
	height: 100px;
	box-sizing: border-box;
}

#id_preparation,
#id_default {
	display: none;
}

#id_customer_contents input[type="email"] {
	width: 200px;
}
#id_customer_contents textarea {
	width: 90%;
	height: 100px;
}

.line-margin {
	margin-top: 5px;
}

section {
	margin-bottom: 1em;
}

.tbl-tr#id_company_name {
}

.tbl-tr.choice {
	display: none;
}
.tbl-th, .tbl-td {
	border-bottom: 2px solid #fff;
}

.tbl-th {
	width: 140px;
	color: var(--base-color);
	text-align: right;
	padding: 10px 15px;
	background: var(--sub-color);
	font-weight: bold;
}

#id_customer_contents .tbl-th.must:before,
#id_reserve_contents .tbl-th.must:before {
	content: "*";
	color: #c00;
}

#id_customer_contents .tbl-th.any:before {
	content: "";
}

.tbl-td {
	text-align: left;
}

.tbl-td #id_policy_area {
	max-height: 140px;
	overflow: auto;
}



#id_customer_contents {
	margin-top: 1em;
}

#id_customer_contents .tbl-th,
.customer_contents .tbl-th {
	background: #eee;
	color: #464646;
}

.caution {
	font-size: 8pt;
	margin-top: 5px;
}

.no_use,
#id_loading {
	display: none;
}

.org_select {
	vertical-align: text-bottom;
}



#id_confirm_area .comment {
	padding: 20px;
	background: #eee;
	color: #0092cc;
	border: 3px solid #32a7d5;
}


/* カレンダーアイコン

.datepicker div {
	content: "";
	display: inline-block;
	vertical-align: middle;
	background: url(../img/calendar_icon.svg) no-repeat, #fff;
	background-position: center;
	background-size: cover;
	width: 26px;
	height: 26px;
	cursor: pointer;
	box-sizing: border-box;
}
#id_datepicker:hover {
}
 */
 
.datepicker_area {
	display: inline-block;
	background: none;
	padding: 5px 0;
	margin-right: 10px;
	border-radius: 5px;
	width: 164px;
	text-align: center;
	border: 2px solid var(--base-color);
	color: var(--base-color);
	font-weight: bold;
}

.datepicker_area:hover,
.datepicker_area.chk {
	background: var(--base-color);
	color: #fff;
}

#id_dateList_sect ul,
.timeList ul {
	display: flex;
	flex-wrap: wrap;
	margin: 1em 0 5px -5px;
}


/* 既存のラジオボタンのstyleをリセット */

#id_reserve_contents input[type=radio] + label {
	padding: 0;
	margin: 0 0 10px 10px;
}
#id_reserve_contents input[type=radio],
#id_reserve_contents input[type=radio] + label::before,
#id_reserve_contents input[type=radio]:checked + label::after {
	display: none;
}


/* 時間指定ボタン（ラジオボタン）*/
#id_reserve_contents input[type=radio] + label {
	display: block;
	margin: 5px;
	border: 2.5px solid var(--base-color);
	background: #fff;
	border-radius: 8px;
	width: 80px;
	box-sizing: border-box;
	padding: 10px;
	text-align: center;
	color: var(--base-color);
	font-weight: bold;
}

#id_reserve_contents input[type=radio] + label:hover,
#id_reserve_contents input[type=radio]:checked + label {
	background: var(--base-color);
	color: #fff;
}

#id_reserve_contents input[type=radio]:disabled + label {
	border-color: #ccc;
	background: #fff;
	color: #ccc;
	cursor: default;
}


#id_send_comp p {
	font-size: 10pt;
}
#id_send_comp .cont div {
	width: 240px;
	margin: 2em auto;
}

#id_confirm_area,
#id_send_comp,
#id_comp {
	display: none;
}


.input_number {
	padding: 15px;
	text-align: center;
	width: 240px;
	margin: 1em auto;
	background: var(--sub-color);
}

button {
	padding: 10px;
	background: var(--base-color);
	border: none;
	border-bottom: 2px solid var(--base-shadow);
	cursor: pointer;
	color: #fff;
	width: 120px;
	font-weight: bold;
	margin-top: 0.5em;
	border-radius: 5px;
}

#id_reset_btn,
#id_reserve_prev,
#id_prev_btn {
	margin-top: 1em;
	background: #aaa;
}

button:hover {
	opacity: 0.8;
}

footer {
	margin-bottom: 6px;
	border-top: 1px solid #ddd;
}
.copy {
	padding: 8px 0;
	color: #aaa;
	font-size: 9pt;
	text-align: center;
	border-top: 1px solid #fff;
}


@media (max-width: 414px){
	.cont {
		padding: 15px;
	}

	#id_choice1, #id_choice2, #id_choice3 {
		display: block !important;
	}

	.tbl-th, .tbl-td {
		text-align: left;
	}
	.tbl-th {
		padding: 10px 0 10px 8px;
	}
	.tbl-td {
		padding: 8px 0 1em;
	}
	#id_reserve_contents input[type=radio] + label {
		width: 75px;
	}
}

#id_page_top {
/*	position: fixed;
	padding-left: 30px;
*/
	cursor: pointer;
}

#id_page_top:hover {
	opacity: 0.8;
}

#id_page_top::before {
	content: "";
	position: fixed;
	margin: auto;
	bottom: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--base-color);
	z-index: 999999;
}

#id_page_top::after {
	content: "";
	position: fixed;
	margin: auto;
	bottom: 30px;
	right: 33px;
	width: 10px;
	height: 10px;
	border-top: 4px solid #fff;
	border-right: 4px solid #fff;
	transform: rotate(-45deg);
	z-index: 999999;
}

/* 読み込み中 */
#id_loading {
	display: none;
	align-items: center;
	align-content: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
}

#id_loading:after {
	content: "";
	display: block;
	background: rgba(0,0,0,0.6);
	height: 100vh;
	width: 100vw;
	position: fixed;
	top: 0;
	left: 0;
}

#id_loading div {
	flex: 1;
	background: url(../img/loading.png) no-repeat;
	background-position: center;
	background-size: 80px;
	height: 100vh;
	animation: 2s linear infinite rotation;
}


/* 規約 */
#id_rule_open {
	cursor: pointer;
}
#id_rule_section {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

#id_rule_section:after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: -1;
}

#id_rule_section #id_rule_block {
	width: 100%;
	max-width: 900px;
	margin: 2em auto;
	padding: 0 20px;
	height: 90vh;
	overflow: hidden;
	box-sizing: border-box;
}

#id_rule_section #id_rule_block .cont {
	padding-right: 10px;
	border-radius: 0;
}

#id_rule_section h2 {
	font-size: 20pt;
	text-align: center;
	margin: 1em 0;
}

#id_rule_section #id_rule_block .cont > div#id_content_div {
    height: 56vh;
    overflow: auto;
}
#id_rule_section #id_rule_block .cont > div#id_content_div.low {
    height: 30vh;
}

#id_rule_section strong.rule_tile {
	display: block;
	font-size: 16pt;
	text-align: center;
}

#id_rule_section ul,
#id_rule_section ol {
	list-style-position: outside;
	padding-left: 2em;
	margin-top: 10px;
}

#id_rule_section ul li,
#id_rule_section ol li {
	margin-top: 10px;
	line-height: 1.6;
}

#id_rule_section ul.second {
	margin-top: 0;
	padding-left: 0;
}
#id_rule_section ul.second li {
	margin-top: 5px;
}
#id_rule_section dl {
	margin: 1em 0 2em;
}

#id_rule_section dl dt {
	font-weight: bold;
	margin: 1em;
}
#id_rule_section dl dd {
	margin: 0 1em;
}


@keyframes rotation{
	0%{ transform:rotate(0);}
	100%{ transform:rotate(360deg); }
}