@charset "UTF-8";
/* CSS Document */

:root {
	--onsite: #2f6cb7;
	--gokito: #0e8a7a;
	--newyear: #83631e;
	--newyear_line: #a3884d;
	--onsite_hover: #3488ef;
	--gokito_hover: #17c1ab;
	--newyear_hover: #c6a55e;
}

.wrap {
	margin: 3% auto 10%;
	max-width: 1300px;
	width: 90%;
}

.page_head {
	display: flex;
	align-items: flex-start;
	margin-bottom: 50px;
}
.page_head .logo {
	width: 25%;
	max-width: 280px;
	min-width: 200px;
	text-align: center;
}
.page_head .logo img {
	width: 100%;
	margin-bottom: 7px;
}
.page_head .page_type {
	font-size: 28px;
	font-weight: 600;
	display: inline-block;
	padding: 2px 15px;
	margin-left: 20px;
	border-left: 6px solid;
}
.page_head.onsite .page_type {
	color: var(--onsite);
	border-left-color: var(--onsite);
}
.page_head.gokito .page_type {
	color: var(--gokito);
	border-left-color: var(--gokito);
}
.page_head.gokito.newyear .page_type {
	color: var(--newyear);
	border-left-color: var(--newyear_line);
}

.page_title {
	font-size: 30px;
	border-bottom: 1px solid #666;
	position: relative;
	padding-bottom: 20px;
	margin-bottom: 50px;
}
.page_title:before {
	content: '';
	position: absolute;
	width: 15%;
	height: 6px;
	display: block;
	bottom: 0;
}
.onsite .page_title:before {
	background-color: var(--onsite);
}
.gokito .page_title:before {
	background-color: var(--gokito);
}
.gokito.newyear .page_title:before {
	background-color: var(--newyear);
}

.circle_list li {
	position: relative;
	padding-left: 20px;
}
.circle_list li:before {
	content: '';
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid #666;
	position: absolute;
	left: 0;
	top: 5px;
}
.circle_list.black li:before {
	background-color: #000;
}

.col {
	margin-bottom: 20px;
}
.col:last-of-type {
	margin-bottom: 0;
}
p + .col,
h2 + .col,
h3 + .col,
h4 + .col,
ul + .col,
ol + .col,
dl + .col,
div + .col {
	margin-top: 20px;
}


.sec_title {
	color: #fff;
	font-size: 20px;
	display: inline-block;
	padding: 5px 30px;
	margin-bottom: 15px;
}
.onsite .sec_title {
	background-color: var(--onsite);
}
.gokito .sec_title {
	background-color: var(--gokito);
}
.gokito.newyear .sec_title {
	background-color: var(--newyear_line);
}
.col_title {
	font-weight: 600;
	margin-bottom: 5px;
	font-size: 18px;
}
.col_title.square {
	position: relative;
	padding-left: 18px;
}
.col_title.square:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 9px;
	width: 12px;
	height: 12px;
	background-color: #000;
}

.link_btn {
	margin-top: 20px;
}
.link_btn a {
	display: inline-block;
	padding: 10px 60px 10px 30px;
	position: relative;
	border: 2px solid #000;
	border-radius: 5px;
}
.link_btn a:after {
	content: '';
	position: absolute;
	right: 25px;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 10px;
  height: 10px;
  border: 2px solid;
  border-color: #565656 #565656 transparent transparent;
  transform: rotate(45deg);
}
.link_btn.big a {
	font-size: 24px;
	padding: 15px 70px 15px 40px;
	border-radius: 10px;
}
.link_btn.big a:after {
	right: 30px;
	width: 15px;
  height: 15px;
}
.link_btn a:hover {
	color: #fff;
	background-color: #000;
}
.link_btn a:hover:after {
	border-color: #fff #fff transparent transparent;
}


.slick-arrow {
	content: '';
	position: absolute;
	top: 0;
	width: 15%;
	height: 20%;
	cursor: pointer;
	z-index: 1;
}
.slick-arrow.prev {
	left: 0;
}
.slick-arrow.next {
	right: 0;
}
.slick-arrow:before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 30px;
	width: 0;
  height: 0;
}
.slick-arrow.prev:before {
	border-top: 10px solid transparent;
  border-right: 10px solid black;
  border-bottom: 10px solid transparent;
}
.slick-arrow.next:before {
	border-left: 10px solid black;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.slick-arrow.prev.slick-disabled:before,
.slick-arrow.next.slick-disabled:before {
	content: none;
}


.datetimewrap {
	display: flex;
	align-items: flex-start;
	gap: 15%;
}
.calendar_wrap {
	/* width: 30%; */
}
.timetable_wrap {
	width: 55%;
}
.datetimewrap .head_text {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 30px;
}
.onsite .datetimewrap .head_text {
	color: var(--onsite);
}
.gokito .datetimewrap .head_text {
	color: var(--gokito);
}
.calendar_wrap .slide {
	border: 2px solid #ccc;
}
.calendar {
	width: 100%;
	padding: 30px;
}
.calendar table {
	width: 100%;
}
.calendar thead {
	border-bottom: 1px solid #ccc;
}
.calendar tbody {}
.calendar th,
.calendar td {
	border: none;
	padding: 5px 10px;
	text-align: center;
}
.calendar thead th {
	font-weight: normal;
	font-size: 12px;
}
.calendar .not_date {
	color: #ddd;
}
.calendar .date {
	cursor: pointer;
	padding: 0;
}
.calendar .date.active button,
.calendar .date:hover button {
	background-color: #e4a55b;
	color: #fff;
}
.calendar .date button {
	border: none;
	outline: none;
	background: none;
	display: block;
	padding: 5px 10px;
	width: 100%;
	height: 100%;
	line-height: 1.7;
}

.timetable_wrap {
	position: relative;
}
.timetable_wrap:before {
	content: '';
	position: absolute;
	left: -18%;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 50px;
  height: 50px;
  border: 5px solid;
  border-color: #ddd #ddd transparent transparent;
  transform: rotate(45deg);
}
.time_table .view_date {
	text-align: center;
	font-weight: 600;
	font-size: 20px;
	padding-bottom: 7px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 20px;
}
.time_table table {
	width: 100%;
}
.time_table thead th {
	border: none;
	text-align: right;
	position: relative;
	height: 30px;
	font-weight: normal;
}
.time_table thead th span {
	position: absolute;
	right: -20px;
	top: 0;
}
.time_table tbody th {
	width: 20%;
	text-align: center;
	padding: 5px;
	font-weight: normal;
	font-size: 11px;
}
.time_table tbody th.w_sat {
	color: #7fbbf3;
}
.time_table tbody th.w_sun,
.time_table tbody th.holiday,
.time_table tbody th.w_sat.holiday {
	color: #f991d8;
}
.time_table tbody td {
	width: 40%;
	text-align: center;
	padding: 5px 3px;
	font-size: 10px;
}
.time_table tbody td.carendar_note {
	text-align: left;
	padding: 5px;
	font-size: 12px;
}
.time_table tbody td.carendar_note p {
	font-size: 12px;
}
.time_table tbody td.carendar_note .hd_event {
	color: #ccc;
}
.time_table tbody td.carendar_note .comment {
}
.time_table tbody td.time:hover {
	cursor: pointer;
	color: #fff;
}
.time_table tbody td.time.active,
.time_table tbody td.time:hover {
	background-color: #e4a55b;
	color: #fff;
}
.time_table tbody td.close {
	color: #ccc;
	background-color: #eee;
}
.time_table tbody td.reserved {
	color: #ccc;
	background-color: #eee;
}
.time_table tbody td.around_reserved {
	color: #ccc;
	background-color: #eee;
}


.select_month_wrap form {
	display: flex;
	margin-left: 0;
}
.select_month_wrap button {
	margin-left: 20px;
}
.onemonth_wrap table {
	table-layout: fixed;
}
.onsite .onemonth_wrap table tr th:last-child {
	width: 50%;
}
.onemonth_wrap .time_table thead th,
.onemonth_wrap .time_table tfoot th {
	text-align: center;
	font-size: 10px;
}
.onemonth_wrap .time_table tfoot th {
	font-weight: normal;
	border: none;
}
.gokito .onemonth_wrap table tr th:last-child {
	width: 30%;
}
.gokito .onemonth_wrap table.month_1 tr th:last-child {
	width: 20%;
}
.gokito .onemonth_wrap table.month_1 {
	margin-bottom: 40px;
}
.onemonth_wrap table tr th:first-child {
	width: 60px;
}

.permanent_close td:not(.carendar_note) {
	background-color: #eee;
}



.btn_area {
	margin-top: 80px;
	text-align: center;
}
.btn_area input.submit {
	padding: 10px 60px;
	border-radius: 30px;
	color: #fff;
	font-size: 18px;
	border: none;
	outline: none;
	cursor: pointer;
}
.onsite .btn_area input.submit {
	background-color: var(--onsite);
}
.gokito .btn_area input.submit {
	background-color: var(--gokito);
}
.gokito.newyear .btn_area input.submit {
	background-color: var(--newyear_line);
}
.onsite .btn_area input.submit:hover {
	background-color: var(--onsite_hover);
}
.gokito .btn_area input.submit:hover {
	background-color: var(--gokito_hover);
}
.gokito.newyear .btn_area input.submit:hover {
	background-color: var(--newyear_hover);
}

.btn_area input.submit:disabled,
.onsite .btn_area input.submit:disabled:hover,
.gokito .btn_area input.submit:disabled:hover {
	cursor: default;
	background-color: #ccc;
	opacity: .5;
}

.subscription_form form {
	margin: 5% auto;
	max-width: 860px;
}

.subscription_form form h2.sec_title {
	display: block;
	margin-bottom: 25px;
	text-align: center;
	padding: 10px;
}

form dt,
form dd {
	position: relative;
}
form .imp_mark {
	position: absolute;
	left: -17px;
	top: 1px;
	color: #f00;
	font-weight: 600;
}
form dl dd .label_li.w_fixed li {
	width: 31.5%;
}
form dl dd .label_li.w_fixed li.w_block {
	width: 100%;
}
.subscription_form dt .note,
.subscription_form p .note {
	color: #f00;
	font-weight: normal;
	display: inline-block;
	margin-left: 20px;
}
.subscription_form dt .note.block {
	display: block;
	margin: 5px 0 0;
}
form dd .dl_wrap {
	margin-top: 40px;
}
form dd .dl_wrap dt {
	font-weight: 100%;
	color: #000;
}
form .other_items {
	margin-top: 30px;
}
form .images.image_inline {
	display: flex;
	gap: 1px;
	align-items: center;
	margin-bottom: 40px;
}
form .images.image_inline img {
	height: 260px;
	width: auto;
	object-fit: cover;
}
form .other_items dt {
	white-space: nowrap;
}
form .dl_block dl {
	display: block;
}
form .dl_block dt {
	padding: 0 20px 0 0;
	width: 100%;
}
form .dl_block dd {
	display: flex;
	align-items: center;
	width: 100%;
}
form .dl_block dd span {
	white-space: nowrap;
	margin-right: 10px;
}
form .dl_block dd.block {
	display: block;
}

form dl dd input[type="text"],
form dl dd input[type="email"],
form dl dd input[type="tel"],
form dl dd input[type="number"],
form dl dd textarea,
form .custom_select select {
	background: #f2f2f2;
	border-color: #f2f2f2;
}

.block_li .custom_radio {
	display: block;
	margin-right: 0;
	margin-bottom: 15px;
}

.price_tbl {
	margin-top: 50px;
}
.price_tbl tr {
	border-bottom: 1px dotted #ccc;
}
.price_tbl th,
.price_tbl td {
	white-space: nowrap;
	padding: 7px 10px;
	border: none;
	font-weight: normal;
}
.price_tbl td {
	text-align: right;
}
.price_tbl .total {
	padding: 10px;
	border-bottom: none;
}
.price_tbl .total th,
.price_tbl .total td {
	font-weight: 600;
}

.ui-datepicker {
	background-color: rgba(255, 255, 255, 1);
	padding: 15px;
	box-shadow: 0 3px 8px 3px rgba(0, 0, 0, .2);
}
.ui-datepicker-header {
	display: flex;
	flex-wrap: wrap;
}
.ui-datepicker-header .ui-corner-all {
	display: block;
	width: 50%;
}
.ui-datepicker-next {
	text-align: right;
}
.ui-datepicker-title {
	margin: 5px 0 0;
}
.ui-datepicker-title select {
	margin: 0 10px;
}
.ui-datepicker-title select:first-of-type {
	margin-left: 0;
}
.ui-datepicker-title select:last-of-type {
	margin-right: 0;
}
.ui-datepicker td {
	text-align: center;
	padding: 0;
}
.ui-datepicker td a {
	display: block;
	padding: 5px 10px;
}
.ui-datepicker td a:hover {
	color: #000;
	background-color: #fff3f8;
}
.ui-datepicker .ui-datepicker-unselectable {
	color: #eee;
}
.ui-datepicker .ui-datepicker-unselectable span {
	display: block;
	padding: 5px 10px;
}

form dl dd dl {
	padding: 10px;
}

.car_name_wrap {
	display: flex;
}
.car_name_wrap ul {
	width: 100%;
	flex-wrap: wrap;
}
.car_name_wrap ul li.add_div {
	width: 49%;
}
.car_name_wrap li {
	padding: 5px 10px 5px 30px;
	margin-bottom: 5px;
	position: relative;
}
form .car_name_wrap li .num {
	position: absolute;
	left: 10px;
}
form .car_name_wrap li dl {
	padding: 5px!important;
	align-items: center;
}
form .car_name_wrap li dl:first-of-type {
	margin-top: 10px;
}
form .car_name_wrap li dl dt {
	font-size: 14px;
	color: #999;
	width: 20%;
}
form .car_name_wrap li dl dd {
	width: 80%;
}

.bill_item_wrap .block {
	margin: 10px 0;
}
.bill_item_wrap .block dl {
	padding-left: 0;
}
.bill_item_wrap .block dt:not(.other_billinfo dt) {
	font-weight: 600;
} 
.bill_item_wrap .block.images {
	margin-left: 10%;
}

.add_bill_items dd dl dt {
	width: 10%;
}
.add_bill_items dd dl dd {
	width: 90%;
}

form dd .other_items dl dt {
	width: 40%;
}
form dd .other_items dl dd {
	width: 60%;
}


@media screen and ( max-width:896px ) {
	.page_head .page_type {
		font-size: 20px;
	}
	.page_title {
		font-size: 26px;
		padding-bottom: 8px;
		margin-bottom: 30px;
	}
	.sec_title {
		font-size: 16px;
		padding: 3px 20px;
	}
	.col_title {
		font-size: 16px;
	}
	.link_btn.big a {
		font-size: 20px;
		padding: 10px 70px 10px 40px;
	}

	.datetimewrap {
		gap: 5%;
	}
}


@media screen and ( max-width:760px ) {
	.onsite .onemonth_wrap table tr th:last-child {
		width: 30%;
	}
}

@media screen and ( max-width:680px ) {
	.onsite .onemonth_wrap table tr th:last-child {
		width: 20%;
	}
	.page_head .logo {
		font-size: 150px;
		max-width: none;
		min-width: 150px;
	}
	.page_head .logo p {
		font-size: 12px;
	}
	.page_head .page_type {
		font-size: 18px;
	}
	.page_title {
		font-size: 20px;
	}
	ol.decimal.bold li {
		font-size: 16px;
	}
	.link_btn.big.center {
		text-align: center;
	}
	.link_btn.big a {
		font-size: 18px;
	}

	.datetimewrap {
		flex-direction: column;
	}
	.timetable_wrap:before {
		content: none;
	}
	.calendar_wrap {
		width: 100%;
		margin-bottom: 40px;
	}
	.timetable_wrap {
		width: 100%;
	}

	.subscription_form form {
		width: 100%;
	}


	.scroll {
		overflow-x: scroll;
		position: relative;
		padding-top: 10px!important;
	}

	.scrollicon{
		display: block;
		position:absolute;
		top:0;
		left:1%;
		animation: arrowmove 2s ease-in-out infinite;
	}
	@keyframes arrowmove{
		0%{top:0;}
		50%{left:3%;}
		100%{top:0;}
	 }

	.scrollicon span{
		position: absolute;
		left: 0;
		top: 0;
		color: #666;
		font-size: 0.7rem;
		letter-spacing: 0.05em;
		padding-right: 65px;
	}
	.scrollicon span:before{
		content:"";
		position: absolute;
		right: 0;
		top: 9px;
		width:50px;
		height: 1px;
		background:#666;
	}
	.scrollicon span:after {
		content: "";
		position: absolute;
		right: 3px;
		top: 0;
		width: 1px;
		height: 10px;
		background: #666;
		transform: skewX(45deg);
	}

	.scroll table {
		width: auto!important;
		white-space: nowrap;
	}
	.scroll::-webkit-scrollbar{
		 height: 5px;
	}
	.scroll::-webkit-scrollbar-track{
		 background: #F1F1F1;
	}
	.scroll::-webkit-scrollbar-thumb {
		 background: #BCBCBC;
	}
	
}

@media screen and ( max-width:480px ) {
	.page_head {
		margin-top: 20px;
	}
	.page_head .page_type {
		font-size: 16px;
		padding: 2px 10px;
		border-left-width: 5px;
	}
	.page_title {
		font-size: 18px;
	}

	.btn_area {
		margin-top: 50px;
	}

	section {
		margin-bottom: 40px;
	}
	p,
	li,
	ol.decimal.bold li p {
		font-size: 14px;
	}

	.circle_list li {
		padding-left: 17px;
	}
	.circle_list li:before {
		width: 12px;
		height: 12px;
		top: 3px;
	}

	.subscription_form form .custom_select {
		width: 100%;
	}
}