@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:#50626D;

//共通
p,th,td,dt,dd{
	text-align: justify;
}

body {
	animation: loading 1s;
}
@keyframes loading {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

#header-img{
	height: 250px;
	position: relative;
	margin-bottom: 8rem;
	@include xs{height: 200px;}
	h2{
		font-family: "Oswald", sans-serif;
		font-optical-sizing: auto;
		font-weight: 600;
		font-style: normal;
		font-size: 55px;
		font-size: 5.5rem;
		color: #fff;
		position: absolute;
		bottom: -1rem;
		left: 7rem;
		@include xs{
			font-size: 50px;
			font-size: 5rem;
			left: 3rem;
			bottom: -2rem;
		}
		span{
			display: inline;
			font-size: 16px;
			font-size: 1.6rem;
			margin-left: 2rem;
			@include xs{
				font-size: 14px;
				font-size: 1.4rem;
			}
		}
	}
}

.inner {
	width: 83%;
	margin: 0 auto;
	@include md {
		width: 90%;
	}
	@include sm {
		width: 100%;
	}
}
.montserrat{
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
h2{
	font-family: "Oswald", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-size: 55px;
	font-size: 5.5rem;
	color: $color-main;
	margin-bottom: 3rem;
	span{
		display: block;
		font-size: 16px;
		font-size: 1.6rem;
	}
}

.fluid-box-l{
	overflow: hidden;
	margin-left: calc(1140px - 100vw);
	img{
		width: 100%;
		object-fit: cover;
	}
	@include lg{margin-left: calc(960px - 100vw);}
	@include md{margin-left: calc(720px - 100vw);}
	@include sm{margin-left:0;}
}

.fluid-box-r{
	overflow: hidden;
	margin-right: calc(1140px - 100vw);
	img{
		width: 100%;
		object-fit: cover;
	}
	@include lg{margin-right: calc(960px - 100vw);}
	@include md{margin-right: calc(720px - 100vw);}
	@include sm{margin-right:0;}
}


.link-box {
	a{
		position: relative;
		color: #fff;
		font-size: 14px;
		font-size: 1.4rem;
		display: inline-block;
		padding: 0.2rem 2.5rem;
		transition: 0.3s;
	}
	a::before{
		position: absolute;
		content: "";
		z-index: -1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgb(164,179,185);
		background: linear-gradient(270deg, rgba(164,179,185,1) 0%, rgba(80,98,109,1) 100%);
		transition: 0.3s;
	}
	a::after{
		position: absolute;
		content: "";
		z-index: -2;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgb(80,98,109);
		background: linear-gradient(270deg, rgba(164,179,185,1) 100%, rgba(80,98,109,1) 100%);
	}
	a:hover::before{
		opacity: 0;
	}

}


//スライドで現れる
.slidein{
	/* 装飾に関わるスタイルは省略 */
	transition: 2s ease;
}
.slide_left{
	transform: translateX(calc(-50vw - 50%));
}
.slide_right{
	transform: translateX(calc(50vw + 50%));
}
.show{
	transform: translateX(0);
}

//header
header{
	position: fixed; /* headerを追従にする */
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 76px;
	z-index: 999;
	display: flex;
	justify-content: space-between;
	background-color: transparent;
    transition: background-color .3s, color .3s;
	@include md{
		height: 65px;
	}
	.logo-box {
			display: flex;
			align-items: center;
			padding-left: 3rem;
			margin-bottom: 0;
			@include lg{padding-left: 0;}
			a {
				.logo{
					background: url("../img/logo-white.svg");
					width: 200px;
					height: 76px;
					background-repeat: no-repeat;
					background-position: center;
					margin-left: 3rem;
					transition: 0.3s;
					&.change-color{
					background: url("../img/logo-color.svg");
					background-repeat: no-repeat;
					background-position: center;
					}
				}
			}
			h1{
				font-size: 10px;
				font-size: 1rem;
				color: #fff;
				margin-left: 3rem;
				margin-bottom: 0;
				&.change-color{color: #333;	}
			}
		}
	.header__inner {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 76px;
		@include md {height: 65px;}
		.gn{
			margin-right: 2rem;
			ul{
				display: flex;
				list-style: none;
				margin-bottom: 0;
				padding-left: 0;
				li{
					a{
						font-size: 15px;
						font-size: 1.5rem;
						color: #fff;
						padding: 1rem;
						padding-right: 0.5vw;
						padding-left: 0.5vw;
						margin-left: 0.75vw;
						margin-right: 0.75vw;
						transition: 0.3s;
						@include lg{
							margin-left: 0.5vw;
							margin-right: 0.5vw;
						}
						&:hover{opacity: 0.4;}
					}
					a.change-color{color: #333;}
					.mainmenu-contact{
						font-size: 14px;
						font-size: 1.4rem;
						border: 1px solid #fff;
						padding: 0.35rem 1rem;
						&:hover{
							opacity: 1;
							background: #fff;
							color: $color-main;
						}
					}
					.mainmenu-contact.change-color{
						border: 1px solid #333;
						&:hover{
							background: #333;
							color: #fff;
						}
					}
				}
			}
		}
	}
	.drawer__button {
		position: relative;
		width: 4rem;
		height: 4rem;
		background-color: transparent;
		border: none;
		cursor: pointer;
		z-index: 999;
		height: 100%;
		width: 76px;
		background-color: #A4B3B9;
		@include md {
			width: 65px;
		}
		& > span{
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			width: 4rem;
			height: 2px;
			background-color: #fff;
			transform: translateX(-50%);
		}
		& > span:first-child{
			transform: translate(-50%, calc(-50% - 1rem));
			transition: transform 0.3s ease;
		}
		& > span:nth-child(2){
			transform: translate(-50%, -50%);
			transition: opacity 0.3s ease;
		}
		& > span:last-child{
			transform: translate(-50%, calc(-50% + 1rem));
			transition: transform 0.3s ease;
		}
	}
	.drawer__button.active{
		background-color: #333;
		& > span{
			background-color: #fff;
		}
		& > span:first-child{
			transform: translate(-50%, -50%) rotate(-45deg);
		}
		& > span:nth-child(2){
			opacity: 0;
		}
		& > span:last-child{
			 transform: translate(-50%, -50%) rotate(45deg);
		}
	}
	.drawer__nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		transition: opacity 0.3s ease;
		opacity: 0;
		visibility: hidden;
		z-index: 100;
		.drawer__nav__inner {
			position: relative;
			width: 50%;
			height: 100%;
			background-color: #333;;
			padding: 0;
			margin: 0 0 0 auto;
			overflow: scroll;
			transform: translateX(100%);
			transition: transform 0.3s ease;
			@include md {
				width: 70%;
			}
			@include xs {
				width: 80%;
			}
			.drawer__nav__menu {
				display: flex;
				list-style: none;
				padding-left: 0;
				padding: 76px 76px 0 50px;
				gap: 5vw;
				@include md {
					padding: 65px 50px 0 50px;
				}
				@include xs{
					display: block;
					gap: 0px;
				}
				.navmenu-left,.navmenu-right{
					width: 50%;
					@include xs{width: 100%;}
				}
				.item-large{
					margin-bottom: 3rem;
					position: relative;
					@include xs{
						margin-bottom: 1.5rem;
					}
					&::after{
						position: absolute;
						top: 22px;
						right: 10px;
						content: "";
						background: url("../img/arrow.svg") center / contain no-repeat;
						height: 12px;
						width: 15px;
						transition: 0.3s;
						@include xs{top: 11px;}
					}
					&:has(>.drawer__nav__link:hover){
						&::after{right: 0px;}
					}
					>.drawer__nav__link{
						font-weight: 500;
					}
				}
				.drawer__nav__item{
					.item2{
						font-size: 12px;
						font-size: 1.2rem;
						border-bottom: inherit;
					    padding: 1rem;
						margin-bottom: 0;
						@include xs{padding: 0.65rem 1rem;}
					}
					>ul{
						list-style: none;
						padding-left: 0;
					}
				}
				.drawer__nav__link {
					font-size: 16px;
					font-size: 1.6rem;
					display: block;
					color: #fff;
					text-decoration: none;
					padding: 2rem;
					border-bottom: solid 1px lightgray;
					transition: 0.3s;
					line-height: 1;
					margin-bottom: 1rem;
					@include sm {
						font-size: 16px;
						font-size: 1.6rem;
					}
					@include xs{
						padding: 1rem 2rem;
						margin-bottom: 0.75rem;
					}
					span {
						display: block;
						font-family: 'Noto Sans JP', sans-serif;
						font-size: 14px;
						font-size: 1.4rem;
						margin-top: 1rem;
						@include xs {
							margin-top: 0.5rem;
						}
					}
					&:hover{
						color: rgba(255,255,255,0.50);
					}
				}
				li:last-child{
					border-bottom: none;
				}
			}
		}
	}
	.drawer__nav.active {
		opacity: 1;
		visibility: visible;
		.drawer__nav__inner {
			transform: translateX(0);
		}
	}
}
/* headerの色を変える */
.header.change-color {
	background-color: #fff!important;
}

//footer
footer{
	h5{
		font-size: 22px;
		font-size: 2.2rem;
		font-weight: 600;
		@include sm{
			font-size: 18px;
			font-size: 1.8rem;
		}
	}
	.footer-flex{
		display: flex;
		margin-bottom: 4rem;
		@include sm{flex-flow: column;}
	}
	.footer-left{
		text-align: center;
		width: 50vw;
		padding: 5rem 0;
		background-color: #EBEBEB;
		a{
			font-family: "Oswald", sans-serif;
			font-optical-sizing: auto;
			font-weight: 600;
			font-style: normal;
			font-size: 55px;
			font-size: 5.5rem;
			color: $color-main;
			line-height: 1.3em;
		}
	}
	.footer-right{
		text-align: center;
		width: 50vw;
		padding: 5rem 0;
		background-color: #DCDCDC;
		z-index: 1;
		.link-box a{
			padding: 1.5rem 7rem;
			font-size: 17px;
			font-size: 1.7rem;
			font-weight: 600;
			margin: 1rem auto;
		}
	}
	.footer-left,.footer-right{
		p{text-align: center;}
		@include sm{
			width: 100vw;
			padding: 3rem 0;
		}
	}
	.footer-info{
		display: flex;
		justify-content: space-between;
		margin-bottom: 2rem;
		@include sm{
			display: block;
		}
		.footer-info-left{
			@include sm{
				text-align: center;
				margin-bottom: 3rem;
			}
			.footer-logo{
				width: 270px;
				margin-bottom: 2rem;
				@include sm{
					width: 250px;
					margin: 0 auto 1rem;
				}
			}
			dl{
				font-size: 14px;
				font-size: 1.4rem;
				dt{font-weight: 600;}
				dd a{
					color: #333;
					text-decoration: none;
				}
				@include sm{
					dt,dd{text-align: center;}
				}
			}
		}
		.footer-info-right{
			@include sm{
				margin-bottom: 3rem;
			}
			ul{
				display: flex;
				@include sm{justify-content: center;}
				li{
					margin: 0 1rem;
					@include sm{margin: 0 1rem;}
					@include xs{margin: 0 0.5rem;}
					a{
						color: inherit;
						transition: 0.3s;
						&:hover{opacity: 0.4;}
						@include sm{
							font-size: 14px;
							font-size: 1.4rem;
						}
					}
					.link-box{
						a{
							color: #fff;
							&:hover{opacity: 1;}
							@include sm{
								padding: 0.2rem 1rem;
							}
						}
					}
				}
			}
		}
	}
	.copyright{
		text-align: left;
		font-size: 10px;
		font-size: 1rem;
		margin-bottom: 3rem;
		@include sm{text-align: center;}
	}
	#pagetop {
		height: 50px;
		width: 50px;
		position: fixed;
		right: 30px;
		bottom: 30px;
		border: solid 1px #fff;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 2;
		mix-blend-mode: difference;
		transition: .2s;
		&:hover{opacity: 0.3;}
	}
	.pagetop_arrow {
		height: 10px;
		width: 10px;
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
		transform: translateY(20%) rotate(-45deg);
	}
}
//
//#page404{
//	text-align: center;
//	margin-bottom: 10rem;
//	@include lg {
//		margin-bottom: 8rem;
//	}
//	@include xs {
//		margin-bottom: 6rem;
//	}
//	h2{
//		font-size: 160px;
//		font-size: 16rem;
//	}
//	a{
//		margin-top: 2rem;
//	}
//}