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

	- page title
	- contents
		- outline
		- table

-----------------------------------------*/

/*----------------------------------------
	page title
-----------------------------------------*/
.page_ttl_area {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 220px;
	background-color: rgba(232, 232, 232, 0.3);
}

.page_ttl_area .page_ttl {
	font-size: 5.0rem;
	line-height: 1.2;
	text-align: center;
	letter-spacing: 0.08em;
}

.page_ttl_area .page_ttl span:nth-of-type(2) {
	display: block;
	font-size: 1.4rem;
	line-height: 2;
	letter-spacing: 0;
}

@media screen and (max-width: 768px) {
	.page_ttl_area {
		height: 121px;
	}

	.page_ttl_area .page_ttl {
		font-size: 3.6rem;
	}

	.page_ttl_area .page_ttl span:nth-of-type(2) {
		font-size: 1.2rem;
	}
}


/*----------------------------------------
	Area
-----------------------------------------*/
.pos3_1{
	width: 100%;
	margin: 0 0 20px 0;
}
.pos3_1_1{
	width: 100%;
  margin: 0 0 20px 0;
}

.pos3_1_2{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.pos3_1_2 picture,.pos3_1_2 p{
	width: 50%;
}
.pos3_1_2 picture{
	position: relative;
}

.pos3_2{
	width: 100%;
	margin: 50px 0 0 0;
}
.pos3_2 ul{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.pos3_2 ul li{
	width: 40%;
	margin: 20px 5%;
}
.pos3_2_block{
	width: 100%;
	float: left;
	position: relative;
}
.pos3_2_block picture{
	width: 100%;
	float: left;
	position: relative;
}
.pos3_2 ul li p{
	padding: 15px 0 !important;
	line-height: 2.0rem !important;
	float: left;
}
.pos3_2_block picture .caption{
	position: absolute !important;
	right: 5px !important;
	bottom: 0px !important;
	padding: 0!important;
}
.pos3_2_block picture .wh{
	color: #fff;
}

.illust{
	width: 100%;
	margin-bottom: 50px;
}
.i_pics{
	width: 100%;
	margin: 10px 0 100px 0;
}
.i_pics ul{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.i_pics ul li{
	width: 24.25%;
	margin: 10px 1% 10px 0;
}
.i_pics ul li:nth-child(4),.i_pics ul li:nth-child(8){
	margin: 10px 0 10px 0;
}
.i_pics ul li p{
	text-align: right;
	font-size: clamp(0.1rem, 2vw, 1rem) !important;
    line-height:1.5 !important;
}
.i_pics .cap{
	font-size: clamp(0.1rem, 2vw, 1rem) !important;
    line-height:1.5 !important;
}

@media screen and (max-width: 768px) {
	.pos3_1_2{
		display: inline-block;
		margin-bottom: 100px;
	}
	.pos3_1_2 picture,.pos3_1_2 p{
		width: 100%;
		margin:0;
	}
	.pos3_2 ul li ul{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

	}
	.pos3_2 ul li{
		width: 100%;
		margin: 10px 0 100px 0;
	}
	.illust {
		margin-bottom: 20px;
	}
	.i_pics{
		margin: 10px 0 50px 0;
	}
	.i_pics ul{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 40px;
	}
	
	.i_pics ul li{
		width: 48%;
		margin: 10px 0 10px 0;
	}
	.i_pics ul li:nth-child(odd){
		margin: 10px 4% 10px 0;
	}
	.i_pics ul li p,.i_pics .cap{
		font-size: 1.2rem !important;
        line-height: 1.5 !important;
	}
}

/* 印刷用CSS */

@media print{
	.pos3_2 ul li {
    width: 45%;
    margin: 20px auto;
	}
	.pos3_2_block h4 {
    font-size: 1.6rem !important;
	}
	#contents h3 {
    font-size: 1.8rem;
	}

}