@charset "utf-8";

/* CSS Document */

#contents {

    background: #fbfbfb;

    padding: 70px 0 80px;

}





#mainTitle {

    background-image: url("../images/bg_news.jpg");

    margin-top: 0px !important;

}



#breadChumbs ul {
    margin-left: 30px;
    margin-top: 3px;
    color: #FFF;
    display: inline-block;
}



#breadChumbs ul li {

    display: inline-block;

}



#breadChumbs ul li a {

    color: #FFF;

}



#mainTitle h2 {

    padding: 0px 0;

}



section.latest_news h3 {

    text-align: center;

    font-size: 2em;

    font-family: 'Lora', 'Hiragino Mincho Pro', 'MS PMincho', serif;

    margin-bottom: 60px;

    font-weight: normal;

    letter-spacing: 1px;

}

section.latest_news h1 {

    text-align: center;

    font-size: 2em;

    font-family: 'Lora', 'Hiragino Mincho Pro', 'MS PMincho', serif;

    margin-bottom: 60px;

    font-weight: normal;

    letter-spacing: 1px;

}



.bar {

    position: absolute;

    height: 1px;

    width: 60px;

    background: #000;

    left: 0;

    right: 0;

    margin: -26px auto;

}



section.latest_news .tag {

    text-align: center;

    font-size: 1.4em;

    font-family: 'Lora', 'Hiragino Mincho Pro', 'MS PMincho', serif;

    font-weight: normal;

    letter-spacing: 1px;

}



section.latest_news ul.ln_container {

    width: 960px;

    overflow: hidden;

    display: table;

    margin: 40px auto;

}



section.latest_news ul.ln_container li {

    width: 33.33%;

    display: table-cell;

    position: relative;

}



section.latest_news ul.ln_container li a {

    display: block;

}



section.latest_news ul.ln_container li .pic {

    height: 180px;

    background-position: center center;

    background-size: cover;

}



section.latest_news ul.ln_container li span {

    background-position: center center;

    background-size: 100%;

    width: 70px;

    height: 70px;

    position: absolute;

    left: 0;

    right: 0;

    margin: 0 auto;

    margin-top: -35px;

}



.water {background-image: url(../images/icon_1.gif);}

.water_dispensers {background-image: url(../images/icon_2.gif);}

.recipes {background-image: url(../images/icon_3.gif);}

.water_for_babies {background-image: url(../images/icon_4.gif);}

.diet {background-image: url(../images/icon_5.gif);}

.health {background-image: url(../images/icon_6.gif);}

.others {background-image: url(../images/icon_7.gif);}



section.latest_news ul.ln_container li h4 {

   font-family: 'Lora', 'Hiragino Mincho Pro', 'MS PMincho', serif;

    font-size: 1.5em;

    font-weight: normal;

    line-height: 1.5em;

    text-align: center;

    padding: 40px 20px 20px;

    border-bottom: 1px solid #ddd;

    color: #34adda;

}



section.latest_news ul.ln_container li .desc {

    padding: 20px 15px;

}



section.news_list h3 {

    text-align: center;

    letter-spacing: 1px;

    font-weight: normal;

    font-size: 2em;

    font-family: 'Lora', 'Hiragino Mincho Pro', 'MS PMincho', serif;

    margin-bottom: 60px;

}



section.news_list ul.news_container {

    width: 960px;

    margin: 0 auto;

    overflow: hidden;

    padding: 0 0 50px 0;

}



section.news_list ul.news_container li {

    float: left;

    width: 30%;

    margin-right: 5%;

    margin-top: 30px;

}



section.news_list ul.news_container li a {

    display: block;

}



section.news_list ul.news_container li:nth-child(3n) {

    margin-right: 0%;

}



section.news_list ul.news_container li:last-child {

    margin-right: 0%;

}



section.news_list ul.news_container li .news_image {

    background-size: cover;

    background-position: center center;

    height: 180px;

}



section.news_list ul.news_container li .news_date {

    text-align: left;

    position: relative;

    padding: 10px 0px;

}



section.news_list ul.news_container span {

    position: absolute;

    right: 0;

    background-repeat: no-repeat;

    background-position: right center;

    width: 100%;

    height: 20px;

}



.t_water {background-image: url(../images/tag_1.gif);}

.t_water_dispensers {background-image: url(../images/tag_2.gif);}

.t_recipes {background-image: url(../images/tag_3.gif);}

.t_water_for_babies {background-image: url(../images/tag_4.gif);}

.t_diet {background-image: url(../images/tag_5.gif);}

.t_health {background-image: url(../images/tag_6.gif);}

.t_others {background-image: url(../images/tag_7.gif);}



section.news_list ul.news_container li .news_desc {

    text-align: left;

}



.order_box {

    width: 960px;

    margin: 0 auto;

    position: relative;

}



.order_box img.banner {

    width: 100%;

}



.order_box a {

    position: absolute;

    bottom: 40px;

    left: 55px;

}



.order_box a img {



}



.sns_container {

    text-align: center;

    background: #bdd4e2;

    padding: 10px;

}



.sns_container a {

    margin: 0 5px;

}



section.detail {

    width: 960px;

    margin: 0 auto;

    position: relative;

    overflow: hidden;

}



section.detail .tab_right {

    border: 1px solid #ddd;

    width: 640px;

    float: left;

    background: #FFF;

    padding: 40px 30px 20px;

    position: relative;

}



section.detail .tab_right .tag {

    background-repeat: no-repeat;

    background-position: center center;

    width: 100%;

    height: 20px;

}

section.detail .tab_right h1 {

    text-align: center;

    font-size: 2em;

    font-family: 'Lora', 'Hiragino Mincho Pro', 'MS PMincho', serif;

    margin-bottom: 60px;

    margin-top: 30px;

    font-weight: normal;

}

section.detail .tab_right h2 {

    text-align: center;

    font-size: 2em;

    font-family: 'Lora', 'Hiragino Mincho Pro', 'MS PMincho', serif;

    margin-bottom: 60px;

    margin-top: 30px;

    font-weight: normal;

}



section.detail .tab_right .date {
    text-align: center;
    margin-bottom: 10px;
}



section.detail .tab_right img.main_pic {
    margin: 0 auto;
    min-width: 100%;
}





/*section.detail .tab_right .detail_main img{

    width:100%;

}
*/


section.detail .tab_sns {

    width: 640px;

    float: left;

    border: 1px solid #ddd;

    border-top: 0px solid #ddd;

    background: #FFF;

    padding: 30px 30px;

}



section.detail .side_bar {

    width: 250px;

    float: right;

    position: absolute;

    right: 0;

}



section.detail .side_bar p {

    background: #e6f2f8;

    font-family: 'Lora', 'Hiragino Mincho Pro', 'MS PMincho', serif;

    font-weight: normal;

    font-size: 1.3em;

    padding: 7px;

    border: 1px solid #4cc3f0;

}



section.detail .side_bar ul {

    margin: 5px 0 60px 0;

}



section.detail .side_bar ul li {

    border-bottom: 1px solid #ddd;

    padding: 10px 10px;

    font-weight: normal;

    font-size: 1.3em;


}



section.detail .side_bar ul li a {

    color: #5598c6;

}













#footer .container_wp {

    background: #69686e;

    overflow: hidden;

    padding: 40px 0;

}



#footer .container_wp .wp_inner {

    width: 960px;

    margin: 0 auto;

    position: relative;

}



#footer .wp_inner img {

    position: absolute;

    right: 0;

    top: 100px;

}



#footer .wp_inner div {

    float: left;

    margin-left: 60px;

}



#footer .wp_inner div p {

    font-family: 'Lora', 'Hiragino Mincho Pro', 'MS PMincho', serif;

    color: #FFF;

    font-size: 1.5em;

    letter-spacing: 2px;

}



#footer .wp_inner div ul {

    margin-top: 20px;

}



#footer .wp_inner div ul li {

    margin-bottom: 10px;

}



#footer .wp_inner div ul li a {

    color: #d6d6d6;

}



#footer .wp_inner div ul li a:hover {

    color: #FFF;

}











.bar {

    position: absolute;

    height: 1px;

    width: 60px;

    background: #000;

    left: 0;

    right: 0;

    margin: -26px auto;

}



.sns {

    text-align: center;

    margin: 20px;

}









@media screen and (max-width:780px){
    .detail_main img{

        width:100%;
        height:auto;

    }
    #contents {

        padding: 70px 0 80px;

    }

    section.latest_news ul.ln_container {

        width: 96%;

    }



    section.news_list ul.news_container {

        width: 96%;
        padding: 0px 0 0px;
    }



    .order_box {

        width: 96%;

    }



    #breadChumbs .bc_inner {

        width: 96%;

    }



    #mainTitle h2 img {

        width: 96%;

        padding: 2% 0;

    }



    section.latest_news .tag {

        width: 96%;

    }



    section.latest_news ul.ln_container li {

        width: 96%;

        display: block;

        margin: 0 auto;

    }



    section.latest_news ul.ln_container li .pic {

        height: 50%;

        background-position: center center;

        background-size: cover;

        padding: 25%;

    }



    section.news_list ul.news_container li {

        float: none;

        width: 96%;

        margin-right: auto;

        margin-left: auto;

    }



    section.news_list ul.news_container li:nth-child(3n) {

        margin-right: auto;

    }



    section.news_list ul.news_container li .news_image {

        padding: 25%;

    }



    .order_box a {

        bottom: 20%;

        left: 6%;

    }



    .order_box a img {

        width: 60%;

        padding-left: 0%;

        padding-right: 30%;

    }



    #footer .container_wp .wp_inner {

        width: 100%;

    }



    #footer .wp_inner img {

        right: 30px;

        top: 200px;

    }



    section.detail {

        width: 100%;

    }



    section.detail .tab_right {

        border: 1px solid #ddd;

        width: 96%;

        float: none;

        margin: 0 auto;

        padding: 40px 2% 20px;

    }



    section.detail .tab_right img.main_pic {

        width: 98%;

        margin: 0 1% 0 1%;

    }



    section.detail .tab_sns {

        width: 96%;

        float: none;

        margin: 0 auto;

    }



    section.detail .side_bar {

        width: 96%;

        float: none;

        position: relative;

        margin: 30px auto 0 auto;

    }



    .sns img {

        width: 70%;

    }

    section.detail .tab_sns {
        padding: 30px 0px 30px 5px;
    }

}

















@media screen and (max-width:400px){

    #footer .wp_inner div {

        float: left;

        margin-left: 25px;

    }

}