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

/* 中身======================================================================================================== */

#top{
	text-align: center;
}
#top .logo img{
	height: 80px;
}
#top h3{
	font-size: 5vw;
}

.article{
	border-top: solid 2px #FFF;
}
.article .photo{
	position: relative;
}
.article .illust{
	position: absolute;
	bottom: 0;
	right: 4vw;
}
.article#a02 .illust{
	right: 0;
	left: 0;
	margin: 0 auto;
}
.article .illust img{
	max-height: 60vw;
	max-width: 60vw;
}
.article#a04 .illust img{
	max-height: 35vw;
}
.article .text{
	background-color: rgba(0,0,0,0.7);
	color: #FFF;
	padding: 4vw;
}
.article .text dl{
	display: flex;
	align-items: center;
}
.article .text dt{
}
.article .text .num{
	width: 25vw;
	height: 25vw;
	border-radius: 25vw;
	background-color: #111;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 4vw;
	line-height: 1.2;
}
.article .text .num span{
	font-size: 8vw;
}

.article .text dd{
	flex: 1;
	margin-left: 4vw;
}
.article .text h4{
	font-size: 4vw;
}
.article .text dd p{
	text-align: left;
}



/* PCのみ======================================================================================================== */
@media print and (min-width: 751px), screen and (min-width: 751px){
#top .logo img{
	height: 100%;
	margin-bottom: 20px;
}
#top h3{
	font-size: 40px;
}
#list{
	display: flex;
	flex-wrap: wrap;
}
.article{
	width: 50%;
	border-top: none;
	position: relative;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	display: flex;
}
.article#a01{ background-image: url(images/bg01.jpg); }
.article#a02{ background-image: url(images/bg02.jpg); }
.article#a03{ background-image: url(images/bg03.jpg); }
.article#a04{ background-image: url(images/bg04.jpg); }
.article .photo{
	position: static;
}
.article .illust{
}
.article#a01 .illust{ right: inherit; left: 47%; }
.article#a02 .illust{ right: 5%; left: inherit; }
.article#a04 .illust{ right: inherit; left: 40%; top: 80px; }
.article .illust img{
	max-height: 100%;
	max-width: 100%;
}
.article#a04 .illust img{
	max-height: 35vw;
}
.article .text{
	width: 50%;
	padding: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.article .text dl{
	display: block;
	padding: 50px 20px;
}
.article .text .num{
	width: 140px;
	height: 140px;
	margin: 0 auto 20px;
	border-radius: 140px;
	font-size: 20px;
}
.article .text .num span{
	font-size: 60px;
}

.article .text dd{
	margin-left: 0;
}
.article .text h4{
	font-size: 20px;
	margin-bottom: 10px;
}




}