@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

//メインカラー指定
$color-b: #5e3819;
$color-y: #daa020;
$color-bg: #f4eee8;

.link-box {
	position: relative;
	display: inline-block;
	color: #fff;
	background-color: $color-y;
	padding: 0.5rem 2em;
	text-align: center;
	font-size: 18px;
	font-size: 1.8rem;
	transition: 0.3s;
	&::after {
		position: absolute;
		content: "";
		display: inline-block;
		font-family: "Font Awesome 5 Free";
		content: "\f054";
		font-weight: 900;
		padding-right: 1rem;
		right: 0;
	}
	&:hover {
		background-color: $color-b;
	}
	@include lg {
		font-size: 17px;
		font-size: 1.7rem;
	}
	@include md {
		font-size: 16px;
		font-size: 1.6rem;
	}
}


//共通
section {
	margin-bottom: 8rem;
	overflow: hidden;
	@include md {
		margin-bottom: 6rem;
	}
	@include xs {
		margin-bottom: 4rem;
	}
	h2 {
		font-family: 'Oleo Script', cursive;
		font-size: 80px;
		font-size: 8rem;
		color: $color-b;
		margin-bottom: 5rem;
		@include lg {
			font-size: 65px;
			font-size: 6rem;
		}
		@include sm {
			font-size: 50px;
			font-size: 5rem;
		}
		@include xs {
			font-size: 36px;
			font-size: 3.6rem;
		}
		span {
			font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
			font-family: "YuGothicPr6NM", "游ゴシック", "Yu Gothic", YuGothic;
			font-family: 'Noto Sans JP';
			font-weight: normal;
			font-size: 18px;
			font-size: 1.8rem;
			vertical-align: middle;
			margin-left: 2em;
			@include sm {
				font-size: 16px;
				font-size: 1.6rem;
				margin-left: 1em;
			}
		}
	}
	.section-bg {
		background: linear-gradient(90deg, #f4eee8 0%, #f4eee8 50%, #fff 50%, #fff 100%);
		.container {
			background-color: $color-bg;
			padding-bottom: 8rem;
			@include sm {
				padding-bottom: 6rem;
			}
			.inner {
				width: 83%;
				margin: 0 auto;
				@include lg {
					width: 85%;
				}
				@include md {
					width: 90%;
				}
				@include sm {
					width: 85%;
				}
				@include xs {
					width: 90%;
				}
				img {
					width: 100%;
				}
				p {
					@include sm {
						margin-bottom: 1rem;
					}
				}
				.key-img {
					width: 100vw;
					margin-right: calc(50% - 50vw);
					margin-bottom: 3rem;
					img {
						margin-top: -5rem;
						max-height: 400px;
    					object-fit: cover;
						@include sm {
							min-height: 280px;
						}
						@include xs {
							min-height: 250px;
						}
					}
				}
				h4 {
					color: $color-b;
					font-size: 25px;
					font-size: 2.5rem;
					font-weight: bold;
					margin: 2rem 0;
					@include lg {
						margin: 1rem 0;
					}
					@include md {
						margin-top: 0;
						font-size: 22px;
						font-size: 2.2rem;
					}
					@include sm {
						margin-top: 1.5rem;
					}
					@include xs {
						margin-top: 1rem;
						font-size: 19px;
						font-size: 1.9rem;
					}
				}
				p {
					text-align: justify;
					margin-bottom: 2rem;
					line-height: 1.6;
					
				}
			}
		}
	}
}


//mainimage
#mainimage {
	position: relative;
	.swiper-img {
		max-width: 100%;
		height: 700px;
		background-position: center;
		@include xl {
			height: 650px;
		}
		@include lg {
			height: 550px;
		}
		@include md {
			height: 450px;
		}
		@include sm {
			height: 400px;
		}
		@include xs {
			height: 300px;
		}
	}
	.img1 {
		background-image: url("../img/top-slide-vd1.jpg");
		background-size: cover;
		@include sm {
			background-image: url("../img/top-slide-svd1.jpg")
		}
	}
	.img2 {
		background-image: url("../img/top-slide-2.jpg");
		background-size: cover;
		@include sm {
			background-image: url("../img/top-slide-s2.jpg")
		}
	}
	.img3 {
		background-image: url("../img/top-slide-3.jpg");
		background-size: cover;
		@include sm {
			background-image: url("../img/top-slide-s3.jpg")
		}
	}
	.swiper-pagination-bullet {
		width: 5.5rem;
		height: 3px;
		@include sm {
			width: 4rem;
		}
		@include xs {
			width: 3rem;
			bottom: 5px;
		}
	}
	.swiper-pagination-bullets {
		bottom: 10px;
		width: 100%;
		right: 1.5rem;
		@include xs {
			bottom: 5px;
			right: 1rem;
		}
	}
	p {
		position: absolute;
		color: #fff;
		top: 50%;
		left: 50%;
		width: 100%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		z-index: 111;
		text-align: center;
		font-size: 35px;
		font-size: 3.5rem;
		font-weight: bold;
		line-height: 1.8;
		letter-spacing: 0.16em;
		@include md {
			font-size: 30px;
			font-size: 3rem;
		}
		@include sm {
			font-size: 24px;
			font-size: 2.4rem;
		}
		@include xs {
			font-size: 18px;
			font-size: 1.8rem;
		}
		.under-line {
			border-bottom: solid 2px #fff;
		}
		.emphasis {
			font-size: 130%;
		}

	}
}

//restaurant
#restaurant {
	.link-box {
		padding: 0.5rem 4em;
		background-color: $color-y;
		&:hover {
			background-color: $color-b;
		}
	}
	.locations {
		@include xs {
			margin: 0;
		}
		&>div {
			@include md {
				padding-left: 1rem;
				padding-right: 1rem;
			}
			@include sm {
				margin-bottom: 2rem;
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
		.link-box {
			display: block;
			padding: 1rem 0;
			color: #333;
			background-color: #fff;
			border: none;
			&::after {
				color: #b9b9b9;
				padding-right: 1rem;
			}
			&:hover {
				color: #fff;
				background-color: $color-b;
				&::after {
					color: #fff;
				}
			}
		}
	}
}

//bending
#bending {
	.link-box {
		padding: 0.5rem 4em;
	}
}

//news
//#news {
//	.row {
//		&> div {
//			@include md {
//				padding-left: 1rem;
//				padding-right: 1rem;
//				margin-bottom: 2rem;
//			}
//			@include xs {
//				padding-left: 0.5rem;
//				padding-right: 0.5rem;
//				margin-bottom: 2rem;
//			}
//		}
//	}
//	h3 {
//		font-family: 'Oleo Script', cursive;
//		font-size: 50px;
//		font-size: 5rem;
//		color: $color-b;
//		@include sm {
//			font-size: 46px;
//			font-size: 4.6rem;
//		}
//		@include xs {
//			font-size: 40px;
//			font-size: 4rem;
//		}
//		span {
//			font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
//			font-family: "YuGothicPr6NM", "游ゴシック", "Yu Gothic", YuGothic;
//			font-family: 'Noto Sans JP';
//			font-weight: normal;
//			font-size: 15px;
//			font-size: 1.5rem;
//			vertical-align: middle;
//			margin-left: 2em;
//			@include sm {
//				font-size: 14px;
//				font-size: 1.4rem;
//				margin-left: 1em;
//			}
//		}
//	}
//	.blogitem {
//		&>div:first-child {
//			img {
//				height: 170px;
//				object-fit: cover;
//				@include md {
//					height: 150px;
//				}
//				@include sm {
//					height: 140px;
//				}
//				@include xs {
//					height: 120px;
//				}
//			}
//		}
//		&>div:last-child {
//			background-color: #fff;
//			color: #333;
//			padding: 1.5rem 2rem;
//			@include md {
//				padding: 1.5rem;
//			}
//			a {
//				color: #333;
//			}
//			h5 {
//				font-size: 16.5px;
//				font-size: 1.65rem;
//				font-weight: bold;
//				text-align: center;
//				margin-bottom: 0;
//				@include md {
//					font-size: 16px;
//					font-size: 1.6rem;
//				}
//				@include xs {
//					height: 2rem;
//					overflow: hidden;
//				}
//			}
//			.blogdate {
//				font-size: 12px;
//				font-size: 1.2rem;
//				text-align: center;
//				margin-bottom: 0.5rem;
//				@include sm {
//					line-height: 1.6;
//				}
//			}
//			.text {
//				font-size: 14px;
//				font-size: 1.4rem;
//				margin-bottom: 0;
//				line-height: 1.6;
//				overflow: hidden;
//				height: 4.5rem;
//				@include xs {
//					font-size: 12px;
//					font-size: 1.2rem;
//					line-height: 1.5;
//					height: 3.5rem;
//				}
//			}
//		}
//		&:hover {
//			&>div:first-child {
//				opacity: 0.7;
//			}
//			&>div:last-child {
//				a {
//					color: $color-y;
//				}
//			}
//		}
//	}
//	.newslist {
//		color: #1a1a1a;
//		&::after {
//			display:inline-block;
//			content:"";
//			background-image: url("../img/arrow-k.svg");
//			background-repeat: no-repeat;
//			background-size: contain;
//			vertical-align: middle;
//			height:6px;
//			width:54px;
//			margin-left: 1rem;
//		}
//		&:hover {
//			color: $color-y;
//			&:after {
//				background-image: url("../img/arrow-y.svg");
//			}
//		}
//
//	}
//}

//sns
#sns {
	h3 {
		font-family: 'Oleo Script', cursive;
		font-size: 50px;
		font-size: 5rem;
		color: $color-b;
		@include sm {
			font-size: 46px;
			font-size: 4.6rem;
		}
		@include xs {
			font-size: 40px;
			font-size: 4rem;
		}
		span {
			font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
			font-family: "YuGothicPr6NM", "游ゴシック", "Yu Gothic", YuGothic;
			font-family: 'Noto Sans JP';
			font-weight: normal;
			font-size: 15px;
			font-size: 1.5rem;
			vertical-align: middle;
			margin-left: 2em;
			color: #000;
			@include sm {
				font-size: 14px;
				font-size: 1.4rem;
				margin-left: 1em;
			}
		}
	}
	ul {
		margin: 0 -1rem;
		li {
			padding: 0 1rem;
			text-align: center;
			@include sm {
				margin-bottom: 1rem;
			}
			a {
				display: block;
				background-color: #fff;
				padding: 2rem;
				@include md {
					padding: 1.5rem;
				}
				@include sm {
					padding: 1rem;
				}
				img {
					width: 220px;
					@include md {
						width: 200px;
					}
					@include sm {
						width: 180px;
					}
				}
				&:hover {
					img {
						opacity: 0.6;
					}
				}
			}
		}
	}
}

//sdgs
#sdgs {
	.container {
		.inner {
			text-align: center;
			width: 83%;
			margin: 0 auto;
			@include lg {
				width: 85%;
			}
			@include md {
				width: 90%;
			}
			@include sm {
				width: 90%;
			}
			@include xs {
				width: 100%;
			}
			a {
				display: block;
				text-align: center;
				background-color: #f1f1f1;
				margin-bottom: 3rem;
				padding: 3rem 0 4rem;
				transition: 0.3s;
				@include sm {
					padding: 2rem 0 3rem;
				}
				@include xs {
					padding: 1.5rem;
				}
				h4 {
					color: $color-b;
					font-size: 25px;
					font-size: 2.5rem;
					font-weight: bold;
					margin-bottom: 2.5rem;
					@include md {
						font-size: 22px;
						font-size: 2.2rem;
					}
					@include sm {
						margin-bottom: 1.5rem;
					}
					@include xs {
						font-size: 18px;
						font-size: 1.8rem;
					}
				}
				img {
					width: 55%;
					@include md {
						width: 65%;
					}
					@include sm {
						width: 75%;
					}
					@include xs {
						width: 90%;
					}
				}
				&:hover {
					opacity: 0.7;
				}
			}
			h5 {
				color: $color-b;
				font-size: 20px;
				font-size: 2rem;
				font-weight: bold;
				margin-bottom: 1rem;
			}
			p {
				font-size: 15px;
				font-size: 1.5rem;
				@include xs {
					text-align: justify;
				}
			}

		}
	}
}

//kosodate
#kosodate {
	.inner {
		text-align: center;
			width: 83%;
			margin: 0 auto;
			@include lg {
				width: 85%;
			}
			@include md {
				width: 90%;
			}
			@include sm {
				width: 90%;
			}
			@include xs {
				width: 100%;
			}
		.row{margin-bottom: 3rem;}
		h5 {
				color: $color-b;
				font-size: 20px;
				font-size: 2rem;
				font-weight: bold;
				margin-bottom: 1rem;
			}
			p {
				font-size: 15px;
				font-size: 1.5rem;
				@include xs {
					text-align: justify;
				}
			}
	}
}


//recruit
#recruit {
	.container {
		.inner {
			width: 83%;
			margin: 0 auto;
			@include lg {
				width: 85%;
			}
			@include md {
				width: 90%;
			}
			@include sm {
				width: 90%;
			}
			@include xs {
				width: 100%;
			}
			a {
				display: block;
				background-image: url("../img/recruit-01.jpg");
				background-position: center;
				background-size: cover;
				padding: 3rem;
				transition: 0.3s;
				@include sm {
					padding: 2rem;
				}
				@include xs {
					padding: 1.5rem;
				}
				h2 {
					font-family: 'Galada', cursive;
					color: #fff;
					font-size: 74px;
					font-size: 7.4rem;
					margin-bottom: 0;
					@include lg {
						font-size: 60px;
						font-size: 6rem;
					}
					@include sm {
						font-size: 50px;
						font-size: 5rem;
					}
					@include xs {
						font-size: 46px;
						font-size: 4.6rem;
					}
					span {
						font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
						font-family: "YuGothicPr6NM", "游ゴシック", "Yu Gothic", YuGothic;
						font-family: 'Noto Sans JP';
						font-weight: normal;
						@include xs {
							font-size: 15px;
							font-size: 1.5rem;
						}
					}
				}
				p {
					color: #fff;
					@include sm {
						font-size: 15px;
						font-size: 1.5rem;
					}
					@include xs {
						font-size: 14px;
						font-size: 1.4rem;
						line-height: 1.6;
					}
					&:last-child {
						margin-top: 3rem;
						line-height: 0;
						&::after {
							display:inline-block;
							content:"";
							background-image: url("../img/arrow-w.svg");
							background-repeat: no-repeat;
							background-size: contain;
							vertical-align: middle;
							height:6px;
							width:54px;
							margin-left: 1rem;
						}
					}
				}
				&:hover {
					opacity: 0.7;
				}
			}
		}
	}
}