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

.page_ttl .wrap {
    position: relative;
    height: 100%;
}

.page_ttl .wrap #blue_back: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;
    opacity: 0.5; /* ← 薄くする場合追加 */
}

.photo_back {
	padding: 0px;
	height: 400px !important;
	position: relative;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: cover !important;
}

.photo_back h1 {
	background: rgba(255,255,255,0.8);
	text-align: center;
    padding: 20px;
    bottom: 50px;
    position: absolute;
}

.sec_ttl {
	margin: 0px auto 100px;
	font-feature-settings: 'palt';
	line-height: 130%;
}

.sec_ttl_02 {
	margin: 60px auto 20px;
	font-size: 4.4rem;
	line-height: 130%;
}

.txt_box {
	max-width: 720px;
	margin: 0px auto;
	position: relative;
	font-size: 1.6rem;
	text-align: justify;
}

.sec_mv {
	height: 400px !important;
	position: relative;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: cover !important;
	margin: 0px 0px 100px;
}

.list_wrap li {
	font-size: 1.6rem;
	position: relative;
	padding: 5px 5px 10px 30px;
    line-height: 100%;
}

.wp_content > ul > li {
	font-size: 1.6rem;
	position: relative;
	padding: 5px 5px 10px 30px;
    line-height: 100%;
}

.list_wrap li::before {
	content: '';
	background: #0C86B6;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-block;
	top: 2px;
	left: 0;
	position: absolute;
}

.wp_content > ul > li::before {
	content: '';
	background: #0C86B6;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-block;
	top: 2px;
	left: 0;
	position: absolute;
}

.num_list {
	counter-reset:num;
	list-style-type: none !important;
}

.num_list li {
	font-size: 1.6rem;
	position: relative;
	padding-left: 30px;
	padding: 5px 5px 10px 30px;
}

.num_list li:before {
  position: absolute;
  counter-increment: num;
  content: counter(num);
  display:inline-block;
  background: #DB536B;
  color: #FFF;
  font-family: 'Arial',sans-serif;
  font-weight:bold;
  font-size: 14px;
  border-radius: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  top: 2px;
}

.wp_content > ol {
	counter-reset:num;
	list-style-type: none !important;
}

.wp_content > ol > li {
	font-size: 1.6rem;
	position: relative;
	padding-left: 30px;
	padding: 5px 5px 10px 30px;
}

.wp_content > ol > li:before {
  position: absolute;
  counter-increment: num;
  content: counter(num);
  display:inline-block;
  background: #DB536B;
  color: #FFF;
  font-family: 'Arial',sans-serif;
  font-weight:bold;
  font-size: 14px;
  border-radius: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  top: 2px;
}

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

.sec_ttl {
	margin: 0px 15px 30px;
}

.sec_ttl_02 {
    margin: 40px auto 10px;
    font-size: 3rem;
}

    .page_ttl .wrap:after{
        margin-top: -4vw;
        width: 46vw;
        height: 8vw;
    }
	
	.photo_back {
		height: 200px !important;
	}
	
	.line_back {
		height: 150px !important;
	}

}


/* ------------------------------
ボックスセパレート
------------------------------ */
.flex{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.box.flex{
    margin-right: calc((100% - (1080px) )/ 2);
    margin-bottom: 200px;
	justify-content: space-between;
}

.box.flex.reverse{
    flex-direction: row-reverse;
    margin-right: 0;
    margin-left: calc((100% - (1080px) )/ 2);
	justify-content: space-between;
}

.box .txt{
     padding: 0px;
    box-sizing: border-box;
	max-width: 540px;
}
.box.reverse .txt{
	padding: 0px;
	max-width: 540px;
}

.box .txt h2 {
    font-size: 4.4rem;
    line-height: 1.45;
    margin-bottom: 20px;
}

.box .txt h3 {
    font-size: 3.2rem;
	margin-bottom: 40px;
    line-height: 130%;
}

.box .txt h4 {
    font-size: 2.4rem;
	margin-bottom: 40px;
    line-height: 130%;
}

.box .txt p{
    font-size: 1.6rem;
    line-height: 2;
}
.box .img{
    width: 600px;
}
.ie .box .img{
    width: 730px;
}
.box .img img{
    width: 100%;
    height: auto;
}


@media screen and (max-width : 1320px){
    .box .txt{
         padding: 0 0 0 20px;
    }
    .box.reverse .txt{ padding: 0 20px 0 0;}
    .box .txt h2{
        font-size: 4.0rem;
    }
 
	.sec_ttl {
	    margin: 0px 15px 30px;
		font-size: 3rem;
	}

	.box .txt h3 {
	    font-size: 2.6rem;
	    margin-bottom: 20px;
	}
	
   .box .img{
        width: 100%;
        max-width: 600px;
    }
    .box .img img{
        width: 100%;
        height: auto;
    }

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

    .box .txt{
        padding: 5% 4%;
        box-sizing: border-box;
    }
    .box.reverse .txt{ padding: 5% 4%;}
    .box .txt h2{
        font-size: 5.867vw;
        line-height: 1.65;
        margin-bottom: 5%;
    }
    .box .txt p{
        font-size: 3.733vw;
    }
    .box .img{
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }
    .wrap{ margin-top: 0%;}

}



/* ------------------------------
その他のおすすめブランド
------------------------------ */
.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.products29{background: #c4d700;}
.sec-recommend .slider-block .ttl.products150{ background: #6088E5;}
.sec-recommend .slider-block .ttl.products51{background: #F1A119;}
.sec-recommend .slider-block .ttl.products60{ background: #A03FB5;}
.sec-recommend .slider-block .ttl.products76{ background: #E15757;}


@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;*/
        height: 45vw; /* */
        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;
    }
}