@charset "UTF-8";
/* ===================================================================
CSS information

 file name  : yoyaku.css
 author     : Ability Consultant
 style info : 宿泊予約
=================================================================== */
.con_rsv, .other .box_r {
	max-width: 1140px;
	margin: auto;
}

@media only screen and (max-width: 1140px) {
	.con_rsv, .other .box_r {
		width: 95%;
	}
}

@media print {
	.con_rsv, .other .box_r {
		width: 95%;
	}
}

.ie8 .con_rsv, .ie8 .other .box_r, .other .ie8 .box_r {
	width: 95%;
}

.con_intro .picup:after, .con_intro .picup_sp .box:after, .con_info:after, .con_members:after, .con_begin .box_begin:after, .con_online .box:after {
	content: "";
	display: table;
	clear: both;
}

#bg_page {
	background-image: url(../yoyaku/images/bg_title-pc.jpg);
}

@media only screen and (max-width: 767px) {
	#bg_page {
		background-image: url(../yoyaku/images/bg_title-sp.jpg);
	}
}

/* -----------------------------------------------------------
	.con_rsv
----------------------------------------------------------- */
.con_rsv {
	max-width: 1140px;
	margin: auto;
}

/* -----------------------------------------------------------
	.con_intro
----------------------------------------------------------- */
.con_intro {
	margin-bottom: 5em;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.con_intro {
		margin-bottom: 3em;
	}
}

@media only screen and (max-width: 767px) {
	.con_intro {
		margin-bottom: 5%;
	}
}

.con_intro .picup {
	margin-top: 10px;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.con_intro .picup {
		margin-top: 2px;
	}
}

@media only screen and (max-width: 767px) {
	.con_intro .picup {
		margin-top: 6px;
	}
}

.con_intro .picup .box {
	margin: 8px 22px 0 0;
	float: left;
	width: 32%;
	text-align: center;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.con_intro .picup .box {
		margin: 8px 12px 0 0;
	}
}

@media only screen and (max-width: 767px) {
	.con_intro .picup .box {
		width: 100%;
		margin: 4px 0 0 0;
		overflow: hidden;
		margin-bottom: 5px;
	}
	.con_intro .picup .box .img {
		float: left;
		width: 32%;
	}
}

.con_intro .picup .box:last-child {
	margin-right: 0;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.con_intro .picup .box:last-child {
		margin-left: 5px;
	}
}

.con_intro .picup .box .txt {
	font-size: 115%;
	margin-top: 5px;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.con_intro .picup .box .txt {
		font-size: 115%;
	}
}

@media only screen and (max-width: 767px) {
	.con_intro .picup .box .txt {
		font-size: 86%;
	}
}

@media only screen and (max-width: 767px) {
	.con_intro .picup .box .txt {
		width: 65%;
		float: right;
		text-align: left;
	}
}

.con_intro .picup_sp {
	margin-top: 6px;
}

.con_intro .picup_sp .box {
	width: 100%;
	margin-bottom: 5px;
}

.con_intro .picup_sp .box .img {
	float: left;
	width: 32%;
}

.con_intro .picup_sp .box .txt {
	width: 65%;
	float: right;
}

/* -----------------------------------------------------------
	.con_members
----------------------------------------------------------- */
.con_info {
	margin-bottom: 6em;
	clear: both;
	border: 1px #ccc solid;
	padding: 20px;
	text-align: center;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.con_info {
		margin-bottom: 3em;
	}
}

@media only screen and (max-width: 767px) {
	.con_info {
		margin-bottom: 10%;
	}
}

@media only screen and (max-width: 767px) {
	.con_info {
		padding: 10px;
	}
}

.con_info .catch {
	font-size: 172%;
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", YuMincho, "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
	color: #063c6c;
	margin-bottom: 2%;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.con_info .catch {
		font-size: 158%;
	}
}

@media only screen and (max-width: 767px) {
	.con_info .catch {
		font-size: 115%;
	}
}

/* -----------------------------------------------------------
	.con_members
----------------------------------------------------------- */
.con_members {
	margin-bottom: 6em;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.con_members {
		margin-bottom: 3em;
	}
}

@media only screen and (max-width: 767px) {
	.con_members {
		margin-bottom: 10%;
	}
}

.con_members .st_high {
	border-bottom: 1px solid #cccccc;
	padding-bottom: 15px;
}

.con_members .txt {
	text-align: center;
	margin-bottom: 10px;
}

.con_members .btns {
	text-align: center;
	margin-top: 30px;
}

.con_members .btns li {
	display: inline-block;
	vertical-align: middle;
	margin: 0 10px;
}

@media only screen and (max-width: 767px) {
	.con_members .btns li {
		margin: 0 0 6px;
	}
}

.con_members .btns li a {
	min-width: 350px;
	padding: 1.5em 30px;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.con_members .btns li a {
		min-width: 320px;
	}
}

@media only screen and (max-width: 767px) {
	.con_members .btns li a {
		min-width: 350px;
		padding: 0.5em 30px;
	}
}

/* -----------------------------------------------------------
	.con_begin
----------------------------------------------------------- */
.con_begin {
	margin-bottom: 6em;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.con_begin {
		margin-bottom: 3em;
	}
}

@media only screen and (max-width: 767px) {
	.con_begin {
		margin-bottom: 10%;
	}
}

.con_begin .st_high {
	border-bottom: 1px solid #cccccc;
	padding-bottom: 15px;
}

.con_begin .box_begin .img {
	float: left;
	width: 35%;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.con_begin .box_begin .img {
		width: 40%;
	}
}

@media only screen and (max-width: 767px) {
	.con_begin .box_begin .img {
		width: 100%;
	}
}

.con_begin .box_begin .box {
	float: right;
	width: 64%;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.con_begin .box_begin .box {
		width: 58%;
	}
}

@media only screen and (max-width: 767px) {
	.con_begin .box_begin .box {
		width: 100%;
	}
}

.con_begin .box_begin .box .txt {
	float: left;
	margin-bottom: 15px;
}

@media only screen and (max-width: 767px) {
	.con_begin .box_begin .box .txt {
		margin: 6px 0 10px;
	}
}

@media only screen and (max-width: 767px) {
	.con_begin .box_begin .box .btn {
		width: 100%;
	}
}

.con_begin .box_begin .box .btn a {
	padding: 1.5em 30px;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.con_begin .box_begin .box .btn a {
		padding: 0.5em 30px;
	}
}

@media only screen and (max-width: 767px) {
	.con_begin .box_begin .box .btn a {
		min-width: 100%;
		padding: 0.5em 30px;
	}
}

.con_begin .con_att {
	font-color: #fff;
	border: 4px double #987010;
	margin-top: 30px;
	padding: 20px 0;
}

.con_begin .con_att .subtxt {
	padding-left: 2%;
}

.con_begin .con_att .tbl_secondary {
	width: 95%;
	margin: 0 auto;
}

@media only screen and (max-width: 767px) {
	.con_begin .con_att .tbl_secondary tr th {
		width: 100%;
	}
}

/* -----------------------------------------------------------
	.con_online
----------------------------------------------------------- */
.con_online {
	margin-bottom: 6em;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.con_online {
		margin-bottom: 3em;
	}
}

@media only screen and (max-width: 767px) {
	.con_online {
		margin-bottom: 10%;
	}
}

.con_online .box {
	margin-bottom: 6%;
	clear: both;
	margin-bottom: 60px;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.con_online .box {
		margin-bottom: 4%;
	}
}

@media only screen and (max-width: 767px) {
	.con_online .box {
		margin-bottom: 6%;
	}
}

.con_online .box .txt {
	float: left;
	width: 48%;
}

@media only screen and (max-width: 1024px) {
	.con_online .box .txt {
		width: 100%;
	}
}

.con_online .box .img {
	float: right;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.con_online .box .img {
		float: left;
		margin: 15px 0 20px;
	}
}

@media only screen and (max-width: 1024px) {
	.con_online .box .img {
		margin: 15px 0 20px;
	}
}

/* -----------------------------------------------------------
	.con_other
----------------------------------------------------------- */
.other {
	overflow: hidden;
}

.other .box_l {
	float: left;
	width: 55%;
}

@media only screen and (max-width: 767px) {
	.other .box_l {
		width: 100%;
	}
}

.other .box_r {
	float: right;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.other .box_r {
		width: 40%;
	}
}

@media only screen and (max-width: 767px) {
	.other .box_r {
		width: 100%;
	}
}

.other .box_r .btn {
	margin: 8px 0px;
}

.other .box_r .btn a {
	padding: 1% 30px;
	min-width: 360px;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.other .box_r .btn a {
		min-width: 285px;
	}
}

@media only screen and (max-width: 767px) {
	.other .box_r .btn a {
		min-width: 100%;
	}
}

/*# sourceMappingURL=../maps/yoyaku.css.map */