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

/* 修正後（10行目付近〜） */
.page_ttl .wrap{ position: relative;}
.page_ttl .wrap:after{
    display: block;
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -55px;
    background: url("../img/common/h_logo.png") no-repeat center center; /* ← svgからpngに変更 */
    background-size: 100% auto;
    width: 539px;
    height: 119px;
}

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

    .page_ttl .wrap:after{
        margin-top: -4vw;
        width: 46vw;
        height: 8vw;
    }

}

/* ------------------------------
sec01
------------------------------ */
.sec01{
    padding: 0 0 60px 0;
}

.tbl01{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border-top: 1px solid #4F493C;
    box-sizing: border-box;
}
.tbl01 th,
.tbl01 td{
    font-size: 1.6rem;
    line-height: 2;
    vertical-align: top;
    padding: 20px 0;
    border-bottom: 1px solid #4F493C;
    box-sizing: border-box;
}

.tbl01 th{
    width: 256px;
}
.tbl01 td{
    width: calc(100% - 256px);
    font-size: 1.6rem;
    line-height: 2;
}
.tbl01 td dl{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.tbl01 td dl dt,
.tbl01 td dl dd{
    font-size: 1.6rem;
    line-height: 2;
    box-sizing: border-box;
}
.tbl01 td dl dt{
    width: 240px;
}
.tbl01 td dl dd{
    width: 275px;
}
.tbl01 td dl dd.map{
    width: auto;
}
.tbl01 td dl dd.map a{
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 900;
    color: #0C86B6;
    font-family: Arial, Helvetica, 'sans-serif' !important;
}


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

    .tbl01{
        display: block;
    }
    .tbl01 th,
    .tbl01 td{
        display: block;
        font-size: 3.733vw;
        padding: 0 0 4% 0;
    }

    .tbl01 th{
        width: 100%;
        padding-top: 4%;
        padding-bottom: 1%;
        border-bottom: none;
    }
    .tbl01 td{
        width: 100%;
        font-size: 3.733vw;
    }
    .tbl01 td dl{
        flex-wrap: wrap;
    }
    .tbl01 td dl+dl{ margin-top: 4%;}
    .tbl01 td dl dt,
    .tbl01 td dl dd{
        font-size: 3.733vw;
    }
    .tbl01 td dl dt{
        width: 100%;
    }
    .tbl01 td dl dd{
        width: auto;
    }
    .tbl01 td dl dd.map{
        width: auto;
        margin-left: 4%;
    }
    .tbl01 td dl dd.map a{
        font-size: 4.8vw;
    }

}

/* ------------------------------
sec02
------------------------------ */
.sec02{
    margin-top: 50px;
    padding: 0 0 50px 0;
}
.sec02 .tbl01{
    padding: 10px 0;
    border-bottom: 1px solid #4F493C;
}
.sec02 .tbl01 th,
.sec02 .tbl01 td{
    position: relative;
    padding:0;
    border-bottom: none;
    box-sizing: border-box;
}

.sec02 .tbl01 tr:nth-of-type(1) th,
.sec02 .tbl01 tr:nth-of-type(1) td{padding-top: 20px;}
.sec02 .tbl01 tr:last-of-type th,
.sec02 .tbl01 tr:last-of-type td{ padding-bottom: 20px;}

.sec02 .tbl01 th span{
    position: absolute;
    left: 70px;
    top: 0;
}


@media screen and (max-width : 767px){
    .sec02{
        margin-top: 6%;
        padding: 0 0 6% 0;
    }
    .sec02 .tbl01{
        padding: 0;
        border-bottom: 1px solid #4F493C;
    }
    .sec02 .tbl01 th, .sec02 .tbl01 td{
        padding: 0 0 4% 0;
    }
    .sec02 .tbl01 th{ padding-bottom: 1%;}
    .sec02 .tbl01 tr:nth-of-type(1) th{padding-top: 4%;}
    .sec02 .tbl01 tr:nth-of-type(1) td{padding-top: 1%; padding-bottom: 4%;}
    .sec02 .tbl01 tr:last-of-type th{ padding-bottom: 1%;}
    .sec02 .tbl01 tr:last-of-type td{ padding-bottom: 4%;}

    .sec02 .tbl01 th span{
        position: absolute;
        left: 16vw;
    }
    .sec02 .tbl01 th span.sp{
        position: relative;
        left: 0;
    }

}

/* ------------------------------
sec03
------------------------------ */
.sec03{
    margin-top: 50px;
    margin-bottom: 200px;
}

.tab_wrap{
    position: relative;
}
.tab_list{
    display: flex;
    justify-content: flex-end;
}
.tab_list li{
    width: 48%;
    max-width: 252px;
    font-size: 1.6rem;
    color: #FFF;
    text-align: center;
    background: #A4BCD4;
    padding: 4px;
    cursor: pointer;
}
.tab_list li+li{ margin-left: 10px;}
.tab_list li.active{
    background: #0C86B6;
}

.tab_cnts .tab_box{
    display: none;
    border: 1px solid #707070;
    height: 460px;
    box-sizing: border-box;
    
}
.tab_cnts .tab_box.show{ display: block;}

.tab_cnts .tab_box iframe{
    width: 100%;
    height: 100%;
    border: none;
    box-sizing: border-box;
}


@media screen and (max-width : 767px){
    .sec03{
        margin-top: 6%;
        margin-bottom: 14%;
    }

    .tab_list{
        display: flex;
        justify-content: flex-end;
    }
    .tab_list li{
        width: 49.5%;
        max-width: inherit;
        font-size: 3.2vw;
        padding: 10px 4px;
    }
    .tab_list li+li{ margin-left: 1%;}

    .tab_cnts .tab_box{
        height: 64vw;
    }

}


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

.sec-recommend .slider-block .ttl.products60{ background: #a24a98;} /*三島市シリカ水*/
.sec-recommend .slider-block .ttl.products150{ background: #6a9fd5;} /*富士山バナジウム水*/
.sec-recommend .slider-block .ttl.products29{ background: #c4d700;} /*伊豆の天然水*/
.sec-recommend .slider-block .ttl.products51{ background: #fcd475;} /*箱根の天然水*/

@media screen and (max-width : 767px){
    .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;
    }


}



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

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