@charset "UTF-8";

/* mv-page
------------------------------------------------------------ */
#mv-page.page-about::before {
	content: "WHAT";
	position: absolute;
	bottom: -21px;
	left: 86px;
	font-family: 'Barlow', sans-serif;
	font-weight: 400;
	font-size: 21rem;
	color: #d5ecff;
	line-height: 1;
	letter-spacing: -0.07em;
	opacity: 0.5;
	z-index: 2;
}
#mv-page .inner::before {
	content: "";
	position: absolute;
	top: 0;
	right: -30px;
	display: block;
	width: 466px;
	height: 400px;
	background: url(../../assets/img/illust_b.png) no-repeat center;
	background-size: contain;
	z-index: 2;
}

/* content-body
------------------------------------------------------------ */
#content-body section #case-list {
	display: flex;
	justify-content: space-between;
}
#content-body section #case-list li {
	position: relative;
	width: 315px;
	padding-top: 136px;
}
#content-body section #case-list li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	width: 116px;
	height: 123px;
	transform: translateX(-50%);
}
#content-body section #case-list li:nth-child(1)::before {
	background: url(../img/icon_a.png) no-repeat center;
	background-size: contain;
}
#content-body section #case-list li:nth-child(2)::before {
	background: url(../img/icon_b.png) no-repeat center;
	background-size: contain;
}
#content-body section #case-list li:nth-child(3)::before {
	background: url(../img/icon_c.png) no-repeat center;
	background-size: contain;
}
#content-body section #case-list li h2 {
	font-size: 2.8rem;
	font-weight: 700;
	color: #161616;
	text-align: center;
}
#content-body section #case-list li p {
	margin-top: 20px;
	font-size: 1.8rem;
	color: #0d65b0;
	line-height: 1.8;
}
#content-body section #case-list li p strong {
	background: linear-gradient(transparent 75%, #fffe89 20%);
}
#content-body section .note {
	display: flex;
	justify-content: space-between;
	margin-top: 70px;
}
#content-body section .note dl {
	width: 520px;
	padding: 30px 45px;
	border-radius: 30px;
	box-sizing: border-box;
}
#content-body section .note dl:nth-child(1) {
	background-color: #ffe7e9;
}
#content-body section .note dl:nth-child(2) {
	background-color: #d5ecff;
}
#content-body section .note dl dt {
	font-size: 2.4rem;
	font-weight: 700;
	text-align: center;
}
#content-body section .note dl dt span {
	display: block;
	font-size: 1.6rem;
}
#content-body section .note dl:nth-child(1) dt {
	color: #d11323;
}
#content-body section .note dl:nth-child(2) dt {
	color: #0d65b0;
}
#content-body section .note dl dd {
	margin-top: 25px;
}
#content-body section .note dl dd::before {
	content: "（一例）";
	font-size: 1.4rem;
}
#content-body section .note dl dd ul {
	margin-top: 10px;
}
#content-body section .note dl dd ul li {
	padding-left: 1em;
	text-indent: -1em;
	font-size: 1.8rem;
	line-height: 1.8;
}
#content-body section .note dl dd ul li::before {
	content: "・";
}

#content-body .illust-e {
	position: relative;
	margin: 55px auto 0;
	padding: 10px 0 30px 520px;
	line-height: 1.9;
}
#content-body .illust-e::before {
	content: "";
	position: absolute;
	top: 0;
	left: 45px;
	display: block;
	width: 386px;
	height: 300px;
	background: url(../../assets/img/illust_e.png) no-repeat center;
	background-size: contain;
	z-index: 2;
}
#content-body .illust-e p {
	position: relative;
	margin-top: 30px;
	font-size: 1.8rem;
	color: #0d65b0;
}
#content-body .illust-e p strong {
	background: linear-gradient(transparent 75%, #fffe89 20%);
}

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

	/* mv-page
	------------------------------------------------------------ */
	#mv-page.page-about::before {
		bottom: -1.8vw;
		left: auto;
		right: -1vw;
		font-size: 17.33vw;
	}
	#mv-page .inner::before {
		top: 66.33vw;
		right: 10vw;
		width: 62.13vw;
		height: 54.26vw;
		z-index: 2;
	}
	
	/* content-body
	------------------------------------------------------------ */
	#content-body section #case-list {
		display: block;
	}
	#content-body section #case-list li {
		width: 100%;
		margin-bottom: 8.93vw;
		padding-top: 30vw;
	}
	#content-body section #case-list li::before {
		width: 24.8vw;
		height: 26.13vw;
	}
	#content-body section #case-list li h2 {
		font-size: 5.06vw;
	}
	#content-body section #case-list li p {
		margin-top: 4vw;
		font-size: 3.46vw;
	}
	#content-body section .note {
		display: block;
		margin-top: 10.66vw;
	}
	#content-body section .note dl {
		width: auto;
		padding: 4.66vw 5.33vw;
		border-radius: 4vw;
	}
	#content-body section .note dl dt {
		font-size: 4vw;
	}
	#content-body section .note dl:nth-child(1) {
		margin-bottom: 5.33VW;
	}
	#content-body section .note dl dt span {
		font-size: 2.93vw;
	}
	#content-body section .note dl dd {
		margin-top: 25px;
	}
	#content-body section .note dl dd::before {
		font-size: 2.93vw;
	}
	#content-body section .note dl dd ul {
		margin-top: 1.6vw;
	}
	#content-body section .note dl dd ul li {
		font-size: 3.46vw;
	}
	
	#content-body .illust-e {
		margin: 7.33vw auto 0;
		padding: 51.3vw 0 0;
		line-height: 1.9;
	}
	#content-body .illust-e::before {
		left: 4vw;
		width: 69.33vw;
		height: 53.33vw;
	}
	#content-body .illust-e p {
		margin-top: 6vw;
		font-size: 3.46vw;
	}

}