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


//header
header {
	position: absolute;
	z-index: 10;
	h1 {
		font-family: 'Cormorant Garamond', serif;
		color: #fff;
		font-size: 25px;
		font-size: 2.5rem;
		font-weight: 600;
		letter-spacing: 0.05em;
		padding: 3rem 0 0 4rem;
//		transition: 1s;
		@include xs {
			padding: 2rem 0 0 2rem;
		}
	}
}
.change-color {
	header {
		h1 {
			color: #1a1a1a;
		}
	}
}


//gloval_nav--------------------
#gloval_nav {
	display: none;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	background-color: #fff;
	.nav-left {
		#nav-bg {
		position: relative;
		background-size: cover;
		background-position: center;
		height: 100vh;
		transition: 0.3s;
		&.nav-bg1 { background-image: url(../img/nav-img-1.jpg); }
		&.nav-bg2 { background-image: url(../img/nav-img-2.jpg); }
		&.nav-bg3 { background-image: url(../img/nav-img-3.jpg); }
		&.nav-bg4 { background-image: url(../img/nav-img-4.jpg); }
		&.nav-bg5 { background-image: url(../img/nav-img-5.jpg); }
		}
		ul {
			position: absolute;
   			z-index: -1;
			li {
				img {
					width: 100%;
					height: 100vh;
					object-fit: cover;
				}
			}
		}
		h1 {
			font-family: 'Cormorant Garamond', serif;
			color: #fff;
			font-size: 25px;
			font-size: 2.5rem;
			font-weight: 600;
			letter-spacing: 0.05em;
			padding: 3rem 0 0 4rem;
		}
	}
	.nav-right {
		&>div {
			position: relative;
			padding-top: 10rem;
			padding-left: 6rem;
			height: 100vh;
			&>ul {
				padding-right: 3em;
				@include xl {
					width: auto;
				}
				@include md {
					padding-right: 1.5em;
				}
				&>li {
					margin-bottom: 4rem;
					&:last-child {
						margin-bottom: 0;
					}
					a {
						font-family: 'Cormorant Garamond', serif;
						font-size: 33px;
						font-size: 3.3rem;
						font-weight: 500;
						letter-spacing: 0.05em;
						color: #1a1a1a;
						span {
							display: block;
							font-family: 'NotoSerifJP', serif;
							font-size: 13px;
							font-size: 1.3rem;
							line-height: 1;
						}
						&:hover {
							color: #8c8c8c;
						}
					}
					ul {
						display: flex;
						align-items: center;
						margin-bottom: 0;
						li {
							margin-right: 3rem;
							a {
								transition: 0.3s;
								display: block;
								&:hover {
									transform: scale(1.2);
								}

								img {
									width: 27px;
								}
							}
						}
					}
				}
			}
		}
		.nav-footer {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 3rem 0 3rem 4rem;
			@include lg {
				padding-left: 4rem;
			}
			@include md {
				padding-left: 3rem;
			}
			@include sm {
				padding: 2rem;
			}
			&>div {
				h1 {
					font-family: 'Cormorant Garamond', serif;
					color: #1a1a1a;
					font-size: 22px;
					font-size: 2.2rem;
					font-weight: 500;
					letter-spacing: 0.05em;
					@include md {
						font-size: 22px;
						font-size: 2.2rem;
					}
					@include sm {
						font-size: 20px;
						font-size: 2rem;
					}
				}
				p {
					font-family: 'NotoSerifJP', serif;
					font-size: 10px;
					font-size: 1rem;
					font-weight: 300;
					line-height: 1.7;
				}
			}
		}
	}
}
#nav_button {
	position: fixed;
    top: 0;
    right: 0;
    z-index: 300;
	transition: 0.5s;
	p {
		font-family: 'Cormorant Garamond', serif;
		font-size: 15px;
		font-size: 1.5rem;
		font-weight: 400;
		color: #fff;
		text-align: center;
		line-height: 1.5;
		writing-mode: vertical-rl;
		letter-spacing: 0.2em;
		@include sm {
			font-size: 14px;
			font-size: 1.4rem;
		}
		&.p-close {
			display: none;
		}
	}
}
#nav_toggle {
	position: relative;
	top: 0;
	right: 0;
	width: 70px;
	height: 70px;
	background-image: url("../img/nav_toggle.jpg");
	@include md {
		width: 60px;
		height: 60px;
	}
	&>div {
		position: relative;
		width: 32px;
		height: 23px;
		margin: auto;
		top: 24px;
		@include md {
			top: 20px;
		}
		span {
			width: 100%;
			height: 1px;
			left: 0;
			display: block;
			background: #fff;
			position: absolute;
			-webkit-transition: top .5s ease, -webkit-transform .3s ease-in-out;
			transition: top .5s ease, -webkit-transform .3s ease-in-out;
			transition: transform .3s ease-in-out, top .5s ease;
			transition: transform .3s ease-in-out, top .5s ease, -webkit-transform .3s ease-in-out;
			/* #nav-toggle close */
			&:nth-child(1) {
				top: 0;
			}
			&:nth-child(2) {
				top: 10px;
			}
			&:nth-child(3) {
				top: 20px;
			}
		}
	}
}
.change-color #nav_toggle {
	span {
		background: #1a1a1a;
	}
}
.change-color #nav_button {
	p {
		color: #1a1a1a;
	}
}

.open #nav_toggle {
	&> div {
		top: 20px;
		@include md {
			top: 15px;
		}
		span {
			background: #1a1a1a;
		}
	}
	span {
		&:nth-child(1) {
		top: 15px;
		-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
		}
		&:nth-child(2) {
			top: 15px;
			width: 0;
			left: 50%;
		}
		&:nth-child(3) {
			top: 15px;
			-webkit-transform: rotate(-45deg);
					transform: rotate(-45deg);
		}
	}
}
.open #nav_button {
	p {
		color: #1a1a1a;
		&.p-menu {
			display: none;
		}
		&.p-close {
			display: block;
		}
	}
}

footer {
	background: #1a1a1a;
	padding: 3rem 0;
	.container {
		&>div {
			display: flex;
			justify-content: space-between;
			@include sm {
				flex-wrap: wrap;
				justify-content: center;
			}
			.footer-left {
				@include sm {
					text-align: center;
					margin-bottom: 2rem;
				}
				h1 {
					font-family: 'Cormorant Garamond', serif;
					color: #fff;
					font-size: 22px;
					font-size: 2.2rem;
					letter-spacing: 0.04em;
					margin-bottom: 2rem;
					@include xs {
						font-size: 20px;
						font-size: 2rem;
					}
				}
				p {
					font-family: 'NotoSerifJP', serif;
					color: #fff;
					font-size: 12px;
					font-size: 1.2rem;
					line-height: 1.7;
					letter-spacing: 0.05em;
				}
				a {
					color: #fff;
				}
			}
			.footer-right {
				text-align: right;
				@include sm {
					text-align: center;
				}
				ul {
					display: flex;
					justify-content: flex-end;
					margin-bottom: 2rem;
					@include sm {
						justify-content: center;
					}
					li {
						padding-left: 2em;
						@include md {
							padding-left: 1.2em;
						}
						@include sm {
							padding: 0 1em;
						}
						@include xs {
							padding: 0 0.5em;
						}
						a {
							font-family: 'NotoSerifJP', serif;
							color: #fff;
							font-size: 18px;
							font-size: 1.8rem;
							transition: 0.3s;
							&:hover {
								color: #8c8c8c;
							}
							@include md {
								font-size: 17px;
								font-size: 1.7rem;
							}
							@include xs {
								font-size: 14px;
								font-size: 1.4rem;
							}
						}
					}
				}
				&>a {
					font-family: 'NotoSerifJP', serif;
					color: #fff;
					font-size: 18px;
					font-size: 1.8rem;
					border: solid 1px #fff;
					padding: 0.5rem 2rem;
					display: inline-block;
					text-align: right;
					transition: 0.3s;
					&:hover {
						background-color: #fff;
						color: #333;
					}
					@include md {
						font-size: 17px;
						font-size: 1.7rem;
					}
				}
			}
		}
	}
	.footer-sns {
		display: flex;
		align-items: center;
		margin-bottom: 0;
		@include sm {
			justify-content: center;
			margin: 2rem;
		}
		li {
			margin-right: 3rem;
			&:last-child {
				margin-right: 0;
			}
			a {
				transition: 0.3s;
				display: block;
				img {
					width: 22px;
				}
				&:hover {
					transform: scale(1.2);
				}
			}
		}
	}
	.copyright {
		font-family: 'Cormorant Garamond', serif;
		color: #fff;
		font-size: 11px;
		font-size: 1.1rem;
		@include sm {
			text-align: center;
		}
	}
}

//共通

.breadcrumbs {
	display: flex;
	padding: 2rem 0;
	margin-bottom: 0;
	@include sm {
		flex-wrap: wrap;
	}
	li {
		font-family: 'NotoSerifJP', serif;
		font-size: 13px;
		font-size: 1.3rem;
		font-weight: 400;
		margin-right: 1em;
		letter-spacing: 0.1em;
		color: #CBCBCB;
		&::after {
			content: "―";
			padding-left: 1em;
		}
		&:last-child {
			margin-right: 0;
			&::after {
				content: none;
			}
		}
		a {
			color: #cbcbcb;
			transition: 0.3s;
			&:hover {
				color: #fff;
			}
		}
	}
}

article.isActive .breadcrumbs {
	li {
		color: #333;
	}
	a {
		color: #333;
		&:hover {
			color: #1a1a1a;
		}
	}
} 
.inner {
	width: 87%;
	margin: 0 auto;
	@include md {
		width: 100%;
	}
}
.inner2 {
	width: 65%;
	margin: 0 auto;
	@include lg {
		width: 75%;
	}
	@include md {
		width: 85%;
	}
	@include sm {
		width: 95%;
	}
}


//top-img
#top-img {
	height: 365px;
	background-size: cover;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
	h1 {
		font-family: 'Cormorant Garamond', serif;
		color: #fff;
		font-size: 75px;
		font-size: 7.5rem;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-align: center;
		@inlude sm {
			font-size: 70px;
			font-size: 7rem;
		}
		@include xs {
			font-size: 50px;
			font-size: 5rem;
		}
		span {
			display: block;
			font-family: 'NotoSerifJP', serif;
			color: #808080;
			font-size: 19px;
			font-size: 1.9rem;
			font-weight: 400;
		}
	}
}

/* トップへ戻るボタン */
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
	z-index: 5;
	a {
		text-decoration: none;
		color: #fff;
		width: 58px;
		height: 58px;
		background-image: url("../img/page-top.svg");
		display: block;
		transition: 0.5s;
		@include sm {
			width: 50px;
			height: 50px;
		}
		&:hover {
			background-image: url("../img/page-top-over.svg");
		}
	}
}
//.change-color #page-top {
//	a {
//		background-image: url("../img/page-top-r.svg");
//		&:hover {
//			background-image: url("../img/page-top-over-r.svg");
//		}
//	}
//}
/* トップへ戻るボタン */