/*パソコン*/

@media all {
	.pc_none,
	.sp_logo {
		display: none;
	}

	p {
		font-size: 1.6rem;
	}

	html,
	body {
		background-color: #fff !important;
	}

	.serif {
		font-family: "Noto Serif JP", serif;
	}

	ul {
		list-style: none;
	}

	table {
		border-collapse: collapse;
	}

	.right {
		text-align: right;
	}

	.right img {
		margin: 0px !important;
	}

	select.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required {
		border: 1px solid black;
		padding: 5px 10px;
	}

	.wpcf7 form.invalid .wpcf7-response-output,
	.wpcf7 form.unaccepted .wpcf7-response-output,
	.wpcf7 form.sent .wpcf7-response-output {
		border: none !important;
		padding-bottom: 50px;
		font-size: 1.6rem;
		color: #dc3232;
		margin-top: -20px;
	}

	.wpcf7-not-valid-tip {
		font-size: 1.6rem;
	}

	.mt {
		margin-top: 150px !important;
	}

	.mb {
		margin-bottom: 150px !important;
	}

	.plr {
		padding: 0 100px !important;
	}

	.button {
		width: fit-content !important;
		height: unset !important;
		padding: 10px 30px !important;
		color: #1e2c5b !important;
		border: 1px solid #1e2c5b !important;
		font-size: 2rem;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 50px auto 20px;
		transition: 0.3s;
		&:hover {
			color: white !important;
			background: #1e2c5b !important;
		}
		.fas {
			margin-left: 15px;
			margin-right: 0px;
		}
	}

	.button_02 {
		font-family: "Roboto Condensed";
		display: flex;
		align-items: center;
		justify-content: end;
		font-size: 2rem;
		color: black;
		&::after {
			content: "";
			width: 35px;
			border-bottom: 1px solid black;
			margin-left: 10px;
			transition: all 0.2s ease-in-out;
		}
		&:hover {
			&::after {
				width: 45px;
			}
		}
	}

	h1 {
		font-size: 3.2rem;
		text-align: center;
		color: #1e2c5b;
		margin-bottom: 100px;
		&::after {
			content: "";
			display: block;
			margin: auto;
			width: 60px;
			border-bottom: 1px solid black;
			padding-bottom: 30px;
		}
		span {
			font-family: "Roboto Condensed";
			font-size: 2.2rem;
			font-weight: 400;
			display: block;
		}
	}

	h2 {
		color: #212c58;
		width: fit-content;
		font-size: 2.6rem;
		text-align: center;
		align-items: center;
		margin: 0 auto 50px;
		display: flex;
		&::before {
			content: "";
			width: 50px;
			border-bottom: 1px solid #1e2c5b;
			display: flex;
			margin-right: 15px;
		}
		&::after {
			content: "";
			width: 50px;
			border-bottom: 1px solid #1e2c5b;
			display: flex;
			margin-left: 15px;
		}
	}

	h1,
	h2,
	h3 {
		font-weight: 100;
	}

	.header_bg {
		width: 100%;
		position: fixed;
		top: 0;
		transition: all 0.5s;
		z-index: 10000;
		background-color: rgba(30, 44, 91, 0.9);
		#header {
			max-width: 1200px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: white;
			margin: auto;
			.header_logo {
				display: flex;
				align-items: center;
				font-size: 10px;
				z-index: 2;
				img {
					margin-right: 10px;
				}
				a {
					color: white;
				}
			}
		}
	}

	.menu_pc {
		font-size: 15px;
		display: flex;
		align-items: center;
		z-index: 2;
		padding-right: 30px;
		.menu_list {
			margin-right: 35px;
			position: relative;
			/*疑似要素の親を固定*/
			cursor: pointer;
			/*カーソルをポインターへ*/
			text-decoration: none;
			color: white !important;
		}

		.menu_list:before {
			content: "";
			/*疑似要素の中身は空（記述は必須）*/
			position: absolute;
			/*子要素として疑似要素を固定*/
			left: 0;
			/*長さはテキストの両端まで*/
			right: 0;
			/*長さはテキストの両端まで*/
			bottom: -5px;
			/*線の上下位置*/
			width: 100%;
			/*線の長さ*/
			height: 2px;
			/*線の太さ*/
			background-color: white;
			/*線の色*/
			transform: scale(0, 1);
			/*横方向に0状態から全体まで線を入れる*/
			transform-origin: center;
			/*中央を起点にアニメーション*/
			transition: transform 0.2s;
			/*アニメーションの時間*/
		}

		.menu_list:hover:before {
			transform: scale(1);
			/*ホバー時に等倍へ拡大*/
		}

		.menu_list:last-child {
			margin-right: 0px;
		}
	}

	.top {
		.main_imgBox {
			width: 100%;
			height: 88vh;
			overflow: hidden;
			position: relative;
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			letter-spacing: 5px;
		}

		.main_img {
			z-index: 10;
			opacity: 0;
			width: 100%;
			height: 88vh;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			position: absolute;
			left: 0;
			top: 0;
			-webkit-animation: anime 24s 0s infinite;
			animation: anime 24s 0s infinite;
		}

		.main_img:nth-of-type(2) {
			-webkit-animation-delay: 4s;
			animation-delay: 4s;
		}

		.main_img:nth-of-type(3) {
			-webkit-animation-delay: 8s;
			animation-delay: 8s;
		}

		.main_img:nth-of-type(4) {
			-webkit-animation-delay: 12s;
			animation-delay: 12s;
		}

		.main_img:nth-of-type(5) {
			-webkit-animation-delay: 16s;
			animation-delay: 16s;
		}

		.main_img:nth-of-type(6) {
			-webkit-animation-delay: 20s;
			animation-delay: 20s;
		}

		.news {
			max-width: 700px;
			width: 100%;
			margin: -50px auto 0px;
			color: white;
			background-color: #1e2c5b;
			z-index: 2;
			position: relative;
			display: flex;
			align-items: center;
			padding: 30px;

			h2 {
				color: white;
				font-size: 2rem;
				margin: auto 50px auto 20px;
				display: unset;
			}

			div {
				article {
					display: flex;
					margin-bottom: 10px;
					font-size: 1.4rem;
					&:last-of-type {
						margin-bottom: 0px;
					}
					time {
						margin-right: 20px;
					}
					h3 {
						line-height: 1.6;
						font-size: 1.4rem;
						a {
							color: white;
							&:hover {
								opacity: 0.7;
								transition: all 0.5s;
							}
						}
					}
				}
			}
		}

		.about {
			max-width: 1000px;
			margin: 0px auto 200px;
			padding-top: 10px;
			figure {
				max-width: 65%;
				position: absolute;
				left: 0;
				z-index: 1;
				img {
					width: 100%;
					height: auto;
				}
			}
			div {
				max-width: 700px;
				padding: 50px;
				background: rgba(255, 255, 255, 0.9);
				z-index: 2;
				position: relative;
				margin: 230px 0px 0px auto;
				filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
				h1 {
					font-family: "Roboto Condensed";
					font-weight: 400;
					margin-bottom: 30px;
					&::after {
						display: none;
					}
				}
				p {
					margin-bottom: 20px;
				}
			}
		}

		.page_business {
			background-color: #f7f7f7;
			padding-top: 100px;
			padding-bottom: 100px;
		}
	}

	@keyframes anime {
		0% {
			opacity: 0;
		}

		8% {
			opacity: 1;
		}

		17% {
			opacity: 1;
		}

		25% {
			opacity: 0;
			z-index: 9;
		}

		100% {
			opacity: 0;
		}
	}

	.fas {
		margin-right: 10px;
	}

	.required {
		font-size: 1rem;
		color: white;
		line-height: 1;
		padding: 1px 5px;
		background: #cb4d97;
		margin-left: 10px;
	}

	.check {
		font-size: 1.8rem;
		text-align: center;
		margin-top: 80px;
	}

	.page-id-1811 {
		footer {
			.contact {
				background-image: url(https://k-crude.co.jp/wp-content/themes/crude/images/footer_b01_img.jpg);
			}
		}
	}

	.page-id-1816 {
		footer {
			.contact {
				background-image: url(https://k-crude.co.jp/wp-content/themes/crude/images/footer_b02_img.jpg);
			}
		}
	}

	.page-id-1818 {
		footer {
			.contact {
				background-image: url(https://k-crude.co.jp/wp-content/themes/crude/images/footer_b03_img.jpg);
			}
		}
	}

	footer {
		width: 100%;
		color: white;
		padding: 0 !important;
		background-image: unset !important;
		.contact {
			padding: 70px 0px;
			background-image: url(https://k-crude.co.jp/wp-content/themes/crude/images/footer_img.jpg);
			background-size: cover;
			text-align: center;
			p {
				padding-bottom: 40px;
				font-size: 1.8rem;
			}
			.button {
				color: white !important;
				border: 1px solid white !important;
				margin: auto;
				&:hover {
					color: white !important;
					background: #1e2c5b !important;
				}
			}
		}

		.last {
			background-color: #1d2a37;
			padding: 60px 0 20px;
			.menu_pc {
				justify-content: center;
				margin-bottom: 40px;
				a {
					color: white;
				}
			}
			.copy {
				max-width: 800px;
				width: 100%;
				border-top: 1px solid white;
				font-size: 1rem;
				margin: auto;
				padding-top: 20px;
				text-align: center;
			}
		}

		.page_top {
			position: fixed;
			right: 30px;
			bottom: 30px;
			width: 60px;
			height: 60px;
			border-radius: 50%;
			background: white;
			color: black;
			border: 1px solid black;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 2rem;
			text-decoration: none;
			z-index: 999;
			opacity: 0;
			visibility: hidden;
			transform: translateY(20px);
			transition:
				opacity 0.3s,
				visibility 0.3s,
				transform 0.3s,
				background-color 0.3s;
		}

		.page_top.is-show {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}

		.page_top i {
			line-height: 1;
		}
	}

	.page-id-1827,
	.page-id-1829 {
		footer {
			.contact {
				display: none;
			}
		}
	}

	.page_business {
		padding-left: 100px;
		padding-right: 100px;
		article {
			max-width: 1000px;
			width: 100%;
			display: flex;
			margin: 0 auto 150px;
			align-items: center;
			&:nth-of-type(2) {
				flex-direction: row-reverse;
				figure {
					p {
						color: #a7ac3f;
						span {
							background-color: #a7ac3f;
						}
					}
				}
				div {
					padding: 0 30px 0 0;
				}
			}
			&:last-of-type {
				margin: 0 auto;
				figure {
					p {
						color: #c9001a;
						span {
							background-color: #c9001a;
						}
					}
				}
			}
			figure {
				width: 50%;
				position: relative;
				img {
					width: 100%;
					height: auto;
				}
				p {
					position: absolute;
					text-align: left;
					top: -50px;
					left: -30px;
					font-family: "Roboto Condensed";
					font-size: 9rem;
					color: #1e2c5b;
					line-height: 1;
					span {
						color: white;
						font-family: "Noto Sans JP";
						font-size: 2.2rem;
						background-color: #1e2c5b;
						display: block;
						width: fit-content;
						padding-bottom: 4px;
					}
				}
			}
			div {
				width: 50%;
				padding-left: 30px;
				p {
					font-size: 1.8rem;
					margin-bottom: 20px;
				}
			}
		}
	}

	.business {
		.top {
			figure {
				width: 100%;
				position: relative;
				margin-bottom: 60px;
				img {
					width: 100%;
					height: 400px;
					object-fit: cover;
					object-position: center;
				}
				p {
					position: absolute;
					text-align: left;
					top: -70px;
					left: 15%;
					font-family: "Roboto Condensed";
					font-size: 13rem;
					color: #1e2c5b;
					line-height: 1;
					span {
						color: white;
						font-family: "Noto Sans JP";
						font-size: 2.8rem;
						background-color: #1e2c5b;
						display: block;
						width: fit-content;
						padding-bottom: 4px;
					}
				}
			}
			p {
				text-align: center;
				font-size: 2.2rem;
			}
		}

		.overview {
			p {
				text-align: center;
				font-size: 1.8rem;
			}
		}

		.example {
			div {
				max-width: 920px;
				margin: auto;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 20px;
				p {
					font-weight: 500;
					aspect-ratio: 1 / 1;
					letter-spacing: 0.03em;
					width: 136px;
					background-color: #f7f7f7;
					border-radius: 50%;
					font-size: 1.7rem;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.reason {
			article {
				display: flex;
				align-items: center;
				max-width: 700px;
				margin: 0 auto 60px;
				&:last-of-type {
					margin: auto;
				}
				.icon {
					aspect-ratio: 1 / 1;
					min-width: 100px;
					max-width: 100px;
					background-color: #1e2c5b;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 30px;
					i {
						font-size: 4rem;
						color: white;
					}
				}
				div {
					h3 {
						line-height: 1.6;
						font-size: 2.2rem;
						span {
							font-size: 4rem;
							margin-right: 10px;
						}
					}
				}
			}
		}

		.flow {
			article {
				background-color: #f7f7f7;
				padding: 30px;
				max-width: 600px;
				width: 100%;
				margin: auto;
				display: flex;
				align-items: center;
				.icon {
					margin-right: 30px;
					font-size: 5.6rem;
					color: #1e2c5b;
				}
				div {
					h3 {
						font-size: 1.8rem;
						color: #1e2c5b;
						margin-bottom: 5px;
					}
				}
			}

			.fa-caret-down {
				margin: 30px 0;
				font-size: 4rem;
				text-align: center;
				display: block;
			}
		}

		.case {
			article {
				max-width: 1200px;
				width: 100%;
				display: flex;
				align-items: center;
				margin: 0 auto 80px;
				width: fit-content;
				&:nth-child(odd) {
					flex-direction: row-reverse;
					div {
						margin: 0 -80px 0 0;
					}
				}
				figure {
					max-width: 480px;
					min-width: 480px;
					img {
						width: 100%;
						height: auto;
					}
				}
				div {
					margin-left: -80px;
					padding: 30px;
					background-color: rgba(255, 255, 255, 0.8);
					z-index: 1;
					max-width: 550px;
					letter-spacing: 0.2em;
					h3 {
						font-size: 2rem;
						margin-bottom: 10px;
						color: #1e2c5b;
					}
					ul {
						li {
							font-size: 1.6rem;
							span {
								font-size: 2rem;
								color: red;
							}
						}
					}
				}
			}
		}
	}

	.business_02 {
		h2 {
			color: #a7ac3f;
			&::before,
			&::after {
				border-bottom: 1px solid #a7ac3f;
			}
		}
		.top {
			figure {
				p {
					color: #a7ac3f;
					span {
						background-color: #a7ac3f;
					}
				}
			}
		}

		.reason {
			article {
				.icon {
					background-color: #a7ac3f;
				}
				div {
					h3 {
						color: #a7ac3f;
					}
				}
			}
		}

		.flow {
			article {
				.icon {
					color: #a7ac3f;
				}
				div {
					h3 {
						color: #a7ac3f;
					}
				}
			}
		}

		.case {
			article {
				div {
					h3 {
						color: #a7ac3f;
					}
				}
			}
		}
	}

	.business_03 {
		h2 {
			color: #c9001a;
			&::before,
			&::after {
				border-bottom: 1px solid #c9001a;
			}
		}
		.top {
			figure {
				p {
					color: #c9001a;
					span {
						background-color: #c9001a;
					}
				}
			}
		}

		.reason {
			article {
				.icon {
					background-color: #c9001a;
				}
				div {
					h3 {
						color: #c9001a;
					}
				}
			}
		}

		.flow {
			article {
				.icon {
					color: #c9001a;
				}
				div {
					h3 {
						color: #c9001a;
					}
				}
			}
		}

		.case {
			article {
				div {
					h3 {
						color: #c9001a;
					}
				}
			}
		}
	}

	.company {
		.introduction {
			text-align: center;
			font-size: 1.8rem;
			p {
				margin-bottom: 30px;
				&:nth-of-type(3) {
					font-size: 2.2rem;
				}
				&:nth-last-child {
					margin-bottom: 0px;
				}
			}
		}

		.mission {
			text-align: center;
			article {
				margin-bottom: 60px;
				&:nth-last-child {
					margin-bottom: 0px;
				}
				h3 {
					font-size: 2.2rem;
					border-bottom: 1px solid black;
					margin: 0 auto 30px;
					width: fit-content;
				}
			}
		}

		.greeting {
			max-width: 1000px;
			margin: auto;
			article {
				display: flex;
				p {
					width: 65%;
					padding-right: 40px;
					font-size: 1.5rem;
				}
				div {
					width: 35%;
					figure {
						margin: auto;
						width: fit-content;
						&:first-of-type {
							width: 100%;
							img {
								width: 100%;
								height: auto;
							}
						}
					}
					p {
						margin: 30px auto 10px;
						padding: unset;
						text-align: center;
						span {
							font-size: 1.8rem;
							margin-left: 10px;
						}
					}
				}
			}
		}

		.overview {
			max-width: 1000px;
			margin: 0 auto 50px;
			display: flex;
			align-items: center;
			h2 {
				margin-right: 100px;
			}
			table {
				th,
				td {
					border-bottom: 1px solid black;
					padding: 25px;
					font-size: 1.6rem;
					a {
						color: black;
					}
				}
				th {
					font-weight: 300;
					background-color: #f7f7f7;
				}
			}
		}

		.map {
			aspect-ratio: 10 / 3.5;
		}
	}

	.news {
		nav {
			width: fit-content;
			display: flex;
			margin: 0 auto 50px;
			a {
				line-height: 1;
				font-size: 1.6rem;
				color: black;
				margin-right: 20px;
				padding-right: 20px;
				border-right: 1px solid black;
				&:last-of-type {
					margin: unset;
					padding: unset;
					border: unset;
				}
			}
		}
		article {
			max-width: 1000px;
			margin: auto;
			a {
				font-size: 1.6rem;
				color: black;
				display: flex;
				align-items: center;
				gap: 30px;
				margin-bottom: 15px;
				&:last-of-type {
					margin-bottom: 0px;
				}
				h3 {
					font-size: 1.6rem;
				}
			}
		}
	}

	.single {
		article {
			div {
				max-width: 1000px;
				margin: auto;
				data {
					font-size: 1.2rem;
				}

				h2 {
					flex-direction: column;
					font-size: 2rem;
					text-align: left !important;
					margin: 0 0 30px 0 !important;
					align-items: baseline;
					&::before {
						display: none;
					}
					&::after {
						display: block;
						margin: 10px 0 0 0;
					}
				}
				.entry-content {
					margin-top: 50px;
					a {
						color: black;
						border-bottom: 1px solid black;
					}
				}
			}
		}
	}

	.contact {
		.form,
		.p-locality {
			width: 100%;
			padding: 5px 10px;
			border: 1px solid black;
		}

		.p-postal-code {
			padding: 5px 10px;
			border: 1px solid black;
		}

		.form_text {
			width: 100%;
			height: 200px;
			padding: 5px 10px;
			border: 1px solid black;
		}

		text-align: center;
		article {
			display: flex;
			justify-content: center;
			gap: 40px;
			margin: 30px 0px 60px;
			div {
				address {
					font-size: 3rem;
					font-style: unset;
					a {
						color: black !important;
					}
				}
				p {
					font-size: 1.2rem;
				}
			}
		}
		table {
			max-width: 800px;
			width: 100%;
			margin: auto;
			th,
			td {
				text-align: left;
				font-size: 1.5rem;
				font-weight: 300;
			}
			th {
				padding: 20px 0px;
				width: 40%;
			}
			td {
				padding: 20px 0px;
			}
		}
		.privacy {
			max-width: 800px;
			width: 100%;
			margin: auto;
			background-color: #f7f7f7;
			padding: 50px;
			text-align: justify;
			font-size: 1.4rem;
			flex-direction: column;
			h2 {
				text-align: center;
				font-size: 2rem;
				color: black;
				margin-bottom: 0;
				&::after,
				&::before {
					display: none;
				}
			}
			li {
				margin-bottom: 30px;
				&:last-child,
				.mb0 {
					margin-bottom: 0px;
				}
			}
		}
	}
}

/*ipad*/
@media screen and (max-width: 1024px) {
	.plr {
		padding: 0 50px !important;
	}

	.page_business {
		padding-left: 50px;
		padding-right: 50px;
		article {
			margin: 0 auto 100px;
			div {
				p {
					font-size: 1.6rem;
				}
			}
		}
	}
}

@media screen and (max-width: 940px) {
	h1 {
		margin-bottom: 100px;
	}

	.button {
		padding: 6px 20px !important;
		font-size: 2rem;
	}

	.top {
		.about {
			div {
				max-width: 640px;
				padding: 30px;
				margin: 140px 0px 0px auto;
			}
		}
	}

	.business {
		.top {
			figure {
				p {
					top: -60px;
					left: 5%;
					font-size: 11rem;
					span {
						font-size: 2.4rem;
					}
				}
			}
		}

		.case {
			article {
				figure {
					max-width: 400px;
					min-width: 400px;
				}
			}
		}
	}

	.company {
		.greeting {
			article {
				p {
					width: 60%;
				}
				div {
					width: 40%;
				}
			}
		}

		.overview {
			h2 {
				margin-right: 50px;
			}
			table {
				th,
				td {
					padding: 20px;
				}
				th {
					text-wrap: nowrap;
				}
			}
		}
	}
}

@media screen and (max-width: 830px) {
	.page_business {
		article {
			&:nth-of-type(2) {
				div {
					padding: 0 50px 0 0;
				}
			}
		}
	}

	.business {
		.case {
			article {
				&:nth-child(odd) {
					div {
						margin: 0 -130px 0 0;
					}
				}
				div {
					margin-left: -130px;
					padding: 20px;
				}
			}
		}
	}
}

/*ipadmini*/
@media screen and (max-width: 768px) {
	.plr {
		padding: 0 30px !important;
	}

	.mb {
		margin-bottom: 100px !important;
	}

	h1 {
		font-size: 3rem;
		margin-bottom: 70px;
	}

	h2 {
		font-size: 2.2rem;
	}
	.top {
		.main_imgBox {
			height: 60vh;
		}

		.main_img {
			height: 60vh;
		}

		.news {
			max-width: 600px;
		}

		.about {
			margin: 0px auto 150px;
			figure {
				max-width: 72%;
			}
			div {
				max-width: 595px;
				padding: 20px;
				margin: 220px 0px 0px auto;
			}
		}
	}

	footer {
		.last {
			.copy {
				max-width: 550px;
			}
		}
	}
}

/*電話番号発信スマホのみ*/
@media (min-width: 600px) {
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
		text-decoration: none;
	}

	.fullscreenmenu {
		display: none;
	}
}

/*スマホ*/
@media screen and (max-width: 599px) {
	.sp_none {
		display: none;
	}

	.pc_none {
		display: block;
	}

	.plr {
		padding: 0 20px !important;
	}

	/*フルスクリーンメニュー*/
	menu,
	.menu span {
		display: inline-block;
		-webkit-transition: all 0.4s;
		transition: all 0.4s;
		box-sizing: border-box;
	}

	.menu {
		position: fixed;
		top: 18px;
		right: 25px;
		width: 35px;
		height: 22px;
		z-index: 9999;
		outline: none;
	}

	.menu span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: white;
		z-index: 10;
	}

	.menu span:nth-of-type(1) {
		top: 0px;
	}

	.menu span:nth-of-type(2) {
		top: 10px;
	}

	.menu span:nth-of-type(3) {
		bottom: 0px;
	}

	.menu.active span:nth-of-type(1) {
		-webkit-transform: translateY(10px) rotate(45deg);
		transform: translateY(10px) rotate(45deg);
	}

	.menu.active span:nth-of-type(2) {
		opacity: 0;
	}

	.menu.active span:nth-of-type(3) {
		-webkit-transform: translateY(-10px) rotate(-45deg);
		transform: translateY(-10px) rotate(-45deg);
	}

	#nav_sp {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		opacity: 0;
		background-color: #fff;
		transition: all 0.3s ease-in-out;
		visibility: hidden;
	}

	#nav_sp.active {
		right: 0;
		opacity: 1;
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0);
		transform: translateX(0);
		visibility: visible;
		background-color: #1e2c5b;
	}

	#nav_sp ul li {
		list-style-type: none;
	}

	#nav_sp ul li a {
		display: inline-block;
		padding: 20px 0;
		transition: all 0.2s ease-in-out;
		text-align: center;
		text-decoration: none;
		color: white;
		font-size: 1.6rem;
	}

	#nav_sp {
		ul {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 20px 0;
			height: 100%;
		}
	}

	h1 {
		font-size: 2.2rem;
		margin-bottom: 50px;
		letter-spacing: 0.02em;
		line-height: 1.8;
		&::after {
			padding-bottom: 20px;
		}
		span {
			font-size: 1.8rem;
		}
	}

	h2 {
		font-size: 2rem;
		margin: 0 auto 30px;
		&::before,
		&::after {
			width: 30px;
		}
	}

	.mt {
		margin-top: 120px !important;
	}

	.mb {
		margin-bottom: 80px !important;
	}

	.button {
		font-size: 1.8rem;
	}

	.header_bg {
		z-index: 9000;
		#header {
			.header_logo {
				width: 150px;
				img {
					width: 100%;
					height: auto;
				}
			}
			.menu_pc {
				display: none;
			}
		}
	}

	.top {
		.news {
			margin: 0px;
			padding: 30px 20px;
			flex-direction: column;
			h2 {
				margin: 0 0 20px 0;
			}
		}

		.about {
			figure {
				max-width: 100%;
				position: unset;
			}
			div {
				margin: 0;
			}
		}
	}

	.page_business {
		padding-top: 50px;
		padding-bottom: 50px;
		padding-left: 20px;
		padding-right: 20px;
		margin-bottom: 0px !important;
		article {
			flex-direction: column;
			margin: 0 auto 60px;
			&:nth-of-type(2) {
				flex-direction: column;
				div {
					padding: 0px;
				}
			}
			figure {
				width: 100%;
				p {
					top: -35px;
					left: -10px;
					font-size: 6rem;
					span {
						font-size: 2rem;
					}
				}
			}
			div {
				width: 100%;
				padding-left: 0px;
			}
		}
	}

	.business {
		.top {
			figure {
				margin-bottom: 30px;
				img {
					height: 240px;
				}
				p {
					top: -35px;
					left: 10px;
					font-size: 6rem;
					span {
						font-size: 2rem;
					}
				}
			}
			p {
				font-size: 1.8rem;
			}
		}

		.overview {
			p {
				font-size: 1.6rem;
			}
		}

		.example {
			div {
				p {
					width: 130px;
					font-size: 1.5rem;
				}
			}
		}

		.reason {
			article {
				flex-direction: column;
				.icon {
					min-width: 90px;
					max-width: 90px;
					margin: 0 0 10px 0;
					i {
						font-size: 3.5rem;
					}
				}
				div {
					h3 {
						font-size: 2rem;
						letter-spacing: 0.01em;
						margin-bottom: 10px;
					}
				}
			}
		}

		.flow {
			article {
				padding: 20px;
				flex-direction: column;
				.icon {
					margin-right: 0px;
					font-size: 5rem;
					line-height: 1;
					margin-bottom: 20px;
				}
				div {
					h3 {
						text-align: center;
					}
				}
			}
		}

		.case {
			article {
				&:nth-child(odd) {
					flex-direction: column;
					div {
						margin: 0;
					}
				}
				flex-direction: column;
				figure {
					max-width: 100%;
					min-width: 100%;
					margin-bottom: 20px;
				}
				div {
					margin-left: 0px;
					padding: 0;
				}
			}
		}
	}

	.company {
		.mission {
			article {
				h3,
				p {
					text-align: left;
				}
			}
		}

		.greeting {
			article {
				flex-direction: column;
				p {
					width: 100%;
					margin: 0 0 40px 0;
					padding-right: 0;
				}
				div {
					width: 100%;
				}
			}
		}

		.overview {
			flex-direction: column;
			h2 {
				margin: 0 auto 40px;
			}
			table {
				th,
				td {
					font-size: 1.4rem;
					line-height: 1.6;
				}
			}
		}

		.map {
			aspect-ratio: 1 / 1;
		}
	}

	.news {
		nav {
			a {
				font-size: 1.4rem;
			}
		}
		article {
			max-width: 1000px;
			margin: auto;
			a {
				gap: 10px;
				margin-bottom: 40px;
				flex-direction: column;
				align-items: baseline;
			}
		}
	}

	.contact {
		article {
			flex-direction: column;
			gap: 30px;
		}
		table {
			th,
			td {
				width: 100%;
				display: block;
			}
			th {
				padding: 0px;
			}
			td {
				padding: 10px 0 30px;
			}
		}
		.check {
			margin: 0 0 0 -20px;
		}
		.privacy {
			padding: 30px 20px;
		}
	}

	footer {
		.contact {
			padding: 50px 0px;
			p {
				padding-bottom: 30px;
				font-size: 1.5rem;
			}
		}
		.last {
			padding: 40px 0 20px;
			.menu_pc {
				font-size: 1.4rem;
				padding: 0 50px;
				flex-wrap: wrap;
				gap: 15px 25px;
				.menu_list {
					margin: 0;
				}
			}
		}
		.page_top {
			width: 50px;
			height: 50px;
			right: 20px;
			bottom: 20px;
			font-size: 1.6rem;
		}
	}
}