/* style.css */
/* service */
/*--------------------------------------*/

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


/* navigation */
#anchor_nav {
    width:100%;
    max-width:1200px;
    margin:0 auto;
}
#anchor_nav .block {
    float:left;
    position:relative;
}
#anchor_nav .wash,
#anchor_nav .sub {
    width:18%;
}
#anchor_nav .coating {
    width:63%;
    width:calc(100% - 36% - 2px);
    margin:0 1px;
}

#anchor_nav .menu {
    background:#b60005;
    padding:1em;
    text-align:left;
    line-height:1.0;
    font-weight:bold;
    color:#ffffff;
}
#anchor_nav a {
    color:#ffffff;
    text-decoration:none;
}
#anchor_nav .menu a {
    position:relative;
    display:block;
}
#anchor_nav .menu a:after {
    display:block;
    position:absolute;
    top:0;
    right:8px;
    bottom:0;
    margin:auto;
    font-size:1.2em;
    color:#ffffff;
    content:">";
    transform:rotate(90deg);
}

#anchor_nav .menu label {
    display:inline-block;
    width:100%;
    cursor:pointer;
}


#anchor_nav .open_a,
#anchor_nav .open_b {
    display:block;
    position:absolute;
    top:3em;
    left:0;
    width:100%;
    background:#000000;
    padding:1em;
}
#anchor_nav ul {
    text-align:left;
    line-height:1.2;
    font-size:0.9em;
}
#anchor_nav ul li a {
    position:relative;
    display:block;
    padding-left:0.8em;
}
#anchor_nav ul li a:hover {
    text-decoration:underline;
}
#anchor_nav ul li a:before {
    display:block;
    position:absolute;
    top:-0.1em;
    left:0;
    margin:auto;
    font-size:1.2em;
    color:#ffffff;
    content:">";
    transform:rotate(90deg);
}

#anchor_nav .open_b {
    padding:2em 1em;
    letter-spacing:-0.5em;
}
#anchor_nav .open_b ul {
    display:inline-block;
    width:32%;
    margin-right:2%;
    vertical-align:top;
    letter-spacing:normal;
}
#anchor_nav .open_b ul:last-child {
    margin-right:0;
}
#anchor_nav .open_b ul li {
    margin-bottom:1.5em;
}
#anchor_nav .open_b ul li:last-child {
    margin-bottom:0;
}


/* accordion */
#anchor_nav input {
    display:block;
    position:absolute;
    top:14px;
    right:12px;
    width:14px;
    height:14px;
    background:url("../images/service/icon_plus.png") no-repeat center center;
    margin:auto;
    cursor:pointer;
    -webkit-appearance:none;
    appearance:none;
    outline:0;
    z-index:2;
    transition:all .3s ease;
}

#anchor_nav input:checked {
    background-image:url("../images/service/icon_minus.png");
}
#anchor_nav .open_a,
#anchor_nav .open_b {
    overflow:hidden;
    height:0;
    opacity:0;
    text-indent:-9999px;
    transition:opacity .5s ease;
    z-index:2;
}
#anchor_nav input#open_a:checked ~ .open_a,
#anchor_nav input#open_b:checked ~ .open_b {
    overflow:visible;
    height:auto;
    text-indent:inherit;
    opacity:1;
}



/* main */
.main {
    width:90%;
    max-width:1200px;
    margin:0 auto;
}
.main .block {
    margin-bottom:80px;
}
.main .block:last-child {
    margin-bottom:120px;
}
.main .block .image {
    float:left;
    width:45%;
}
.main .block .text {
    position:relative;
    float:right;
    width:46%;
    margin-right:4%;
    text-align:left;
}

#contents .main .block .text h3 {
    line-height:1.4;
    font-size:1.4em;
    font-weight:bold;
    color:#b60005;
    margin-bottom: 0.2em;
}
#contents .main .block .text h4 {
    margin-bottom:0;
    line-height:1.4;
    font-size:1.0em;
    color:#b60005;
}
.main .block .text .support {
    position: static;
    top: 0;
    right: 0;
    background: #000000;
    padding: 0.3em 1em;
    border-radius: 4px;
    font-size: 0.9em;
    color: #ffffff;
    display: inline-block;
    margin-bottom: 1em;
}


/* side */
.side {
    width:100%;
    max-width:1200px;
    background:#efefef;
    padding:4%;
    border-top:8px solid #b60005;
}
#contents .side h2 {
    font-size:1.4em;
    letter-spacing:normal;
}
.side .menu {
    text-align:left;
    letter-spacing:-0.5em;
}
.side .block {
    display:inline-block;
    width:32%;
    margin-right:2%;
    margin-bottom:3%;
    vertical-align:top;
    text-align:left;
    letter-spacing:normal;
}
.side .block:nth-child(3n) {
    margin-right:0;
}
#contents .side .block h3 {
    margin-bottom:0;
    font-size:1.1em;
    color:#b60005;
}
#contents .side .block p {
    margin-bottom:0;
}






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

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








/* main */
.main .block .text {
    width:50%;
    margin-right:0;
}

/* side */
#contents .side .block h3 {
    font-size:1.0em;
}


}
/* - 1200px end */




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





/* main */
.main .block .text .support {
    top:4em;
}


}
/* - 960px end */




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


/* navigation */
#anchor_nav .menu {
    font-size:0.9em;
}
#anchor_nav .menu a:after {
    right:4px;
}#anchor_nav .open_a,
#anchor_nav .open_b {
    top:2.65em;
}


/* accordion */
#anchor_nav input {
    top:12px;
    right:8px;
}

/* side */
.side .block {
    width:48%;
    margin-right:4%;
}
.side .block:nth-child(3n) {
    margin-right:4%;
}
.side .block:nth-child(even) {
    margin-right:0;
}

}
/* - 860px end */




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








}
/* - 768px end */




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

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


/* navigation */
#anchor_nav {
}
#anchor_nav .block {
    float:none;
    margin-bottom:1px;
}
#anchor_nav .wash,
#anchor_nav .sub {
    width:100%;
}
#anchor_nav .coating {
    width:100%;
    margin:0 0 1px;
}
#anchor_nav .menu {
    font-size:1.0em;
}
#anchor_nav .menu a:after {
    right:0;
}
#anchor_nav .open_b {
    padding:2em 1em 1em;
}
#anchor_nav .open_b ul {
    width:100%;
    margin-right:0;
}
#anchor_nav .open_b ul li:last-child {
    margin-bottom:1.5em;
}
#anchor_nav ul li a {
    padding-left:2em;
}
#anchor_nav ul li a:before {
    display:none;
}
#anchor_nav ul li a:after {
    display:block;
    position:absolute;
    top:-0.1em;
    right:0;
    margin:auto;
    font-size:1.2em;
    color:#ffffff;
    content:">";
    transform:rotate(90deg);
}


#anchor_nav .open_a,
#anchor_nav .open_b {
    position:static;
}

/* accordion */
#anchor_nav input {
    top:12px;
    right:14px;
}
#anchor_nav .open_a,
#anchor_nav .open_b {
    display:none;
}
#anchor_nav input#open_a:checked ~ .open_a,
#anchor_nav input#open_b:checked ~ .open_b {
    display:block;
}
#anchor_nav .open_a li,
#anchor_nav .open_b li {
}
#anchor_nav input#open_a:checked ~ li,
#anchor_nav input#open_b:checked ~ li {
}




/* main */
.main {
    width:86%;
}
.main .block .image {
    float:none;
    width:100%;
    margin-bottom:1em;
}
.main .block .text {
    float:none;
    width:100%;
}
.main .block .text .support {
    top:0;
}


/* side */
.side {
    padding:4% 7%;
}
.side .block {
    display:block;
    width:100%;
    max-width:350px;
    margin:0 auto 6%;
}
.side .block:nth-child(3n),
.side .block:nth-child(even) {
    margin:0 auto 6%;
}


}
/* - 750px end */




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




/* main */
#contents .main .block .text h3 {
    margin-bottom:2em;
}
#contents .main .block:first-child .text h3 {
    margin-bottom:1em;
}
.main .block .text .support {
    top:4em;
}



}
/* - 520px end */




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




/* main */
#contents .main .block .text h3 {
    margin-bottom:2.5em;
    font-size:1.2em;
}


}
/* - 480px 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%;
}

/*-----------------------------------------------------------*/
/*
.flex_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row-reverse;
}
.left_box {
    width: 49%;
}
.right_box {
    width: 49%;
}
*/

.btn_service {
    width: 100%;
}

.flex_box {
width: 60%;
margin: 0 auto;
}