/* ITOKI HOME CSS */

/* Font マティス */

* {
	font-family: fot-matisse-pron, sans-serif;
	font-weight: 500;
	font-style: normal;
}


/* レイアウト */
.wrapper {
	margin: 0 auto;
	max-width: 1200px;
	width: 100vw;
}

#concept {
	display: block;
	max-width: 1200px;
	width: 100vw;
	max-height: 590px;
	height: 66vw;
	text-align: center;
	position: relative;
}

#concept .main-logo {
	max-width: 660px;
	width: 100%;
	position: absolute;
	top: 20%;
	left: 0;
	right: 0;
	margin: auto;
}

#concept .main-logo h1 {
	margin-bottom: 6.7%
}

#concept .main-logo h1 img {
	max-width: 240px;
	width: 40%;
}

#concept div p {
	font-size: 2.6rem;
	line-height: 1.75em;
}

#discript-ih {
	max-width: 1000px;
	margin: 10% 5%;
}

#discript-ih h2 {
	max-width: 60%;
	border-bottom: 3px solid #c9d9dc;
	margin-bottom: 4.5%;
}

#discript-ih div.main {
	display: flex;
}

#discript-ih div.main div.main-txt {
	max-width: 670px;
	margin-right: 4vw;
}

#discript-ih div.main div.main-txt p {
	margin-bottom: 2em;
}

.lineup-img {
	width: 100%;
	max-width: 1200px;
	margin-bottom: 9px;
}

.lineup-img ul {
	display: flex;
}

.lineup-img ul li {
	margin-right: 9px;
}

.product {
	margin: 10% 20px 50px;
}

.product h2 {
	max-width: 60%;
	border-bottom: 3px solid rgb(201, 217, 220);
	margin-bottom: 50px;
	margin-top: 30px;
}

.product h3 {
	max-width: 1100px;
	margin: 10px auto 50px;
	position: relative;
	text-indent: 1em;
	padding-bottom: 10px;
}

.product h3::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 4px;
	width: 50px;
	background: rgb(230, 61, 48);
}

.product h3::after {
	content: "";
	position: absolute;
	width: 200px;
	left: 0;
	bottom: 0;
	border-bottom: 2px solid #c9d9dc;
}

.product h4 {
	max-width: 1040px;
	margin: 10px auto 50px;
	position: relative;
	text-indent: 1em;
}

.product h4::after {
	content: "";
	display: block;
	width: 50px;
	border-bottom: 2px solid rgb(0, 21, 73);
}

.product h4.qnq span {
	padding-left: 5em;
}

.product h4 img {
	display: inline-block;
	width: 80px;
	position: absolute;
	top: 10px;
}

.product ul {
	max-width: 1040px;
	margin: 10px auto 30px;
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	gap: 10px;
}

.product li {
	width: 100%;
	max-width: 250px;
	text-align: center;
	margin-bottom: 10%;
	position: relative;
}

.product li img {
	max-width: 250px;
	width: 100%;
}

.product li a span {
	display: none;
}

.product li a:hover span {
	display: block;
	position: absolute;
	top: 30%;
	left: 0;
	right: 0;
	background: #5a5a5a60;
	font-size: 2.6rem;
	color: #ffffff;
	line-height: 3.0em;
}

.product li a:hover span.step {
	font-size: 2.0rem;
	line-height: 1.5em;
	padding: 9px;
}

.product li a:hover img {
	filter: blur(2px);
	-webkit-filter: blur(2px);
}

section.andmore {
	margin: 20px 10px 50px;
	;
}

section.andmore p {
	text-align: right;
	font-size: 1.4rem;
}


footer {
	max-width: 1200px;
	width: 100vw;
	text-align: center;
	position: relative;
}


footer div {
	max-width: 1200px;
	width: 100vw;
	max-height: 510px;
	height: 42.5vw;
	text-align: center;
	position: relative;
}

footer div img {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-width: 200px;
	width: 100%;
}

footer address {
	position: absolute;
	bottom: 5%;
	right: 0;
	left: 0;
	font-size: 0.8em;
}

@media screen and (max-width: 1079px) {
	.product ul {
		max-width: 830px;
	}
}

@media screen and (max-width: 1024px) {

	/* 1024pxまでの幅の場合に適応される */
	#discript-ih h2, .product h2 {
		max-width: 65%;
		font-size: 2.8rem;
	}

}


@media screen and (max-width: 849px) {
	.product ul {
		max-width: 620px;
	}

	.product li {
		max-width: 200px;
	}

	.product li img {
		max-width: 200px;
	}

}

@media screen and (max-width: 768px) {

	/* 768pxまでの幅の場合に適応される */
	#concept .main-logo h1 {
		margin-bottom: 4%
	}

	#concept .main-logo h1 img {
		max-width: 180px;
		width: 40%;
	}

	#concept div p {
		font-size: 1.8rem;
		line-height: 1.75em;
	}

	#discript-ih h2, .product h2 {
		max-width: 90%;
		font-size: 2.4rem;
	}

	#discript-ih div.main {
		display: block;
	}

	#discript-ih div.main div.main-img img {
		width: 100%;
	}
}

@media screen and (max-width: 659px) {
	.product ul {
		max-width: 410px;
	}

	.product li {
		max-width: 250px;
	}

	.product li img {
		max-width: 250px;
	}
}

@media screen and (max-width: 480px) {

	/* 480pxまでの幅の場合に適応される */

	#concept .main-logo h1 {
		margin-bottom: 4%
	}

	#concept .main-logo h1 img {
		max-width: 100px;
		width: 40%;
	}

	#concept div p {
		font-size: 1.5rem;
		line-height: 1.75em;
	}

	.ontone img {
		width: 100%;
		height: 240px;
		object-fit: cover;
		object-position: 5% 0;
	}

	#discript-ih h2, .product h2 {
		font-size: 2.0rem;
		max-width: 90%;
		margin-bottom: 4.5%;
	}

	#discript-ih div.main div.main-img img {
		width: 100%;
		height: 400px;
		object-fit: cover;
		object-position: 75% 0;
	}

	.product ul {
		display: block;
		width: 250px;
	}

	section.andmore p {
		text-align: right;
		font-size: 1.2rem;
	}

	footer div img {
		max-width: 120px;
	}

	footer address {
		font-size: 0.6em;
	}

}

@media screen and (max-width: 389px) {

	/* 480pxまでの幅の場合に適応される */
	#concept .main-logo {
		width: 100%;
		position: absolute;
		top: 20%;
		left: 0;
		right: 0;
		margin: auto;
	}

	#concept .main-logo h1 {
		margin-bottom: 4%
	}

	#concept .main-logo h1 img {
		max-width: 80px;
		width: 40%;
	}

	#concept div p {
		font-size: 1.2rem;
		line-height: 1.75em;
	}
}