@charset "utf-8";
@use "variables" as var;
@use "mixin" as mix;
@use "mixin_svg" as svg;


/* reset
-------------------------------------------------------*/
/*
*{
	outline:1px #ff0000 solid;
}
*/

.vk-mobile-nav, .mobile-fix-nav {
	display: none !important;
}

.device-mobile .gMenu>li {
	padding: 0 !important;
}

.gMenu li li {
	background-color: transparent !important;
}

.gMenu>li:before {
	position: inherit !important;
	border-bottom: none !important;
}

ol,
ul{
	list-style-type:none;
}

h1,h2,h3,h4,h5,h6,h7{
	font-style: normal;
	font-size: 100%;
	font-weight: normal;
}

/* base
-------------------------------------------------------*/
body{

	height:100%;
	overflow:hidden;
}
/*
.preload *{
	-webkit-transition: none !important;
	transition:none !important;
}
*/

div.pageWrap{
	position: relative;
	width:100%;
	text-align:left;
}

.ofi-img{
	width:100%;
	height:100%;
	object-fit: cover;
	object-position: center center;
	font-family: 'object-fit:cover;object-position:center center;';
}

/* layout
-------------------------------------------------------*/
footer{

	dl, ol, ul {
		margin: 0;
		font-weight: normal;
	}

	dd, dt {
		margin:0;
		padding: 0;
		border: none;
		font-weight: normal;
	}
		
	a {
		color: black;
		margin:0;
		padding: 0;

		&:hover {
			color: black;
			text-decoration: none;
		}
	}

	.footer-wrapper {
		max-width: 1000px;
		width: 96%;
		margin: 0 auto;
		position:relative;
		padding-top: 105px;
	
		.foot-head-inner{
			@include mix.flexbox;
			@include mix.flexset(space-between,center);
			margin-bottom: 110px;
	
			.footer-left {
				@include mix.flexbox;
				@include mix.flexset(space-between,center);
	
				.foot-logo{
					width: 225px;
					height: 70px;
					margin-right: 25px;
	
					img {
						width: 100%;
						height: auto;
					}
				}
	
				.foot-address {
					p {
						margin-bottom: 5px;
						font-size: 14px;
						letter-spacing: 0.1em;
						line-height: 1.57;
					}
	
					a {
						display: block;
						@include mix.flexbox;
						@include mix.flexset(flex-end,center);
						padding-right: 25px;
	
						span {
							position: relative;
							font-size: 14px;
							letter-spacing: 0.1em;
							line-height: 1.57;
	
							&::after {
								@include mix.arrow(6px, 1px, black, 0, -50%, right);
								top: 50%;
								right: -20px;
							}
						}
					}
				}
			}
	
			.footer-right {
				@include mix.flexbox;
				@include mix.flexset(space-between,center);
	
				li {
					padding: 0 20px;
	
					&:last-child {
						margin-right: 0;
					}
	
					a {
						@include mix.flexbox;
						@include mix.flexset(center,center);
						width: 30px;
						height: 30px;
	
						img {
							width: 100%;
							height: auto;
						}
					}
				}
			}
		}
	
		.foot-inner{
			a {
				position: relative;
				color: black;
				display: inline-block !important;
				border: none !important;
	

				&::before {
					content: '';
					position: absolute;
					display: block;
					bottom: -5px;
					left: 0;
					width: 0px;
					height: 1px;
					background-color: black;
					@include mix.transition;
				}
			}

			.large-category {
				@include mix.flexbox;
				@include mix.justify(space-between);
	
				.large-list {
					width: calc((100% - 30px)/3);
					margin-bottom: 110px;

					> aside {
						>div {
							>ul {
								>li {
									>a {
										padding: 0;
										font-size: 18px;
										line-height: 1.4;
										margin-bottom: 30px;
										letter-spacing: -0.02em;
									}
								}
							}
						}
					}

					.sub-menu {
						.sub-menu {
							margin-top: 15px;
						}

						li {
							margin-bottom: 15px;

							a {
								font-size: 12px;
								line-height: 1.4;
								padding: 0 !important;
							}
						}
					}
	
					dl {
						dt {
							font-size: 18px;
							line-height: 1.4;
							margin-bottom: 30px;
							letter-spacing: -0.02em;
						}
	
						dd {
							.middle-category {
								.middle-list {
									margin-bottom: 15px;
	
									a {
										font-size: 12px;
										line-height: 1.4;
									}
	
									.small-category {
										padding: 15px 0 0 12px;
	
										.small-list {
											margin-bottom: 15px;
	
											a {
												font-size: 12px;
												line-height: 1.4;
											}
										}
									}
								}
							}
						}
					}
				}
			}

		}
	}

	.copyright{
		padding: 35px 0;
		background-color: #f0f0f0;
		font-size: 12px;
		text-align: center;
		letter-spacing: 0.3em;
		margin: 0;
	}
}

header.renewal {
	position: relative;
	display: none;
	@include mix.flexbox;
	@include mix.flexset(space-between,center);
	top: 0;
	left: 0;
	width:100%;
	height: 100px;
	margin:0 auto;
	z-index: 50;
	padding: 0 15px 0 45px;
	
	&.top-header {
		position:absolute;
	}

	
	dl, ol, ul {
		margin: 0;
		font-weight: normal;
	}

	dd, dt {
		margin:0;
		padding: 0;
		border: none;
		font-weight: normal;
	}
	
		
	a {
		color: black;
		margin:0;
		padding: 0;

		&:hover {
			color: black;
			text-decoration: none;
		}
	}

	.head-logo{
		width: 250px;
		height: 100%;
		margin-right: 20px;
		padding: 10px 0;

		a {
			@include mix.flexbox;
			@include mix.flexset(center,center);
			width: 100%;
			height: 100%;

			img {
				width: 100%;
				height: auto;
			}
		}
	}

	.menu_wrapper {
		@include mix.flexbox;
		@include mix.flexset(flex-end,center);

		> nav {
			height: 100%;

			> ul {
				@include mix.flexbox;
				@include mix.flexset(flex-end,center);

				a{
					@include mix.flexbox;
					@include mix.flexset(center,center);
					height: 100%;
					padding: 10px 20px;
					font-size: 14px;
					text-align: center;
					letter-spacing: -0.02em;
					@include mix.transition;
		
					&:hover {
						opacity: 0.6;
					}
				}
			}
		}

		.other-link {
			@include mix.flexbox;
			@include mix.flexset(flex-start,center);

			li {
				&.reserve-area {
					@include mix.flexbox;
					@include mix.flexset(center,center);
					margin: 0 0 0 15px;
	
					.contact-btn {
						a {
							@include mix.flexbox;
							@include mix.flexset(center, center);
							position: relative;
							width: 220px;
							height: 65px;
							margin: 0 auto;
							background: linear-gradient(135deg, #ffc561 0%, #edce00 100%);
							border: 1px solid transparent;
							border-radius: 32.5px;
							line-height: 1.2;
							@include mix.transition;
	
							&::before,
							&::after {
								content: "";
								display: block;
								width: 35px;
								height: 27px;
								@include mix.absolute-center(50%, 50%);
								top: 50%;
								left: 30px;
								@include mix.transition;
							}
	
							&::before {
								background: url(../common/images/calendar.png) no-repeat top center/contain;
							}
	
							&::after {
								background: url(../common/images/calendar_o.png) no-repeat top center/contain;
								opacity: 0;
							}
						}
					}
				}
	
				&.shop-area {
					@include mix.flexbox;
					@include mix.flexset(center,center);
					margin: 0 0 0 10px;
	
					.shop-btn {
						a {
							@include mix.flexbox;
							@include mix.flexset(center, center);
							position: relative;
							width: 65px;
							height: 65px;
							margin: 0 auto;
							background: #8d8d8d;
							border: 1px solid transparent;
							border-radius: 50%;
							@include mix.transition;
	
							&::before,
							&::after {
								content: "";
								display: block;
								width: 25px;
								height: 30px;
								@include mix.absolute-center(50%, 50%);
								top: 50%;
								left: 50%;
								@include mix.transition;
							}
	
							&::before {
								background: url(../common/images/shopping-bag_w.png) no-repeat top center/contain;
							}
	
							&::after {
								background: url(../common/images/shopping-bag_g.png) no-repeat top center/contain;
								opacity: 0;
							}
						}
					}
				}
			}
		}
	}
}

nav {
	dl, ol, ul {
		margin: 0;
		font-weight: normal;
	}

	dd, dt {
		margin:0;
		padding: 0;
		border: none;
		font-weight: normal;
	}
		
	a {
		color: black;
		margin:0;
		padding: 0;

		&:hover {
			color: black;
			text-decoration: none;
		}
	}
	
	
	li {
		position: relative;
	}

	.gnavi__list {
		@include mix.flexbox;
		@include mix.flexset(center,center);
		height: 100%;
		margin: 0 20px;

		&.has-child {
			a {
				@include mix.justify(flex-start);
				font-size: 12px;
				padding: 10px 20px;
				text-align: left;
				line-height: 1.3;
			}

			> a {
				padding: 0;
				font-size: 14px;
				line-height: 1;
			}

			&:hover,&:active {
				> ul {
					visibility: visible;
					opacity: 1;
				}
			}

			ul {
				/*絶対配置で位置を指定*/
				position: absolute;
				left:0;
				top:62px;
				z-index: 4;
				background:white;
				box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
				width:250px;
				visibility: hidden;
				opacity: 0;
				@include mix.transition;

				ul {
					top:0;
					left:250px;
					background: linear-gradient(135deg, #ffc561 0%, #edce00 100%);;

					li {
						a {
							&:hover, &:active {
								background: linear-gradient(135deg, #ffc561 0%, #edce00 100%);
							}
						}
					}
				}

				li {
					&.has-child {
						&::before {
							content:'';
							position: absolute;
							left:6px;
							top:15px;
							width:6px;
							height:6px;
							border-top: 2px solid #b9b9b9;
							border-right:2px solid #b9b9b9;
							transform: rotate(45deg);
						}
					}

					&:last-child {
						a {
							border-bottom:none;
						}
					}

					a {
						border-bottom:1px solid #b9b9b9;
					}

					&:hover,&:active {
						> ul {
							visibility: visible;
							opacity: 1;
						}
					}
				}
			}
		}

		ul {
			display: block;
		}

		a{
			@include mix.flexbox;
			@include mix.flexset(center,center);
			height: 100%;
			font-size: 14px;
			text-align: center;
			letter-spacing: -0.02em;
			@include mix.transition;

			&:hover {
				opacity: 0.6;
			}
		}


	}
}


.container{
	position:relative;
	width:100%;
}

.page-content{
	position:relative;
}


.common-reserve {
	background: linear-gradient(to right, #ffc561, #edce00);

	dl, ol, ul {
		margin: 0;
		font-weight: normal;
	}

	dd, dt {
		margin:0;
		padding: 0;
		border: none;
		font-weight: normal;
	}
	
		
	a {
		color: black;
		margin:0;
		padding: 0;

		&:hover {
			color: black;
			text-decoration: none;
		}
	}

	h2,p {
		margin:0;
		padding: 0;
		border: none;
		font-weight: normal;
		line-height: 1;
	}
	

	&.scrl-sec {
		.scrl-sec-inner {
			max-width: 1000px;
			width: 96%;
			margin: 0 auto;
			padding: 110px 0;
	
			.section-title {
				margin-bottom: 25px;
			}
	
			.reserve-wrapper {
				p {
					font-family: var.$font-family-sans;
					margin-bottom: 40px;
					font-size: 16px;
					line-height: 1.6;
					text-align: center;
				}
	

				.reserve-btn{
					width: 260px;
					height: 40px;
					margin: 0 auto;

					a{
						position: relative;
						@include mix.flexbox;
						@include mix.flexset(center,center);
						width: 100%;
						height: 100%;
						font-size: 14px;
						background-color: white;
						color: #ed9800;
						border: 1px solid transparent;
						border-radius: 2px;
						text-align: center;
						@include mix.transition;

						&:after{
							@include mix.arrow(5px, 1px, #ed9800, 0, -50%, right);
							top: 50%;
							right: 10px;
						}
					}
				}
			}
		}
	}

}


.common-line {
	background: linear-gradient(to right, #d8fae1, #eefff2);

	dl, ol, ul {
		margin: 0;
		font-weight: normal;
	}

	dd, dt {
		margin:0;
		padding: 0;
		border: none;
		font-weight: normal;
	}
	
	a {
		color: black;
		margin:0;
		padding: 0;

		&:hover {
			color: black;
			text-decoration: none;
		}
	}

	h2,p {
		margin:0;
		padding: 0;
		border: none;
		font-weight: normal;
		line-height: 1;
	}
	

	&.scrl-sec {
		.scrl-sec-inner {
			max-width: 1000px;
			width: 96%;
			margin: 0 auto;
			padding: 30px 0;

			.section-title {
				margin: 0 50px 0 0;
			}

			.line-wrapper {
				@include mix.flexbox;
				@include mix.flexset(center,center);

				p {
					font-family: var.$font-family-sans;
					margin-right: 45px;
					font-size: 18px;
					line-height: 1.44;
				}

				.line-btn {
					@include mix.flexbox;
					@include mix.flexset(center,center);
					width: 96px;
					height: 96px;
					border: 2px solid #1bb142;
					border-radius: 5px;
					background-color: white;

					span {
						display: block;
						width: 83px;
						height: 83px;

						img {
							width: 100%;
							height: auto;
						}

					}
				}

			}
		}
	}

}

.scrl-sec{
	position: relative;

	.scrl-sec-inner{
		.section-title{
			margin-bottom: 50px;

			h2{
				margin-bottom: 15px;
				font-size: 30px;
				text-align: center;
			}

			p{
				color: #7b7b7b;
				font-size: 32px;
				font-family: var.$font-family-whisper;
				text-align: center;
			}
		}
	}
}


.common-blog{
	dl, ol, ul {
		margin: 0;
		font-weight: normal;
	}

	dd, dt {
		margin:0;
		padding: 0;
		border: none;
		font-weight: normal;
		color: black;
	}
	
		
	a {
		color: black;
		margin:0;
		padding: 0;

		&:hover {
			color: black;
			text-decoration: none;
		}
	}


	.scrl-sec-inner{
		padding: 65px 0;
		@include mix.flexbox;
		@include mix.justify(space-between);

		&::before {
			@include mix.windowfull;
			background-color: #f3f7ff;
		}

		.section-title-wrapper {
			position: relative;

			.section-title {
				position: relative;

				h2 {
					margin: 0;
					padding: 0;
					border: none;
					font-weight: normal;
					line-height: 1;
				}

				a {
					position: absolute;
				}
			}


			.list_btn {
				@include mix.absolute-center(0%, 50%);
				top: 50%;
				right: 0%;

				span {
					position: relative;
					padding-right: 50px;
					font-size: 14px;
							
					&::before {
						content: "";
						display: block;
						width: 30px;
						height: 30px;
						@include mix.absolute-center(0%, 50%);
						top: 50%;
						right: 0%;
						background: url(../common/images/list-btn.svg) no-repeat top center/contain;
					}
				}

			}
		}

		.blog-wrapper {
			&.swiper-blog-container {
				overflow: hidden;
			}

			.swiper-wrapper {
				@include mix.justify(space-between);

				.swiper-slide {
					a {
						width: 100%;
						height: 100%;
						display: block;

						figure {
							position: relative;
							width: 100%;
							margin-bottom: 20px;
			
							&::before {
								content: "";
								display: block;
								padding-top: 62.5%;
							}
			
							img {
								@include mix.image-block;
								object-fit: cover;
							}
						}

						dl {
							margin-bottom: 15px;
							
							dt {
								font-family: var.$font-family-sans;
								font-size: 12px;
							}
							
							dd {
								font-family: var.$font-family-sans;
								font-size: 16px;
								line-height: 1.56;
			
							}
						}
					}
				}
			}
		}
	}
}


@media screen and (max-width: 1350px){
/* ------------------------------------------------------*/
header.renewal{
	padding: 0 10px 0 25px;

	.head-logo{
		width: 170px;
	}

	.menu_wrapper {
		> nav {
			> ul {
				a{
					font-size: 13px;
				}
			}
		}

		.other-link {
			li {

				&.reserve-area {
					margin: 0 0 0 25px;

					.contact-btn {
						a {
							width: 170px;
							height: 50px;
							border-radius: 25px;
							font-size: 13px;
	
							&::before,
							&::after {
								width: 25px;
								height: 18px;
								top: 50%;
								left: 20px;
							}
						}
					}
				}

				&.shop-area {
					.shop-btn {
						a {
							width: 50px;
							height: 50px;
	
							&::before,
							&::after {
								width: 20px;
								height: 25px;
							}
						}
					}
				}
			}
		}
	}
}
}


@media screen and (max-width: 1199px){
/* ------------------------------------------------------*/
header.renewal{
	height: 55px;
	padding: 10px 15px;
	flex-wrap: nowrap;
	-ms-flex-wrap: wrap;

	.head-logo{
		width: 115px;
		height: 100%;
		margin: 0 20px 0 0;
		padding: 0;
	}

	.menu_wrapper {
		nav {
			display: none;
		}
	}

	.menu_wrapper{
		margin-right: 50px;

		.other-link {
			li {
				&.reserve-area {
					margin: 0;
	
					.contact-btn {
						a {
							width: 135px;
							height: 35px;
							padding-left: 13px;
							border-radius: 17px;
							font-size: 10px;
	
							&::before,
							&::after {
								width: 20px;
								height: 18.5px;
								top: 50%;
								left: 20px;
							}
						}
					}
				}
	
				&.shop-area {
					margin: 0 0 0 10px;
	
					.shop-btn {
						a {
							width: 35px;
							height: 35px;
	
							&::before,
							&::after {
								width: 15px;
								height: 20px;
							}
	
							&::before {
								background: url(../common/images/shopping-bag_w.png) no-repeat top center/contain;
							}
	
							&::after {
								background: url(../common/images/shopping-bag_g.png) no-repeat top center/contain;
								opacity: 0;
							}
						}
					}
				}
			}
		}


		.nav-global{
			.gnavi__list {
				display: none;


				// 	&:hover,&:active {
				// 		> ul {
				// 			visibility: visible;
				// 			opacity: 1;
				// 		}
				// 	}

				// 	ul {
				// 		/*絶対配置で位置を指定*/
				// 		position: absolute;
				// 		left:0;
				// 		top:62px;
				// 		z-index: 4;
				// 		background:white;
				// 		box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
				// 		width:250px;
				// 		visibility: hidden;
				// 		opacity: 0;
				// 		@include mix.transition;

				// 		ul {
				// 			top:0;
				// 			left:250px;
				// 			background: linear-gradient(135deg, #ffc561 0%, #edce00 100%);;

				// 			li {
				// 				a {
				// 					&:hover, &:active {
				// 						background: linear-gradient(135deg, #ffc561 0%, #edce00 100%);
				// 					}
				// 				}
				// 			}
				// 		}

				// 		li {
				// 			&.has-child {
				// 				&::before {
				// 					content:'';
				// 					position: absolute;
				// 					left:6px;
				// 					top:15px;
				// 					width:6px;
				// 					height:6px;
				// 					border-top: 2px solid #b9b9b9;
				// 					border-right:2px solid #b9b9b9;
				// 					transform: rotate(45deg);
				// 				}
				// 			}

				// 			&:last-child {
				// 				a {
				// 					border-bottom:none;
				// 				}
				// 			}

				// 			a {
				// 				border-bottom:1px solid #b9b9b9;
				// 			}

				// 			&:hover,&:active {
				// 				> ul {
				// 					visibility: visible;
				// 					opacity: 1;
				// 				}
				// 			}
				// 		}
				// 	}
				// }

				// ul {
				// 	display: block;
				// }

				// a{
				// 	@include mix.flexbox;
				// 	@include mix.flexset(center,center);
				// 	height: 100%;
				// 	font-size: 1.4rem;
				// 	text-align: center;
				// 	letter-spacing: -0.02em;
				// 	@include mix.transition;

				// 	&:hover {
				// 		opacity: 0.6;
				// 	}
				// }

			}



		}
	}
}
}


	@media screen and (min-width: 1200px){
/* ------------------------------------------------------*/

.trigger,
.hamburger-overlay{
	display:none;
}

.sp-contact{
	display: none;
}


header.renewal{
	.menu_wrapper {
		-webkit-flex: 1;
		flex: 1;

		nav {
			-webkit-flex: 1;
			flex: 1;

			.acc-btn {
				content: "";
				position: absolute;
				left: 6px;
				top: 15px;
				width: 6px;
				height: 6px;
				border-top: 2px solid #b9b9b9;
				border-right: 2px solid #b9b9b9;
				transform: rotate(45deg);
				background: none;
				right: auto;
				border-radius: 0;
			}

			> ul {
				> li {
					> .acc-btn {
						display: none;
					}
			
				}

				li {
					.sub-menu {
						max-height: 0;

						a {
							@include mix.flexbox;
							@include mix.flexset(flex-start,center);
							font-size: 12px;
							padding: 10px 20px;
							text-align: left;
							line-height: 1.3;
						}
					}

					> .sub-menu {
						/*絶対配置で位置を指定*/
						position: absolute;
						left:0;
						top:62px;
						z-index: 4;
						background:white;
						box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
						width:250px;
						opacity: 0;
						margin-left: 0;
						@include mix.transition;
			
						> li {
							> .sub-menu {
								top:0;
								left:250px;
								background: linear-gradient(135deg, #ffc561 0%, #edce00 100%);;
				
								li {
									a {
										&:hover, &:active {
											background: linear-gradient(135deg, #ffc561 0%, #edce00 100%);
										}
									}
								}
							}
						}
			
						li {
							&.has-child {
								&::before {
									content:'';
									position: absolute;
									left:6px;
									top:15px;
									width:6px;
									height:6px;
									border-top: 2px solid #b9b9b9;
									border-right:2px solid #b9b9b9;
									transform: rotate(45deg);
								}
							}
			
							&:last-child {
								a {
									border-bottom:none;
								}
							}
			
							a {
								border-bottom:1px solid #b9b9b9;
							}

						}
					}

					&:hover,&:active {
						> .sub-menu {
							overflow: visible;
							opacity: 1;
							max-height: 1000px;
						}
					}

					
					// &:hover {
					// 	background-color: red;
					// 	> .sub-menu {
					// 		// overflow: visible;
					// 		opacity: 1;
					// 		max-height: 1000px;
					// 		// height: auto;
					// 	}
					// }
				}
			}
		}


		.other-link {
			li {
				&.reserve-area {
					.contact-btn {
						a {
							@include mix.transition;
							&:hover {
								background: white;
								border: 1px solid #ffc561;
								@include mix.transition;
							}
						}
					}
					
				}

				&.shop-area {
					.shop-btn {
						a {
							&:hover {
								background-color: white;
								border: 1px solid #8d8d8d;
								@include mix.transition;

								&::before {
									@include mix.transition;
									opacity: 0;
								}
								&::after {
									@include mix.transition;
									opacity: 1;
								}
							}
	

						}
					}
				}
			}
	}
	}

}

}

@media screen and (min-width: 1000px){
br.spbr{
	display:none;
}

.common-blog{
	.scrl-sec-inner{
		.blog-wrapper {
			.swiper-wrapper {
				.swiper-slide {
					a {
						&:hover {
							figure {
								@include mix.transition;
								overflow: hidden;

								img {
									@include mix.transition;
									transform: scale(1.1);
								}
							}

							dl {
								opacity: 0.7;
								@include mix.transition;
							}
						}
					
						figure {
							position: relative;
							width: 100%;
							margin-bottom: 20px;
			
							&::before {
								content: "";
								display: block;
								padding-top: 62.5%;
							}
			
							img {
								@include mix.image-block;
								object-fit: cover;
							}
						}

						dl {
							margin-bottom: 15px;
							
							dt {
								font-family: var.$font-family-sans;
								font-size: 12px;
							}
							
							dd {
								font-family: var.$font-family-sans;
								font-size: 16px;
								line-height: 1.56;
			
							}
						}
					}
				}
			}
		}
	}
}
	

footer{
	.footer-wrapper {
		.foot-inner{
			a[href] {
				@include mix.transition;

				&:hover {
					&::before {
						width: 100%;
						@include mix.transition;
					}
				}
			}

		}
	}
}

.common-reserve {
	&.scrl-sec {
		.scrl-sec-inner {
			.reserve-wrapper {
				.reserve-btn{
					a{
						&:hover {
							background-color: transparent;
							color: white;
							border: 1px solid white;
							@include mix.transition;

							&:after{
								@include mix.arrow(5px, 1px, white, 0, -50%, right);
								top: 50%;
								right: 10px;
							}
						}
					}
				}
			}
		}
	}
}

.common-line {
	.scrl-sec-inner {
		@include mix.flexbox;
		@include mix.flexset(center,center);
	}

	.line-bar-btn {
		display: none;
	}
}

}

@media screen and (max-width: 999px){
	.scrl-sec .scrl-sec-inner .section-title h2 {
		margin-bottom: 10px;
		font-size: 16px;
	}
	
	.sp-max {
		max-width: 666px !important;
		width: 100%;
		margin: 0 auto;
	}

	br.pcbr{
		display:none;
	}
	

	.common-reserve {
		&.scrl-sec {
			.scrl-sec-inner {
				padding: 75px 0;
		
				.section-title {
					margin-bottom: 13px;
				}
		
				.reserve-wrapper {
					p {
						font-family: var.$font-family-sans;
						margin-bottom: 30px;
						font-size: 10px;
						line-height: 1.5;
					}
		
	
					.reserve-btn{
						width: 210px;
	
						a{
							font-size: 10px;
	
							&:after{
								@include mix.arrow(7px, 1px, #ed9800, 0, -50%, right);
							}
						}
					}
				}
			}
		}
	
	}
	
	
	.common-line {
		&.scrl-sec {
			.scrl-sec-inner {
				.section-title {
					margin: 0 0 20px;
				}
	
				.line-wrapper {
					margin-bottom: 20px;

					p {
						margin-right: 0;
						font-size: 10px;
						line-height: 1.5;
					}
	
					.line-btn {
						display: none;
					}
	
				}

				.line-bar-btn {
					width: 210px;
					height: 40px;
					margin: 0 auto;
	
						a{
							position: relative;
							@include mix.flexbox;
							@include mix.flexset(center,center);
							width: 100%;
							height: 100%;
							font-size: 10px;
							background-color: #61ba78;
							color: white;
							border: 1px solid transparent;
							border-radius: 2px;
							text-align: center;
							@include mix.transition;
	
							&:after{
								@include mix.arrow(7px, 1px, white, 0, -50%, right);
								top: 50%;
								right: 10px;
							}
						}
				}
			}
		}
	
	}


	.common-blog{
		.scrl-sec-inner{
			padding: 35px 0;
	
			.section-title-wrapper {
				.section-title {
					margin-bottom: 0;
				}
	
				.list_btn {
					span {
						padding-right: 30px;
						font-size: 10px;
								
						&::before {
							width: 15px;
							height: 15px;
						}
					}
	
				}
			}
	
			.blog-wrapper {
				margin-top: 20px;
	
				.swiper-wrapper {
					.swiper-slide {
						a {
							display: block;
	
							figure {
								margin-bottom: 10px;
							}
	
							dl {
								margin-bottom: 10px;
								
								dt {
									font-size: 10px;
								}
								
								dd {
									font-size: 10px;
									line-height: 1.4;
				
								}
							}
						}
					}
				}
			}
		}
	}


	footer{
		.footer-wrapper {
			padding-top: 35px;

			.foot-head-inner{
				margin-bottom: 60px;
				@include mix.flexset(center,center);
		
				.footer-left {
					.foot-logo{
						width: 100px;
						height: 50px;
					}
		
					.foot-address {
						p {
							font-size: 10px;
							line-height: 1.4;
						}
		
						a {
							padding-right: 10px;
		
							span {
								font-size: 10px;
								line-height: 1.4;
		
								&::after {
									@include mix.arrow(6px, 1px, black, 0, -50%, right);
									right: -10px;
								}
							}
						}
					}
				}
		
				.footer-right {
					display: none;
				}
			}
		
			.foot-inner{	
				.large-category {
					.large-list {
						width: 48%;
						margin-bottom: 35px;
	
						> aside {
							>div {
								>ul {
									>li {
										>a {
											font-size: 14px;
											line-height: 1.4;
											margin-bottom: 20px;
										}
									}
								}
							}
						}
	
						.sub-menu {
							.sub-menu {
								margin-top: 15px;
							}
	
							li {
								margin-bottom: 15px;
	
								a {
									font-size: 12px;
									line-height: 1.4;
								}
							}
						}
		
						&.news, &.blog {
							display: none;
						}
		
						dl {
							dt {
								font-size: 14px;
								line-height: 1.4;
								margin-bottom: 20px;
							}
		
							dd {
								.middle-category {
									.middle-list {
										a {
											font-size: 10px;
											transform:scale(0.9);
										}
		
										.small-category {
											padding: 15px 0 0 10px;
		
											.small-list {
												a {
													font-size: 10px;
													transform:scale(0.9);
												}
											}
										}
									}
								}
							}
						}
					}
				}
	
			}
		}
	
		.copyright{
			padding: 20px 0;
			font-size: 10px;
			letter-spacing: 0;
			line-height: 1.5;
		}
	}
}


@media screen and (max-width: 1199px){
/* ------------------------------------------------------*/
body{
	width:100%;
	min-width:100%;
	height: 100%;
	overflow-x:hidden;
}

.trigger{
	position:absolute;
	top:15px;
	right:15px;
	@include mix.flexbox;
	@include mix.flexset(center, center);
	width:35px;
	height:24px;
	z-index:100 !important;
	cursor: pointer;

	.menu-trigger,
	.menu-trigger span {
		display: inline-block;
		transition: all .4s;
	}

	.menu-trigger {
		position:relative;
		width:100%;
		height:100%;
	}

	.menu-trigger span {
		position:absolute;
		left:0;
		width:100%;
		height:3px;
		background:black;
	}

	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
		top: 10px;
	}
	.menu-trigger span:nth-of-type(3) {
		bottom: 0;
	}

	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(8px) rotate(35deg);
		transform: translateY(12px) rotate(35deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
		display:none;
	}
	.menu-trigger.active span:nth-of-type(3) {
		-webkit-transform: translateY(-8px) rotate(-35deg);
		transform: translateY(-8px) rotate(-35deg);
		width: 100%;
	}
}

.hamburger-overlay{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;

	.hamburger-wrapper{
		position:relative;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		padding: 80px 20px 45px;
		background: white;

		.hamburger-global{
			padding: 0 ;

			.menu_wrapper {
				display: block;
				
				nav {
					> ul {
						display: block;
					}
				}
			}

			nav{
				.acc-btn {
					display: block !important;
					border-radius: 2px;
					border: 1px solid black;
				}

				.acc-child-close {
					transition: all .5s ease-in;
					max-height: 0;
					opacity: 0;
				}
				.acc-child-open {
					transition: all .5s ease-in;
					max-height: 80vh;
					overflow-y: auto;
					opacity: 1;
					display: block !important;
				}

				ul {
					li {
						a {
							@include mix.flexset(flex-start,center);
							padding: 20px;
							display: block;
							width: 100%;
							border-bottom:1px solid #ccc !important;
							text-align: left;
							color: black !important;
						}
		
						.sub-menu {
							position: inherit;
							background-color: white;
							box-shadow: none;
							margin: 0;
							width: 100%;
							left: auto;
						}
					}
				}


				li.reserve-area, li.shop-area {
					display: none;
				}
			}

			.other-link {
				display: none;
			}
		}
	}
}
}





@media screen and (min-width: 769px){
	//スマホの時はswiper動かすため
	.common-blog{
		max-width: 1000px;
		width: 96%;
		margin: 0 auto;
		
		.scrl-sec-inner {
			.section-title-wrapper {
				position: relative;
				width: 100%;
	
			}
			
			.blog-wrapper {
				width: 100%;

				.swiper-wrapper {
					.swiper-slide {
						width: 31.5% !important;
					}
				}
			}
		}
	}
}

@media screen and (max-width: 768px){
	.common-blog{
		.scrl-sec-inner {
			.section-title-wrapper {
				position: relative;
				width: 96%;
			}
			
			
			.blog-wrapper {
				width: 96%;
				margin-left: auto;
				
				.swiper-wrapper {
					.swiper-slide {
						
					}
				}
			}
		}
	}
}

@media screen and (max-width: 400px){
	/* ------------------------------------------------------*/
header.renewal{
	.head-logo{
		width: 90px;
		height: 100%;
		margin-right: 10px;
	}
}
}