@charset "UTF-8";

.mv {
	padding: 100px 0;
	text-align: center;
	background: url("/img/booking/main_bg.jpg") center center no-repeat;
	background-size: cover;
	}
@media screen and (max-width:767px){
.mv {
	padding: 10vw 0;
	}
}

.mv h1 {
	color: #fff;
	font-size: 36px;
	letter-spacing: .25em;
	text-shadow: 0 1px 3px rgba(0,0,0,.8);
	}
@media screen and (max-width:767px){
.mv h1 {
	font-size: 8vw;
	}
}

.mv h1 span {
	display: block;
	font-size: 20px;
	letter-spacing: .1em;
	}
@media screen and (max-width:767px){
.mv h1 span {
	font-size: 4vw;
	}
}

.intro {
	padding: 30px 0;
	text-align: center;
	}
@media screen and (max-width:767px){
.intro {
	padding: 10vw 4vw;
	}
}

.intro h2 {
	margin: 0 0 1em;
	font-size: 24px;
	line-height: 1em;
	letter-spacing: .25em;
	}
@media screen and (max-width:767px){
.intro h2 {
	font-size: 5vw;
	letter-spacing: .1em;
	}
}

.intro p {
	font-size: 16px;
	line-height: 2em;
	letter-spacing: .1em;
	}
@media screen and (max-width:767px){
.intro p {
	font-size: 4vw;
	}
}

.column {
	width: 100%;
	padding: 30px 0;
	text-align: center;
	}
@media screen and (max-width:767px){
.column {
	padding: 10vw 4vw;
	}
}

.column h2 {
	margin: 0 0 .5em;
	font-size: 30px;
	line-height: 1.3em;
	letter-spacing: .1em;
	}
@media screen and (max-width:767px){
.column h2 {
	font-size: 7vw;
	}
}

.column h2 span {
	display: block;
	font-size: 24px;
	}

.column p {
	display: block;
	padding: 10px 0;
	font-size: 16px;
	line-height: 2em;
	letter-spacing: .1em;
	}
@media screen and (max-width:767px){
.column p {
	padding: 2vw 0;
	font-size: 4vw;
	line-height: 1.5em;
	text-align: left;
	}
.column p br {
	display: none;
	}
}

.column p.time {
	color: #a00;
	font-size: 1.5em;
	font-weight: bold;
	}

.gcalendar {
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	}

.gcalendar iframe {
	width: 100%;
	height: 300px;
	}


/* form */

.formbox {
	width: 100%;
	padding: 30px 0;
	background: #0e93a1;
	}
@media screen and (max-width:767px){
.formbox {
	padding: 10vw 4vw;
	}
}

.formbox h2 {
	margin: 0 0 1em;
	color: #fff;
	font-size: 30px;
	text-align: center;
	line-height: 1.3em;
	letter-spacing: .1em;
	}
@media screen and (max-width:767px){
.formbox h2 {
	font-size: 7vw;
	}
}

.formbox h2 span {
	display: block;
	font-size: 24px;
	}

.formbox .form_column {
	width: 100%;
	max-width: 750px;
	margin: 0 auto 20px;
	background: rgba(255,255,255,.8);
	border-radius: 10px;
	}

.formbox .form_column p {
	padding: 10px;
	}

.formbox .form_column p.notice {
	color: #a00;
	font-size: 12px;
	}

.formbox .form_column label span {
	display: inline-block;
	font-size: 18px;
	width: 12em;
	}
@media screen and (max-width: 767px) {
.formbox .form_column label span {
	display: block;
	}
}

.formbox .form_column input {
	padding: 10px;
	width: calc( 100% - 15em);
	font-size: 16px;
	line-height: 1em;
	}
@media screen and (max-width: 767px) {
.formbox .form_column input {
	width: calc( 100%);
	}
}

.formbox .form_column textarea {
	margin-top: 10px;
	width: 100%;
	}

.formbox .food_service {
	width: 100%;
	max-width: 750px;
	margin: 0 auto 20px;
	background: rgba(255,255,255,.8);
	border-radius: 10px;
	}

.formbox .food_service:after {
	display: block;
	content: "";
	clear: both;
	}

.formbox .food_service h3 {
	display: block;
	padding: 10px;
	font-size: 18px;
	}

.formbox .food_service div {
	display: block;
	width: 50%;
	padding: 10px;
	float: left;
	}
@media screen and (max-width: 767px) {
.formbox .food_service div {
	width: 100%;
	padding: 10px 0;
	float: none;
	}
}

.formbox .food_service div img {
	display: block;
	width: 100%;
	}

.formbox .food_service label {
	display: block;
	width: 100%;
	padding: 10px 0 0 0;
	}

.formbox .food_service label.title {
	text-align: center;
	}

.formbox .food_service label.title input {
	margin: 0 5px 0 0;
	}

.formbox .food_service label.date {
	width: 50%;
	text-align: center;
	float: left;
	}
@media screen and (max-width: 767px) {
.formbox .food_service label.date {
	width: 100%;
	padding: 10px 0 0 0;
	float: none;
	}
}

.formbox .food_service label.date input {
	width: 70%;
	margin: 0 5px;
	}

.formbox .food_service label.num {
	width: 50%;
	text-align: center;
	float: left;
	}
@media screen and (max-width: 767px) {
.formbox .food_service label.num {
	width: 100%;
	padding: 10px 0 0 0;
	float: none;
	}
}

.formbox .food_service label.num input {
	width: 70%;
	margin: 0 5px;
	}

.formbox .food_service div p {
	display: block;
	clear: both;
	padding: 10px 0 0 0;
	font-size: 14px;
	line-height: 1em;
	text-align: center;
	}

.formbox .attention {
	width: 100%;
	max-width: 750px;
	margin: 0 auto 20px;
	padding: 20px 0;
	background: rgba(255,255,255,.8);
	border-radius: 10px;
	}

.formbox .attention h3 {
	padding: 10px 0 0 0;
	font-size: 20px;
	text-align: center;
	}

.formbox .attention p {
	padding: 10px;
	font-size: 14px;
	line-height: 1.5em;
	text-align: center;
	}

.attention table {
	width: 80%;
	max-width: 750px;
	margin: 0 auto;
	border: 1px solid #ccc;
	}

.attention th {
	padding: 10px;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	}

.attention td {
	padding: 10px;
	text-align: right;
	border-bottom: 1px solid #ccc;
	}

.linkbtn {
	padding: 50px 0;
	}
@media screen and (max-width: 767px) {
.linkbtn {
	width: 100%;
	}
}

.linkbtn input {
	display: block;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	padding: 20px 0 25px;
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	letter-spacing: .1em;
	line-height: 1em;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	background: #f60;
	transition: .3s ease;
	}
@media screen and (max-width: 767px) {
.linkbtn input {
	width: 100%;
	padding: 25px 0;
	}
}

.linkbtn input:hover {
	background: #fa0;
	}

/* confirm */
section#formconfirm {
	position: relative;
	width: 800px;
	margin: 0 auto 30px auto;
	padding: 30px 20px 50px 20px;
	}
@media screen and (max-width:768px){
section#formconfirm {
	width: 100%;
	}
}

section#formconfirm div.button input#backbutton {
	background: #999;
	}

section#formconfirm div.button input#backbutton:hover {
	background: #aaa;
	}

section#formconfirm p.error {
	margin: 0 0 20px 0;
	color: #c00;
	}

section#formconfirm div.errm {
	margin: 0 0 50px 0;
	padding: 30px;
	background: #fff;
	border: 2px solid #c00;
	border-radius: 5px;
	}

section#formconfirm div.errm p.error_messe {
	margin: 0;
	padding: 20px 0;
	color: #c00;
	}

section#formconfirm table {
	width: 100%;
	margin: 0 auto 20px auto;
	font-size: 16px;
	background: #fff;
	border: 1px solid #0092b1;
	border-radius: 10px;
	border-collapse: collapse;
	}

section#formconfirm table th {
	padding: 10px;
	font-weight: 300;
	}

section#formconfirm table td {
	width: 70%;
	padding: 10px;
	font-weight: 500;
	}

section#formconfirm table tr:nth-child(odd){
	background-color: #fffff3;
	}

section#formconfirm table tr:nth-child(even){
	background: #fff;
	}

section#formconfirm div.buttons {
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
	background: none;
	}

section#formconfirm div.buttons input {
	display: inline-block;
	width: 30%;
	margin: 0 5px;
	padding: 20px 0;
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	font-family: FontAwesome;
	text-align: center;
	background: #f60;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	transition: .3s ease;
	}
@media screen and (max-width:767px){
section#formconfirm div.buttons input {
	width: 45%;
	font-size: 5vw;
	}
}

section#formconfirm div.buttons input:hover {
	background: #fa0;
	}

section#formconfirm div.buttons input.backbutton {
	background: #999;
	}

section#formconfirm div.buttons input.backbutton:hover {
	background: #aaa;
	}




/* thanks */

section#thanks {
	position: relative;
	width: 700px;
	margin: 0 auto 30px auto;
	padding: 30px 20px 50px 20px;
	}
@media screen and (max-width:768px){
section#thanks {
	width: 100%;
	}
}

section#thanks h1 {
	position: relative;
	display: block;
	width: 250px;
	margin: 0 auto 50px auto;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 5px;
	text-align: center;
	}
@media screen and (max-width:767px){
section#thanks h1 {
	font-size: 30px;
	}
}

section#thanks p {
	display: block;
	padding: 20px 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.8em;
	text-align: center;
	}
@media screen and (max-width:767px){
section#thanks p {
	font-size: 16px;
	text-align: left;
	}
section#thanks p br {
	display: none;
	}
}








@media screen and (max-width: 767px) {

#intro .inner h2 {
	margin-top: 0;
	margin-bottom: 0;
	}

#rooms h2, #bathrooms h2, #outdoor h2, #others h2, #floor h2 {
	font-size: 32px;
	margin-top: 0;
	}

#rooms h3, #bathrooms h3, #outdoor h3, #others h3, #floor h3 {
	font-size: 28px;
	}

#rooms h3 span, #bathrooms h3 span, #outdoor h3 span, #others h3 span, #floor h3 span {
	display: block;
	font-size: 22px;
	}

#rooms ul, #rooms ul.col3, #bathrooms ul, #bathrooms ul.col3, #outdoor ul, #outdoor ul.col3, #others ul, #others ul.col3, #floor ul, #floor ul.col3 {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	}

#rooms ul li, #rooms ul.col3 li, #bathrooms ul li, #bathrooms ul.col3 li, #outdoor ul li, #outdoor ul.col3 li, #others ul li, #others ul.col3 li, #floor ul li, #floor ul.col3 li {
	width: 100%;
	}

}




/* .notice */

div.notice {
	padding: 30px 0;
	}
@media screen and (max-width: 767px) {
div.notice {
	padding: 30px 20px;
	}
}

div.notice .inner {
	display: block;
	width: 720px;
	margin: 0 auto;
	padding: 30px 20px;
	border: 1px solid #f00;
	border-radius: 10px;
	background: #fff;
	}

@media screen and (max-width: 767px) {
div.notice .inner {
	display: block;
	width: 100%;
	margin: 0 auto;
	}
div.notice .inner br {
	display: none;
	}
}

div.notice .inner p {
	display: block;
	padding-left: 1em;
	color: red;
	font-size: 16px;
	line-height: 2em;
	letter-spacing: 2px;
	text-indent: -1em;
	}

.total_people {
	display: inline;
	}
@media screen and (max-width: 767px) {
.total_people {
	display: block;
	}
}

.total_fee {
	text-align: center;
	}
@media screen and (max-width: 767px) {
.total_fee {
	}
}

.weekday,
.holiday {
	padding: 0 10px;
	}
@media screen and (max-width: 767px) {
.weekday,
.holiday {
	display: block;
	padding: 0;
	}
}

.weekday_fee,
.holiday_fee {
	font-size: 1.3em;
	font-weight: bold;
	padding-left: .25em;
	}

/* 20230630 odagir add */
.formbox .form_column p.linkbtn_mail_txt {
	padding: 30px 0 0 0;
	text-align: center;
	}

a.linkbtn_mail {
	display: block;
	width: 100%;
	max-width: 500px;
	margin: 20px auto;
	padding: 20px 0 25px;
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	letter-spacing: .1em;
	line-height: 1em;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	background: #f60;
	transition: .3s ease;
	}
@media screen and (max-width: 767px) {
a.linkbtn_mail {
	width: 80%;
	padding: 25px 0;
	font-size: 5vw;
	}
}

a.linkbtn_mail:hover {
	background: #fa0;
	}

ul.linkbtn_mail_notice {
	display: block;
	padding: 2em;
	list-style-type: none;
	}

ul.linkbtn_mail_notice li {
	display: block;
	margin: 0 0 .5rem;
	padding-left: 1em;
	text-indent: -1em;
	color: #c00;
	}

/* 20231208 odagiri add */
.relation {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	}

.relation li {
	display: block;
	width: 49%;
	}
@media screen and (max-width: 767.98px) {
.relation li {
	width: 100%;
	margin: 0 0 2rem;
	}
}

.relation li h3 {
	display: block;
	color: #333;
	font-size: 1.25em;
	}

.relation li p {
	display: block;
	color: #333;
	font-size: .8em;
	line-height 1.2em;
	text-align: left;
	}
@media screen and (max-width: 767.98px) {
.relation li p {
	font-size: 1em;
	}
}

.relation li p br {
	display: none;
	}

.relation li .btn {
	display: block;
	padding: 1rem 0;
	color: #fff;
	background: #0e93a1;
	border-radius: 5px;
	transition: .3s ease
	}

.relation li .btn:hover {
	opacity: .8;
	}