@charset "utf-8";

/* CSS Document */
@media screen and (max-width: 768px) {
#features_inner img {
	max-width: 100%;
	height: auto;
}
}

@media screen and (max-width: 768px) {
.bg_features {
	padding: 20px;
	box-sizing: border-box;
}
}

.txt_01 {
	font-size: 22px;
	margin-bottom: 15px;
	color: #7f4f21;
}
.mb15 {
	margin-bottom: 15px;
}
.mb20 {
	margin-bottom: 20px;
}
.mb60 {
	margin-bottom: 60px;
}

@media screen and (max-width: 768px) {
.mb60 {
	margin-bottom: 20px;
}
}
.bg_cray01, .bg_cray02, .bg_cray03, .bg_cray04, .bg_cray05, .bg_cray06,
.bg_water01, .bg_water02, .bg_water03, .bg_water04, .bg_water05, .bg_water06,
.bg_wood01, .bg_wood02, .bg_wood03, .bg_wood04, .bg_wood05, .bg_wood06,
.bg_string01, .bg_string02, .bg_string03, .bg_string04, .bg_string05, .bg_string06,
.bg_iron01, .bg_iron02, .bg_iron03, .bg_iron04, .bg_iron05, .bg_iron06 {
	position:relative;
	height:340px;
	margin-bottom: 160px;
	padding: 15px 0;
	box-sizing: border-box;
}

.bg_cray01,
.bg_water01,
.bg_wood01,
.bg_string01,
.bg_iron01 {
	padding: 90px 80px 50px 250px;
}

.bg_cray01 {
	background: url(../img/features/cray/bg_01.jpg) top left no-repeat;
}
.bg_cray02 {
	background: url(../img/features/cray/clay_bg.png) top left no-repeat, #fff;
}
.bg_cray03 {
	background: url(../img/features/cray/clay_bg.png) top left no-repeat, #fff;
}
.bg_cray04 {
	background: url(../img/features/cray/clay_bg.png) top left no-repeat, #fff;
}
.bg_cray05 {
	background: url(../img/features/cray/clay_bg.png) top left no-repeat, #fff;
}
.bg_cray06 {
	background: url(../img/features/cray/clay_bg.png) top left no-repeat, #fff;
}

/*water
------------------------------*/
.bg_water01 {
	background: url(../img/features/water/bg_01.jpg) top left no-repeat;
}
.bg_water02 {
	background: url(../img/features/water/water_bg.png) top left no-repeat, #fff;
}
.bg_water03 {
	background: url(../img/features/water/water_bg.png) top left no-repeat, #fff;
}
.bg_water04 {
	background: url(../img/features/water/water_bg.png) top left no-repeat, #fff;
}
.bg_water05 {
	background: url(../img/features/water/water_bg.png) top left no-repeat, #fff;
}
.bg_water06 {
	background: url(../img/features/water/water_bg.png) top left no-repeat, #fff;
}


/* wood
------------------------------*/
.bg_wood01 {
	background: url(../img/features/wood/bg_01.jpg) top left no-repeat;
}
.bg_wood02 {
	background: url(../img/features/wood/wood_bg.png) top left no-repeat, #fff;
}
.bg_wood03 {
	background: url(../img/features/wood/wood_bg.png) top left no-repeat, #fff;
}
.bg_wood04 {
	background: url(../img/features/wood/wood_bg.png) top left no-repeat, #fff;
}
.bg_wood05 {
	background: url(../img/features/wood/wood_bg.png) top left no-repeat, #fff;
}
.bg_wood06 {
	background: url(../img/features/wood/wood_bg.png) top left no-repeat, #fff;
}


/* string
------------------------------*/
.bg_string01 {
	background: url(../img/features/string/bg_01.jpg) top left no-repeat;
}
.bg_string02 {
	background: url(../img/features/string/yarn_bg.png) top left no-repeat, #fff;
}
.bg_string03 {
	background: url(../img/features/string/yarn_bg.png) top left no-repeat, #fff;
}
.bg_string04 {
	background: url(../img/features/string/yarn_bg.png) top left no-repeat, #fff;
}
.bg_string05 {
	background: url(../img/features/string/yarn_bg.png) top left no-repeat, #fff;
}
.bg_string06 {
	background: url(../img/features/string/yarn_bg.png) top left no-repeat, #fff;
}

/* iron
------------------------------*/
.bg_iron01 {
	background: url(../img/features/iron/bg_01.jpg) top left no-repeat;
}
.bg_iron02 {
	background: url(../img/features/iron/iron_bg.png) top left no-repeat, #fff;
}
.bg_iron03 {
	background: url(../img/features/iron/iron_bg.png) top left no-repeat, #fff;
}
.bg_iron04 {
	background: url(../img/features/iron/iron_bg.png) top left no-repeat, #fff;
}
.bg_iron05 {
	background: url(../img/features/iron/iron_bg.png) top left no-repeat, #fff;
}
.bg_iron06 {
	background: url(../img/features/iron/iron_bg.png) top left no-repeat, #fff;
}

@media screen and (max-width: 768px) {
	.bg_iron02, .bg_iron03, .bg_iron04, .bg_iron05, .bg_iron06,
	.bg_string02, .bg_string03, .bg_string04, .bg_string05, .bg_string06,
	.bg_wood02, .bg_wood03, .bg_wood04, .bg_wood05, .bg_wood06,
	.bg_water01, .bg_water02, .bg_water03, .bg_water04, .bg_water05, .bg_water06,
	.bg_cray01, .bg_cray02, .bg_cray03, .bg_cray04, .bg_cray05, .bg_cray06 {
		background-size: cover;
		padding: 20px;
		height: 480px;
		margin: 0px;
		position:relative;/*170324追加*/
	}
	.bg_cray01, .bg_water01, .bg_wood01, .bg_string01, .bg_iron01{
		box-sizing:border-box;
		background-size: cover;
		padding: 20px;
		height: 480px;
		margin: 0px;
	}
}
.ttl_cray {
	position: absolute;
	top: 10px;
	left: 10px;
}

@media screen and (max-width: 768px) {
.ttl_cray {
	position: inherit;
	margin-bottom: 0;
	width: 100px;
}
}

@media screen and (max-width: 768px) {
.w_65 {
	width: 65px !important;
}
}
.txt_area {
	background: rgba(255,255,255,0.6);
	padding: 20px 20px 20px 25px;
	font-size: 20px;
	font-weight: bold;
	position:relative;
}

@media screen and (max-width: 768px) {
.txt_area {
	position:absolute;/*170324追加*/
	top:0;/*170324追加*/
	left:5%;/*170324追加*/
	padding: 30px;/*170324変更*/
	width:calc( 90% - 60px );/*170324追加*/
	font-size: 12px;
}
.txt_area p{/*170324追加*/
	display:table-cell;
	vertical-align:middle;
}
}
.ico_area li {
	float: left;
	margin-right: 15px;
}

@media screen and (max-width: 768px) {
.ico_area li {
	margin-right: 2%;
	width: 23.5%;
}
.ico_area li img {
	width: 100%;
	height: auto;
}
.ico_area li:nth-child(4n) {
	margin-right: 0;
}
}
.page_nav {
	position: absolute;
	left: 30px;
	bottom: 20px;
}

@media screen and (max-width: 768px) {
.page_nav {
	position: absolute;
	left: inherit;
	bottom: inherit;
	right: 20px;
	top: 15px;
	width: 60px;
}
}
.arrow_bottom {
	padding: 10px 0;
	text-align: center;
}
.area_01 .right_area {
	float: right;
	width: 630px;
	font-size: 14px;
}

@media screen and (max-width: 768px) {
.area_01 .right_area {
	float: none;
	width: 100%;
	font-size: 12px;
}
}
.ttl_h3 {
	border-bottom: #7f4f21 1px solid;
	padding-bottom: 5px;
	margin-bottom: 15px;
}
.ttl_h3 h3 {
	font-size: 22px;
	color: #7f4f21;
	border-left: #b18c0c 12px solid;
	padding-left: 15px;
}

@media screen and (max-width: 768px) {
.ttl_h3 h3 {
	font-size: 15px;
	border-left: #b18c0c 8px solid;
	padding-left: 10px;
}
}
.area_01_inner .l_area {
	float: left;
	width: 301px;
	text-align: center;
}
.area_01_inner .r_area {
	float: right;
	width: 300px;
}

@media screen and (max-width: 768px) {
.area_01_inner .l_area {
	float: none;
	width: 170px;
	margin: 0px auto 10px;
}
.area_01_inner .r_area {
	float: none;
	width: 100%;
}
}
.area_02_inner .l_area {
	float: left;
	width: 222px;
	text-align: center;
}
.area_02_inner .r_area {
	float: right;
	width: 391px;
}

@media screen and (max-width: 768px) {
.area_02_inner .l_area {
	float: none;
	width: 100%;
	margin-bottom: 10px;
}
.area_02_inner .r_area {
	float: none;
	width: 100%;
}
}
.area_02 {
	background: #b18c0c;
	border-radius: 5px;
	padding: 10px 55px;
}

@media screen and (max-width: 768px) {
.area_02 {
	padding: 10px 20px;
	margin: 0px 20px;
}
#features_inner .area_02 img {
	height: 20px;
	width: auto;
}
}
.area_02 .right_area {
	float: right;
	width: 515px;
	font-size: 14px;
	border-left: #fff 1px solid;
	padding-left: 25px;
}
.area_02 .right_area a {
	color: #fff;
}
.area_02 .left_area {
	float: left;
	width: 285px;
}

@media screen and (max-width: 768px) {
.area_02 .right_area {
	float: none;
	width: 100%;
	font-size: 14px;
	color: #fff;
	border-left: none;
	padding-left: 0;
}
.area_02 .left_area {
	float: none;
	width: 100%;
	margin-bottom: 10px;
}
}

@media screen and (max-width: 768px) {
.sp_indent_20lr {
	padding: 0 20px;
}
}


.ttl_water {
	position: absolute;
	top: 10px;
	left: 10px;
}

@media screen and (max-width: 768px) {
.ttl_water {
	position: inherit;
	margin-bottom: 5px;
	width: 100px;
}
}


.ttl_wood {
	position: absolute;
	top: 10px;
	left: 10px;
}

@media screen and (max-width: 768px) {
.ttl_wood {
	position: inherit;
	margin-bottom: 5px;
	width: 100px;
}
}

.ttl_string {
	position: absolute;
	top: 10px;
	left: 10px;
}

@media screen and (max-width: 768px) {
.ttl_string {
	position: inherit;
	margin-bottom: 5px;
	width: 100px;
}
}


.ttl_iron {
	position: absolute;
	top: 10px;
	left: 10px;
}

@media screen and (max-width: 768px) {
	.ttl_iron {
		position: inherit;
		margin-bottom: 5px;
		width: 100px;
	}
}
@media screen and (max-width: 768px) {
	h2{
		top:0px !important;
	}
}