@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Roboto&family=Noto+Sans&family=Zen+Maru+Gothic:wght@400;500&family=Zen+Maru+Gothic:wght@400;700;900&family=Shippori+Mincho&display=swap');

:root {
	--primary-color: #30489a;
	--secondary-color: #e6f7ff;
	--tertiary-color: #d5d5d5;
	/*--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 Maru Gothic", sans-serif;
	font-style: normal;
	font-size: 1.9rem;
	line-height: 1.0remm;
	overflow-x: hidden;

	@media screen and (min-width: 1100px) {
		overflow-x: unset;
		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
 */
.font-bungee {
	font-family: "Bungee", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.container {
	width: 100%;
	margin: 0 auto;
	padding: 0 4%;

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

.container2 {
	width: 100%;
	margin: 0 auto;
	padding: 0 4%;

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

@keyframes wave {
	from {
		background-position: 1400px top;
	}
	to {
		background-position: 0 top;
	}
}

header {
	z-index: 10;
	width: 100%;
	display: flex;
	justify-content: space-between;

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

	> h1, > p.title {
		flex-basis: 40%;
		padding: 20px 4%;
		align-self: center;

		@media screen and (min-width: 1000px) {
			flex-basis: 300px;
			padding: 40px 0 0 50px;
		}
	}
	> p.nav {
		flex-basis: 70px;
		padding: 20px 4%;

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

		button {
			background-color: #0da4ff;
			border: none;
			color: #ffffff;
			border-radius: 10px;
			cursor: pointer;
			position: static;
			z-index: 10;
			right: 4%;

			&.active {
				background-color: #ffffff;
				color: #0da4ff;
			}

			i {
				font-size: 4.4rem;
			}
		}
	}
	> nav {
		display: none;
		padding: 9.5rem 4% 0;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-color: #0da4ff;
		background-image: url(../img/menu-bg.webp);
		background-repeat: repeat-x;
		background-position: center bottom;
		background-size: 100% 100px;
		z-index: 9;

		@media screen and (min-width: 1000px) {
			display: flex;
			flex-basis: calc(100% - 300px);
			align-items: center;
			justify-content: flex-end;

			padding: 0 70px 0 0;
			position: static;
			width: unset;
			height: unset;
			background-color: unset;
			background-image: unset;
		}

		&::after {
			content: "";
			background-image: url(../img/logo-menu.webp);
			background-position: bottom center;
			background-repeat: no-repeat;
			background-size: auto 100%;
			width: 92%;
			height: 50px;
			display: block;
			position: absolute;
			bottom: 20px;

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

		> ul {
			font-weight: 600;

			color: var(--primary-color);
			background-color: #ffffff;
			border-radius: 15px;
			margin-bottom: 3.0rem;
			padding: 0 10px;

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

				font-size: 1.6rem;
				color: #323258;
				background-color: unset;
				border-radius: unset;
				margin-bottom: 0;
				padding: 0;
			}

			li {
/*				flex-basis: 120px;*/
				text-align: center;

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

				&:not(:first-child) {
					border-top: 2px dashed var(--primary-color);

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

				a {
					display: block;
					padding: 15px;

					@media screen and (min-width: 1100px) {
						display: inline;
					}
				}
			}
		}
		p.contact {
			flex-basis: 320px;
			font-size: 4vw;
			color: var(--primary-color);
			font-weight: 600;
			position: relative;

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

			a {
				display: block;
				padding: 20px 30px 20px 20vw;
				background-color: #e0ebff;
				border-radius: 15px;

				@media screen and (min-width: 1100px) {
					padding: 20px 30px;
					background-color: #ffffce;
					border-radius: 0 0 15px 15px;
				}

				&::before {
					content: "";
					display: block;
					width: 20vw;
					height: 20vw;
					background-image: url(../img/visual-img2.webp);
					background-size: 100%;
					background-repeat: no-repeat;
					position: absolute;
					left: -2%;
					bottom: -20%;

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

				span {
					font-size: 6vw;
					font-family: "Bungee", sans-serif;
					color: #0da4ff;

					@media screen and (min-width: 1100px) {
						font-size: 2.55rem;
					}
				}
				b {
					font-family: "Bungee", sans-serif;
					font-size: 8vw;
					display: block;
					color: #0da4ff;

					@media screen and (min-width: 1100px) {
						color: var(--primary-color);
						font-size: 3.0rem;
					}
				}
			}
		}
	}
}
footer {
	background-color: #0da4ff;
	color: #ffffff;
	position: relative;
	padding: 9.0rem 0;

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

	&::before {
		content: "";
		display: block;
		width: 100%;
		height: 27px;
		background-image: url(../img/footer-bg.webp);
		background-repeat: repeat-x;
		position: absolute;
		top: -27px;
		animation: wave 15s infinite linear;
	}

	> div {
		display: flex;
		flex-wrap: wrap;

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

		div.left {
			order: 2;

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

			p.address {
				margin-top: 25px;
				font-size: 1.7rem;
				line-height: 2.8rem;
			}
		}
		div.right {
			order: 1;
			display: flex;
			flex-wrap: wrap;

			@media screen and (min-width: 1100px) {
				display: block;
				flex-basis: calc(100% - 400px);
				order: 2;
			}

			ul {
				order: 2;
				flex-basis: 100%;
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 25px;

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

				li {
					flex-basis: calc(100% / 2);
					font-size: 6vw;
					position: relative;
					padding-left: 4.5rem;
					margin-bottom: 20px;

					@media screen and (min-width: 1100px) {
						font-size: 1.94rem;
						flex-basis: calc(100% / 4);
						text-align: center;
						padding-left: 0;
						margin-bottom: 0;
					}

					&::before {
						content: "";
						width: 2.5rem;
						height: 2px;
						border-top: 2px solid #b2e2ff;
						display: block;
						position: absolute;
						left: 10px;
						top: 15px;
					}

					span {
						font-family: "Bungee", sans-serif;
						font-size: 4vw;
						line-height: 2.1rem;
						color: #b2e2ff;
						display: block;

						@media screen and (min-width: 1100px) {
							font-size: 1.4rem;
							line-height: 2.1rem;
						}
					}
				}
			}
			div.contact {
				order: 1;
				background-color: #e0feff;
				border-radius: 15px;
				line-height: 2.1rem;
				color: var(--primary-color);
				font-weight: 600;
				position: relative;
				margin: 0 2% 3.0rem;

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

				&::before {
					content: "";
					width: 18vw;
					height: 18vw;
					display: block;
					background-image: url(../img/footer-img.webp);
					background-size: 100%;
					background-repeat: no-repeat;
					position: absolute;
					left: -2%;
					bottom: -5vw;

					@media screen and (min-width: 1100px) {
						width: 106px;
						height: 103px;
						left: -24px;
						bottom: -18px;
					}
				}

				a {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					padding: 25px 4% 25px 22%;

					@media screen and (min-width: 1100px) {
						flex-wrap: nowrap;
						padding: 25px 70px 25px 100px;
					}

					p {
						flex-basis: 100%;
						font-size: 5vw;
						line-height: 1.06;

						&:first-child {
							margin-bottom: 10px;
						}

						@media screen and (min-width: 1100px) {
							font-size: unset;
							line-height: unset;

							&:first-child {
								flex-basis: 160px;
								margin-bottom: 0;
							}
							&:last-child {
								flex-basis: calc(100% - 160px);
							}
						}
					}

					span {
						font-size: 3vw;
						font-family: "Bungee", sans-serif;
						color: #0da4ff;

						@media screen and (min-width: 1100px) {
							display: block;
							font-size: 1.3rem;
						}
					}
					b {
						display: block;
						font-size: 7vw;
						font-family: "Bungee", sans-serif;
						color: #0da4ff;

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

.c-totop {
	position: fixed;
	bottom: 4%;
	right: 4%;
	opacity: 0;
	z-index: 10;

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

	img {
		max-width: 15vw;

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

/**
 * index
 */
body.index {
	div.visual {
		background-image: url("../img/wave-02.webp");
		background-position: bottom center;
		background-repeat: repeat-x;
		padding-bottom: 8rem;
		position: relative;
		overflow: hidden;

		@media screen and (min-width: 1100px) {
			height: 800px;
			padding-top: 180px;
			padding-bottom: 27px;
		}

		ul {
			position: relative;
			text-align:  center;
			margin: 0 4%;
			border-radius: 30px;
			overflow: hidden;
			max-height: calc(100% * 0.857);

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

			li {
				width: 100%;
				height: calc(100% * 0.857);

				@media screen and (min-width: 1100px) {
					width: 1040px;
					height: 500px;
					margin: 0 25px;
					border-radius: 30px;
					overflow: hidden;
				}

				&:has(+ .slick-current) {
					text-align: right;
					img {
						width: 60%;
						transform: translateY(40%);
						border-radius: 30px;
					}
				}
				&.slick-current + .slick-slide {
					text-align: left;
					img {
						width: 60%;
						transform: translateY(40%);
						border-radius: 30px;
					}
				}
			}
		}

		> p {
			position: absolute;
			content: "";
			display: block;
			background-repeat: no-repeat;
			z-index: 8;

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

			&:nth-of-type(1) {
				width: 25vw;
				height: 25vw;
				top: 0;
				right: 2%;
				text-align: right;

				@media screen and (min-width: 1100px) {
					width: 159px;
					height: 159px;
					top: 158px;
					right: unset;
					left: 50%;
					transform: translateX(382px);
				}
			}
			&:nth-of-type(2) {
				width: 25vw;
				height: calc(25vw * 0.965);
				left: 2%;
				bottom: 30px;

				@media screen and (min-width: 1100px) {
					width: 172px;
					height: 166px;
					left: 50%;
					bottom: 50px;
					transform: translateX(-600px);
				}
			}

			img {
				width: 100%;
			}
		}
	}

	section.about {
		padding-top: 4.0rem;
		padding-bottom: 4.0rem;
		background-color: var(--secondary-color);
		background-image: url(../img/about-bg-bottom.webp);
		background-repeat: repeat-x;
		background-position: center bottom;
		position: relative;

		@media screen and (min-width: 1100px) {
			padding-top: 9.0rem;
			padding-bottom: 13.0rem;
		}

		&::before {
			content: "";
			display: block;
			position: absolute;
			top: -27px;
			left: 0;
			width: 100%;
			height: 27px;
			background-image: url(../img/wave-01-top.webp);
			background-repeat: repeat-x;
			background-position: center center;
		}

		> div {

			h2 {
				font-size: 2.8rem;
				line-height: 4.4rem;
				color: var(--primary-color);
				font-weight: 900;
				text-align: center;
				margin-bottom: 4.0rem;

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

				span {
					position: relative;
					display: inline-block;
					z-index: 2;

					&::after {
						position: absolute;
						width: 100%;
						margin: 0 auto;
						display: block;
						content: "";
						border-bottom: 18px solid #ffffe0;
						border-radius: 9px;
						bottom: 5px;
						z-index: -1;
					}
				}
			}

			> p {
				line-height: 3.6rem;
				text-align: center;
				margin-bottom: 4.0rem;

				@media screen and (min-width: 1100px) {
					font-size: 2.0rem;
					margin-bottom: 12.0rem;
				}
			}
		}

		> section {
			counter-increment: section;
			background-image: url(../img/wave-01.webp);
			background-position: center top 25px;
			background-size: 100% 110px;
			background-repeat: repeat-x;
			margin-bottom: 5.0rem;

			@media screen and (min-width: 1100px) {
				background-position: center center;
				background-size: auto;
				background-repeat: repeat-x;
			}

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

				> div:nth-of-type(1) {
					padding-top: 4.0rem;

					@media screen and (min-width: 1100px) {
						flex-basis: 540px;
						padding-right: 80px;
					}

					h3 {
						font-size: 2.2rem;
						line-height: 83px;
						color: var(--primary-color);
						font-weight: 700;
						padding-left: 90px;
						position: relative;
						margin-bottom: 3.0rem;

						@media screen and (min-width: 1100px) {
							margin-bottom: 4.0rem;
							font-size: 2.9rem;
						}

						&::before {
							display: block;
							content: "";
							width: 77px;
							height: 83px;
							background-image: url(../img/about-count.webp);
							position: absolute;
							left: 0;
						}

						&::after {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 77px;
							height: 83px;
							content: counter(section);
							font-family: "Bungee", sans-serif;
							font-weight: 400;
							color: #ffffff;
							position: absolute;
							top: 14px;
							left: 0;
						}
					}
					p {
						line-height: 3.6rem;
						margin-bottom: 3.0rem;

						@media screen and (min-width: 1100px) {
							margin-bottom: 0;
						}
					}
				}
				> div:nth-of-type(2) {
					flex-basis: 560px;
					position: relative;
					text-align: center;
					position: relative;

					> figure {
					}
					> p {
						display: block;
						width: 186px;
						height: 186px;
						position: absolute;
						top: 10px;

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

			@media screen and (min-width: 1100px) {
				&:nth-of-type(even) {
					> div {
						> div:nth-of-type(1) {
							order: 2;
							padding-right: 0;
							padding-left: 80px;
						}
						> div:nth-of-type(2) {
							order: 1;
						}
					}
				}
			}
		}
	}

	section.product {
		padding-bottom: 3.0rem;
		position: relative;

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

			&::before, &::after {
				content: "";
				display: block;
				position: absolute;
				bakground-repeat: no-repeat;
				z-index: -1;
			}
			&::before {
				background-image: url(../img/object-bg1.webp);
				width: 368px;
				height: 328px;
				top: 140px;
				right: 50%;
				transform: translateX(600px);
			}
			&::after {
				background-image: url(../img/object-bg2.webp);
				width: 394px;
				height: 290px;
				top: 50%;
				left: 50%;
				transform: translate(-700px, -50%);
			}
		}

		h2 {
			font-size: calc((100vw - 8% - 20px) / 11.5);
			line-height: calc((100vw - 8% - 20px) / 11.5 * 2.6);
			color: #ffffe0;
			position: relative;
			padding-left: calc(0.510 * (100vw - 8% - 20px));
			margin-bottom: 10.0rem;

			@media screen and (min-width: 1100px) {
				padding-left: 340px;
				font-size: 5.5rem;
				line-height: 16.0rem;
				position: absolute;
				transform: rotate(25deg);
				margin-top: -160px;
			}

			&::before {
				position: absolute;
				left: 0;
				z-index: -1;
				display: block;
				content: "";
				width: calc(100vw - 8% - 20px);
				height: calc(0.382 * (100vw - 8% - 20px));
				background-image: url(../img/product-title-bg.webp);
				background-repeat: no-repeat;
				background-size: 100% auto;

				@media screen and (min-width: 1100px) {
					width: 645px;
					height: 240px;
				}
			}
		}
		ul {
			position: relative;
			margin-bottom: 3.0rem;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-end;

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

			&::after {
				content: "";
				display: none;
				position: absolute;
				bakground-repeat: no-repeat;
				z-index: -1;
				background-image: url(../img/object-bg1.webp);
				width: 368px;
				height: 328px;
				bottom: 100px;
				right: 4%;

				@media screen and (min-width: 1100px) {
					display: block;
					right: 50%;
					transform: translateX(650px);
				}
			}

			li {
				margin-bottom: -3.0rem;
				flex-basis: calc(100% - 20px);

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

					&:nth-of-type(odd) {
						padding-right: 3.0rem;
					}
					&:nth-of-type(even) {
						padding-left: 3.0rem;
					}
				}

				> p {
					position: relative;
					left: -2.0rem;
					z-index: 3;
					border-radius: 15px;
					overflow: hidden;
				}
				> div {
					position: relative;
					z-index: 2;
					top: -9.0rem;
					background-color: #ffffce;
					border-radius: 10px;
					display: flex;
					align-items: center;
					padding-top: 10.0rem;
					padding-bottom: 3.0rem;
					box-shadow: 6px 6px 5px #cccccc;

					> p:nth-of-type(1) {
						flex-basis: 40%;
						font-size: 2.0rem;
						text-align: center;
						color: var(--primary-color);
						font-weight: 700;
						padding: 0 2%;

						@media screen and (min-width: 1100px) {
							flex-basis: 20.0rem;
							padding: 0;
							font-size: 3.0rem;
						}
					}
					> p:nth-of-type(2) {
						flex-basis: 60%;
						margin-right: 2.6rem;
						letter-spacing: 0;

						background-color: #ffffce;
						background-image: linear-gradient(90deg, transparent 0%, transparent 65%, #ffffce 65%, #ffffce 100%),
							linear-gradient(180deg, #0da4ff 1px, transparent 1px);
						background-size: 10px 100%, 100% 4.4rem;
						background-position: top -1px left;
						line-height: 4.3rem;

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

				&:nth-of-type(4) {
					> div > p:nth-of-type(2) {
						line-height: 3.6rem;
						letter-spacing: 0.5px;
						background-size: 10px 100%, 100% 3.7rem;
					}
				}
			}
		}
	}

	section.haccp {
		position: relative;
		background-color: #e6f7ff;
		padding: 10.0rem 4% 8.0rem;
		margin: 2.7rem 0;

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

		&::before, &::after {
			display: block;
			width: 100%;
			height: 27px;
			content: "";
			background-repeat: repeat-x;
			position: absolute;
		}
		&::before {
			top: -27px;
			left: 0;
			background-image: url(../img/wave-01-top.webp);
			background-position: center top;
		}
		&::after {
			bottom: -27px;
			left: 0;
			background-image: url(../img/wave-01-bottom.webp);
			background-position: center top;
		}

		> div {
			background-color: #ffffff;
			border-radius: 10px;

			h2 {
				position: relative;
				top: -35px;
				display: block;
				margin: 0 auto;
				background-color: #0da4ff;
				color: #ffffff;
				font-size: 2.9rem;
				padding: 1.5rem 0;
				border-radius: 3.5rem;
				max-width: 55.0rem;
				text-align: center;
			}

			> div {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				padding-bottom: 4.0rem;

				@media screen and (min-width: 1100px) {
					padding: 3.0rem 17.0rem 7.0rem;
					flex-wrap: nowrap;
				}

				p {
					line-height: 3.4rem;
					letter-spacing: 1px;

					&:nth-of-type(1) {
						margin-bottom: 3.0rem;
					}
					&:nth-of-type(2) {
						text-align: center;
					}

					img {
						max-width: 50%;

						@media screen and (min-width: 1100px) {
							max-width: 173px;
							margin-left: 40px;
						}
					}
				}
			}
		}
	}

	section.message {
		padding-top: 8.0rem;
		margin-bottom: 10.0rem;
		position: relative;

		@media screen and (min-width: 1100px) {
			padding-top: 12.0rem;
			margin-bottom: 18.0rem;
		}

		&::before, &::after {
			content: "";
			display: block;
			position: absolute;
			background-repeat: no-repeat;
			background-size: 100% auto;
			z-index: -1;
		}
		&::before {
			background-image: url(../img/object-bg1.webp);
			width: 40vw;
			height: calc(40vw * 0.89);
			top: 220px;
			right: 4%;

			@media screen and (min-width: 1100px) {
				width: 368px;
				height: 328px;
				top: 120px;
				right: 50%;
				transform: translateX(600px);
			}
		}
		&::after {
			background-image: url(../img/object-bg2.webp);
			width: 40vw;
			height: calc(40vw * 0.89);
			bottom: 20px;
			left: 4%;

			@media screen and (min-width: 1100px) {
				width: 394px;
				height: 290px;
				bottom: -20px;
				left: 50%;
				transform: translateX(-600px);
			}
		}

		h2 {
			font-size: 2.8rem;
			line-height: 4.0rem;
			color: var(--primary-color);
			margin-bottom: 5.0rem;

			@media screen and (min-width: 1100px) {
				font-size: 3.7rem;
				line-height: 6.2rem;
				margin-bottom: 8.0rem;
			}

			span {
				font-family: "Bungee", sans-serif;
				font-size: 5.1rem;
				display: block;
				color: #0da4ff;

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

		p {
			font-size: 2.0rem;
			line-height: 4.0rem;

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

	section.company {
		margin-bottom: 12.0rem;

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

		h2 {
			font-size: 2.8rem;
			line-height: 4.0rem;
			color: var(--primary-color);
			margin-bottom: 6.0rem;

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

			span {
				font-family: "Bungee", sans-serif;
				font-size: 5.1rem;
				display: block;
				color: #0da4ff;

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

		dl {
			display: flex;
			flex-wrap: wrap;
			border: 2px solid #0da4ff;
			border-radius: 25px;

			dt, dd {
				background-color: #e6f7ff;
				border-top: 2px dashed #0da4ff;
				padding: 20px 10px;
				align-content: center;

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

				&:nth-of-type(1) {
					border-top: none;
				}
			}
			dt {
				flex-basis: 40%;
				text-align: center;
				color: var(--primary-color);

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

				&:first-of-type {
					border-radius: 25px 0 0 0;
				}
				&:last-of-type {
					border-radius: 0 0 0 25px;
				}
			}
			dd {
				flex-basis: 60%;
				background-color: #ffffff;

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

				&:first-of-type {
					border-radius: 0 25px 0 0;
				}
				&:last-of-type {
					border-radius: 0 0 25px 0;
				}
			}
		}
	}
}

/**
 * secondary
 */
body.secondary {
	.visual {
		height: 90vw;
		background-image: url("../img/wave-01.webp");
		background-position: bottom center;
		background-repeat: repeat-x;
		background-size: 100% auto;
		padding: 0 4% 60px;

		@media screen and (min-width: 1100px) {
			height: 800px;
			padding: 180px 0 27px;
			background-size: unset;
		}

		h1 {
/*			width: 1050px;*/
			height: 75vw;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-content: center;
			margin: 0 auto;
			background-color: rgba(200, 200 ,200, 0.6);
			background-size: auto 100%;
			background-position: center top;
			border-radius: 25px;
			font-size: 3.6rem;
			color: #ffffff;
			text-align: center;
			font-weight: 400;
			letter-spacing: 5px;

			@media screen and (min-width: 1100px) {
				width: 1050px;
				height: 530px;
				font-size: 4.7rem;
				background-size: 100%;
				letter-spacing: 8px;
			}

			span {
				font-family: "Bungee", sans-serif;
				font-size: 2.3rem;
				flex-basis: 100%;

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

				}
			}
		}
	}
}

/**
 * recruit
 */
body.recruit {
	.visual {
		h1 {
			background-image: url(../img/recruit/title.webp);
		}
	}
	section.point {
		background-color: #6baaed;
		padding-top: 2.0rem;
		padding-bottom: 4.0rem;
		position: relative;

		@media screen and (min-width: 1100px) {
			padding-top: 7.0rem;
			padding-bottom: 15.0rem;
		}

		&::before {
			content: "";
			display: block;
			width: 100%;
			height: 27px;
			background-image: url(../img/wave-02-top.webp);
			background-repeat: repeat-x;
			background-position: center center;
/*			background-size: 100% auto;*/
			position: absolute;
			top: -27px;

			@media screen and (min-width: 1100px) {
/*				background-size: unset;*/
			}
		}

		h2 {
			text-align: center;
			margin-bottom: 2.0rem;

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

		ol {
			display: flex;
			flex-wrap: wrap;

			li {
				flex-basis: 100%;
				background-color: #ffffce;
				border-radius: 60px;
				padding: 40px 4%;
				margin-bottom: 3.0rem;
				position: relative;
				counter-increment: section;
				text-align: center;

				@media screen and (min-width: 1100px) {
					flex-basis: calc(50% - 25px);
					padding: 50px;
					margin-bottom: 6.0rem;
					border-radius: 100px;

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

				&::before {
					display: block;
					content: "";
					width: 60px;
					height: 64px;
					background-image: url(../img/recruit/point-point.webp);
					background-size: 100%;
					position: absolute;
					left: 8%;

					@media screen and (min-width: 1100px) {
						width: 101px;
						height: 109px;
						left: 60px;
					}
				}

				&::after {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 60px;
					height: 64px;
					content: counter(section);
					font-family: "Bungee", sans-serif;
					font-weight: 400;
					font-size: 2.6rem;
					color: #ffffff;
					position: absolute;
					top: 55px;
					left: 8%;

					@media screen and (min-width: 1100px) {
						width: 101px;
						height: 109px;
						font-size: 3.4rem;
						top: 68px;
						left: 61px;
					}
				}

				p {
					&:nth-of-type(1) {
						margin-bottom: 2.0rem;
						padding: 0 8%;

						@media screen and (min-width: 1100px) {
							padding: 0;
							margin-bottom: 3.0rem;
						}
					}
					&:nth-of-type(2) {
						color: var(--primary-color);
						font-size: 2.4rem;
						font-weight: 600;
						border-bottom: 2px dashed #6baaed;
						padding-bottom: 3.0rem;

						@media screen and (min-width: 1100px) {
							font-size: 3.0rem;
						}
					}
					&:nth-of-type(3) {
						line-height: 3.2rem;
						padding: 3.0rem 4% 0;
						letter-spacing: 1px;
						text-align: left;

						@media screen and (min-width: 1100px) {
							text-align: center;
							line-height: 3.7rem;
							padding: 3.0rem 0 0;
						}
					}
				}
			}
		}
	}
	section.person {
		background-color: #e6f7ff;
		padding-top: 3.0rem;
		position: relative;

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

		&::before {
			content: "";
			display: block;
			width: 100%;
			height: 27px;
			background-image: url(../img/wave-01-top.webp);
			background-repeat: repeat-x;
			background-position: center center;
			position: absolute;
			top: -27px;
		}

		h2 {
			color: var(--primary-color);
			font-size: 2.4rem;
			margin-bottom: 3.0rem;

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

			span {
				display: block;
				font-family: "Bungee", sans-serif;
				font-size: 2.4rem;
				line-height: 3.2rem;
				color: #0da4ff;

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

		section {
			background-color: #ffffff;
			box-shadow: 6px 6px 5px #c6c6c6;
			margin-bottom: 4.0rem;
			padding: 3.0rem 4%;
			border-radius: 15px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			@media screen and (min-width: 1100px) {
				padding: 5.0rem;
				flex-wrap: nowrap;
			}

			> div {
				flex-basis: 50%;
				order: 1;
				margin-bottom: 2.0rem;

				@media screen and (min-width: 1100px) {
					flex-basis: 26.0rem;
					margin-bottom: 0;
				}

				h3 {
					font-size: 6.5vw;
					color: var(--primary-color);

					@media screen and (min-width: 1100px) {
						font-size: 2.9rem;
					}
				}
				p {
					font-family: "Noto Sans", sans-serif;
					font-size: 10vw;
					font-weight: 600;

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

					b {
						font-family: "Roboto", sans-serif;
						font-size: 24vw;

						@media screen and (min-width: 1100px) {
							font-size: 11.6rem;
						}
					}
				}
			}
			p.description {
				order: 3;
				flex-basis: 100%;
				line-height: 3.0rem;

				@media screen and (min-width: 1100px) {
					flex-basis: 47.0rem;
					order: 2;
					line-height: 3.4rem;
				}
			}
			p.image {
				order: 2;
				flex-basis: 50%;
				text-align: center;
				margin-bottom: 2.0rem;
				align-self: end;

				@media screen and (min-width: 1100px) {
					flex-basis: 27.0rem;
					order: 3;
					margin-bottom: 0;
					text-align: right;
					align-self: unset;
				}
			}

			&:nth-of-type(2) {
				> div {
					flex-basis: 100%;

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

					> p {
						span {
							max-width: 7vw;
							display: inline-block;
							font-size: 5.5vw;
							line-height: 6.5vw;

							@media screen and (min-width: 1100px) {
								font-size: 2.8rem;
								max-width: 4rem;
								line-height: 3.0rem;
							}

							&.male {
								color: #4b92e1;
							}
							&.female {
								color: #e487ac;
							}
						}
						b {
							font-size: 21vw;

							@media screen and (min-width: 1100px) {
								font-size: 9.5rem;
							}
						}
					}
				}
				p.description {
					@media screen and (min-width: 1100px) {
						flex-basis: 30.0rem;
					}
				}
				p.image {
					flex-basis: 100%;

					@media screen and (min-width: 1100px) {
						flex-basis: 27.0rem;
					}
				}
			}
		}
		div.image {
			position: relative;
			height: 150vw;

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

			p {
				position: absolute;

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

				&:nth-of-type(1) {
					max-width: 68%;

					@media screen and (min-width: 1100px) {
						left: 0;
						top: 0;
					}
				}
				&:nth-of-type(2) {
					max-width: 45%;
					right: 0;
					top: 50%;
					transform: translateY(-50%);

					@media screen and (min-width: 1100px) {
						right: unset;
						left: 50%;
						transform: translateX(-35%);
						top: unset;
						bottom: 110px;
					}
				}
				&:nth-of-type(3) {
					max-width: 55%;
					left: 0;
					bottom: 20vw;

					@media screen and (min-width: 1100px) {
						top: 20px;
						bottom: unset;
						left: unset;
						right: 0;
					}
				}
			}
		}
	}
	section.interview {
		> div.title {
			background-color: #0da4ff;
			padding-top: 3.0rem;
			position: relative;
			background-image: url(../img/recruit/interview-bg-sm.webp);
			background-size: 100% auto;
			background-repeat: no-repeat;
			background-position: center top 10%;
			position: relative;

			@media screen and (min-width: 1100px) {
				background-image: url(../img/recruit/interview-bg.webp);
				background-size: unset;
				background-position: center top;
			}

			&::before {
				content: "";
				display: block;
				width: 100%;
				height: 27px;
				position: absolute;
				top: -27px;
				background-image: url(../img/wave-03-top.webp);
			}

			h2 {
				height: 108vw;
				font-size: 6vw;
				color: #ffffff;
				padding-left: 6%;

				@media screen and (min-width: 1100px) {
					font-size: 3.9rem;
					height: 770px;
					padding-left: 0;
				}

				span {
					display: block;
					font-size: 8.5vw;
					color: #c9e1ff;
					font-family: "Bungee", sans-serif;
					letter-spacing: 4px;

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

			.images {
				p {
					position: absolute;

					&:nth-of-type(1) {
						bottom: 20px;
						left: 4%;
						z-index: 5;
						width: 25%;

						@media screen and (min-width: 1100px) {
							left: 50%;
							transform: translateX(-340%);
							width: auto;
						}
					}
					&:nth-of-type(2) {
						bottom: 20px;
						right: 4%;
						z-index: 5;
						width: 25%;

						@media screen and (min-width: 1100px) {
							right: 50%;
							transform: translateX(300%);
							width: auto;
						}
					}
					&:nth-of-type(3) {
						bottom: 0;
						left: 50%;
						width: 60%;
						transform: translateX(-90%);

						@media screen and (min-width: 1100px) {
							width: 540px;
							transform: translateX(-100%);
						}
					}
					&:nth-of-type(4) {
						bottom: 0;
						right: 50%;
						width: 50%;
						transform: translateX(100%);

						@media screen and (min-width: 1100px) {
							width: 440px;
							transform: translateX(107%);
						}
					}
					&:nth-of-type(5) {
						bottom: 39%;
						left: 4%;
						z-index: 5;
						width: 42%;

						@media screen and (min-width: 1100px) {
							left: 50%;
							transform: translateX(-180%);
							bottom: 350px;
							width: auto;
						}
					}
					&:nth-of-type(6) {
						bottom: 42%;
						right: 4%;
						z-index: 5;
						width: 46%;
						text-align: right;

						@media screen and (min-width: 1100px) {
							right: 50%;
							bottom: 350px;
							transform: translateX(150%);
							width: auto;
						}
					}
				}
			}
		}
		section.description {
			background-color: #e6f7ff;
			padding-top: 4.0rem;
			padding-bottom: 4.0rem;
			position: relative;

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

			&::before {
				content: "";
				background-image: url(../img/wave-01-top.webp);
				position: absolute;
				top: -27px;
				display: block;
				width: 100%;
				height: 27px;
			}
			&::after {
				content: "";
				background-image: url(../img/wave-01-bottom.webp);
				position: absolute;
				bottom: -27px;
				display: block;
				width: 100%;
				height: 27px;
			}

			h3 {
				font-size: 5.5vw;
				line-height: 8vw;
				color: var(--primary-color);
				text-align: center;
				background-image: url(../img/recruit/description-title-sm.webp);
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 100% auto;
				margin-bottom: 4.0rem;
				padding: 20px 0;

				@media screen and (min-width: 1100px) {
					font-size: 3.4rem;
					line-height: 6.6rem;
					background-size: unset;
					background-image: url(../img/recruit/description-title.webp);
					padding: 0;
				}
			}
			p {
				line-height: 3.4rem;
				letter-spacing: 0;
			}
		}
		section.flow {
			padding: 8.0rem 4% 0;

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

			h3 {
				color: #0da4ff;
				border: 3px solid #0da4ff;
				border-radius: 30px;
				font-size: 2.2rem;
				display: block;
				max-width: 40%;
				padding: 0 8%;
				margin: 0 auto 45px;
				text-align: center;

				@media screen and (min-width: 1100px) {
					display: inline-block;
					font-size: 3.9rem;
					padding: 0 50px;
					margin: 0 0 45px;
					max-width: unset;
					text-align: left;
				}
			}

			ol {
				margin-bottom: 8.0rem;
				position: relative;

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

				&::before {
					content: "";
					display: block;
					height: 90%;
					border-left: 3px solid #0da4ff;
					width: 5px;
					position: absolute;
					left: 11%;
					z-index: -1;

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

				li {
					display: flex;
					justify-content: space-between;
					margin-bottom: 7.0rem;

					@media screen and (min-width: 1100px) {
						justify-content: unset;
						margin-bottom: 4.0rem;
					}

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

						@media screen and (min-width: 1100px) {
							flex-basis: 25.0rem;
						}
					}
					> div {
						flex-basis: 72%;
						border: 3px solid #0da4ff;
						border-radius: 15px;
						padding: 0 15px 4%;
						position: relative;

						@media screen and (min-width: 1100px) {
							flex-basis: calc(100% - 25.0rem);
							padding: 0 15px 20px;
						}

						&::before {
							content: "";
							position: absolute;
							top: 30px;
							left: 0;
							border-style: solid;
							border-width: 8px 16px 8px 0;
							border-color: transparent #0da4ff transparent transparent;
							translate: -100% -50%;

							@media screen and (min-width: 1100px) {
								top: 47px;
								border-width: 20px 40px 20px 0;
								translate: -100% -50%;
							}
						}

						&::after {
							content: "";
							position: absolute;
							top: 30px;
							left: 0;
							border-style: solid;
							border-width: 6px 13px 6px 0;
							border-color: transparent #ffffff transparent transparent;
							translate: -100% -50%;

							@media screen and (min-width: 1100px) {
								top: 47px;
								border-width: 17.8px 35.5px 17.8px 0;
								translate: -100% -50%;
							}
						}

						p {
							padding: 15px 4%;

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

							&:nth-of-type(1) {
								font-size: 2.2rem;
								color: var(--primary-color);
								font-weight: 600;

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

								&.has-image {
									padding-right: 100px;
								}
							}
							&:nth-of-type(2) {
								line-height: 3.0rem;
								border-top: 3px dashed #0da4ff;
								letter-spacing: 1px;

								@media screen and (min-width: 1100px) {
									line-height: 3.4rem;

									&.has-image {
										padding-right: 18.0rem;
									}
								}
							}
							&:nth-of-type(3) {
								position: absolute;
								padding: 0;
								top: -55px;
								right: 0;
								max-width: 100px;

								@media screen and (min-width: 1100px) {
									padding: 15px 30px;
									right: 0;
									top: 0;
									max-width: unset;
								}
							}
						}
					}
				}
			}
		}
	}
	ul.link {
		padding-bottom: 6.0rem;

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

		li {
			margin-bottom: 2.0rem;

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

			a {
				display: block;
				text-align: center;
				font-size: 2.4rem;
				font-weight: 600;
				padding: 1.8rem 0;
				width: 92%;
				margin: 0 auto;
				border-radius: 15px;
				background-repeat: no-repeat;
				background-position: center bottom 16px;

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

			&:nth-of-type(1) {
				a {
					background-image: url(../img/recruit/link-01.webp);
					background-color: #2f489a;
					background-size: 80% auto;
					color: #ffffff;
				}
			}
			&:nth-of-type(2) {
				a {
					background-image: url(../img/recruit/link-02.webp);
					background-color: #e0f4ff;
					background-size: 35% auto;
					color: var(--primary-color);
					font-size: 2.1rem;

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

					span {
						font-size: 1.8rem;
						display: block;

						@media screen and (min-width: 1100px) {
							font-size: 2.0rem;
						}
					}
				}
				p {
					width: 90%;
					color: red;
					font-size: 1.4rem;
					margin: 1.0rem auto 0;

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