@charset "utf-8";

/* -----------------------------------------------------------
CSS Information

 File name:      material.css

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

.col02 > ul > li{
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-align:center;
-moz-box-align:center;
-ms-flex-align:center;
-webkit-align-items:center;
-moz-align-items:center;
align-items:center;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-flex-pack:center;
-moz-flex-pack:center;
-ms-flex-pack:center;
-webkit-justify-content:center;
-moz-justify-content:center;
justify-content:center;
padding: 5% 0; 
}

.col02 > ul:nth-child(odd) > li{
background:#fff;
color:#373127;
}
.col02 > ul:nth-child(even) > li{
background:#9a7d54;
color:#fff;
}

.col02 > ul:nth-child(even) > li .col_tit::after{
border-bottom: 1px solid #fff;
}


.col02 > ul.menu01 > li:first-child{
background:url(../img/material/mate_img01.jpg) center center / cover;
padding: 50% 0 0 0;
}
.col02 > ul.menu02 > li:first-child{
background:url(../img/material/mate_img02.jpg) center center / cover;
padding: 50% 0 0 0;
}
.col02 > ul.menu03 > li:first-child{
background:url(../img/material/mate_img03.jpg) center center / cover;
padding: 50% 0 0 0;
}
.ste_area{
width: 70%;
padding: 15% 0;
margin: 0 auto;
box-sizing: border-box;
text-align: left;
line-height: 1.8em;
}

.faq_area{
width: 50%;
border: 1px solid RGBA(0,0,0,0.3);
padding: 20px;
margin: 0 auto;
box-sizing: border-box;
position: relative;
text-align: left;
}

.mate_col01{
width: 100%;
background-color: #9a7d54;
box-sizing: border-box;
padding: 50px 15% 20px 15%;
color: #fff;
}
.mate_col01 .col_tit:after {
    border-bottom: 1px solid #fff;
}

.mate_pic{
width: 90%;
max-width: 900px;
margin: 0 auto;
}

.mate_pic_inner{
width: 100%;
height: auto;
padding: 63.88888888% 0 0 0;
background-image:url(../img/material/mate_img04.png);
background-size: contain;
position: relative;
}

.mate_btn {
    box-sizing: border-box;
    width: 140px;
    height: 35px;
    margin: auto;
    color: #fff;
    border: 1px solid #fff;
    letter-spacing: 3px;
    text-align: center;
	position: absolute;
}
.mate_btn a{
    width: 100%;
    height: 100%;
	box-sizing: border-box;
	display: block;
	padding: 5px 0 0 0;
	background: RGBA(255,255,255,0.3);
	color: #fff;
}
.mate_btn.sanitary{
top:13%;
right: 20%;
bottom:auto;
left: auto;
}
.mate_btn.wall{
top:auto;
right: 0;
bottom:4%;
left: 0;
}
.mate_btn.floor{
top:52%;
right: 0;
bottom:auto;
left: 0;
}
.mate_btn.bond{
top:40%;
right: auto;
bottom:auto;
left: 10%;
}



.col03 > ul > li{
position: relative;
padding-top:33.3333333%;
}

.col03.mate01 > ul > li:nth-child(1){
background:url(../img/material/mate_img05.jpg);
background-size: cover;
background-position: center center;
}
.col03.mate01 > ul > li:nth-child(2){
background:url(../img/material/mate_img06.jpg);
background-size: cover;
background-position: center center;
}
.col03.mate01 > ul > li:nth-child(3){
background:url(../img/material/mate_img07.jpg);
background-size: cover;
background-position: center center;
}
.col03.mate02 > ul > li:nth-child(1){
background:url(../img/material/mate_img08.jpg);
background-size: cover;
background-position: center center;
}
.col03.mate02 > ul > li:nth-child(2){
background:url(../img/material/mate_img09.jpg);
background-size: cover;
background-position: center center;
}
.col03.mate02 > ul > li:nth-child(3){
background:url(../img/material/mate_img10.jpg);
background-size: cover;
background-position: center center;
}
.col03.mate03 > ul > li:nth-child(1){
background:url(../img/material/mate_img11.jpg);
background-size: cover;
background-position: center center;
}
.col03.mate03 > ul > li:nth-child(2){
background:url(../img/material/mate_img12.jpg);
background-size: cover;
background-position: center center;
}
.col03.mate03 > ul > li:nth-child(3){
background:url(../img/material/mate_img13.jpg);
background-size: cover;
background-position: center center;
}
.col03.mate04 > ul > li:nth-child(1){
background:url(../img/material/mate_img14.jpg);
background-size: cover;
background-position: center center;
}
.col03.mate04 > ul > li:nth-child(2){
background:url(../img/material/mate_img15.jpg);
background-size: cover;
background-position: center center;
}
.col03.mate04 > ul > li:nth-child(3){
background:url(../img/material/mate_img16.jpg);
background-size: cover;
background-position: center center;
}




.material_btn {
    box-sizing: border-box;
    width: 300px;
	height: 100px;
    margin: auto;
    color: #fff;
    border: 1px solid #fff;
	background: RGBA(30,36,40,0.6);
    padding: 10px 0;
    letter-spacing: 3px;
    text-align: center;
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-align:center;
-moz-box-align:center;
-ms-flex-align:center;
-webkit-align-items:center;
-moz-align-items:center;
align-items:center;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-flex-pack:center;
-moz-flex-pack:center;
-ms-flex-pack:center;
-webkit-justify-content:center;
-moz-justify-content:center;
justify-content:center;
}

.step_btn2 {
    box-sizing: border-box;
    width: 200px;
    height: 60px;
    margin: auto;
    color: #fff;
    border: 1px solid #fff;
	background: RGBA(30,36,40,0.4);
    padding: 7px 0 0 0;
    letter-spacing: 3px;
    text-align: center;
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
}

.step_btn3 {
    box-sizing: border-box;
    width: 200px;
    height: 75px;
    margin: auto;
    color: #fff;
    border: 1px solid #fff;
	background: RGBA(30,36,40,0.4);
    padding: 7px 0 0 0;
    letter-spacing: 3px;
    text-align: center;
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
}

@media screen and (max-width: 1280px){
}
@media screen and (max-width: 1000px){
}
@media screen and (max-width: 800px){
.col02 > ul > li{
width: 100%;
}
.col03 > ul > li{
width: 100%;
}

}
@media screen and (max-width: 600px){
.mate_col01{
padding: 50px 5% 20px 5%;
}
.mate_pic{
width: 100%;
}
.mate_btn {
    width: 23%;
}

.mate_btn.wall{
top:0;
left: 0;
bottom:0;
right: auto;
}
.mate_btn.floor{
top:0;
left: 25%;
bottom:0;
right: auto;
}
.mate_btn.sanitary{
top:0;
left: 50%;
bottom:0;
right: auto;
}
.mate_btn.bond{
top:0;
left: 75%;
bottom:0;
right: auto;
}

.col03 > ul > li{
position: relative;
padding-top:60%;
}
}

@media screen and (max-width: 480px){
.mate_btn {
    width: 47%;
}

.mate_btn.sanitary{
top:30%;
left: 0;
bottom:auto;
right: auto;
}
.mate_btn.wall{
top:30%;
left: 50%;
bottom:auto;
right: auto;
}
.mate_btn.floor{
top:auto;
left: 0;
bottom:30%;
right: auto;
}
.mate_btn.bond{
top:auto;
left: 50%;
bottom:30%;
right: auto;
}
}


.col04 > ul{
    border-bottom: 1px solid #eee;
}

.col04 > ul > li{
    border-left: 1px solid #eee;
box-sizing: border-box;
}