@charset "utf-8";
/*
Theme Name:mrp-child
Template:mrp
Version: 1.0.0
*/
/*
DesignCode CSS: ver 0.01
*/
/*------------------------------------------------------
Theme Material
------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&Anton&family=Noto+Sans+JP:wght@100..900&family=Satisfy&display=swap');

:root {
	--color-background: #D3D3D4;
	--color-font: #111;
	--color-wt: #fff;
	--color-bk: #111;
	--color-background-opbk: #111111cf;
	/* ----color-primary: #F6FF00; */
	--color-primary: #5cc281;
	--color-primary-shade: #333;
	--color-primary-tint: #fff;
	--color-secondary: #6C6C6C;
	--color-secondary-tint: #D3D3D4;
	--color-table-border: #D3D3D4;
	--body-font-size: min(calc(1.8rem + (1vw - 1.92rem) * 0.2589), 1.8rem);
	--body-font-family: 'Zen Kurenaido', 'Noto Sans JP', sans-serif;
	--content-max-width: 1240px;
	--header-background: #111;
	--header-color-font: #111;
	/* --header-color-primary: #F6FF00;
    --header-color-primary-shade: #C8CF00; */
	--header-color-primary: #5cc281;
	--header-color-primary-shade: #00cf1e;
	--header-color-primary-tint: #fff;
	--footer-background: #111;
	--footer-color-font: #fff;
	--footer-color-primary: #fff;
	--font-family01: 'Satisfy', 'Zen Kurenaido', 'Noto Sans JP', sans-serif;
	--font-family02: 'Zen Kurenaido', 'Noto Sans JP', sans-serif;
	--font-family03: 'Zen Kurenaido', 'Noto Sans JP', sans-serif;
}

body {
	font-weight: 500;
}

a {
	color: var(--color-bk);
	transition: 0.3s all;

	&:hover {
		color: var(--color-primary);
	}
}

a:hover img {
	opacity: 1;
}

/*----------------------------------------------------------------
MV
----------------------------------------------------------------*/

/*プリローダーとの干渉対応*/
#mainImg {
	display: none;
}

body:not(.home) .placeholder-class {
	display: none !important;
}

/* スライド内点滅アニメーション */
@keyframes opacity {

	0%,
	100% {
		opacity: 0.5;
	}

	50% {
		opacity: 1;
	}
}

.fvtxt {
	animation: 2s opacity infinite;
}

/*----------------------------------------------------------------
header
----------------------------------------------------------------*/

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

	/*header_min-width: 1024px common*/

	header#header {
		background: transparent;
		-webkit-transition: all 0.7s;
		-o-transition: all 0.7s;
		transition: all 0.7s;
		position: fixed;
	}

	#header-layout {
		width: 100%;
		justify-content: flex-end;
		background: #00000087;
	}

	nav#mainNav ul,
	#header .header__nav-contact {
		background: transparent;
	}

	nav#mainNav ul li a:active,
	nav#mainNav ul li a:hover,
	nav#mainNav ul li.current-menu-ancestor a,
	nav#mainNav ul li.current-menu-item a,
	nav#mainNav ul li.current-menu-parent a,
	nav#mainNav ul li a:active,
	nav#mainNav ul li a:hover,
	nav#mainNav ul li.current-menu-ancestor a,
	nav#mainNav ul li.current-menu-item a,
	nav#mainNav ul li.current-menu-parent a {
		background: transparent;
	}

	nav#mainNav ul li a b,
	nav#mainNav ul li a span {
		color: var(--header-color-primary-tint);
		transition: 0.3s all;
		font-weight: 400;
		font-family: var(--font-family02);
	}

	nav#mainNav ul li.current-menu-item a b,
	nav#mainNav ul li a:hover b,
	nav#mainNav ul li a:active b,
	nav#mainNav ul li.current-menu-parent a b {
		color: var(--header-color-primary-tint);
	}

	/*header__animation*/

	nav#mainNav ul li a:hover b {
		color: var(--header-color-primary);
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px var(--color-primary), 0 0 70px var(--color-primary), 0 0 80px var(--color-primary), 0 0 100px var(--color-primary), 0 0 150px var(--color-primary);
	}

	/*header__contact*/

	#header ul.header__contact {
		height: auto;
		padding-right: 20px;
	}

	#header a.head_btn {
		background: var(---color-bk);
		font-family: var(--body-font-family);
		color: var(--color-wt);
		border-radius: 0;
		font-style: normal;
		font-weight: 500;
		font-size: 16px;
		line-height: 1.2;
		display: block;
		text-align: center;
		padding: 15px;
		-webkit-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;

		&:before {
			margin-bottom: 0;
			font-size: 1.2em;
		}

		&.mail_btn::before {
			content: none !important;
		}

		&:hover {
			color: var(--color-bk);
			background-color: var(--color-primary-tint);
			box-shadow: 0px 0px 70px rgb(0 188 108);
			-webkit-transition: all 0.3s;
			-o-transition: all 0.3s;
			transition: all 0.3s;

			&:before {
				color: var(--color-bk);
			}
		}
	}

	/*sticky-header*/
	.sticky-header #header>.inner {
		height: auto;
		background: transparent;
		box-shadow: none;
		justify-content: flex-end;
	}

	.sticky-header #header-layout {
		justify-content: flex-end;
	}

	/*sub-menu*/

	nav#mainNav ul li ul.sub-menu li a,
	nav#mainNav ul li ul.sub-menu li.current-menu-item a,
	nav#mainNav ul li.current-menu-item ul.sub-menu li a {
		color: var(--header-color-primary-tint);
		background-color: var(--header-background);
		font-weight: 500;

		&:hover {
			color: var(--header-color-primary-tint);
			background-color: var(--color-primary-shade);
		}
	}

	/* logo */
	#header .logo {
		height: auto;
		margin-right: auto;

		img {
			-o-object-fit: contain;
			object-fit: contain;
			width: 100%;
			height: 100%;
			max-width: 180px;
			max-height: 120px;
		}
	}
}

@media only screen and (max-width: 1023px) {

	/*header_max-width: 1023px common*/
	nav#mainNav ul li a,
	nav#mainNav ul li.current-menu-item a {
		color: var(--header-color-primary-tint);
		background: var(--header-background);
		font-weight: 500;
	}

	nav#mainNav ul li a:hover {
		color: var(--header-color-primary-tint) !important;
		background: var(--color-primary-shade) !important;
	}

	/*sub-menu*/

	nav#mainNav ul li ul.sub-menu li a,
	nav#mainNav ul li ul.sub-menu li.current-menu-item a,
	nav#mainNav ul li.current-menu-item ul.sub-menu li a,
	nav#mainNav ul li li li:last-child a,
	nav#mainNav ul li li.current-menu-item li:last-child a,
	nav#mainNav ul li li.current-menu-item:last-child li:last-child a,
	nav#mainNav ul li li.menu-item-object-page li:last-child a,
	nav#mainNav ul li li:last-child li:last-child a,
	nav#mainNav ul li.current-menu-item li li:last-child a {
		color: var(--header-color-primary-tint) !important;
		background: var(--header-background) !important;
		font-weight: 500;
		position: relative;
		padding-left: 28px;

		&:before {
			content: "";
			position: absolute;
			width: 5px;
			border-radius: 50vh;
			height: 5px;
			background: var(--color-primary);
			left: 12px;
			top: 50%;
			transform: translateY(-50%);
		}

		&:hover {
			color: var(--header-color-primary-tint) !important;
			background: var(--color-primary-shade) !important;
			padding-left: 28px;
		}
	}
}

/*mobile*/

@media print,
screen and (max-width: 1023px) {
	body.mobile.home {
		margin-top: 0;
	}

	body.mobile:not(.home) {
		margin-top: 80px;
	}

	body.mobile #header {
		background: #00000087;
		box-shadow: none;

		.logo .mark {
			width: auto;
			position: absolute;
			height: auto;
			top: 5%;
			left: 2%;

			img {
				max-width: 200px;
				max-height: 60px;
			}
		}

		.logo .spmenu {
			margin-left: auto;
			height: 80px;
			background: transparent;
			width: 60px;

			#menu p {
				color: var(--header-color-primary-tint);
			}
		}
	}

	.spmenu #menu span,
	.spmenu #menu span:before,
	.spmenu #menu span:after {
		background: var(--header-color-primary-tint);
		border-radius: 0;
		height: 1px;
	}

	body.mobile nav#mainNav.menuOpen {
		overflow: visible;
	}
}

/*----------------------------------------------------------------
footer
----------------------------------------------------------------*/

footer#footer {
	font-family: var(--body-font-family);

	.inner {
		width: 95%;
		max-width: none;
	}

	.footer__logo img {
		max-width: 320px;
		max-height: var(--px160);
		-o-object-fit: contain;
		object-fit: contain;
	}

	.innerbox {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: var(--px20);

		.leftarea {
			text-align: left;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: var(--px60);

			.txtarea {
				padding-left: var(--px60);
				border-left: solid 2px #fff;
			}
		}
	}

	.footnav ul {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10px;
	}

	.footnav ul>li::before,
	.footnav ul>li::after {
		content: none;
	}

	.footnav ul.sub-menu li {
		padding: 0;
		border-left: solid 1px #666;
		margin: 5px 0 0;
	}

	ul li a,
	a {
		font-weight: 500;
		-webkit-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;

		&:hover {
			text-decoration: inherit;
			color: var(--color-primary);
			opacity: 1;

			i {
				opacity: 0.7;
				-webkit-transition: all 0.3s;
				-o-transition: all 0.3s;
				transition: all 0.3s;
			}
		}
	}

	#copyright {
		text-align: center;
		margin: 10px auto;
	}

	.footnav:not(:last-child) {
		margin-bottom: 0;
	}
}

@media print,
screen and (max-width: 768px) {

	footer#footer {
		.footer__logo img {
			max-height: var(--px240);
		}

		&.innerbox {
			.leftarea {
				gap: var(--px30);
				width: 40%;

				.txtarea {
					padding-left: var(--px30);
				}
			}
		}

		#copyright {
			margin: var(--px80) auto 0;
			text-align: center;
		}
	}
}

a#scrollUp {
	background: var(--color-bk);
}

/*footer__sp*/

li.link_menu.bg_line a {
	background: #01BA03;
}

.mobile a#scrollUp {
	bottom: 80px;
}

/*----------------------------------------------------------------
animation looptxt
----------------------------------------------------------------*/

.looparea {
	display: flex;
	align-items: center;
	overflow: hidden;
	width: 100vw;
	position: relative;
	bottom: 0;
	z-index: 1;
}

.loop_wrap {
	display: flex;
	animation: loop 300s linear infinite;
	width: max-content;
}

.loop_text {
	flex: 0 0 auto;
	font-size: var(--px100);
	font-weight: 400;
	font-family: var(--font-family01);
	color: var(--color-secondary);
	line-height: 2;
	white-space: nowrap;
	letter-spacing: -0.02em;
	padding-right: var(--px20);
	/* 適度な間隔 */
}

@keyframes loop {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

.looparea+.looparea .loop_wrap {
	animation: loopreverse 300s linear infinite;

	.loop_text {
		color: var(--color-primary-shade);
	}
}

@keyframes loopreverse {
	0% {
		transform: translateX(-50%);
	}

	100% {
		transform: translateX(0);
	}
}

@media only screen and (max-width: 768px) {
	.loop_text {
		font-size: var(--px100);
	}
}

/*----------------------------------------------------------------
animation hovercolor
----------------------------------------------------------------*/

@media only screen and (min-width: 769px) {
	.reasonarea {
		ol.conceptlist {
			li {
				.inner_wrap {
					.imgarea {
						& > img {
							filter: grayscale(100%);
							transition: filter 0.3s ease;
						}
					}
				}

				&:has(a:hover) {
					.inner_wrap {
						.imgarea {
							& > img {
								filter: none;
							}
						}
					}
				}
			}
		}
	}
}

/*----------------------------------------------------------------
TOP
----------------------------------------------------------------*/

/*mainImg*/
#mainImg .n2-ss-layer.fvtxt b {
	color: var(--color-primary);
	text-shadow: 0 0 8px #000000, 0 0 25px #00d74e;
}

/*content*/

@media only screen and (max-width: 768px) {
	.front_contents {
		padding: var(--px80) 0;
	}
}

.front_contents .wrapper_content {
	width: 80%;
}

@media only screen and (max-width: 768px) {
	.front_contents .wrapper_content {
		width: 94%;
	}
}

.post .conceptarea {
	padding-top: 0;

	.wrapper_content {
		position: relative;
		max-width: 1240px;
	}

	.bgtxt {
		font-size: var(--px160);
		font-family: var(--font-family02);
		font-weight: 400;
		line-height: 1;
		text-align: center;
		color: #969696;
		position: absolute;
		left: 50%;
		top: 46%;
		transform: translate(-50%, -50%);
		width: 100%;
		z-index: 0;
		white-space: nowrap;
		background-image: url(/wp-content/uploads/texture.jpg.webp);
		-webkit-background-clip: text;
		background-clip: text;
		background-repeat: no-repeat;
		color: transparent;
	}

	.labeltxt {
		text-align: left;
		display: block;
		width: fit-content;
		z-index: 1;
		position: relative;
		padding-top: var(--px240);
		margin: 0 auto;

		.labeltxtbody {
			span {
				border-bottom: solid 3px var(--color-primary);
				text-align: left;
				display: inline;
				box-decoration-break: clone;
				-webkit-box-decoration-break: clone;
				font-size: var(--px40);
				font-weight: 700;
				padding: .15em 0.3em .1em;
				line-height: 1.8;
				background: var(--color-bk);
				color: var(--color-wt);
			}

			&+.labeltxtbody {
				margin-top: var(--px40);
			}
		}
	}

	.bgimg {
		padding: 0;
		width: 100%;
		height: 528px;
		position: relative;
		z-index: -1;
		margin-top: -450px;
		overflow: hidden;
		background: var(--color-bk);

		img {
			object-fit: cover;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}
}

/* animation */
.scrollcolor {

	img {
		filter: grayscale(100%);
		transition: filter 1.5s ease-out;
	}

	&.visible img {
		filter: grayscale(0%);
	}
}


@media only screen and (max-width: 1240px) {
	.post .conceptarea {
		.bgfix {
			padding: 428px calc((100vw - 100%) / 2) 0;
			margin-top: -350px;
		}
	}
}

@media only screen and (max-width: 960px) {
	.post .conceptarea {
		.bgtxt {
			top: 50%;
			font-size: var(--px180);
		}
	}
}

@media only screen and (max-width: 768px) {
	.post .conceptarea {
		.bgtxt {
			top: 65%;
		}

		.bgimg {
			margin-top: -200px;
			height: 300px;
		}
	}
}

@media only screen and (max-width: 640px) {
	.post .conceptarea {
		.bgtxt {
			font-size: 17vw;
			top: 43%;
		}

		.bgimg {
			height: 240px;
		}

		.labeltxt {
			.labeltxtbody {
				span {
					font-size: var(--px40);
				}
			}
		}
	}
}

.post .reasonarea {

	.ttl {
		color: var(--color-font);
		line-height: 1;
		width: fit-content;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--px30);
		margin: var(--px40) auto var(--px100);

		.firstxt {
			color: var(--color-font);
			font-size: var(--px60);
			font-weight: 400;
			font-family: var(--font-family01);
			color: var(--color-font);

			&::first-letter {
				color: var(--color-primary);
			}
		}

		.subtxt {
			font-size: var(--px30);
			font-weight: 500;
			font-family: var(--font-family02);
			color: var(--color-font);
			line-height: 1.4;
			vertical-align: middle;
		}
	}

	.wrapper_content {
		max-width: 1520px;
	}

	ol.conceptlist {
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--px60);

		li {
			list-style: none;
			counter-increment: number 1;

			.inner_wrap {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: flex-start;

				.txtarea {
					padding: var(--px200) var(--px80) var(--px80);
					display: flex;
					flex-direction: column;
					gap: 0;
					justify-content: center;
					max-width: 846px;
					width: fit-content;
					flex-shrink: 0;
					margin-top: var(--px160);
					position: relative;
					z-index: 1;
					color: var(--color-wt);
					text-align: left;
					font-family: var(--font-family03);
					position: relative;

					&:before {
						content: "";
						background: url(/wp-content/uploads/txtbg01.png) no-repeat;
						background-size: 100% 100%;
						position: absolute;
						left: 52%;
						top: 0;
						transform: translateX(-50%);
						width: calc((var(--px80) + 110%));
						height: calc((var(--px80) + 100%));
						z-index: -1;
						opacity: 0.8;
					}

					.numttl {
						position: relative;
						display: flex;
						align-items: center;
						gap: var(--px30);
						margin-bottom: var(--px12);

						&:before {
							content: counter(number, decimal-leading-zero);
							-webkit-text-stroke: 1px var(--color-primary);
							color: #111111ba;
							text-shadow: 0 0 5px var(--color-primary), 0 0 25px var(--color-primary);
							font-size: var(--px100);
							text-align: left;
							letter-spacing: 0;
							line-height: 1;
							font-family: var(--font-family02);
						}

						span {
							font-weight: 500;
							font-size: var(--px24);
							color: var(--color-wt);
							font-family: var(--font-family01);
							line-height: 1.2;
						}

					}

					.reasonttl {
						margin: 0;
						text-align: left;
						display: inline-block;
						width: fit-content;
						font-weight: 400;
						font-size: var(--px40);
						color: var(--color-wt);
						line-height: 1.5;
						margin-bottom: var(--px30);
						font-family: var(--font-family03);

						b {
							border-bottom: solid 3px;
							font-weight: 700;
							display: inline;
							line-height: 1.2;
						}

						&:before,
						&:after {
							content: none;
						}
					}
				}

				.imgarea {
					position: relative;
					left: 5%;
					z-index: -1;
					margin-left: -5%;
					width: 110%;
					max-width: 846px;
					padding-bottom: 20%;

					img {
						aspect-ratio: 846 / 602;
						width: 100%;
						height: 100%;
						object-fit: cover;
					}

					.subimg {
						position: absolute;
						left: -17%;
						bottom: 0;
						width: 75%;
						height: auto;

						img {
							width: 100%;
							height: auto;
							object-fit: contain;
						}
					}
				}
			}

			&:nth-of-type(odd) {
				.inner_wrap {
					flex-direction: row-reverse;

					.txtarea {
						&:before {
							left: 47%;
						}
					}
				}

				.imgarea {
					right: 5%;
					margin-right: -5%;
					left: inherit;
					margin-left: inherit;

					.subimg {
						right: -17%;
						left: inherit;
					}
				}
			}
		}
	}
}

@media only screen and (max-width: 1240px) {
	.post .reasonarea {
		ol.conceptlist {
			li {
				.inner_wrap {
					.txtarea {
						width: 100%;
						flex-shrink: inherit;

						&:before {
							left: 48% !important;
							width: calc((var(--px80) + 125%)) !important;
						}

						.reasonttl {
							font-size: var(--px40);
						}
					}
				}
			}
		}
	}
}

@media only screen and (max-width: 768px) {
	.post .reasonarea {
		ol.conceptlist {
			li {
				.inner_wrap {
					flex-direction: column-reverse !important;
					align-items: center;

					.imgarea {
						width: 100% !important;

						.subimg {
							left: -9%;
							bottom: -7%;
						}
					}

					.txtarea {
						margin: 0;

						.numttl {
							&:before {
								font-size: var(--px100w);
							}
						}
					}
				}

				&:nth-of-type(2n+1) {
					.imgarea {
						.subimg {
							right: -9%;
							left: inherit;
						}
					}
				}
			}
		}
	}
}

.front_contents.fullimgarea {
	padding: var(--px40) 0 0;

	.conceptimg {
		max-width: 80%;
		margin: 0 auto;
	}
}

.parallaxarea {
	position: relative;

	&:before,
	&:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		background: url(/wp-content/uploads/dust.png.webp) no-repeat;
		background-attachment: fixed;
		background-size: contain;
		background-position: 0 5%;
		width: 50%;
		height: 100%;
		z-index: -2;
	}

	&:after {
		left: inherit;
		right: 0;
		transform: translateY(-50%) rotate(180deg);
		background-position: 0 33%;
	}
}

.ctaarea {
	position: relative;
	padding: var(--px100) var(--px60);
	background: url(/wp-content/uploads/cta.jpg.webp) no-repeat 50% 0% #000;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 540px;

	&:before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #30303091;
		z-index: 1;
	}

	.wrapper_content {
		padding-top: 200px;
		position: relative;
		z-index: 2;
		width: 80%;
		max-width: none;
		margin: 0 auto;
		text-align: center;
	}

	.txtarea {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: var(--px60);
		width: 100%;
		color: var(--color-wt);
	}

	p.ttl {
		font-size: var(--px30);
		font-weight: 500;
		line-height: 1.4;

		b {
			color: var(--color-primary);
			text-shadow: 0 0 8px #000000, 0 0 25px #00d74e;
		}
	}

	ul.btnlist {
		display: flex;
		align-items: stretch;
		justify-content: center;
		gap: var(--px30);
		flex-wrap: wrap;
		max-width: none;
		width: 100%;
		margin-top: 120px;

		li {
			width: 100%;
			max-width: 300px;
		}

		a.icobtn.boxbtn {
			margin-top: 0;
			height: 100%;
			background: var(--color-bk);
			color: var(--color-wt);
			max-width: none;
			width: 100%;

			&:after {
				color: var(--color-wt);
			}

			&.linebtn {
				background: #01BA03;
			}

			&:hover {
				color: var(--color-bk);
				background-color: var(--color-primary-tint);
				box-shadow: 0px 0px 70px rgb(0 188 108);
				-webkit-transition: all 0.3s;
				-o-transition: all 0.3s;
				transition: all 0.3s;

				&:after {
					color: var(--color-bk);
				}
			}
		}
	}
}
@media only screen and (min-width: 1921px) {
	.ctaarea {
		.wrapper_content {
			padding-top: 15vw;
		}
	}
}
@media only screen and (max-width: 768px) {
	.ctaarea {
		padding: var(--px80) 0;
		min-height: auto;

		.wrapper_content {
			width: 94%;
			padding-top: 120px;

			.imgarea img {
				max-width: 120px;
				width: 100%;
				height: auto;
			}

			ul.btnlist {
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: var(--px40);
				gap: var(--px12);

				li {
					width: 100%;

					a.icobtn.boxbtn {
						width: 100%;
						max-width: 280px;
						margin-left: auto;
						margin-right: auto;
						margin-top: 0;
						justify-content: flex-start;
						min-height: 60px;
					}
				}
			}
		}
	}
}

@media only screen and (max-width: 540px) {
	.ctaarea {
		background-size: contain;

		.wrapper_content {
			padding-top: calc(8% + var(--px120));
		}

		.txtarea {
			gap: 0;
		}
	}
}

/*----------------------------------------------------------------
btn set
----------------------------------------------------------------*/

/*---------------------txtlink---------------------*/

.txtlink {
	font-family: var(--font-family01);
	font-weight: 500;
	font-size: var(--px16);
	line-height: 100%;
	color: var(--color-wt);
	position: relative;
	margin: 8px;
	text-align: left;
	display: flex;
	line-height: 1.4;
	align-items: center;

	&:after {
		content: "\f138";
		font-family: 'Font Awesome 6 Free';
		font-style: normal;
		font-weight: 900;
		font-size: var(--px16);
		line-height: 100%;
		margin: 0 0 0 var(--px12);
		text-align: center;
		color: var(--color-wt);
	}

	&:hover {
		opacity: 0.7;
	}
}

/*---------------------boxbtn---------------------*/

.boxbtn,
a.linkBtn,
.linkBtn,
.post .linkBtn {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	padding: var(--px20) 45px var(--px20) var(--px20);
	gap: var(--px20);
	background-color: var(--color-primary);
	border: none;
	border-radius: 0px;
	font-family: var(--body-font-family);
	font-weight: 500;
	font-size: var(--px18);
	line-height: 1.4;
	width: 100%;
	max-width: 240px;
	margin: var(--px50) 0 0;
	color: var(--color-bk);
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;

	&.icobtn {
		gap: var(--px20);

		i {
			font-size: var(--px40);
			font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
			font-style: normal;
			line-height: 1;
		}
	}

	&:after {
		content: "\f138";
		font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
		font-weight: 900;
		font-size: var(--px16);
		line-height: 1;
		color: var(--color-bk);
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		width: auto;
		height: auto;
		border: none;
		margin: 0;
	}

	&:hover {
		color: var(--color-bk);
		background: var(--color-primary-tint);
		box-shadow: 0px 0px 70px rgb(0 188 108);
		-webkit-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;

		&:after {
			color: var(--color-bk);
		}
	}
}

@media only screen and (max-width: 768px) {

	.boxbtn,
	a.linkBtn,
	.linkBtn,
	.post .linkBtn {
		width: 100%;
		max-width: 280px;
		margin-left: auto;
		margin-right: auto;
		min-height: 60px;
	}
}

/*---------------------borderbtn---------------------*/

.borderbtn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--px40);
	padding: 10px 20px;
	font-family: var(--font-family01);
	font-weight: 400;
	font-size: var(--px30);
	width: fit-content;
	line-height: 1.2;
	text-align: left;
	background: var(--color-bk);
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	transition: 0.5s all;

	.arrow {
		position: relative;
		display: block;
		width: 46px;
		height: 20px;
		transition: 0.5s all;

		&:before {
			content: "";
			position: absolute;
			width: 46px;
			height: 1.5px;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			background: var(--color-wt);
		}

		&:after {
			content: "";
			position: absolute;
			width: 10px;
			height: 1.5px;
			right: -1.5px;
			top: calc(50% - 4px);
			transform: translateY(-50%);
			background: var(--color-wt);
			transform: rotate(45deg);
		}
	}

	&:hover .arrow {
		transform: translateX(4px);
	}

	&::before,
	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		height: 1px;
		width: 100%;
		background: var(--color-wt);
		transition: transform 0.3s ease;
	}

	/* 初期線（ホバーで左から右へ縮む） */
	&::before {
		transform: scaleX(1);
		transform-origin: right center;
		z-index: 0;
	}

	/* 最終線（ホバーで右から左へ伸びる） */
	&::after {
		transform: scaleX(0);
		transform-origin: left center;
		z-index: 1;
	}

	/* ホバーで左から右へ縮むアニメーション */
	&:hover::before {
		animation: shrinkLine 0.5s forwards ease-out;
	}

	/* ホバーで右から左へ伸びるアニメーション */
	&:hover::after {
		animation: expandLine 0.5s forwards ease-out;
		animation-delay: 0.1s;
	}

	/* blackボタン */
	&.bkbtn {
		background: transparent;
		color: var(--color-primary);
		font-size: var(--px20);
		margin-top: var(--px40);

		&::before,
		&::after {
			background: var(--color-primary);
		}

		&:hover {
			box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.4);
		}

		.arrow:before,
		.arrow:after {
			background: var(--color-primary);
		}
	}
}

/* before を縮める */
@keyframes shrinkLine {
	from {
		transform: scaleX(1);
	}

	to {
		transform: scaleX(0);
	}
}

/* after を伸ばす */
@keyframes expandLine {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

a.center_btn {
	margin: 0 auto;
}


/*----------------------------------------------------------------
下層
----------------------------------------------------------------*/

/*--------eyecatch--------*/

header#h1Header {
	background: transparent;
	height: auto;
	z-index: -1;
	overflow: visible;

	&::before {
		background: transparent;
	}

	h1.title {
		position: relative;
		padding-block: calc(18rem + (1vw - 1.92rem) * 9.7087) calc(7rem + (1vw - 1.92rem) * 2.5890);
		/*180-30(1920-1024)*/
		/*70-30(1920-1024)*/
		padding-inline: 5%;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		color: var(--color-font);
		font-size: var(--px80);
		font-weight: 300;
		font-family: var(--font-family01);
		line-height: 1.2;
		text-transform: lowercase;
		display: block;

		&::first-letter {
			text-transform: capitalize;
		}

		&::before {
			content: "";
			position: absolute;
			bottom: 0px;
			width: min(1400px, 94%);
			height: 1px;
			left: 50%;
			-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
			transform: translateX(-50%);
			max-width: 1400px;
			background: transparent;
		}

		span.subtxt {
			font-size: var(--px30);
			display: block;
			margin-top: var(--px12);
			font-weight: 400;
		}

	}
}

body:not(.home) {
	position: relative;
	z-index: 0;
}

body:not(.home) {

	&:before,
	&:after {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		background: url(/wp-content/uploads/dust.png.webp) no-repeat;
		background-size: contain;
		background-position: top left;
		width: 35%;
		height: 800px;
		z-index: -5;
	}

	&:after {
		left: inherit;
		right: 0;
		transform: rotate(180deg);
		background-position: top left;
	}
}

@media only screen and (max-width: 768px) {
	body:not(.home) {

		&:before,
		&:after {
			height: 500px;
			top: 1%;
		}
	}
}

@media only screen and (max-width: 640px) {
	body:not(.home) {

		&:before,
		&:after {
			content: none;
		}
	}
}


.archive h1.title.first:after,
body.page-template-page-nosidebar-h1-breadcrumb_bgimg-php h1.title.first:after,
.single-post h1.title.first.cat-loop:after {
	background: url(/wp-content/uploads/artimg.png.webp) no-repeat;
	background-size: contain;
	background-position: top center;
	width: 36%;
	height: 400px;
	object-fit: cover;
	content: "";
	position: absolute;
	max-width: inherit;
	top: 25%;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0.3;
	z-index: -1;
}

@media only screen and (max-width: 640px) {

	.archive h1.title.first:after,
	body.page-template-page-nosidebar-h1-breadcrumb_bgimg-php h1.title.first:after,
	.single-post h1.title.first.cat-loop:after {
		height: 200px;
		width: 70%;
	}
}


/*================================
common parts
================================*/

.subbox {
	padding: var(--px80);
	background: rgba(83, 83, 83, 0.6);
}

/* ico/line装飾 */

.page_contents a.icobtn.boxbtn {
	&:after {
		color: var(--color-bk);
	}

	&.linebtn {
		background: #01BA03;
		color: var(--color-bk);
	}

	&:hover {
		color: var(--color-bk);
		background-color: var(--color-primary-tint);
		box-shadow: 0px 0px 70px rgb(255 254 175);
		-webkit-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;

		&:after {
			color: var(--color-bk);
		}
	}
}

/*================================
common txt
================================*/

.post h1,
h1.title,
h1,
.post h2,
.post2b h2,
.post4b h2,
h2.title,
h2,
h3,
.post h3,
h4,
.post h4,
h5,
.post h5 {
	color: var(--color-bk);
}

body:not(.home) .post {

	h1:not([class]) {
		font-size: var(--px40);
		font-family: var(--font-family02);
		font-weight: 300;
		text-align: center;
		text-shadow: none;
		padding: 0;
		z-index: 20;
		line-height: 1.4;
		color: var(--color-bk);
	}

	h2:not([class]) {
		font-family: var(--font-family01);
		line-height: 1.4;
		text-align: center;
		color: var(--color-bk);
		font-weight: 400;
		font-size: var(--px40);
		padding: 0;
		margin: var(--px120) auto var(--px60);
		line-height: 1.4;

		&::after {
			content: '';
			position: relative;
			visibility: visible;
			display: block;
			width: var(--px80);
			background: transparent;
			margin: var(--px30) auto 0;
			border-bottom: solid 2px var(--color-bk);
		}

		span.subtxt {
			font-family: var(--font-family01);
			font-style: normal;
			font-weight: 300;
			font-size: var(--px18);
			line-height: 1.4;
			text-align: center;
			display: block;
			margin: 10px auto 0;
		}
	}

	.page_contents_inner:first-of-type>h2:first-of-type {
		margin-top: 0;
	}

	h3:not([class]) {
		font-size: var(--px30w);
		font-family: var(--font-family01);
		font-weight: 500;
		text-align: left;
		display: block;
		padding: 0 0 0 12px;
		margin: var(--px60) auto var(--px30);
		line-height: 1.2;
		letter-spacing: 0.001em;
		border-left: double 6px;
		border-bottom: none;
		color: var(--color-bk);

		span.subtxt {
			font-family: var(--font-family01);
			font-style: normal;
			text-align: left;
			font-weight: 300;
			font-size: var(--px20);
			display: block;
			line-height: 1.4;
			margin-top: var(--px16);
		}

		&::after {
			content: none;
		}
	}

	h4:not([class]) {
		font-size: var(--px16);
		font-family: var(--font-family01);
		font-weight: 500;
		text-align: left;
		display: block;
		border: none;
		width: fit-content;
		margin: var(--px50) auto var(--px24) 0;
		line-height: 1.4;
		letter-spacing: 0.1em;
		background: var(--color-bk);
		padding: 5px 7px 3px;
		color: var(--color-wt);

		&::before,
		&::after {
			content: none;
		}
	}

	h5:not([class]) {
		font-size: var(--px18);
		font-family: var(--font-family01);
		font-weight: 600;
		text-align: left;
		display: block;
		padding: 0;
		color: var(--color-bk);
		margin: var(--px40) auto var(--px16);
		line-height: 1.6;
		letter-spacing: 0.1em;
		border: none;

		&::before,
		&::after {
			content: none;
		}
	}
}

@media only screen and (max-width: 768px) {
	body:not(.home) .post {
		h2:not([class]) {
			font-size: var(--px40);
			font-weight: 400;
		}
	}
}

/*-------パンくず----------------*/

#breadcrumb {
	background-color: transparent;
	max-width: 1240px;
	width: 94%;
	margin: 0 auto;
	position: relative;
	z-index: 3;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
	padding: 8px 0;
}

#breadcrumb ul {
	max-width: 1240px;
	padding: 0;
	width: 100%;
}

body.mobile #mainImg,
body.mobile #breadcrumb {
	margin-top: 0;
}

#breadcrumb ul li,
#breadcrumb ul li a {
	color: var(--color-font);
}

#breadcrumb ul li a:hover {
	text-decoration: none;
	opacity: 0.7;
}

/*-------フロント投稿記事----------------*/

#front_top_content,
#front_bottom_content {
	background: transparent;
}

#front-sectionPost h1.title {
	font-family: var(--font-family01);
	line-height: 1.4;
	text-align: center;
	color: var(--color-wt);
	font-weight: 500;
	font-size: var(--px40);
	color: var(--color-bk);
	padding: 0;
	margin: 0 auto var(--px60);
	line-height: 1.4;
}

.postlist li,
.postlist li:first-child {
	border-color: var(--color-secondary);
}

.post2b li .post2b_contents,
.post4b li .post4b_contents {
	margin-bottom: 0;
	opacity: 1;
}

.post_link,
.post2b_link,
.post4b_link,
.post_link a,
.post2b_link a,
.post4b_link a {
	color: var(--color-bk);

	&:hover {
		opacity: 0.7;
	}
}

.post .time,
.postlist .time,
.post2b .time,
.post4b .time {
	background: var(--color-primary-shade);
	color: var(--color-primary-tint);
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;

	&:hover {
		background: var(--color-primary);
		color: var(--color-bk);

	}

	&:hover a {
		color: var(--color-bk);
		-webkit-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;

	}
}

@media screen and (max-width: 640px) {

	#front_top_content,
	#front_bottom_content {
		padding: var(--px80) 0;
	}
}

/*-------カテゴリーページ----------------*/

section#cat-post {
	padding: var(--px80);
	background: #fff;
	z-index: 1;
	position: relative;
}

/*-------投稿記事----------------*/

body.single-post #wrapper section {
	position: relative;
	padding: 6%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 1240px;
	width: 94%;
	background: var(--color-wt);
	color: var(--color-bk);
	margin: 0 auto var(--px80);
	border: none;
}

body.single-post #wrapper {
	background: transparent;
	padding: 0;
}

/* body.single-post #breadcrumb {
    margin-top: 80px;
} */
body.single-post #wrapper section h1 {
	padding: 0;
	font-family: 'Shippori Mincho', 'EB Garamond';
	background: transparent;
	margin: 0 0 calc(40px + (1vw - 19.2px) * 1.6828) 0;
	/*40px-14px*/
	color: var(--color-bk);
	font-weight: 500;
	font-size: var(--px30);
	line-height: 1.4;
	letter-spacing: -1px;
	padding-bottom: 10px;
	border-bottom: solid 1px var(--color-bk);
	width: 100%;
}

.dateLabel {
	margin-bottom: 20px;
	font-family: inherit;
	font-size: 90%;
	font-style: normal;
	padding: 0;
	border: none;
}

@media screen and (max-width: 640px) {
	body.single-post #wrapper section {
		padding: 8% 6%;
	}
}

.pagenav {
	height: auto;
	margin: 20px auto 0;
	max-width: 1400px;
	width: 90%;
}

.prev,
.next {
	margin-bottom: calc(80px + (1vw - 19.2px) * 3.2362);
	/*80px-30px*/
}

.pagenav>span a {
	color: #111;
}

/*-------SITEMAP----------------*/

.post ul#sitemap_list li {
	border-bottom: solid 1px var(--color-table-border);
	padding-bottom: calc(30px + (1vw - 19.2px) * 0.3883);
	/*30px-24px*/
}

.post ul#sitemap_list li+li {
	margin-top: calc(30px + (1vw - 19.2px) * 0.3883);
	/*30px-24px*/
}

.post ul#sitemap_list li a {
	font-weight: 400 !important;
	font-family: var(--body-font-family) !important;

	span {
		margin-left: 12px;
		font-size: 90%;
	}
}

/*-------privacy ---------------*/

#privacy h3 {
	background: none;
	font-size: var(--px20w);
	font-weight: 600;
	text-align: left;
	margin: var(--px40w) auto var(--px20);
	border-left: double 6px;
	border-bottom: none;
	padding: 0 0 0 10px;
}

/*-------CONTACT----------------*/

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="url"],
input[type="number"],
select,
textarea {
	vertical-align: middle;
	line-height: 30px;
	min-height: 50px;
	padding: 10px;
	border: none;
	border-radius: 0;
	color: var(--color-bk);
	background: var(--color-wt);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.post table {
	margin: var(--px30) auto;
	border: none;
	border-collapse: separate;
	border-spacing: 10px;
}

.post table th,
.post table td {
	padding: 20px 15px 18px;
	min-height: 40px;
	vertical-align: middle;
	border: none;
	color: var(--color-bk);
	background: var(--color-background);
}

.post table th {
	border-bottom: solid 1px var(--color-bk);
}

.post table td {
	border-bottom: solid 1px var(--color-secondary);
}

@media screen and (max-width: 640px) {
	.post table {
		border-spacing: 0;
	}

	.post table th {
		border-bottom: none;
		padding-bottom: 0;
	}

	.post table td {
		padding-top: 10px;
	}
}

.wpcf7-form {
	padding: 0;
}

.wpcf7-form a {
	border-bottom: solid 1px;
}

.wpcf7-form a:hover {
	opacity: 0.7;
}

.wpcf7-not-valid-tip {
	color: #ffd23b;
}

.wpcf7-form input[type=submit] {
	display: block;
	background: var(--color-bk);
	border: none;
	border-radius: 0px;
	font-family: var(--font-family01);
	font-weight: 500;
	font-size: var(--px16);
	line-height: 1.4;
	color: var(--color-wt);
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	margin: 0 auto;
	max-width: 240px;
	width: 100%;
	padding: var(--px20) var(--px30);

	&:hover {
		color: var(--color-bk);
		background-color: var(--color-primary-tint);
		box-shadow: 0px 0px 70px rgb(255 254 175);
		-webkit-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
	}
}

.submit_btn,
.post .submit_btn {
	position: relative;
	width: auto !important;
}

.submit_btn .wpcf7-spinner,
.post .submit_btn .wpcf7-spinner {
	top: inherit;
	background-color: #adadad;
}

.wpcf7-form .must {
	background: #DC143C;
}


/*-------NOTFOUND----------------*/

body.error404 #wrapper section h1 {
	padding: 0;
	font-family: var(--font-family01);
	background: transparent;
	margin: 20px 0 calc(40px + (1vw - 19.2px) * 1.6828) 0;
	/*40px-14px*/
	color: var(--color-bk);
	font-weight: 500;
	font-size: calc(3rem + (1vw - 1.92rem) * 0.6472);
	/*3rem-1.7rem*/
	line-height: 1.4;
	letter-spacing: -1px;
	padding-bottom: 10px;
	border-bottom: solid 1px var(--color-bk);
	width: 100%;
}

/*-------commonparts----------------*/

.page_contents {
	.btnlist {
		display: flex;
	}

	li.subbox {
		padding: var(--px20);
		text-align: center;
		color: var(--color-bk);
		background: transparent;
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		p.boxttl {
			font-family: var(--body-font-family);
			line-height: 1.4;
			text-align: center;
			color: var(--color-bk);
			font-weight: 400;
			font-size: var(--px24);
			padding: 0;
			margin: 0 auto var(--px24);
			line-height: 1.4;

			&::after {
				content: none;
			}
		}

		&:last-child {
			border-left: solid 1px;
		}

		.boxbtn,
		a.linkBtn,
		.linkBtn,
		.post .linkBtn {
			&.brandbtn {
				background: #689c99;
				color: var(--color-wt);

				&:after {
					color: var(--color-wt);
				}
			}

			&:hover {
				opacity: 0.7;
				box-shadow: none;
			}
		}
	}
}

@media screen and (max-width: 640px) {
	.page_contents {
		.btnlist {
			flex-direction: column;
		}

		li.subbox {
			width: 100%;

			&:last-child {
				border-left: none;
			}
		}
	}
}

/*----------------subpage common parts----------------*/

.post .page_contents {

	/*margin*/

	.l-middlemargin {
		margin: var(--px80) 0;
	}

	.l-smallmargin {
		margin: var(--px40) 0;
	}

	/*layout*/

	.l-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--px20);
	}

	.c-title__img {
		margin-top: var(--px30);

		img {
			max-width: var(--px240);
		}
	}

	/*component*/

	.c-title {
		border: none;
		padding: 0;
		margin: 0 0 var(--px80) 0;
		text-align: left;

		&:before,
		&::after {
			content: none;
		}

		.c-title__main {
			font-size: var(--px80);
			font-weight: 300;
			font-family: var(--font-family01);
			line-height: 1.2;
			text-transform: lowercase;
			display: block;

			&::first-letter {
				text-transform: capitalize;
			}
		}

		.c-title__sub {
			font-size: var(--px20);
			font-weight: 500;
			font-family: var(--font-family01);
			line-height: 1.4;
			display: block;
			margin-top: var(--px40);
		}
	}

	.c-title.c-title--label {
		font-size: var(--px16);
		font-family: var(--font-family01);
		font-weight: 500;
		text-align: left;
		display: block;
		border: none;
		width: fit-content;
		margin: var(--px50) auto var(--px24) 0;
		line-height: 1.4;
		letter-spacing: 0.1em;
		background: var(--color-bk);
		padding: 5px 7px 3px;
		color: var(--color-wt);
	}

	/*c-apparel */

	.c-apparel__txtarea {
		margin: var(--px40) auto;
		width: fit-content;
		text-align: center;
	}

	.c-appare__title {
		margin-bottom: var(--px20);
	}

	.c-appare__title span.c-title__main {
		display: inline;
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
		font-size: var(--px40);
		font-weight: 400;
		line-height: 1.8;
		color: var(--color-wt);
		padding: 0.15em 0.3em 0.1em;
		background: #689c99;
	}

	.c-appare__title span.c-title__sub {
		display: block;
		font-size: var(--px16);
		font-weight: 400;
		line-height: 1.4;
		color: var(--color-bk);
		margin: var(--px12) 0 var(--px24);
	}

	.c-apparel__txt {
		font-size: var(--px24);
		line-height: 1.8;
		border-top: double 4px;
		border-bottom: double 4px;
		padding: var(--px20) 0;
	}

	/*bgcolor */
	.c-backgroundcolor {
		background-color: var(--color-background);
	}

	/*bgcolor box */
	.c-backgroundcolorbox {
		background-color: var(--color-background);
		text-align: left;
		padding: var(--px50);
	}

	.c-backgroundcolorbox__title {
		font-size: var(--px24);
		font-family: var(--font-family01);
		font-weight: 600;
		letter-spacing: .1rem;
		padding: 0;
		margin: 0 0 var(--px20);
		border: none;
		color: var(--color-font);
	}

	/*bgimg */

	.c-bgimg {
		position: relative;
		overflow: hidden;
		color: var(--color-wt);
		margin-right: calc(((100vw - 100%) / 2) * -1);
		margin-left: calc(((100vw - 100%) / 2) * -1);
		padding: var(--px120) calc((100vw - 100%) / 2) var(--px150);
		clip-path: inset(0);
		margin-top: 0;

		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			/* 半透明黒オーバーレイ */
			z-index: 0;
		}

		/* 背景用の擬似要素 */
		&::after {
			content: "";
			position: fixed;
			/* スクロールでも固定 */
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: url(/wp-content/uploads/bgimgfix.jpg.webp) center center / cover no-repeat;
			/* 好きな形に調整 */
			z-index: -1;
			pointer-events: none;
			/* クリック干渉防止 */
		}

		.c-title.c-title__bgimg {
			font-size: var(--px50);
			font-weight: 700;
			color: var(--color-wt);
			border-top: solid 3px;
			border-bottom: solid 3px;
			padding: var(--px20) var(--px18);
			line-height: 1.4;
			width: fit-content;
			margin-bottom: var(--px80);
		}
	}

	.c-bgimg__inner {
		position: relative;
		z-index: 2;
		color: var(--color-wt);
		width: fit-content;
		margin: 0 auto;

		p {
			line-height: 2;
		}

		p+p {
			margin-top: var(--px40);
		}
	}

	/*readarea*/

	.c-readarea {
		text-align: center;
		margin: var(--px120) 0 var(--px80);
	}

	.c-readarea__labelimg {
		position: relative;
		margin: auto;
		margin-bottom: var(--px120);
		width: 94%;

		&.labelimg:before {
			content: "";
			background: url(/wp-content/uploads/txtbg01.png) no-repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: calc((var(--px80) + 110%));
			height: calc((var(--px80) + 140%));
			z-index: -1;
			opacity: 0.8;
		}
	}

	.c-readarea__title {
		display: block;
		font-size: var(--px40);
		font-weight: 700;
		line-height: 1.8;
		color: var(--color-wt);
		padding: 0.15em 0.3em 0.1em;
		background: transparent;
		position: relative;
		padding: var(--px40) var(--px240);


		&+p {
			margin-top: var(--px30);
			line-height: 2;
		}

		&::before {
			content: "";
			position: absolute;
			left: 50%;
			top: 50%;
			width: calc((var(--px80) + 100%));
			height: calc((var(--px60) + 100%));
			z-index: -1;
			opacity: 0.8;
			background: url(/wp-content/uploads/txtbg01.png) 0% 0% / 100% 100% no-repeat;
			transform: translate(-50%, -50%);
		}
	}

	/*list card*/

	li.l-list__item {
		display: flex;
		flex-direction: column;
	}

	.c-card {
		background: var(--color-wt);
		color: var(--color-bk);
		height: 100%;
	}

	.c-card__body {
		padding: var(--px16);
		line-height: 1.6;
	}

	.c-card__title {
		text-align: left;
		font-weight: 600;
		line-height: 1.4;
		font-size: var(--px20);
		margin: 8px 0 16px;
		border-left: double 5px;
		padding-left: 10px;
	}

	.c-card__subtitle {
		font-size: 90%;
		font-weight: 400;
		line-height: 1.4;
		margin: 10px 0;
	}

	.c-card__img img {
		aspect-ratio: 1.414/1;
		object-fit: cover;
		width: 100%;
		height: 100%;
	}

	/*c_borderbox*/

	.c-borderbox {
		text-align: left;
		padding: var(--px50);
		border: solid 2px;
	}

	.c-borderbox__title {
		font-size: var(--px24);
		font-family: var(--font-family01);
		font-weight: 600;
		letter-spacing: .1rem;
		padding: 0;
		margin: 0 0 var(--px20);
		border: none;
		color: var(--color-primary);
	}

	/*c_bordertop*/

	.c-bordertop {
		padding: var(--px40) var(--px16) 0;
		border-top: solid 1px;
	}

	/*c_graybox*/

	.c-box {
		text-align: left;
		padding: var(--px50);

		&.c-box--wtbox {
			background-color: var(--color-wt);
			color: var(--color-bk);
		}
	}

	.c-box__title {
		font-size: var(--px24);
		font-weight: 600;
		margin: var(--px24) 0;
		border-bottom: solid 3px;
		padding-bottom: var(--px12);
	}

	/*c_label*/

	.c-label__txt {
		display: inline;
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
		font-size: var(--px24);
		font-weight: 700;
		line-height: 1.8;
		color: var(--color-wt);
		padding: 0.15em 0.3em 0.1em;
		background: #4e4e4e;
	}

	/*c_box*/

	.c-box__ttl {
		font-size: var(--px24);
		font-weight: 600;
		margin: var(--px24) 0;
		border-bottom: solid 3px;
		padding-bottom: var(--px12);
		line-height: 1.6;
	}
}

/*---------response-----------*/

@media print,
screen and (max-width: 768px) {
	.post .page_contents {
		.c-card__title {
			font-size: var(--px24);
		}

		.c-readarea__title {
			padding: var(--px40) var(--px100);

			&::before {
				width: calc((var(--px80) + 120%));
			}
		}

		.l-row {
			flex-direction: column;
		}

		.c-title.c-title--withimg {
			margin-bottom: var(--px20);
		}

		.c-apparel__imgarea {
			max-width: 80%;
			margin-left: auto;
			margin-right: auto;
		}
	}


}

/*---------col03-----------*/

.post .col3_list {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.post .col3_list>li {
	width: 32%;
	margin-bottom: 2%;

	.imgarea {
		overflow: hidden;
		border-radius: var(--px60) 0 0 0;
		aspect-ratio: 1.414/ 1;

		img {
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
	}
}

.post .col3_list::before {
	content: "";
	display: block;
	width: 32%;
	height: 0;
	-webkit-box-ordinal-group: 2;
	-ms-flex-order: 1;
	order: 1;
}

.post .col3_list:after {
	content: "";
	display: block;
	width: 32%;
	height: 0;
}

@media print,
screen and (max-width: 768px) {

	.post .col3_list>li {
		width: 48%;
		margin-bottom: 5%;
	}

	.post .col3_list::before,
	.post .col3_list:after {
		content: none;
	}
}

@media print,
screen and (max-width: 640px) {
	.post .col3_list>li {
		width: 100%;
	}

	.post .col3_list>li:last-child {
		margin-bottom: 0;
	}
}

/*---------col4-----------*/

.post .col4_list {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.post .col4_list>li {
	width: 24%;
	margin-bottom: 1.5%;

	.imgarea {
		overflow: hidden;
		aspect-ratio: 1.414/ 1;

		img {
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
	}
}

.post .col4_list::before {
	content: "";
	display: block;
	width: 24%;
	height: 0;
	-webkit-box-ordinal-group: 2;
	-ms-flex-order: 1;
	order: 1;
}

.post .col4_list:after {
	content: "";
	display: block;
	width: 24%;
	height: 0;
}


@media print,
screen and (max-width: 1023px) {
	.post .col4_list>li {
		width: 49%;
	}

	.post .col4_list::before,
	.post .col4_list:after {
		content: none;
	}
}

@media print,
screen and (max-width: 640px) {
	.post .col4_list>li {
		width: 100%;
	}

	.post .col4_list>li:last-child {
		margin-bottom: 0;
	}
}

/*----------------------------
リンクボタンリスト
-----------------------------*/
.post {

	/*---ボタンリストレイアウト---*/

	.l-btnlist {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: center;
		margin: var(--px40) auto;
		gap: var(--px40);

		.c-listitem {
			margin-bottom: var(--px16);
			text-align: center;
			position: relative;
		}

		.c-listitem__btn {
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			padding: var(--px14) 45px var(--px14) var(--px12);
			gap: var(--px20);
			border-bottom: solid 2px;
			border-radius: 0px;
			font-family: var(--font-family01);
			font-weight: 500;
			font-size: var(--px16);
			line-height: 1.4;
			width: fit-content;
			color: var(--color-bk);
			-webkit-transition: all 0.3s;
			-o-transition: all 0.3s;
			transition: all 0.3s;

			&:after {
				content: "\f138";
				font-family: "Font Awesome 6 Free";
				font-weight: 900;
				font-size: var(--px16);
				line-height: 1;
				color: var(--color-bk);
				position: absolute;
				right: 15px;
				top: 50%;
				transform: translateY(-50%);
				width: auto;
				height: auto;
				border: none;
				margin: 0;
			}
		}
	}
}

@media print,
screen and (max-width: 640px) {
	.post {
		.l-btnlist {
			justify-content: flex-start;

			.c-listitem {
				width: 46%;
				justify-content: flex-start;

				.c-listitem__btn {
					max-width: none;
					width: 100%;
					min-width: auto;
					line-height: 1.4;
					font-size: 12px;
					padding: 10px 24px 10px 0;
				}
			}
		}
	}
}

/*----------------------------
subpage common
-----------------------------*/

.fw_contents .page_contents_inner,
.fw_contents .page_contents_inner:nth-child(even) {
	background: transparent;
	padding: 0 calc((100vw - 100%) / 2);
	margin: var(--px100) calc(((100vw - 100%) / 2) * -1);
}

.post .fw_contents.p-service .page_contents_inner.u-bgbk {
	background: var(--color-bk);
	color: var(--color-wt);

	h1,
	h2,
	h3,
	h4,
	h5 {
		color: var(--color-wt);
	}
}

.post .fw_contents.p-service .page_contents_inner.u-bgwt {
	background: var(--color-wt);
	color: var(--color-bk);
	margin-right: calc(((100vw - 100%) / 2) * -1);
	margin-left: calc(((100vw - 100%) / 2) * -1);
	padding: var(--px120) calc((100vw - 100%) / 2) var(--px150);
	margin-top: 0;

	h1,
	h2,
	h3,
	h4,
	h5 {
		color: var(--color-bk);
	}
}

@media print,
screen and (max-width: 640px) {

	.fw_contents .page_contents_inner,
	.fw_contents .page_contents_inner:nth-child(even) {
		background: transparent;
		padding: var(--px120) calc((100vw - 100%) / 2) var(--px150);
		margin-right: calc(((100vw - 100%) / 2) * -1);
		margin-left: calc(((100vw - 100%) / 2) * -1);
	}
}

/*----------------subpage service----------------*/

.post .page_contents {
	.c-equipmentlist .c-card__title {
		border: none;
		padding: 0;
		font-size: var(--px20);
	}

	.c-equipmentlist .c-card__description {
		font-size: var(--px16);
		font-weight: 400;
		line-height: 1.4;
	}
}

/*---------------subpage works----------------*/

.post .page_contents {
	.c-worksbox {
		background: var(--color-secondary);
		padding: var(--px40);
		margin: 0 0 var(--px40);

		.c-title.c-title--label {
			margin: var(--px16) 0 5px;
		}
	}

	.c-worksbox--wtbox {
		background: var(--color-wt);
	}

	.c-worksbox__mainimg {
		margin-bottom: 8px;
	}

	.c-worksbox__label {
		font-size: var(--px18);
		font-family: var(--font-family01);
		font-weight: 700;
		text-align: left;
		display: block;
		padding: 0 0 0 8px;
		margin: var(--px24) auto var(--px12);
		line-height: 1.2;
		letter-spacing: 0;
		border-left: double 5px;
		border-bottom: none;
		color: var(--color-bk);
		font-feature-settings: "palt";
	}

	.c-card__tagarea {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
		line-height: 1.4;
	}

	.c-cardtag {
		font-size: 95%;
		font-weight: 400;
	}
}