/* top.css */
/*--------------------------------------*/

/* bx slider */
.bx-wrapper {
    position:relative;
    margin:0;
    padding:0;
    *zoom:1;
    -ms-touch-action:pan-y;
    touch-action:pan-y;
}
.bx-wrapper img {
    display:block;
    max-width:100%;
}
.bxslider {
    margin:0;
    padding:0;
    -webkit-perspective:1000;
}
ul.bxslider {
    list-style:none;
}
.bx-viewport {
    -webkit-transform:translateZ(0);
}
/* LOADER */
.bx-wrapper .bx-loading {
    position:absolute;
    top:0;
    left:0;
    min-height:50px;
    background:#ffffff url("../images/loader.gif") no-repeat center center;
    height:100%;
    width:100%;
    z-index:10;
}
/* PAGER */
.bx-wrapper .bx-pager {
    position:absolute;
    left:0;
    right:0;
    bottom:18px;
    margin:auto;
    font-family:Arial;
    text-align:center;
    font-size:.85em;
    font-weight:bold;
    color:#666666;
    z-index:100;
}
.bx-wrapper .bx-pager.bx-default-pager a {
    display:block;
    width:40px;
    height:4px;
    margin:0 9px;
    background:#000000;
    text-indent:-9999px;
    outline:0;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
    background:#ffffff;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display:inline-block;
    vertical-align:bottom;
    *zoom:1;
    *display:inline;
}
.bx-wrapper .bx-pager-item {
    line-height:0;
    font-size:0;
}


/* slide */
#slide {
    position:relative;
    width:100%;
    max-width:1400px;
    margin:0 auto;
}
#slide h1 {
    position:absolute;
    bottom:0;
    width:100%;
    margin:0 auto;
    text-align:center;
    z-index:100;
}
ul.slide li {
    width:100%;
    height:660px;
    background-color:#ffffff;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
}

ul.slide li.img01 {background-image:url("../images/slide01.jpg");}
ul.slide li.img02 {background-image:url("../images/slide02.jpg");}
ul.slide li.img03 {background-image:url("../images/slide03.jpg");}
ul.slide li.img04 {background-image:url("../images/slide04.jpg");}
ul.slide li.img05 {background-image:url("../images/slide05.jpg");}





/* ticker */
.ticker {
    overflow:hidden;
    position:relative;
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:0;
    text-align:left;
}
.ticker ul {
    position:relative;
    width:96%;
}
.ticker ul li {
    display:none;
    width:100%;
}

#ticker {
    width:100%;
    background:#e9e9e9;
    margin-bottom:120px;
    padding:0 2%;
}
#ticker ul li {
    text-align:center;
    font-size:1.0em;
    color:#000000;
}
#ticker ul li div {
    padding:1em 0;
}
#ticker ul li a,
#ticker ul li a:visited {
    color:#000000;
    text-decoration:none;
}
#ticker ul li a:hover,
#ticker ul li a:active {
    color:#000000;
    text-decoration:underline;
}



/* concept block */
#concept {
    width:80%;
    max-width:1000px;
    margin:0 auto 90px;
}
.concept_logo {
    float:left;
    width:25%;
}
.concept_logo img {
    max-width:242px;
}
.concept_box {
    position:relative;
    float:right;
    width:73%;
    background:url("../images/arrow_concept.png") no-repeat right 6% center;
    padding:3% 12% 3% 4%;
    border:1px solid #d4d4d4;
    text-align:left;
}
.concept_box a {
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transition:all .3s ease;
}
.concept_box a:hover {
    background-color:rgba(255,255,255,0.7);
}
.concept_box h3 {
    margin-bottom:0.5em;
    font-family:'Abel',sans-serif;
    font-size:1.6em;
    font-weight:bold;
}
.concept_box p {
    font-size:1.4em;
}


#wrapper h2 {
    margin:0 auto 1em;
    font-size:1.2em;
    font-weight:bold;
}
#wrapper h2 span {
    display:block;
    margin-bottom:0.2em;
    font-family:'Oranienbaum',serif;
    line-height:1.4;
    font-size:2.8em;
    font-weight:normal;
    color:#b60005;
}


/* 3 section */
section {
    position:relative;
    width:100%;
    max-width:1200px;
    height:638px;
    background-repeat:no-repeat;
    margin:0 auto;
}
section .inner {
    position:absolute;
    top:90px;
    width:40%;
    max-width:380px;
    text-align:left;
}
#wrapper section .inner h2 {
    margin-bottom:2em;
}
section .inner p.lead {
    margin-bottom:1em;
    font-size:1.5em;
    font-weight:bold;
}
section .inner strong {
    font-weight:bold;
}

section.quality {
    background-image:url("../images/bg_quality.jpg");
}
section.performance {
    background-image:url("../images/bg_performance.jpg");
}
section.technology {
    background-image:url("../images/bg_technology.jpg");
}

section.quality .inner,
section.technology .inner {
    left:50%;
    transform:translate(40%);
}
section.performance .inner {
    right:50%;
    transform:translate(-40%);
}



/* craftmanship block */
#craftman {
    width:100%;
    max-width:1200px;
    background:#dcdcdc;
    margin:0 auto 70px;
    padding:20px 0 100px;
}
#wrapper #craftman h2 {
    background:url("../images/bg_craftmapship.png") no-repeat center bottom;
    margin:0 auto 70px;
    padding-bottom:40px;
}

/* video */
#video {
    width:90%;
    max-width:1020px;
    margin:0 auto;
}
#video .video_block {
    float:left;
    /* width:43%;
    margin-right:14%; */
    text-align:left;
}
#video .video_block:nth-child(even) {
    margin-right:0;
}

#video .video {
    position:relative;
    width:100%;
    margin-bottom:30px;
    padding-top:56.25%;
}
#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;
}
#video .btn_service a,
#video .btn_service a:visited {
    display:block;
    width:100%;
    background-color:#201011;
    padding:1em;
    text-align:center;
    font-size:1.2em;
    color:#ffffff;
    text-decoration:none;
    transition:all .3s ease;
}
#video .btn_service a:hover,
#video .btn_service a:active {
    background-color:#aaaaaa;
    color:#000000;
}

/* dummy */
#video .video img {
    width:100%;
    height:auto;
}



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


/* slide */
#slide .inner {
    height:0;
    padding-top:53.63%;
}




}
/* - 1400px end */




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


/* 3 section */
section {
    height:0;
    background-size:contain;
    padding-top:53.16%;
}
section .inner {
    top:12%;
    width:38%;
}
section.quality .inner,
section.technology .inner {
    left:60%;
    transform:translate(0);
}
section.performance .inner {
    left:5%;
    right:inherit;
    transform:translate(0);
}

#wrapper section .inner h2 {
    margin-bottom:1em;
}
section .inner p.lead {
    margin-bottom:0.5em;
    font-size:1.4em;
}


/* video */
#video .video_block {
    width:46%;
    margin-right:8%;
}




}
/* - 1200px end */





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


#wrapper h2 span {
    font-size:2.4em;
}



}
/* - 860px end */





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



/* concept block */
#concept {
    width:86%;
}
.concept_logo {
    float:none;
    width:53%;
    max-width:398px;
    margin:0 auto 20px;
}
.concept_box {
    float:none;
    width:100%;
}

#wrapper h2 span {
    font-size:2.8em;
}

/* 3 section */
section {
    height:auto;
    background-color:#e9e9e9;
    padding-top:80%;
    padding-bottom:1em;
}
section .inner {
    position:static;
    width:86%;
    max-width:inherit;
    margin:0 auto;
}
#wrapper section .inner h2 {
    text-align:center;
}
section .line_b:before {
    left:50%;
    transform:translate(-50%);
}

section.quality {
    background-image:url("../images/bg_quality_sp.jpg");
}
section.performance {
    background-image:url("../images/bg_performance_sp.jpg");
}
section.technology {
    background-image:url("../images/bg_technology_sp.jpg");
}

section.quality .inner,
section.performance .inner,
section.technology .inner {
    transform:none;
}

/* diagonal */
.diagonal_a {
    overflow:hidden;
    position:relative;
    width:100%;
    height:0;
    background-color:#ffffff;
    padding-top:10.6%;

}
.diagonal_a: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);
}
.diagonal_b {
    overflow:hidden;
    position:relative;
    width:100%;
    height:0;
    background-color:#ffffff;
    padding-top:10.6%;

}
.diagonal_b:before {
    position: absolute;
    top:0;
    left:0;
    width:120%;
    height:107%;
    background:#e9e9e9;
    margin:0 -10% 0;
    content:"";
    transform-origin:right center;
    transform:rotate(5deg);
}
.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 100px;
}
/* video */
#video .video_block {
    width:48%;
    margin-right:4%;
}


}
/* - 768px end */





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


/* slide */
#slide h1 {
    height:0;
    background:url("../images/slide_title_sp.png") no-repeat center top;
    background-size:cover;
    padding-top:119%;
}
#slide h1 img {
    display:none;
}
ul.slide li {
    height:0;
    padding-top:120%;
}

ul.slide li.img01 {background-image:url("../images/slide01_sp.jpg");}
ul.slide li.img02 {background-image:url("../images/slide02_sp.jpg");}
ul.slide li.img03 {background-image:url("../images/slide03_sp.jpg");}
ul.slide li.img04 {background-image:url("../images/slide04_sp.jpg");}
ul.slide li.img05 {background-image:url("../images/slide05_sp.jpg");}


#ticker {
    margin-bottom:60px;
}

/* concept block */
#concept {
    text-align:center;
}
.concept_box {
    width:86%;
    background-position:bottom 6% center;
    padding:3% 3% 16%;
    margin:0 auto;
    text-align:center;
}
.concept_box h3 {
    display:block;
    margin:0 auto 0.5em;
    text-align:center;
}
.concept_box h3.line_b:before {
    left:50%;
    transform:translate(-50%);
}
.concept_box p {
    font-size:1.2em;
}





/* craftmanship block */
#craftman {
    padding:60px 0 20px;
}
/* video */
#video .video_block {
    float:none;
    width:100%;
    margin-right:0;
    margin-bottom:80px;
}


}
/* - 750px end */





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

.bx-wrapper .bx-pager.bx-default-pager a {
    width:28px;
}


#wrapper h2 span {
    font-size:2.0em;
}

/* concept block */
.concept_box {
    width:96%;
    padding:3% 3% 20%;
}
.concept_box p {
    font-size:1.0em;
}



}
/* - 480px end */





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


/* concept block */
.concept_box {
    width:100%;
    padding:3% 1% 24%;
}

}
/* - 320px end */

/*-----------------------------------------------------------*/
/*
.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;
}