@charset "UTF-8";
/* CSS Document */
/* header
-----------------------------------*/
.head_area {
	width: 100%;
	overflow: visible;
	padding: 0;
	top: 0;
	position: fixed;
	z-index: 2;
}
header {
	height: 100px;
	display: flex;
	padding: 0 0 0 1em;
	align-items: center;
}
header .headflex {
	display: flex;
	align-items: center;
	width: 100%;
	margin-right: clamp(1rem, 1vw, 20px);
}
header .headflex a {
	line-height: 1;
}
header .headflex h1 {
	font-size: 2rem;
	margin-left: 1em;
}
header .headflex h1 a {
	color: var(--dcol);
}
header .headflex h1 a span {
	display: block;
	color: var(--fcol);
	font-size: clamp(1.06rem,1.4vw,1.6rem);
}
header .headflex h1, header .headflex p {
	margin: 0;
	padding-left: clamp(0.2rem, 0.5vw, 20px);
	line-height: 1;
	font-size: clamp(1.2rem, 2vw, 2.5rem);
	font-weight: 700;
	white-space: nowrap;
}
header .logo {
	width: 100%;
	display: flex;
	justify-content: left;
	align-items: center;
	height: 67px;
	padding: 0 0 0 4%;
}
header .logo img {
	width: 166px;
}
.btn-trigger p {
	display: none;
}
header {
	height: 90px;
	display: flex;
	position: relative;
	background: #fff;
}
header nav {
	display: flex;
	margin-left: auto;
	height: 100%;
}
header nav .menuul {
	display: flex;
	align-items: center;
	height: 100%;
}
nav > ul > li a {
	font-size: clamp(1.3rem, 1.5vw, 1.6rem);
	white-space: nowrap;
	font-weight: 600;
}
nav > ul > li:not(:first-child) {
	margin-left: clamp(10px, 3vw, 3em);
}
nav > ul li.mailtext {
	font-size: 1.1rem;
	align-items: center;
	display: flex;
	white-space: nowrap;
	background: var(--dcol);
}
nav > ul li.mailtext span {
	padding: 0 clamp(10px, 2vw, 2rem);
	color: #FFF;
}
nav > ul > li {
	height: 100%;
	font-size: 2rem;
	line-height: 1.2;
	letter-spacing: 1.1px;
	margin-top: 0px;
	position: relative;
	display: flex;
	align-items: center;
}
nav ul li small {
	display: block;
	text-align: center;
	font-weight: normal;
	color: #fff;
}
.btn-trigger.active span:nth-of-type(1), .btn-trigger.active span:nth-of-type(2), .btn-trigger.active span:nth-of-type(3) {
	animation: none;
}
#btn.active span:nth-of-type(1) {
	transform: translateY(12px) rotate(-45deg);
}
#btn.active span:nth-of-type(2) {
	left: 50%;
	opacity: 0;
	animation: active-btn-bar02 .8s forwards;
}
@keyframes active-btn-bar02 {
	100% {
		height: 0;
	}
}
#btn.active span:nth-of-type(3) {
	transform: translateY(-12px) rotate(45deg);
}
html.is-fixed, html.is-fixed body {
	height: 100%;
	overflow: hidden;
}
@media(min-width:768px) {
	nav > ul > li a {
		color: #000;
		font-weight: 700;
		line-height: 1.5;
		display: block;
		position: relative;
	}
	nav > ul > li a:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		transform: scaleX(0);
		background-color: #000;
		transition: transform .3s ease, visibility .3s ease;
		visibility: hidden;
	}
	nav > ul > li a:hover:after, nav > ul > li.active > a:after {
		transform: scaleX(1);
		visibility: visible;
	}
	nav > ul li.mailtext a {
		height: 100%;
		margin: auto;
		align-items: center;
		display: flex;
		padding: 0 clamp(10px, 2vw, 2rem);
		color: #FFF;
	}
	nav > ul li.mailtext a:hover {
		background: #000;
		color: #fff;
	}
	nav > ul li.mailtext a:hover::after {
		transform: scaleX(0);
	}
}
/* medhia query 
-----------------------------------*/
@media (max-width: 768px) {
	header {
		height: 60px;
		display: flex;
		margin: 0;
		align-items: center;
		padding: 0 0 0 10px;
	}
	header .header_logo {
		width: 30px;
	}
	header .headflex h1, header .headflex p {
		margin: 0;
		font-size: min(2.8rem, 100%);
	}
	header .headflex h1 {
	    font-size: clamp(1.7rem, 2vw, 2.4rem);
	}
	header nav {
		padding: 0;
		margin-left: 0;
		position: fixed;
		top: 60px;
		left: 0;
		background: #fff;
		z-index: 2;
		overflow-y: scroll;
		flex-direction: column;
		justify-content: flex-start;
		margin: auto;
		background-size: 400% 400%;
		transform: translate3d(100%, 0, 0);
		transition: transform .6s;
		height: 100vh;
	}
	@keyframes gradient {
		0% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
		100% {
			background-position: 0% 50%;
		}
	}
	header nav > ul {
		flex-direction: column;
		width: 100%;
		align-items: flex-end;
	}
	header nav ul li {
		margin: 0px;
		width: 100%;
	}
	header nav ul li a {
		font-size: 1.6rem;
		color: #000;
		padding:20px 15px;
		height: auto;
		display: block;
		width: 100%;
		border-bottom: 1px solid #eee;
		box-sizing: border-box;
		position: relative;
	}
	.header nav ul li:not(:last-child) a:after {
		content: '';
		clip-path: polygon(0 7%, 7% 0, 57% 50%, 7% 100%, 0 93%, 43% 50%, 0 7%);
		height: 10px;
		aspect-ratio: 1;
		background-color: #333;
		display: block;
		position: absolute;
		right: 10px;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	nav > ul > li.current, header nav ul li a:hover {
		background: #f0f0f0;
	}
	header nav .menuul {
		align-items: flex-start;
		height: auto;
		width: 280px;
	}
	nav > ul > li:not(:first-child) {
		margin: 0;
	}
	nav > ul li.mailtext span {
		color: #000;
	}
	nav > ul li.mailtext {
		flex-direction: column;
		width: 100%;
		background: #fff;
		grid-gap: 20px;
		margin: 20px 0 0;
		font-size: 1.2rem;
		line-height: 1.5;
	}
	nav > ul li.mailtext a {
		display: block;
		background: var(--dcol);
		width: calc(100% - 20px);
		box-sizing: border-box;
		text-align: center;
		padding: 15px;
		color: #FFF;
	}
	header nav.active {
		transform: translate3d(0, 0, 0);
	}
	header nav {
		transform: translate3d(-100vw, 0, 0);
	}
	.head_area {
		padding: 0;
	}
	.btn-trigger p {
		left: -90px;
		font-size: 1rem;
		text-align: center;
		color: #000;
		margin: auto;
		display: block;
	}
	.btn-triggerblock {
		background: transparent;
		width: auto;
		display: block;
		position: relative;
		z-index: 3;
		margin-left: auto;
	}
	.btn-trigger {
		display: flex;
		transition: all .5s;
		box-sizing: border-box;
		justify-content: center;
		flex-direction: column;
		position: relative;
		grid-gap: 5px;
	}
	.btn-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #000000;
		border-radius: 0px;
	}
	.btn-trigger, .btn-trigger span {
		display: flex;
		transition: all .5s;
		box-sizing: border-box;
		justify-content: center;
		flex-direction: column;
		position: relative;
		grid-gap: 5px;
	}
	.btn-trigger, .btn-trigger span {
		display: flex;
		transition: all .5s;
		box-sizing: border-box;
		justify-content: center;
		flex-direction: column;
		position: relative;
		grid-gap: 5px;
	}
	.btn-trigger {
		width: 60px;
		height: 60px;
		transform: none;
		cursor: pointer;
		background: var(--att);
		padding: 17px 10px 5px;
	}
	.btn-trigger span {
		left: 0;
		width: 30px;
		height: 2px;
		background-color: #383838;
		border-radius: 0px;
		top: auto;
		margin: auto;
		justify-content: center;
	}
	#btn.active span:nth-of-type(1) {
		transform: translateY(10px) rotate(-45deg);
	}
	#btn.active span:nth-of-type(2) {
		left: 50%;
		opacity: 0;
		animation: active-btn-bar02 .8s forwards;
	}
	#btn.active span:nth-of-type(3) {
		transform: translateY(-3px) rotate(45deg);
	}
	@keyframes active-btn-bar02 {
		100% {
			height: 0;
		}
	}
	.overlay {
		content: '';
		visibility: hidden;
		position: fixed;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		transition: all 0.5s ease;
		z-index: 1;
		height: 100vh;
	}
	.overlay.active {
		visibility: visible;
		cursor: pointer;
		background: rgba(0, 0, 0, 0.7);
	}
}