/*PC*/

@media all {
	/*contactフォーム7*/
	.wpcf7-response-output,
	.wpcf7-spinner {
		display: none !important;
	}
	.wpcf7-select {
		border: 1px solid #707070;
		padding: 10px;
	}
	.wpcf7-not-valid-tip {
		font-size: 1.4rem;
		margin-top: 10px;
	}

	/* スクロールエフェクト */
	.fadein {
		opacity: 0;
		transform: translate(0, 25px);
		transition: all 500ms;
	}

	.fadein.scrollin {
		opacity: 1;
		transform: translate(0, 0);
	}

	/* 2つ目の要素に200msのdelayをかける */
	/*ここに親要素名*/
	.fadein:nth-of-type(2) {
		-moz-transition-delay: 200ms;
		-webkit-transition-delay: 200ms;
		-o-transition-delay: 200ms;
		-ms-transition-delay: 200ms;
	}

	.fadein:nth-of-type(3) {
		-moz-transition-delay: 400ms;
		-webkit-transition-delay: 400ms;
		-o-transition-delay: 400ms;
		-ms-transition-delay: 400ms;
	}

	.fadein:nth-of-type(4) {
		-moz-transition-delay: 600ms;
		-webkit-transition-delay: 600ms;
		-o-transition-delay: 600ms;
		-ms-transition-delay: 600ms;
	}

	html,
	body {
		background-color: #fff !important;
		font-size: 62.5%;
	}

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

	ul {
		list-style: none;
	}

	table {
		border-collapse: collapse;
	}

	header {
		.sp_menu {
			display: none;
		}
	}

	.button {
		padding: 5px 30px;
		border-radius: 200px;
		background-color: #ee8361;
		display: flex;
		align-items: center;
		width: fit-content;
		color: white;
		i {
			margin-left: 10px;
			transition: all 0.25s;
		}
	}

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

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

	.plr {
		padding: 0 50px;
	}

	.sp_on {
		display: none;
	}

	h2 {
		color: #cd4807;
		font-size: 4rem;
		border-bottom: 6px solid #cd4807;
		width: fit-content;
		margin: 0 auto 100px;
		text-align: center;
		line-height: 1.6;
	}

	.table-wrap {
		padding: 0px 50px;
		flex-basis: 100%;
		max-width: 900px !important;
		width: 100%;
		margin: 60px auto 0;
	}

	#header {
		width: 100%;
		z-index: 999;
		position: fixed;
		top: 0;
		.header_wrapper {
			max-width: 1260px;
			padding: 20px 30px;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.header_logo {
				margin-right: 20px;
			}
			nav {
				font-size: 1.8rem;
				display: flex;
				align-items: center;
				z-index: 2;
				color: white;
				& a {
					margin-right: 40px;
					&:last-child {
						margin-right: 0px;
					}
				}
			}
		}
	}

	#header_page {
		width: 100%;
		z-index: 999;
		position: fixed;
		top: 0;
		background-color: white;
		.header_wrapper {
			max-width: 1260px;
			padding: 10px 30px;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.header_logo {
				margin-right: 20px;
				& img {
					filter: invert(1);
				}
			}
			nav {
				font-size: 1.8rem;
				display: flex;
				align-items: center;
				z-index: 2;
				& a {
					margin-right: 40px;
					&:last-child {
						margin-right: 0px;
					}
				}
			}
		}
	}

	#top {
		background-color: #f9f1e6;

		.fv {
			position: relative;
			width: 100%;
			height: 100vh;
			overflow: hidden;
			margin-top: 89px;

			.fv-slider {
				position: absolute;
				inset: 0;

				picture {
					position: absolute;
					inset: 0;

					&:nth-child(1) img {
						animation-delay: 0s;
					}
					&:nth-child(2) img {
						animation-delay: 6s;
					}
					&:nth-child(3) img {
						animation-delay: 12s;
					}
				}

				img {
					position: absolute;
					inset: 0;
					width: 100%;
					height: 100%;
					object-fit: cover;
					opacity: 0;
					transform: scale(1);
					animation: fadeZoom 18s infinite;
				}
			}

			figure {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 2;

				& img {
					max-width: 200px;
					width: 100%;
					height: auto;
				}
			}
		}

		.explanation {
			figure {
				max-width: 750px;
				width: 100%;
				margin: 0px auto 80px;
			}

			.title {
				text-align: center;
				font-size: 3.5rem;
				margin-bottom: 60px;
				line-height: 1.4;
				color: black;

				span {
					font-size: 5rem;

					&:nth-child(1) {
						color: #b53613;
					}
					&:nth-child(2) {
						color: #1995b6;
					}
				}

				.break {
					display: inline-block;
					font-size: inherit;
					color: inherit;
				}
			}

			p {
				margin: auto;
				max-width: 830px;
				font-size: 2rem;
				line-height: 3;
				color: #cd4807;
			}
		}

		.features {
			.wrapper_point {
				max-width: 1400px;
				margin: auto;
				article {
					display: flex;
					align-items: center;
					margin-bottom: 80px;
					&:last-child {
						margin-bottom: 0px;
					}
					&:nth-child(2) {
						flex-direction: row-reverse;
						div {
							padding: 0 50px 0 100px;
						}
					}
					figure {
						width: 45%;
						& img {
							width: 100%;
							height: auto;
						}
					}
					div {
						width: 55%;
						padding: 0 100px 0 50px;
						.point {
							margin-bottom: 30px;
							p {
								line-height: 1;
								letter-spacing: 0em;
								text-align: center;
								color: white;
								font-size: 3.6rem;
								background-color: #ee8361;
								border-radius: 50%;
								width: 90px;
								height: 100%;
								aspect-ratio: 1 / 1;
								span {
									display: block;
									font-size: 1.4rem;
								}
								margin-right: 20px;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
							}
							h3 {
								font-size: 3rem;
								line-height: 1.5;
							}
						}
						p {
							font-size: 2rem;
						}
					}
				}
			}
		}

		.lineup {
			.item {
				display: flex;
				max-width: 1000px;
				margin: auto;
				gap: 50px;
				article {
					width: calc((100% - 50px) / 2);
					background-color: white;
					padding: 50px;
					border-radius: 20px;
					h3 {
						text-wrap: nowrap;
						text-align: center;
						color: #cd4807;
						font-size: 3.8rem;
						margin-bottom: 20px;
						line-height: 1.2;
						margin-top: -100px;
						span {
							font-size: 2.4rem;
							display: block;
							font-weight: 900;
						}
					}
					figure {
						margin-bottom: 20px;
						& img {
							width: 100%;
							height: auto;
						}
					}
					p {
						font-size: 1.8rem;
						margin-bottom: 30px;
					}
					.button {
						margin: auto;
						&:hover {
							i {
								margin-left: 20px;
							}
						}
					}
				}
			}
		}

		.image {
			width: 100%;
			aspect-ratio: 10 / 5;
			background-image: image-set(url("../images/top_image.jpg") 1x, url("../images/top_image@2x.jpg") 2x);
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
		}

		.voice {
			background-color: white;
			padding: 120px 50px;
			article {
				max-width: 1000px;
				margin: auto;
				display: flex;
				flex-wrap: wrap;
				gap: 30px;
				p {
					width: calc((100% - 60px) / 3);
					background-color: #f7f7f7;
					border-radius: 20px;
					padding: 25px;
				}
			}
		}
	}

	@keyframes fadeZoom {
		0% {
			opacity: 0;
			transform: scale(1);
		}
		15% {
			opacity: 1;
		}
		45% {
			opacity: 1;
			transform: scale(1.08);
		}
		60% {
			opacity: 0;
			transform: scale(1.1);
		}
		100% {
			opacity: 0;
			transform: scale(1);
		}
	}

	.page-id-13,
	.page-id-25 {
		footer {
			.contact {
				display: none;
			}
			.footer {
				border-top: 1px solid #373737;
			}
		}
	}

	footer {
		.contact {
			width: 100%;
			background-image: image-set(
				url("../images/footer_contact.jpg") 1x,
				url("../images/footer_contact@2x.jpg") 2x
			);
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			padding: 100px 50px;
			.choice {
				display: flex;
				justify-content: center;
				max-width: fit-content;
				margin: auto;
				gap: 50px;
				article {
					width: 100%;
					& a {
						text-align: center;
						line-height: 1;
						font-size: 2.6rem;
						min-width: 340px;
						border: 2px solid #cd4807;
						border-radius: 100px;
						padding: 12px 0px;
						margin-bottom: 10px;
						color: #cd4807;
						display: block;
						i {
							margin-right: 10px;
						}
					}
					p {
						text-align: center;
					}
				}
			}
		}

		.footer {
			padding: 100px 50px;
			max-width: 1200px;
			width: 100%;
			margin: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			div {
				nav {
					display: flex;
					align-items: center;
					& a {
						font-size: 1.4rem;
						margin-right: 35px;
						&:last-child {
							margin-right: 0px;
						}
					}
				}
				article {
					figure {
						padding-top: 50px;
						margin-bottom: 10px;
						&::before {
							content: "";
							width: 60px;
							border-bottom: 1px solid #707070;
							display: block;
							margin-bottom: 50px;
						}
					}
					.copy {
						margin-top: 40px;
						font-size: 1rem;
					}
				}
			}
		}
	}

	#lineup {
		margin-top: 90px;
		.fv {
			width: 100%;
			& img {
				width: 100%;
				height: auto;
			}
		}
		.lineup {
			article {
				max-width: 1200px;
				margin: 0 auto 100px;
				&:last-of-type {
					margin-bottom: 0px;
				}
				&:nth-of-type(2) {
					article {
						flex-direction: row-reverse;
						figure {
							margin: 0 0 0 30px;
						}
						div {
							padding: 0 0 0 50px;
						}
					}
				}
				article {
					display: flex;
					align-items: center;
					figure {
						max-width: 600px;
						width: 100%;
						margin-right: 30px;
						& img {
							width: 100%;
							height: auto;
						}
					}
					div {
						max-width: 400px;
						width: 100%;
						padding-right: 50px;
						h3 {
							color: #cd4807;
							font-size: 3.8rem;
							margin-bottom: 30px;
							line-height: 1.2;
							span {
								font-size: 2.3rem;
								display: block;
								font-weight: 900;
							}
						}
						p {
							margin-bottom: 30px;
						}
						.button {
							&:hover {
								i {
									margin-left: 20px;
								}
							}
						}
					}
				}
				.table-wrap {
					margin-top: 60px;
					table {
						width: 100%;
						tr {
							th {
								text-align: left;
								text-wrap: nowrap;
								padding: 25px 80px 25px 0;
								width: 200px;
								border-bottom: 1px solid black;
							}
							td {
								padding: 25px 0;
								span {
									font-size: 1.4rem;
								}
								border-bottom: 1px solid black;
							}
						}
					}
				}
			}
		}

		.recipe {
			max-width: 1000px !important;
			width: 100%;
			margin: auto;

			article {
				h3 {
					text-align: center;
					color: #cd4807;
					font-size: 2.6rem;
					margin-bottom: 60px;
				}
				h4 {
					font-size: 2rem;
					width: 100%;
					border-bottom: 1px solid black;
					span {
						font-size: 1.6rem;
					}
					padding-bottom: 10px;
					margin-bottom: 30px;
				}
				.material {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					margin-bottom: 60px;
					&:last-of-type {
						margin-bottom: 0px;
					}
					figure {
						width: 45%;
						& img {
							width: 100%;
							height: auto;
						}
					}
					ul {
						width: 55%;
						padding-left: 25px;
						line-height: 2;
						span {
							font-size: 1.4rem;
						}
					}
				}

				.make {
					article {
						display: flex;
						align-items: center;
						margin-bottom: 60px;
						&:last-child {
							margin-bottom: 0px;
						}
						figure {
							max-width: 300px;
							width: 100%;
							margin-right: 30px;
							& img {
								width: 100%;
								height: auto;
							}
						}
						div {
							h5 {
								font-size: 1.8rem;
								margin-bottom: 10px;
							}
							p {
								font-size: 1.5rem;
								span {
									font-size: 1.3rem;
								}
							}
						}
					}
				}
			}
		}

		.attempt {
			max-width: 900px;
			margin: auto;
			figure {
				width: 100%;
				margin-bottom: 50px;
				& img {
					width: 100%;
					height: auto;
				}
			}

			p {
				font-size: 1.8rem;
				line-height: 2.6;
				color: #cd4807;
			}
		}
	}

	#company {
		table {
			margin: 0 auto 100px;
			tr {
				border-bottom: 1px solid #575757;
				th {
					text-wrap: nowrap;
					text-align: left;
					padding: 20px 80px 20px 0px;
					span {
						font-size: 1.4rem;
					}
				}
				td {
					padding: 20px 0px;
					span {
						font-size: 1.4rem;
					}
				}
			}
		}

		.map {
			width: 100%;
			aspect-ratio: 3 / 1;
			margin-bottom: -3px;
		}
	}

	#contact {
		max-width: 800px;
		width: 100%;
		margin: auto;
		.end {
			text-align: center;
		}
		table {
			width: 100%;
			margin-bottom: 60px;
			th,
			td {
				display: block;
				text-align: justify;
			}
			th {
				margin: 40px 0 15px;
				span {
					margin-left: 5px;
					color: red;
					font-size: 1.3rem;
				}
			}
			.form_01 {
				width: 100%;
				border-bottom: 1px solid black;
				padding: 0 0 10px 0;
				&:focus-visible {
					outline: none;
				}
			}
			.form_02 {
				width: 100%;
				height: 250px;
				border: 1px solid black;
				padding: 10px;
				&:focus-visible {
					outline: none;
				}
			}
		}

		.pp {
			width: 100%;
			height: 250px;
			padding: 25px;
			margin-bottom: 60px;
			overflow-y: auto;
			background-color: #f7f7f7;
			h3 {
				text-align: center;
				font-size: 2.4rem;
				margin-bottom: 30px;
			}
			article {
				margin-bottom: 30px;
				&:last-of-type {
					margin-bottom: 0px;
				}
				h4 {
					margin-bottom: 10px;
				}
				p {
					font-size: 1.4rem;
				}
			}
		}

		.check {
			text-align: center;
			margin-bottom: 30px;
		}

		.wpcf7-not-valid-tip {
			color: red;
			font-size: 1.3rem;
		}

		.button {
			margin: auto;
		}
	}
}

/*ipad*/
@media screen and (max-width: 1024px) {
	img {
		backface-visibility: hidden;
	}
}

@media screen and (max-width: 1000px) {
	#top {
		.features {
			.wrapper_point {
				article {
					&:nth-child(2) {
						div {
							padding: 0 30px;
						}
					}
					div {
						padding: 0 30px;
					}
				}
			}
		}
	}
}

@media screen and (max-width: 900px) {
	#header_page {
		.header_wrapper {
			.header_logo {
				& img {
					max-width: 110px;
				}
			}
			nav {
				& a {
					margin-right: 20px;
					font-size: 1.5rem;
				}
			}
		}
	}

	#top {
		.fv {
			margin-top: 70px;
		}
	}
	#lineup {
		margin-top: 70px;
	}
}

@media screen and (max-width: 820px) {
	h2 {
		font-size: 3.2rem;
	}

	.table-wrap {
		padding: 0px 100px;
	}

	#top {
		.fv {
			height: 55vh;
		}

		.explanation {
			figure {
				max-width: 600px;
			}
		}

		.features {
			.wrapper_point {
				article {
					div {
						p {
							font-size: 1.6rem;
						}
						.point {
							p {
								font-size: 3.2rem;
								width: 80px;
							}
							h3 {
								font-size: 2.4rem;
							}
						}
					}
				}
			}
		}

		.lineup {
			.item {
				gap: 30px;
				article {
					width: calc((100% - 30px) / 2);
					padding: 50px 25px 25px;
				}
			}
		}

		.voice {
			background-color: white;
			padding: 80px 50px;
		}
	}

	#lineup {
		.lineup {
			article {
				article {
					margin: 0 auto 60px;
					div {
						max-width: 350px;
						h3 {
							font-size: 3.2rem;
							margin-bottom: 15px;
						}
					}
				}
			}
		}

		.recipe {
			article {
				.make {
					article {
						figure {
							width: 300px;
							min-width: 300px;
						}
					}
				}
			}
		}
	}

	footer {
		.contact {
			padding: 50px;
			.choice {
				article {
					& a {
						min-width: 300px;
					}
				}
			}
		}
		.footer {
			padding: 50px;
			div {
				nav {
					& a {
						margin-right: 25px;
					}
				}
			}
		}
	}
}

/*ipadmini*/
@media screen and (max-width: 768px) {
	#top {
		.image {
			background-attachment: unset;
		}
	}
}

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

@media screen and (max-width: 739px) {
	header {
		.sp_menu {
			display: block;
			position: fixed;
			z-index: 1000;
			@keyframes bugfix {
				from {
					padding: 0;
				}
				to {
					padding: 0;
				}
			}
			@-webkit-keyframes bugfix {
				from {
					padding: 0;
				}
				to {
					padding: 0;
				}
			}
			#overlay-button {
				position: fixed;
				right: 15px;
				top: 9px;
				padding: 26px 11px;
				z-index: 999;
				cursor: pointer;
				user-select: none;
				span {
					height: 2px;
					width: 35px;
					border-radius: 2px;
					background-color: black;
					position: relative;
					display: block;
					transition: all 0.2s ease-in-out;
					&::before {
						top: -10px;
						visibility: visible;
					}
					&::after {
						top: 10px;
					}
					&::before,
					&::after {
						height: 2px;
						width: 35px;
						border-radius: 2px;
						background-color: black;
						position: absolute;
						content: "";
						transition: all 0.2s ease-in-out;
					}
				}
			}

			input[type="checkbox"] {
				display: none;
			}

			input[type="checkbox"]:checked ~ #overlay {
				visibility: visible;
			}

			input[type="checkbox"]:checked ~ #overlay-button:hover span,
			input[type="checkbox"]:checked ~ #overlay-button span {
				background: transparent;
			}
			input[type="checkbox"]:checked ~ #overlay-button span:before {
				transform: rotate(45deg) translate(7px, 7px);
			}
			input[type="checkbox"]:checked ~ #overlay-button span:after {
				transform: rotate(-45deg) translate(7px, -7px);
			}

			#overlay {
				height: 100vh;
				width: 100vw;
				background: #f9f1e6;
				z-index: 2;
				visibility: hidden;
				position: fixed;
				top: 0;
				ul {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					text-align: center;
					height: 85vh;
					padding-left: 0;
					list-style-type: none;
					li {
						line-height: 3;
						color: color;
						font-size: 1.5rem;
						margin-bottom: 20px;
						&:last-of-type {
							margin-bottom: 0px;
						}
						figure {
							margin-bottom: 30px;
						}
					}
				}
			}
		}
	}

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

	.plr {
		padding: 0 25px;
	}

	.sp_on {
		display: block;
	}

	h2 {
		font-size: 2.8rem;
		border-bottom: 5px solid #cd4807;
		margin: 0 auto 60px;
	}

	.table-wrap {
		padding: 0px 25px;
	}

	#header_page {
		.header_wrapper {
			nav {
				display: none;
			}
		}
	}

	#top {
		.fv {
			height: 100vh;
		}
		.explanation {
			figure {
				margin: 0px auto 30px;
			}
			.title {
				font-size: 2.4rem;
				span {
					font-size: 3.6rem;
				}
				line-height: 1.8;
			}
			p {
				font-size: 1.8rem;
				line-height: 2.4;
			}
		}

		.features {
			.wrapper_point {
				article {
					flex-direction: column;
					&:nth-child(2) {
						flex-direction: column;
					}
					figure {
						width: 100%;
						margin-bottom: 30px;
					}
					div {
						width: 100%;
						.point {
							p {
								margin: 0 0 30px 0;
							}
							h3 {
								font-size: 2.8rem;
								text-align: center;
							}
						}
					}
				}
			}
		}

		.lineup {
			.item {
				flex-direction: column;
				gap: 80px;
				article {
					width: 90%;
					margin: 30px auto 0px;
					padding: 50px 25px 25px;
					h3 {
						margin-top: -93px;
						font-size: 3rem;
						span {
							font-size: 2rem;
						}
					}
				}
			}
		}

		.image {
			aspect-ratio: 7 / 5;
		}

		.voice {
			padding: 80px 25px;
			article {
				p {
					width: 100%;
				}
			}
		}
	}

	#lineup {
		.lineup {
			article {
				article {
					flex-direction: column;
					figure {
						margin: 0 0 30px 0;
						margin-bottom: 30px;
					}
					div {
						max-width: 100%;
						padding: 0 25px;
						h3 {
							text-align: center;
							margin-bottom: 20px;
							font-size: 3rem;
							span {
								font-size: 2rem;
							}
						}
						.button {
							margin: auto;
						}
					}
				}
				&:nth-of-type(2) {
					article {
						flex-direction: column;
						figure {
							margin: 0 0 30px 0;
							margin-bottom: 30px;
						}
						div {
							padding: 0 25px;
						}
					}
				}
				.table-wrap {
					table {
						tr {
							th {
								padding: 25px 30px 25px 0;
								width: fit-content;
							}
						}
					}
				}
			}
		}

		.recipe {
			article {
				h3 {
					font-size: 2.3rem;
					margin-bottom: 20px;
				}
				.material {
					figure {
						width: 100%;
					}
					ul {
						width: 100%;
						padding-left: 0px;
					}
				}
				.make {
					article {
						flex-direction: column;
						figure {
							width: 100%;
							min-width: 100%;
							margin: 0 0 15px 0;
						}
					}
				}
			}
		}
	}

	#company {
		table {
			tr {
				th {
					padding: 20px 30px 20px 0px;
				}
			}
		}
		.map {
			aspect-ratio: 1;
		}
	}

	footer {
		.contact {
			padding: 50px 25px;
			.choice {
				gap: 40px;
				flex-direction: column;
				article {
					& a {
						font-size: 2.2rem;
					}
				}
			}
		}
		.footer {
			padding: 50px 25px;
			flex-direction: column;
			align-items: flex-start;
			div {
				width: 100%;
				nav {
					flex-direction: column;
					flex-wrap: wrap;
					height: 200px;
					& a {
						text-align: left;
						margin-right: 0px;
						line-height: 2;
						margin-bottom: 20px;
						width: 120px;
						&:last-child {
							line-height: 2;
							margin-bottom: 0px;
							width: fit-content;
						}
					}
				}
				article {
					figure {
						max-width: 260px;
					}
				}
			}
			figure {
				&:last-child {
					display: none;
				}
			}
		}
	}
}