/* main{
	background: #F3F3F3;
} */
main.shelf{
	padding-top: 0;
}


/* main_img */
.main_img{
	height: 250px;
	background: url(/images/shelf/img_shelf_main.png) center / cover no-repeat;
}

/* content_title */
.content_title{
	margin-bottom: 40px;
	text-align: center;
}
.content_title .title{
	position: relative;
	padding-bottom: 20px;
	font-size: 30px;
}
.content_title .title:after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 50px;
	height: 2px;
	margin: auto;
	background: #333;
}
.content_title .text{
	margin-top: 30px;
}


/* read_area */

/* __  main_visual */
.read_area .main_visual{
	margin-bottom: 50px;
}
.read_area .main_visual .text{
	padding: 0 0 40px;
	text-align: center;
	font-size: 18px;
}
/* feature_items */
.feature_items{
	margin-bottom: 100px;
}
.feature_items .item{
	margin-bottom: 55px;
}
.feature_items .item .detail{
	margin-top: 30px;
}
.feature_items .item .detail .title{
	display: block;
	margin-bottom: 16px;
}

/* type_area */
.type_area{
	margin-bottom: 100px;
}
/* __  link_area */
.type_area .link_area{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.type_area .link_area li{
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	margin-bottom: 20px;
	font-weight: bold;
	text-align: center;
	opacity: 1;
}
.type_area .link_area li a{
	position: relative;
	display: inline-block;
	padding-bottom: 1em;
	text-decoration: none;
	color: #333;
	transition: opacity .2s;
}
.type_area .link_area li a:after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	display: inline-block;
	width: 0;
	height: 2px;
	background: #333;
	transition: width .3s;
}
.type_area .link_area li a:hover{
	opacity: .7;
}
.type_area .link_area li a:hover:after {
	width: 100%;
}


/* __  type_item */
.type_area .type_item{
	margin-bottom: 60px;
	padding: 5%;
	background: #FFF;
}
/* ___  title_area */
.type_area .type_item .title_area{
	display: flex;
	flex-wrap: wrap;
}
.type_area .type_item .title_area .img{
	flex: 0 0 100%;
	width: 100%;
	margin-bottom: 30px;
}
.type_area .type_item .title_area .img img{
	max-width: 360px;
	width: 100%;
}
.type_area .type_item .title_area .detail{
	flex: 0 0 100%;
	width: 100%;
}
.type_area .type_item .title_area .detail .title .num{
	display: block;
	font-size: 45px;
	font-family: "Roboto";
	line-height: 1;
	margin-bottom: 5px;
}
.type_area .type_item .title_area .detail .title .name{
	display: block;
    font-size: 25px;
    font-family: "Roboto";
}
.type_area .type_item .title_area .detail .title .bld_sub{
	display: block;
	margin-bottom: 12px;
    font-size: 20px;
    font-family: "Roboto";
}
.type_area .type_item .title_area .detail .title .sub{
	font-size: 14px;
}
.type_area .type_item .title_area .detail .title .ruby{
	font-size: 14px;
}
/* ___  comment */
.type_area .type_item .comment{
	margin-top: 5px;
	line-height: 2;
}
/* ___  info_area */
.type_area .type_item .info_area{
	position: relative;
    margin-top: 30px;
}
.type_area .type_item .info_area .draw_txt{
	display: inline-block;
    position: absolute;
    max-width: 150px;
    width: 100%;
    top: 0;
    left: 0;
    border: 1px solid;
    font-size: 14px;
    text-align: center;
    background: #fff;
}
.type_area .type_item .info_area .img{
	padding: 25px;
	margin-bottom: 45px;
	text-align: center;
}
.type_area .type_item .info_area .img img{
	max-width: 600px;
	width: 100%;
}
.type_area .type_item .info_area .graph_area{
	border: 1px solid #F3F3F3;
	border-bottom: 0;
}
.type_area .type_item .info_area dl{
	border-bottom: 1px solid #F3F3F3;
}
.type_area .type_item .info_area dl dt{
	padding: 8px 14px;
	background: #F9F9F9;
}
.type_area .type_item .info_area dl dd{
	padding: 8px 14px;
}

/* color_area */
.color_area{
	margin-bottom: 100px;
}
.color_area .items_area{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.color_area .items_area .item{
	flex: 0 0 100%;
	width: 100%;
	margin-bottom: 40px;
}
.color_area .items_area .item .text{
	margin-top: 20px;
	font-weight: bold;
	font-size: 16px
}

/* gallery_area */
.gallery_area{
	margin-bottom: 100px;
}
.gallery_area .items_list{
	display: flex;
	flex-wrap: wrap;
}
.gallery_area .items_list li{
	overflow: hidden;
	position: relative;
	flex: 0 0 32.6%;
	width: 32.6%;
	height: 0;
    padding-top: 32.6%;
	margin-top: 1%;
	margin-right: 1%;
	background: #E3E3E3;
}
.gallery_area .items_list li:nth-child(3n){
	margin-right: 0;
}
.gallery_area .items_list li a{
	display: block;
}
.gallery_area .items_list li a img{
	position: absolute;
    max-height: none;
    max-width: 100%;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    margin: auto;
	transform: scale(1) translate(-50%, -50%);
	transform-origin: 0% 0%;
    transition: transform .5s ease, transform-origin .5s ease;
}
.gallery_area .items_list li.y_img a img{
	max-height: 100%;
    max-width: none;
}
.gallery_area .items_list li a:hover img{
	transform: scale(1.05) translate(-50%, -50%);
	transform-origin: 0% 0%;
}

@media all and (min-width: 750px) {
	.main_img{
		height: 600px;
		margin-bottom: 65px;
	}
	/* read_area */
	.read_area .main_visual{
		margin-bottom: 100px;
	}
	.read_area .main_visual .text{
		margin-bottom: 80px;
		font-size: 24px;
	}
	/* type_area */
	.type_area .link_area li{
		flex-basis: 50%;
		width: 50%;
	}

	.type_area .type_item{
		padding: 60px;
	}
	.type_area .type_item .title_area .img{
		flex: 0 0 43%;
		width: 43%;
		margin: 0;
	}
	.type_area .type_item .title_area .detail{
		flex: 0 0 52%;
		width: 52%;
		/* padding-left: 50px; */
		padding-left: 5%;
	}
	.type_area .type_item .title_area .detail .title .num{
		margin-bottom: 20px;
	}
	.type_area .type_item .comment{
		margin-top: 25px;
	}

	.color_area .items_area .item{
		flex: 0 0 48%;
		width: 48%;
		margin-bottom: 0;
	}

	/* ___  info_area */
	.type_area .type_item .info_area{
		margin-top: 50px;
	}
	.type_area .type_item .info_area dl{
		display: flex;
	}
	.type_area .type_item .info_area dl dt{
		flex: 0 0 27.5%;
		padding: 18px 3.5%;
	}
	.type_area .type_item .info_area dl dd{
		flex: 1 1 auto;
		padding: 18px 3.5%;
	}
}