/***********************
* Responsive Breakpoints
* 1025px +					PC
* 768px - 1024px		Tablet - PC
* 0px - 767px			 SmartPhone
************************/

@font-face {
	font-family: "bodyFont";
	src: url("fonts/NotoSansJP.woff2") format("woff2");
	font-display: fallback;
}

@font-face {
	font-family: "kvFont";
	src: url("fonts/Barlow-Bold.woff2") format("woff2");
	font-display: fallback;
}
@font-face {
	font-family: "kvFont2";
	src: url("fonts/HinaMincho-Regular.woff2") format("woff2");
	font-display: fallback;
}

/*********************
* common
***********************/
:root {
	--color-main: 234, 85, 20;
	--color-sub: 255, 215, 0;
	--color-sub2: 190, 51, 130;
	--color-bg: 245, 245, 245;
	--distance: 50px;
	--distance-s: 30px;
	--distance-l: 100px;
	--distance-xl: 150px;
	--radius: 15px;
	--radius-s: 5px;
	--radius-l: 20px;
	--radius-xl: 30px;
	--fnt-xs: 12px;
	--fnt-s: 14px;
	--fnt-l: 36px;
	--fnt-xl: 48px;
	--linear-gradient-o: linear-gradient(
		120deg,
		rgba(234, 130, 50, 1) 30.026041666666667%,
		rgba(234, 95, 30, 1) 50.026041666666667%,
		rgba(240, 75, 81, 1) 70.01866319444445%,
		rgba(243, 72, 104, 1) 80.26692708333333%,
		rgba(158, 0, 236, 1) 101.234375%
	);
	--linear-gradient-b: linear-gradient(120deg, #58c6ff 0%, #076ad9 40%);

	--wp--style--block-gap: 0;
	--swiper-navigation-size: 64px;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
	:root {
		--distance: 35px;
		--distance-s: 25px;
		--distance-l: 65px;
		--distance-xl: 95px;
		--radius: 12px;
		--radius-s: 4px;
		--radius-l: 18px;
		--radius-xl: 24px;
		--fnt-xs: 10px;
		--fnt-s: 12px;
		--fnt-l: 28px;
		--fnt-xl: 36px;
	}
}
@media screen and (max-width: 767px) {
	:root {
		--distance: 20px;
		--distance-s: 15px;
		--distance-l: 40px;
		--distance-xl: 65px;
		--radius: 10px;
		--radius-s: 3px;
		--radius-l: 15px;
		--radius-xl: 20px;
		--fnt-xs: 9px;
		--fnt-s: 11px;
		--fnt-l: 21px;
		--fnt-xl: 24px;

		--swiper-navigation-size: 48px;
	}
}

.wp-block-nishiki-blocks-pro-section2.alignfull .inner-container,
.wp-block-nishiki-blocks-pro-section2.alignwide .inner-container,
.is-layout-constrained:where(
		:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)
	)
	> * {
	max-width: unset !important;
}

/* svg - logo */
img[src*=".svg"] {
	width: 100%;
	height: auto;
}

#masthead .site-info a img {
	width: 100%;
	max-height: 60px;
}

/* Decoration	Other */
.b {
	font-weight: 900;
}

dl {
	dt {
		font-weight: 900;
		margin-top: 1rem;
		&:first-child {
			margin-top: 0;
		}
	}
}
body.header-overlay.header-center .page-header .page-header-inner,
body.header-overlay .page-header:not(.eye-catch-top) .page-header-inner {
	/*width: 100% !important;
	max-width: 100% !important;*/
}

/* youtube & Google Map */
.youtube,
.gmap,
.wp-block-embed-youtube {
	border-radius: var(--radius-l);
	box-sizing: border-box;
	overflow: hidden;
}
.youtube iframe,
.gmap iframe,
.wp-block-embed-youtube iframe {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	border: 3px solid #fff;
	border-radius: var(--radius-l);
}

/* Common */
html {
	height: -webkit-fill-available;
	font-feature-settings: "palt";
}
body {
	font-family: "bodyFont";
	min-height: 100vh;
	letter-spacing: 0.1em;
}
body:not(.home) {
	background: rgb(var(--color-bg));
}
.alignfull [class*="inner-container"] > .alignwide,
.alignwide [class*="inner-container"] > .alignwide {
	width: revert;
	max-width: var(--nishiki-pro-site-wide-width) !important;
}

h2 {
	border: none !important;
	width: fit-content;
}

strong {
	color: #000;
}

#masthead {
	background-color: unset;
}
.scrolled #masthead {
	background-color: rgba(255, 255, 255, 0.75) !important;
}

/* Individual */

.home {
	.kv {
		overflow: hidden;
		background: #000;
		padding: 0;
		figure {
			height: 100vh;
			padding: 70px 0;
			background: #000;
			opacity: 1;

			video {
				aspect-ratio: 2 / 0.86;
				height: auto;
				width: 100%;
				object-fit: cover;
			}
		}

		.inner-container {
			position: relative;
			padding: 0 !important;

			.mainCopy {
				position: absolute;
				top: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 35%;
				height: 100%;
				margin: 0;
				padding: 0;
				z-index: 1;

				.copyBox {
					width: 100%;
					height: 100%;
					padding: 50px;
					background: var(--linear-gradient-o);
					color: #fff;

					h2 {
						margin-top: var(--distance-l);
					}
				}
			}
			.onestaCopy {
				position: absolute;
				top: 0;
				right: 0;
				width: 65%;
				max-width: unset;
				height: 100%;
				margin: 0;
				padding: 0;
				z-index: 1;

				.copyBox {
					width: 100%;
					max-width: unset;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					margin: 0;
					text-align: center;
					background: #fff;

					h3 {
						font-size: 80px;
						font-family: "kvFont";
						font-weight: 900;

						.c1 {
							color: rgba(234, 85, 20, 1);
						}
						.c2 {
							color: rgba(234, 84, 20, 1);
						}
						.c3 {
							color: rgba(234, 84, 20, 1);
						}
						.c4 {
							color: rgba(240, 75, 81, 1);
						}
						.c5 {
							color: rgba(243, 72, 104, 1);
						}
						.c6 {
							color: rgba(158, 0, 236, 1);
						}
					}
					p {
						font-family: "kvFont2";
						font-weight: 900;
					}
				}
			}
		}
	}

	.preparation {
		padding: var(--distance-xl) 0 !important;
		background: #000 !important;
		text-align: center;
		font-size: calc(var(--fnt-xl) * 1.5);
		font-weight: 900;

		.inner-container {
			padding: 0 !important;
		}

		p {
			background: var(--linear-gradient-o);
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.problem {
		background: rgb(var(--color-bg));
		text-align: center;

		h2,
		span {
			background: var(--linear-gradient-b);
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		h2 {
			display: inline-block;
			font-size: var(--fnt-xl);
		}

		ul {
			padding: var(--distance-s) 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			list-style-type: none;
			gap: 2rem;

			&.animation-loaded li {
				opacity: 1;
				transform: translateY(0);
			}

			li {
				position: relative;
				width: 30%;
				padding: calc(var(--distance) + 1rem);
				background: #fff;
				border-radius: 45%;
				opacity: 0;
				transform: translateY(20px);
				transition:
					opacity 1s ease-in-out,
					transform 1s ease-in-out;
				animation-timing-function: ease-in-out;
				animation-iteration-count: infinite;
				animation-direction: alternate;

				&::before,
				&::after {
					position: absolute;
					content: "";
					border-radius: 50%;
					background: #fff;
				}

				&::before {
					width: 23px;
					height: 23px;
				}

				&::after {
					width: 15px;
					height: 15px;
				}

				&:nth-child(1) {
					animation:
						float1 7s infinite alternate,
						fluid-anim1 8s infinite alternate;
					transition-delay: 0.2s;

					&::before {
						bottom: 38px;
						right: 0px;
					}

					&::after {
						bottom: 20px;
						right: -10px;
					}
				}

				&:nth-child(2) {
					animation:
						float2 8s infinite alternate,
						fluid-anim2 7s infinite alternate;
					transition-delay: 0.6s;

					&::before {
						top: 10px;
						right: 40px;
					}

					&::after {
						top: 0px;
						right: 20px;
					}
				}

				&:nth-child(3) {
					animation:
						float3 9s infinite alternate,
						fluid-anim3 7s infinite alternate;
					transition-delay: 0.8s;

					&::before {
						top: 40px;
						left: 0px;
					}

					&::after {
						top: 20px;
						left: -10px;
					}
				}

				&:nth-child(4) {
					animation:
						float4 7s infinite alternate,
						fluid-anim4 9s infinite alternate;
					transition-delay: 0.4s;

					&::before {
						bottom: 10px;
						left: 40px;
					}

					&::after {
						bottom: -10px;
						left: 40px;
					}
				}

				&:nth-child(5) {
					animation:
						float5 8s infinite alternate,
						fluid-anim5 7s infinite alternate;
					transition-delay: 1s;

					&::before {
						top: 0px;
						right: 60px;
					}

					&::after {
						top: 0px;
						right: 35px;
					}
				}

				&:nth-child(6) {
					animation:
						float6 7s infinite alternate,
						fluid-anim6 9s infinite alternate;
					transition-delay: 0.4s;

					&::before {
						bottom: 20px;
						right: 25px;
					}

					&::after {
						bottom: 20px;
						right: 0px;
					}
				}

				&:nth-child(7) {
					animation:
						float7 9s infinite alternate,
						fluid-anim7 8s infinite alternate;
					transition-delay: 1.4s;
					font-weight: 900;

					&::before {
						bottom: 10px;
						left: 40px;
					}

					&::after {
						bottom: 5px;
						left: 20px;
					}
				}
			}
		}
	}

	.toConsult {
		height: 0;
		padding: 0;
		margin-top: -100px;
		margin-bottom: var(--distance-xl);
		text-align: left;
		background: linear-gradient(
			180deg,
			rgba(245, 245, 245, 1) 60%,
			rgba(255, 255, 255, 1) 40%
		) !important;
		overflow: unset;
		opacity: 0;

		&::before {
			content: "";
			background: rgb(var(--color-sub)) !important;
			transform: skewY(-15deg);
			opacity: 1 !important;
		}

		&.animation-loaded {
			animation: toConsultAnim 1s forwards;
		}

		span {
			letter-spacing: 0.3rem;
			font-size: var(--fnt-xl);
		}
	}

	.reason {
		padding-bottom: var(--distance) !important;

		h2 {
			text-align: right;
			margin-left: auto;

			span {
				letter-spacing: 0.3rem;
				font-size: var(--fnt-xl);
			}
		}

		.reasonItems {
			margin-top: calc(var(--distance-l) * 2);
			align-content: flex-start;
			align-items: flex-start;

			div {
				padding: var(--distance-s);

				header {
					position: relative;

					h3 {
						padding: 0;
						font-size: 1.1rem;
						line-height: normal;

						span {
							display: block;
							background: var(--linear-gradient-o);
							-webkit-background-clip: text;
							background-clip: text;
							-webkit-text-fill-color: transparent;
							font-size: var(--fnt-l);
						}

						&::before {
							display: block;
							font-weight: 900;
							font-size: var(--fnt-s);
							background: var(--linear-gradient-o);
							-webkit-background-clip: text;
							background-clip: text;
							-webkit-text-fill-color: transparent;
							left: -1.4rem;
							position: relative;
						}
					}
					p {
						position: absolute;
						z-index: -1;
						top: -4px;
						left: 1.5rem;
						margin: 0;
						padding: 0;
						color: #888;
						font-weight: 900;
						font-style: italic;
						line-height: 1;

						span {
							margin-left: -1.5rem;
							display: block;
							font-size: 100px;
							letter-spacing: 0;
							color: #eee;
						}
					}
				}
				&:nth-child(1) h3::before {
					content: "01/ ";
				}
				&:nth-child(2) h3::before {
					content: "02/ ";
				}
				&:nth-child(3) h3::before {
					content: "03/ ";
				}
				&:nth-child(4) h3::before {
					content: "04/ ";
				}
			}
			div:nth-child(odd) {
				margin-top: calc(var(--distance-l) * -2);
			}

			.wp-block-nishiki-blocks-pro-animation {
				transition: all 1s;
				opacity: 0;
				transform: translateY(100px);
				filter: blur(10px);

				&.animation-loaded {
					opacity: 1;
					transform: translateY(0);
					filter: blur(0);
				}
			}
		}
	}

	.forYou {
		position: relative;
		background: var(--color-bg);
		padding: 0;

		.inner-container {
			padding: 0 !important;
		}

		.copyBox {
			padding: var(--distance-l) 0;

			.catchCopy {
				padding-top: 2rem;
				font-size: 3rem;
				font-weight: 900;
				text-align: center;
				letter-spacing: 0.4rem;

				span {
					display: inline-block;
					overflow: hidden;
					width: 200px;
					margin: 0 0.7rem 0 0.5rem;
					padding-left: 0.5rem;
					border: 5px solid rgb(0, 0, 0);
					vertical-align: bottom;
				}
			}
			.feature {
				font-size: 1.2rem;
				text-align: center;
				font-weight: 900;
				background: var(--linear-gradient-o);
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.worries {
			position: absolute;
			top: 0;
			width: 100%;
			max-width: 100%;
			margin-top: 0;
			margin-bottom: 0;
			margin-left: calc(-50vw + 50%) !important;
			margin-right: calc(-50vw + 50%) !important;
			padding: 0;
			z-index: -1;

			ul {
				margin-top: 0.1rem;
				padding: 0;
				overflow: hidden;
				display: flex;
				width: 100vw;
				max-width: fit-content;
				margin-inline: calc(50% - 50vw);
				list-style-type: none;
				white-space: nowrap;
				color: rgb(220, 220, 220);
				font-size: 2rem;
				font-weight: 900;

				li {
					flex-shrink: 0;
					white-space: nowrap;

					&:nth-child(odd) {
						animation: loop 48s -24s infinite linear;
					}

					&:nth-child(even) {
						animation: loop2 48s infinite linear;
					}
				}
			}
		}
	}

	.service {
		padding: var(--distance-l) 0 !important;
		background: rgb(var(--color-bg));

		h2 {
			margin: auto;
			text-align: center;
			font-size: var(--fnt-s);
			letter-spacing: 0.4rem;

			span {
				display: block;
				background: var(--linear-gradient-o);
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
				font-size: var(--fnt-xl);
			}
		}
		.serviceMenu {
			gap: unset;
			justify-content: space-between;

			> div {
				flex-basis: unset !important;
				margin-bottom: var(--distance);

				&:nth-child(1),
				&:nth-child(12) {
					width: 100%;
				}
				&:not(:nth-child(1), :nth-child(12)) {
					width: 47%;
				}

				h3 {
					margin: 0;

					&::after {
						content: "";
						display: block;
						height: 2px;
						background: var(--linear-gradient-o);
					}

					+ .wp-block-columns {
						flex-direction: column;

						.imgBox {
							display: flex;
							justify-content: center;
							padding: var(--distance) 0 var(--distance-l);
							background: #4d4d4d;
							border-radius: var(--radius);

							figure {
								width: fit-content;
								background: #575445;
								border-radius: 50%;
								padding: var(--distance);

								&.wp-block-nishiki-blocks-pro-animation {
									transition: all 0.5s;
									opacity: 0;
									transform: translateY(100px);
									filter: blur(10px);

									&.animation-loaded {
										opacity: 1;
										transform: translateY(0);
										filter: blur(0);
										box-shadow:
											5px 5px 20px #333,
											-5px -5px 20px #666;
									}
								}
							}
						}
						.txtBox {
							z-index: 1;
							background: #fff;
							margin-top: calc(var(--distance-l) * -1);
							margin-right: var(--distance);
							margin-left: var(--distance);
							padding: var(--distance);
							border-radius: var(--radius);
						}
					}
				}

				h4 {
					margin: 0;
					padding: 0;
					font-size: 1rem;
					color: #666;

					+ * {
						margin: 0 0 1rem;
						font-size: 0.8rem;
					}
				}
			}
		}
	}

	.workFlow {
		position: relative;
		padding: var(--distance-l) !important;
		background: #222 !important;
		color: #fff;
		overflow: hidden;

		&::after {
			position: absolute;
			bottom: 98.5%;
			right: 0;
			display: block;
			content: "WORKFLOW";
			color: #333;
			line-height: 1;
			font-size: 150px;
			font-weight: 900;
			transform: rotate(-90deg);
			transform-origin: bottom right;
		}

		h2 {
			text-align: center;
			font-size: var(--fnt-s);
			letter-spacing: 0.4rem;

			span {
				display: block;
				background: var(--linear-gradient-o);
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
				font-size: var(--fnt-xl);
			}
		}
		ul {
			position: relative;
			display: flex;
			justify-content: space-between;
			margin: var(--distance) 0;
			padding: 0 var(--distance);
			counter-reset: number 0;

			&::before {
				position: absolute;
				top: 50%;
				left: -5%;
				content: "";
				display: block;
				height: 1px;
				width: 105%;
				background: var(--linear-gradient-o);
			}
			&::after {
				position: absolute;
				top: calc(50% - 14px);
				right: -4px;
				content: "";
				display: block;
				width: 30px;
				height: 30px;
				margin: 0 10px;
				border-top: 1px solid rgb(158, 0, 236);
				border-right: 1px solid rgb(158, 0, 236);
				transform: rotate(45deg);
			}

			li {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 210px;
				width: 210px;
				font-size: small;
				counter-reset: listnum;

				&::before {
					position: absolute;
					top: 0;
					left: 10px;
					z-index: 1;
					display: inline-block;
					padding: 0 5px;
					background: #222;
					font-size: large;
					font-weight: 900;
					counter-increment: number 1;
					content: "0" counter(number);
				}
				&::after {
					position: absolute;
					top: 0;
					left: -20px;
					content: "";
					display: block;
					height: 220px;
					width: 220px;
					border: 1px solid #fff;
					border-radius: 9999px;
				}
				span {
					font-weight: 900;
					font-size: 18px;
					margin-top: -10px;
				}
			}
		}
		.wp-block-group:last-of-type {
			p {
				width: 300px;
				margin: 0;
				padding: var(--distance-s) 0;
				background: #575445;
				border-radius: var(--radius-s);
				font-weight: 900;
				text-align: center;
			}
		}
	}

	.caseStudy {
		padding: var(--distance-l) 0 !important;
		background: #fff;

		.infinite-slider .swiper-wrapper {
			transition-timing-function: linear !important;

			img {
				margin: var(--distance-s) 0 auto;
			}
		}
		.exampleMovie {
			margin-top: var(--distance-l);
			.swiper-wrapper {
				padding-bottom: calc(var(--distance) / 2);
			}
			.swiper-button-next {
				right: 30px;
			}
			.swiper-button-prev {
				left: 30px;
			}
			.swiper-pagination-bullet {
				height: 16px;
				width: 16px;
			}
		}
	}

	.company {
		position: relative;
		overflow: hidden;
		color: #fff;
		padding: var(--distance-l) 0 calc(var(--distance-l) * 2) !important;

		/*&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: url("/wp/wp-content/uploads/2024/07/bg-deepsea.jpg");
			background-size: cover;
			background-position: center;
			background-attachment: fixed;
			opacity: 1;
		}
		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			backdrop-filter: brightness(0.7);
			opacity: 1;
		}*/

		h2 {
			font-size: var(--fnt-s);
			letter-spacing: 0.4rem;

			span {
				display: block;
				background: var(--linear-gradient-o);
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
				font-size: var(--fnt-xl);
			}
		}

		.companyLink {
			align-content: center;

			a {
				position: relative;
				display: block;
				padding: var(--distance-s);
				padding-right: var(--distance-l);
				border: 1px solid #fff;
				border-radius: var(--radius-l);
				background: rgba(255, 255, 255, 0.1);
				color: #fff !important;

				&::after {
					position: absolute;
					top: calc(50% - 14px);
					right: 20px;
					content: "";
					display: block;
					width: 30px;
					height: 30px;
					margin: 0 10px;
					border-top: 3px solid #076ad9;
					border-right: 3px solid #076ad9;
					transform: rotate(45deg);
					transition: right 0.5s;
				}

				&:hover {
					background: rgba(255, 255, 255, 0.2);

					&::after {
						right: 15px;
					}
				}

				h3 {
					margin: 0;
					padding: 0;
					font-size: var(--fnt-s);
					font-weight: 900;
					letter-spacing: 0.4rem;
					line-height: 1.5;

					span {
						display: block;
						background: var(--linear-gradient-b);
						-webkit-background-clip: text;
						background-clip: text;
						-webkit-text-fill-color: transparent;
						font-size: 18px;
					}
				}
				p {
					margin: 1rem 0 0;
					padding: 0;
					font-size: smaller;
				}
			}
		}
	}

	.news {
		margin-top: calc(var(--distance-l) * -1);
		padding: 0 0 var(--distance-l) !important;
		background: none !important;

		.wp-block-nishiki-blocks-pro-animation {
			width: 90%;
			max-width: 1000px;
			padding: var(--distance);
			background: #fff;
			border-radius: var(--radius-l);

			h2 {
				text-align: center;
				font-size: var(--fnt-s);
				letter-spacing: 0.4rem;

				span {
					display: block;
					background: var(--linear-gradient-o);
					-webkit-background-clip: text;
					background-clip: text;
					-webkit-text-fill-color: transparent;
					font-size: var(--fnt-xl);
				}
			}
		}
	}
}

/* kv Anim */
@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	50% {
		opacity: 0.5;
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* problem Anim */
@keyframes float1 {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(-5px, 5px);
	}
	50% {
		transform: translate(5px, -5px);
	}
	75% {
		transform: translate(-5px, -5px);
	}
	100% {
		transform: translate(0, 5px);
	}
}

@keyframes float2 {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(5px, -5px);
	}
	50% {
		transform: translate(-5px, 5px);
	}
	75% {
		transform: translate(5px, 5px);
	}
	100% {
		transform: translate(0, -5px);
	}
}

@keyframes float3 {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(-7.5px, 2.5px);
	}
	50% {
		transform: translate(7.5px, -2.5px);
	}
	75% {
		transform: translate(-7.5px, -2.5px);
	}
	100% {
		transform: translate(0, 2.5px);
	}
}

@keyframes float4 {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(2.5px, 7.5px);
	}
	50% {
		transform: translate(-2.5px, -7.5px);
	}
	75% {
		transform: translate(2.5px, -7.5px);
	}
	100% {
		transform: translate(0, 7.5px);
	}
}

@keyframes float5 {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(-10px, 0);
	}
	50% {
		transform: translate(10px, 0);
	}
	75% {
		transform: translate(-10px, 0);
	}
	100% {
		transform: translate(0, 0);
	}
}

@keyframes float6 {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(-5px, -5px);
	}
	50% {
		transform: translate(5px, 5px);
	}
	75% {
		transform: translate(-5px, 5px);
	}
	100% {
		transform: translate(5px, -5px);
	}
}

@keyframes float7 {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(7.5px, -2.5px);
	}
	50% {
		transform: translate(-7.5px, 2.5px);
	}
	75% {
		transform: translate(7.5px, 2.5px);
	}
	100% {
		transform: translate(-7.5px, -2.5px);
	}
}

@keyframes fluid-anim1 {
	0% {
		border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%;
	}
	25% {
		border-radius: 60% 75% 40% 80% / 70% 70% 60% 65%;
	}
	50% {
		border-radius: 55% 95% 65% 90% / 75% 65% 85% 70%;
	}
	75% {
		border-radius: 60% 40% 50% 45% / 60% 40% 60% 40%;
	}
	100% {
		border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%;
	}
}

@keyframes fluid-anim2 {
	0% {
		border-radius: 55% 45% 65% 35% / 60% 40% 60% 40%;
	}
	25% {
		border-radius: 50% 60% 70% 50% / 65% 65% 75% 65%;
	}
	50% {
		border-radius: 45% 70% 75% 55% / 80% 55% 80% 75%;
	}
	75% {
		border-radius: 50% 50% 55% 45% / 55% 45% 55% 45%;
	}
	100% {
		border-radius: 55% 45% 65% 35% / 60% 40% 60% 40%;
	}
}

@keyframes fluid-anim3 {
	0% {
		border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
	}
	25% {
		border-radius: 45% 55% 55% 45% / 55% 55% 55% 55%;
	}
	50% {
		border-radius: 40% 60% 60% 40% / 60% 50% 60% 60%;
	}
	75% {
		border-radius: 45% 45% 45% 45% / 45% 45% 45% 45%;
	}
	100% {
		border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
	}
}

@keyframes fluid-anim4 {
	0% {
		border-radius: 60% 40% 60% 40% / 60% 40% 60% 40%;
	}
	25% {
		border-radius: 65% 35% 65% 35% / 65% 35% 65% 35%;
	}
	50% {
		border-radius: 70% 30% 70% 30% / 70% 30% 70% 30%;
	}
	75% {
		border-radius: 65% 35% 65% 35% / 65% 35% 65% 35%;
	}
	100% {
		border-radius: 60% 40% 60% 40% / 60% 40% 60% 40%;
	}
}

@keyframes fluid-anim5 {
	0% {
		border-radius: 65% 35% 65% 35% / 65% 35% 65% 35%;
	}
	25% {
		border-radius: 60% 40% 60% 40% / 60% 40% 60% 40%;
	}
	50% {
		border-radius: 55% 45% 55% 45% / 55% 45% 55% 45%;
	}
	75% {
		border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
	}
	100% {
		border-radius: 65% 35% 65% 35% / 65% 35% 65% 35%;
	}
}

@keyframes fluid-anim6 {
	0% {
		border-radius: 55% 45% 55% 45% / 55% 45% 55% 45%;
	}
	25% {
		border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
	}
	50% {
		border-radius: 45% 55% 45% 55% / 45% 55% 45% 55%;
	}
	75% {
		border-radius: 40% 60% 40% 60% / 40% 60% 40% 60%;
	}
	100% {
		border-radius: 55% 45% 55% 45% / 55% 45% 55% 45%;
	}
}

@keyframes fluid-anim7 {
	0% {
		border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
	}
	25% {
		border-radius: 45% 55% 45% 55% / 45% 55% 45% 55%;
	}
	50% {
		border-radius: 40% 60% 40% 60% / 40% 60% 40% 60%;
	}
	75% {
		border-radius: 35% 65% 35% 65% / 35% 65% 35% 65%;
	}
	100% {
		border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
	}
}

/* toConsult Anim */
@keyframes toConsultAnim {
	0% {
		height: 0;
		padding: 0;
	}
	60% {
		height: 0;
		padding: 2px 0;
	}
	100% {
		height: fit-content;
		padding: calc(var(--distance-xl) * 1.5) 0 var(--distance-xl);
		opacity: 1;
	}
}

/* worries Anim */
@keyframes loop {
	0% {
		transform: translateX(100%);
	}
	to {
		transform: translateX(-100%);
	}
}
@keyframes loop2 {
	0% {
		transform: translateX(0);
	}
	to {
		transform: translateX(-200%);
	}
}

.scrolldown {
	position: relative;
	margin-bottom: 50px !important;

	span {
		color: #000;
		font-size: 0.7rem;
		letter-spacing: 0.05em;
	}

	&::after {
		content: "";
		position: absolute;
		top: 40px;
		left: 50%;
		width: 1px;
		height: 50px;
		background: #000;
		animation: pathmove 1.4s ease-in-out infinite;
		opacity: 0;
	}
}

@keyframes pathmove {
	0% {
		height: 0;
		top: 40px;
		opacity: 0;
	}
	30% {
		height: 50px;
		opacity: 1;
	}
	100% {
		height: 0;
		top: 90px;
		opacity: 0;
	}
}

.toContact {
	margin-top: calc(var(--distance-l) * -2);
	padding: calc(var(--distance-l) * 2) 0 var(--distance-l) !important;
	background: rgb(var(--color-sub)) !important;
	#ctaBox {
		flex-wrap: wrap !important;
		.toDiagnosis {
			flex-basis: unset !important;
			figure {
				margin-top: 0;

				img {
					width: 100%;
					height: auto;
				}
			}
		}
	}

	h2 {
		margin: auto;
		text-align: center;
		font-size: var(--fnt-s);
		letter-spacing: 0.4rem;

		span {
			display: block;
			background: var(--linear-gradient-o);
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			font-size: var(--fnt-xl);
		}
	}

	h3 {
		text-align: center;
	}

	figure {
		margin-top: 0;

		img {
			display: block;
			margin: auto;
			width: 128px;
			height: auto;
		}
	}

	h4 {
		margin-top: 0;
		text-align: center;
		font-size: var(--fnt-s);

		span {
			font-size: var(--fnt-l);
		}

		& + p {
			margin-top: 0;
		}
	}

	.toDiagnosis {
		width: 100%;
		margin: var(--distance-s) !important;
		padding: var(--distance);
		border-radius: var(--radius);
		background: #fff;
		box-shadow:
			5px 5px 20px rgb(254, 154, 40),
			-5px -5px 20px rgb(255, 245, 0);
	}
	.mail,
	.phone {
		margin: var(--distance-s) !important;
		padding: var(--distance);
		border-radius: var(--radius);
		background: #fff;
		box-shadow:
			5px 5px 20px rgb(254, 154, 40),
			-5px -5px 20px rgb(255, 245, 0);

		.contactInfo span {
			font-size: var(--fnt-l);
			font-weight: 900;
		}
		.btn-wrap {
			margin: 50px 0;
			text-align: center;

			a {
				position: relative;
				display: inline-block;
				padding: 0.6rem 2rem 0.5rem 2rem;
				transition: all 0.3s;
				letter-spacing: 0.1em;
				border-radius: 0.5rem;
				font-size: 1.3rem;
				font-weight: 900;
				line-height: 1.5;
				color: #fff;
				text-align: center;
				vertical-align: middle;
				text-decoration: none;

				span {
					position: absolute;
					top: -1.25rem;
					left: calc(50% - 160px);
					display: block;
					width: fit-content;
					padding: 0.2rem 0.5rem;
					background: #fff;
					border-radius: 100vh;
					box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
					font-size: var(--fnt-s);

					&::before,
					&::after {
						position: absolute;
						left: calc(50% - 10px);
						content: "";
					}

					&::before {
						bottom: -10px;
						border-width: 10px 10px 0 10px;
						border-style: solid;
					}

					&::after {
						bottom: -7px;
						border-width: 10px 10px 0 10px;
						border-style: solid;
						border-color: #fff transparent transparent transparent;
					}
				}
				&:hover {
					transform: translate(0, 3px);
					color: #fff;
				}
			}
		}
	}

	.mail {
		.btn-wrap {
			a {
				background: #22ffd5;
				box-shadow: 0 5px 0 #20d3b0;

				span {
					border: 2px solid #20d3b0;
					color: #20d3b0;

					&::before,
					&::after {
						left: calc(50% - 10px);
					}

					&::before {
						border-color: #20d3b0 transparent transparent
							transparent;
					}
				}
				&:hover {
					background: #25f2ca;
					box-shadow: 0 2px 0 #20d3b0;
				}
			}
		}
	}

	.phone {
		.btn-wrap {
			a {
				background: #00bdff;
				box-shadow: 0 5px 0 #0094d8;

				span {
					border: 2px solid #0094d8;
					color: #0094d8;

					&::before,
					&::after {
						left: calc(50% - 10px);
					}

					&::before {
						border-color: #0094d8 transparent transparent
							transparent;
					}
				}
				&:hover {
					background: #00ace8;
					box-shadow: 0 2px 0 #0094d8;
				}
			}
		}
	}
}

.faq {
	padding: var(--distance-l) 0 !important;
	background: rgb(var(--color-bg));
	h2 {
		margin: auto;
		text-align: center;
		font-size: var(--fnt-s);
		letter-spacing: 0.4rem;

		span {
			display: block;
			background: var(--linear-gradient-o);
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			font-size: var(--fnt-xl);
		}
	}
	.rank-math-list-item {
		background: #fff;
		margin: var(--distance);
		padding: var(--distance);
		border-radius: var(--radius);
	}
	.rank-math-question {
		position: relative;
		margin: 0;
		padding-left: 2rem;
		&::before {
			position: absolute;
			left: 0.2rem;
			content: "Q.";
			display: inline-block;
			color: rgba(234, 130, 50, 1);
		}
	}
	.rank-math-answer {
		position: relative;
		padding-left: 2rem;
	}
	.rank-math-answer {
		p:first-of-type::before {
			left: 0.4rem;
			position: absolute;
			content: "A.";
			display: inline-block;
			font-weight: 900;
			color: rgba(243, 72, 104, 1);
		}
		p:first-of-type {
			margin-top: 0;
		}
		p:last-of-type {
			margin-bottom: 0;
		}
	}
}

.nav-items-inner {
	display: flex;
	ul.menu-items a {
		flex-direction: column;
		justify-content: center;
		background-color: unset !important;
		background: unset;
		color: #000 !important;
		font-weight: 900;
		letter-spacing: 0.2rem;
		font-size: 12px;
		line-height: 1.2;
		transition: color 0.3s;
		&::before {
			content: attr(data-nav);
			font-size: 20px;
		}
		&:hover {
			color: #ff9900 !important;
		}
	}
	ul.utilityNav a {
		display: flex;
		align-items: center;
		height: 50px;
		margin: 10px;
		padding: 0 1.5rem;
		background: var(--linear-gradient-o);
		border-radius: var(--radius-xl);
		color: #fff !important;
		font-weight: 900;
		text-decoration: none;
		transition: filter 0.5s;
		&:hover {
			filter: brightness(110%);
		}
		&::before {
			margin: 0 0.5rem 0 0;
			font-family: "dashicons";
			content: "\f465";
			transition: margin 0.5s;
		}
		&:hover::before {
			margin: 0 0.2rem 0 0.3rem;
		}
	}
}
#footer {
	padding-top: var(--distance-l) !important;
	background: var(--linear-gradient-o) !important;

	& .footer-inner {
		background: #000;
		padding: var(--distance-l);
		border-radius: var(--radius-xl) var(--radius-xl) 0 0;

		& .footer-widget {
			color: #fff;

			& .widget ul,
			& .widget ol {
				display: table;
				li {
					border: none;
				}
			}

			& .officeInfo {
				& li::before {
					margin-right: 0.5rem;
					font-family: "icomoon";
					background: var(--linear-gradient-o);
					-webkit-background-clip: text;
					background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				& li:nth-child(1)::before {
					content: "\e911";
				}
				& li:nth-child(2)::before {
					content: "\e949";
				}
				& li:nth-child(3):before {
					content: "\e963";
				}
				& #map {
					height: auto;
					width: 100%;
					aspect-ratio: 16 / 9;
					border-radius: var(--radius);
					overflow: hidden;
				}
			}
		}

		& .relation {
			margin-top: var(--distance-l);
			padding: 0;

			& .wp-block-columns {
				margin-bottom: var(--distance);
				padding-top: var(--distance);
				border-top: 1px solid #090909;

				& h3 {
					margin: 0;
					padding: 0;
					width: fit-content;
					font-size: var(--fnt-s);
					font-weight: 900;
					letter-spacing: 0.4rem;
					line-height: 1.5;

					& span {
						display: block;
						background: var(--linear-gradient-b);
						-webkit-background-clip: text;
						background-clip: text;
						-webkit-text-fill-color: transparent;
						font-size: 18px;
					}
				}
				& li {
					float: left;
					margin-left: 0.5rem;

					&::before {
						display: inline-block;
						content: "/";
						margin-right: 0.5rem;
						color: #333;
					}
					&:first-of-type {
						margin-left: 0;
						&::before {
							display: none;
						}
					}
					& ul li {
						margin-left: 1rem !important;
						float: none;
						padding-bottom: 0;
						&::before {
							display: none;
						}
					}
				}
			}
		}
	}

	& .copyright {
		color: #fff;

		& span {
			display: block;
			margin-bottom: 1rem;
			color: #777;
			font-weight: 900;
		}

		& a {
			color: #fff !important;
		}
	}
}

body:not(.home) #page {
	.toContact {
		margin-top: 0;
		padding: var(--distance-l) 0 !important;

		hgroup.headingTitle {
			text-align: center;
			letter-spacing: 0.4rem;
			h2 {
				width: unset;
				margin: 0;
				padding: 0;
				font-size: var(--fnt-s);
			}
			p {
				display: inline-block;
				margin: 0;
				background: var(--linear-gradient-o);
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
				font-size: var(--fnt-xl);
				font-weight: 900;
			}
		}
	}
	main {
		h1 {
			position: relative;
			&::before {
				position: absolute;
				top: -50%;
				z-index: -1;
				display: block;
				width: 100%;
				text-align: center;
				font-size: calc(var(--fnt-xl) * 3);
				text-shadow:
					5px 5px 20px #333,
					-5px -5px 20px #666;
				font-weight: 900;
				font-style: italic;
				line-height: 1;
				color: #575445;
			}
		}

		hgroup.headingTitle {
			text-align: center;
			letter-spacing: 0.4rem;
			h2 {
				width: unset;
				margin: 0;
				padding: 0;
				font-size: var(--fnt-s);
			}
			p {
				display: inline-block;
				margin: 0;
				background: var(--linear-gradient-o);
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
				font-size: var(--fnt-xl);
				font-weight: 900;
			}
		}
		hgroup.headingCase {
			h2 {
				width: unset;
				margin: 0;
				padding: 0;
				font-size: var(--fnt-l);
			}
			h3 {
				width: unset;
				margin: 0;
				padding: 0;
			}
			p {
				display: inline-block;
				margin: 0;
				background: var(--linear-gradient-b);
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
				font-weight: 900;
			}
		}
		h3 {
			margin: 0;
			span {
				display: block;
				color: #eee;
				font-size: var(--fnt-s);
				&::before {
					content: "";
					display: inline-block;
					height: 2px;
					background: #eee;
				}
			}
			&::after {
				content: "";
				display: block;
				height: 2px;
				background: var(--linear-gradient-o);
			}
		}
	}
}

.company {
	.motto,
	.greeting,
	.profile,
	.organization,
	.identification {
		margin: var(--distance-xl) auto;
	}
	.profile,
	.organization {
		margin-bottom: 0;
	}
	h1::before {
		content: "COMPANY";
	}
	.motto {
		ul {
			padding: 0;
			list-style-type: none;
			font-weight: 900;
			font-size: calc(var(--fnt-l) * 1.5);
			font-style: italic;
		}
	}

	.greeting,
	.identification {
		figure {
			padding: 15px;
			img {
				border-radius: var(--radius-xl);
				box-shadow:
					5px 5px 10px #bbb,
					-5px -5px 10px #eee;
			}
		}
	}
	.greeting {
		p {
			text-indent: 1rem;
		}
	}
	.profile,
	.identification {
		dt {
			color: #4d4d4d;
			font-size: 0.8rem;
			font-style: italic;
			font-weight: 900;
			line-height: 1;
		}
		dd {
			margin-bottom: 1rem;
		}
	}
}

.dx {
	a {
		text-decoration: none;
	}
	.dx-hub-section {
		background: #fff;
		margin: var(--distance);
		padding: var(--distance);
		border-radius: var(--radius);
	}
	.dx-hub-section > h2 {
		font-size: 1.6rem;
		margin-bottom: 0.4em;
	}
	.dx-hub-section > h2 + p {
		color: rgb(var(--color-sub));
		margin-bottom: var(--distance-s);
	}
	.dx-hub-hero h2 {
		font-size: clamp(1.5rem, 3vw, 2.2rem);
		line-height: 1.4;
	}
	.dx-hub-cat .wp-block-columns {
		gap: var(--distance-s);
	}
	.dx-hub-cat figure {
		margin: 0 0 0.75em 0;
	}
}

.features,
.web,
.dx,
.corporate-site,
.service-site,
.recruitment-site {
	.entry-content > div:not(:first-of-type) {
		margin: var(--distance-xl) auto;
	}
	:not(hgroup) > h2::before {
		display: inline-block;
		content: "#";
		vertical-align: top;
		font-size: smaller;
		font-style: italic;
		color: rgb(var(--color-sub));
	}
	.wp-block-nishiki-blocks-pro-layout-content {
		background: #fff;
		padding: var(--distance-s);
		border-radius: var(--radius);
		h3,
		h4 {
			margin: 0;
			padding: 0;
		}
	}
}

.contact h1::before {
	content: "CONTACT";
}
.diagnosis h1::before {
	content: "DIAGNOSIS";
}
.features h1::before {
	content: "FEATURES";
}
.web h1::before {
	content: "WEBSITE";
}
.dx h1::before {
	content: "AI・DX";
}
.corporate-site h1::before {
	content: "CORPORATE";
}
.service-site h1::before {
	content: "SERVICE";
}
.recruitment-site h1::before {
	content: "RECRUITMENT";
}

.service-site {
	table {
		width: 100%;
		table-layout: fixed;
		.column-1 {
			width: 10% !important;
		}
		.column-2,
		.column-3 {
			width: 25% !important;
			border-left: 2px dashed #ddd;
		}
		.column-4 {
			width: 40% !important;
			border-left: 2px dashed #ddd;
		}
	}
}

.security-policy {
	h1::before {
		content: "SECURITY";
	}
}

/* Snow Monkey Forms Custom */
.snow-monkey-form {
	.smf-item__label__text {
		position: relative;
	}

	.necessary .smf-item__label__text::after {
		position: absolute;
		content: "必須";
		color: #fff;
		width: 40px;
		height: 22px;
		top: 50%;
		transform: translateY(-50%);
		right: -50px;
		display: grid;
		place-items: center;
		background: var(--linear-gradient-o);
		border-radius: 4px;
		font-size: 12px;
	}
	/*.wp-block-snow-monkey-forms-item:last-child .smf-item__label__text::after,
	.unnecessary .smf-item__label__text::after {
		display: none;
	}*/

	/*Checkboxes styles*/
	.smf-checkboxes-control input[type="checkbox"] {
		display: none !important;
	}

	.smf-checkboxes-control input[type="checkbox"] + span {
		display: block;
		position: relative;
		padding-left: 35px;
		margin-bottom: 20px;
		cursor: pointer;
		-webkit-user-select: none;
		user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}

	.smf-checkboxes-control input[type="checkbox"] + span:last-child {
		margin-bottom: 0;
	}

	.smf-checkboxes-control input[type="checkbox"] + span:before {
		content: "";
		display: block;
		width: 24px;
		height: 24px;
		border: 2px solid #6cc0e5;
		position: absolute;
		left: 0;
		top: 10px;
		opacity: 0.6;
		-webkit-transition:
			all 0.12s,
			border-color 0.08s;
		transition:
			all 0.12s,
			border-color 0.08s;
	}

	.smf-checkboxes-control input[type="checkbox"]:checked + span:before {
		width: 10px;
		top: 5px;
		left: 5px;
		border-radius: 0;
		opacity: 1;
		border-top-color: transparent;
		border-left-color: transparent;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	button {
		background: #2abca7 !important;
		border-radius: var(--radius-xl) !important;
		border: none !important;
		transition: all 0.3s !important;
		cursor: pointer;
		width: 30%;
		color: #fff !important;
		font-weight: 900;
	}
	button:hover {
		background: #7dffeb !important;
		color: #2abca7 !important;
		box-shadow:
			3px 3px 7px rgba(0, 0, 0, 0.1),
			-1px -1px 7px rgba(0, 0, 0, 0.2) !important;
	}
}
/*********************
* PC+
1025px +
***********************/
@media only screen and (min-width: 1025px) {
}

/*********************
* Tablet - PC
769px - 1024px
***********************/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
}

/*********************
* SmartPhone
0px - 768px
***********************/
@media only screen and (max-width: 767px) {
	#masthead .site-info a img {
		max-width: 180px;
	}
	.nav-items-inner {
		flex-direction: column;
	}

	.home {
		& .kv {
			background: #000;
			height: 90vh;
			figure {
				position: absolute;
				height: auto;
				padding: 60px 0;
				video {
					aspect-ratio: 9 / 16;
				}
			}
			& .inner-container {
				height: 90vh;
				.mainCopy {
					position: relative;
					width: 100%;
					height: 50%;
					margin: 0;
					/* z-index: 1; */
				}
				.onestaCopy {
					position: relative;
					width: 100%;
					height: 50%;
					margin: 0;
					/* z-index: 1; */
				}
				.copyBox {
					padding: 25px !important;
					&:has(h3) {
						padding-bottom: 0 !important;
						p {
							margin: 0.5rem;
						}
					}
					h2 {
						margin-bottom: 0;
						padding-bottom: 0;
						font-size: 0.9rem;
					}
					h3 {
						margin-bottom: 0;
						padding: 0;
						font-size: 64px !important;
						line-height: 1;
					}
					p {
						font-size: 0.7rem;
					}
				}
			}
		}

		.preparation {
			font-size: var(--fnt-xl);
		}

		.problem {
			ul {
				padding: var(--distance-s) 0;
				display: block;

				li {
					width: 90%;
					margin: var(--distance) auto 0;
				}
			}
		}

		.toConsult {
			.inner-container {
				width: 90%;
			}
			a {
				width: 100%;
				padding-left: 0;
				padding-right: 0;
				justify-content: center;
			}
		}

		.reason {
			.inner-container {
				/*width: 90%;*/
			}
			& .reasonItems {
				div {
					padding: 0;

					& header {
						& h3 {
							font-size: 0.9rem;
							span {
								font-size: var(--fnt-xl);
							}
						}
						& p {
							span {
								font-size: 75px;
							}
						}
					}
				}
				div:nth-child(odd) {
					margin-top: 0;
				}
			}
		}

		.forYou {
			.copyBox {
				width: 90%;
				padding: 0;
				.catchCopy {
					padding-top: 1rem;
					letter-spacing: 0.2rem;
					font-size: calc((--fnt-xl) * 1.5);
					span {
						display: block;
						width: 180px;
						margin: auto;
						padding-left: 0.2rem;
						border: 3px solid rgb(0, 0, 0);
					}
				}
				.feature {
					font-size: 1rem;
				}
			}
			.worries {
				ul {
					font-size: 2.5rem;
				}
			}
		}
		.service {
			.inner-container {
				width: 90%;
			}
			.serviceMenu {
				display: block;
				& > div {
					width: 100% !important;
					& h3 {
						& + .wp-block-columns {
							.txtBox {
								margin-top: calc(var(--distance-l) * -1.5);
							}
						}
					}
				}
			}
		}
		.workFlow {
			padding: var(--distance) !important;
			.is-layout-flex {
				display: block;

				p {
					width: 100% !important;
					margin-bottom: 1rem !important;
				}
			}
			ul {
				display: block;
				width: 290px;
				margin: auto !important;
				margin-left: -10px;
				margin-right: -10px;
				padding: 0;
				&::before {
					top: 0;
					left: unset;
					right: 24px;
					height: calc(100% + 75px);
					width: 1px;
				}
				&::after {
					top: unset;
					bottom: -70px;
					right: 0px;
					transform: rotate(135deg);
				}
				li {
					height: 280px;
					width: 280px;
					margin: auto;
					padding: 20px 0 0 0;
					font-size: var(--fnt-xl);
					&::before {
						top: 30px;
						left: 0;
						padding: 5px 10px;
						font-size: var(--fnt-l);
					}
					&::after {
						left: unset;
						height: 290px;
						width: 290px;
					}
				}
			}
		}
		.caseStudy {
			.exampleMovie {
				.swiper-button-next {
					right: 10px;
				}
				.swiper-button-prev {
					left: 10px;
				}
			}
		}
		.company {
			.inner-container {
				width: 90%;
			}
			.companyLink {
				a {
					padding-right: var(--distance-xl);
				}
			}
		}
	}

	.toContact {
		& .mail,
		& .phone {
			& .btn-wrap {
				a {
					width: 100%;
					padding: 0.6rem 0 0.5rem 0;
					transition: all 0.3s;
					font-size: 1rem;
					span {
						left: calc(50% - 125px);
					}
				}
			}
		}

		& .toDiagnosis {
			.wp-block-nishiki-blocks-pro-button.alignright {
				width: 100%;
				margin: 0;
				margin-inline-start: 0;
			}
			.btn {
				padding: 0.7rem 1rem;
			}
		}
	}

	.overlay-inner {
		display: flex;
		flex-direction: column;
		ul.menu-items a {
			color: #fff !important;
		}
	}
	#footer {
		.footer-inner {
			padding: var(--distance);
		}
	}

	.company {
		.motto {
			ul {
				font-size: calc(var(--fnt-xl) * 2);
				text-align: center;
			}
		}
	}
	.snow-monkey-form {
		.smf-checkboxes-control input[type="checkbox"] + span:before {
			top: 7px;
		}
		.smf-checkboxes-control input[type="checkbox"]:checked + span:before {
			top: 2px;
		}
		.smf-label {
			margin-bottom: 0.5rem;
		}
		button {
			width: 70%;
		}
	}
	body:not(.home) #page {
		& main {
			& h1 {
				font-size: 1.3rem;
				&::before {
					top: -60%;
					font-size: calc(var(--fnt-xl) * 2.5);
				}
			}
		}
	}
}

/* smf Custom */
.smf-progress-tracker {
	padding-left: 0 !important;
}
.smf-progress-tracker__item__number {
	padding: 1rem;
}
.smf-progress-tracker__item:after,
.smf-progress-tracker__item:before {
	top: 20px;
}

/* =====================================
   dx-column future link note
   ===================================== */
.dx .dx-future-note {
	font-size: 0.85em;
	color: rgb(var(--color-sub));
	margin-left: 0.3em;
	font-weight: normal;
}

.dx-column .entry-content {
	p {
		margin: 1rem 0;
	}
	.wp-block-code {
		padding: 0;
		code {
			padding: 1rem;
		}
	}
}