@charset "utf-8";
/* ==================================================
  Food Science Solutions TOP
================================================== */

/* --------------------------------------------------
		.vi
-------------------------------------------------- */

@media screen and (width < 750px) {
	.vi {
		position: relative;
		height: 411px;
		background: url(../img/bak_topvi01_sp.jpg) no-repeat center / cover;
	}
	.vi-title {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		width: 96%;
		margin: 0 auto;
		text-align: center;
		color: #ffffff;
		text-shadow: 0 0 5px #0000001f, 0 0 5px #0000001f, 0 0 5px #0000001f, 0 0 5px #0000001f;
	}
	.vi-title h1 {
		margin-bottom: 5px;
		font-size: 2.3rem;
		font-weight: 300;
		letter-spacing: .1em;
	}
	.vi-title p {
		font-size: 1.3rem;
		font-weight: 300;
		letter-spacing: .1em;
	}
}
@media screen and (width >= 750px) {
	.vi {
	background: url(../img/bak_topvi01_pc.jpg) no-repeat center / cover;
	}
	.vi-inner {
		position: relative;
		height: 509px;
		max-width: 1140px;
		margin: 0 auto;
	}
	.vi-title {
		width: fit-content;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		text-align: center;
		color: #ffffff;
		text-shadow: 0 0 6px #0000001f, 0 0 6px #0000001f, 0 0 6px #0000001f, 0 0 6px #0000001f;
	}
	.vi-title h1 {
		margin-bottom: 10px;
		font-size: 4.2rem;
		font-weight: 300;
		letter-spacing: .1em;
	}
	.vi-title p {
		font-size: 2.3rem;
		font-weight: 300;
		letter-spacing: .1em;
	}
}

/* --------------------------------------------------
		.pagenav
-------------------------------------------------- */
.pagenav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 10px;
	margin-top: 20px;
}
.pagenav > li {
	display: flex;
	flex-direction: column;
	width: 49%;
}
.pagenav > li a {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	width: 100%;
}
.pagenav > li a .img {
	position: relative;
}
.pagenav > li a .img {
	display: block;
}
.pagenav > li a .img span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	width: 100%;
	font-size: 1.8rem;
	color: #ffffff;
	font-weight: 300;
	text-align: center;
}
.pagenav > li a .img span::after {
	display: inline-block;
	width: 25px;
	height: 10px;
	margin-left: 6px;
	background: url('../common/img/arrow_01.png') no-repeat center / contain;
	content: "";
}
.pagenav > li a .pagenav-inner {
	flex: 1;
	border: 1px solid #dddddd;
	border-top: 0;
	padding: 10px 5px;
	font-size: 1.3rem;
}
.pagenav > li a .pagenav-inner .tit {
	font-weight: 700;
	margin-bottom: .5em;
}

.pagenav .pagbox {
	border: 1px solid #dddddd;
}
.pagenav .pagbox .tit {
	padding: 5px;
	text-align: center;
	font-weight: 700;
}
.pagenav .scentpag {
	color: #432e03;
	background: #f1efea;
}
.pagenav .tastepag {
	color: #9e0303;
	background: #fef3f3;
}
.pagenav .texturepag {
	color: #024f81;
	background: #f1f8fc;
}
.pagenav .pagbox .pagenav-inner {
	padding: 10px 5px;
}


@media screen and (width >= 750px) {
	.pagenav {
		width: 1020px;
		margin: 35px auto 0;
	}
	.pagenav > li {
		width: 328px;
	}
	.pagenav > li a .img span {
		font-size: 2.2rem;
	}
	.pagenav > li a .img span::after {
		position: relative;
		top: -5px;
		width: 37px;
		margin-left: 5px;
	}
	.pagenav > li a .pagenav-inner {
		padding: 20px 20px 25px 20px;
		font-size: 1.6rem;
	}
	.pagenav > li a .pagenav-inner .tit {
		font-weight: 700;
		margin-bottom: .5em;
	}

	.pagenav .pagbox .tit {
		padding: 20px 5px;
	}
	.pagenav .pagbox .pagenav-inner {
		padding: 20px 20px 25px 20px;
	}
}

/* --------------------------------------------------
		relation
-------------------------------------------------- */

.relation {
	margin-top: 30px;
	padding: 20px 0 30px;
	background: #f2f8fb;
}
.relation-box {
	display: flex;
	flex-wrap: wrap;
	row-gap: 20px;
	width: fit-content;
	margin: 0 auto;
}
.relation-box li {
	display: flex;
	width: 100%;
}
.relation-box li dl {
	width: 100%;
	padding-left: 10px;
}
.relation-box li dl dt {
	font-weight: 700;
	margin-bottom: 5px;
}


@media screen and (width >= 750px) {
	.relation {
		margin-top: 60px;
		padding: 35px 0 60px;
	}
	.relation-box {
		row-gap: 55px;
	}
	.relation-box li {
		width: 565px;
	}
	.relation-box li dl {
		width: 444px;
		padding-left: 20px;
	}
	.relation-box li dl dt {
		margin-bottom: 10px;
	}
}