@charset 'utf8';

.block-error {
	font-weight: bold;
}
.block-error .item {
	padding: 1em;
	border: 1px solid #ccc;
}

.block-error .item img {
	margin-right: 1em;
	vertical-align: bottom;
}


/* ***************
	main header
*************** */

.reserve-header {
	width: 100%;
	position: relative;
	margin-bottom: 1em;
}

.reserve-header-title {
	padding: 0.5em 0em;
}

.reserve-header-description {
	font-size: 70%;
	margin-bottom: 0.5em;

}



.reserve-header-nav {
	position: absolute;
	top:0;
	right: 2em;
}

.reserve-header-nav .list {
	display: flex;
	list-style: none;
	/* font-size: ; */
}

.reserve-header-nav .list .item {
	font-size: 85%;
}

.reserve-header-nav .list .item a {
	text-decoration: none;
	display: inline-block;
	padding: 0.5em 1em;
}



.reseve-headline {
	background-color: #E4F6F8;
	text-align: center;
	padding: 2em 1em;
	font-weight: bold;
	margin-bottom: 4em;
}

.reseve-headline h2 {
	padding: 0;
	margin: 0;
	border: none;
	margin-bottom: 0.5em;
	font-size: 160%;
}
.reseve-headline p {
	font-size: 120%;
}


.reserve-container {
	max-width: 600px;
	margin: 0 auto;
}

.reserve-container h2 {
	padding: 0;
	margin-bottom: 0.5em;
	border: none;
}

.reserve-container h3 {
	border-bottom: none;
	padding: 0;
	margin-bottom: 0.5em;

}


.reserve-step-line-list {
	display: flex;
	list-style: none;
	margin-bottom: 2em;
}

.reserve-step-line-list .item {
	font-weight: bold;
	color: #ddd;
	text-align: center;
	flex-shrink: 0;
	position: relative;
	width: calc(100%/4);
}
.reserve-step-line-list .item.now {
	color: #222;
}
.reserve-step-line-list .item.done {
	color: #47C3DA;
}

.reserve-step-line-list .item .reserve-step-circle {
	box-sizing: border-box;
	border: 1px solid #ddd;
	background-color: #ddd;
	height: 20px;
	width: 20px;
	border-radius: 100%;
	margin: 0 auto;
	margin-bottom: 0.3em;
}
.reserve-step-line-list .item.now .reserve-step-circle {
	background-color: #fff;
	border: 3px solid #222;
	position: relative;
	z-index: 10;
}
.reserve-step-line-list .item.done .reserve-step-circle {
	background-color: #222;
	border: 3px solid #222;
	position: relative;
}
.reserve-step-line-list .item.done .reserve-step-circle:after {
	position: absolute;
	left: 3px;
	top: 1px;
	height: 8px;
	width: 4px;
	border-right: 3px solid #fff;
	border-bottom: 3px solid #fff;
	content: '';
	transform: rotate(45deg);
}


.reserve-step-line-list .item:not(:last-child)::after {
	content: '';
	height: 3px;
	background-color: #ddd;
	width: 87%;
	position: absolute;
	right: -44%;
	top: 18%;
}


.reserve-step-line-list .item.done:not(:last-child)::after {
	background-color: #222;
}




.block-news {
	margin-bottom: 6em;
}

.reserve-news {
	list-style: none;
	overflow-y: scroll;
	height: 152px;
	padding: 1em;
	box-sizing: border-box;
	border: 1px solid #ccc;
	margin-bottom: 2em;
}

.reserve-news .item {
	margin-bottom: 2em;
}

.reserve-news .item .news-date {
	margin-bottom: 0.3em;
}
.reserve-news .item .news-title {
	font-weight: bold;
	font-size: 120%;
	margin-bottom: 0.3em;
}
.reserve-news .item .news-msg {}




.card-checkup-type {
	border: 1px solid #ccc;
	position: relative;
}

.card-checkup-type:not(:last-child) {
	border-bottom: none;
}

.card-checkup-type
.card-checkup-type-header {
	padding: 1em;
}

.card-checkup-type
.card-checkup-type-header
.card-controller-dash {
	display: none;
}

.card-checkup-type
.card-checkup-type-body {
	padding: 1em;
	border-top: 1px solid #ccc;
	display: none;
}

.card-checkup-type[data-is-chacked="true"]
.card-checkup-type-header {
	background-color: #E4F6F8;
}

.card-checkup-type[data-is-chacked="true"]
.card-checkup-type-body {
	display: flex;
}

.card-checkup-type[data-is-chacked="true"]
.card-checkup-type-header
.card-controller-plus {
	display: none;
}
.card-checkup-type[data-is-chacked="true"]
.card-checkup-type-header
.card-controller-dash {
	display: inline-block;
}


.card-checkup-type
.card-checkup-type-body
.card-thumbnail {
	margin-right: 1em;
}

.clickable-card-label {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	cursor: pointer;
}




/* SOF Pop up card */

	.card-popup-outer {
		width: 100%;
		height: 100%;
		position: fixed;
		top: -150%;
		left: 0;
		z-index: 100;
		transition: top ease-in-out 0.5s;
		display: table;
	}

	.card-popup-outer[data-is-popup="true"] {
		top: 0;
	}

	.card-col {
		display: table-cell;
		vertical-align: middle;
	}

	.card-popup {
		margin: 0 auto;
		border: 1px solid #ccc;
		max-width: 649px;
		padding: 2em 4em;
		box-sizing: border-box;
		background-color: #fff;
		opacity: 0;
		z-index: 110;
		transition: opacity 0.3s;
	}

	/* .card-popup[data-is-popup="false"] {
	} */

	.card-popup-outer[data-is-popup="true"] .card-popup {
		opacity: 1;
	}

	.card-popup-title {
		font-weight: bold;
		margin-bottom: 1em;
		font-size: 120%;
	}


	.card-popup .card-option {
		border: 1px solid #ccc;
		margin-bottom: 1em;
		cursor: pointer;
	}

	.card-popup .card-option .card-option-header {
		padding: 0.5em 1em;
		align-items: center;
		font-weight: bold;
		border-bottom: 1px solid #ccc;
	}
	.card-popup .card-option .card-option-header img {
		vertical-align: text-bottom;
	}

	.card-popup .card-option .card-option-body {
		padding: 0.8em 1em;
	}


/* EOF Pop up card */



.action_select_popup option {
	display: none;
}


.reserve-checkup-selected-panel {
	display: flex;
	border: 1px solid #ccc;
	border-bottom: none;
}

.reserve-checkup-selected-panel
.header {
	padding: 1em;
	min-width: 160px;
	background-color: #E4F6F8;
	font-weight: bold;
	border-right: 1px solid #ccc;
}

.reserve-checkup-selected-panel
.body {
	padding: 1em;
}


.reserve-controlle-panel {
	display: flex;
	padding: 1em;
	border: 1px solid #ccc;
	border-bottom: none;
}

.reserve-controlle-panel
.item-btn {
	margin-left: auto;
	flex-shrink: 0;
}

.btn-group-reserve-schedule {
	width: 100%;
	margin-right: 2em;
}
.btn-group-reserve-schedule
.btn-marge-item {
	width: calc(100%/3);
	position: relative;
	text-align: center;
}
.btn-group-reserve-schedule
.btn-marge-item:first-child img {
	position: absolute;
	top: 0.7em;
	left: 1em;
}
.btn-group-reserve-schedule
.btn-marge-item:last-child img {
	position: absolute;
	top: 0.7em;
	right: 1em;
}


ul.btn-group-reserve-schedule
li.btn-marge-item.selected {
	transition: background-color 0.3s;
	background-color: rgba(243, 244, 245, 1);
}
ul.btn-group-reserve-schedule
li.btn-marge-item.selected:hover {
	background-color: rgba(243, 244, 245, 0.6);
}

.schedule-list {
	border: 1px solid #ccc;
	margin-bottom: 2em;

}
.schedule-list
.schdule-list-header {
	background-color: #E4F6F8;
	border-bottom: 1px solid #ccc;
	display: flex;
}

.schedule-list
.schedule-list-row {
	border-bottom: 1px solid #ccc;
	display: flex;
}
.schedule-list-row:last-child {
	border-bottom: none;
}

.schedule-list
.schedule-list-col {
	border-right: 1px solid #ccc;
	width: calc(100%/3);
	padding: 0.5em 1em;
	text-align: center;
	box-sizing: border-box;
}

.schedule-list
.schedule-list-col img {
	vertical-align: middle;
}
/*
.schedule-list
.schedule-list-col:first-child {
	min-width: 160px;
} */

.schedule-list
.schedule-list-col:last-child {
	border-right: none;
}




.form-frame {
	border: 1px solid #ccc;
	margin-bottom: 2em;
}

.form-frame div,
.form-frame input,
.form-frame select {
	box-sizing: border-box;
}

.form-frame input[type=text],
.form-frame input[type=password] {
	width: 100%;
}

.form-frame .form-row:not(:last-child) {
	border-bottom: 1px solid #ccc;
}

.form-frame .form-row .form-col {
	display: flex;
	width: 100%;
}

.form-frame .form-row .form-col-heaer {
	background-color: #E4F6F8;
	font-weight: bold;
	min-width: 160px;
	border-right: 1px solid #ccc;
}

.form-frame .form-row .form-col .layout-flex {
	align-items: center;
}

.form-frame .form-row .form-col .form-col-heaer {
	padding: 1em;
}

.form-frame .form-row .form-col .form-col-body {
	padding: 1em;
	width: 100%;
	border-right: 1px solid #ccc;
}
.form-frame .form-row .form-col .form-col-body:last-child {
	border-right: none;
}

.form-frame .form-row .form-col input[type=radio] {
	margin-right: 0.5em;
}

.form-frame .form-row .form-col label {
}

.form-frame .form-row .form-col .form-col-body .item {
	margin-right: 1em;
}
.form-frame .form-row .form-col .form-col-body
.item-widht-100 {
	width: 100%;
}

.outer-border {
	border: 1px solid #ccc;
	padding: 0.3em 1em;
	border-radius: 4px;
	flex-shrink:0;
	width: 41%;
	position: relative;
}

.clickable-form-label {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	cursor: pointer;
}



.block-question {
	margin-bottom: 4em;
}

.list-question {
	list-style: none;
	margin-bottom: 1em;
}

.list-question .item {
	padding: 0.5em 1em;
	border: 1px solid #ccc;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}
.list-question .item:not(:last-child) {
	margin-bottom: 1em;
}

.clickable-list-label {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	cursor: pointer;
}

.question-error-msg {
	border: 1px solid #DB2C2C;
	padding: 0.5em 1em;
	color: #DB2C2C;
	font-weight: bold;
}


.block-result {
	margin-bottom: 3em;
}
.result-question-title {
	display: flex;
	align-items: center;
	margin-bottom: 1em;
}

.result-question-title .btn-white:hover {
	background-color: #E4F6F8;
}


.result-frame {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.result-row {
	display: flex;
}

.result-col {
	padding: 1em 1.5em;
	box-sizing: border-box;
}

.result-col.header {
	background-color: #E4F6F8;
	font-weight: bold;
	width: 160px;
	flex-shrink: 0;
}



.block-reserve-complete {
	margin-bottom: 4em;
}

.block-reserve-complete-header .item {
	margin-bottom: 1em;
}


.block-reserve-complete-body {
	padding: 2em;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #ccc;
}

.block-reserve-complete-body
.complete-body-row {
	display: flex;
}

.block-reserve-complete-body
.complete-body-row:not(:last-child) {
	margin-bottom: 1.5em;
}

.block-reserve-complete-body
.complete-body-row .item:first-child {
	width: 133px;
}



.block-card {
	border: 1px solid #ccc;
}

.block-card  .header {
	padding: 1em;
	background-color: #E4F6F8;
	font-weight: bold;
	border-bottom: 1px solid #ccc;
}

.block-card .content {
	padding: 1em;
}

.block-card .content input {
	width: 100%;
	box-sizing: border-box;
	height: 50px;
}



.reserve-mail-sent {
	padding: 12em 2em;
}

.reserve-mail-sent h1 {
	color: #47C3DA;
	line-height: 2em;
	position: relative;
	font-size: 2em;
	margin-bottom: 1em;
}

.reserve-mail-sent h1::after {
    background-color: #47C3DA;
    display: block;
    width: 140px;
    height: 3px;
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -70px;
}

.block-mail-sent p:not(:last-child) {
	margin-bottom: 0.5em;
}

.block-form {
	margin-bottom: 6em;
}


.reserve-impossible {
	padding: 12em 2em;
}

.reserve-impossible h1 {
	color: #47C3DA;
	line-height: 2em;
	position: relative;
	font-size: 2em;
	margin-bottom: 1em;
}

.reserve-impossible h1::after {
    background-color: #47C3DA;
    display: block;
    width: 140px;
    height: 3px;
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -70px;
}
.reserve-impossible .name {
	font-size: 1.5em;
	font-weight: bold;
	margin-top: 1em;
	margin-bottom: 0.5em;
}

.reserve-impossible .contact-tel {
	box-sizing: border-box;
	max-width: 540px;
  margin: auto;
	background-color: #FFFFD9;
	margin-top: 2em;
	padding: 30px 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.reserve-impossible .contact-tel strong {
	font-size: 1.3em;
	margin-right: 20px;
}

.reserve-impossible .contact-tel a {
	font-size: 1.3em;
}