@charset "UTF-8";

/*共通
================================================ */
html,
body {
	overflow-x: hidden;
}

/*子要素が親要素を越したときの横スクロールバー対策*/

body {
	font-family: 'montserrat', 'Noto Sans JP', "Lato", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; 
	font-feature-settings: "palt";
	font-size: 16px;
}

/* -------------------------------- */
section {
	margin-bottom: clamp(4.375rem, -5.948rem + 21.51vw, 9.375rem);
	/*70,150-768,1110*/
}

section:last-of-type {
	margin-bottom: clamp(8.125rem, -11.23rem + 40.32vw, 17.5rem);
	/*130,280-768,1110*/
}

.inner {
	width: 100%;
	max-width: 1140px;
	margin-right: auto;
	margin-left: auto;
	padding: 0 10px;
}

.img_max {
	display: block;
	width: 100vw;
	max-width: 100vw;
	height: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.eng {
	font-weight: 500;
}

.blank {
	display: block;
}

.pc-visible {
	display: none;
}

.sp-visible {
	display: block;
}


@media screen and (min-width:768px) {
	.inner {
		padding: 0 50px;
	}

	.pc-visible {
		display: block;
	}

	.sp-visible {
		display: none;

	}

	.top_inner {
		margin-left: 50px;
		margin-left: 50px;
	}

	.img_max {
		width: auto;
		max-width: 100vw;
		margin-left: auto;
		margin-right: auto;
	}
}

/*--TOPナビリンク--*/
.x_change a {
	display: inline-block;
	transition: 0.5s;
	transform-origin: center;

	&:hover {
		opacity: 0.6;
		transform: scaleX(1.05);
	}
}

/*--PAGETOPリンク--*/
.back-to-top {

	span {
		transition: 0.5s;
		text-shadow:
			2px 2px 4px rgba(255, 255, 255, 0.6),
			-2px 2px 4px rgba(255, 255, 255, 0.6),
			2px -2px 4px rgba(255, 255, 255, 0.6),
			-2px -2px 4px rgba(255, 255, 255, 0.6);
	}

	&::before,
	&::after {
		transition: 0.5s;
	}

	&:hover::before,
	&:hover::after {
		border-color: #666;
		transition: 0.5s;
	}

	&:hover {
		letter-spacing: 0.4em;
		color: #666;
		transition: 0.5s;
	}
}

/*--TOPリンクボタン--*/
a.btn-link {
	transition: 0.5s;

	span {
		transition: 0.5s;
		letter-spacing: 0.12em;
	}

	&:hover {
		letter-spacing: 0.16em;
		opacity: 0.6;

		span {
			letter-spacing: 0.2em;
			display: block;
		}
	}
}

/*ヘッダー
================================================ */
header {
	background-image: url("../image/img_mainsp.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 100svh;
	position: relative;

	.wrap_nav {
		padding-left: clamp(0.625rem, -3.246rem + 8.06vw, 2.5rem);
		/*10,40-768,1140*/
		height: 48px;
		display: flex;
		align-items: center;

		h1 {
			img {
				width: clamp(11.25rem, 4.934rem + 13.16vw, 14.063rem);
				/*180,225-768,1110*/
			}
		}


		nav {
			ul {
				display: flex;
				flex-direction: column;
			}
		}
	}

	img.mv_catch {
		max-width: 445px;
		width: 60%;
		height: auto;
		position: absolute;
		top: 27%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}


@media screen and (min-width:768px) {
	header {
		background-image: url("../image/img_mainpc.png");
		aspect-ratio: 1 / 0.56;
		height: auto;

		.hamburger-overlay {
			display: none;
		}

		.wrap_nav {
			height: clamp(3.75rem, -1.864rem + 11.7vw, 6.25rem) !important;
			/*60,100-768,1110*/
			padding: 0 clamp(0.625rem, -3.246rem + 8.06vw, 2.5rem);
			/*10,40-768,1140*/
			justify-content: space-between;

			nav {

				visibility: visible;
				opacity: 1;
				background-color: transparent;
				position: relative;
				height: auto;

				div {
					position: static;
					transform: none;

					ul {
						flex-direction: row;

						li {
							transform: none;
							opacity: 1;
							padding-left: 1em;

							a {
								color: #fff;
								padding: 0;
								font-size: clamp(0.938rem, 0.236rem + 1.46vw, 1.25rem);
								/*15,20-768,1110*/
							}
						}
					}
				}
			}
		}

		img.mv_catch {
			width: clamp(16.563rem, 2.892rem + 28.48vw, 27.813rem);
		}
	}
}

@media screen and (min-width:1140px) {

	/*　画面サイズが1140pxからはここを読み込む　*/
	header {

		img {
			max-width: 445px;
		}
	}
}

@media screen and (max-width: 1000px) and (orientation: landscape) {

	/*　スマホ横向き時のMV　*/
	header {
		background-image: url("../image/img_mainpc.png");
	}

	header img.mv_catch {
		width: 34%;
		top: 30%;
	}
}

/* --ナビ------------------------------ */
/* overlay-styles.css */
.hamburger-overlay {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000;
	width: 48px;
	height: 48px;
	border: none;
	background: transparent;
	cursor: pointer;
}

.hamburger-overlay__line {
	position: absolute;
	left: 11px;
	width: 26px;
	height: 1px;
	background-color: #fff;
	transition: all .6s;
}

.hamburger-overlay__line:nth-of-type(1) {
	top: 14px;
}

.hamburger-overlay__line:nth-of-type(2) {
	top: 23px;
}

.hamburger-overlay__line:nth-of-type(3) {
	top: 32px;
}

.hamburger-overlay.active .hamburger-overlay__line {
	background-color: #fff;
}

.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(1) {
	transform: translateY(9px) rotate(-45deg);
}

.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(2) {
	opacity: 0;
}

.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(3) {
	transform: translateY(-9px) rotate(45deg);
}

.nav-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.6);
	visibility: hidden;
	opacity: 0;
	transition: all .6s;
	z-index: 900;
}

.nav-overlay.active {
	visibility: visible;
	opacity: 1;
}

.nav-overlay__content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	text-align: center;
}

.nav-overlay__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-overlay__item {
	opacity: 0;
	transform: translateY(20px);
	transition: all .6s;
}

.nav-overlay.active .nav-overlay__item {
	opacity: 1;
	transform: translateY(0);
}

.nav-overlay.active .nav-overlay__item:nth-child(1) {
	transition-delay: 0.1s;
}

.nav-overlay.active .nav-overlay__item:nth-child(2) {
	transition-delay: 0.2s;
}

.nav-overlay.active .nav-overlay__item:nth-child(3) {
	transition-delay: 0.3s;
}

.nav-overlay.active .nav-overlay__item:nth-child(4) {
	transition-delay: 0.4s;
}

.nav-overlay__link {
	display: inline-block;
	padding: 20px;
	color: #fff;
	font-size: 24px;
	text-decoration: none;
	transition: color .3s;
}
/*グローバルナビ現在地*/
/* body.index nav a[href*="index"],
body.company nav a[href*="company"],
body.service nav a[href*="service"],
body.works nav a[href*="works"],
body.recruit nav a[href*="recruit"],
body.motoken_mail nav a[href*="motoken_mail"] {
  text-shadow: 2px 1px 5px #baf6f9; */

/* グローバルナビ現在地（footerとスマホ用navを除外） */
body.index nav:not(footer nav):not(#overlay-menu) a[href*="index"],
body.company nav:not(footer nav):not(#overlay-menu) a[href*="company"],
body.service nav:not(footer nav):not(#overlay-menu) a[href*="service"],
body.works nav:not(footer nav):not(#overlay-menu) a[href*="works"],
body.recruit nav:not(footer nav):not(#overlay-menu) a[href*="recruit"],
body.motoken_mail nav:not(footer nav):not(#overlay-menu) a[href*="motoken_mail"] {
  text-shadow: 2px 1px 5px #baf6f9;
}
/*フッター
================================================ */
footer {
	color: #fff;
	padding: 0 10px;
	background-image: url("../image/img_footerpc.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	letter-spacing: 0.1em;

	img {
		margin: clamp(1rem, -9.839rem + 22.58vw, 6.25rem) 0 clamp(2rem, -2.903rem + 10.22vw, 4.375rem);
		/*16,100-768,1110*/
		/*32,70-768,1110*/
		width: 60%;
		max-width: 225px;
	}

	.wrap_footer_nav {
		margin-bottom: 1em;

		ul {
			margin-bottom: clamp(2rem, -2.903rem + 10.22vw, 4.375rem);
			/*32,70-768,1110*/

			li {
				line-height: 2em;
			}
		}

		dl {
			margin-bottom: clamp(1.75rem, -7.54rem + 19.35vw, 6.25rem);
			/*28,100-768,1110*/
			font-size: clamp(0.938rem, -0.224rem + 2.42vw, 1.5rem);
			/*15,24-768,1110*/

			dt {
				margin-bottom: clamp(0.5rem, -1.048rem + 3.23vw, 1.25rem);
				/*8,20-768,1110*/
				font-weight: 400;
				font-size: 1em;
			}

			dd {
				line-height: clamp(1rem, -0.032rem + 2.15vw, 1.5rem);
				/*16,24-768,1110*/
			}
		}
	}

	.copy {
		text-align: center;
		font-size: 0.6rem;
		padding-bottom: 1em;
		letter-spacing: 0;
	}
}

@media screen and (min-width:768px) {
	footer {
		/* background-image: url("../image/img_footerpc.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat; */
		letter-spacing: 0.1em;
		padding: 0 clamp(0.625rem, -3.246rem + 8.06vw, 2.5rem);
		/*10,40-768,1140*/

		.wrap_footer_nav {

			dl {
				dd {
					font-size: 16px;
				}
			}
		}


	}
}

/*PEGETOP
================================================ */
.conteiner {
	position: relative;
}

.back-to-top {
	z-index: 100;
	position: fixed;
	right: 0.5em;
	bottom: 20px;
	width: 40px;
	height: 130px;
	padding: 10px 6px 0 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.35em;
	cursor: pointer;
	transition: opacity .3s;
	opacity: 0;
	pointer-events: none;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	user-select: none;
	outline: none;
	transform: scale(0.8);
}

.back-to-top::after {
	content: "";
	position: absolute;
	top: 0;
	left: 14px;
	width: 1px;
	height: 100%;
	border-left: 1px solid #000;
	box-sizing: border-box;
	pointer-events: none;
	box-shadow:
		1px 1px 4px rgba(255, 255, 255, 0.8),
		-1px 1px 4px rgba(255, 255, 255, 0.8),
		1px -1px 4px rgba(255, 255, 255, 0.8),
		-1px -1px 4px rgba(255, 255, 255, 0.8);
}

.back-to-top::before {
	content: "";
	position: absolute;
	top: 7px;
	left: -3px;
	transform: rotate(-45deg);
	width: 20px;
	border-bottom: 1px solid #000;
	pointer-events: none;
	box-shadow:
		1px 1px 4px rgba(255, 255, 255, 0.8),
		-1px 1px 4px rgba(255, 255, 255, 0.8),
		1px -1px 4px rgba(255, 255, 255, 0.8),
		-1px -1px 4px rgba(255, 255, 255, 0.8);
}

.back-to-top.show {
	opacity: 1;
	pointer-events: auto;
}

@media screen and (min-width:768px) {
	.back-to-top {
		right: 1em;
		transform: none;
	}

}

@media screen and (min-width:1250px) {

	/*デザインに合わせたサイズ　共通性なし*/
	.back-to-top {
		right: 43px;
		transform: none;
	}

}

/*メイン
================================================ */
.top h2 {
	font-size: clamp(1.5rem, -0.048rem + 3.23vw, 2.25rem);
	/*24,36-768,1140*/
	line-height: 1.6em;

	span.top_jump {
		font-size: clamp(1rem, -0.032rem + 2.15vw, 1.5rem);
		/*16,24-768,1140*/
	}

}

@-moz-document url-prefix() {

	/*firefox用文字間調整*/
	section.top_masse div h2 {
		letter-spacing: 0.1em;
	}

	.top_sec_text h2 {
		font-size: clamp(1.375rem, -0.044rem + 2.96vw, 2.063rem);
		/*22,33-768,1140*/
	}

	span.top_jump {
		font-size: clamp(0.938rem, 0.034rem + 1.88vw, 1.375rem);
		/*15,22-768,1140*/
	}
}

.top_inner {
	margin-left: 20px;
	margin-right: 20px;



	.top_sec_text {
		margin-top: clamp(6.25rem, 1.519rem + 21.03vw, 16.5rem);

		/*100,264-360,1140*/
		h2 {
			margin-bottom: clamp(1.875rem, -0.721rem + 11.54vw, 7.5rem);
			/*30,120-360,1140*/
		}
	}
}

@media screen and (min-width:768px) {
	.top_inner {
		align-items: center;
		margin-left: clamp(1.25rem, -3.911rem + 10.75vw, 3.75rem);
		/*20,60-768,1140*/
		margin-right: clamp(1.25rem, -3.911rem + 10.75vw, 3.75rem);

		/*20,60-768,1140*/
		img {
			width: clamp(23.75rem, 1.815rem + 45.7vw, 34.375rem);
			/*380,550-768,1140*/
		}

		.top_sec_text {
			margin-top: 0;

		}
	}

}

@media screen and (min-width:1140px) {
	.top_inner {
		align-items: center;

		img {
			width: clamp(23.75rem, 1.815rem + 45.7vw, 34.375rem);
			/*380,550-768,1140*/
		}
	}

	.top_sec_text {
		margin: top 0;

	}
}

/*--TOP メッセージ------------------*/
.top_masse {
	margin-bottom: clamp(5rem, 2.611rem + 10.62vw, 12.5rem);
	/*80,200-360,1490*/

	img {
		max-width: 727px;
		width: 60%;
		/*262,727-360,1140*/
		margin-top: clamp(3.75rem, 1.544rem + 9.8vw, 6.25rem);
		/*60,100-360,768*/
		margin-bottom: clamp(1.875rem, 1.599rem + 1.23vw, 2.188rem);
		/*30,35-360,768*/
		opacity: 0.3;
	}

	div {
		display: flex;
		flex-direction: column;
	}

	h2 {
		font-size: clamp(1.5rem, 1.154rem + 1.54vw, 2.25rem);
		line-height: 1.6em;
		margin-bottom: clamp(1rem, -0.103rem + 4.9vw, 2.25rem);
		/*16,36-360,768*/
		width: inherit;
	}

	p {

		letter-spacing: 0.1em;

		span {
			display: block;
			margin-bottom: clamp(1.25rem, 0.588rem + 2.94vw, 2rem);
			/*20,32-360,768*/
			line-height: 1.2em;
		}
	}
}

@media screen and (min-width:768px) {
	.top_masse {

		img {
			max-width: 727px;
			width: clamp(26.625rem, -12.214rem + 80.91vw, 45.438rem);
			/*426,727-768,1140*/
			margin-top: 100px;
			margin-bottom: 35px;
		}

		div {

			h2 {
				width: inherit;
				letter-spacing: 0.1em;
				margin-bottom: 1.5em;

			}

			p {

				line-height: 3em;
				letter-spacing: 0.1em;
			}
		}
	}
}

@media screen and (min-width:1490px) {

	/*メッセージの調節のみ*/
	.top_masse {
		margin-bottom: 270px;

		div {
			flex-direction: row;

			h2 {
				width: 380px;
				margin-right: clamp(0.063rem, -53.863rem + 57.91vw, 15.625rem);
			}
		}
	}
}

/*--TOP 事業内容------------------*/
.top_service {
	display: flex;
	flex-direction: column;

	img {
		max-width: 850px;
	}

}

@media screen and (min-width:768px) {
	.top_service {
		flex-direction: row;

		img {
			display: block;
			width: clamp(22.5rem, 2.083rem + 42.53vw, 53.125rem);
			/*360,850-768,1920*/
			height: auto;
			max-width: 850px;
			height: auto;
			margin: 0 clamp(1.875rem, -0.706rem + 5.38vw, 3.125rem) 0 calc(50% - 50vw) !important;
			/*30,50-768,1140*/
			/* 左端を画面端にくっつける */
		}
	}
}

/*--TOP 施工実績------------------*/
.top_works {
	.top_gallary {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		width: 100vw;
		max-width: 100vw;

		img {
			width: calc(50% - 8px);
			/* gapの半分を引く */
			max-width: 100%;
			height: auto;
			display: block;
		}

	}

	.top_sec_text {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
}

@media screen and (min-width:768px) {
	.top_works {
		.top_gallary {
			width: 100vw;
			max-width: 100vw;
			margin-left: calc(50% - 50vw);
			margin-right: calc(50% - 50vw);
			flex-wrap: wrap;
			gap: 2vw;
			justify-content: space-around;

			img {
				width: calc((100vw - 8vw) / 5);
				max-width: none;
				height: auto;
				display: block;
			}
		}

		.top_sec_text {
			flex-direction: row;
			align-items: flex-end;
			justify-content: space-between;
			margin-top: clamp(5rem, -15.645rem + 43.01vw, 15rem);
			/*80,240-768,1140*/
			margin-bottom: clamp(8.75rem, -14.476rem + 48.39vw, 20rem);
			/*140,320-768,1140*/

			h2 {
				margin-bottom: clamp(2.5rem, -7.823rem + 21.51vw, 7.5rem);
				/*40,120-768,1140*/
			}
		}
	}
}

/*--TOP_会社概要------------------*/
.top_company {
	display: flex;
	flex-direction: column;
	margin-bottom: clamp(8.125rem, 7.115rem + 4.49vw, 12.5rem);
	/*130,200-360,1920*/

	img {
		order: 1
	}

}

.top_sec_text {
	order: 2;
}

@media screen and (min-width:768px) {
	.top_company {
		flex-direction: row;
		justify-content: flex-end;

		img {
			display: block;
			width: clamp(27.188rem, -1.979rem + 60.76vw, 70.938rem);
			/*435,1135-768,1920*/
			max-width: 1135px;
			height: auto;
			margin: 0 calc(50% - 50vw) 0 clamp(1.875rem, -0.706rem + 5.38vw, 3.125rem) !important;
			/*30,50-768,1140*/
			/* 右端を画面端にくっつける */
			order: 2;
		}

		.top_sec_text {
			text-align: right;
			orphans: 1;

		}
	}

}


/*--top_インフォメーション------------------*/
section.top_info {
	text-align: center;

	h2 {
		letter-spacing: 0.3em;
		font-size: clamp(1.25rem, 0.962rem + 1.28vw, 1.875rem);
		/*20,30-360,1140*/
		border-bottom: #000 1px solid;
		padding-bottom: clamp(1.563rem, 1.13rem + 1.92vw, 2.5rem);
		/*25,40-360,1140*/
		margin-bottom: clamp(3.125rem, 2.26rem + 3.85vw, 5rem);
		/*50.80-360,1140*/
	}

	ul {
		li {
			margin-bottom: clamp(1.563rem, 1.13rem + 1.92vw, 2.5rem);
			/*25,40-360,1140*/

			span {
				display: block;
				margin-right: 0.8em;
				margin-bottom: 0.5em;
			}

			span:nth-of-type(2) {
				margin: 0;
			}
		}
	}
}

@media screen and (min-width:768px) {
	section.top_info {
		ul {
			li {
				span {
					display: inline;
					margin-bottom: 0;
				}
			}
		}
	}

}

/*--TOP ボタン------------------*/
.top .btn-link {
	display: inline-block;
	width: 168px;
	height: 40px;
	font-size: 14px;
	position: relative;
	text-align: left;
	letter-spacing: 0.12em;
	padding-top: 5px;
	padding-left: 12px;
	text-decoration: none;
	cursor: pointer;

	&:after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid #000;
		box-sizing: border-box;
		pointer-events: none;
	}

	&:before {
		content: "";
		position: absolute;
		bottom: 8.4px;
		right: -3px;
		transform: rotate(45deg);
		width: 24px;
		border-bottom: 1px solid #000;
		pointer-events: none;
	}

	span {
		font-size: 10px;
		display: block;
		line-height: 1.5;
	}
}

@media screen and (min-width:1140px) {
	.top .btn-link {
		width: 280px;
		height: 60px;
		font-size: 22px;

		padding-top: 5px;
		padding-left: 20px;

		&:after {

			bottom: 0;
			left: 0;
		}

		&:before {

			bottom: 14px;
			right: -6px;
			width: 40px;

		}

		span {
			font-size: 12px;
			line-height: 2;
		}
	}
}

/*下層ページヘッダー
================================================ */
header.lower {
	background-image: url("../image/img_lowermain_sp.png");
	background-size: 100% auto;
	background-position: 0% 0%;
	width: 100vw;
	height: clamp(13.75rem, 7.684rem + 26.96vw, 20.625rem);
	/*220,330-360,768*/
}

@media screen and (min-width:768px) {
	header.lower {
		background-image: url("../image/img_lowermain_pc.png");
		height: clamp(20.625rem, 11.458rem + 19.1vw, 34.375rem);
		/*330,550-768,1920*/
	}
}

:root {
	--mb70: clamp(1.875rem, 0.675rem + 5.33vw, 4.375rem);
	/*30.70-360.1110*/
	--mb120: clamp(2.5rem, 0.1rem + 10.67vw, 7.5rem);
	/*40.120-360.1110*/
	--mb100: clamp(2.5rem, 0.7rem + 8vw, 6.25rem);
	/*40.100-360.1110*/
	--fsz22: clamp(1.125rem, 1.005rem + 0.53vw, 1.375rem);
	/*18.22-360.1110*/
}

@media screen and (min-width: 768px) {
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
		text-decoration: none;
	}
}

/*下層ページ共通
================================================ */
.other {
	header {
		height: 60svh;
	}
}

@media screen and (min-width: 768px) {
	.other {
		header {
			background-image: url(../image/img_mainpc.png);
			aspect-ratio: 1 / 0.44;

		}
	}
}

[class^='m_'] {
	width: 90%;
	max-width: 1110px;
	margin: clamp(1.875rem, 0.675rem + 5.33vw, 4.375rem) auto 0;
	/*17.65-360.1110*/

	h2 {
		font-size: clamp(2.125rem, 1.345rem + 3.47vw, 3.75rem);
		/*34.60-360.1110*/
		letter-spacing: 0.12em;
		line-height: 1em;
		margin-bottom: clamp(2.5rem, 0.1rem + 10.67vw, 7.5rem);
		/*40.120-360.1110*/

		span {
			display: block;
			font-size: clamp(1.25rem, 1.01rem + 1.07vw, 1.75rem);
			/*20.28-360.1110*/
			letter-spacing: 0.15em;
			line-height: 1em;
			margin-top: 0.5em;
		}
	}

	section {
		h3 {
			font-size: clamp(1.25rem, 1.01rem + 1.07vw, 1.75rem);
			/*20.28-360.1110*/
			padding-bottom: 0.4em;
			margin-bottom: 0.2em;
			border-bottom: 1px solid #707070;
			line-height: 1em;
			letter-spacing: normal;

			span {
				display: inline-block;
			}
		}

		h4 {
			font-size: var(--fsz22);
			margin-bottom: 1em;

			span {
				display: inline-block;
			}
		}

		dl {
			border-bottom: 1px solid #707070;
			display: block;
			width: 100%;
			font-size: 15px;

			dt {
				border-top: 1px solid #707070;
				padding: 1.5em 0.5em 0.2em 0.5em;
			}

			dd {
				padding: 1em 1em;
				padding: 0.2em 0.5em 1.5em 0.5em;
			}
		}

		.read {
			line-height: 1.7em;
		}

		.sizeup {
			font-size: 1.05em;
			letter-spacing: 0.05em;
			font-weight: 500;
		}

		.size_asian {
			letter-spacing: -0.05em;
		}
	}

}

@media screen and (min-width:768px) {
	[class^='m_'] {
		section {
			h3 {
				margin-right: calc(50% - 50vw);
				letter-spacing: 0.15em;
				line-height: 1.5em;
				letter-spacing: 0.15em;
			}

			dl {
				display: flex;
				flex-wrap: wrap;

				dt {
					width: 10em;
					padding: 0;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}

				dd {
					border-top: 1px solid #707070;
					width: calc(100% - 10em);
					padding: 3em 1em 3em 0;
				}
			}
		}
	}
}

.wrap_button {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 80%;
	max-width: 350px;
	container-type: inline-size;

	a {
		width: 100%;

		.design_button {
			border: 1px solid #707070;
			border-radius: 1.5em;
			line-height: 1em;
			padding-top: 1em;
			padding-bottom: 1em;

			text-align: center;
			width: 100%;
			font-size: var(--fsz22);
			transition: 0.5s;

			&:hover {
				opacity: 0.6;
				transform: scaleX(1.01);
			}
		}
	}

	p {
		margin: 0.5em 0 3em;
		font-size: 5cqw;
	}
}

@-moz-document url-prefix() {

	/*firefox用文字間調整*/
	.wrap_button p {
		letter-spacing: 0.1em;
		font-size: 4.5cqw;
	}
}

@media screen and (min-width:768px) {
	.m_company {

		div.wrap_button {
			margin: 0 10px;

			p {
				margin: 1em 0;
			}
		}
	}
}

/*会社概要
===============================================*/
.m_company {
	h4 {
		margin-bottom: 1em;
	}

	.read {
		text-align: left;
		line-height: 2em;
		margin-bottom: var(--mb120);
		text-align: center;
	}

	.mark {
		text-align: center;

		h3 {
			text-align: left;
			margin-bottom: var(--mb100);
		}

		h4 {
			margin-bottom: var(--mb70);
		}

		p {
			width: 90%;
			max-width: 820px;
			margin: 0 auto;
			margin-bottom: 3em;
		}

		img {
			width: 50%;
			max-width: 200px;
		}
	}

	#profile {
		p {
			font-size: 15px;
			text-align: right;
			margin-top: 0.7em;
		}
	}

	.map {
		width: 100%;
		max-width: none;

		iframe {
			width: 100%;
			border: 0;
			height: clamp(17.5rem, 13.3rem + 18.67vw, 26.25rem);
			/*280.420-360.1110*/
		}
	}

	.company_contact {
		display: flex;
		flex-direction: column;
		align-items: center;

		p {
			margin: 0.5em 0 3em;
			font-size: 5cqw;
		}
	}

	#about,
	#profile,
	#access {
		scroll-margin-top: 80px;
	}
}


@media screen and (min-width:768px) {
	.m_company {

		.company_contact {
			flex-direction: row;
			align-items: flex-start;
			justify-content: center;
		}

		#about,
		#profile,
		#access {
			scroll-margin-top: 80px;
		}
	}
}

@-moz-document url-prefix() {

	/*firefox用文字間調整*/
	.m_company .company_contact p {
		font-size: 4.5cqw;
		letter-spacing: 0;
	}
}

/*事業内容
===============================================*/
.m_service {
	section {
		h3 {
			margin-bottom: var(--mb100);
		}

		div {
			width: 80%;
			margin: 0 auto;

			img {
				width: 100%;
				margin-bottom: 3em;
			}

			div {
				width: 100%;
				margin-left: 0;

				p {
					margin-bottom: var(--mb120);
				}
			}
		}
	}
}

@media screen and (min-width:768px) {
	.m_service {
		section {
			div {
				width: 100%;
				margin: 0;
				display: flex;
				align-content: center;
				align-items: center;
				margin-bottom: clamp(6.25rem, -0.768rem + 14.62vw, 9.375rem);
				/*100.150-768.1110*/

				img {
					width: clamp(15rem, -27.105rem + 87.72vw, 33.75rem);
					/*240.540-768.1110*/
					margin-bottom: 0;
				}

				div {
					margin-left: 2em;
					display: block;
					margin-bottom: 0;

					p {
						margin-bottom: 0;
					}

				}
			}

			.servis_irreg {
				img {
					order: 2;
				}

				div {
					order: 1;
					text-align: right;
					margin: 0 2em 0 0;
				}
			}
		}
	}
}

/*施工実績
===============================================*/
.m_works {
	section {
		h3 {
			margin-bottom: var(--mb100);
		}

		.wrap_gallery {
			margin-bottom: 40px;
		}
	}
}

/*ナビ*/
.m_works .pagetop_navi {
	ul.current_page {
		border: 1px solid #707070;
	}

	ul {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
		gap: 0;
		margin: 0 auto 1em;
		padding: 0;
		width: 90%;
		list-style: none;
		box-sizing: border-box;

		li {
			padding: 0.3em 0.5em;
			box-sizing: border-box;

			a {
				display: block;
				text-decoration: none;
				color: inherit;
				transition: transform 0.3s, opacity 0.3s;
			}
		}
	}
}

@media (min-width: 810px) {
	.m_works .pagetop_navi ul {
		display: block;
		width: fit-content;
		margin: 0 0 1em 0;

		li {
			width: clamp(7.188rem, -0.406rem + 15vw, 10rem);
			/*115-160.810-1110*/
		}
	}
}


/*ホバー*/
.m_works {
	.pagetop_navi {
		ul {

			a {
				transition: 0.5s;
				display: inline-block;

				&:hover {
					opacity: 0.6;
					transform: scaleX(1.03);
				}
			}
		}
	}
}

/*ギャラリー*/

.wrap_gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	a {

		img {
			width: 100%;
		}
	}
}

.item_box {
	box-sizing: border-box;
	width: calc((100% - 2.8%) / 2);
	height: calc((100% - 2.8%) / 2);
	margin-bottom: 2.8%;
	position: relative;

	.item_link {
		display: block;

		.item_content {
			position: relative;
			overflow: hidden;

			.item_image {
				img {
					width: 100%;
					height: auto;
					vertical-align: top;
				}
			}
		}
	}
}

.item_mask {
	position: absolute;
	/* ← ここは必須条件のまま */
	bottom: 0;
	left: 0;
	width: 100%;
	height: clamp(3.563rem, 0.637rem + 13vw, 4.375rem);
	/*57.70-360.460*/
	background-color: rgba(255, 255, 255, 0.8);
	opacity: 0;
	padding-top: 8%;
}

.item_mask-text {
	padding: 0 clamp(0.438rem, -0.912rem + 6vw, 0.813rem);
	/*4.13-360.460*/
	font-size: clamp(0.625rem, -0.05rem + 3vw, 0.813rem);
	/*10.13-360.460*/
	color: #000;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	/* ← これでテキストは2行に収まる */
}

.item_mask:after {
	content: "View image";
	position: absolute;
	bottom: 0.3em;
	right: 0.3em;
	font-size: 0.7em;
}

/* hover */
.item_box .item_link {
	img {
		transition: transform 1s ease;
	}

	&:hover {
		.item_mask {
			opacity: 1;

		}

		img {
			transform: scale(1.05);

		}
	}

}

/* -fade-in */
.item_box.-fade-in .item_mask {
	transition: opacity 2.0s ease;
}

@media (hover: none) and (pointer: coarse) {

	/* タッチデバイス専用のCSS */
	.item_box .item_link {
		&:hover {
			.item_mask {
				opacity: 0;
			}

			img {
				transform: scale(1);

			}
		}

	}
}

@media screen and (min-width:461px) {

	/*タブレット、PCは3列*/
	.item_box {
		width: calc((100% - 2.8%) / 3);
		height: calc((100% - 2.8%) / 3);
		margin-bottom: 1.4%;
	}

	.item_mask {
		padding-top: clamp(0.313rem, -0.753rem + 3.7vw, 1.813rem);
		/*5.29-461.1110*/
		height: clamp(2.875rem, 0.478rem + 8.32vw, 6.25rem);
		/*46.100-461.1110*/
	}

	.item_mask:after {
		bottom: clamp(0.063rem, -0.337rem + 1.39vw, 0.625rem);
		/*1.10-461.1110*/
		right: 2%;
		font-size: clamp(0.625rem, 0.536rem + 0.31vw, 0.75rem);
		/*10.12-461.1110*/
	}

	.item_mask-text {
		font-size: clamp(0.688rem, 0.554rem + 0.46vw, 0.875rem);
		/*11.14-461.1110*/
		padding: 0 clamp(0.313rem, -0.043rem + 1.23vw, 0.813rem);
		/*5.13-461.1110*/
	}
}

/*ギャラリーリスト*/
.m_works {
	section {
		ul.const_name {
			display: block;
			border: none;
			padding: 0;
			margin: 0;
			line-height: 1.7em;

			li {
				margin-left: 1.5em;
				position: relative;

				&::before {
					content: none;
				}

				/* マーカー分の余白 */
				a {
					display: inline-block;
					/* transformのぼやけを抑える */
					/* position: relative; */
					transition: transform 0.3s ease, opacity 0.3s ease;
					text-decoration: underline;

					&:hover {
						transform: scale(1.01);
						/* マーカーも文字も一緒にホバーで拡大 */
						opacity: 0.6;
					}

					&::before {
						content: "・";
						position: absolute;
						left: -1.2em;
						/* マーカー位置調整 */
					}
				}
			}

			li.nomodal_listmark {

				/*ホバーなしリストのマーク指示*/
				&::before {
					content: "・";
					position: absolute;
					left: -1.2em;

				}
			}
		}
	}
}

/*ページフッターナビ*/
.page_footernavi {
	p {
		letter-spacing: 0.1em;

		a {
			margin-left: 1em;
			transition: 0.5s;
			display: inline-block;

			&:hover {
				opacity: 0.6;
				transform: scaleX(1.02);
			}
		}
	}
}

/*ギャラリーオーダー*/
.g_2024 {
	.item_order1 {
		order: 1;
	}

	.item_order2 {
		order: 2;
	}

	.item_order3 {
		order: 5;
	}

	.item_order4 {
		order: 3;
	}

	.item_order5 {
		order: 4;
	}

	.item_order6 {
		order: 7;
	}

	.item_order7 {
		order: 6;
	}

	.item_order8 {
		order: 9;
	}

	.item_order9 {
		order: 10;
	}

	.item_order10 {
		order: 8;
	}

	.item_order11 {
		order: 11;
	}

	.item_order12 {
		order: 12;
	}
}


.g_2023 {
	.item_order1 {
		order: 1;
	}

	.item_order2 {
		order: 2;
	}

	.item_order3 {
		order: 5;
	}

	.item_order4 {
		order: 3;
	}

	.item_order5 {
		order: 4;
	}

	.item_order6 {
		order: 6;
	}
}

.g_2022 {
	.item_order1 {
		order: 1;
	}

	.item_order2 {
		order: 2;
	}

	.item_order3 {
		order: 4;
	}

	.item_order4 {
		order: 2;
	}

	.item_order5 {
		order: 6;
	}

	.item_order6 {
		order: 5;
	}
}

.g_2021 {

	.item_order1 {
		order: 1;
	}

	.item_order2 {
		order: 3;
	}

	.item_order3 {
		order: 2;
	}

	.item_order4 {
		order: 5;
	}

	.item_order5 {
		order: 6;
	}

	.item_order6 {
		order: 4;
	}
}

.g_2020 {
	.item_order1 {
		order: 1;
	}

	.item_order2 {
		order: 5;
	}

	.item_order3 {
		order: 2;
	}

	.item_order4 {
		order: 3;
	}

	.item_order5 {
		order: 6;
	}

	.item_order6 {
		order: 4;
	}
}

.g_2019 {
	.item_order1 {
		order: 1;
	}

	.item_order2 {
		order: 3;
	}

	.item_order3 {
		order: 2;
	}

	.item_order4 {
		order: 5;
	}

	.item_order5 {
		order: 4;
	}

	.item_order6 {
		order: 6;
	}
}

.g_2018 {
	.item_order1 {
		order: 1;
	}

	.item_order2 {
		order: 3;
	}

	.item_order3 {
		order: 2;
	}

	.item_order4 {
		order: 5;
	}

	.item_order5 {
		order: 6;
	}

	.item_order6 {
		order: 4;
	}
}

.g_2017 {
	.item_order1 {
		order: 1;
	}

	.item_order2 {
		order: 2;
	}

	.item_order3 {
		order: 3;
	}

	.item_order4 {
		order: 4;
	}

	.item_order5 {
		order: 5;
	}

	.item_order6 {
		order: 6;
	}
}

.g_2016 {
	.item_order1 {
		order: 1;
	}

	.item_order2 {
		order: 2;
	}

	.item_order3 {
		order: 3;
	}

	.item_order4 {
		order: 4;
	}

	.item_order5 {
		order: 5;
	}

	.item_order6 {
		order: 6;
	}
}

.g_2015 {
	.item_order1 {
		order: 1;
	}

	.item_order2 {
		order: 2;
	}

	.item_order3 {
		order: 3;
	}

	.item_order4 {
		order: 4;
	}

	.item_order5 {
		order: 5;
	}

	.item_order6 {
		order: 6;
	}
}

.g_2014 {
	.item_order1 {
		order: 1;
	}

	.item_order2 {
		order: 2;
	}

	.item_order3 {
		order: 3;
	}

	.item_order4 {
		order: 4;
	}

	.item_order5 {
		order: 5;
	}

	.item_order6 {
		order: 6;
	}
}

@media screen and (min-width:461px) {

	.item_box.item_order1,
	.item_box.item_order2,
	.item_box.item_order3,
	.item_box.item_order4,
	.item_box.item_order5,
	.item_box.item_order6,
	.item_box.item_order7,
	.item_box.item_order8,
	.item_box.item_order9,
	.item_box.item_order10,
	.item_box.item_order11,
	.item_box.item_order12 {
		order: 0;
	}
}

/*採用情報
===============================================*/
.m_recruit {
	section {
		h3 {
			margin-bottom: var(--mb70);
		}

		div {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: var(--mb120);

			p.read {
				margin-bottom: 1.5em;
				line-height: 2em;
			}

			img {
				width: 160px;
			}
		}
	}
}

@media screen and (min-width:768px) {
	.m_recruit {
		section {
			div {
				flex-direction: row;
				align-items: flex-start;
				justify-content: space-between;

				p {
					margin-right: 1em;
					margin-bottom: 0;
				}

				img {
					margin-right: clamp(0.063rem, -11.025rem + 23.1vw, 5rem);
					/*1.80-768.1110*/
				}
			}
		}
	}
}

/*お問い合わせ
===============================================*/
.m_motoken_mail {
	.tell {
		display: flex;
		flex-direction: column;
		align-items: center;

		h3 {
			width: 100%;
			margin-bottom: var(--mb120);
		}

		div {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 80%;
			max-width: 350px;
			container-type: inline-size;

			button {
				text-align: center;
				width: 100%;
				font-size: var(--fsz22);
			}

			p {
				margin: 0.5em 0 3em;
				font-size: 5cqw;
			}
		}
	}

	.form {
		h3 {
			margin-bottom: var(--mb100);
		}

		dl {
			border: none;

			dt {
				border: none;
			}

			dd {
				border: none;
			}
		}

		.wrap_button {
			margin: 0 auto;

			.wrap_check {
				display: flex;
				align-items: center;
				margin-bottom: 1em;
				letter-spacing: 0.15em;
				font-size: clamp(0.875rem, 0.765rem + 0.49vw, 1rem);

				/*14.16-360.768*/
				a {
					text-decoration: underline;
				}

				input[type="checkbox"] {
					margin-right: 0.5em;
				}
			}
		}
	}
}

form input[type=text],
form textarea {
	display: block;
	width: 100%;
	border: #707070 1px solid;
}

form input[type=text] {
	height: clamp(3rem, 2.449rem + 2.45vw, 3.625rem);
	/*48.58-360.768*/
	margin-bottom: clamp(0.063rem, -2.364rem + 10.78vw, 2.813rem);
	/*1.48-360.768*/
	padding-left: 1em;
}

form textarea {
	padding: 1em;
	margin-bottom: var(--mb100);
}

input[type="submit"] {
	letter-spacing: 0.2em;
}

::placeholder {
	color: #ccc;
}

.wrap_button {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 80%;
	max-width: 350px;
	container-type: inline-size;

	.design_button {
		border: 1px solid #707070;
		border-radius: 1.5em;
		line-height: 1em;
		padding-top: 1em;
		padding-bottom: 1em;
		text-align: center;
		width: 100%;
		font-size: var(--fsz22);
		transition: 0.5s;

		&:hover {
			opacity: 0.6;
			transform: scaleX(1.01);
		}
	}
}

@-moz-document url-prefix() {

	/*firefox用文字間調整*/
	.m_motoken_mail .tell div p {
		font-size: 4.5cqw;
		letter-spacing: 0;
	}
}

@media screen and (min-width:768px) {
	.m_motoken_mail {
		.tell {
			display: block;

			h3 {
				margin-right: calc(50% - 50vw);
				width: auto;
			}

			div {
				margin: 0 auto;
			}
		}

		.form {
			dl {
				display: block;

				dt {
					width: auto;
					font-weight: 400;
					margin-bottom: 1em;

					span {
						border: 1px solid #000;
						font-size: 10px;
						padding: 2px 4px;
						margin-left: 1em;
					}
				}

				dd {
					width: auto;
					padding: 0;
				}

				div {
					margin: 0 auto;
				}
			}
		}
	}
}

/*お問い合わせ_サンクスページ
===============================================*/
.m_motoken_mail_thanks {
	section {
		h3 {
			margin-bottom: var(--mb70);
		}

		.wrap_button {
			margin: 0 auto;
		}
	}
}

/*サイトマップ
===============================================*/

.m_sitemap {
	section {
		letter-spacing: 0.15em;

		.sitemap_parent {
			padding: clamp(2.188rem, 1.557rem + 2.8vw, 3.5rem) 0;
			/*35.56-360.1110*/
			border-top: 1px solid #707070;
			text-align: center;

			p::before {
				content: ">";
				font-size: 1.2em;
				margin-right: 0.3em;
			}
		}

		.sitemap_child {
			padding: 0 0 0 3em;
			width: fit-content;
			text-align: left;
			margin: 0 auto;

			p::before {
				content: "-";
				font-size: 1.2em;
				margin-right: 0.3em;
			}
		}

		p {
			transition: 0.5s;
			padding-bottom: 1em;

			&:hover {
				opacity: 0.6;
				transform: scaleX(1.05);
			}
		}

		.sizeup {
			letter-spacing: 0.15em;
		}
	}
}

/*個人情報保護方針
===============================================*/
.m_policy {
	section {
		h3 {
			margin-bottom: var(--mb100)
		}

		div {
			p {
				margin-bottom: var(--mb70);
				line-height: 1.5em;

				.wrap_list {
					display: block;
					margin-left: 1em;
					padding-left: 0;
					text-indent: 0;

					a {
						text-decoration: underline;
						display: inline-block;
						transition: 0.5s;


						&:hover {
							opacity: 0.6;
							transform: scaleX(1.05);
						}
					}
				}

				.wrap_list_s {
					margin-top: 0.5em;
				}

				.wrap_list_m {
					margin-top: clamp(1rem, 0.58rem + 1.87vw, 1.875rem);
					/*16.30-360.1110*/
				}

				.wrap_list.wrap_list_long {
					text-indent: -0.5em;
					padding-left: 0.5em;
				}
			}
		}
	}
}