@charset "utf-8";


/*
 * mainview
 */

/* @smartphone */
@media screen and (max-width: 767px) {
#mainview {

}
	#mainview > .wrap {
		-webkit-transition: 1.0s linear;
		-moz-transition: 1.0s linear;
		-o-transition: 1.0s linear;
		transition: 1.0s linear;
		opacity: 0;
	}
	#mainview > .wrap.show {
		opacity: 1;
	}
		/* image */
		#mainview figure {
			padding-top: 47.2%;
			background-image: url(../img/sp/mainview_img.jpg);
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}
		/* article */
		#mainview .article {
			text-align: center;
		}
			#mainview .article p {
				margin-top: 10.4%;
				font-size: 15px;
				font-size: 4vw;
				line-height: 1.1;
			}
			#mainview .article h2 {
				margin-top: 3.2%;
				font-size: 35px;
				font-size: 9.333vw;
				line-height: 1.1;
			}
			#mainview .article dl {
				margin-top: 6%;
				padding-bottom: 12%;
			}
				#mainview .article dt {
					font-size: 18px;
					font-size: 4.8vw;
					color: #2d2d2d;
				}
				#mainview .article dd {
					margin-top: 3%;
					font-size: 13px;
					font-size: 3.467vw;
					color: #2d2d2d;
					line-height: 1.667;
				}
}

/* @monitor */
@media screen and (min-width: 768px) {
#mainview {

}
#mainview .sp {
	display: none;
}
	#mainview > .wrap {
		-webkit-transition: 1.0s linear;
		-moz-transition: 1.0s linear;
		-o-transition: 1.0s linear;
		transition: 1.0s linear;
		opacity: 0;
	}
	#mainview > .wrap.show {
		opacity: 1;
	}
		/* image */
		#mainview figure {
			padding-top: 37.847%;
			background-image: url(../img/mainview_img.jpg);
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}
		/* article */
		#mainview .article {
			max-width: 1440px;
			margin: 6.5% auto 0;
			text-align: center;
		}
			#mainview .article p {
				margin-top: 3.5%;
				font-size: 18px;
				line-height: 1.1;
			}
			#mainview .article h2 {
				margin-top: 1.1%;
				font-size: 40px;
				line-height: 1.1;
			}
			#mainview .article dl {
				margin-top: 1.8%;
				padding-bottom: 4.8%;
			}
				#mainview .article dt {
					font-size: 20px;
					color: #2d2d2d;
				}
				#mainview .article dd {
					margin-top: 0.9%;
					font-size: 15px;
					color: #2d2d2d;
					line-height: 1.667;
				}
}





/*
 * menu
 */

/* @smartphone */
@media screen and (max-width: 767px) {
#menu {

}
	/* header */
	#menu .header {
		background-color: #2f2f2f;
	}
		#menu .header > .wrap {
			position: relative;
		}
					#menu .header section {
						display: block;
						padding: 5% 0;
						color: #fff;
						text-align: center;
					}
					#menu .header section h3{
						/*font-size: 30px;*/
						font-size: 8vw;
					}
					#menu .header section p {
						/*font-size: 16px;*/
						font-size: 4.5vw;
					}
	/* article */
	#menu .article {
		position: relative;
		margin-bottom: 12%;
	}
	#menu .article:before {
		content: '';
		position: absolute;
		left: 10%;
		right: 10%;
		bottom: 0;
		display: block;
		height: 1px;
		border-top: 0.99px solid #cdcdcd;
	}
	/* article */
	#menu .article {

	}
	#menu .item {
		max-width: 1320px;
		margin: 10% auto 12%;
		padding: 0 3%;
	}

	#menu .item .left {
		margin-bottom: 5%;
	}
	#menu .item .left img{
		max-width: 100%;
	}
	#menu .item .left .length{
	}
	#menu .item .btn{
		margin-bottom: 12%;
		padding: 0 7.6%;
		text-align: center;
	}
	#menu .item .btn a{
		display: block;
		position: relative;
		padding: 8px 10px 9px;
		background-color: #840000;
		color: #fff;
		/*font-size: 14px;*/
		font-size: 3.6vw;
		text-decoration: none;
	}
	#menu .item .btn a:before{
		display: inline-block;
		position: relative;
		top: -2px;
		width: 0;
		height: 0;
		margin-right: 5px;
		border: 3px solid transparent;
		border-left: 5px solid #fff;
		content: "";
	}

	#menu .item .right {
		position: relative;
	}
	#menu .item .right figure {
		position: relative;
	}
	#menu .item .right figure i {
		display: block;
		padding-top: 60%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	#menu .controll {
		margin-top: 11%;
		margin-bottom: 11%;
		text-align: center;
	}
	#menu .swiper-button-prev {
		display: block;
		position: absolute;
		top: 38%;
		left: -8%;
		width: 18px;
		height: 18px;
		margin: 0;
		background-color: none;
		background-image: url(../../common/img/slide_prev_black.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: auto 18px;
	}
	#menu .swiper-button-next {
		display: block;
		position: absolute;
		top: 38%;
		right: -8%;
		width: 18px;
		height: 18px;
		margin: 0;
		background-color: none;
		background-image: url(../../common/img/slide_next_black.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: auto 18px;
	}
	#menu .swiper-pagination {
		display: inline-block;
		position: relative;
		margin: 0 15px;
	}
	#menu .swiper-pagination span{
		width: 2em;
		height: 2em;
		margin: 0 5px;
	}
	#menu .swiper-pagination-bullet-active {
		background-color: #840000;
	}

	#menu .item .content {
		max-width: 1440px;
		margin: 0 auto;
	}
	#menu .item .content .caption {
		display: block;
		position: relative;
		bottom: 0;
		width: 100%;
		/*padding: 11px 0 10px;*/
		padding: .5em 0;
		background-color: #f7f7f7;
		/*font-size: 14px;*/
		font-size: 4.5vw;
		line-height: 1.625;
		text-align: center;
		z-index: 1;
	}
	#menu .item .content .number {
		padding-bottom: 0.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 1em;
		width: 7vw;
		height: 7vw;
    color: #fff;
    border-radius: 50px;
		background: #A40000;
    line-height: 1;
		top: 50%;
		transform: translateY(-50%);
	}
	#menu .item .content li {
		margin-top: 1.8%;
		font-size: 16px;
		color: #2d2d2d;
		line-height: 1.625;
	}
	#menu .item .info {
		width: 100%;
		border-top: 1px solid #cdcdcd;
		font-size: 14px;
	}
	#menu .item .info th.bold {
		width: 100px;
		font-weight: bold;
	}
	#menu .item .info th {
		width: 60px;
		padding: 6px 0 6px;
	}
	#menu .item .info td {
		position: relative;
		padding: 6px 0 6px;
	}
	#menu .item .info td:before {
		display: inline-block;
		width: 2px;
		height: 10px;
		margin-right: 15px;
		background-color: #a7a7a7;
		content: "";
	}

	.info-dl{ 
		padding: 0 7.6%;
		font-size: 3.8vw;
		font-weight: bold;
	}
	.info-dl > dt{ 
		padding: .5em .7em;
		background: #595959;
		color: #fff;
		line-height: 1;
	}
	.info-dl + .info-dl{
		margin-top: 2em;
	}
	.info-data{
		padding: .5em 0;
		display: flex;
		align-items: flex-start;
		border-bottom: 1px solid #ddd;
	}
	.info-data > dt{
		width: 21%;
		position: relative;
	}
	.info-data > dt::after{
		content: "";
		width: .1em;
		height: 1em;
		position: absolute;
		right: 0;
		top: 0.3em;
		background: #a4a4a4;
	}
	.info-data > dd{
		padding-left: 1em;
		width: 79%;
	}
	.info-data > dd span{
		font-size: 2.8vw;
	}



}

/* @monitor */
@media screen and (min-width: 768px) {
#menu {

}
#menu .sp {
	display: none;
}
	/* header */
	#menu .header {
		background-color: #2f2f2f;
	}
		#menu .header > .wrap {
			max-width: 1440px;
			margin: 0 auto;
		}
			#menu .header .btn_navi {
				display: none;
			}
			#menu .header section {
				display: block;
				padding: 2.5% 0;
				color: #fff;
				text-align: center;
			}
				#menu .header section h3{
					font-size: 30px;
				}
				#menu .header section p {
					font-size: 16px;
				}
	/* article */
	#menu .article {

	}
		#menu .item {
			position: relative;
			max-width: 1320px;
			margin: 4% auto 8%;
			padding: 0 10%;
		}
			#menu .item1 {
				margin-bottom: 10%;
			}
			#menu .item .left {
				float: left;
				width: 46%;
				min-height: 400px;
			}
				#menu .item .left img{
					max-width: 100%;
				}
				#menu .item .left .length{
					padding: 0 10%;
				}
				#menu .item .btn{
					position: absolute;
					bottom: -60px;
					margin-left: 3.6%;
					text-align: center;
				}
				#menu .item .btn a{
					display: block;
					position: relative;
					padding: 8px 15px 9px;
					background-color: #840000;
					color: #fff;
					font-size: 13px;
					text-decoration: none;
				}
				#menu .item .btn a:before{
					display: inline-block;
					position: relative;
					top: -2px;
					width: 0;
					height: 0;
					margin-right: 5px;
					border: 3px solid transparent;
					border-left: 5px solid #fff;
					content: "";
				}

			#menu .item .right {
				float: right;
				position: relative;
				width: 46%;
			}
				#menu .item .right figure {
					position: relative;
				}
					#menu .item .right figure i {
						display: block;
						padding-top: 60%;
						background-repeat: no-repeat;
						background-position: center;
						background-size: cover;
					}

					#menu .controll {
						margin-top: 15px;
						margin-bottom: 30px;
						text-align: center;
					}
					#menu .swiper-button-prev {
						display: inline-block;
						position: relative;
						top: 1px;
						width: 12px;
						height: 12px;
						margin: 0;
						background-color: none;
						background-image: url(../../common/img/slide_prev_black.png);
						background-repeat: no-repeat;
						background-position: center;
						background-size: auto 12px;
					}
					#menu .swiper-button-next {
						display: inline-block;
						position: relative;
						top: 1px;
						width: 12px;
						height: 12px;
						margin: 0;
						background-color: none;
						background-image: url(../../common/img/slide_next_black.png);
						background-repeat: no-repeat;
						background-position: center;
						background-size: auto 12px;
					}
				#menu .swiper-pagination {
					display: inline-block;
					position: relative;
					margin: 0 15px;
				}
					#menu .swiper-pagination span{
						width: 10px;
						height: 10px;
						margin: 0 5px;
					}
				#menu .swiper-pagination-bullet-active {
					background-color: #840000;
				}

			#menu .item .content {
				max-width: 1440px;
				margin: 0 auto;
			}
				#menu .item .content .caption {
					display: block;
					position: relative;
					bottom: 0;
					width: 100%;
					padding: 11px 0 10px;
					background-color: #f7f7f7;
					font-size: 14px;
					line-height: 1.625;
					text-align: center;
					z-index: 1;
				}
				#menu .item .content .number {
					padding-bottom: 0.2em;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					left: 20px;
					width: 29px;
					height: 29px;
					color: #fff;
					border-radius: 50px;
					background: #A40000;
					line-height: 1;
					top: 50%;
					transform: translateY(-50%);
				}


					#menu .item .content li {
						margin-top: 1.8%;
						font-size: 16px;
						color: #2d2d2d;
						line-height: 1.625;
					}
			#menu .item .info {
				width: 100%;
				border-top: 1px solid #cdcdcd;
				border-bottom: 1px solid #cdcdcd;
				font-size: 14px;
			}
			#menu .item .info th.bold {
				width: 100px;
				font-weight: bold;
			}
			#menu .item .info th {
				width: 60px;
				padding: 6px 0 5px;
			}
			#menu .item .info td {
				position: relative;
				padding: 6px 0 5px;
			}
			#menu .item .info td:before {
				display: inline-block;
				width: 2px;
				height: 10px;
				margin-right: 15px;
				background-color: #a7a7a7;
				content: "";
			}

			.info-dl{ 
				font-size: 14px;
				font-weight: bold;
			}
			.info-dl > dt{ 
				padding: 8px 10px;
				background: #595959;
				color: #fff;
        line-height: 1;
			}
			.info-dl + .info-dl{
				margin-top: 20px;
			}
			.info-data{
				padding: .5em 0;
				display: flex;
				align-items: flex-start;
				border-bottom: 1px solid #ddd;
			}
			.info-data > dt{
				width: 14%;
				position: relative;
			}
			.info-data > dt::after{
				content: "";
				width: 2px;
				height: 10px;
				position: absolute;
				right: 0;
				top: 0.5em;
				background: #a4a4a4;
			}
			.info-data > dd{
				padding-left: 1em;
				width: 86%;
			}
			.info-data > dd span{
				font-size: 12px;
			}
			

}

/* images */
#menu .item1 .img1 i { background-image: url(../img/menu_item01_img02.jpg); }
#menu .item1 .img2 i { background-image: url(../img/menu_item01_img02.jpg); }
#menu .item1 .img3 i { background-image: url(../img/menu_item01_img02.jpg); }

#menu .item2 .img1 i { background-image: url(../img/menu_item01_img02.jpg); }
#menu .item2 .img2 i { background-image: url(../img/menu_item01_img02.jpg); }
#menu .item2 .img3 i { background-image: url(../img/menu_item01_img02.jpg); }






/*
 * reserve
 */

/* @smartphone */
@media screen and (max-width: 767px) {
#reserve {

}
}

/* @monitor */
@media screen and (min-width: 768px) {
#reserve {
	background-color: #f9f9f9;
}