@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;
  }
}
//ブレイクポイントを指定------ここまで

article {
    transition-property: background;
    transition-duration: 4s;
}

article.isActive {
    transition-property: background;
    transition-duration: 1.5s;
}
header {
	h1 {
		transition: 1s;
	}
}


h2 {
	font-family: 'Cormorant Garamond', serif;
	color: #4d4d4d;
	font-size: 86px;
	font-size: 8.6rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	margin-bottom: 5rem;
	@include md {
		font-size: 75px;
		font-size: 7.5rem;
	}
	@include sm{
		font-size: 70px;
		font-size: 7rem;
	}
	@include xs{
		font-size: 60px;
		font-size: 6rem;
	}
	span {
		display: block;
		font-family: 'NotoSerifJP', serif;
		font-size: 22px;
		font-size: 2.2rem;
		font-weight: 400;
		margin-left: 5px;
		@include sm {
			font-size: 20px;
			font-size: 2rem;
		}
		@include xs {
			font-size: 18px;
			font-size: 1.8rem;
		}
	}
}

//topslide
#topslide {
	position: relative;
	.swiper-img {
		max-width: 100%;
		height: 675px;
		background-position: center;
		@include xl {
			height: 650px;
		}
		@include lg {
			height: 550px;
		}
		@include xs {
			height: 450px;
		}
	}
	.img1 {
		background-image: url("../img/top-slide-1.jpg");
		background-size: cover;
		@include sm {
			background-image: url("../img/top-slide-s-1.jpg");
		}
	}
	.img2 {
		background-image: url("../img/top-slide-2.jpg");
		background-size: cover;
		@include sm {
			background-image: url("../img/top-slide-s-2.jpg");
		}
	}
	.img3 {
		background-image: url("../img/top-slide-3.jpg");
		background-size: cover;
		@include sm {
			background-image: url("../img/top-slide-s-3.jpg");
		}
	}
	.img4 {
		background-image: url("../img/top-slide-4.jpg");
		background-size: cover;
		@include sm {
			background-image: url("../img/top-slide-s-4.jpg");
		}
	}
	.swiper-pagination-bullets {
		text-align: left;
		width: 100%;
		bottom: 3rem;
		left: 5rem;
		@include xs {
			bottom: 1rem;
			left: 2rem;
		}
	}
	.swiper-pagination-bullet {
		width: 7.5rem;
		height: 2.5px;
		@include sm {
			width: 4rem;
		}
	}
}

//concept
#concept {
	padding: 10rem 0;
	@include md {
		padding: 8rem 0;
	}
	@include sm {
		padding: 6rem 0;
	}
	@include xs {
		padding: 5rem 0;
	}
	h3 {
		font-family: 'Cormorant Garamond', serif;
		color: #fff;
		text-align: center;
		font-size: 23px;
		font-size: 2.3rem;
		font-weight: 600;
		letter-spacing: 0.05em;
		margin-bottom: 5rem;
		@include xs {
			font-size: 20px;
			font-size: 2rem;
		}
		span {
			display: block;
			font-family: 'NotoSerifJP', serif;
			font-size: 43px;
			font-size: 4.3rem;
			font-weight: 400;
			margin-top: 3rem;
			line-height: 1.8;
			@include md {
				font-size: 40px;
				font-size: 4rem;
			}
			@include xs {
				font-size: 30px;
				font-size: 3rem;
				margin-top: 2rem;
			}
		}
	}
	.office {
		overflow: hidden;
		margin-right: calc(50% - 50vw);
		&>div {
			&:first-child {
				display: flex;
				justify-content: center;
				align-items: center;
				@include sm {
					height: 100px;
				}
				a {
					color: #fff;
					font-family: 'NotoSerifJP', serif;
					font-size: 20px;
					font-size: 2rem;
					padding-bottom: 1rem;
					border-bottom: solid 1px #fff;
					margin-right: 10rem;
					transition: 0.75s;
					&::after {
						position: absolute;
						content: "";
						display: inline-block;
						background-image: url("../img/links-icon.svg");
						width: 60px;
						height: 60px;
						top: 0;
						bottom: 0;
						margin: auto;
						margin-left: 3.5rem;
						transition: 0.75s;
						@include md {
							width: 50px;
							height: 50px;
						}
						@include sm {
							width: 45px;
							height: 45px;
						}
					}
					&:hover {
						&::after {
							background-image: url("../img/links-icon-over.svg");
							width: 52px;
							height: 52px;
							@include md {
								width: 45px;
								height: 45px;
							}
							@include sm {
								width: 40px;
								height: 40px;
							}
						}
					}
				}
			}
			&:last-child {
				img {
					width: 100%;
				}
			}
		}
	}
}

article.isActive .office a {
	color: #000!important;
	border-bottom: solid 1px #000!important;
	&::after {
		background-image: url(../img/links-icon-r.svg)!important;
	}
	&:hover {
		&::after {
			background-image: url(../img/links-icon-over-r.svg)!important;
		}
	}
}

//works
#works {
//	background: #fff;
	padding: 10rem 0;
	@include md {
		padding: 8rem 0;
	}
	@include sm {
		padding: 6rem 0;
	}
	.swiper-container {
		overflow: hidden;
		margin-right: calc(50% - 50vw);
		img {
			width: 100%;
		}
		p {
			font-family: 'NotoSerifJP', serif;
			color: #000;
			font-size: 19px;
			font-size: 1.9rem;
			margin: 2rem 0;
			@include lg {
				font-size: 18px;
				font-size: 1.8rem;
			}
			@include sm {
				font-size: 16px;
				font-size: 1.6rem;
				margin-bottom: 1.5rem;
			}
		}
		a {
			font-family: 'Cormorant Garamond', serif;
			color: #b2b2b2;
			font-size: 20px;
			font-size: 2rem;
			font-weight: 500;
			transition: 0.3s;
			&:hover {
				color: #333;
			}
		}
	}
}

//links
#links {
	padding: 10rem 0;
	@include md {
		padding: 8rem 0;
	}
	@include sm {
		padding: 6rem 0;
	}
	.catalog {
		margin-bottom: 12rem;
		@include md {
			margin-bottom: 9rem;
		}
		@include sm {
			margin-bottom: 3rem;
		}
		a {
			transition: 0.3s;
			.catalog-box {
				position: relative;
				border: solid 1px #fff;
				width: 85%;
				height: 180px;
				display: inline-flex;
				align-items: center;
				overflow: hidden;
				@include lg {
					width: 90%;
				}
				@include md {
					width: 95%;
					height: 140px;
				}
				@include sm {
					width: 100%;
					height: 120px;
				}
				&>img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					transition: 1s;
				}
				&>div {
					position: absolute;
					padding-left: 4rem;
					@include md {
						padding-left: 3rem;
					}
					@include xs {
						padding-left: 1rem;
					}
					img {
						width: 737px;
						margin-bottom: 1.5rem;
						@include lg {
							width: 650px;
						}
						@include md {
							width: 500px;
						}
						@include sm {
							width: 380px;
							margin-bottom: 1rem;
						}
						@include xs {
							width: 260px;
						}
					}
					p {
						font-family: 'NotoSerifJP', serif;
						font-size: 20px;
						font-size: 2rem;
						letter-spacing: 0.1em;
						width: 100%;
						text-align: left;
						color: #fff;
						line-height: 1;
						margin-bottom: 0;
						@include md {
							font-size: 18px;
							font-size: 1.8rem;
						}
					}
				}
				&::after {
					position: absolute;
					content: "";
					display: inline-block;
					background-image: url("../img/links-icon.svg");
					width: 70px;
					height: 70px;
					right: 4rem;;
					top: 0;
					bottom: 0;
					margin: auto;
					transition: 0.75s;
					@include md {
						width: 60px;
						height: 60px;
						right: 3rem
					}
					@include sm {
						width: 45px;
						height: 45px;
					}
					@include xs {
						right: 1rem;
					}
				}
				&:hover {
					&>img {
						transform: scale(1.08);
					}
					&::after {
						background-image: url("../img/links-icon-over.svg");
						width: 52px;
						height: 52px;
						@include sm {
							width: 40px;
							height: 40px;
						}
					}
				}
			}
		}
	}
	.link-subpage {
		ul {
			padding: 0;
			li {
				&:nth-of-type(1) {
					
				}
				&:nth-of-type(2) {
					margin-top: 6rem;
					@include md {
						margin-top: 4rem;
					}
					@include sm {
						margin-top: 0;
					}
					@include xs {
						margin-top: 2rem;
					}
				}
				&:nth-of-type(3) {
					margin-top: 12rem;
					@include md {
						margin-top: 8rem;
					}
					@include sm {
						margin-top: 3rem;
					}
					@include xs {
						margin-top: 2rem;
					}
				}
				&:nth-of-type(4) {
					margin-top: 18rem;
					@include md {
						margin-top: 12rem;
					}
					@include sm {
						margin-top: 3rem;
					}
					@include xs {
						margin-top: 2rem;
					}
				}
			}
		}
		a {
			position: relative;
			display: block;
			&::after {
				position: absolute;
				content: "";
				display: inline-block;
				background-image: url("../img/links-icon.svg");
				width: 70px;
				height: 70px;
				right: 1rem;
				bottom: 1.5rem;
				margin: auto;
				transition: 1s;
				@include md {
					width: 60px;
					height: 60px;
				}
				@include sm {
					width: 45px;
					height: 45px;
					top: 0;
					bottom: 0;
				}
			}
			.link-box {
				height: 650px;
				overflow: hidden;
				@include md {
					height: 450px;
				}
				@include sm {
					height: 100px;
				}
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					z-index: -1;
					transition: 1s;
				}
			}
			h3 {
				position: absolute;
				writing-mode: vertical-rl;
				color: #fff;
				font-family: 'NotoSerifJP', serif;
				font-size: 19px;
				font-size: 1.9rem;
				top: 2rem;
				letter-spacing: 0.1em;
				margin-bottom: 0;
				@include md {
					font-size: 18px;
					font-size: 1.8rem;
					margin-left: 1rem;
				}
				@include sm {
					writing-mode: initial;
					font-size: 16px;
					font-size: 1.6rem;
					top: 2.5rem;
				}
				@include xs {
					top: 2rem;
				}
				span {
					display: block;
					font-family: 'Cormorant Garamond', serif;
					font-size: 60px;
					font-size: 6rem;
					@include md {
						font-size: 45px;
						font-size: 4.5rem;
					}
					@include sm {
						font-size: 33px;
						font-size: 3.3rem;
					}
				}
				
			}
			&:hover {
				&::after {
					background-image: url("../img/links-icon-over.svg");
					width: 52px;
					height: 52px;
					@include sm {
						width: 40px;
						height: 40px;
					}
				}
				.link-box img {
				    transform: scale(1.08);
				}
			}
		}
		
	}
}

//gmap
.gmap {
	padding-bottom: 6rem;
	iframe {
	  -webkit-filter: grayscale(100%);
	  -moz-filter: grayscale(100%);
	  -ms-filter: grayscale(100%);
	  -o-filter: grayscale(100%);
	  filter: grayscale(100%);
}}