@charset "UTF-8";
/* CSS Document */

/* 中身======================================================================================================== */
#top{
	background-image: url(images/top_bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 10vw 0;
}
#top h3{
	font-size: 5vw;
}
#top h3 + p{
	margin-bottom: 20px;
}
#top h4{
	font-size: 4vw;
}

.article{
	border-top: solid 10px #FFF;
}
.article .before{
	display: flex;
}
.article:nth-child(even) .before{
	flex-direction: row-reverse;
}
.article .before .text{
	width: 50%;
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
}
.article:nth-child(3n-2) .before .text{ background-color: #CD3C3D; }
.article:nth-child(3n-1) .before .text{ background-color: #314F3B; }
.article:nth-child(3n) .before .text{ background-color: #DF5F3A; }
.article .before .text h4{
	font-size: 5vw;
}
.article .before .photo{
	width: 50%;
	position: relative;
}
.article .after{
}
.article .after .photo{
	position: relative;
}
.article .before .photo::before{
	content:"Before";
	font-family: "A1明朝", "A1 Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	display: block;
	line-height: 1;
	background-color: #111;
	color: #FFF;
	padding: 5px;
	position: absolute;
	top: 2vw;
	left: 2vw;
}
.article .after .photo::before{
	content:"After";
	font-family: "A1明朝", "A1 Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	display: block;
	line-height: 1;
	background-color: #111;
	color: #FFF;
	padding: 5px;
	position: absolute;
	top: 2vw;
	left: 2vw;
}





/* PCのみ======================================================================================================== */
@media print and (min-width: 751px), screen and (min-width: 751px){

#top{
	padding: 100px 0;
}
#top h3{
	font-size: 30px;
}
#top h3 + p{
	margin-bottom: 60px;
}
#top h4{
	font-size: 22px;
}

.article{
	display: flex;
}
.article:nth-child(even) {
	flex-direction: row-reverse;
}
.article img{
	width: 100%;
}
.article .before{
	width: 33.33%;
	flex-direction: column !important;
}
.article .before .text{
	width: 100%;
	height: 50%;
}
.article .before .text h4{
	font-size: 40px;
}
.article .before .photo{
	width: 100%;
	height: 50%;
}
_::-webkit-full-page-media, _:future, :root .article .before .text,
_::-webkit-full-page-media, _:future, :root .article .before .photo{
	/* 旧safari用応急措置 */
	height: 22.05vw;
}

.article .after{
	width: 66.66%;
}
.article .before .photo::before,
.article .after .photo::before{
	top: 10px;
	left: 10px;
	font-size: 20px;
	padding: 10px 20px;
}









}