/* style.css */
/* about */
/*--------------------------------------*/

/* title */
#title {
    height:400px;
    background-image:url("../images/about/main_img.jpg");
}


/* gray block */
.gray_block {
    position:relative;
    width:100%;
    max-width:1200px;
    background:#e6e6e6;
    padding:80px 8%;
}
.gray_block .logo {
    position:absolute;
    top:0;
    left:8%;
    bottom:0;
    width:21%;
    max-width:242px;
    height:130px;
    margin:auto;
}
.gray_block .text {
    float:right;
    width:70%;
    text-align:left;
}
.gray_block .text .lead2 {
    font-size:1.3em;
}




/* - 1200px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 1200px) {

/* title */
#title {
    height:0;
    background-size:cover;
    padding-top:32%;
}








}
/* - 1200px end */




/* - 768px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 768px) {


/* gray block */
.gray_block {
    position:relative;
    width:100%;
    max-width:1200px;
    background:#e6e6e6;
    padding:80px 8%;
}
.gray_block .logo {
    position:static;
    width:54%;
    max-width:398px;
    height:auto;
    margin:0 auto 2em;
}
.gray_block .text {
    float:none;
    width:100%;
    margin:0 auto;
    text-align:center;
}
.gray_block .text h3.line_b:before {
    left:50%;
    transform:translate(-50%);
}

}
/* - 768px end */




/* - 750px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 750px) {

/* title */
#title {
    background-image:url("../images/about/main_img_sp.jpg");
    padding-top:52.66%;
}





}
/* - 750px end */





/*-----------------------------------------------------------*/
@media only screen and (max-width: 1020px) {


}


/* video */
#video {
    width:90%;
    max-width:1020px;
    margin:0 auto;
    text-align:center;

}
#video .video_block {
    width:90%;
    text-align:center;
}
#video .video_block:nth-child(even) {
    margin-right:0;
}

#video .video {
    position:relative;
    width:100%;
    margin-left:auto;
    margin-bottom:30px;
    padding-top:50%;
}
#video .video iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
#video h4 {
    margin-bottom:1em;
    font-size:1.4em;
    font-weight:bold;
}
#video p {
    margin-bottom:2em;
}
#video p.mb {
    margin-bottom:4em;
}

.diagonal_c {
    overflow:hidden;
    position:relative;
    width:100%;
    height:0;
    background-color:#dcdcdc;
    padding-top:10.6%;

}
.diagonal_c:before {
    position: absolute;
    top:0;
    left:0;
    width:120%;
    height:107%;
    background:#e9e9e9;
    margin:0 -10% 0;
    content:"";
    transform-origin:left center;
    transform:rotate(-5deg);
}

/* craftmanship block */
#craftman {
    padding:60px 0 0px;
}
/* video */
#video .video_block {
    width:100%;
    margin-right:4%;
}