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

.page_ttl .wrap{ position: relative;}

.sec_ttl {
    margin: 0px auto 60px;
}

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

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

}


/* ------------------------------
質問リスト
------------------------------ */

.qa-list {
    position: relative;
}

.qa-list dl {
    position: relative;
    margin: 40px 0 0;
    cursor: pointer;
}
.qa-list dl:first-child {
  margin-top: 0;
}

.qa-list dl dt {
    position: relative;
    margin: 0;
    padding: 20px 20px 20px 100px;
    font-weight: bold;
    background: #FFF;
	border: 1px solid #0C86B6;
}
.qa-list dl dt::before {
    font-size: 8rem;
    line-height: 1;
    position: absolute;
    top: -26px;
    left: 10px;
    display: block;
	font-family: Arial, Helvetica, 'sans-serif' !important;
	font-weight: 900;
    content: 'Q';
    color: #A79D92;
}

.qa-list dl dt::after {
    content: '';
	background: url("../img/faq/icon_open.png");
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	width: 30px;
	height: 30px;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	position: absolute;
}

.qa-list dl dd::before {
    font-size: 8rem;
    line-height: 1;
    position: absolute;
	top: 16px;
    left: 16px;
    display: block;
    content: 'A';
	font-family: Arial, Helvetica, 'sans-serif' !important;
	font-weight: 900;
    color: #A79D92;
}
.qa-list dl dd {
    position: relative;
    margin: 0;
    padding: 30px 20px 50px 100px;
}
.qa-list dl dd p {
    margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}


/* 質問オープン */
.qa-list .open dt {
    background: #0C86B6;
	border: 1px solid #0C86B6;
	color: #FFF;
}

.qa-list .open dt::after {
	background: url("../img/faq/icon_close.png");
}

.qa-list .open dt::before {
    color: #D3DEF1;
}


@media screen and (max-width: 767px) {
 .qa-list dl {
    margin: 10px 0 0;
}

.qa-list dl dt {
    padding: 16px 60px 16px 50px;
    font-size: 14px;
}
.qa-list dl dt::before {
    font-size: 4rem;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
}
.qa-list dl dd::before {
    font-size: 4rem;
    left: 10px;
}
.qa-list dl dd {
    margin: 0;
    padding: 16px 20px 16px 50px;
    line-height: 130%;
}
.qa-list dl dd p {
    margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
	font-size: 1.6rem;
}
}

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


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


}

/* ------------------------------
sec02
------------------------------ */
.sec02{
    margin-top: 50px;
    padding: 0 0 50px 0;
}



@media screen and (max-width : 767px){
    .sec02{
        margin-top: 6%;
        padding: 0 0 6% 0;
		}


}

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

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


}

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

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


}

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

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


}


.tbl03{
    margin-top: 30px;
    border-collapse:  collapse;
}
.tbl03 th,
.tbl03 td{
    padding: 1rem 2rem;
    line-height: 2;
    border: 1px solid #4F493C;
}


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

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