@charset "UTF-8";  

.pc {
	display: inline-block ;
}

.pc2 {
	display: block ;
}

.sp ,.sp2 {
	display: none;
}

#wrapper {
	width: 100%;
	min-width: 1220px;
	margin: auto;
	padding: 0;
	position: relative;
}


/*====================================
ヘッダー
=====================================*/
header {
	position: fixed;
	width: 100%;
	min-width: 1220px;
	height: 100px;
	margin: 0 auto;
	padding: 0 0 0 85px;
	background: #222222;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: 0.2s linear;
	top: 0;
	left: 0;
	z-index: 100;
	h1 {
		width: 130px;
		margin: 0;
		padding: 0;
		a {
			display: inline-block;
			margin: 0;
			padding: 5px;
			text-decoration: none;
			&:hover {
				opacity: 0.8;
			}
		}
	}
	nav {
		width: calc(100% - 130px);
		margin: 0;
		padding: 0;
		position: relative;
		ul {
			display: block;
			width: 100%;
			margin: 0;
			padding: 0;
			list-style: none;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			li {
				display: inline-block;
				margin: 0 10px;
				padding: 0;
				a {
					display: inline-block;
					margin: 0;
					padding: 5px 20px;
					font-size: 16px;
					line-height: 120%;
					font-weight: var(--weight-bold2);
					font-family: var(--font-montserrat);
					text-decoration: none !important;
					color: #999999 !important;
					&:hover {
						color: #fff !important;
					}
				}
				div {
					display: inline-block;
					height: 100px;
					margin: 0;
					padding: 0 30px;
					background: #444444;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				&:last-of-type {
					margin-right: 0;
				}
			}
		}
		div.sns {
			position: absolute;
			display: inline-block;
			margin: 0;
			padding: 0;
			top: 0;
			right: 205px;
			a {
				display: inline-block;
				margin: 0;
				padding: 0;
				text-decoration: none;
				img {
					transition: 0.2s linear;
				}
				&:hover {
					img {
						filter: brightness(0) invert(1);
					}
				}
			}
		}
	}

}
header #sp_menu,
ul.ul_open_h {
	display: none;
}


/*====================================
共通
=====================================*/
main {
	margin: 0 auto;
}

.nolink {
	pointer-events: none;
	cursor: none;
}

h2.cont_ttl {
	margin: 0 0 0 -60px;
	padding: 0;
	display: flex;
	align-items: center;
	transition: 0.2s linear;
	strong {
		display: inline-block;
		margin: 0;
		padding: 0;
		font-size: 64px;
		line-height: 130%;
		font-weight: var(--weight-nomal);
		font-family: var(--font-rock-salt);
		white-space: nowrap;
	}
	span {
		display: inline-block;
		margin: 0 0 0 60px;
		padding: 0;
		font-size: 21px;
		line-height: 180%;
		font-weight: var(--weight-nomal);
		white-space: nowrap;
	}
}
@media screen and (max-width:1440px) {
h2.cont_ttl {
	margin-left: 0;
}
}

/* 共通ボタン */
div.cont_btn {
	padding-right: 15px;
	a.cont_btn_in {
		height: 50px;
		margin: 0;
		padding: 8px 96px 8px 32px;
		font-size: 15px;
		line-height: 120%;
		font-weight: var(--weight-bold2);
		color: #202020;
		text-decoration: none;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;	
		z-index: 1;
		&:before {
			position: absolute;
			content: '';
			display: block;
			margin: 0;
			padding: 0;
			border: 2px solid #999999;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 5px;
			transform: skewX(-10deg);
			z-index: -2;
			overflow: hidden;
			transition: 0.2s linear;
		}
		&:after {
			position: absolute;
			content: '';
			display: block;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			background: #202020;
			top: 0;
			left: 0;
			transform: skewX(-10deg) scaleX(0);
			border-radius: 5px;
			border: 2px solid #999999;
			transform-origin: right;
			transition: 0.2s linear;
			transition-property: transform;
			z-index: -1;
		}
		span {
			position: absolute;
			display: block;
			width: 20px;
			height: 18px;
			margin: 0;
			padding: 0;
			background: url(../images/icon/arrow_ico_b.png) center / contain no-repeat, url(../images/icon/arrow_ico_w.png) center / contain no-repeat;
			transition: 0.2s linear;
			top: calc(50% - 9px);
			right: 30px;
			z-index: 1;
		}
		&:hover {
			color: #fff;
			&:after {
				transform: skewX(-10deg) scaleX(1);
				transform-origin: left;
			}
			span {
				background: url(../images/icon/arrow_ico_w.png) center / contain no-repeat;
			}
		}
	}
}


/* BOTTOM CONTACT */
#btm_contact {
	margin: 0 auto;
	padding: 100px 0 120px;
	background: url(../images/common/btm_contact.jpg) center / cover no-repeat;
	position: relative;
	z-index: 2;
	div.btm_contact_cont {
		max-width: 1320px;
		margin: 0 auto;
		padding: 0 10px;
		h2.cont_ttl {
			color: #fff;
		}
		div.txt_btn {
			margin: 50px auto 0;
			padding: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.txt {
				width: 470px;
				margin: 0;
				font-size: 18px;
				line-height: 200%;
				color: #fff;
				text-align: left;
			}
			.btn {
				width: 274px;
				margin: 0;
				a.contact_btn {
					width: 274px;
					height: 60px;
					margin: 0 auto;
					padding: 8px 48px 8px 8px;
					font-size: 17px;
					line-height: 120%;
					font-weight: var(--weight-bold2);
					color: #202020;
					text-decoration: none;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;	
					z-index: 1;
					&:before {
						position: absolute;
						content: '';
						display: block;
						margin: 0;
						padding: 0;
						background: #fff;
						border: 2px solid #999999;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						border-radius: 5px;
						transform: skewX(-10deg);
						z-index: -2;
						overflow: hidden;
						transition: 0.2s linear;
					}
					&:after {
						position: absolute;
						content: '';
						display: block;
						width: 100%;
						height: 100%;
						margin: 0;
						padding: 0;
						background: #202020;
						top: 0;
						left: 0;
						transform: skewX(-10deg) scaleX(0);
						border-radius: 5px;
						border: 2px solid #999999;
						transform-origin: right;
						transition: 0.2s linear;
						transition-property: transform;
						z-index: -1;
					}
					span {
						position: absolute;
						display: block;
						width: 32px;
						height: 22px;
						margin: 0;
						padding: 0;
						background: url(../images/icon/mail_ico_b.png) center / contain no-repeat, url(../images/icon/mail_ico_w.png) center / contain no-repeat;
						transition: 0.2s linear;
						top: calc(50% - 11px);
						right: 50px;
						z-index: 1;
					}
					&:hover {
						color: #fff;
						&:after {
							transform: skewX(-10deg) scaleX(1);
							transform-origin: left;
						}
						span {
							background: url(../images/icon/mail_ico_w.png) center / contain no-repeat;
						}
					}
				}
			}
		}
	}
}


/*====================================
フッター
=====================================*/
footer {
	width: 100%;
	margin: 0 auto;
	padding: 180px 0 50px;
	background: #222222;
	position: relative;
	z-index: 2;
	div.footer_in {
		max-width: 1360px;
		margin: 0 auto;
		padding: 0 10px;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		div.info {
			width: 430px;
			margin: 0;
			padding: 10px 0 0;
			color: #fff;;
			text-align: left;
			h6 {
				margin: 0;
				padding: 0;
				position: relative;
				a {
					&:hover {
						opacity: 0.8;
					}
				}
				div.sns {
					position: absolute;
					display: inline-block;
					margin: 0;
					padding: 0;
					bottom: 0;
					left: 200px;
					a {
						display: inline-block;
						margin: 0;
						padding: 0;
						text-decoration: none;
						img {
							transition: 0.2s linear;
						}
						&:hover {
							img {
								filter: invert(30%);
							}
						}
					}
				}
			}
			h5 {
				margin: 35px 0 0;
				padding: 0;
				font-size: 17px;
				line-height: 200%;
				font-weight: var(--weight-bold2);
			}
			p {
				margin: 15px 0 0;
				padding: 0;
				font-size: 14px;
				line-height: 200%;
			}
		}
		div.nav {
			width: 700px;
			margin: 0;
			padding: 0;
			display: flex;
			ul {
				margin: 0;
				padding: 0;
				text-align: left;
				list-style: none;
				&:nth-of-type(1) {
					width: 400px;
				}
				&:nth-of-type(2) {
					width: 300px;
				}
				li {
					display: block;
					margin: 20px 0 0;
					padding: 0;
					&:first-of-type {
						margin-top: 0;
					}
					a {
						display: inline-block;
						margin: 0;
						padding: 0;
						font-size: 30px;
						line-height: 160%;
						font-weight: var(--weight-extrabold1);
						font-family: var(--font-montserrat);
						text-decoration: none !important;
						color: #999999 !important;
						&:hover {
							color: #fff !important;
						}
					}
				}
			}
		}
	}
	#footer_copy {
		max-width: 1450px;
		margin: 150px auto 0;
		padding: 0 90px;
		font-size: 14px;
		line-height: 160%;
		font-weight: var(--weight-nomal);
		font-family: var(--font-montserrat);
		color: #999999;	
		text-align: right;
	}
}

#page_top {
	position: fixed;
	bottom: 40px;
    right: 30px;
	z-index: 80;
	img {
		transition: 0.2s linear;
		&:hover {
			opacity: 0.8;
		}
	}
}