@charset "utf-8"; 
/* ------------------------------
common
------------------------------ */
.header_inner{
    position: relative;
}

.page-head{
    position: relative;
}

.bg_page-head{
    padding: 165px 0 55px 0;
    background: url("../img/service/item01/bg_head.jpg") no-repeat center center;
    background-size: cover;
}
.page-head h1{
    box-sizing: border-box;
}
.page-head h1 span{
    display: inline-block;
    background: rgba(255,255,255,.8);
    box-sizing: border-box;
}
.page-head h1 .small{
    font-size: 2.8rem;
    margin-bottom: 20px;
    padding: 10px 20px 15px 20px;
}
.page-head h1 .ttl{
    font-size: 6.4rem;
    font-weight: 700;
/*    border-bottom: 10px solid #8A4496;*/
    padding: 27px 20px 31px 20px;
}

.page-head .btm-page_head{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 50px 0 40px 0;
    box-sizing: border-box;
}
.page-head .btm-page_head .txt p{
    font-size: 1.6rem;
    line-height: 2;
}
.page-head .btm-page_head .img{
    position: absolute;
    right: 0;
    bottom: 40px;
}

@media screen and (max-width : 767px){
    .bg_page-head{
        padding: 12% 0 16% 0;
    }
    .page-head h1 .small{
        font-size: 3.733vw;
        margin-bottom: 5%;
        padding: 5px 15px 6px 15px;
    }
    .page-head h1 .ttl{
        font-size: 5.867vw;
/*        border-bottom: 6px solid #8A4496;*/
        padding: 13px 15px 12px 15px;
    }

    .page-head .btm-page_head{
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 22% 0 8% 0;
    }
    .page-head .btm-page_head .txt p{
        font-size: 3.733vw;
    }
    .page-head .btm-page_head .img{
        width: 42%;
        right: -4%;
        top: -40vw;
/*        bottom: 32vw;*/
    }

}

/* ------------------------------
tag_container
------------------------------ */
.tag_container{
    padding: 35px 0 15px 0;
    background: #EFEFEF;
    box-sizing: border-box;
}

.tag_container .wrap{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.tag_container .tag_wrap{
    width: 68%;
}
.tag_container .tag_wrap ul{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}
.tag_container .tag_wrap li{
    display: inline-block;
    font-size: 1.4rem;
    line-height: 2;
    background: #FFF;
    border-radius: 15px;
    border: 1px solid #CCCCCC;
    padding: 0 10px;
    margin: 0 10px 20px 0;
    box-sizing: border-box;
}
.tag_container .tag_wrap li.oem{
    color: #FFF;
    background: #0C86B6;
    border: 1px solid #0C86B6;
}

.tag_container .btn_wrap{
    width: 29%;
    max-width: 310px;
}
.tag_container .btn_wrap .btn,
.shop_container .btn_wrap .btn{
    display: block;
    width: 100%;
    border-radius: 25px;
    text-align: center;
    color: #FFF;
    background: #DB536B;
    font-size: 1.6rem;
    font-weight: 700;
    padding: 14px 10px 9px 10px;
    box-sizing: border-box;
    transition: .4s;
}
.tag_container .btn_wrap .btn:hover,
.shop_container .btn_wrap .btn:hover{ opacity: .7;}
.tag_container .btn_wrap .btn .ico-shop,
.shop_container .btn_wrap .btn .ico-shop{
    position: relative;
}
.tag_container .btn_wrap .btn .ico-shop:before,
.shop_container .btn_wrap .btn .ico-shop:before{
    position: relative;
    top: -1px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
    content: '';
    background: url("../img/common/ico-shop.svg") no-repeat center center;
    background-size: 100% auto;
    width: 30px;
    height: 27px;
}

@media screen and (max-width : 767px){
    .tag_container{
        padding: 8% 0;
    }

    .tag_container .wrap{
        display: block;
    }

    .tag_container .tag_wrap{
        width: 100%;
    }

    .tag_container .tag_wrap li{
        display: inline-block;
        font-size: 3.467vw;
        padding: 0 10px;
        margin: 0 10px 4% 0;
        box-sizing: border-box;
    }
    .tag_container .btn_wrap{
        width: 100%;
        max-width: inherit;
        margin: 6% auto 0 auto;
    }
    .tag_container .btn_wrap .btn,
    .shop_container .btn_wrap .btn{
        font-size: 3.733vw;
        padding: 14px 10px 14px 10px;
    }
    .tag_container .btn_wrap .btn .ico-shop:before,
    .shop_container .btn_wrap .btn .ico-shop:before{
        top: -.3vw;
        margin-right: 10px;
        background-size: 100% auto !important;
        width: 6vw;
        height: 6vw;
    }
}

/* ------------------------------
sec02
------------------------------ */
.sec02{
    padding: 150px 0 120px 0;
    box-sizing: border-box;
}
.sec02 .flex{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.sec02 .box.flex{
    justify-content: flex-start;
    margin-right: calc((100% - (1080px) )/ 2);
    margin-bottom: 200px;
}
.sec02 .box.flex.reverse{
    flex-direction: row-reverse;
    margin-right: 0;
    margin-left: calc((100% - (1080px) )/ 2);
}

.sec02 .box .txt{
     padding: 0 0 0 80px;
    box-sizing: border-box;
}
.sec02 .box.reverse .txt{ padding: 0 80px 0 0;}
.sec02 .box .txt h2{
    font-size: 4.4rem;
    line-height: 1.45;
    margin-bottom: 20px;
}
.sec02 .box .txt p{
    font-size: 1.6rem;
    line-height: 2;
}
.sec02 .box .img{
    width: 100%;
    max-width: 600px;
}
.ie .sec02 .box .img{
    width: 730px;
}
.sec02 .box .img img{
    width: 100%;
    height: auto;
}


.sec02 .subbox{
    width: 48%;
    max-width: 458px;
    box-sizing: border-box;
}
.sec02 .subbox .ttl_box{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}
.sec02 .subbox h3{
    font-size: 3.2rem;
}
.sec02 .subbox .ttl_box span{
    font-size: 1.6rem;
}
.sec02 .subbox:nth-of-type(2){ padding-left: 80px;}

/*.sec02 .subbox .tbl01,*/
.sec02 .subbox .tbl02{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border-top: 1px solid #4F493C;
    box-sizing: border-box;
}
.sec02 .subbox .tbl02{
/*    border-bottom: 1px solid #4F493C;*/
}

.sec02 .subbox .tbl01 th,
.sec02 .subbox .tbl02 th,
.sec02 .subbox .tbl01 td,
.sec02 .subbox .tbl02 td{
    vertical-align: middle;
    padding: 0;
    font-size: 1.6rem;
    line-height: 2;
    box-sizing: border-box;
}
.sec02 .subbox .tbl01 th{
    font-size: 2.8rem;
    color: #DB536B;
}
.sec02 .subbox .tbl01 td{
    font-size: 2.8rem;
    font-weight: 700;
    color: #DB536B;
}
.sec02 .subbox .tbl01 td,
.sec02 .subbox .tbl02 td{ text-align: right;}

.sec02 .subbox .tbl01 tr:first-of-type th,
.sec02 .subbox .tbl01 tr:first-of-type td{ padding-top: 10px;}
.sec02 .subbox .tbl01 tr:last-of-type th,
.sec02 .subbox .tbl01 tr:last-of-type td{ padding-bottom: 10px;}

.sec02 .subbox .tbl02 tr:first-of-type th,
.sec02 .subbox .tbl02 tr:first-of-type td{ padding-top: 10px;}
.sec02 .subbox .tbl02 tr:last-of-type th,
.sec02 .subbox .tbl02 tr:last-of-type td{ padding-bottom: 10px;}

.sec02 .production{
    margin-top: 1.8rem
}

.sec02 .grid {
    flex-wrap: wrap;
    margin-bottom: 200px;
}
.sec02 .grid p {
    text-align: justify;
}
.sec02 .grid-1-2{
    width: 47%;
    margin-bottom: 50px;
}
.sec02 .grid-1-2 img{
    width: 100%
}

.sec02 .tbl-no-border{
    border: none !important;
}

@media screen and (max-width : 1320px){
    .sec02 .box .txt{
         padding: 0 0 0 20px;
    }
    .sec02 .box.reverse .txt{ padding: 0 80px 0 0;}
    .sec02 .box .txt h2{
        font-size: 4.0rem;
    }
    .sec02 .box .img{
        width: 100%;
        max-width: 600px;
    }
    .sec02 .box .img img{
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width : 767px){
    .sec02{
        padding: 14% 0;
    }
    .sec02 .flex{
        display: block;
    }
    .sec02 .box.flex,
    .sec02 .box.flex.reverse{
        margin: 0 auto;
    }
    .sec02 .box.flex+.box.flex{ margin-top: 10%;}

    .sec02 .box .txt{
        padding: 5% 4%;
        box-sizing: border-box;
    }
    .sec02 .box.reverse .txt{ padding: 5% 4%;}
    .sec02 .box .txt h2{
        font-size: 5.867vw;
        line-height: 1.65;
        margin-bottom: 5%;
    }
    .sec02 .box .txt p{
        font-size: 3.733vw;
    }
    .sec02 .box .img{
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }
    .sec02 .wrap{ margin-top: 12%;}
    .sec02 .subbox{
        width: 100%;
        max-width: inherit;
        box-sizing: border-box;
    }
    .sec02 .subbox .ttl_box{
        margin-bottom: 5%;
    }
    .sec02 .subbox h3{
        font-size: 5.333vw;
    }
    .sec02 .subbox .ttl_box span{
        font-size: 3.733vw;
    }
    .sec02 .subbox:nth-of-type(2){ padding-left: 0; margin-top: 10%;}

    .sec02 .subbox .tbl01 th,
    .sec02 .subbox .tbl02 th,
    .sec02 .subbox .tbl01 td,
    .sec02 .subbox .tbl02 td{
        font-size: 3.733vw;
    }
    .sec02 .subbox .tbl01 th{
        font-size: 4.8vw;
    }
    .sec02 .subbox .tbl01 td{
        font-size: 5.333vw;
    }

    .sec02 .grid {
        margin-bottom: 0;
    }
    .sec02 .grid-1-2{
        width: 100%;
    }
    .sec02 .grid-1-2 img{
    }
}

/* ------------------------------
shop_container
------------------------------ */
.shop_container{
    position: relative;
    padding: 50px 0 45px 0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fff1e5+0,fcc5d5+100 */
    background: #fff1e5; /* Old browsers */
    background: -moz-linear-gradient(top,  #fff1e5 0%, #fcc5d5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #fff1e5 0%,#fcc5d5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #fff1e5 0%,#fcc5d5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff1e5', endColorstr='#fcc5d5',GradientType=0 ); /* IE6-9 */
    box-sizing: border-box;
}
.shop_container .wrap{
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.shop_container .txt{
    width: 50%;
}
.shop_container .txt p{
    font-size: 2.4rem;
    line-height: 1.8;
}
.shop_container .txt .strong{
    font-size: 3.2rem;
    font-weight: 700;
}

.shop_container .btn_wrap{
    width: 50%;
    padding-left: 45px;
    box-sizing: border-box
}
.shop_container .btn_wrap .btn{
    max-width: 310px;
    font-size: 2.0rem;
}
.shop_container .btn_wrap .btn .ico-shop:before{ 
    top: -3px;
}

.shop_container .img{
    position: absolute;
    right: 0;
    bottom: 0;
}

@media screen and (max-width : 767px){
    .shop_container{
        padding: 0 0 0 0;
    }
    .shop_container .wrap{
        position: relative;
        top:-12vw;
        display: block;
    }
    .shop_container .txt{
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }

    .shop_container .txt p{
        font-size: 3.733vw;
    }
    .shop_container .txt .strong{
        font-size: 5.333vw;
    }

    .shop_container .btn_wrap{
        margin-top: 6%;
        width: 100%;
        padding-left: 0;
        box-sizing: border-box
    }
    .shop_container .btn_wrap .btn{
        max-width: inherit;
        font-size: 4.267vw;
    }

    .shop_container .btn_wrap .btn .ico-shop:before{ 
        top: -.4vw;
    }
    .shop_container .txt div:not(.img){width: 76%;}
    .shop_container .img{
        position: relative;
        width: 24%;
    }


}


/* ------------------------------
sec-pickup
------------------------------ */
.sec-pickup{
    padding: 90px 0;
    box-sizing: border-box;
}
.sec-head .subTtl .btn_wrap{
    position: relative;
    top: 20px;
}
.post_list_wrap.post-pickup{
    margin-top: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}
.post_list_wrap.post-pickup .post{
    width: calc(98.6% / 3);
    max-width: 350px;
    margin: 0 1.3% 20px 0;
}
.post_list_wrap.post-pickup .post:nth-of-type(3n){ margin-right: 0;}

.post_list_wrap.post-pickup .post .post-img{
    height: 234px;
}

.post_list_wrap.post-pickup .post .post-txt .post-cat{
    position: relative;
    top: -1px;
    text-align: right;
    line-height: 1;
}
.post_list_wrap.post-pickup .post .post-txt .post-cat a{
    display: inline-block;
    text-align: center;
    color: #FFF;
    font-size: 1.6rem;
    background: #DB536B;
    margin: 0 0 15px 0;;
    padding: 8px 10px;
    box-sizing: border-box;
}
.post_list_wrap.post-pickup .post .post-txt .post-ttl{
    display: block;
    font-size: 1.6rem;
    line-height: 2;
}

.post_list_wrap.post-pickup .post a,
.post_list_wrap.post-pickup .post a img{ transition: .4s;}
.post_list_wrap.post-pickup .post a:hover,
.post_list_wrap.post-pickup .post a:hover img{ opacity: .7;}

@media screen and (max-width : 767px){
    .sec-pickup{
        padding: 10% 0;
    }
    .sec-head .subTtl .btn_wrap{
        top: 3vw;
    }
    .post_list_wrap.post-pickup{
        margin-top: 16%;
        display: block;
    }
    .post_list_wrap.post-pickup .post{
        width: 100%;
        max-width: inherit;
        margin: 0 auto;
    }
    .post_list_wrap.post-pickup .post:nth-of-type(3n){ margin-right: auto;}
    .post_list_wrap.post-pickup .post+.post{ margin-top: 8%;}

    .post_list_wrap.post-pickup .post .post-img{
        height: 60vw;
    }
    .post_list_wrap.post-pickup .post .post-txt .post-cat a{
        font-size: 3.733vw;
        margin-bottom: 10px;
    }
    .post_list_wrap.post-pickup .post .post-txt .post-ttl{
        font-size: 3.733vw;
    }

}

/* ------------------------------
sec-sns
------------------------------ */
.sec-sns{
    margin: 60px auto 210px auto;
    padding-top: 50px;
    box-sizing: border-box;
}
.sec-sns .sec-head {
    justify-content: flex-start;
}
.sec-sns h2.en{
    font-size: 6.0rem;
    line-height: 1;
    color: #A79D92;
    font-weight: 900;
    margin-bottom: 25px;
}
.sec-sns .sec-head .subTtl p{
    margin-left: 40px;
    font-size: 2.0rem;
    font-weight: 700;
    color: #0C86B6;
}

.sns_container.-insta .sns_box ul{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
}
.sns_container.-insta .sns_box li{
    width: calc(95% / 6);
    max-width: 168px;
    margin: 0 1% 20px 0;
}
.sns_container.-insta .sns_box li:nth-of-type(6n){ margin-right: 0;}
.sns_container.-insta .sns_box li img{
    width: 100%;
    height: auto;
}

@media screen and (max-width : 767px){
    .sec-sns{
        margin: 5% auto 14% auto;
        padding-top: 0;
        display: block;
    }
    .sec-sns .sec-head {
        justify-content: space-between;
    }
    .sec-sns h2.en{
        font-size: 8vw;
        margin-bottom: 6%;
    }
    .sec-sns .sec-head .subTtl p{
        margin-left: 10px;
        font-size: 3.733vw;
    }

    .sns_container{
        width: 100%;
        max-width: inherit;
    }
    .sns_container+.sns_container{ margin-top: 8%;}

    .sns_container.-insta .sns_box li{
        width: calc(92% / 3);
        max-width: inherit;
        margin: 0 4% 4% 0;
    }
    .sns_container.-insta .sns_box li:nth-of-type(3n){ margin-right: 0;}

}
/* ------------------------------
sec-recommend
------------------------------ */
.sec-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sec-head .en{
    font-size: 12rem;
    font-weight: 900;
    line-height: 1;
    color: #A79D92;
}
.sec-recommend{
    background: #EFEFEF;
    padding: 50px 0 100px 0;
    box-sizing: border-box;
}
.sec-recommend .sec_ttl{
    margin-left: auto;
    margin-right: auto;
}
.sec-recommend .slider{
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}
.sec-recommend .slick-initialized .slick-slide{
    margin: 0 20px;
    width: 240px;

}
.sec-recommend .slider-block a{
    position: relative;
    display: block;
    border-radius: 40px 40px 0 0;
    box-shadow: 3px 3px 6px 0 rgba(0,0,0,.16);
    overflow: hidden;
    box-sizing: border-box;
    transition: .4s;
}
.sec-recommend .slider-block a:hover{ opacity: .7;}

.sec-recommend .slider-block .img{
    position: relative;
    height: 240px;
    z-index: 1;
}
.sec-recommend .slider-block .ttl {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}
.sec-recommend .slider-block .ttl p{
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    color: #FFF;
}
.sec-recommend .slider-block .ttl.products01{background: #E1BC58;}
.sec-recommend .slider-block .ttl.products02{ background: #6088E5;}
.sec-recommend .slider-block .ttl.products03{background: #F1A119;}
.sec-recommend .slider-block .ttl.products04{ background: #E15757;}
.sec-recommend .slider-block .ttl.products05{ background: #A03FB5;}


@media screen and (max-width : 767px){
    .sec-head{
        display: flex;
    }
    .sec-select .sec-head{
        display: block;
    }
    .sec-head .en{
        font-size: 13.333vw;
    }
    .sec-recommend{
        padding: 12% 0 14% 0;
    }
    .sec-recommend .slick-initialized .slick-slide{
        margin: 0 10px;
        width: auto;
    }
    .sec-recommend .slider-block .img{
        position: relative;
        height: 49vw;
        z-index: 1;
    }
    .sec-recommend .slider-block .ttl {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
    }
    .sec-recommend .slider-block .ttl p{
        font-size: 3.733vw;
    }


}



/* ------------------------------
タグ追加　210908
------------------------------ */

/* ------------------------------
sec02
------------------------------ */
.sec02 .effect-water{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 100px;
}
.sec02 .effect-water__block{
    margin-bottom: 50px;
    padding: 30px;
    width: 42%;
    background-color: #EFEFEF;
    border-radius: 30px;
}
.sec02 .effect-water__block h3{
    font-size: 3rem;
    margin-bottom: 3rem;
}
@media screen and (max-width : 767px){
    .sec02 .effect-water{
        display: block;
    }
    .sec02 .effect-water__block{
        padding: 10%;
        width: 80%;
        margin-bottom: 10%;
    }
    .sec02 .effect-water__block h3{
        font-size: 5.333vw;
    }
    .sec02 .effect-water__block p{
        font-size: 3.733vw;
    }
}

.products29.bg_page-head {
    background: url("../img/service/natural-water/products29/bg_head.jpg") no-repeat center center;
    background-size: cover;
}
.products51.bg_page-head {
    background: url("../img/service/natural-water/products51/bg_head.jpg") no-repeat center center;
    background-size: cover;
}
.products60.bg_page-head {
    background: url("../img/service/natural-water/products60/bg_head.jpg") no-repeat center center;
    background-size: cover;
}
.products150.bg_page-head {
    background: url("../img/service/natural-water/products150/bg_head.jpg") no-repeat center center;
    background-size: cover;
}


/* 透明ヘッダーとタイトル文字が重なって崩れるのを防ぐ調整 */
.page_ttl h1, 
.page-head h1 {
    padding-top: 90px !important; /* PC版：文字だけをヘッダーの下に押し下げる */
}

/* ==================================================
   透明ヘッダー対応：全体のバランスを保ったまま下に下げる調整
   ================================================== */

/* 1. 会社案内ページ（about.css）の背景を上に100px広げる */
.page_ttl {
    padding-top: 178px !important; /* 元の78px + ヘッダー100px分 */
}

/* 2. 製品紹介などの画像背景ページ（under.css）の背景を上に100px広げる */
.photo_back {
    height: 500px !important; /* 元の400px + ヘッダー100px分 */
}

/* 3. 天然水ページ（service-under.css）の上部に100pxの余白を作る */
.page-head {
    padding-top: 100px !important; 
}

/* --- モバイル（スマホ）用の調整 --- */
@media screen and (max-width : 767px){
    .page_ttl {
        padding-top: 25vw !important; /* スマホのヘッダー高さを考慮 */
    }
    .photo_back {
        height: 250px !important; /* 元の200px + スマホヘッダー分 */
    }
    .page-head {
        padding-top: 13.333vw !important;
    }
}