@charset "utf-8";

.sp_only {
	display: none !important;
}
a[href^="tel:"] {
	pointer-events: none;
}

/* PC背景 */
.pc_left {
	width: calc(50% - 225rem);
	display: grid;
	place-content: center;
	position: fixed;
	inset: 0;

	& .pc_bg {
		position: absolute;
		inset: 0;
		opacity: 0;

		&.bg1 {
			opacity: 1;
		}
		& img {
			height: 100%;
			object-fit: cover;
			object-position: 50% 0;
		}
	}
	& .pc_message {
		line-height: 1.5;
		margin-top: 56vh;
		position: relative;

		& img {
			width: calc(100vw / ( 1920 / 123 ));
		}
		& p {
			font-size: calc(100vw / ( 1920 / 48 ));

			& span::before,
			& span::after {
				content: '"';
				color: var(--gray);
			}
		}
		& .nycd {
			color: var(--brown-1);
			font-size: calc(100vw / ( 1920 / 32 ));
			white-space: nowrap;
			position: absolute;
			top: calc(100vw / ( 1920 / 118 ));
			left: calc(100vw / ( 1920 / 154 ));
			rotate: -5deg;
		}
	}
}

/* ヘッダー */
header {
	width: calc(50% - 225rem);
	background: var(--green-4) url(/images/common/pc_bg.png) no-repeat right top / calc(100vw / ( 1920 / 411 )) auto;
	padding-left: calc(100vw / ( 1920 / 100 ));
	align-items: center;
	inset: 0 auto;
	right: 0;
	z-index: 10;

	&::after {
		content: '';
		width: 8rem;
		background: linear-gradient(90deg, var(--black), transparent);
		position: absolute;
		inset: 0;
		opacity: .7;
	}
}

.gnav {
	line-height: 1.8;

	& .nav_menu + .nav_menu {
		margin-top: calc(100vw / ( 1920 / 8 ));
	}
	& .ttl_icon {
		font-size: calc(100vw / ( 1920 / 24 ));
		padding-left: calc(100vw / ( 1920 / 32 ));

		&.home {
			background-image: url(/images/common/pc_nav_icon1.svg);
			background-size: calc(100vw / ( 1920 / 16 )) auto;
		}
		&.hatena {
			background-image: url(/images/common/pc_nav_icon2.svg);
			background-size: calc(100vw / ( 1920 / 17 )) auto;
		}
		&.machine {
			background-image: url(/images/common/pc_nav_icon3.svg);
			background-size: calc(100vw / ( 1920 / 20 )) auto;
		}
		&.skin {
			background-image: url(/images/common/pc_nav_icon4.svg);
			background-size: calc(100vw / ( 1920 / 24 )) auto;
		}
		&.injection {
			background-image: url(/images/common/pc_nav_icon5.svg);
			background-size: calc(100vw / ( 1920 / 20 )) auto;
			margin-top: calc(100vw / ( 1920 / 8 ));
		}
		&.price {
			background-image: url(/images/common/pc_nav_icon6.svg);
			background-size: calc(100vw / ( 1920 / 20 )) auto;
			margin-top: calc(100vw / ( 1920 / 8 ));
		}
	}
	& .nav_menu_list {
		padding-left: calc(100vw / ( 1920 / 30 ));

		& li {
			font-size: calc(100vw / ( 1920 / 16 ));
			margin-top: calc(100vw / ( 1920 / 4 ));
		}
		& .line {
			padding-left: calc(100vw / ( 1920 / 22 ));
			position: relative;

			&::before {
				content: '';
				width: calc(100vw / ( 1920 / 8 ));
				height: 1px;
				background: var(--white);
				position: absolute;
				top: calc(100vw / ( 1920 / 13 ));
				left: 0;
			}
		}
	}
	& .sub_menu {
		width: calc(100vw / ( 1920 / 338 ));
		font-size: calc(100vw / ( 1920 / 14 ));
		margin-top: calc(100vw / ( 1920 / 16 ));
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: calc(100vw / ( 1920 / 10 )) calc(100vw / ( 1920 / 16 ));

		& a:not([target="_blank"]) span {
			padding-right: calc(100vw / ( 1920 / 16 ));
			position: relative;

			&::after {
				content: '';
				width: 6rem;
				height: 3rem;
				border-right: var(--border-white);
				border-bottom: var(--border-white);
				margin-block: auto;
				position: absolute;
				inset: 0 auto;
				right: 0;
				transform: skew(45deg);
				transform-origin: right bottom;
			}
		}
	}
	& .btn {
		width: calc(100vw / ( 1920 / 338 ));
		height: calc(100vw / ( 1920 / 72 ));
		margin-top: calc(100vw / ( 1920 / 32 ));
		margin-left: 0;

		& span {
			background-size: calc(100vw / ( 1920 / 20 ));
			font-size: calc(100vw / ( 1920 / 16 ));
			padding-left: calc(100vw / ( 1920 / 30 ));
		}
	}
	& .sns_list {
		margin-top: calc(100vw / ( 1920 / 32 ));
		gap: calc(100vw / ( 1920 / 32 ));
	}
}

/* 固定ヘッダー_電話ボタンモーダル */
.modal_window {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
}
/* フッター */
footer {
	width: 450rem;
	margin-inline: auto;
}