/*@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;700&family=Roboto:wght@100;400;700&family=Train+One&display=swap");*/

body,
button,
input::placeholder,
option,
.sans-serif {
	font-family: "Reem Kufi", "Noto Sans JP", "Noto Serif JP", sans-serif;
}
.serif {
	font-family: serif;
}

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	font-size: clamp(10px, calc(0.625rem + ((1vw - 3.75px) * 0.8511)), 16px);
	min-height: 0vw;
}

::selection {
	background: linear-gradient(45deg, rgb(227, 96, 101));
}

html,
body {
	overflow-x: hidden;
	color: #4c4948;
}

a {
	text-decoration: none;
}

img {
	max-width: 100%;
}

ul,
ol {
	list-style: none;
}

h1,
h2,
h3,
h4,
h5 {
	font-weight: 400;
}

sup {
	font-size: 0.5em;
	vertical-align: top;
}

sub {
	font-size: 0.75em;
	vertical-align: baseline;
}

address {
	font-style: normal;
}

.pc {
	display: none;

	@media (min-width: 767px) {
		display: inline;
	}
}

.smp {
	display: inline;

	@media (min-width: 767px) {
		display: none;
	}
}

* { 
  padding: 0;
	margin: 0;
}

/*a.ex-link {
	display: flex;
	width: 22rem;
	margin: 5rem auto;
	justify-content: center;
	align-items: center;
	background: #fff;
	color: #000;
	padding: 1.5rem;
	border-radius: 1.25rem;
	font-size: 1.5rem;
	border: 0.25rem #000 solid;

	& > * {
		padding: 0 0.5rem;
	}
}+/

*[data-aos] {
	transition: 1s cubic-bezier(0.75, 0, 0.25, 1);
}

*[data-aos=""].osb,
*[data-aos="fadeIn"].osb {
	opacity: 0;
}

*[data-aos="fromRight"].osb {
	transform: translateX(100px);
	opacity: 0;
}

*[data-aos="fromLeft"].osb {
	transform: translateX(-100px);
	opacity: 0;
}

*[data-aos="fromBottom"].osb {
	transform: translateY(100px);
	opacity: 0;
}

*[data-aos="fromTop"].osb {
	transform: translateY(-100px);
	opacity: 0;
}

*[data-aos="bounce"].osb {
	animation: none;
	opacity: 0;
}

*[data-aos="bounce"] {
	animation: boing 1s ease-in-out 1 forwards;
	transform-origin: center;
}

*[data-aos="zoomRotate"].osb {
	animation: none;
	opacity: 0;
}

*[data-aos="zoomRotate"] {
	animation: zoomrotate 1s ease-in-out 1 forwards;
	transform-origin: center;
}

*[data-aos^="mask"] {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

*[data-aos="maskToRight"].osb,
*[data-aos="maskToBottom"].osb,
*[data-aos="maskToLeft"].osb {
	animation: none;
	opacity: 0;
}

*[data-aos="maskToRight"] {
	animation: maskToRight 0.6s ease-in-out forwards;
	transform-origin: left;
}

*[data-aos="maskToBottom"] {
	animation: maskToBottom 0.6s ease-in-out forwards;
	transform-origin: top;
}

*[data-aos="maskToLeft"] {
	animation: maskToLeft 0.6s ease-in-out forwards;
	transform-origin: right;
}

@keyframes maskToRight {
	0% {
		clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	}
	100% {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
}

@keyframes maskToBottom {
	0% {
		clip-path: polygon(0 100%, 100% 100%, 0 100%, 100% 100%);
	}
	100% {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
}

@keyframes maskToLeft {
	0% {
		clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
	}
	100% {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
}
@keyframes boing {
	0% {
		transform: matrix(0.5, 0, 0, 0.5, 0, 0);
		opacity: 1;
	}
	3% {
		transform: matrix(0.658, 0, 0, 0.7035, 0, 0);
	}
	5% {
		transform: matrix(0.725, 0, 0, 0.7995, 0, 0);
	}
	7% {
		transform: matrix(0.8295, 0, 0, 0.9465, 0, 0);
	}
	9% {
		transform: matrix(0.9415, 0, 0, 1.084, 0, 0);
	}
	10% {
		transform: matrix(0.971, 0, 0, 1.113, 0, 0);
	}
	13% {
		transform: matrix(1.0615, 0, 0, 1.166, 0, 0);
	}
	14% {
		transform: matrix(1.0705, 0, 0, 1.1655, 0, 0);
	}
	18% {
		transform: matrix(1.104, 0, 0, 1.1195, 0, 0);
	}
	19% {
		transform: matrix(1.106, 0, 0, 1.0935, 0, 0);
	}
	21% {
		transform: matrix(1.098, 0, 0, 1.0345, 0, 0);
	}
	24% {
		transform: matrix(1.0755, 0, 0, 0.98, 0, 0);
	}
	25% {
		transform: matrix(1.067, 0, 0, 0.969, 0, 0);
	}
	29% {
		transform: matrix(1.0315, 0, 0, 0.9485, 0, 0);
	}
	30% {
		transform: matrix(1.024, 0, 0, 0.9495, 0, 0);
	}
	36% {
		transform: matrix(0.9895, 0, 0, 0.981, 0, 0);
	}
	37% {
		transform: matrix(0.986, 0, 0, 0.9895, 0, 0);
	}
	41% {
		transform: matrix(0.9805, 0, 0, 1.011, 0, 0);
	}
	44% {
		transform: matrix(0.983, 0, 0, 1.016, 0, 0);
	}
	52% {
		transform: matrix(0.9955, 0, 0, 1.003, 0, 0);
	}
	60% {
		transform: matrix(1.003, 0, 0, 0.995, 0, 0);
	}
	63% {
		transform: matrix(1.0035, 0, 0, 0.996, 0, 0);
	}
	75% {
		transform: matrix(1.0005, 0, 0, 1.0015, 0, 0);
	}
	85% {
		transform: matrix(0.9995, 0, 0, 1, 0, 0);
	}
	91% {
		transform: matrix(0.9995, 0, 0, 0.9995, 0, 0);
	}
	100% {
		transform: matrix(1, 0, 0, 1, 0, 0);
	}
}

header {
	background: url(../img/main.jpg) center center / cover no-repeat;
	width: 100vw;
	height: calc(1080 * 100vw / 1980);
	min-height: 80vh;
	position: relative;

	@media (max-width: 767px) {
		background-position: calc(50% - 14rem) 50%;
	}

	div {
		nav {
			#top-logo {
				text-align: center;
				padding: 1rem 0;
				border-bottom: 1px solid #c8c8c8;
				transition: 0.3s;
				position: relative;

				@media (max-width: 767px) {
					border: none;
					position: fixed;
					width: 100%;
					background: rgba(255, 255, 255, 0);
					z-index: 201;
				}

				#hum {
					display: none;
					position: absolute;
					right: 1rem;
					top: 50%;
					transform: translateY(-50%);
					width: 40px;
					height: 40px;
					background: url(../img/hum3x.png) center top / 100% no-repeat;

					@media (max-width: 767px) {
						display: block;
					}
				}

				a {
					img {
						width: 240px;
						font-family: "Roboto", sans-serif;

						@media (max-width: 767px) {
							width: 160px;
						}
					}
				}
			}

			ul {
				max-width: 1280px;
				margin: 0 auto;
				display: flex;
				justify-content: center;
				transition: 0.3s;

				@media (max-width: 767px) {
					width: 100%;
					height: 100vh;
					display: block;
					background: rgba(63, 63, 63, 0.98);
					color: #fff;
					padding-top: 128px;
					z-index: 200;
					position: fixed;
					opacity: 0;
					pointer-events: none;
				}

				li {
					width: calc(100% / 6);
					text-align: center;

					@media (max-width: 767px) {
						width: 100%;
						text-align: left;
						padding: 1rem 4rem;

						&:nth-of-type(-n + 6) {
							a::after {
								content: "";
								width: 1em;
								height: 1em;
								display: inline-block;
								background: url(../img/smp-nav-arrow.png) center center / contain no-repeat;
								margin-left: 0.4em;
							}
						}
					}

					a {
						display: block;
						padding: 0.5rem 0;
						margin: 0.5rem 0;
						border: 1px solid #c8c8c8;
						border-width: 0 1px;
						text-transform: uppercase;
						color: #111;

						@media (max-width: 767px) {
							border: none;
							font-size: 2rem;
							color: #fff;
						}
					}

					&:nth-of-type(7),
					&:nth-of-type(8) {
						text-align: center;
						display: none;

						@media (max-width: 767px) {
							display: block;
						}

						a {
							display: inline-block;
							width: 24rem;
							padding: 0;
							margin: 0;
						}
					}
					&:nth-of-type(7) {
						padding: 6rem 0 0.5rem;
					}
					&:nth-of-type(8) {
						padding: 0.5rem 0 6rem;
					}
				}
			}

			.catch {
				width: 100%;
				max-width: 1280px;
				margin: 0 auto;
				padding-left: 1rem;
				position: absolute;
				left: 50%;
				top: 40%;
				transform: translate(-50%, 0);

				@media (max-width: 767px) {
					top: 30%;
				}

				h2 {
					margin: 1rem 0;
					font-size: 3rem;
					font-weight: 700;

					span {
						color: #a08e2b;
					}
				}

				h1 {
					font-size: 1.5rem;

					em {
						font-style: normal;
						display: inline-block;
						text-align: center;
						font-size: 3.5rem;
						color: #fff;
						background: #a08e2b;
						border-radius: 50%;
						width: 5.75rem;
						line-height: 5.75rem;
						margin: 0 0.5rem;
						font-weight: 700;
					}
				}
			}
		}

		.new {
			img {
				width: 20rem;
				position: absolute;
				// left: 60%;
				right: 10%;
				bottom: 6rem;
				filter: drop-shadow(0 0 0.3rem rgba(255, 255, 255, 1));
			}
		}
	}
}

@media (max-width: 767px) {
	.smpMenuActivated {
		overflow: hidden;

		#top-logo {
			background: rgba(255, 255, 255, 0.95);
		}
		#hum {
			animation: humhum 0.3s linear forwards;
		}
		nav ul {
			opacity: 1;
			pointer-events: auto;
		}
	}
}

@keyframes humhum {
	0% {
		opacity: 1;
		background-position: center top;
	}
	50% {
		opacity: 0;
		background-position: center top;
	}
	51% {
		opacity: 0;
		background-position: center bottom;
	}
	100% {
		opacity: 1;
		background-position: center bottom;
	}
}

section {
	padding: 7.5rem 0;

	@media (max-width: 767px) {
		padding: 4rem 0;
	}

	& > div {
		max-width: 1080px;
		margin: 0 auto;
	}
}

section:not(#concept) {
	& > div {
		text-align: center;

		h1 {
			display: inline-block;
			background: #000;
			color: #fff;
			text-transform: uppercase;
			margin: 0 auto 3rem;
			font-size: 3rem;
			font-weight: 700;
			padding: 0.5rem 2rem;
		}
	}
}

section#concept {
	& > div {
		max-width: 1080px;

		h1 {
			small {
				text-transform: uppercase;
			}

			img {
				width: 18.75rem;
			}

			@media (max-width: 767px) {
				padding-left: 2rem;

				& + p {
					padding-left: 2rem;
				}
			}
		}

		.con-head {
			img {
				width: 50rem;
				margin: 2rem 0 0 auto;
				display: block;
				position: relative;
				z-index: -1;
			}

			p {
				width: 50%;
				background: #000;
				color: #fff;
				line-height: 2rem;
				padding: 3rem 4rem;
				margin: -12rem 0 2rem;

				@media (max-width: 767px) {
					width: 60%;
					padding: 2rem;
				}
			}
		}

		div.con-con {
			margin: 4rem 0;

			img {
				width: 37.5rem;
				display: block;
				position: relative;
				z-index: -1;

				margin: 2rem 0 -12rem;

				@media (max-width: 767px) {
					margin: 16rem 0 -36rem;
				}
			}

			h2 {
				text-align: right;
				font-size: 3rem;
				text-transform: uppercase;
				letter-spacing: 0.05em;
				padding: 1rem 4rem 0;

				span {
					color: #a08e2b;
					font-weight: 700;
				}
			}

			p {
				// font-size: 0.8rem;
				font-size: 1rem;
				width: 36rem;
				line-height: 1.8rem;
				padding: 2rem 4rem;
				margin: 0 0 2rem auto;
				background: rgba(255, 255, 255, 0.9);

				@media (max-width: 767px) {
					margin: 0 0 24rem auto;
					padding: 2rem;
				}
			}

			&:nth-of-type(3) {
				img {
					margin: 2rem 0 -12rem auto;

					@media (max-width: 767px) {
						margin: 32rem 0 -32rem auto;
					}
				}

				h2 {
					text-align: left;
				}

				p {
					margin: 0 auto 2rem 0;

					@media (max-width: 767px) {
						width: 32rem;
						margin: 0 auto 24rem 0;
					}
				}
			}
		}
	}
}

section#new-item {
	background: #f3f3f3;
	padding: 0 0 7.5rem;

	& > div {
		text-align: center;
		max-width: 1080px;

		h1 {
			transform: translateY(-50%);
		}

		ul {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin: 4rem 0;

			li {
				width: 50%;

				@media (max-width: 767px) {
					width: 100%;
					padding: 1rem 4rem;
				}

				img {
					width: 80%;
				}
			}
		}
	}
}

.desc {
	background: #000;
	color: #fff;
	border-radius: 1rem;
	padding: 3rem;

	h4 {
		font-size: 2rem;
		font-weight: 700;
	}

	h4 + p {
		margin: 2rem 0;
		text-align: left;
		// font-size: 0.8rem;
		font-size: 1rem;
	}

	h3 {
		font-size: 1rem;
	}

	h3 + p {
		// font-size: 0.8rem;
		font-size: 1rem;

		span {
			display: inline-block;
			background: #fff;
			color: #111;
			padding: 0.3rem 1rem;
			margin: 0.5rem auto 1.5rem;
		}
	}

	a {
		color: #0051c4;
		font-size: 1.5rem;
		font-weight: 700;
		padding: 0.3rem 1rem;
		display: inline-block;
		border-radius: 0.5rem;
		margin: 0.5rem 0.3rem;
		padding: 0.6rem 2rem;
		background: #fff;
		transition: 0.4s;

		&:hover {
			color: #fff;
			background: #0051c4;
		}

		&:nth-of-type(2) {
			color: #bf0000;
			&:hover {
				color: #fff;
				background: #bf0000;
			}
		}
	}
}

section#features {
	& > div {
		h1 + img {
			width: 75%;
			display: block;
			margin: 0 0 -20% auto;
			z-index: -1;
			position: relative;
		}

		.fea-head {
			width: 50%;
			background: #000;
			color: #fff;
			padding: 3rem;
			text-align: left;

			@media (max-width: 767px) {
				width: 70%;
				padding: 2rem;
			}

			h2 {
				font-size: 2.2rem;
				font-weight: 700;
				margin: 0 0 1rem;
			}

			p {
				font-size: 1.3rem;
				line-height: 2.2rem;
			}
		}

		.fea-con {
			& > div {
				text-align: left;
				margin: 6rem 0;

				dl {
					display: inline-flex;
					align-items: center;
					background: #000;
					color: #fff;
					padding: 0.5rem 1rem;

					dt {
						padding: 0.5rem;

						img {
							width: 5.5rem;
						}
					}

					dd {
						padding: 0.5rem;
						text-align: left;
						span {
							font-size: 2rem;
						}
					}
				}

				&:nth-of-type(1) {
					dl + img {
						margin-top: -4rem;
						position: relative;
						z-index: -1;
					}
				}

				&:nth-of-type(2) {
					text-align: right;

					& > div {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						height: 40rem;

						background: url(../img/sp2-dog.png) left center / 60% no-repeat;

						& > div {
							width: 45%;

							@media (max-width: 767px) {
								width: 70%;
							}

							padding: 0.5rem;
							background: rgba(255, 255, 255, 0.5);

							h3 {
								font-size: 3rem;
								text-align: center;
								margin-bottom: 1.5rem;

								strong {
									color: #a08e2b;
								}
							}

							ul {
								display: grid;
								grid-template-columns: 1fr 1fr;
								gap: 0.75rem;

								li {
									text-align: center;
									background: #000;
									color: #fff;
									font-size: 1.5rem;
									padding: 0.3rem;
								}
							}
						}
					}
				}

				&:nth-of-type(3) {
					& > div {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						height: 40rem;

						background: url(../img/sp3-lav.png) right center / 60% no-repeat;

						& > div {
							width: 45%;

							@media (max-width: 767px) {
								width: 70%;
							}

							padding: 0.5rem;
							background: rgba(255, 255, 255, 0.5);

							h3 {
								font-size: 3rem;
								text-align: left;
								margin-bottom: 1.5rem;

								@media (max-width: 767px) {
									margin: 0 0 1.5rem 1rem;
								}

								strong {
									color: #a08e2b;
								}
							}

							div {
								background: #000;
								color: #fff;
								padding: 3rem;

								@media (max-width: 767px) {
									padding: 2rem;
								}

								h4 {
									font-size: 1.3rem;
									font-weight: 700;
									margin-bottom: 1rem;
								}
							}
						}
					}
				}
			}
		}
	}
}

section#quality {
	& > div {
		h1 + img {
			display: block;
			margin: 0 0 -17rem;
			z-index: -1;
			position: relative;

			@media (max-width: 767px) {
				margin: 0 0 -12rem;
			}
		}

		.qua-head {
			width: 25rem;
			padding: 3rem;
			margin: 0 3.5rem 0 auto;
			text-align: left;
			// background: #fff;
			background: #f8f8f8;

			@media (max-width: 767px) {
				width: 35rem;
				padding: 2rem;
			}

			h2 {
				font-size: 1.3rem;
				font-weight: 700;
				margin-bottom: 1rem;
			}
		}

		.qua-con {
			& > div {
				margin: 7rem 0 0;

				img {
					display: block;
					position: relative;
					z-index: -1;
				}

				& > div {
					text-align: left;

					h3 {
						display: inline-block;
						background: #000;
						color: #fff;
						font-size: 2.5rem;
						padding: 0.5rem 1rem;
					}

					div {
						background: #fff;
						padding: 3rem;
						text-align: left;

						h4 {
							font-size: 1.3rem;
							font-weight: 700;
							margin-bottom: 1rem;
						}

						p.notes {
							font-size: 0.75rem;
							margin-top: 1rem;
						}
					}
				}
			}

			& > div:nth-of-type(1) {
				img {
					width: 75%;
					margin: 0 0 -13rem auto;

					@media (max-width: 767px) {
						margin: 0 0 -6rem auto;
					}
				}
				& > div {
					width: 70%;

					@media (max-width: 767px) {
						width: 90%;
					}
				}
			}

			& > div:nth-of-type(2) {
				img {
					width: 55%;
					margin: 0 0 -13rem 0;

					@media (max-width: 767px) {
						width: 80%;
						margin: 0 0 -6rem 0;
					}
				}
				& > div {
					width: 70%;
					margin: 0 0 0 auto;
					text-align: right;

					@media (max-width: 767px) {
						width: 90%;
					}
				}
			}
		}
	}
}

section#howtouse {
	& > div {
		ol {
			li {
				text-align: left;
				& > img {
					width: 75%;
				}

				& > dl {
					display: inline-flex;
					align-items: center;
					background: #000;
					color: #fff;
					padding: 0.5rem 1rem;
					width: 36rem;

					transform: translateY(-50%);

					dt {
						width: 6rem;
						padding: 0.5rem;

						img {
							width: 100%;
						}
					}

					dd {
						width: 30rem;
						padding: 0.5rem;
						text-align: left;
						p {
							font-size: 1rem;
						}
					}
				}
			}
			li:nth-of-type(2) {
				text-align: right;
				margin: 10rem 0;

				@media (max-width: 767px) {
					margin: 4rem 0;
				}
			}
		}
	}
}

/*section#sns {
	& > div {
		ul {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			gap: 1rem;

			li {
				background: url(../img/sns-insta-whole.jpg) center center / 300% no-repeat;
				font-size: 0px;

				&:nth-of-type(1) {
					background-position: left top;
				}
				&:nth-of-type(2) {
					background-position: center top;
				}
				&:nth-of-type(3) {
					background-position: right top;
				}
				&:nth-of-type(4) {
					background-position: left center;
				}
				&:nth-of-type(5) {
					background-position: center center;
				}
				&:nth-of-type(6) {
					background-position: right center;
				}
				&:nth-of-type(7) {
					background-position: left bottom;
				}
				&:nth-of-type(8) {
					background-position: center bottom;
				}
				&:nth-of-type(9) {
					background-position: right bottom;
				}

				&::before {
					content: "";
					display: block;
					width: 100%;
					padding-top: 100%;
				}

				span {
					color: transparent;
				}
			}
		}
	}
}*/

#link-amazon {
	& > div {
		& > img {
			width: 25rem;
			position: relative;
			z-index: 10;
		}

		.desc {
			margin-top: -8.5rem;
			padding: 8.5rem 3rem 4rem;
			width: 36rem;
			margin: -8.5rem auto 0;
		}
	}
}

section#news {
	& > div {
		dl {
			width: 30rem;
			margin: 0 auto;
			display: grid;
			grid-template-columns: 8rem 22rem;

			dt {
				text-align: center;
				display: grid;
				align-self: center;
			}

			dd {
				text-align: left;
			}
		}
	}
}

footer {
	background: #000;
	margin-top: 8rem;

	& > div {
		text-align: center;
		color: #fff;
		padding: 0.5rem 0 1.5rem;

		& > img {
			width: 13rem;
			margin: 1.5rem auto;
		}

		h1,
		h2,
		h3,
		address {
			font-size: 1rem;
		}

		address {
			margin-bottom: 1rem;
		}

		h3 {
			img {
				width: 10rem;
			}
		}

		h2 {
			font-family: "Reem Kufi", "Noto Sans JP", "Noto Serif JP", sans-serif;
		}
	}
}

.totop {
	position: fixed;
	bottom: 0;
	left: 50%;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	transform: translateX(-50%);
	text-align: right;

	a {
		display: inline-block;
		margin: 1rem;

		img {
			width: 4rem;
			height: 4rem;
			opacity: 0.8;
		}
	}
}