/*
*
*   RESPONSIVE
*
*/

@media (max-width: 767px) {
    /*xs*/
    .pc{
        display: none;
    }
    img{
        max-width:100%;
    }
    .container{
    }
    .normal_txt{
    }
    .normal_txt_2{
    }
    .contact .form{
    }
    header{
        height: 540px;
        background-position: center top;
        background-image:url("../img/header_bg_sp.png");
    }
    header table td.upper{
        height:51%;
    }
    header table td.upper img{
        padding:0 20px;
    }
    header table td.lower h2{
        margin-top:20px;
        font-size: 25px;
        letter-spacing: 0.1em;
    }
    nav{
        height:70px;
        position:absolute;
        top:0;
        z-index: 9;
    }
    .button_wrapper .button{
        position:fixed;
        top:0;
        right:0;
        z-index: 11;
    }
    h3.head_line{
        font-size:27px;
    }
    h4.head_line{
        font-size:25px;
    }
    .normal_txt{
        letter-spacing: 0.05em;
        font-size: 11px;
        padding: 10px;
        line-height: 1.8em;
        margin-bottom:60px;
    }
    .normal_txt_2{
        letter-spacing: 0.05em;
        font-size: 11px;
        padding: 10px;
        line-height: 1.8em;
        margin-bottom:60px;
    }
    .normal_txt_3{
        letter-spacing: 0.05em;
        font-size: 15px;
        line-height: 1.8em;
    }
    .desc-1 h3{
        margin:70px 0;
        margin-bottom:10px;
    }
    .desc-1 .gallery img{
        margin-top:30px;
    }
    .desc-2 .head_line{
        margin:50px auto;
        margin-bottom: 30px;
    }
    .desc-2 .img_wrapper.bubble img{
        width:210px;
    }
    .desc-2 .pore_img_array .normal_txt_2{
        padding: 0px 5px;
    }
    .desc-2 .pore_img_array img{
        padding:5px 0;
        width:100%;
    }
    .desc-2 .pore_img_array .col-xs-5{
        padding:0;
        padding-left:15px;
    }
    .desc-2 .thermograph .normal_txt_3{
    }
    .desc-2 .thermograph .sp table{
        width:100%;
    }
    .desc-2 .thermograph .sp table img{
        width:88px;
    }
    .about_us h3{
        margin:43px 0;
        margin-bottom:30px;
    }
    .interval_bg{
        background-image:url("../img/header_bg_sp.png");
        height:616px;
    }
    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder{
        font-size:20px;
    }
    input:-ms-input-placeholder,
    textarea:-ms-input-placeholder{
        font-size:20px;
    }
    input::-moz-placeholder,
    textarea::-moz-placeholder{
        font-size:18px;
    }
    .contact .form form input,
    .contact .form form textarea{
        padding:1.0em 0.5em;
    }
    .contact .form{
        padding:0 25px;
    }
    .contact .form form textarea{
        height: 200px;
    }
    footer{
        text-align: center;
    }
    .scrolltop{
        width:44px;
        height:44px;
        display: flex;
        justify-content: center;
        align-items: center;
        background:rgba(40,40,40,0.6);
        border:1px solid #fff;
        position: fixed;
        top:497px;
        right:0;
        z-index: 9;
    }
}
@media (min-width: 768px) {
    /*sm*/
    .sp{
        display: none;
    }
    .container{
        width:980px;
        height:100%;
        margin:0 auto;
    }
    .normal_txt{
        width:635px;
    }
    .normal_txt_2{
        width:589px;
    }
    .contact .form{
        width:513px;
    }
    header{
        height:846px;
        background-position: center center;
        background-image:url("../img/header_bg.png");
    }
    header table td.upper{
        height:41%;
    }
    header table td.lower h2{
        margin-top:42px;
        font-size: 31px;
        letter-spacing: 0.1em;
    }
    nav{
        height:129px;
        position:fixed;
        top:0;
        z-index: 9;
    }
    h3.head_line{
        font-size:58px;
    }
    h4.head_line{
        font-size:41px;
    }
    .normal_txt{
        letter-spacing: 0.05em;
        font-size: 15px;
        line-height: 1.8em;
        margin-bottom:60px;
    }
    .normal_txt_2{
        letter-spacing: 0.05em;
        font-size: 15px;
        line-height: 1.8em;
        margin-bottom:60px;
    }
    .normal_txt_3{
        letter-spacing: 0.05em;
        font-size: 15px;
        line-height: 1.8em;
    }
    .desc-1 h3{
        margin:85px 0;
        margin-bottom:50px;
    }
    .desc-2 .head_line{
        margin:50px auto;
        margin-bottom: 70px;
    }
    .desc-2 .img_wrapper.bubble img{
        width:auto;
    }
    .desc-2 .pore_img_array .normal_txt_2{
        
    }
    .desc-2 .thermograph .normal_txt_3{
        top:70px;
    }
    .desc-2 .thermograph .sp table img{
    }
    .about_us h3{
        margin:100px 0;
        margin-bottom:50px;
    }
    .interval_bg{
        background-image:url("../img/header_bg.png");
        height:616px;
    }
    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder{
        font-size:10px;
    }
    input:-ms-input-placeholder,
    textarea:-ms-input-placeholder{
        font-size:10px;
    }
    input::-moz-placeholder,
    textarea::-moz-placeholder{
        font-size:10px;
    }
    .contact .form form input,
    .contact .form form textarea{
        padding:0.1em 0.5em;
    }
    .contact .form{
    }
    .contact .form form textarea{
        height: 50px;
    }
    footer{
        text-align: right;
    }
}


/*
*
*   COMMON
*
*/

*{
    font-family: futura-lt-w01-book,sans-serif;
}
.fade_anim{
    opacity:0.1;
}
h3.head_line{
    color:#808080;
    text-align: center;
}
h4.head_line{
    color:#808080;
    text-align: center;
}
.normal_txt{
    font-family: avenir-lt-w01_35-light1475496,sans-serif;
    margin:0 auto;
    color:#808080;
}
.normal_txt_2{
    font-family: avenir-lt-w01_35-light1475496,sans-serif;
    margin:0 auto;
    color:#808080;
}
.normal_txt_3{
    font-family: avenir-lt-w01_35-light1475496,sans-serif;
    margin:0 auto;
    color:#808080;
}
body{
    overflow-x: hidden;
}

/*
*
*   HEADER
*
*/

header{
    position:relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
header table{
       height:100%;
       width:100%;
}
header table td{
       text-align: center;
}
header table td.upper{
    vertical-align: bottom;
}
header table td.lower{
    vertical-align: top;
}
header table td.lower h2{
    color:#fff;
}

/*
*
*   NAV
*
*/

nav{
    background:rgba(40,40,40,0.6);
    width:100%;
}
nav .col,
nav .row,
nav table,
nav table td{
    height:100%;
    width:100%;
}
nav table td{
    vertical-align: bottom;
    text-align: right;
}
nav table td p{
    margin-bottom:25px;
    font-size:15.2px;
}
nav table td span{
    display: inline-block;
    padding: 0 10px;
    color: #FFFFFF;
    transition: color 0.4s ease 0s;
    letter-spacing: 0em;
    text-decoration: none!important;
    cursor: pointer;
}
nav table td span.active,
nav table td span:hover{
    color:#8ACAFF;
}

/*sp*/
.button_wrapper .button{
    text-align: right;
}
.button_wrapper .button button{
    border:1px solid #fff;
    border-radius: 5px;
    color:#fff;
    margin:10px;
    background:rgba(40,40,40,0.6);
    cursor: pointer;
}
.button_wrapper .button button.is-active{
    background:none;
    border:none;
}
.button_wrapper .button button .hamburger-inner,
.button_wrapper .button button .hamburger-inner:after,
.button_wrapper .button button .hamburger-inner:before{
    background-color:#fff;
}
.button_wrapper .button button{
    padding:7px;
    padding-top:9px;
}
.button_wrapper .button button .hamburger-box,
.button_wrapper .button button .hamburger-inner,
.button_wrapper .button button .hamburger-inner::before,
.button_wrapper .button button .hamburger-inner::after {
    width: 30px;
    border-radius: 1px;
}
.sp_nav{
    position:fixed;
    top:0;
    right:-100%;
    width:60%;
    background-color:rgba(138, 202, 255, 1);
    z-index: 10;
    height:100%;
    opacity:0;
    -moz-transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    transition:0.3s ease;
}
.sp_nav.is-active{
    top:0;
    right:0;
    opacity:1;
}
.sp_nav p{
    position:absolute;
    text-align: right;
    right:20px;
    top:80px;
}
.sp_nav p span{
    display: block;
    margin: 18px 0;
    color:#fff;
}
.sp_nav p span.active{
    color:#808080;
}

.scrolltop img{
    width:25px;
}

/*
*
*   DESC-1
*
*/

.desc-1{
    
}
.desc-1 h3{
    text-align: center;
    line-height: normal;
    letter-spacing: normal;
}
.desc-1 h3 span{
    display: block;
}
.desc-1 .gallery img{
    width:100%;
}

/*
*
*   DESC-2
*
*/

/* 1,2 */
.desc-2 .img_wrapper.bubble img{
}
.desc-2 .small_img_wrapper img{
    width:auto;
}
.desc-2 .img_wrapper.pore img{
    display: inline-block;
    margin:7px;
}
.desc-2 .img_wrapper{
    text-align: center;
}
/* 3 */
.desc-2 .thermograph h4{
    margin-bottom:20px;
}
.desc-2 .thermograph .normal_txt_3{
    position:relative;
}
.desc-2 .thermograph table
.desc-2 .thermograph table tr{
    width:100%;
}
.desc-2 .thermograph table tr td{
    text-align: center;
    padding:10px;
}
.desc-2 .thermograph table tr td span{
    font-family: avenir-lt-w01_35-light1475496,sans-serif;
    color:#808080;
    font-weight: bold;
}
.slide_up{
    opacity: 0.1;
    position:relative;
    top:50px;
}
.slide_left{
    opacity: 0.1;
    position:relative;
    left:50px;
}

/* 4 */
.desc-2 .showerheads img{
    width:100%;
}
.desc-2 .showerhead img{
    width:100%;
    margin-top:120px;
}

/*
*
*   ABOUT US
*
*/

.about_us h3{
}

/*
*
*   INTERVAl BG
*
*/

.interval_bg{
    margin-top:80px;
    position:relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
}

/*
*
*   contact
*
*/

.contact{
    text-align: center;
    color:#fff;
    background-color:#4c8dcb;
    padding-bottom:50px;
}
.contact h3{
    margin:50px 0;
}
.contact .toshin_logo img{
    width:110px;
}
.t_n_e{
    margin-bottom:50px;
}
.t_n_e a{
    color:#fff;
    text-decoration: none;
}
.contact .head_line{
    color:#fff;
}
.contact .form{
    margin:0 auto;
}

.contact .form form input,
.contact .form form textarea{
    width:100%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: #fff;
    margin:10px 0;
    display: block;
    background: none;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
    color: #fff;
    font-weight: normal;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder{
    color: #fff;
    font-weight: normal;
}
input::-moz-placeholder,
textarea::-moz-placeholder{
    color: #fff;
    font-weight: normal;
}
.contact .form form .button{
    text-align: right;
}
.contact .form form #submit{
    background-color: #fff;
    display: inline-block;
    color:#000;
    padding:0.1em 0.5em;
}

/*
*
*   FOOTER
*
*/

footer{
    color:#fff;
    background-color:#2a2a2a;
    padding:10px;
}