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

@mixin xxl {
  @media screen and (max-width: ($xxl)) {
    @content;
  }
}
@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;
  }
}
//ブレイクポイントを指定------ここまで

//全体のカラー設定（一括）----ここから
$main-color: #8C2126;
$sub-color: #C79E82;
//全体のカラー設定（一括）----ここまで

article{
	margin-top: 0;
	background-color: #F7F2E8;
}

//top-img--------------------------------------------ここから
#top-img{
	background-image: url("../img/top-tile-right01.png");
	background-repeat: no-repeat;
	background-size: auto;
	background-position: right -100px top 105px;
	position: relative;
	min-height: 830px;
	@include xl {
		min-height: 700px;
	}
	@include md {
		min-height: 570px;
	}
	@include sm {
		background-size: 40%;
		background-position: left -100px bottom 0;
	}
	@include xs {
		background-position: left -70px bottom 110px;
	}
	&::before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		width: 1300px;
		height: 800px;
		background-image: url("../img/top-main01.png");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left top;
		vertical-align: middle;
		@include xxl {
			width: 1060px;
			height: 700px;
		}
		@include xl {
			width: 990px;
			height: 650px;
		}
		@include lg {
			width: 920px;
			height: 580px;
			left: -100px;
			top: -10px;
		}
		@include md {
			width: 740px;
			height: 460px;
		}
		@include xs {
			width: 530px;
			height: 340px;
			left: -80px;
			top: 55px;
		}
	}
	&::after{
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
		display: inline-block;
		width: 750px;
		height: 470px;
		background-image: url("../img/top-main02.png");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: right bottom;
		vertical-align: middle;
		@include xl {
			width: 570px;
			height: 350px;
		}
		@include lg {
			width: 510px;
			height: 300px;
		}
		@include md {
			width: 440px;
			height: 270px;
		}
		@include sm {
			width: 370px;
			height: 210px;
		}
	}
	div.container{
		display: flex;
		justify-content: flex-end;
		padding-top: 25rem;
		h2{
			font-size: 38px;
			font-size: 3.8rem;
			color: #534741;
			position: relative;
			z-index: 2;
			right: -5rem;
			@include xl {
				font-size: 30px;
				font-size: 3rem;
				right: 0;
			}
			@include md {
				font-size: 25px;
				font-size: 2.5rem;
			}
			@include sm {
				font-size: 30px;
				font-size: 3rem;
			}
			@include xs {
				font-size: 20px;
				font-size: 2rem;
			}
			span{
				display: inline-block;
				background-color: #fff;
				padding: 1rem;
				letter-spacing: 5px;
				margin-bottom: 1.5rem;
				@include md {
					margin-bottom: 1rem;
				}
				@include xs {
					margin-bottom: 0.5rem;
				}
			}
		}
	}
}


#top-img + div{
	background-image: url("../img/top-tile-right02.png"),
		url("../img/top-tile-left01.png");
	background-repeat: no-repeat;
	background-size: auto;
	background-position: right top,left -100px bottom 20px;
	@include sm {
		background-size: 35%, 50%;
	}
}
//concept---------------------------------------------ここから
#concept{
	padding: 4rem 0;
	div{
		display: flex;
		h2{
			font-size: 14px;
			font-size: 1.4rem;
			color: $main-color;
			font-weight: normal;
			writing-mode: vertical-rl;
			font-weight: 400;
			letter-spacing: 2px;
			@include md {
				margin: 0;
			}
			span{
				font-family: "Josefin Sans", sans-serif;
				font-size: 48px;
				font-size: 4.8rem;
				@include sm {
					font-size: 40px;
					font-size: 4rem;
				}
			}
		}
		dl{
			margin: 6rem;
			@include sm {
				margin: 4rem;
			}
			@include xs {
				margin: 2rem;
			}
			dt{
				font-size: 32px;
				font-size: 3.2rem;
				color: $main-color;
				line-height: normal;
				margin-bottom: 2rem;
				font-weight: 500;
				@include sm {
					font-size: 28px;
					font-size: 2.8rem;
				}
				@include xs {
					font-size: 20px;
					font-size: 2rem;
				}
			}
			dd{
				text-align: justify;
				line-height: normal;
				line-height: 3.5rem;
				@include xs {
					line-height: 2.5rem;
					font-size: 14px;
					font-size: 1.4rem;
				}
			}
		}
	}
}

//feature---------------------------------------------ここから
#feature{
	padding-bottom: 12rem;
	@include sm {
		padding-bottom: 8rem;
	}
	@include xs {
		padding-bottom: 4rem;
	}
	div.container{
		padding: 0 4rem;
		text-align: center;
		@include md {
			padding: 0;
		}
		@include xs {
			padding: 0 2rem;
		}
		h2{
			text-align: center;
			font-size: 14px;
			font-size: 1.4rem;
			color: $main-color;
			font-weight: normal;
			font-weight: 400;
			letter-spacing: 2px;
			position: relative;
			&::before{
				position: absolute;
				top: calc(50% - 10px);
				width: 37%;
				height: 6px;
				content: '';
				border-top: solid 1px $main-color;
				border-bottom: solid 1px $main-color;
				left: 0;
				@include sm {
					width: 30%;
				}
				@include xs {
					width: 20%;
				}
			}
			&::after{
				position: absolute;
				top: calc(50% - 10px);
				width: 37%;
				height: 6px;
				content: '';
				border-top: solid 1px $main-color;
				border-bottom: solid 1px $main-color;
				right: 0;
				@include sm {
					width: 30%;
				}
				@include xs {
					width: 20%;
				}
			}
			span{
				font-family: "Josefin Sans", sans-serif;
				font-size: 37px;
				font-size: 3.7rem;
			}
		}
		ul{
			display: flex;
			justify-content: space-around;
			margin: 3rem 0 2rem 0;
			@include xs {
				flex-wrap: wrap;
				justify-content: center;
				margin: 1rem;
			}
			li{
				@include md {
					padding: 0 1rem;
				}
				@include sm {
					padding: 0 0.5rem;
				}
				@include xs {
					padding:0 1rem;
					width: 50%;
				}
			}
		}
	}
}

//link-button-----------------------------------------ここから
#link-button{
	position: relative;
	margin-bottom: 9rem;
	@include xs {
		padding: 1.5rem;
		margin-bottom: 4rem;
	}
	&::before{
		content: '';
		background-image: url("../img/top-tile-right03.png"),
			url("../img/top-link-btn.png");
		background-repeat: no-repeat;
		background-size: auto,cover;
		background-position: right -100px top 100px,center center;
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 12%;
		z-index: 0;
		@include sm {
			background-size: 50%,cover;
		}
		@include xs {
			right: 0;
			left: 0;
			height: 95%;
		}
	}
	ul{
		position: relative;
		li:nth-child(1){
				background-color: $sub-color;
			a{
				background-image: url("../img/top-siding.jpg");
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center center;
				display: block;
				color: #fff;
				text-align: center;
				padding: 2.5rem 0 3rem;
				transition: 0.3s;
				@include xs {
					padding: 1.5rem 0;
				}
				h3{
					font-family: "Grape Nuts", cursive;
					font-size: 20px;
					font-size: 2rem;
					display: inline-block;
					font-weight: normal;
					line-height: 4rem;
					margin-bottom: 1.5rem;
					color: #fff;
					border: none;
					padding: 0;
					span{
						background: $main-color;
						font-family: "Noto Sans JP", sans-serif;
						font-size: 31px;
						font-size: 3.1rem;
						padding: 0.5rem 2rem;
						@include xs {
							font-size: 28px;
							font-size: 2.8rem;
						}
					}
				}
				&:hover{
					opacity: 0.5;
				}
			}
		}
		li:nth-child(2){
				background-color: $sub-color;
			a{
				background-color: $sub-color;
				display: block;
				border: 10px solid $main-color;
				margin-top: 5rem;
				@include xs {
					margin-top: 2rem;
				}
				img{
					transition: 0.3s;
				}
				&:hover img{
					opacity: 0.5;
				}
			}
		}
	}
}