@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700;900&family=Zen+Kaku+Gothic+New:wght@400;500&display=swap');

:root {
	--primary-color: #0080bf;
	--secondary-color: #fbed20;
	--tertiary-color: #0062dc;
	/*--white-color: #ffffff;*/
	/*--pink-color: #ff83a6;*/
	/*--blue-color: #0072c8;*/
	--font-color: #000000;
	font-size: 10px;
}

@property --count {
	syntax: "<integer>";
	inherits: false;
	initial-value: 0;
}

/**
 * reset
 */
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	position: relative;
	font-weight: 400;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-style: normal;
	font-size: 1.9rem;
	font-weight: 500;
	line-height: 1.5;
	overflow-x: hidden;

	@media screen and (min-width: 1100px) {
		overflow-x: hidden;
		letter-spacing: 2px;
	}
}

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

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

img {
	max-width: 100%;
}

.lg {
	display: none !important;
}
@media screen and (min-width: 1100px) {
	.sp {
		display: none !important;
	}
	.lg {
		display: inline !important;
	}
}

/**
 * common
 */
.p-content {
	margin: 0 4%;

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

section {
	> h2 {
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 1.9rem;

		@media screen and (min-width: 1100px) {
			font-size: 2.2rem;
		}

		span {
			color: var(--primary-color);
			font-weight: 900;
			display: block;
			font-size: 7vw;

			@media screen and (min-width: 1100px) {
				font-size: 7.2rem;
				line-height: 1.0;
			}
		}


	}
}
header {
	position: fixed;
	z-index: 15;
	background-color: #ffffff;
	width: 100%;
	height: 80px;

	@media screen and (min-width: 1100px) {
		height: 155px;
	}

	> div {
		display: flex;
		justify-content: space-between;
		padding: 0 4%;
		box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);

		@media screen and (min-width: 1100px) {
			padding: 0 45px;
		}

		h1, p.title {
			flex-basis: 35%;
			padding: 10px 0;
			max-height: 80px;

			@media screen and (min-width: 1100px) {
				flex-basis: 233px;
				padding: 25px 0 20px;
				max-height: 155px;
			}

			img {
				max-height: 100%;
			}
		}
		p.menu {
			cursor: pointer;
			font-size: 5.0rem;

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

			&.active {
				right: 4%;
				color: #ffffff;
				z-index: 16;
			}
		}
		nav {
			display: none;
			position: fixed;
			top: 0;
			right: 0;
			z-index: 15;
			height: 100%;
			flex-wrap: wrap;
			background-color: #0080be;
			overflow-y: scroll;

			@media screen and (min-width: 1100px) {
				flex-basis: calc(100% - 233px);
				display: flex;
				position: static;
				background-color: transparent;
				height: initial;
				overflow-y: initial;
			}

			ul {
				flex-basis: 100%;
				font-size: 1.75rem;
				font-weight: 600;
				margin-bottom: 15px;

				@media screen and (min-width: 1100px) {
					display: flex;
					justify-content: flex-end;
				}

				&:nth-of-type(1) {
					order: 2;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					align-content: flex-start;

					@media screen and (min-width: 1100px) {
						order: 1;
						flex-wrap: nowrap;
						justify-content: flex-end;
						align-content: initial;
					}

					li {
						margin: 0 4%;
						border-radius: 10px;
						text-align: center;
						transition: ease .4s;

						@media screen and (min-width: 1100px) {
							border-radius: 0 0 10px 10px;
							margin: 0  0 0 10px;
						}

						&.tel {
							text-align: center;
							font-size: 1.6rem;
							position: relative;
							flex-basis: 100%;
							margin-bottom: 10px;

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

							a {
								color: #ffffff;

								@media screen and (min-width: 1100px) {
									display: flex;
									align-items: center;
									padding: 15px 20px 15px 30px;
								}

								> span {
									font-size: 12vw;
									font-weight: 800;

									@media screen and (min-width: 1100px) {
										margin-right: 20px;
										font-size: 4.0rem;
										line-height: 1;
									}

									i {
										font-size: 9.5vw;
										margin-right: 8px;
										@media screen and (min-width: 1100px) {
											display: none;
										}
									}
								}

								> p {
									span {
										margin: 0 1.0rem;
										font-size: 3.5vw;

										@media screen and (min-width: 1100px) {
											display: block;
											margin: 0;
											font-size: inherit;
										}
									}
								}
							}

							@media screen and (min-width: 1100px) {
								background-color: #0080be;
								text-align: left;
								flex-basis: initial;
								margin-bottom: 0;

								&:hover {
									background-color: #fbed20;

									a {
										color: #0080be;
									}
								}

								&::before {
									content: "";
									display: block;
									position: absolute;
									width: 55px;
									height: 65px;
									background-image: url(../img/header-tel.webp);
									left: -23px;
									bottom: 2px;
								}
							}

						}
						&.email {
							background-color: #ffffff;
							flex-basis: 100%;
							margin-bottom: 10px;

							@media screen and (min-width: 1100px) {
								background-color: #fbed20;
								flex-basis: initial;
								font-size: 1.4rem;
								margin-bottom: 0;

								&:hover {
									background-color: #0080be;

									a {
										color: #ffffff;
									}
								}
							}

							a {
								padding: 15px;
								color: #0080be;
								display: flex;
								justify-content: center;
								align-items: center;

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

								i {
									font-size: 4.0rem;
									line-height: 1;
									color: #000000;

									@media screen and (min-width: 1100px) {
										color: inherit;
									}
								}

								> span {
									margin-left: 10px;
									margin-top: 5px;

									@media screen and (min-width: 1100px) {
										display: block;
										margin-left: 0;
										margin-top: 0;
									}

									> span {
										@media screen and (min-width: 1100px) {
											display: none;
										}
									}
								}
							}
						}
						&.line {
							align-self: center;
							background-color: #ffffff;
							flex-basis: 100%;

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

							a {
								color: #0080be;
								padding: 15px;

								display: flex;
								justify-content: center;
								align-items: center;

								@media screen and (min-width: 1100px) {
									color: inherit;
									padding: 0;
									display: block;
								}

								> img {
									width: 4.0rem;

									@media screen and (min-width: 1100px) {
										width: initial;
									}
								}

								> span {
									margin-left: 10px;
									@media screen and (min-width: 1100px) {
										display: none;
									}
								}
							}
						}

						a {
							display: block;
						}
					}
				}

				&:nth-of-type(2) {
					margin-bottom: 0;
					order: 1;
					padding: 30px 0 0;

					@media screen and (min-width: 1100px) {
						order: 2;
						padding: 0;
					}

					li {
						margin-left: 30px;

						a {
							display: block;
							padding: 10px 0;
							transition: ease .4s;
							color: #ffffff;

							@media screen and (min-width: 1100px) {
								color: inherit;
								display: inline-block;
								padding: 0 0 20px 0;

								&:hover {
									border-bottom: 4px solid #0080be;
									padding-bottom: 16px;
									color: inherit;
								}
							}
						}
					}
				}
			}
		}
	}
}
body > div.main,
body > main {
	padding-top: 80px;

	@media screen and (min-width: 1100px) {
		padding-top: 155px;
	}
}
footer {
	padding-top: 50px;
	padding-bottom: 20vw;
	background-color: #0080be;

	@media screen and (min-width: 1100px) {
		padding-top: 90px;
		padding-bottom: 0;
	}

	> p.contact {
		font-family: "Zen Maru Gothic", sans-serif;
		text-align: center;
		margin: 0 auto;
		color: #ffffff;
		margin-bottom: 30px;
		position: relative;

		@media screen and (min-width: 1100px) {
			width: 380px;
			font-size: 2.2rem;
		}

		&::before, &::after {
			content: "";
			display: inline-block;
			position: absolute;
			top: 20px;
			width: 0;
			height: 0;
			background-repeat: no-repeat;
			background-size: 100% auto;

			@media screen and (min-width: 1100px) {
				width: 79px;
				height: 48px;
			}
		}
		&::before {
			background-image: url(../img/contact-before.webp);

			@media screen and (min-width: 1100px) {
				left: -90px;
			}
		}
		&::after {
			background-image: url(../img/contact-after.webp);

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

		span {
			font-weight: 900;
			display: block;
			font-size: 3.2rem;

			@media screen and (min-width: 1100px) {
				font-size: 7.2rem;
				line-height: 1.0;
			}
		}
	}
	ul.contact-list {
		margin: 0 4%;
		display: flex;
		flex-wrap: wrap;

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

		li {
			flex-basis: 100%;
			margin-bottom: 25px;
			background-color: #ffffff;
			border-radius: 20px;
			font-family: "Zen Maru Gothic", sans-serif;
			font-size: 2.0rem;
			font-weight: 800;
			transition: ease .4s;
			position: relative;

			@media screen and (min-width: 1100px) {
				flex-basis: calc((100% - 20px) / 2);
				font-size: 2.4rem;
			}

			&:nth-of-type(1) {
				flex-basis: 100%;
				background-color: #fbed20;
				font-family: "Zen Kaku Gothic New", sans-serif;
				font-weight: 600;

				@media screen and (min-width: 1100px) {
					&::after {
						content: "";
						display: block;
						width: 112px;
						height: 131px;
						background-image: url(../img/footer-tel.webp);
						position: absolute;
						right: -70px;
						top: 8px;
					}
				}

				&:hover {
					background-color: #004ebe;

					a {
						color: #fbed20;
					}
				}

				a {
					color: #0080bf;

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

					span {
						font-size: 7vw;
						font-weight: 800;
						line-height: 6.0rem;
						letter-spacing: 6px;
						flex-basis: 100%;
						text-align: center;

						@media screen and (min-width: 1100px) {
							font-size: 8.0rem;
							flex-basis: unset;
							text-align: left;
						}

						i {
							line-height: 1;

							@media screen and (min-width: 1100px) {
								font-size: 6.0rem;
							}
						}
					}
					p {
						flex-basis: 100%;
						text-align: center;

						@media screen and (min-width: 1100px) {
							margin-left: 30px;
							flex-basis: unset;
							font-size: 2.3rem;
							text-align: left;
						}
					}
				}
			}

			&:nth-of-type(2) {
				@media screen and (min-width: 1100px) {
					margin-right: 20px;
				}
			}

			&:hover {
				background-color: #fbed20;
			}

			a {
				display: flex;
				flex-wrap: wrap;
				color: #0080bf;
				align-items: center;
				justify-content: center;
				padding: 20px 40px;
				min-height: 98px;

				@media screen and (min-width: 1100px) {
					justify-content: normal;
				}

				img {
					margin-right: 10px;

					@media screen and (min-width: 1100px) {
						margin-right: 40px;
					}
				}
			}
		}
	}
	ul.link {
		margin: 0 4%;
		display: flex;
		flex-wrap: wrap;

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

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

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

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

			a {
				flex-basis: 100%;
				border-radius: 10px;
				border: 2px solid #ffffff;
				display: block;
				text-align: center;
				color: #ffffff;
				align-content: center;
				padding: 15px 0;
				font-size: 2.1rem;
				font-weight: 600;

				img {
					width: 45px;
					margin-right: 15px;
					vertical-align: middle;
				}
			}
		}
	}
	ul.nav {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #d2f1f2;
		padding: 2%;
		display: flex;
		z-index: 20;

		li {
			flex-basis: calc(100% - 4% / 3);

			a {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: flex-end;
				height: 100%;
				color: #ffffff;
				text-align: center;
				border-radius: 10px;
				padding: 1vw;
				font-size: 3vw;

				i, img {
					line-height: 1;
				}

				span {
					flex-basis: 100%;
				}
			}

			&.tel {
				a {
					background-color: #0080be;
					i {
						font-size: 6vw;
					}
				}
			}
			&.email {
				margin: 0 2%;

				a {
					background-color: #00b3be;

					i {
						font-size: 8vw;
					}
				}
			}
			&.line {
				a {
					background-color: #ffffff;
					color: #000000;

					img {
						width: 8vw;
					}
				}
			}
		}

		@media screen and (min-width: 1100px) {
			display: none;
		}
	}
	p.copy {
		padding: 30px 0;
		text-align: center;
		color: #ffffff;
		font-size: 1.6rem;
	}
}

/**
 * index
 */
div.index-visual {
	background-image: url(../img/bg-check.webp);
	background-repeat: repeat;
	position: relative;
	min-height: calc(100vw * 0.9);

	@media screen and (min-width: 768px) {
		min-height: calc(100vw * 0.40);
	}

	@media screen and (min-width: 1100px) {
		/*min-height: 544px;*/
	}

	ul.slide {
		margin: 0 auto;
		padding: 32px 0;
		position: relative;
		min-height: calc(100vw * 0.9);

		@media screen and (min-width: 768px) {
			min-height: calc(100vw * 0.40);
		}

		@media screen and (min-width: 1100px) {
			display: block;
			width: 100%;
			max-width: 1340px;
			max-height: 544px;
		}

		&::after {
			content: "";
			display: block;
			width: 40vw;
			height: calc(40vw * 0.4);
			background-image: url(../img/visual-icon.webp);
			background-size: 100% auto;
			background-repeat: no-repeat;
			position: absolute;
			bottom: -30px;
			left: 0;
			z-index: 6;

			@media screen and (min-width: 768px) {
				width: 25vw;
				height: calc(25vw * 0.4);
			}

			@media screen and (min-width: 1100px) {
				width: 300px;
				height: 120px;
			}
		}

		li {
			position: absolute;
			z-index: 1;

			@media screen and (min-width: 1100px) {
				z-index: 0;
			}

			&:nth-of-type(1) {
				width: calc(91vw / 3);
				height: calc(91vw / 3 * 0.573);
				top: calc(100vw * 0.03);
				left: 3vw;

				@media screen and (min-width: 1100px) {
					/*top: 32px;*/
					/*left: 0;*/
				}
			}
			&:nth-of-type(2) {
				width: calc(91vw / 3);
				height: calc(91vw / 3 * 0.573);
				top: calc(100vw * 0.03);
				left: 50%;
				transform: translateX(-50%);

				@media screen and (min-width: 1100px) {
					/*top: 32px;*/
					/*left: 452px;*/
					/*transform: unset;*/
				}
			}
			&:nth-of-type(3) {
				width: calc(91vw / 3);
				height: calc(91vw / 3 * 0.573);
				top: calc(100vw * 0.03);
				right: 3vw;

				@media screen and (min-width: 1100px) {
					/*top: 32px;*/
					/*left: 904px;*/
					/*right: unset;*/
				}
			}
			&:nth-of-type(4) {
				left: 3vw;
				width: calc(94vw / 2 - 1.5vw);
				top: calc(91vw / 3 * 0.572 + 100vw * 0.04);

				@media screen and (min-width: 768px) {
					width: calc(91vw / 4);
					top: unset;
					bottom: calc(100vw * 0.015);
				}

				@media screen and (min-width: 1100px) {
					/*top: 300px;*/
					/*left: 0;*/
					/*bottom: unset;*/
				}
			}
			&:nth-of-type(5) {
				right: 3vw;
				width: calc(94vw / 2 - 1.5vw);
				top: calc(91vw / 3 * 0.572 + 100vw * 0.04);

				@media screen and (min-width: 768px) {
					width: calc(91vw / 4);
					top: unset;
					right: unset;
					left: calc(91vw / 4 + 4vw);
					bottom: calc(100vw * 0.015);
				}

				@media screen and (min-width: 1100px) {
					/*top: 300px;*/
					/*left: 342px;*/
					/*bottom: unset;*/
				}
			}
			&:nth-of-type(6) {
				width: calc(94vw / 2 - 1.5vw);
				left: 3vw;
				top: calc((91vw / 3 * 0.572 + 100vw * 0.04) + ((94vw / 2 - 1.5vw) * 0.701 + 100vw * 0.016));

				@media screen and (min-width: 768px) {
					width: calc(91vw / 4);
					top: unset;
					left: unset;
					right: calc(91vw / 4 + 3vw);
					bottom: calc(100vw * 0.015);
				}

				@media screen and (min-width: 1100px) {
					/*top: 300px;*/
					/*left: 682px;*/
					/*right: unset;*/
					/*bottom: unset;*/
				}
			}
			&:nth-of-type(7) {
				right: 3vw;
				width: calc(94vw / 2 - 1.5vw);
				top: calc((91vw / 3 * 0.572 + 100vw * 0.04) + ((94vw / 2 - 1.5vw) * 0.701 + 100vw * 0.016));

				@media screen and (min-width: 768px) {
					width: calc(91vw / 4);
					top: unset;
					bottom: calc(100vw * 0.015);
				}

				@media screen and (min-width: 1100px) {
					/*top: 300px;*/
					/*left: 1020px;*/
					/*right: unset;*/
					/*bottom: unset;*/
				}
			}
		}
	}

	ul.image {

		@media screen and (min-width: 1100px) {
			padding: 0;
		}

		li {
			img {
				position: absolute;
				z-index: 2;
			}

			&:nth-of-type(1) img {
				left: 50%;
				top: 50%;
				width: 80%;
				/*transform: translate(-50%, -110%);*/
				transform: translate(-50%, -50%);

				@media screen and (min-width: 768px) {
					width: 50%;
					/*transform: translate(-50%, -90%);*/
				}

				@media screen and (min-width: 1100px) {
					width: unset;
					/*transform: translate(-60%, -50%);*/
				}
			}
			&:nth-of-type(2) img {
				left: 50%;
				top: 50%;
				width: 25%;
				transform: translate(-100%, 5%);

				@media screen and (min-width: 768px) {
					width: 13%;
					transform: translate(-90%, 13%);
				}

				@media screen and (min-width: 1100px) {
					width: unset;
					transform: translate(190%, -50%);
				}
			}
			&:nth-of-type(3) img {
				left: 50%;
				top: 50%;
				width: 25%;
				transform: translate(10%, 5%);

				@media screen and (min-width: 768px) {
					width: 13%;
					transform: translate(20%, 13%);
				}

				@media screen and (min-width: 1100px) {
					width: unset;
					transform: translate(300%, -50%);
				}
			}
		}
	}
}
section.index-works {
	margin-bottom: 115px;
	padding-top: 120px;

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

	h2 {
		margin: 0 auto 90px;
		position: relative;
		text-align: center;

		@media screen and (min-width: 1100px) {
			width: 280px;
			text-align: left;
		}

		&::before, &::after {
			content: "";
			display: inline-block;
			position: absolute;
			top: 0;
			background-size: 100% auto;
			background-repeat: no-repeat;
		}
		&::before {
			background-image: url(../img/works-before.webp);
			left: 50%;
			transform: translateX(-24vw);
			width: 10vw;
			height: calc(10vw * 1.368);

			@media screen and (min-width: 1100px) {
				left: -110px;
				width: 95px;
				height: 130px;
				transform: initial;
			}
		}
		&::after {
			background-image: url(../img/works-after.webp);
			right: 50%;
			transform: translateX(28vw);
			top: 10px;
			width: 14vw;
			height: calc(14vw * 0.757);

			@media screen and (min-width: 1100px) {
				right: -130px;
				top: 10px;
				width: 132px;
				height: 100px;
				transform: initial;
			}
		}
	}
	> ul {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 40px;
		padding: 0 4%;

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

		li {
			flex-basis: 100%;
			border-radius: 25px;
			text-align: center;
			color: #ffffff;
			font-size: 3.3rem;
			font-weight: 600;
			margin-bottom: 40px;

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

			&:nth-of-type(1) {
				background-color: #0080be;
			}
			&:nth-of-type(2) {
				background-color: #0062dc;

				@media screen and (min-width: 1100px) {
					margin: 0 30px;
				}
			}
			&:nth-of-type(3) {
				background-color: #00b3be;
			}

			&:hover {
				p.image {
					img {
						transform: scale(1.1);
					}
				}
				p.title {
					img {
						right: -10px;
					}
				}
			}

			a {
				display: block;
				padding: 50px 0 40px;

				p.image {
					margin: 0 auto 40px;
					width: 271px;
					height: 271px;
					border-radius: 135px;
					overflow: hidden;

					img {
						transition: ease .4s;
					}
				}
				p.title {
					img {
						position: relative;
						right: 0;
						transition: ease .4s;
					}
				}
			}
		}
	}
	> p {
		text-align: center;
		a {
			display: inline-block;
			background-color: #15289e;
			color: #ffffff;
			border-radius: 40px;
			height: 80px;
			font-size: 2.0rem;
			font-weight: 600;
			line-height: 80px;
			padding: 0 70px;
			position: relative;
			top: 6px;
			right: -4px;
			z-index: 1;

			@media screen and (min-width: 1100px) {
				font-size: 2.4rem;
			}

			&::after {
				content: "";
				width: 100%;
				height: 100%;
				top: -6px;
				left: -4px;
				background-color: #0080be;
				border-radius: 40px;
				position: absolute;
				z-index: 0;
				transition: ease .4s;
			}

			span {
				position: relative;
				top: -6px;
				left: -4px;
				z-index: 2;
				transition: ease .4s;
			}

			&:hover {
				&::after {
					top: 0;
					left: 0;
				}
				span {
					top: 0;
					left: 0;
				}
			}
		}
	}
}
section.index-reason {
	counter-reset: section;
	padding-bottom: 20px;
	background-image: url(../img/reason-bg.webp);
	background-repeat: no-repeat;
	background-position: center top;

	h2 {
		margin: 0 auto;
		padding: 170px 4% 0;
		margin-bottom: 110px;
		position: relative;
		text-align: center;

		@media screen and (min-width: 1100px) {
			width: 652px;
			padding: 170px 0 0;
		}

		&::before,
		&::after {
			display: block;
			content: "";
			position: absolute;
			background-repeat: no-repeat;
			background-size: 100% auto;
		}
		&::before {
			background-image: url(../img/reason-before.webp);
			width: 15vw;
			height: calc(15vw * 1.04);
			left: 1vw;
			bottom: -20px;

			@media screen and (min-width: 1100px) {
				width: 150px;
				height: 156px;
				left: -160px;
			}
		}
		&::after {
			background-image: url(../img/reason-after.webp);
			width: 10vw;
			height: calc(10vw * 1.18);
			right: 3vw;
			bottom: -10px;

			@media screen and (min-width: 1100px) {
				width: 100px;
				height: 118px;
				right: -110px;
				bottom: 10px;
			}
		}

		img {
			max-width: 70vw;

			@media screen and (min-width: 1100px) {
				max-width: initial;
			}
		}
	}
	> section {
		display: flex;
		flex-wrap: wrap;
		counter-increment: section;
		margin-bottom: 100px;

		> div {
			flex-basis: 100%;
			background-image: url(../img/bg-dot.webp);
			background-position: left 8px top 18.0vw;
			background-repeat: repeat-x;
			margin-right: 4px;
			margin-bottom: 30px;

			@media screen and (min-width: 1100px) {
				flex-basis: 776px;
				margin-bottom: 0;
				background-position: left 8px top 135px;
			}

			h3 {
				background-image: url(../img/reason-section.webp);
				background-repeat: no-repeat;
				background-position: top left;
				background-size: auto 20vw;
				position: relative;
				color: #0080bf;
				font-family: "Zen Maru Gothic", sans-serif;
				font-size: 5vw;
				font-weight: 800;
				line-height: 1.4;
				padding-left: 16vw;
				padding-top: 2.5vw;
				padding-bottom: 32px;
				min-height: 22vw;
				align-content: center;
				margin-bottom: 30px;

				@media screen and (min-width: 1100px) {
					font-size: 3.6rem;
					background-size: initial;
					padding-left: 120px;
					padding-top: 18px;
					min-height: 148px;
				}

				&::before, &::after {
					position: absolute;
				}
				&::before {
					content: "理由";
					font-size: 3.5vw;
					left: 3.5vw;
					top: 1.5vw;

					@media screen and (min-width: 1100px) {
						left: 32px;
						top: 18px;
						font-size: 1.8rem;
					}
				}
				&::after {
					content: counter(section);
					font-size: 6.2vw;
					left: 5.5vw;
					top: 5.0vw;

					@media screen and (min-width: 1100px) {
						font-size: 5.2rem;
						left: 40px;
						top: 32px;
					}
				}
			}
			p {
				padding-right: 1.0rem;
			}
		}
		> p.image {
			flex-basis: 100%;
			overflow: hidden;
			text-align: center;

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

			img {
				border-radius: 30px;
			}
		}
		> section {
			margin-top: 40px;
			position: relative;

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

			h4 {
				font-family: "Zen Maru Gothic", sans-serif;
				font-weight: 800;
				font-size: 2.4rem;
				color: #0080bf;
				text-align: center;

				@media screen and (min-width: 1100px) {
					text-align: left;
					font-size: 3.4rem;
					position: absolute;
					top: -130px;
					left: -45px;
				}

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

				img {
					display: none;
					@media screen and (min-width: 1100px) {
						display: inline;
					}
				}
			}
			ul {
				display: flex;
				flex-wrap: wrap;

				li {
					flex-basis: 100%;
					margin-bottom: 80px;
					margin-right: 30px;
					padding: 30px;
					border-radius: 30px;
					position: relative;

					@media screen and (min-width: 1100px) {
						flex-basis: calc((100% - 50px) / 2);
						padding: 90px 100px;
						min-height: 421px;
						margin-bottom: 40px;
						margin-right: 0;
						background-repeat: no-repeat;
						background-position: center top 5px;
						font-size: 1.9rem;

						&:nth-of-type(odd) {
							margin-right: 50px;
							background-image: url(../img/voice-bg-01.webp);
						}
						&:nth-of-type(even) {
							background-image: url(../img/voice-bg-02.webp);
						}
					}

					&::after {
						content: "";
						position: absolute;
						right: -40px;
						bottom: -50px;
						width: 18vw;
						height: 18vw;
						background-repeat: no-repeat;
						background-size: 100% auto;

						@media screen and (min-width: 678px) {
							bottom: -40px;
							width: 12vw;
							height: 12vw;
						}

						@media screen and (min-width: 1100px) {
							width: 162px;
							height: 165px;
							right: -20px;
							bottom: 0;
						}
					}

					&:nth-of-type(1) {
						background-color: #fbed20;

						@media screen and (min-width: 1100px) {
							background-color: transparent;
						}

						&::after {
							background-image: url(../img/voice-01-sm.webp);
						}
					}
					&:nth-of-type(2) {
						background-color: #b1e8ea;

						@media screen and (min-width: 1100px) {
							background-color: transparent;
						}

						&::after {
							background-image: url(../img/voice-02-sm.webp);
						}
					}
					&:nth-of-type(3) {
						background-color: #fbed20;

						@media screen and (min-width: 1100px) {
							background-color: transparent;
						}

						&::after {
							background-image: url(../img/voice-03-sm.webp);
						}
					}
					&:nth-of-type(4) {
						background-color: #b1e8ea;

						@media screen and (min-width: 1100px) {
							background-color: transparent;
						}

						&::after {
							background-image: url(../img/voice-04-sm.webp);
						}
					}
				}
			}
		}
	}
}
section.index-staff {
	background-image: url(../img/bg-check.webp);
	background-repeat: repeat;
	padding-top: 80px;
	padding-bottom: 100px;

	@media screen and (min-width: 1100px) {
		padding-top: 130px;
		padding-bottom: 160px;
	}

	h2 {
		margin: 0 auto;
		position: relative;
		margin-bottom: 80px;
		text-align: center;

		@media screen and (min-width: 1100px) {
			width: 230px;
			margin-bottom: 120px;
			text-align: left;
		}

		&::before, &::after {
			content: "";
			display: inline-block;
			position: absolute;
			top: 0;
			background-size: 100% auto;
			background-repeat: no-repeat;
		}
		&::before {
			background-image: url(../img/staff-before.webp);
			left: 50%;
			transform: translateX(-24vw);
			width: 10vw;
			height: calc(10vw * 1.368);

			@media screen and (min-width: 1100px) {
				left: -110px;
				width: 95px;
				height: 130px;
				transform: initial;
			}
		}
	}

	> section {
		margin-bottom: 50px;
		background-color: #ffffff;
		border-radius: 20px;
		padding: 30px;
		box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);
		display: flex;
		flex-wrap: wrap;
		position: relative;

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

		&:nth-of-type(1) {
			&::before {
				content: "";
				position: absolute;
				display: block;
				background-image: url(../img/staff-icon.webp);
				background-size: 100% auto;
				background-repeat: no-repeat;
				width: 40vw;
				height: calc(40vw * 0.6);
				right: 0;
				top: -45px;

				@media screen and (min-width: 768px) {
					width: 30vw;
					height: calc(30vw * 0.6);
					top: -85px;
				}

				@media screen and (min-width: 1100px) {
					width: 360px;
					height: 216px;
					right: -25px;
				}
			}
		}

		> p {
			flex-basis: 100%;
			text-align: center;

			@media screen and (min-width: 1100px) {
				flex-basis: 284px;
			}
		}
		> div {
			flex-basis: 100%;
			padding-top: 10px;

			@media screen and (min-width: 1100px) {
				flex-basis: calc(100% - 284px);
				padding-left: 50px;
			}

			h3 {
				font-family: "Zen Maru Gothic", sans-serif;
				font-weight: 800;
				font-size: 2.4rem;
				color: #0080bf;
				margin-bottom: 30px;
				text-align: center;

				@media screen and (min-width: 1100px) {
					text-align: left;
					font-size: 3.3rem;
				}
			}
			dl {
				display: flex;
				flex-wrap: wrap;

				dt, dd {
					margin-bottom: 15px;

					&.message {
						flex-basis: 100%;
					}
				}
				dt {
					flex-basis: 100%;
					font-family: "Zen Maru Gothic", sans-serif;
					font-weight: 600;
					font-size: 2.0rem;
					color: #0080bf;

					@media screen and (min-width: 1100px) {
						flex-basis: 250px;
						font-size: 2.3rem;
					}

					&.message {
						margin-top: 15px;
						margin-bottom: 0;
					}
				}
				dd {
					flex-basis: 100%;
					font-size: 1.9rem;

					@media screen and (min-width: 1100px) {
						flex-basis: calc(100% - 250px);
						font-size: 2.2rem;
					}

					&.message {
						font-size: 1.9rem;
						background-color: #fff;
						background-image: linear-gradient(90deg, transparent 0%, transparent 40%, #fff 40%, #fff 100%), /* 点線1の色 */
							linear-gradient(180deg, #b5b5b5 2px, transparent 2px); /* 点線2の色と太さ */
						background-size: 8px 100%, /* 点線1のサイズ */
							100% 5.8rem; /* 点線2のサイズ */
						line-height: 5.8rem; /* 文字の高さ */
						background-position: top -3px left;
						/*padding-bottom: 1px;*/
					}
				}
			}
		}
	}
}
section.index-news {
	padding-top: 100px;
	padding-bottom: 100px;

	@media screen and (min-width: 1100px) {
		padding-top: 170px;
		padding-bottom: 150px;
	}

	h2 {
		text-align: center;
		margin: 0 auto;
		position: relative;
		margin-bottom: 50px;

		@media screen and (min-width: 1100px) {
			width: 220px;
			text-align: left;
		}

		&::before, &::after {
			content: "";
			display: inline-block;
			position: absolute;
			top: 0;
			background-size: 100% auto;
			background-repeat: no-repeat;
		}
		&::before {
			background-image: url(../img/staff-before.webp);
			left: 50%;
			transform: translateX(-24vw);
			width: 10vw;
			height: calc(10vw * 1.368);

			@media screen and (min-width: 1100px) {
				left: -110px;
				width: 95px;
				height: 130px;
				transform: initial;
			}
		}
	}
	ul {
		margin-bottom: 85px;

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

		li {
			padding: 30px 0;
			border-bottom: 2px dotted #b5b5b5;

			@media screen and (min-width: 1100px) {
				padding: 45px 60px 45px 20px;
			}

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

			a {
				display: flex;
				flex-wrap: wrap;

				> p {
					flex-basis: 100%;
					overflow: hidden;
					margin-bottom: 20px;
					text-align: center;

					@media screen and (min-width: 1100px) {
						flex-basis: 312px;
						min-height: 240px;
						margin-bottom: 0;
						text-align: left;
					}

					img {
						border-radius: 20px;
					}
				}
				> div {
					flex-basis: 100%;

					@media screen and (min-width: 1100px) {
						flex-basis: calc(100% - 312px);
						padding: 25px 35px;
					}

					p.date {
						color: #0080bf;
						font-size: 2.0rem;
						font-weight: 600;
						margin-bottom: 15px;
					}
				}
			}
		}
	}
	> p {
		text-align: center;
		a {
			display: inline-block;
			background-color: #15289e;
			color: #ffffff;
			border-radius: 40px;
			height: 80px;
			font-size: 2.0rem;
			font-weight: 600;
			line-height: 80px;
			padding: 0 80px;
			position: relative;
			top: 6px;
			right: -4px;
			z-index: 1;

			@media screen and (min-width: 1100px) {
				font-size: 2.4rem;
				padding: 0 130px;
			}

			&::after {
				content: "";
				width: 100%;
				height: 100%;
				top: -6px;
				left: -4px;
				background-color: #0080be;
				border-radius: 40px;
				position: absolute;
				z-index: 0;
				transition: ease .4s;
			}

			span {
				position: relative;
				top: -6px;
				left: -4px;
				z-index: 2;
				transition: ease .4s;
			}
			img {
				position: relative;
				z-index: 2;
				top: -3px;
				right: -10px;
				transition: ease .4s;

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

			&:hover {
				&::after {
					top: 0;
					left: 0;
				}
				span {
					top: 0;
					left: 0;
				}
				img {
					top: 3px;
					right: -14px;

					@media screen and (min-width: 1100px) {
						right: -94px;
					}
				}
			}
		}
	}
}
section.index-company {
	padding-top: 100px;
	padding-bottom: 100px;
	background-color: #daf3f4;

	@media screen and (min-width: 1100px) {
		padding-top: 190px;
		padding-bottom: 200px;
	}

	h2 {
		margin: 0 auto;
		position: relative;
		margin-bottom: 110px;
		text-align: center;

		@media screen and (min-width: 1100px) {
			width: 320px;
			text-align: left;
		}

		&::before, &::after {
			content: "";
			display: inline-block;
			position: absolute;
			background-size: 100% auto;
			background-repeat: no-repeat;
		}
		&::before {
			background-image: url(../img/staff-before.webp);
			top: 0;
			left: 50%;
			transform: translateX(-28vw);
			width: 10vw;
			height: calc(10vw * 1.368);

			@media screen and (min-width: 1100px) {
				left: -110px;
				width: 95px;
				height: 130px;
				transform: initial;
			}
		}
		&::after {
			background-image: url(../img/company-icon.webp);
			bottom: -140px;
			right: 2vw;
			width: 30vw;
			height: calc(30vw * 0.584);

			@media screen and (min-width: 768px) {
				bottom: -160px;
			}

			@media screen and (min-width: 1100px) {
				top: 30px;
				left: -410px;
				width: 260px;
				height: 152px;
			}
		}
	}
	dl {
		background-color: #ffffff;
		border: 2px solid #2190c6;
		border-radius: 30px;
		display: flex;
		flex-wrap: wrap;
		line-height: 2.0;

		@media screen and (min-width: 1100px) {
			font-size: 2.1rem;
		}

		dt, dd {
		}
		dt {
			flex-basis: 100%;
			align-content: center;
			border-top: 2px dotted #e1e1e1;
			padding: 30px 30px 0;

			&:nth-of-type(1) {
				border-top: none;
			}

			@media screen and (min-width: 1100px) {
				flex-basis: 280px;
				text-align: center;
				padding: 30px 40px;
			}
		}
		dd {
			flex-basis: 100%;
			padding: 0 30px 30px calc(30px + 2rem);

			@media screen and (min-width: 1100px) {
				flex-basis: calc(100% - 280px);
				border-left: 2px solid #2190c6;
				padding: 30px 40px;
				border-top: 2px dotted #e1e1e1;

				&:nth-of-type(1) {
					border-top: none;
				}
			}

			iframe {
				width: 100%;
				margin-top: 20px;
			}
		}
	}
}

/**
 * secondary
 */
main.secondary {
	h1 {
		font-size: 2.3rem;
		text-align: center;
		background-image: url(../img/bg-check.webp);
		padding: 90px 0 80px;
		font-family: "Zen Maru Gothic", sans-serif;
		font-weight: 600;

		span {
			font-size: 7.2rem;
			color: #0080bf;
			display: block;
			line-height: 1.2;
			font-weight: 800;
		}
	}
}

/**
 * archives
 */
main.archives {
	padding-bottom: 170px;

	nav {
		padding-top: 130px;

		ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;

			li {
				text-align: center;
				flex-basis: calc(40%);
				font-size: 1.8rem;
				margin: 0 10px 10px;

				@media screen and (min-width: 1100px) {
					flex-basis: 200px;
					margin: 0 10px;
				}

				a {
					padding: 10px 0;
					display: block;
					border-radius: 25px;
					border: 1px solid #717171;
					color: #717171;
				}

				&.active {
					a {
						color: #000000;
						background-color: #fbed20;
						border-color: #fbed20;
					}
				}
			}
		}
	}
	> ul {
		display: flex;
		flex-wrap: wrap;
		margin-top: 90px;

		li {
			flex-basis: 100%;
			box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);
			border-radius: 20px;
			margin-bottom: 50px;

			@media screen and (min-width: 768px) {
				flex-basis: calc(48%);

				&:nth-of-type(odd) {
					margin-right: 2%;
				}
				&:nth-of-type(even) {
					margin-left: 2%;
				}
			}

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

				&:nth-of-type(odd) {
					margin-right: 0;
				}
				&:nth-of-type(even) {
					margin-left: 0;
				}
				&:nth-of-type(3n+2) {
					margin: 0 30px 50px;
				}
			}

			a {
				p.image {
					height: 350px;
					margin-bottom: 25px;
					overflow-y: hidden;
					border-radius: 20px 20px 0 0;
					text-align: center;

					img {
						
					}
				}
				> div {
					display: flex;
					align-items: center;
					padding: 0 15px 0 20px;
					margin-bottom: 25px;

					p.date {
						font-size: 1.8rem;
						color: #0080bf;
						margin-right: 15px;
						font-weight: 800;
					}
					p.category {
						font-size: 1.3rem;
						color: #ffffff;
						border-radius: 15px;
						text-align: center;
						flex-basis: 80px;
						font-weight: 600;
						padding: 5px 10px;
						margin: 0 2px;

						&.category_1 {
							background-color: #0080be;
							flex-basis: 130px;
						}
						&.category_2 {
							background-color: #0062dc;
							flex-basis: 70px;
						}
						&.category_3 {
							background-color: #00b3be;
						}
					}
				}
				p.title {
					padding: 0 30px 40px;
				}
			}
		}
	}
	> ol.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 30px;

		li {
			margin: 0 5px;
			text-align: center;

			a {
				min-width: 40px;
				min-height: 40px;
				line-height: 40px;
				border: 1px solid #717171;
				color: #717171;
				display: block;

				&.active {
					border: 1px solid #0080bf;
					color : #0080bf;
					background-color: #c2e1ef;
				}
			}
		}
	}
}
main.archive {
	padding-bottom: 190px;

	> section {
		padding-top: 80px;

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

		h2 {
			text-align: center;
			font-size: 2.4rem;
			color: #0080bf;
			margin-bottom: 60px;

			@media screen and (min-width: 1100px) {
				font-size: 3.4rem;
			}
		}

		div.content {
			margin: 0 4%;

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

		ul {
			padding-top: 80px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;

			li {
				margin: 0 15px 30px;
				font-size: 2.05rem;

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

				a {
					display: block;
					text-align: center;
					border-radius: 45px;
					background-color: #15289e;
					color: #ffffff;
					position: relative;
					top: 6px;
					right: -4px;
					z-index: 1;
					padding: 20px 0;

					@media screen and (min-width: 1100px) {
						min-width: 220px;
						min-height: 80px;
						line-height: 80px;
						padding: 0;
					}

					&::after {
						content: "";
						width: 100%;
						height: 100%;
						top: -6px;
						left: -4px;
						background-color: #0080be;
						border-radius: 40px;
						position: absolute;
						z-index: 0;
						transition: ease .4s;
					}

					span {
						position: relative;
						top: -6px;
						left: -4px;
						z-index: 2;
						transition: ease .4s;
					}
					img {
						position: relative;
						z-index: 2;
						top: -3px;
						transition: ease .4s;
					}
				}

				&.list {
					order: 3;

					@media screen and (min-width: 1100px) {
						order: 2;
					}

					a {
						min-width: 350px;

						&::after {
							background-color: #0062dc;
						}
					}
				}
				&.prev {
					order: 1;
					flex-basis: 40%;

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

					a img {
						left: -15px;
					}
				}
				&.next {
					order: 2;
					flex-basis: 40%;

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

					a img {
						right: -15px;
					}
				}
			}
		}
	}
}