@charset 'UTF-8';

/* --------------------------------------------
-----------------------------------------------
-----------------Commit.css--------------------
-----------------------------------------------
-------------------------------------------- */
.commit-h{
	font-size: 24px;
    display: flex;
    align-items: center;
    margin-bottom: .8em;
    position: relative;
    z-index: 1;
    font-weight: bold;
}

.commit-h::before{
    content: '';
    position: relative;
    width: 31px;
    height: 31px;
    line-height: 1;
    margin-right: 8px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/common-icon01.png);
}

.commit-h span,
.commit-h div{
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-moz-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.commit-h span{
	line-height: 1.4em;
	letter-spacing: -0.02em;
}

.commit-h02{
	font-size: 20px;
    color: #00a5ff;
    margin-bottom: 1em;
	line-height: 1.675em;
	font-weight: bold;
}


@media screen and ( max-width: 640px ){
	.commit-h{
		font-size: 18px;
	}
	.commit-h02{
		font-size: 18px;
	}


}





#commit-bg{
    background-image: url('../img/common-bg_02.png'), url('../img/common-bg_03.png'), url('../img/common-bg_01.png');
    background-repeat: no-repeat , no-repeat , repeat;
    background-position: center top, center bottom, center;
    background-size: contain,contain,auto;
    padding: 95px 0;
}

.commit-more a{
	display: block;
    border: solid 1px #323232;
    color: #323232;
    border-radius: 20px;
    text-align: center;
    padding: 1.04em 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
}
.commit-more a:hover {
	opacity: 1;
    color: #fff;
    background: #000;
}


/* --------------------------------------------
 main_Style
--------------------------------------------- */
#commit_h1{
	max-width: 485px;
	width: 90%;
	margin: 0 auto;
	margin-bottom: 40px;
}

#commit .common-link{
	max-width: 740px;
    width: 90%;
    margin: 0 auto;
}

#commit .common-link li{
    width: 32.3%;
    margin: 0 1.55% 10px 0;
}

#commit .common-link li:nth-of-type(3){margin-right: 0;}
#commit .common-link li:nth-of-type(6){margin-right: 0;}


/* --------------------------------------------
 #commit_about
--------------------------------------------- */
#commit-about{
	max-width: 960px;
    width: 90%;
    margin: 0 auto;
    padding: 65px 0 35px;
}

#commit-about .commit-more{
	max-width: 215px;
    width: 90%;
    margin: 40px 0 0;
}


#commit-about .common-h03{
	margin-bottom: 25px;
}

#commit-about > div{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
}

#commit-about > div:nth-of-type(1){
	margin-bottom: 45px;
}

#commit-about_txt{
	width: 40%;
	margin-right: 8%;
}

#commit_about_photo{
	width: 52%;
}

/* #commit-about_phot02 */
#commit-about_txt02{
	width: 48%;
	margin-right: 8%;
}

#commit-about_photo02{
	width: 52%;
}

#commit-about_photo02 div {
    float: left;
    width: 50%;
}



/* --------------------------------------------
 #commit_tennen
--------------------------------------------- */
#commit-tennen{
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
}

#commit-tennen > h2{
	max-width: 690px;
    width: 100%;
    margin: 0 auto 55px;
}

.commit-kodawari_h{
    max-width: 860px;
    width: 90%;
    margin: 0 auto;
}

.commit-a{
    color: #00a5ff !important;
    border-bottom: 1px solid #00a5ff;
}


#commit-tennen h3{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
    font-size: 30px;
    align-items: center;
    margin-bottom: .5em;
}

#commit-tennen h3 span{flex: 1; font-weight: bold; line-height: 1.5em}

#commit-tennen h3::before{
	content: "";
	display: block;
	position: relative;
    margin-right: 20px;
    width: 78px;
    height: 77px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

@media screen and ( min-width: 641px ){
	#commit-tennen h4{ font-size: 24px; }
}

/* --------------------------------------------
 こだわり０１
--------------------------------------------- */
#commit-kodawari01 h3::before{background-image: url('../img/detailed-icon01.png')}

#commit-kodawari01 article{
	background-color: #fff;
    border-radius: 20px;
    margin: 35px 0;
    padding: 35px 7.5% 40px;
}

#commit-kodawari01 article:last-child{
	margin-bottom: 105px;
}

#commit-kodawari01_water{
	position: relative;
}

#commit-kodawari01_water > h5,
#commit-kodawari01_water > p{
	width: 66%;
}

#commit-kodawari01_photo{
	width: 37.2%;
    position: absolute;
    right: -5%;
    top: -50px;
    z-index: 0;
}

/* ミネラルウォータの種類 */
#commit-kodawari01_kind{
	margin: 45px 0;
}

#commit-kodawari01_kindh{
	font-size: 20px;
    color: #00a5ff;
    margin-bottom: 10px;
    font-weight: bold;
}

#commit-kodawari01_logo{
	width: 150px;
	margin-bottom: 15px;
}

/*  */
#commit-kodawari01_dl {
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.water_fourType01{
	width: 26% !important;
}
#commit-kodawari01_dl dl,
#commit-kodawari01_dl dl dt,
#commit-kodawari01_dl dl dd{
	font-size: 13px;
}

#commit-kodawari01_dl dl dt,
#commit-kodawari01_dl dl dd{
	line-height: 1.7em;
}

#commit-kodawari01_dl dl{
	width: 23.5%;
}

#commit-kodawari01_dl dl dt{
	text-align: center;
	font-size: 14px;
	padding: .5em 1%;
	color: #fff;
	margin-bottom: .7em;
	border-radius: 10px;
	background-color: #ffa068;
}

#commit-kodawari01_dl dl dd{
	padding: 0 .5em;
}

.water_fourType01 dt{
	background-image: url('../img/water_fourType01_bg.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.water_fourType01 dd{
	padding: 0 1em !important;
}

.water_fourType_text {
	font-size: 13px;
}

.small-font {
	font-size: 10px;
	display: block;
	line-height: 1.75em;
}

.premium-Water-logo {
	width: 150px;
	margin: 0 0 10px 30px;
}

/* ミネラルとは */
#commit-kodawari01_mineral{
	background-image: url('../img/water-point01_question02_bg.png');
	background-size: 138px;
	background-repeat: no-repeat;
	background-position: 98% 93%;
}

#commit-kodawari01_gendai{
	margin-top: 40px;
}

#commit-kodawari01_mineral blockquote {
	margin-top: 40px;
}

/* 水素について */
#commit-kodawari01_suiso{
	position: relative;
	background-color: #fff;
    border-radius: 20px;
    margin: 35px 0;
    padding: 35px 7.5% 40px;
}

#commit-kodawari01_suiso > div{
	margin-top: 40px;
}

#commit-kodawari01_suisodiv:nth-of-type(1){
	margin-top: 0;
}

#commit-kodawari01_suiso > div:nth-of-type(1) > h5,
#commit-kodawari01_suiso > div:nth-of-type(1) > p{
	width: 79%;
    position: relative;
    z-index: 1;
}

#commit-kodawari01_suiso > div:nth-of-type(1) > div{
	width: 22.5%;
    position: absolute;
    top: 15px;
    right: 30px;
    z-index: 0;
}

#commit-kodawari01_suiso > div > p{
	margin-top: 1.5em;
}
#commit-kodawari01_suiso > div > p:nth-of-type(1){
	margin-top: 0;
}



/* table */
#commit-kodawari01_table{
	margin-top: 60px !important;
}
#commit-kodawari01_table table{
	max-width: 750px;
	width: 100%;
}

#commit-kodawari01_table table th,
#commit-kodawari01_table table td{
	width: 33%;
	padding: .445em 3.5%;
	font-size: 16px;
	box-sizing: border-box;
}
/* border */
#commit-kodawari01_table table tr{border-bottom: solid 2px #d1edf3;}
#commit-kodawari01_table table td{border-right: solid 2px #d1edf3;}
#commit-kodawari01_table table tr td:last-child{border-right: none}
#commit-kodawari01_table table tr th{border-right: solid 2px #fff}
#commit-kodawari01_table table tr th:last-child{border-right: none}

#commit-kodawari01_table table tr:first-child{background-color: #d1edf3;}

#commit-kodawari01_table table td div{
	display: table;
	width: 100%;
}

#commit-kodawari01_table table td div span{
	display: table-cell;
	text-align: left;
}

#commit-kodawari01_table table td div span:last-child{width: 20px}
#commit-kodawari01_table table tr td:last-child{padding-right: 2%}
#commit-kodawari01_table table tr td:last-child span:last-child{
	width: 80px;
	-webkit-font-feature-settings : "palt";
	-moz-font-feature-settings : "palt";
	font-feature-settings : "palt";
}


/* --------------------------------------------
 こだわり０２
--------------------------------------------- */
#commit-kodawari02,
#commit-kodawari03{
	max-width: 860px;
    width: 100%;
    margin: 0 auto;
}
#commit-kodawari02 h3::before{background-image: url('../img/detailed-icon02.png')}

#commit-kodawari02 > div{
	margin:  65px 0 0;
}

#commit-kodawari02_photo{
	position: relative;
	margin: 40px 0 0;
}

#commit-kodawari02_photo > div:nth-of-type(2){
	width: 75.5%;
    position: relative;
    z-index: 0;
}

#commit-kodawari02_photo > div:nth-of-type(1){
	width: 32.5%;
    position: absolute;
    top: -20px;
    right: -5%;
    z-index: 1;
}

/* --------------------------------------------
 こだわり０３
--------------------------------------------- */
#commit-kodawari03{
	margin: 50px auto 0;
}
#commit-kodawari03 h3::before{background-image: url('../img/detailed-icon03.png')}

/* --------------------------------------------
 プレミアムウォーターで安心快適な毎日へ
--------------------------------------------- */
#commit-kaiteki_inner{
	background-color: #fffddf;
	border-radius: 20px;
	max-width: 1000px;
	width: 95%;
	margin: 35px auto 55px;
	padding:  60px 70px 45px;
	box-sizing: border-box
}

#commit-kaiteki_inner > h2{
	max-width: 770px;
	width: 100%;
	margin: 0 auto 20px;
}

#commit-saigai{
	border-bottom: solid 1px #d8d8d8;
	margin-bottom: 45px;
}

.commit-ansin_h{
	text-align: center;
	font-size: 24px;
	margin-bottom: 50px;
}
.commit-ansin_h .saigai {
	max-width: 262px;
    width: 100%;
}
.commit-ansin_h .oneway {
	max-width: 505px;
    width: 100%;
}

.commit-ansin_h > span{
	display: inline-block;
    background-image: linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 4px);
    background-size: 4px 1px;
    background-position: bottom;
    background-repeat: repeat-x;
	padding-bottom: .5em;
	position: relative;
}

.commit-ansin_h > span::before{
	content: '';
	display: block;
	position: absolute;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	width: 80px;
	height: 55px;
	background-image: url('../img/annsin.png');
	left: -91px;
	top: -20px;
}

#commit-ansin .commit-ansin_h > span::before{
	background-image: url('../img/bennri.png');
}


/* top */
.commit-kaiteki_article article{
	width: 47%;
	float: left;
}

.commit-kaiteki_article article:nth-of-type(2){
	float: right;
}

.commit-kaiteki_article article > h3{
	font-size: 20px;
}

.commit-kaiteki_article article > h3::before{margin-right: 6px;}

.commit-kaiteki_article article > div{
	margin-top: 10px;
}

.commit-kaiteki_b{
	background-color: #d1edf3;
	text-align: center;
	font-size: 20px;
	padding: 1em .5em;
	position: relative;
	margin-top: 25px;
	box-sizing: border-box;
}

.commit-kaiteki_b::after{
	position: absolute;
	content:  '';
	display: block;
	width: 30px;
	height: 15px;
	background-image: url('../img/last_arrow.png');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	bottom: -14px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	   -moz-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	     -o-transform: translateX(-50%);
	        transform: translateX(-50%);
}

#commit-kaiteki_photo{
	max-width: 550px;
	width: 100%;
	margin: 25px auto 50px;
	padding-right: 90px;
	padding-right: 11%;
}

/* bottom */
#commit-ansin_img > div{
	width: 53%;
	float: left;
}

#commit-ansin_img > div:nth-of-type(1){
	background: url('../img/right_arrow.png');
	background-position: 98% 86%;
	background-repeat: no-repeat;
	padding-right: 6%;
	box-sizing: border-box
}


#commit-ansin_img > div:nth-of-type(2){
	float: right;
	width: 47%;
}

#commit-ansin_img > div > p:nth-of-type(2){
	margin-top: 50px;
}

#commit-ansin_img > div:nth-of-type(1) > p:nth-of-type(2){
	max-width: 385px;
	width: 100%;
	margin: 50px auto 0;
}

#commit-ansin_img > div:nth-of-type(2) > p:nth-of-type(2){
	max-width: 345px;
	width: 90%;
	margin: 55px auto 0;
	position: relative;
}

#commit-ansin_img > div:nth-of-type(2) > p:nth-of-type(2)::before,
#commit-ansin_img > div:nth-of-type(2) > p:nth-of-type(2)::after{
	content: '';
	display: block;
	position: absolute;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

#commit-ansin_img > div:nth-of-type(2) > p:nth-of-type(2)::before{
	width: 25px;
	height: 34px;
	top: -15px;
	left: -17px;
	background-image: url('../img/commit-icon01.png');
}

#commit-ansin_img > div:nth-of-type(2) > p:nth-of-type(2)::after{
	width: 50px;
	height: 54px;
	bottom: -6px;
	right: -40px;
	background-image: url('../img/commit-icon02.png');
}

/* システムの流れ */
#commit-kaiteki_nagare{
	margin: 100px 0 0;
}

#commit-kaiteki_nagare h3,
#commit-kaiteki_nagare p{
	display: inline-block;
	vertical-align: bottom;
}

#commit-kaiteki_nagare h3{
	font-weight: bold;
}

#commit-kaiteki_nagare p{
	margin-left: 2em
}

#commit-kaiteki .commit-more{
	margin: 60px auto;
	max-width: 218px;
}

#commit-kaiteki_nagare .sp {
	display: none;
}




/* --------------------------------------------
 responsive
--------------------------------------------- */
@media screen and (max-width: 1000px){
	.commit-kaiteki_b {
	    font-size: 18px;
	}
}

@media screen and ( max-width: 768px ){
	#commit .common-link li {
	    width: 100%;
	    margin: 0 0 10px 0;
	}

/* --------------------------------------------
 #commit_about
--------------------------------------------- */
	#commit-about .commit-more {
	    margin: 40px auto 0;
	}

	#commit-about > div {
	    display: block;
	}

	#commit-about_txt02,
	#commit-about_txt {
	    width: 100%;
	    margin: 0 0 20px;
	}

	#commit-about_photo02 ,
	#commit_about_photo {
	    width: 100%;
	}
	#commit-about > div:nth-of-type(1) {margin-bottom: 55px;}

/* --------------------------------------------
 こだわり０１
--------------------------------------------- */
	#commit-tennen h3 {
	    font-size: 22px;
	    margin-bottom: .5em;
	}

	#commit-tennen h3::before {
	    width: 57px;
	    height: 52px;
	    margin-right: 5px
	}

	#commit-kodawari01 article {
	    padding: 35px 5% 40px;
	}

	#commit-kodawari01_dl {
		flex-wrap: wrap
	}

	#commit-kodawari01_dl dl {
	    width: 48%;
	    margin-right: 4%;
	    margin-bottom: 20px;
	}

	#commit-kodawari01_dl dl:nth-of-type(2n) {
		margin-right: 0
	}
	.water_fourType01 {width: 48% !important;}

	#commit-kodawari01_water > h5{
		margin-top: 30px;
	}

	#commit-kodawari01_photo {
	    width: 40.2%;
	    position: absolute;
	    right: -5%;
	    top: -65px;
	    z-index: 0;
	}

	#commit-kodawari01_water > h5, #commit-kodawari01_water > p {
	    width: 100%;
	    position: relative;
	    z-index: 1;
	}

	#commit-kodawari01_suiso > div:nth-of-type(1) > h5, #commit-kodawari01_suiso > div:nth-of-type(1) > p {
	    width: 100%;
	}
	#commit-kodawari01_table table tr th {
		font-size: 14px;
		font-weight: normal;
	}
	#commit-kodawari01_table table tr td {
		font-size: 14px;
		font-weight: normal;
	}
	#commit-kaiteki_photo {
		padding-right: 0;
	}


/* --------------------------------------------
 プレミアムウォーターで安心快適な毎日へ
--------------------------------------------- */
	#commit-kaiteki_inner{
		padding:  60px 5% 45px;
	}


	#commit-kaiteki_nagare .commit-h{
		align-items: flex-start
	}

	#commit-kaiteki_nagare p {
	    margin-left: 0em;
	}
	.commit-ansin_h .saigai {
	    max-width: 262px;
	    width: 50%;
	}

	#commit-kaiteki_nagare .pc {
		display: none;
	}

	#commit-kaiteki_nagare .sp {
		display: block;
	    margin: 0 auto;
	}

}

@media screen and ( max-width: 600px ){
	#commit-kodawari01_dl {
		display:block
	}

	#commit-kodawari01_dl dl {
	    width: 100%;
	    margin-bottom: 20px;
	}

	.water_fourType01 {width: 100% !important;}

/* --------------------------------------------
 こだわり０1
--------------------------------------------- */

	#commit-kodawari01_table table td div span {
	    display: block;
	    width: 100%;
	    text-align: left;
	}

	#commit-kodawari01_table table td div span:first-child{
	    margin-bottom: .5em
	}

/* --------------------------------------------
 こだわり０2
--------------------------------------------- */
	#commit-kodawari02_photo > div:nth-of-type(1) {
	    width: 100%;
	    position: static;
	    margin: 0 auto;
	}

	#commit-kodawari02_photo > div:nth-of-type(2) {
	    width: 100%;
	}


/* --------------------------------------------
 プレミアムウォーターで安心快適な毎日へ
--------------------------------------------- */

	.commit-kaiteki_article article {
	    width: 100%;
	    float: none;
	    margin-bottom: 30px
	}

	.commit-kaiteki_article article:last-child{
		margin-bottom: 0
	}

	#commit-ansin_img > div {
	    width: 100%;
	    float: none;
	}

	#commit-ansin_img > div:nth-of-type(1) {
	    background: url(../img/commit-icon03.png);
	    background-position: 98% 86%;
	    background-repeat: no-repeat;
	    padding:  0 0 20px;
	    background-position: center bottom;
	}

	#commit-ansin_img > div:nth-of-type(2) {
	    float: none;
	    width: 100%;
	}

	#commit-ansin_img > div:nth-of-type(1) > p {
	    width: 100%;
	}

	#commit-ansin_img > div:nth-of-type(1) > p:nth-of-type(2) {
	    width: 100%;
	    margin: 25px auto;
	}

	#commit-ansin_img > div:nth-of-type(2) > p:nth-of-type(2) {
	    max-width: 345px;
	    width: 90%;
	    margin: 30px auto 0;
	    position: relative;
	}

	#commit-ansin_img > div:nth-of-type(2) > p:nth-of-type(2)::after {
	    width: 50px;
	    height: 48px;
	    bottom: -6px;
	    right: -30px;
	}

}

@media screen and ( max-width: 414px ){
	.commit-kodawari_h span {
		line-height: 1.675em;
	}
	#commit-tennen h3 span {
		line-height: 1.675em;
	}
	#commit-tennen h3 {
	    font-size: 18px;
	}
	.commit-kaiteki_article article > h3 {
	    font-size: 18px;
	}

}