@charset "UTF-8";

:root {
	--green: #00853c;
	--green-dark: #148f4a;
	--green-light: #eff7e1;
	--green-secondary: #deedb9;
	--blue: #0068b6;
	--mint: #fffbed;
	--blue-dark: #154A85;
	--blue-light: #d3eef1;
	--blue-light2: #d8f0e4;
	/*--bg-cream: #FBF7EA;*/
	/*--bg-mint: #E3EFD9;*/
	/*--bg-mint-deep: #D8EAC8;*/
	--white: #FFFFFF;
	--black: #000000;
	--silver: #eaeaea;
	/*--ink-soft: #4B4B47;*/
	/*--line: #D8D2BD;*/
	--tag-green: #2E8B4F;
	--radius-pill: 999px;
	--shadow-card: 0 12px 28px rgba(30, 60, 20, 0.08);
	--ff-base: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	--ff-maru: "Zen Maru Gothic", sans-serif;
	/*--ff-en: "Poppins", "Noto Sans JP", sans-serif;*/
	--width-container: 1100px;

	font-size: 9px;

	@media screen and (min-width: 1080px) {
		font-size: 10px;
	}
}

/**
 * reset
 */
* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--ff-base);
	font-weight: 600;
	font-style: normal;
	position: relative;
	font-size: 1.8rem;
	line-height: 1.85;
	color: var(--black);
	overflow-x: hidden;
	background-color: var(--green-light);

	@media screen and (min-width: 1080px) {
		letter-spacing: 1px;
	}
}

h1, h2, h3, p, ul, ol, dl, dt, dd, p {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

img {
	max-width: 100%;
}

a {
	text-decoration: none;
	color: inherit;
}

/**
 * common
 */
.container {
	margin: 0 2%;

	@media screen and (min-width: 1080px) {
		width: var(--width-container);
		margin: 0 auto;
	}
}

header {
	position: relative;
	z-index: 10;

	.container {
		display: flex;
		justify-content: space-between;
		margin: 0;
		background-color: var(--white);

		@media screen and (min-width: 1080px) {
			height: 80px;
			margin: 0 auto;
			background-color: transparent;
		}

		.header-left {
			flex-basis: 100%;
			height: 100%;
			background: var(--white);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 2%;
			padding-right: 36px;

			@media screen and (min-width: 1080px) {
				border: 2px solid var(--black);
				border-top: none;
				border-radius: 0 0 14px 14px;
				flex-basis: calc(100% - 180px - 14px);
				padding-left: 30px;
			}

			p.header-brand {
				margin-block-start: 0.67em;
				margin-block-end: 0.67em;
			}
			nav {
				align-items: center;
				font-size: 2.0rem;
				display: none;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100vh;
				background-color: var(--white);
				margin-top: 60px;
				padding: 30px 40px 0;

				@media screen and (min-width: 1080px) {
					font-size: 1.7rem;
					display: block;
					position: static;
					width: auto;
					height: auto;
					background-color: transparent;
					margin-top: 0;
					padding: 0;
				}

				ul {
					margin-bottom: 40px;

					@media screen and (min-width: 1080px) {
						margin-bottom: 0;
					}

					li {
						display: block;

						@media screen and (min-width: 1080px) {
							display: inline;
						}

						a {
							transition: ease  0.3s;
							display: block;
							padding: 10px 10px 10px 40px;
							border-bottom: 1px solid var(--green);
							background-image: url("../img/button-bg2.webp");
							background-repeat: no-repeat;
							background-position: left 5px center;
							background-size: 2.5rem;

							@media screen and (min-width: 1080px) {
								margin-left: 20px;
								padding: 0;
								display: inline;
								border-bottom: none;
								background: none;
							}

							&:hover {
								color: var(--green-dark);
							}
						}
					}
				}
				p.contact {
					display: block;
					text-align: center;
					margin-bottom: 40px;

					@media screen and (min-width: 1080px) {
						display: none;
					}
				}
				p.tel {
					@media screen and (min-width: 1080px) {
						display: none;
					}

					text-align: center;
					font-size: 2.2rem;

					a {
						color: var(--blue);
					}

					span {
						display: block;

						&.tel-tel {
							font-size: 3.0rem;
						}
						&.tel-text {
							font-size: 2.0rem;
						}
					}
				}
			}
		}
		.header-contact {
			height: 100%;
			display: none;

			@media screen and (min-width: 1080px) {
				display: block;
			}

			a {
				display: flex;
				width: 180px;
				height: 100%;
				background-color: var(--green);
				color: var(--white);
				justify-content: center;
				align-items: center;
				border-radius: 0 0 14px 14px;
				transition: ease  0.3s;

				&:hover {
					background-color: var(--white);
					color: var(--green);
					border: 2px solid var(--black);
					border-top: none;
				}
			}
		}
		.header-menu {
			background-color: var(--green);
			color: var(--white);
			border-radius: 0 0 14px 14px;
			margin-right: 2%;
			display: flex;
			flex-basis: 10%;
			margin-bottom: 10px;
			flex-basis: 50px;

			@media screen and (min-width: 1080px) {
				display: none;
			}

			a {
				display: flex;
				height: 100%;
				width: 100%;
				align-items: center;
				justify-content: center;
				font-size: 32px;
				line-height: 1;
				cursor: pointer;
			}
		}
	}
}

.footer-contact {
	.container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.contact-box {
			flex-basis: 100%;
			text-align: center;
			color: var(--white);
			padding-top: 96px;
			padding-bottom: 60px;
			clip-path: polygon(0 18%, 50% 0%, 100% 18%, 100% 100%, 0% 100%);
			margin-bottom: 40px;

			@media screen and (min-width: 1080px) {
				flex-basis: calc(50% - 15px);
				margin-bottom: 0;
			}

			&:nth-of-type(1) {
				background-color: var(--blue);
			}
			&:nth-of-type(2) {
				background-color: var(--green);
			}

			.contact-icon {
				margin-bottom: 60px;
				height: 60px;
			}
			.contact-label {
				font-size: 2.4rem;
			}
			.contact-tel {
				font-size: 4.6rem;
			}
			.contact-hours {
				font-size: 1.9rem;
			}
			.contact-button {
				margin-top: 60px;
			}
		}
	}
}

footer {
	background: var(--white);
	padding: 194px 0 40px;
	margin-top: -124px;

	.container > div {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		/*height: 40px;*/
		margin-bottom: 24px;

		> p {
			flex-basis: 100%;
			order: 1;
			margin-bottom: 20px;

			@media screen and (min-width: 1080px) {
				flex-basis: initial;
				margin-bottom: 24px;
			}
		}

		.footer-nav {
			flex-basis: 100%;
			order: 3;
			margin-bottom: 20px;
			display: flex;
			flex-wrap: wrap;

			@media screen and (min-width: 1080px) {
				flex-basis: initial;
				order: 2;
				padding-left: 80px;
				margin-bottom: 24px;
			}

			a {
				margin-right: 50px;
				transition: ease 0.3s;
				flex-basis: 30%;

				&:hover {
					color: var(--green-dark);
				}

				@media screen and (min-width: 1080px) {
					flex-basis: initial;
				}
			}
		}

		.footer-address {
			flex-basis: 100%;
			line-height: 1.4;
			order: 2;
			margin-bottom: 20px;

			@media screen and (min-width: 1080px) {
				order: 3;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				margin-bottom: 0;
				margin-bottom: 24px;
			}

			> div {
				flex-basis: 100%;
			}
		}
		.footer-copy {
			color: #747474;
			font-size: 1.2rem;
			order: 4;

			@media screen and (min-width: 1080px) {
				flex-basis: 100%;
				text-align: right;
				margin-top: -24px;
			}
		}
	}
}

.c-button {
	display: inline-block;
	height: 64px;
	border: 2px solid var(--black);
	border-radius: 32px;
	background-color: var(--blue);
	color: var(--white);
	font-family: var(--ff-maru);
	font-size: 1.6rem;
	line-height: 60px;
	padding-left: 40px;
	padding-right: 80px;
	position: relative;
	transition: ease 0.3s;
	cursor: pointer;

	&::after {
		display: inline-block;
		width: 27px;
		height: 27px;
		position: absolute;
		content: "";
		background-image: url(../img/button-bg.webp);
		right: 24px;
		top: 16px;
		transition: ease 0.3s;
	}

	&:hover {
		background-color: var(--blue-dark);

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

@keyframes text-bg {
	from {
		background-position: 100% bottom;
	}

	to {
		background-position: 0 bottom;
	}
}

/**
 * index
 */
body.index {
	.index-subtitle {
		font-size: 3.0rem;
		font-family: var(--ff-maru);
		line-height: 1.6;

		span {
			font-size: 1.9rem;
			color: var(--green);
			display: block;
		}
	}

	.index-hero {
		position: relative;
		background-image: url("../img/index/hero-02.webp");
		background-position: center bottom;
		background-repeat: repeat-x;
		animation: text-bg 15s infinite linear;
		overflow: hidden;

		@media screen and (min-width: 1080px) {
			margin-top: -80px;
		}

		.container {
			position: relative;
			/*height: 100vh;*/
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			@media screen and (min-width: 1080px) {
				height: 560px;
			}

			p {
				font-size: 4.3rem;
				font-family: var(--ff-maru);
				width: var(--width-container);
				margin: 100px auto 0;
				padding-left: 40px;
				position: relative;
				z-index: 5;

				@media screen and (min-width: 1080px) {
					margin: 0 auto;
				}
			}
		}

		div.hero-content {
			@media screen and (min-width: 1080px) {
				position: absolute;
			}

			&.hero-01{
				top: 80px;
				bottom: 0;
				z-index: 2;
				width: 0;
				overflow: hidden;
				position: absolute;

				img {
					width: 1511px;
					height: 360px;
					max-width: 1511px;
				}
			}
			&.hero-02{
				bottom: 0;
				z-index: 1;
			}
			&.hero-03{
				right: 0;
				bottom: 0;
				transform: translateY(435px);
				z-index: 3;
			}
		}

		img {
			vertical-align: bottom;
		}
	}

	.index-about {
		background-color: var(--mint);
		padding-top: 80px;
		padding-bottom: 80px;
		background-image: url(../img/index/about-01.webp);
		background-position: center top 30px;
		background-repeat: no-repeat;

		@media screen and (min-width: 1080px) {
			padding-top: 120px;
			padding-bottom: 180px;
		}

		.container {
			display: flex;

			h2 {
				display: none;

				@media screen and (min-width: 1080px) {
					display: block;
					flex-basis: 520px;
					font-size: 4.3rem;
					padding-left: 40px;
				}
			}
			p {
				font-size: 2.1rem;

				@media screen and (min-width: 1080px) {
					flex-basis: calc(100% - 520px);
					padding-right: 90px;
				}
			}
		}
	}

	.index-service {
		padding-top: 50px;
		padding-bottom: 110px;

			.service-title {
				font-size: 1.8rem;
				position: relative;

				@media screen and (min-width: 1080px) {
					padding-right: 90px;
				}

				.index-subtitle {
					padding-top: 100px;
					margin-bottom: 20px;
				}

				> div > div {
					padding-bottom: 300px;
					background-image: url(../img/index/service-bg.webp);
					background-repeat: repeat-x;
					background-position: center top 330px;
					animation: text-bg 20s infinite linear;

					@media screen and (min-width: 1080px) {
						position: absolute;
						float: left;
						max-width: 100vw !important;
						width: 100vw !important;
						height: 400px !important;
						max-height: 400px !important;
					}

					&::after {
						content: "";
						display: block;
						clear: left;
					}

					> .container {
						> div {
							@media screen and (min-width: 1080px) {
								width: 400px;
							}
						}
					}
				}
			}
			.service-content {
				 > div {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-end;
				}

				section {
					flex-basis: 100%;
					position: relative;
					background-color: var(--green-dark);
					clip-path: polygon(0 20%, 50% 0%, 100% 20%, 100% 100%, 0% 100%);
					margin-bottom: 40px;
					padding: 140px 30px 40px 30px;

					@media screen and (min-width: 1080px) {
						flex-basis: 600px;
						padding: 150px 270px 40px 50px;
						clip-path: polygon(0 32%, 50% 0%, 100% 32%, 100% 100%, 0% 100%);
					}

					&::before {
						position: absolute;
						inset: 2px;
						content: "";
						clip-path: polygon(0 20%, 50% 0%, 100% 20%, 100% 100%, 0% 100%);
						background-color: var(--white);
						z-index: -1;

						@media screen and (min-width: 1080px) {
							clip-path: polygon(0 32%, 50% 0%, 100% 32%, 100% 100%, 0% 100%);
						}
					}

					h3 {
						color: var(--green);
						font-family: var(--ff-maru);
						font-size: 2.5rem;
						margin-bottom: 40px;

						@media screen and (min-width: 1080px) {
							margin-bottom: 10px;
						}
					}
					p {
						font-size: 1.7rem;
						margin-bottom: 24px;
						line-height: 1.65;
					}
					> div {
						text-align: center;

						@media screen and (min-width: 1080px) {
							text-align: left;
						}
					}
					figure {
						position: absolute;
						top: 60px;
						right: 20px;
						width: 140px;
						height: 140px;
						border-radius: 70px;
						overflow: hidden;
						margin: 40px;
						margin-block-start: 1em;
						margin-block-end: 1em;

						@media screen and (min-width: 1080px) {
							width: 220px;
							height: 220px;
							border-radius: 110px;
							top: initial;
							bottom: 50px;
							right: 0px;
						}
					}
				}
		}
	}

	.index-works {
		background-color: var(--mint);
		border-radius: 80px 0 80px 0;
		padding-top: 120px;
		padding-bottom: 100px;
		position: relative;

		@media screen and (min-width: 1080px) {
			padding-top: 120px;
			border-radius: 180px 0 180px 0;
		}

		> .container {
			position: relative;
		}

		h2 {
			margin-bottom: 40px;
		}

		ul {
			/*display: flex;*/
			margin-bottom: 70px;
			width: 140%;

			@media screen and (min-width: 1080px) {
				width: calc(1100px / 3 * 4);
			}

			li {
				/*flex-basis: 300px;*/
				display: inline-block;
				width: 70%;
				margin-right: 50px;
				font-size: 1.6rem;

				@media screen and (min-width: 1080px) {
					width: calc(1100px / 3);
				}

				.works-image {
					height: 250px;
					margin-bottom: 20px;
					position: relative;
					border-radius: 20px;
					overflow: hidden;
				}
				.works-category {
					color: var(--white);
					background-color: var(--green);
					border-radius: 20px 0 0 0;
					line-height: 45px;
					padding: 0 20px;
					display: inline-block;
					position: absolute;
					left: 0;
					top: 0;
				}
				.works-date {
					color: var(--green);
				}
				.works-title {
					font-size: 1.7rem;
					line-height: 1.3;
				}
			}
		}

		.works-button {
			text-align: center;
		}
	}

	.index-company {
		padding-top: 100px;
		padding-bottom: 100px;
		text-align: center;

		.container {
			a {
				height: 320px;
				background-image: url(../img/index/company-bg.webp);
				background-size: cover;
				background-repeat: no-repeat;
				border-radius: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.index-subtitle,
		.index-subtitle span {
			color: var(--white);
		}
	}
}

/**
 * secondary
 */
body.secondary {
	background-color: var(--green-secondary);

	.secondary-subtitle {
		font-size: 3.0rem;
		font-family: var(--ff-maru);
		line-height: 1.6;
		text-align: center;

		span {
			font-size: 1.9rem;
			color: var(--green);
			display: block;
		}
	}

	div.page-hero {
		position: relative;
		height: 380px;
		padding-top: 90px;
		padding-left: 20px;

		@media screen and (min-width: 1080px) {
			padding-left: 40px;
		}

		h1 {
			font-family: var(--ff-maru);
			font-size: 3.3rem;
			line-height: 1.4;
			margin-bottom: 20px;
			position: relative;
			z-index: 2;

			span {
				font-size: 1.9rem;
				display: block;
			}
		}
		p {
			font-size: 2.1rem;
			position: relative;
			z-index: 2;

			@media screen and (min-width: 1080px) {
				width: 380px;
			}
		}

		div.hero-content {
			position: absolute;

			&.hero-01{
				right: 0;
				bottom: 20px;
				z-index: 1;
				max-width: 40%;

				@media screen and (min-width: 1080px) {
					right: 150px;
					bottom: 70px;
					max-width: initial;
				}
			}
			&.hero-02{
				right: 0;
				bottom: 0;
				z-index: -1;

				@media screen and (min-width: 1080px) {
					right: -20px;
				}
			}
		}

		img {
			vertical-align: bottom;
		}
	}
}

/**
 * reform
 */
body.reform {
	.reform-about {
		background-color: var(--mint);
		border-radius: 90px 0 90px 0;
		padding-top: 80px;
		padding-bottom: 40px;

		h2 {
			margin-bottom: 80px;
		}

		> div {
			&::after {
				content: "";
				display: block;
				clear: both;
			}

			.about-image {
				max-width: 500px;
				margin: 0 auto;

				@media screen and (min-width: 1080px) {
					float: left;
					width: 500px;
					max-width: initial;
				}

				> p {
					clip-path: polygon(0 27%, 50% 0%, 100% 27%, 100% 100%, 0% 100%);

					&::before {
						position: absolute;
						inset: 2px;
						content: "";
						width: 100%;
						clip-path: polygon(0 27%, 50% 0%, 100% 27%, 100% 100%, 0% 100%);
						/*background-color: var(--white);*/
						z-index: -1;
					}
				}
			}

			.about-section {
				padding-top: 100px;

				@media screen and (min-width: 1080px) {
					float: right;
					width: 500px;
					margin-left: 100px;
				}

				section {
					margin-bottom: 130px;

					h3 {
						font-size: 2.5rem;
						font-family: var(--ff-maru);
						margin-bottom: 20px;
						color: var(--green);
						line-height: 1.44;
					}
					p {
						font-size: 1.7rem;
						line-height: 1.65;
					}
				}
			}
		}
	}
	.reform-case {
		padding-top: 80px;
		padding-bottom: 90px;

		h2 {
			margin-bottom: 55px;
		}

		nav {
			display: flex;
			margin-bottom: 55px;

			a {
				display: block;
				background-color: var(--white);
				color: var(--blue);
				font-family: var(--ff-maru);
				font-size: 2.2rem;
				flex-basis: calc((100% - 40px) / 3);
				text-align: center;
				border: 1px solid var(--blue);
				border-radius: 10px;
				line-height: 90px;
				transition: ease 0.3s;

				&:nth-of-type(2) {
					margin: 0 20px;
				}

				&.active {
					background-color: var(--blue);
					color: var(--white);
					position: relative;

					&::after {
						content: "";
						display: inline-block;
						border-top: 20px solid var(--blue);
						border-left: 15px solid transparent;
						border-right: 15px solid transparent;
						position: absolute;
						bottom: -20px;
						left: 50%;
						transform: translateX(-50%);
					}
				}
				&:hover {
					background-color: var(--blue);
					color: var(--white);
				}
			}
		}

		ul {
			background-color: var(--white);
			padding: 60px 50px 0;
			display: flex;
			flex-wrap: wrap;

			li {
				flex-basis: 100%;
				margin-bottom: 80px;

				@media screen and (min-width: 1080px) {
					flex-basis: calc((100% - 100px) / 3);
					margin-bottom: 60px;

					&:nth-of-type(3n + 2) {
						margin: 0 50px;
					}
				}

				.image {
					text-align: center;
				}
				.title {
					font-family: var(--ff-maru);
					font-size: 2.2rem;
					line-height: 1.85;
					margin-bottom: 10px;
					text-align: center;

					@media screen and (min-width: 1080px) {
						text-align: left;
					}
				}
				.content {
					font-size: 1.7rem;
					line-height: 1.65;
					font-weight: 500;
				}
			}
		}
	}

	.reform-works {
		background-color: var(--mint);
		border-radius: 90px 0 90px 0;
		padding-top: 100px;
		padding-bottom: 60px;

		h2 {
		}

		section {
			display: flex;
			flex-wrap: wrap;
			padding-top: 60px;
			padding-bottom: 80px;

			> p {
				flex-basis: 100%;

				@media screen and (min-width: 1080px) {
					flex-basis: calc(100% - 420px);
				}
			}
			> div {
				flex-basis: 100%;

				@media screen and (min-width: 1080px) {
					flex-basis: 420px;
				}

				h3 {
					font-size: 2.2rem;
					font-family: var(--ff-maru);
					margin-bottom: 20px;

					span {
						font-size: 1.9rem;
						color: var(--green);
						display: block;
						line-height: 1.1;
					}
				}
				p {
					font-size: 1.7rem;
					font-weight: 500;
					line-height: 1.65;
				}
			}
			> ul {
				flex-basis: 100%;
				display: flex;
				flex-wrap: wrap;
				margin-top: 60px;

				@media screen and (min-width: 1080px) {
					flex-wrap: nowrap;
				}

				li {
					flex-basis: 100%;
					text-align: center;
					margin-bottom: 20px;

					@media screen and (min-width: 1080px) {
						flex-basis: calc(100% - 100px) / 3;
						margin-bottom: 0;
					}

					&:nth-of-type(2) {
						@media screen and (min-width: 1080px) {
							margin: 0 50px;
						}
					}
				}
			}
		}
	}
	.reform-flow {
		padding-top: 90px;
		padding-bottom: 120px;

		h2 {
			margin-bottom: 50px;
		}

		ol {
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;

			li {
				flex-basis: calc((100% - 48px) / 2);
				background-color: var(--white);
				border: 1px solid var(--green);
				border-radius: 20px;
				text-align: center;
				padding-bottom: 40px;
				margin: 0 12px 40px;

				@media screen and (min-width: 1080px) {
					flex-basis: calc((100% - 72px) / 4);
					margin: 0 0 40px 0;

					&:nth-of-type(4n + 2) {
						margin: 0 12px 0 24px;
					}
					&:nth-of-type(4n + 3) {
						margin: 0 24px 0 12px;
					}
				}

				.number {
					color: var(--green);
					font-family: var(--ff-maru);
					font-size: 1.9rem;
					line-height: 60px;
				}
				.image {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 110px;
				}
				.title {
					font-family: var(--ff-maru);
					font-size: 2.0rem;
					line-height: 1.45;
					height: 80px;
				}
				.content {
					text-align: left;
					font-size: 1.7rem;
					font-weight: 500;
					line-height: 1.65;
					padding: 0 20px;
					height: 112px;
				}
			}
		}
	}
}

/**
 * service
 */
body.service {
	background-color: var(--blue-light);

	.footer-contact {
		background-color: var(--green-light);
	}

	.service-section {
		background-color: var(--green-light);
		padding-top: 120px;
		padding-bottom: 50px;
		border-radius: 90px 0 0 0;

		section {
			margin-bottom: 200px;
			position: relative;

			@media screen and (min-width: 1080px) {
				&::after {
					display: block;
					clear: both;
					content: "";
				}

				&:nth-of-type(odd) > div {
					float: right;
				}

				&:nth-of-type(even){
					> p {
						&:nth-of-type(1) {
							top: 20px;
							left: initial;
							right: 0;
						}
						&:nth-of-type(2) {
							left: initial;
							right: 150px;
							/*bottom: -30px;*/
						}
					}
				}
			}

			> div {
				position: relative;
				background-color: var(--green-dark);
				clip-path: polygon(0 25%, 50% 0%, 100% 25%, 100% 100%, 0% 100%);
				margin-bottom: 40px;
				padding: 140px 40px 50px;

				@media screen and (min-width: 1080px) {
					width: 640px;
					padding: 140px 90px 70px;
				}

				&::before {
					position: absolute;
					inset: 2px;
					content: "";
					clip-path: polygon(0 25%, 50% 0%, 100% 25%, 100% 100%, 0% 100%);
					background-color: var(--white);
					z-index: -1;
				}

				h2 {
					font-size: 2.5rem;
					color: var(--green);
					font-family: var(--ff-maru);
					margin-bottom: 16px;
				}
				p {
					font-size: 1.7rem;
					line-height: 1.65;

					&.service-button {
						margin-top: 30px;
					}
				}
			}
			> p {
				position: absolute;
				border-radius: 25px;
				overflow: hidden;

				&:nth-of-type(1) {
					width: 30%;
					top: calc(0px - 3vw);
					right: 10px;

					@media screen and (min-width: 1080px) {
						width: 400px;
						height: 300px;
						right: initial;
						top: 20px;
						left: 0;
					}
				}
				&:nth-of-type(2) {
					width: 25%;
					left: 20px;
					bottom: calc(0px - 15vw);

					@media screen and (min-width: 1080px) {
						width: 350px;
						height: 260px;
						bottom: initial;
						left: 150px;
						top: 370px;
					}
				}

				img {
					vertical-align: bottom;
				}
			}
		}
	}
}

/**
 * company
 */
body.company {
	background-color: var(--silver);

	.footer-contact {
		background-color: var(--green-light);
	}

	.company-message {
		background-color: var(--green-light);
		border-radius: 90px 0 0 0;
		padding-top: 150px;
		padding-bottom: 150px;

		> .container {
			display: flex;
			flex-wrap: wrap;

			> p {
				flex-basis: 100%;
				border-radius: 50px;
				overflow: hidden;
				margin-bottom: 30px;

				@media screen and (min-width: 1080px) {
					flex-basis: 500px;
					height: 600px;
					margin-right: 50px;
					margin-bottom: 0;
				}

				img {
					vertical-align: bottom;
				}
			}
			> div {
				flex-basis: 100%;

				@media screen and (min-width: 1080px) {
					flex-basis: 550px;
				}

				h2 {
					color: var(--green);
					text-align: left;
					font-size: 2.5rem;
					line-height: 1.45;
					margin-bottom: 20px;
				}

				p {
					line-height: 1.65;
					font-size: 1.7rem;
				}
			}
		}
	}
	.company-company {
		background-color: var(--green-light);
		border-radius: 0 0 90px 0;
		padding-bottom: 130px;

		h2 {
			margin-bottom: 40px;
		}
		dl {
			background-color: var(--white);
			padding: 30px 10px;
			display: flex;
			flex-wrap: wrap;
			font-size: 2.0rem;

			@media screen and (min-width: 1080px) {
				padding: 60px 100px 80px;
			}

			dt, dd {
				flex-basis: 100%;

				@media screen and (min-width: 1080px) {
					border-bottom: 2px solid #dfdfdf;
				}
			}
			dt {
				color: var(--green);
				padding: 15px 15px 0;

				@media screen and (min-width: 1080px) {
					flex-basis: 250px;
					padding: 30px 30px;
				}
			}
			dd {
				border-bottom: 2px solid #dfdfdf;
				padding: 0 15px 15px;

				@media screen and (min-width: 1080px) {
					flex-basis: calc(100% - 250px);
					padding: 30px 30px;
				}
			}
		}
	}
	.company-history {
		padding-top: 70px;
		padding-bottom: 200px;
		background-color: var(--mint);
	}
}

/**
 * works
 */
body.works {
	background-color: var(--blue-light2);

	.footer-contact {
		background-color: var(--mint);
	}

	.works-content {
		background-color: var(--mint);
		border-radius: 90px 0 0 0;
		padding-top: 120px;
		padding-bottom: 180px;

		ul.works-list {
			display: flex;
			flex-wrap: wrap;

			li {
				flex-basis: 100%;
				font-size: 1.6rem;
				margin-bottom: 50px;

				@media screen and (min-width: 1080px) {
					flex-basis: calc((100% - 120px) / 3);

					&:nth-of-type(3n + 2) {
						margin-left: 60px;
						margin-right: 60px;
					}
				}

				.works-image {
					height: 250px;
					margin-bottom: 20px;
					position: relative;
					border-radius: 20px;
					overflow: hidden;
				}
				.works-category {
					color: var(--white);
					background-color: var(--green);
					border-radius: 20px 0 0 0;
					line-height: 45px;
					padding: 0 20px;
					display: inline-block;
					position: absolute;
					left: 0;
					top: 0;
				}
				.works-date {
					color: var(--green);
				}
				.works-title {
					font-size: 1.7rem;
					line-height: 1.3;
				}
			}
		}
		ul.works-pagination {
			margin-top: 110px;
			display: flex;
			justify-content: center;
			font-size: 1.7rem;

			li {
				margin: 0 15px;
				flex-basis: 24px;
				height: 24px;
				border-radius: 12px;
				text-align: center;
				line-height: 1.7rem;

				&.arrow {
					background-color: var(--black);
					color: var(--white);
				}

				a {
					color: inherit;
					display: block;
				}
			}
		}
	}
}

/**
 * work
 */
body.work {
	background-color: var(--blue-light2);

	.footer-contact {
		background-color: var(--mint);
	}

	.work-content {
		background-color: var(--mint);
		border-radius: 90px 0 0 0;
		padding-top: 140px;
		padding-bottom: 140px;

		.work-category {
			color: var(--white);
			background-color: var(--green);
			font-size: 1.6rem;
			display: inline-block;
			text-align: center;
			height: 4.8rem;
			line-height: 4.8rem;
			border-radius: 2.4rem;
			padding: 0 30px;
		}
		.work-date {

		}
		h2 {

		}
		.work-content {

		}
		.work-pagination {
			margin-top: 140px;
			display: flex;
			justify-content: center;
			font-size: 1.7rem;

			li {
				margin: 0 15px;

				@media screen and (min-width: 1080px) {
					margin: 0 40px;
				}

				&.arrow {
					a::before,
					a::after {
						display: inline-block;
						background-color: var(--black);
						color: var(--white);
						width: 24px;
						height: 24px;
						border-radius: 12px;
						text-align: center;
						line-height: 1.7rem;
						vertical-align: middle;
					}
				}
				&.prev {
					a::before {
						content: "<";
						margin-right: 5px;
					}
				}
				&.next {
					a::after {
						content: ">";
						margin-left: 5px;
					}
				}
			}
		}
	}
}

/**
 * contact
 */
body.contact {
	background-color: var(--silver);

	.footer-contact {
		background-color: var(--green-light);
	}

	.contact-form {
		background-color: var(--green-light);
		border-radius: 90px 0 0 0;
		padding-bottom: 230px;

		dl {
			padding-top: 110px;
			font-size: 1.9rem;
			font-family: var(--ff-maru);
			margin: 0 auto 110px;

			@media screen and (min-width: 1080px) {
				width: 660px;
			}

			dt, dd {
				padding: 5px 0;
			}
			dt {
				span {
					display: inline-block;
					background-color: #df002c;
					color: var(--white);
					font-size: 1.2rem;
					padding: 0 10px;
					border-radius: 11px;
				}
			}
			dd {
				margin-bottom: 10px;
				input, textarea {
					font-size: inherit;
					line-height: inherit;
					border-radius: 10px;
					border: 1px solid var(--silver);
					width: 100%;
					padding: 5px 20px;
					font-family: inherit;

					&.initial {
						width: initial;
					}

					&.postal {
						width: 12rem;
						margin-right: 1.0rem;
						margin-bottom: 6px;
					}
				}
			}
		}
		.contact-privacy {
			background-color: var(--white);
			margin: 0 auto 40px;
			padding: 30px 20px;
			border-radius: 20px;

			@media screen and (min-width: 1080px) {
				width: 960px;
				padding: 40px 50px;
				margin: 0 auto 110px;
			}

			.title {
				text-align: center;
				font-size: 1.9rem;
				margin-bottom: 20px;
			}
			.content {
				font-size: 1.7rem;
				line-height: 1.65;
				font-weight: 500;
				margin-bottom: 40px;
				overflow-y: scroll;
				max-height: 300px;

				p {
					margin-bottom: 1.5rem;
				}
			}
			.checkbox {
				text-align: center;
			}
		}
		.contact-buttons {
			text-align: center;
		}
	}
}