@charset "utf-8";
/*
==================================================

    CSS File Name - about.css
    Last-updated: 2010-05-14

==================================================
*/
div#header {
	margin-bottom:20px;
}
div#mainBody div.mainContent {
	max-width:750px;
	
}
h2 {
	padding:14px 0;
}
p.about{
	font-weight:bold;
	padding-left:10px;
	}
span.blue{
	color:#00C;	
	}
span.red{
	color:#F00;	
	}	
.page_ttl {
	margin-top: 30px;
}
/*------ .family ------*/
div.family {
	max-width:740px;
	clear:both;
	overflow:hidden;
	padding-bottom:27px;
}
div.family p.img {
	padding-bottom:23px;
}
div.family p.tit {
	padding:0 0 8px 62px;
}
div.family p.tit2 {
	padding-left:64px;
}
div.family ul.pic {
	padding-left:0px;
	max-width:740px;
	clear:both;
	overflow:hidden;
}
div.family ul.pic li {
}
div.family ul.txt {
	padding:0 40px 20px 0px;
	clear:both;
	overflow:hidden;
	max-width:750px;
}
div.family ul.txt li {
	line-height:1.8;
	width: 25%;
	padding: 0 2%;
}
div.family ul.txt li img {
	display: block;
	margin: auto;
}
div.family ul.txt li.first {
	padding: 0;
}
div.family ul.txt li.last {
}
div.family div.cont {
	max-width:669px;
	clear:both;
	overflow:hidden;
	padding-left:33px;
}
div.family div.cont ul.btn {
	max-width:520px;
	float:left;
}
div.family div.cont ul.btn li {
	float:left;
	padding-right:10px;
}
div.family div.cont p.btn2 {
	float:right;
	padding:12px 25px 0 0;
}

/* div.box */
div.box {
	max-width:750px;
	overflow:hidden;
	clear:both;
}
div.box p.img {
	padding:0 0 9px 36px;
}
div.box div.cont {
	max-width:699px;
	margin:0 auto;
	overflow:hidden;
	clear:both;
}
div.box div.cont div {
	background:url(../images/about/bg01_mid.jpg) repeat-y left top;
	height:auto!important;
	height:77px;
	min-height:77px;
}
div.box div.cont div h3 {
	padding:0 0 0 17px;
	float:left;
}
div.box div.cont div p {
	font-size:13px;
	max-width:490px;
	float:right;
	padding:10px 0 0 0;
}
/*---配水管---*/
div.box div.cont div p.h {
	font-size:13px;
	max-width:490px;
	float:right;
	padding:2px 0 0 0;
}
/*---配水管---*/

div.box div.cont div dl {
	max-width:490px;
	float:right;
	padding-top:5px;
}
div.box div.cont div dl dt {
	padding:7px 0 0 16px;
	float:left;
	background:url(../images/about/ico.gif) no-repeat left 11px;
}
div.box div.cont div dl dd {
	float:right;
	padding:0 28px 0 0;
}

/* div.box2 */
div.box2 {
	max-width:750px;
	overflow:hidden;
	clear:both;
	padding-bottom:23px;
}
div.box2 div.cont {
	background:url(../images/about/bg02_mid.jpg) repeat-y left top;
	height:auto!important;
	height:309px;
	min-height:309px;
}
div.box2 div.cont p.img {
	float:left;
	padding:0 0 0 12px;
}
div.box2 div.cont p.img2 {
	float:right;
	padding:0 12px 0 0;
}
div.box2 div.cont p.txt {
	padding:0 0 0 45px;
	float:left;
	background:url(../images/about/ico2.gif) no-repeat 29px;
	max-width:285px;
}
div.box2 div.cont p.txt2 {
	max-width:332px;
	float:right;
	background:url(../images/about/ico2.gif) no-repeat left;
	padding:0 0 0 15px;
}
div.box2 div.cont p.img3 {
	float:left;
	padding:0 0 0 12px;
}
div.box2 div.cont p.img4 {
	float:right;
	padding:0 12px 0 0;
}
div.box2 div.cont p.txt3 {
	padding:0 0 0 45px;
	float:left;
	background:url(../images/about/ico2.gif) no-repeat 29px 4px;
	max-width:285px;
}
div.box2 div.cont p.txt4 {
	max-width:362px;
	float:right;
	background:url(../images/about/ico2.gif) no-repeat left;
	padding:0 0 0 15px;
}
div.box2 div.cont p.btn {
	float:right;
	padding:10px 26px 0 0;
}

/* div.box3 */
div.box3 {
	max-width:750px;
	overflow:hidden;
	clear:both;
}
div.box3 div.cont {
	background:url(../images/about/bg03_mid.jpg) repeat-y left top;
	height:auto!important;
	height:84px;
	min-height:84px;	
	max-width:750px;
}
div.box3 div.cont h3 {
	padding:0 0 0 36px;
	float:left;
}
div.box3 div.cont p {
	max-width:460px;
	padding-right:50px;
	float:right;
	font-size:13px;
}
div.box3 div.cont2 {
	background:url(../images/about/bg03_bot.jpg) no-repeat left top;
	height:171px;
}
div.box3 div.cont2 p.img {
	padding:39px 0 0 40px;
	float:left;
}
div.box3 div.cont2 p.img2 {
	float:right;
	padding:0 263px 0 0;
}
div.box3 div.cont2 p.btn {
	float:left;
	padding:34px 0 0 40px;
}

/*---飲む食べる---*/
div.box3_n {
	background:url(../images/about/bg_n.jpg) no-repeat left top;
	max-width:750px;
	overflow:hidden;
	clear:both;
	height:335px;
}
div.box3_n p.rec{
	padding-left:7px;
}
div.box3_n div.cont {
	height:auto!important;
	height:100px;
	min-height:100px;	
	max-width:750px;
}
div.box3_n div.cont h3 {
	padding:30px 0 0 36px;
	float:left;
}
div.box3_n div.cont p {
	max-width:460px;
	padding:30px 50px 0 0;
	float:right;
	font-size:13px;
}

div.box3_n div.cont2 {
	max-width:700px;
	float:left;
	}
div.box3_n div.cont2 p.img {
	padding:39px 0 0 40px;
	float:left;
}
div.box3_n div.cont2 p.img2 {
	float:right;
	padding:10px 50px 0 0;
}
div.box3_n div.cont2 p.btn {
	float:left;
	padding:34px 0 0 40px;
}
div.box3_n div.cont1 {
	height:auto;
	max-width:730px;
	clear:both;
}
div.box3_n div.cont3 {
	max-width:360px;
	float:right;
}
div.box3_n div.cont3 p.img {
	padding:39px 0 0 30px;
	float:left;
}
div.box3_n div.cont3 p.img2 {
	float:right;
	padding:10px 30px 0 5px;
}
div.box3_n div.cont3 p.img3 {
	padding:10px 0 0 0;
	float:left;
}
div.box3_n div.cont3 p.img4 {
	float:right;
	padding:10px 40px 0 5px;
}
div.box3_n div.cont3 p.btn {
	float:left;
	padding:10px 0 0 30px;
}
div.box3_n div.cont4 {
	max-width:360px;
	float:right;
}
div.box3_n div.cont4 p.img {
	padding:39px 0 0 0;
	float:left;
}
div.box3_n div.cont4 p.img2 {
	float:right;
	padding:10px 15px 0 5px;
}
div.box3_n div.cont4 p.img3 {
	padding:10px 0 0 0;
	float:left;
}
div.box3_n div.cont4 p.img4 {
	float:right;
	padding:10px 40px 0 5px;
}
div.box3_n div.cont4 p.btn {
	float:left;
	padding:10px 0 0 0;
}
p.torio {
	padding:20px;
	}
/*---飲み水---*/
div.box3_m {
	background:url(../images/about/bg_m.jpg) no-repeat left top;
	background-size: 100% 100%;
	max-width:750px;
	overflow:hidden;
	clear:both;
	height:440px;
}
div.box3_m div.cont {
	height:auto!important;
	height:75px;
	min-height:75px;	
	max-width:750px;
}
div.box3_m div.cont h3 {
	padding:20px 0 0 36px;
	float:left;
}
div.box3_m div.cont p {
	max-width:460px;
	padding:20px 50px 0 0;
	float:right;
	font-size:13px;
}
div.box3_m div.cont2 {
	max-width:350px;
	float:left;
	}
div.box3_m div.cont2 p.img {
	padding:39px 0 0 40px;
	float:left;
}
div.box3_m div.cont2 p.img2 {
	float:right;
	padding:10px 0px 0 0;
}
div.box3_m div.cont2 p.img3 {
	float:left;
	padding:10px 0 0 40px;
}
div.box3_m div.cont2 p.btn {
	float:left;
	padding:10px 0 0 40px;
}
div.box3_m div.cont1 {
	height:auto;
	max-width:730px;
	clear:both;
}
div.box3_m div.cont3 {
	max-width:360px;
	float:right;
}
div.box3_m div.cont3 p.img {
	padding:39px 0 0 0;
	float:left;
}
div.box3_m div.cont3 p.img2 {
	float:right;
	padding:10px 15px 0 5px;
}
div.box3_m div.cont3 p.img3 {
	padding:10px 0 0 0;
	float:left;
}
div.box3_m div.cont3 p.img4 {
	float:right;
	padding:50px 40px 0 5px;
}
div.box3_m div.cont3 p.btn {
	float:left;
	padding:10px 0 0 0;
}
/*---飲み水---*/


/* div.box4 */
div.box4 {
	max-width:750px;
	overflow:hidden;
	clear:both;
}
div.box4 div.cont {
	background:url(../images/about/bg04_bot.jpg) no-repeat left top;
	height:auto!important;
	height:482px;
	min-height:482px;	
}
div.box4 div.cont p.btn {
	text-align:center;
	padding-bottom:10px;
}
div.box4 div.cont p.btn img.r10{
	margin-right:15px;
}
div.box4 div.cont p.img {
	text-align:center;
	padding-bottom:7px;
}
div.box4 div.cont p.vob {
	float:left;
	padding:0 0 0 117px;
}
div.box4 div.cont p.img2 {
	float:right;
	padding:12px 134px 0 0;
}
div.box4 div.cont p.txt {
	font-size:12px;
	color:#5A4A42;
	max-width:300px;
	padding:23px 75px 0 0;
	float:right;
	line-height: 15px;
}

@media screen and (max-width: 750px) {
	div.box3_n,
	div.box3_m{
		height: auto;
		background: #efe8de;
		border: 2px solid #d8cbb8;
		margin-bottom: 20px;
		padding-bottom: 30px;
		border-radius: 10px;
	}
	div.box3_n div.cont4,
	div.box3_n div.cont3 {
		width: 50%;
	}
	div.box3_n div.cont3 p.img2,
	div.box3_n div.cont4 p.img2,
	div.box3_m div.cont2,
	div.box3_m div.cont3,
	div.box3_m div.cont2,
	div.box3_m div.cont3{
		width: 49%;
	}
	div.box3_m div.cont2 p.img,
	div.box3_m div.cont2 p.img2,
	div.box3_m div.cont3 p.img2,
	div.box3_m div.cont2 p.img3,
	div.box3_m div.cont3 p.img3,
	div.box3_m div.cont3 p.img4,
	div.box3_m div.cont2 p.btn,
	div.box3_m div.cont3 p.btn,
	div.box3_m div.cont3 p.img{
		float: none;
		text-align: center;
		padding-left: 0;
		padding-right: 0;
	}
	div.box3_m div.cont3 p.img4 {
		padding-top: 0;
	}
	div.box3_n, div.box3_m {
		padding: 0 2% 30px;
	}
	div.box3_m div.cont h3 {
		text-align: center;
	}
	div.box3_m div.cont h3,
	div.box3_m div.cont p {
		float: none;
		padding-left: 0;
		padding-right: 0;
		max-width: 100%;
	}
	.bg_top {
		display: none;
	}
	div.box3_m div.cont3 p.img,
	div.box3_m div.cont2 p.btn{
		padding-top: 0;
	}
	div.box3_m div.cont1 {
		padding-top: 20px;
	}
	div.box3 div.cont,
	div.box3 div.cont2 {
		background: #efe8de;
		border: 2px solid #d8cbb8;
		height: auto;
	}
	div.box3 div.cont {
		border-bottom: none;
		border-radius: 15px 15px 0 0;
		padding: 20px 2% 0;
	}
	div.box3 div.cont2 {
		border-top: none;
		border-radius: 0 0 15px 15px;
		padding: 20px 2%;
	}
	div.box3 div.cont h3 {
		float: none;
		padding-left: 0;
		text-align: center;
	}
	div.box3 div.cont p {
		max-width: 100%;
		float: none;
		margin-top: 15px;
	}
	div.box3 div.cont2 p.img,
	div.box3 div.cont2 p.img2 {
		padding-left: 0;
		padding-right: 0;
		width: 49%;
		float: none;
	}
	div.box3 div.cont2 p.btn {
		float: none;
		padding: 20px 0 0;
	}
	div.box3 div.cont2 p.img {
		padding-top: 0;
	}
	div.box3 div.cont p {
		padding-right: 0;
	}
}
@media screen and (max-width: 620px) {
div.family ul.pic {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
	div.family ul.pic li {
		width: 50%;
	}
	div.family ul.txt li.first {
		display: none;
	}
	div.family ul.txt li {
		width: 50%;
	}
	div.family ul.txt {
		padding-right: 0;
		max-width: 100%;
  	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
	}
	div.box3_n {
		width: 96%;
		padding: 0 2% 30px;
		margin: 0 auto 30px;
	}
	div.box3_n div.cont2 p.img {
		padding-left: 0;
		text-align: center;
		float: none;
		display: block;
	}
	div.box3_n div.cont2 p.img2 {
		padding-right: 0;
		float: none;
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
		text-align: center;
	}
	div.box3_n p.rec {
		padding-left: 0;
		text-align: center;
		margin-top: 15px;
	}
	div.box3_n p.rec img {
		margin: auto;
	}
	img[src*="/about/water.jpg"] {
		margin: auto;
		display: block;
	}
	div.box3_n div.cont p {
		float: none;
	}
	div.box3_m div.cont2 p.img {
		padding-top: 0;
	}
	div.box3_n div.cont2 p.img2 {
		justify-content: stretch;
		align-items: stretch;
	}
	div.box3_n div.cont2 p.img2 span {
		max-width: 50%;
		display: block;
		height: auto;
	}
	div.box3_n div.cont h3 {
		float: none;
		margin: auto;
		padding: 30px 0 0 0;
		text-align: center;
	}
	div.box3_n div.cont p {
		padding-right: 0;
	}
	div.box3_n div.cont2 p.btn {
		float: none;
		padding: 0;
		margin: 20px auto 0;
		text-align: center;
	}
	div.box3_m div.cont2 p.btn {
		padding-top: 10px;
	}
	div.box3_n div.cont2 {
		margin: auto;
		float: none;
	}
	div.box3_n div.cont2 p.img2 {
		width: 90%;
		margin: auto;
	}
	div.box3_n div.cont4, div.box3_n div.cont3 {
		float: none;
		width: 100%;
		text-align: center;
		margin: auto;
	}
	div.box3_n div.cont3 p.img ,
	div.box3_n div.cont4 p.img,
	div.box3_n div.cont3 p.img2,
	div.box3_n div.cont4 p.img2{
		padding: 0;
		float: none;
		text-align: center;
	}
	div.box3_n div.cont4 p.btn,
	div.box3_n div.cont3 p.btn{
		padding: 0;
		float: none;
		text-align: center;
		margin: 10px auto 20px;
	}
	div.box3_n div.cont3 p.img2,
	div.box3_n div.cont4 p.img2,
	div.box3 div.cont2 p.img, div.box3 div.cont2 p.img2,
	div.box3 div.cont2 p.img, div.box3 div.cont2 p.img2,
	div.box3 div.cont2 p.btn{
		width: 100%;
		text-align: center;
	}
	div.box3_m > div.cont1 div.box3_m div.cont2,
	div.box3_m div.cont3{
		margin-bottom: 15px;
	}
	div.box3_m div.cont1::after {
		content: "";
		display: block;
		clear: both;
	}
	div.box3_m .cont1 .cont1 div.cont2 p.img {
		padding-top: 0;
	}
}