@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-main: #582707;
$color-bg: #f5f2ed;
.green01 {
	color: #b8b42d;
}
.green02 {
	color: #697a21;
}

section {
	h1 {
		font-size: 50px;
		font-size: 5rem;
		font-weight: 600;
		color: $color-main;
		letter-spacing: 0.05em;
		text-align: center;
		margin-bottom: 5rem;
		@include md {
			font-size: 46px;
			font-size: 4.6rem;
		}
		@include xs {
			margin-bottom: 3rem;
		}
		span {
			display: block;
			font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
			font-size: 18px;
			font-size: 1.8rem;
			margin-top: 1rem;
			@include md {
				font-size: 17px;
				font-size: 1.7rem;
			}
		}
	}
	h2 {
		font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		font-size: 40px;
		font-size: 4rem;
		font-weight: 400;
		letter-spacing: 0.1em;
		line-height: 1.75;
		border-left: solid 1px $color-main;
		padding-left: 4rem;
		margin-bottom: 12rem;
		@include lg {
			font-size: 38px;
			font-size: 3.8rem;
		}
		@include md {
			font-size: 34px;
			font-size: 3.4rem;
		}
		@include md {
			font-size: 28px;
			font-size: 2.8rem;
		}
		@include xs {
			font-size: 24px;
			font-size: 2.4rem;
			padding-left: 2rem;
			line-height: 1.6;
		}
	}
	h3 {
		font-size: 23px;
		font-size: 2.3rem;
		font-weight: 400;
		letter-spacing: 0.2em;
		text-align: center;
		margin-bottom: 3rem;
		@include sm {
			font-size: 22px;
			font-size: 2.2rem;
		}
		@include xs {
			line-height: 1.6;
		}
	}
	p {
		letter-spacing: 0.05em;
	}
}
.inner {
	width: 83%;
	margin: 0 auto;
	@include md {
		width: 100%;
	}
}
.anchor {
	margin-top: -100px;
	padding-top: 100px;
	@include sm {
		margin-top: -65px;
		padding-top: 65px;
	}
}
.link-box {
	display: inline-flex;
	align-items: center;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 26px;
	font-size: 2.6rem;
	color: $color-main;
	border: solid 1px rgba(88,39,7,0.5);
	padding: 1.5rem 4em;
	text-align: center;
	@include xs {
		padding: 1.5rem 0;
		width: 100%;
		font-size: 24px;
		font-size: 2.4rem;
		justify-content: center;
	}
	&::before {
		content: "";
		background-image: url("../img/icon-hotpepper.svg");
		display: inline-block;
		width: 43px;
		height: 43px;
		margin-right: 1rem;
		transition: 0.3s;
		@include xs {
			width: 36px;
			height: 36px;
		}
	}
	&::after {
		content: "";
		display: inline-block;
		font-family: "Font Awesome 5 Free";
		font-size: 16px;
		font-size: 1.6rem;
		content: "\f054";
		font-weight: 900;
		margin-left: 1rem;
	}
	&:hover {
		color: $color-bg;
		background-color: $color-main;
		&::before {
			background-image: url("../img/icon-hotpepper-h.svg");
		}
	}
}
.link-box2 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 22px;
	font-size: 2.2rem;
	color: $color-main;
	width: 100%;
	height: 97px;
	border: solid 1px rgba(88,39,7,0.5);
	@include md {
		height: 80px;
	}
	@include xs {
		justify-content: flex-start;
		padding: 0 5rem;
	}
	&::before {
		content: "";
		background-image: url("../img/icon-hotpepper.svg");
		display: inline-block;
		width: 42px;
		height: 42px;
		margin-right: 1rem;
		transition: 0.3s;
		@include xs {
			margin-right: 3rem;
		}
	}
	&:hover {
		color: $color-bg;
		background-color: $color-main;
		&::before {
			background-image: url("../img/icon-hotpepper-h.svg");
		}
	}
}

//top-img
#top-img {
	&>div {
		height: 700px;
		@include lg {
			height: 600px;
		}
		@include md {
			height: 500px;
		}
		@include sm {
			height: 400px;
		}
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}

//concept
#concept {
	background-color: $color-bg;
	overflow: hidden;
	.concept-top {
		position: relative;
		padding: 7rem 0 9rem;
		background-image: -webkit-radial-gradient(rgba(255,252,232,1), rgba(202,150,123,0.2));
		background-image: radial-gradient(rgba(255,252,232,1), rgba(202,150,123,0.2));
		opacity: 0.9;
		@include sm {
			padding: 6rem 0;
		}
		ul {
			margin-bottom: 3rem;
			li {
				text-align: center;
				letter-spacing: 0.05em;
				margin-bottom: 0.5rem;
				&::before {
					content: "●";
					color: #b8b42d;
				}
			}
		}
		p {
			span {
				font-weight: 600;
				color: #697a21;
			}
		}
		.row {
			&>div {
				&:first-child {
					@include sm {
						margin-bottom: 3rem;
					}
					&>div {
						height: 330px;
						border: solid 2px #fff;
						border-radius: 20px;
						overflow: hidden;
						@include lg {
							height: 280px;
						}
						@include md {
							height: 240px;
						}
						@include sm {
							height: 330px;
						}
						@include xs {
							height: 250px;
						}
						img {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
				}
				&:last-child {
					&>div {
						display: flex;
						align-items: center;
						height: 100%;
						border-top: solid 1px;
						border-bottom: solid 1px;
						p {
							text-align: justify;
							margin-bottom: 0;
							@include sm {
								padding: 2rem;
							}
						}
					}
				}
			}
		}
	}
	.concept-contents {
		position: relative;
		padding: 9rem 0;
		@include md {
			padding: 6rem 0;
		}
		.concept-box {
			display: flex;
			background: linear-gradient(90deg, #fff 0%, #fff 60%, #f5f2ed 60%, #f5f2ed 100%);
			margin-bottom: 16rem;
			@include sm {
				flex-wrap: wrap;
				background: #fff;
			}
			&:nth-of-type(3) {
				background: linear-gradient(90deg, #f5f2ed 0%, #f5f2ed 40%, #fff 40%, #fff 100%);
				@include sm {
					background: #fff;
				}
			}
			&:nth-of-type(4) {
				margin-bottom: 7rem;
			}
			&>div {
				z-index: 5;
			}
			dl {
				padding: 5rem;
				height: 390px;
				@include lg {
					padding: 4rem;
					height: auto;
				}
				@include md {
					padding: 2rem;
				}
				dt {
					display: flex;
					align-items: center;
					margin-bottom: 4rem;
					@include md {
						margin-bottom: 3rem;
					}
					@include sm {
						margin-bottom: 2rem;
					}
					.number {
						font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
						font-size: 66px;
						font-size: 6.6rem;
						margin-right: 2rem;
						font-weight: 400;
						@include md {
							font-size: 50px;
							font-size: 5rem;
						}
						@include xs {
							font-size: 40px;
							font-size: 4rem;
							margin-right: 1rem;
						}
					}
					h5 {
						font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
						font-size: 22px;
						font-size: 2.2rem;
						margin-bottom: 0;
						line-height: 1.5;
						@include md {
							font-size: 20px;
							font-size: 2rem;
						}
						@include xs {
							font-size: 18px;
							font-size: 1.8rem;
						}
					}
				}
				dd {
					line-height: 2.15;
					margin-bottom: 0;
					@include md {
						font-size: 15px;
						font-size: 1.5rem;
						line-height: 1.9;
					}
					@include xs {
						line-height: 1.7;
					}
				}
			}
			img {
				position: relative;
				z-index: 2;
				width: 600px;
				height: 375px;
				border: solid 2px #fff;
				margin-top: -7rem;
				@include lg {
					width: 450px;
					height: auto;
				}
				@include md {
					width: 350px;
				}
				@include sm {
					width: 90%;
				}
			}
		}
	}
	.concept-flower {
		position: relative;
		img {
			position: absolute;
			top: 0;
			right: 0;
			width: 290px;
			@include lg {
				top: -8rem;
			}
			@include md {
				top: -8rem;
				width: 240px;
			}
			@include sm {
				top: -5rem;
				right: -1rem;
				width: 160px;
			}
			@include xs {
				top: -9rem;
				width: 120px;
			}
		}
	}
	.back-img {
		position: absolute;
	}
	.plant-01 {
		left: -1.5rem;
		top: 3%;
		width: 235px;
		@include lg {
			width: 200px;
		}
		@include md {
			width: 150px;
		}
		@include sm {
			width: 120px;
		}
		@include xs {
			width: 100px;
		}
	}
	.plant-02 {
		right: -3rem;
		top: 40%;
		width: 215px;
		@include xl {
			top: 30%;
		}
		@include lg {
			width: 190px;
		}
		@include md {
			width: 140px;
		}
		@include sm {
			width: 100px;
		}
		@include xs {
			top: 33%;
			right: -1rem;
			width: 80px;
		}
	}
	.plant-03 {
		right: -1.8rem;
		top: 34%;
		width: 220px;
		@include md {
			top: 33%;
			width: 170px;
		}
		@include sm {
			top: 34%;
			width: 110px;
		}
		@include sm {
			top: 35%;
			width: 100px;
		}
	}
	.plant-04 {
		left: -0.5rem;
		top: 56%;
		width: 300px;
		@include md {
			top: 55%;
			width: 220px;
		}
		@include sm {
			top: 60%;
			width: 130px;
		}
		@include sm {
			width: 110px;
		}
	}
	.plant-05 {
		right: -5rem;
		bottom: 5%;
		width: 270px;
		@include md {
			width: 220px;
		}
		@include sm {
			right: -3rem;
			width: 130px;
		}
		@include xs {
			bottom: 6%;
			width: 110px;
		}
	}
}

//menu
#menu {
	.blank-space {
		padding-top: 9rem;
		@include sm {
			padding-top: 6rem;
		}
	}
	h1 {
		margin-bottom: 2rem;
	}
	p {
		margin-bottom: 5rem;
	}
	.table-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ded4cd;
		padding: 1rem 2rem;
		font-size: 20px;
		font-size: 2rem;
		font-weight: 500;
		line-height: 1;
		@include lg {
			font-size: 18px;
			font-size: 1.8rem;
		}
		span {
			display: inline-block;
			font-size: 16px;
			font-size: 1.6rem;
			font-weight: 400;
			@include lg {
				font-size: 15px;
				font-size: 1.5rem;
			}
			@include xs {
				font-size: 15px;
				font-size: 1.5rem;
				width: 50%;
			}
		}
	}
	table {
		width: 100%;
		font-size: 18px;
		font-size: 1.8rem;
		letter-spacing: 0.05em;
		margin-bottom: 9rem;
		@include md {
			margin-bottom: 6rem;
		}
		@include xs {
			font-size: 15px;
			font-size: 1.5rem;
			margin-bottom: 4rem;
		}
		tr {
			border-bottom: solid 1px rgba(88,39,7,0.25);
			th {
				font-weight: 400;
				width: 73%;
				padding: 3rem 2rem;
				@include md {
					padding: 2rem;
					width: 78%;
				}
				@include sm {
					padding: 1.5rem 2rem;
					width: 78%;
				}
				@include xs {
					line-height: 1.8;
				}
			}
			td {
				
			}
		}
	}
}

//about
#about {
	background-color: $color-bg;
	.blank-space {
		padding: 9rem 0;
		@include sm {
			padding: 6rem 0;
		}
	}
	.row {
		margin-left: -25px;
		margin-right: -25px;
		@include xs {
			margin-left: -15px;
			margin-right: -15px;
		}
		&>div {
			padding-left: 25px;
			padding-right: 25px;
			&:last-child {
				@include sm {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					margin-top: 2rem;
				}
				img {
					width: 230px;
					margin-bottom: 2rem;
					@include md {
						width: 180px;
						margin-bottom: 1rem;
					}
					@include sm {
						width: 35%;
					}
					@include xs{
						width: 60%;
					}
				}
				table {
					width: 100%;
					line-height: 1.6;
					@include sm {
						width: 50%;
						margin-left: 3rem;
					}
					@include xs {
						display: flex;
						justify-content: center;
						width: 100%;
						margin-left: 0;
					}
					th {
						font-weight: 400;
						width: 23%;
						@include lg {
							width: 28%;
						}
						@include xs {
							width: auto;
						}
					}
					a {
						color: $color-main;
						&:hover {
							color: $color-main;
						}
					}
				}
				ul {
					display: flex;
					margin-top: 2rem;
					padding-top: 2rem;
					border-top: solid 1px rgba(88,39,7,0.5);
					@include md {
						margin-top: 1rem;
					}
					@include sm {
						width: 75%;
						justify-content: center;
					}
					li {
						margin-right: 3rem;
						a {
							&:hover {
								img  {
									transform: scale(1.08);
								}
							}
						}
						img {
							width: 56px;
							transition: 0.3s;
							margin-bottom: 0;
							@include md {
								width: 46px;
							}
						}
					}
				}
			}
		}
	}
	.gmap {
		margin: 4rem auto 5.5rem;
		border: solid 2px #fff;
	}
}

//contact
#contact {
	position: relative;
	.blank-space {
		padding: 12rem 0 18rem;
		@include sm {
			padding: 8rem 0 10rem;
		}
		@include sm {
			padding: 8rem 0;
		}
	}
	ul {
		position: relative;
		padding-bottom: 6rem;
		margin-bottom: 8rem;
		@include xs {
			padding-bottom: 4rem;
			margin-bottom: 6rem;
		}
		&::after {
			content: "";
			border-bottom: solid 1px rgba(88, 39, 7, 0.5);
			width: 190px;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}
		li {
			margin-bottom: 2rem;
			&:nth-of-type(1){
				a {
					font-size: 26px;
					font-size: 2.6rem;
					&::before {
						background-image: url("../img/icon-tel.svg");
						width: 40px;
						height: 40px;
					}
					&:hover {
						&::before {
							background-image: url("../img/icon-tel-h.svg");
						}
					}
				}
			}
			&:nth-of-type(2) {
				a {
					&::before {
						background-image: url("../img/icon-instagram.svg");
					}
					&:hover {
						&::before {
							background-image: url("../img/icon-instagram-h.svg");
						}
					}
				}
			}
			&:nth-of-type(3) {
				a {
					&::before {
						background-image: url("../img/icon-hotpepper.svg");
					}
					&:hover {
						&::before {
							background-image: url("../img/icon-hotpepper-h.svg");
						}
					}
				}
			}
			&:nth-of-type(4) {
				a {
					&::before {
						background-image: url("../img/icon-line.svg");
					}
					&:hover {
						&::before {
							background-image: url("../img/icon-line-h.svg");
						}
					}
				}
			}
		}
	}
	h3 {
		font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		margin-top: 6rem;
		letter-spacing: 0;
	}
	.contact-bg {
		position: absolute;
		bottom: 0;
		z-index: -1;
		height: 490px;
		width: 100%;
		@include md {
			height: 350px;
		}
		@include sm {
			height: 280px;
		}
		@include xs {
			height: 200px;
		}
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}
#privacypolicy {
	border: solid 0.7px #000;
	padding: 2rem;
	overflow: scroll;
	width: 80%;
	height: 150px;
	background-color: #fff;
	@include sm {
		width: 94%;
	}
	@include xs {
		width: 90%;
	}
	p {
		font-size: 14px;
		font-size: 1.4rem;
		line-height: 1.6;
		@include sm {
			font-size: 15px;
			font-size: 1.5rem;
			line-height: 1.7;
		}
		@include xs {
			font-size: 14px;
			font-size: 1.4rem;
			line-height: 1.6;
		}
		span {
			display: block;
			font-weight: 600;
			margin-top: 1em;
		}
	}
}

.thanks-box {
	margin: 20rem auto 24rem;
	@include lg {
		margin: 12rem auto 16rem;
	}
	h3 {
		font-family: "NotoSansCJKjp"; 
		font-size: 36px;
		font-size: 3.6rem;
		font-weight: 600;
		letter-spacing: 0.05em;
		margin-bottom: 4rem;
		color: $color-main;
	}
	a {
		font-weight: bold;
		font-size: 14px;
		font-size: 1.4rem;
		padding: 1.5rem 5rem;
		line-height: 1;
		border: 1px solid $color-main;
		border-radius: 3rem;
		background: $color-main;
		color: #fff;
		-webkit-appearance: none;
		transition: 0.3s;
		&:hover{
			cursor : pointer;
			background : #fff;
			color: $color-main;
		}
	}
}

/* ---------------------- for JavaScript ここから ---------------------- */
form#mail_form dl dt span.required{
	display : inline-block;
	color : #fff;
	line-height : 1;
	margin-right: 1rem;
    padding: 0.4rem 0.5rem;
    background-color: #ffa100;
    font-size: 90%;
    border-radius: 3px;
	font-weight: normal;
}
form#mail_form dl dt span.optional{
	display: none;
}
form#mail_form dl dd span.error_blank,
form#mail_form dl dd span.error_format,
form#mail_form dl dd span.error_match{
	display : block;
	color : #ff0000;
	margin-top : 3px;
}
span.loading{
	width : 50px;
	height : 50px;
	border-radius : 50%;
	border-top : 5px solid rgba( 255, 255, 255, 0.2 );
	border-right : 5px solid rgba( 255, 255, 255, 0.2 );
	border-bottom : 5px solid rgba( 255, 255, 255, 0.2 );
	border-left : 5px solid #ffffff;
	-webkit-transform : translateZ( 0 );
	-ms-transform : translateZ( 0 );
	transform : translateZ( 0 );
	-webkit-animation : load-circle 1.0s linear infinite;
	animation : load-circle 1.0s linear infinite;
	position : absolute;
	top : 50%;
	left : 50%;
	margin-top : -25px;
	margin-left : -25px;
}
@-webkit-keyframes load-circle{
	0%{
		-webkit-transform : rotate( 0deg );
		transform : rotate( 0deg );
	}
	100%{
		-webkit-transform : rotate( 360deg );
		transform : rotate( 360deg );
	}
}
@keyframes load-circle{
	0%{
		-webkit-transform : rotate( 0deg );
		transform : rotate( 0deg );
	}
	100%{
		-webkit-transform : rotate( 360deg );
		transform : rotate( 360deg );
	}
}
/* ---------------------- for JavaScript ここから ---------------------- */

form#mail_form dt {
    border-top: 1px solid #7f7f80;
    margin-top: 2rem;
    padding-top: 2rem;
	font-weight: 400;
}
form#mail_form dt:first-child{
	border-top: none;
}
form#mail_form input[type="text"],
form#mail_form input[type="email"],
form#mail_form input[type="tel"],
form#mail_form textarea{
	width : 100%;
	padding : 0.5rem 1rem;
	border : 1px solid #cccccc;
	border-radius : 3px;
	background : #efefef;
	-webkit-appearance : none;
	font-size : 18px;
	margin-top : 5px;
}
form#mail_form input[type="text"]:focus,
form#mail_form input[type="email"]:focus,
form#mail_form input[type="tel"]:focus,
form#mail_form textarea:focus{
	border : 1px solid #b2b2b2;
	background-color: #f1f1f1;
	outline: none;
}
form#mail_form input[type="radio"],
form#mail_form input[type="checkbox"]{
	margin-right : 5px;
	accent-color: #328fe8;
}
form#mail_form input:first-child[type="radio"],
form#mail_form input:first-child[type="checkbox"]{
	margin-right : 5px;
	margin-left: 0;
}
form#mail_form {
	label {
		margin-right: 3em;
		@include md {
			margin-right: 2em;
		}
	}
}
form#mail_form select{
	font-size : 100%;
	margin-top : 5px;
}
form#mail_form textarea{
	display : block;
	width : 100%;
	max-width : 100%;
	height : 200px;
	padding : 1rem;
	resize : vertical;
	border : 1px solid #cccccc;
	border-radius : 3px;
	background : #efefef;
	-webkit-appearance : none;
	font-size : 100%;
	font-family : inherit;
}
form#mail_form ul{
	list-style-type : none;
}
form#mail_form ul li label:hover{
	cursor : pointer;
}
form#mail_form input#postal{
	width: 30%;
}
form#mail_form input#postal + a{
	display : inline-block;
	padding : 5px 15px;
	background : $color-main;
	border : 1px solid $color-main;
	border-radius : 3px;
	color : #fff;
	font-family : inherit;
	text-decoration : none;
	transition: 0.3s;
}
form#mail_form input#postal + a:hover{
	cursor : pointer;
	background : #fff;
	color: $color-main;
}
form#mail_form ul.kind-list li{
	display: inline-block;
	min-width: 40%;
}
form#mail_form p#form_submit{
	width : 90%;
	margin : 0 auto;
	padding : 40px 0 60px 0;
}
form#mail_form input[type="button"]{
	font-weight: bold;
    font-size: 14px;
    font-size: 1.4rem;
    padding: 1.5rem 5em;
    line-height: 1;
    border: 1px solid #697a21;
    border-radius: 3rem;
    background: #697a21;
    color: #ffffff;
    -webkit-appearance: none;
    transition: 0.3s;}
form#mail_form input[type="button"]:hover{
	cursor : pointer;
	background : #fff;
	color: #697a21;
}


form#mail_form input[type="text"], form#mail_form input[type="email"], form#mail_form input[type="tel"], form#mail_form textarea {
    background-color: #ffffff;
}