@charset "UTF-8";

/*++---------------------------------------------++*/
/* cv
++-----------------------------------------------++*/
.btn{
	display: inline-block;
	background-color: #7CCFC8;
	color: #fff;
	margin: 0;
	width: 100%;
	max-width: 700px;
	text-align: center;}

.btn p{
	display: inline-block;
	color: #fff;
	font-weight: bold;
	letter-spacing: .2rem;}


@media (min-width: 1025px){
	.btn p{
		padding: 1.5em 0em;
		font-size: 1.8rem;
		letter-spacing: .2rem;}
}

@media (max-width: 1024px){
	.btn p{
		padding: 1em 0;
		font-size: 1.6rem;
		letter-spacing: .2rem;}
}


/* layout
++--------------------------------------------++*/
.page-inner{
	background: #FFF;
	border: 1px solid #ddd;}

.page-bk{
	background: var(--color-bk5);}

@media (min-width: 768px){
	.page-inner{
		min-width: var(--width-min);
		max-width: var(--width-max);
		margin: 0px auto;}

	.page-wrapper{
		padding: 1em 4em}
}

@media (max-width: 767px){
	.page-inner{
		width: 95%;
		margin: 0 auto;}

	.page-wrapper{
		padding: 1em 1em}
}

/*
++--------------------------------------------++*/
/* 月間予約カレンダー */
.monthly-calendar, .day-calendar{
	margin: 0em 0 3em;}

.monthly-calendar table, .day-calendar table{
	font-family: 'Noto Sans JP', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', serif;}

.monthly-calendar table{
	width: 98%;}

.monthly-calendar table tbody th{
	padding: 0.5em 1em;}

.monthly-calendar table tbody td{
	border: solid 1px #DEBEAD;}

@media (min-width: 768px){
	.monthly-calendar table tbody td{
		padding: 2em;}
}

@media (max-width: 767px){
	.monthly-calendar table tbody td{
		padding: 0;}
}

.monthly-calendar caption, .monthly-prev, .monthly-next{
	font-size: 20px; font-size: 2.0rem;}

.monthly-calendar caption {
	text-align: center;
	padding: 0 0 0em;}

.monthly-calendar th {
	font-size: 16px; font-size: 1.6rem;
	font-weight: bold;}

.week-title.sun,
.day-box.sun .day-number {
	color: #ff6347;}

.week-title.sat,
.day-box.sat .day-number {
	color: #4169e1;}

.day-box.holiday .day-number {
	color: #ff6347;}

.monthly-calendar th,
.monthly-calendar td {
	text-align: center;}

.monthly-calendar td {
	padding: 1em 0;}

.day-box.no-day {
	background-color: #f0f0f0;}

.day-box.today {
	background-color: #ffffe0;}

/*予約マーク*/
.calendar-daylink{
	display: block;
	color: #5CB3FA;
	font-weight: bold;}

.calendar-mark {
	color: var(--color-p2);}


@media (min-width: 768px){
	.calendar-daylink{
		font-size: 32px; font-size: 3.2rem;}
	.calendar-mark {
		font-size: 30px; font-size: 3.0rem;}
}

@media (max-width: 767px){
	.calendar-daylink{
		font-size: 32px; font-size: 3.2rem;}
	.calendar-mark {
		font-size: 30px; font-size: 3.0rem;}
}

.monthly-prev {
	padding: 1em 0 0;
	float: left;}

.monthly-next {
	float: right;
	padding: 1em 0 0;
	margin-right: 1em;}

/*時間の指定*/
.day-calendar h3{
	font-size: 20px; font-size: 2.0rem;
	margin: 1em 0 1em;
	padding: 0.25em 0.5em;/*上下 左右の余白*/
	color: var(--color-p2);/*文字色*/
	background: transparent;/*背景透明に*/
	border-left: solid 5px var(--color-bk2);}

.day-calendar table{
	width: 50%;}

.booking-timelink{
	display: block;
	font-weight: bold;
	color: #5CB3FA;}

.day-left, .day-right{
	border: solid 1px #DEBEAD;}

.day-calendar th,
.day-calendar td {
	font-size: 16px; font-size: 1.6rem;
	text-align: center;
	padding: 1em 1em;
	vertical-align: middle;}

.booking-timelink {
	display: block;}

/* 記入
++--------------------------------------------++*/
.kiji-head h1{
	text-align: center;
	background-color: var(--color-bk2);
	color: #404040;
	font-family: var(--font-gothic);
	font-size: 24px; font-size: 2.4rem;
	margin: 0px 0px 1em;
	padding: 0.5em 0;}

/* 予約フォーム */
.content-form fieldset{
	border: 1px solid #dddddd;
	padding: 1em 2em 2em;
	margin: 0 0 1.5em 0;
	width: 99%;}

.content-form legend{
	font-size: 20px; font-size: 2.0rem;
	font-weight: bold;
	padding: 0 1em;}

.content-form table {
	margin: 0 0 0.5em 0;
	width: 99%;}

.content-form th,
.content-form td {
	border-top: none;
	border-left: none;
	border-right: 1px solid #dddddd;
	border-bottom: 1px solid #dddddd;
	padding: 0.5em 1em;
	/*vertical-align: middle;*/}

.content-form th{
	border: solid 1px #DEBEAD;
	background: var(--color-bk3);}

.content-form th {
	text-align: right;
	font-size: 16px; font-size: 1.6rem;
	/*line-height: 2.2rem;*/
	padding-right: 1em;
	vertical-align: top;
	width: 30%;}

.content-form input,
.content-form textarea {
	font-size: 16px; font-size: 1.6rem;
	padding: 0.25em 0.25em;
	margin-bottom: 0.25em;}

#booking-note{
	height: 10em;}

.booking-corse {
	font-family: 'Noto Sans JP', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', serif;
	padding: 0.5em 0.25em;}

@media (min-width: 768px){
	.kiji-wrapper{
		padding: 1em 4em;
		margin: 0 0 2em;}

	.content-text.small {
		width: 3rem;}

	.content-text.medium {
		width: 50%;}

	.content-text.fat {
		width: 95%;}
}

@media (max-width: 767px){
	.content-form th,
	.content-form td {
		display: block;
		width: 100%;}

	.content-form th{
		text-align: left;
		padding: 0.5em 1em;
		margin: 1em 0 0.5em;}

	.booking-corse-option{
		width: 100%;}

	.kiji-wrapper{
		padding: 1em;
		margin: 0 0 2em;}

	.content-text.small {
		width: 3rem;}

	.content-text.medium {
		width: 100%;}

	.content-text.fat {
		width: 100%;}
}

.content-form button {
	font-size: 18px; font-size: 1.8rem;
	color: #fff;
	border: solid 1px #B2B2B2;
	background: var(--color-accent3);
	display: block;
	margin: 0 auto;
	text-align: center;
	padding: 0.5em 1em;
	letter-spacing: 1em;}

.content-form button:hover{
	cursor: pointer;
	opacity: 0.8;}

.input-number {
	float: left;
	margin-right: 1em;
	text-align: center;}

input.right {
	text-align: right;}

.content-form .error-message {
	clear: both;
	color: red;}

.content-form .required {
	color: red;}

/* 予約確認
++--------------------------------------------++*/
.option-confirm-header{
	padding: 2em 0 0.5em 0 !important;}

.option-confirm-header:before{
	content: '■';
	padding: 0 0.5em 0 0}


/*++---------------------------------------------++*/
/* 恒久的
++-----------------------------------------------++*/
.mail{
	margin: 1em 0em 2em}

.mail p{
	padding: 0;
	line-height: 1.7;}

ul.line{
	padding: 0.5em 0;
	list-style: disc inside;
	line-height: 2.0;}