/*
Theme Name: oomiti-shikou
*/

/*PC*/

@media all {
	/*contactフォーム7*/
	.wpcf7-spinner {
		display: none !important;
	}

	.wpcf7-response-output {
		border: none !important;
		text-align: center !important;
		font-size: 2.4rem !important;
		letter-spacing: 0.05em;
	}

	.wpcf7-select {
		border: 1px solid #707070;
		padding: 10px;
	}
	.wpcf7-not-valid-tip {
		font-size: 2rem !important;
		margin: 10px 0px 30px;
	}

	/* スクロールエフェクト */
	.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: #fff4e0 !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;
		}
	}

	figure {
		& img {
			width: 100%;
			height: auto;
		}
	}

	.space {
		padding: 0px 50px;
		margin-bottom: 150px !important;
		max-width: 1300px;
		margin: auto;
	}

	h2 {
		color: #5c5a3b;
		font-size: 8rem;
		margin-bottom: 50px;
	}

	h3 {
		color: #a97e0f;
	}

	#header {
		width: 100%;
		z-index: 999;
		z-index: 2;
		position: sticky;
		nav {
			max-width: 1260px;
			padding: 0px 30px;
			height: 90px;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 3rem;
			display: flex;
			align-items: center;
			& a {
				margin: 0px 15px;
			}
		}
	}

	#mv {
		margin: -90px 0px 60px;
		z-index: 1;
		position: sticky;
		figure {
			width: 100%;
			position: relative;
		}
		h1 {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 11rem;
			color: white;
			text-wrap: nowrap;
		}
	}

	#explanation {
		h2 {
			font-size: 6rem;
			text-align: center;
			margin-bottom: 80px;
		}
		article {
			display: flex;
			align-items: center;
			justify-content: center;
			div {
				margin-right: 40px;
				h3 {
					font-size: 5rem;
					line-height: 1.4;
					margin-bottom: 40px;
				}
				p {
					font-size: 3rem;
					color: #5e4900;
				}
			}
			figreu {
				max-width: 600px;
			}
		}
	}

	#features {
		.wrapper {
			display: flex;
			flex-wrap: wrap;
			gap: 100px;
			article {
				width: calc((100% - 100px) / 2);
				h3 {
					text-align: center;
					margin-bottom: 50px;
					font-size: 4rem;
				}
				p {
					font-size: 25px;
				}
			}
		}
	}

	#product {
		.wrapper {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			gap: 80px 30px;
			article {
				max-width: calc((100% - 60px) / 3);
				text-align: center;
				figure {
					margin-bottom: 20px;
					height: 300px;
				}
				h3 {
					text-align: center;
					font-size: 3rem;
				}
			}
		}
	}

	#notice {
		ul {
			max-width: 70%;
			margin-left: auto;
			li {
				border-bottom: 1px solid black;
				padding: 0px 0px 20px 40px;
				margin-bottom: 40px;
				&:last-child {
					margin-bottom: 0px;
				}
				h3 {
					font-size: 3.5rem;
				}
				p {
					font-size: 2rem;
				}
			}
		}
	}

	#company {
		background-image: url(../images/company_bg.png);
		background-position: center;
		background-size: cover;
		table {
			margin: auto;
			th,
			td {
				line-height: 2.6;
			}
			th {
				color: #382c00;
				font-size: 3.6rem;
				padding-right: 60px;
			}
			td {
				color: #5e4900;
				font-size: 3.5rem;
			}
		}
	}

	#map {
		aspect-ratio: 10 / 3.5;
		margin-bottom: 150px;
	}

	#contact {
		h2 {
			text-align: center;
		}
		p {
			font-size: 3.5rem;
			margin-bottom: 50px;
		}
		.wrapper {
			display: flex;
			justify-content: center;
			article {
				margin: 0px 20px;
				p {
					margin-bottom: 0px;
					text-align: center;
					&:nth-of-type(1) {
						font-size: 4rem;
						color: #5e4900;
					}
					&:nth-of-type(2) {
						font-size: 2.5rem;
					}
				}
			}
		}
		table {
			margin: 80px auto 60px !important;
			th {
				padding: 0px 30px 20px 0px;
				font-size: 3.5rem;
				vertical-align: top;
				&:last-child {
					margin-bottom: 0px;
				}
				span {
					color: red;
				}
			}
			td {
				vertical-align: top;
			}
			.form_01 {
				background-color: white;
				padding: 10px 15px;
				font-size: 2rem;
			}
			.form_02 {
				background-color: white;
				padding: 10px 15px;
				font-size: 2rem;
				height: 250px;
			}
		}
		.button {
			font-size: 4rem;
			background-color: #f9cc59;
			padding: 15px 140px;
			width: fit-content;
			margin: auto;
			display: block;
		}
	}

	#single {
		max-width: 1200px;
		margin: 100px auto 0px;
		padding-bottom: 100px;
		article {
			max-width: 800px;
			margin: 100px auto 0px;
			figure {
				margin-bottom: 30px;
				& img {
					width: 100%;
					height: auto;
				}
			}
			h1 {
				margin-bottom: 5px;
				line-height: 1.8;
			}
			.f_18 {
				margin-bottom: 60px !important;
				display: block;
			}
			p {
				margin-bottom: 20px !important;
			}
		}
		.single_pn {
			max-width: 500px;
			display: flex !important;
			justify-content: space-between;
			align-items: center;
			font-size: 1.6rem !important;
			margin: 80px auto 0px;
			padding: 20px 20px;
			transition: all 0.25s;
			p {
				margin-bottom: 0px !important;
			}
			.fa-angle-left {
				margin-right: 5px;
			}
			.fa-angle-right {
				margin-left: 5px;
			}
			& a:hover {
				opacity: 0.8;
				transition: all 0.25s;
			}
		}
	}

	#blog {
		max-width: 1200px;
		margin: 100px auto 0px;
		.wrapper_blog {
			max-width: 900px;
			margin: auto;
			padding: 100px 0px;
			&::after {
				content: "";
				display: block;
				width: 31%;
			}
			article {
				margin-bottom: 50px;
				figure {
					position: relative;
					overflow: hidden;
				}
				& img {
					cursor: pointer;
					transition: all 0.25s;
				}
				&:hover img {
					transform: scale(1.1);
					transition: all 0.25s;
				}
			}
		}
	}

	.page {
		width: 100%;
		display: block;
		.page-numbers {
			display: flex;
			justify-content: center;
			font-size: 2.2rem;
			padding: 5px 7px;
			& a {
				color: lightgray !important;
				transition: all 0.25s;
				&:hover {
					color: #141414 !important;
					transition: all 0.25s;
				}
			}
		}
	}
}

@media screen and (max-width: 1140px) {
	#header {
		nav {
			font-size: 2.6rem;
		}
	}

	#contact {
		.wrapper {
			flex-direction: column;
			article {
				margin-bottom: 30px;
				&:last-child {
					margin-bottom: 0px;
				}
			}
		}
	}
}

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

@media screen and (max-width: 1010px) {
	#header {
		nav {
			font-size: 2.2rem;
		}
	}
}

@media screen and (max-width: 900px) {
	#header {
		nav {
			font-size: 2rem;
			& a {
				margin: 0px 10px;
			}
		}
	}

	#notice {
		ul {
			max-width: 85%;
		}
	}
}

/*ipadmini*/
@media screen and (max-width: 768px) {
}

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

@media screen and (max-width: 599px) {
	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: 9px;
				top: 13px;
				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: #fff4e0;
				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: 100vh;
					padding-left: 0;
					list-style-type: none;
					li {
						line-height: 3;
						font-size: 2.6rem;
					}
				}
			}
		}
	}

	.space {
		padding: 0px 20px;
		margin-bottom: 80px !important;
	}

	#header {
		nav {
			display: none;
		}
	}

	h2 {
		font-size: 4rem;
		text-align: center;
	}

	#mv {
		margin: 0px 0px 60px;
		z-index: 1;
		position: sticky;
		h1 {
			font-size: 5rem;
		}
		figure {
			height: 330px;
			& img {
				height: 100%;
				object-fit: cover;
			}
		}
	}

	#explanation {
		h2 {
			font-size: 2.8rem;
			margin-bottom: 60px;
		}
		article {
			flex-direction: column-reverse;
			div {
				margin-right: 0px;
				text-align: center;
				h3 {
					font-size: 3rem;
				}
				p {
					font-size: 2rem;
				}
			}
			figure {
				margin-bottom: 30px;
			}
		}
	}

	#features {
		.wrapper {
			article {
				width: 100%;
				h3 {
					margin-bottom: 20px;
					font-size: 3rem;
				}
				p {
					font-size: 1.8rem;
				}
			}
		}
	}

	#product {
		.wrapper {
			article {
				max-width: calc((100% - 30px) / 2);
				figure {
					height: 135px;
					& img {
						height: 135px;
					}
				}
				h3 {
					font-size: 2.2rem;
				}
			}
		}
	}

	#notice {
		ul {
			max-width: 100%;
			li {
				padding: 0px 0px 25px 0px;
				margin-bottom: 20px;
				h3 {
					font-size: 2.6rem;
					margin-bottom: 8px;
				}
				p {
					font-size: 1.8rem;
				}
			}
		}
	}

	#company {
		& table {
			th {
				font-size: 2rem;
				padding-right: 30px;
			}
			td {
				font-size: 2rem;
			}
		}
	}

	#map {
		aspect-ratio: 10 / 7;
	}

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

	.wpcf7-response-output {
		margin: 20px 0px 0px !important;
		padding: 0px !important;
		font-size: 1.8rem !important;
		line-height: 1.6 !important;
	}

	#contact {
		p {
			font-size: 2rem;
			margin-bottom: 40px;
		}
		.wrapper {
			margin-bottom: 50px;
			article {
				margin-bottom: 30px;
				p {
					&:nth-of-type(1) {
						font-size: 2.8rem;
						color: #5e4900;
					}
					&:nth-of-type(2) {
						font-size: 1.5rem;
						letter-spacing: 0em;
					}
				}
			}
		}

		table {
			width: 100%;
			table-layout: fixed;
			word-break: break-all;
			word-wrap: break-all;
			th,
			td {
				display: block;
				width: 100%;
			}

			th {
				padding: 20px 0px 10px;
				font-size: 2rem;
			}

			.form_01,
			.form_02 {
				width: 100%;
			}
		}

		.button {
			font-size: 2.8rem;
			padding: 15px 100px;
		}
	}
}