@charset "UTF-8";

/* -------------------------------------------------------------------------- **
**  TAP
** -------------------------------------------------------------------------- */
#special.tap {}

#special.tap .tap-ttl {
	margin-bottom: .7em;
	color: #0c95e1;
	text-align: left;
}
#special.tap .tap-ttl2 {
	margin-bottom: .5em;
	color: #1d80d3;
	text-align: center;
}
#special.tap .typography-blue { color: #0c95e1; }
#special.tap .typography-caption { color: #666; }
#special.tap .text-blue { color: #007ac7; }

/* !おいしい水って､どんな水？ */
/* -------------------------------------------------------------------------- */
#what {}
.what .container {
	padding-top: 80px;
	padding-bottom: 100px;
}
.what .tap-ttl {}
.what .column {}
.what .column .column-large {
	width: 53.92156862745098%;
}
.what .column .column-sidebar {
	width: 46.07843137254902%;
}
.what .note {
	display: inline-block;
	color: #666;
}

.what .sidebar-badge {
	padding: 24px 28px 16px;
	background-color: #f5fbfe;
	border: solid 2px #33b6ef;
	border-radius: 3px;
	font-size: .875em;
	font-size: 1.4rem;
}
.what .sidebar-badge dl {
	border-bottom: 1px solid #e9eff2;
}
.what .sidebar-badge dl dt,
.what .sidebar-badge dl dd {
	padding: 12px 0;
	border-top: 1px solid #e9eff2;
}

.what .sidebar-badge dl dt {
	float: left;
	width: 66.486486486486486%;
	padding-right: 1em;
	padding-bottom: 0;
	font-weight: bold;
	/*white-space: nowrap;*/
}
.ie .what .sidebar-badge dl dt,
.firefox .what .sidebar-badge dl dt {
	white-space: normal;
}
.what .sidebar-badge dl dd {
	margin-left: 66.486486486486486%;
}
.what .sidebar-badge h3 {
	margin-bottom: .5em;
}
.what .sidebar-badge .note {
	display: inline-block;
	width: 100%;
}
@media (max-width: 820px) {
	.what .column .column-large,
	.what .column .column-sidebar {
		float: none;
		width: auto;
		margin-bottom: 2em;
	}
}


/* !軟水と硬水って？ */
/* -------------------------------------------------------------------------- */
#water {
	max-width: 1680px;
	margin-left: auto;
	margin-right: auto;
	background: #bae3f8 url(../images/special/tap/water-bg.jpg) repeat-x center top;
	background-size: 730px auto;
	overflow: hidden;
}
.water .container {
	padding-top: 0;
}
.water .section-content {
	position: relative;
	padding-bottom: 80px;
	z-index: 1;
}

.water .column {
	margin-bottom: auto;
}
.water .column .column-large {
	width: 67.647058823529412%;
	padding-right: 50px;
}
.water .column .column-sidebar {
	width: 32.352941176470588%;
	padding-left: 50px;
}
.water .sidebar-badge {
	border: solid 0px #d8d8d8;
	border: solid 0px rgba(20, 61, 81, .1);
	border-top-width: 1px;
}
.water .sidebar-badge .badge-content {
	padding-top: 35px;
}
.water .sidebar-badge .badge-value {
	margin-bottom: -.1em;
	font-size: 3.25em;
	font-size: 5.2rem;
	font-weight: 300;
	text-align: left;
	line-height: 1;
	white-space: nowrap;
}
.water .sidebar-badge .badge-value .badge-from {
	font-size: .9615em;
	font-size: 5.0rem;
}
.water .sidebar-badge .badge-value .badge-unit {
	font-size: .346153846153846em;
	font-size: 1.8rem;
	font-weight: normal;
}
.water .sidebar-badge .badge-caption {
	font-size: .875em;
	font-size: 1.4rem;
}

.img-landscape {
	position: relative;
	left: 50%;
	width: 1680px;
	height: 880px;
	margin-top: -320px;
	margin-left: -840px;
	background: transparent url(../images/special/tap/landscape.jpg) no-repeat center top;
	background-size: contain;
}

@media
	(-webkit-min-device-pixel-ratio:1.5),
	(min-resolution:1.5dppx) {
	#water { background-image: url(../images/special/tap/water-bg_2x.jpg); }
	.img-landscape { background-image: url(../images/special/tap/landscape_2x.jpg); }
}
@media (max-width: 820px) {
	.water .column .column-large,
	.water .column .column-sidebar {
		float: none;
		width: auto;
		padding-left: 20px;
		padding-right: 20px;
		margin-bottom: 2em;
	}
	.img-landscape {
		width: 840px;
		height: 440px;
		margin-left: -420px;
		margin-top: -200px;
	}
}
@media (max-width: 767px) {
}


/* !水道水って、どうやって作られているの？ */
/* -------------------------------------------------------------------------- */
#how {}
.how .container {
	padding-top: 100px;
}
.how .section-content {}
.how .column {
	margin-bottom: auto;
}
.how .column .column-large {
	width: 67.647058823529412%;
	padding-right: 50px;
}
.how .column .column-sidebar {
	width: 32.352941176470588%;
	padding-left: 50px;
}
@media (max-width: 767px) {
	.how .column .column-large,
	.how .column .column-sidebar {
		float: none;
		width: auto;
		padding-left: 20px;
		padding-right: 20px;
		margin-bottom: 2em;
	}
}


/* !水道水って、どうやって作られているの？ */
/* -------------------------------------------------------------------------- */
#ecology {}
.ecology .container {
	padding-top: 100px;
	padding-bottom: 100px;
}
.ecology .section-content {}
.ecology .column {
	margin-bottom: auto;
}
.ecology .column .column-large {
	width: 67.647058823529412%;
	padding-right: 50px;
}
.ecology .column .column-sidebar {
	width: 32.352941176470588%;
	padding-left: 50px;
}
.ecology .graph-column {
	margin-top: 80px;
}
.ecology .graph-column .grid-col { float: none; width: 780px; margin: auto; padding: 0; }
@media (max-width: 820px) { .ecology .graph-column .grid-col { width: auto; padding: 20px; } }

.ecology .graph-column .text-indent {
	display: block;
	margin-left: 3em;
	text-indent: -3em;
}


.img-graph1,
.img-graph2,
.img-graph3 {
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
}
.img-graph1:before,
.img-graph2:before,
.img-graph3:before {
	content: "";
	display: block;
}
.img-graph1 {
	max-width: 780px;
	margin: auto;
	margin-bottom: 1em;
	background-image: url(../images/special/tap/graph1.jpg);
}
.img-graph1:before {
	padding-top: 60.256410256410256%;
}

.img-graph2 {
	max-width: 780px;
	margin: auto;
	margin-bottom: 1em;
	background-image: url(../images/special/tap/graph2.jpg);
}
.img-graph2:before {
	padding-top: 58.974358974358974%;
}

.img-graph3 {
	max-width: 410px;
	margin: auto;
	margin-bottom: 1em;
	background-image: url(../images/special/tap/graph3.jpg);
}
.img-graph3:before {
	padding-top: 100%;
}




@media
	(-webkit-min-device-pixel-ratio:1.5),
	(min-resolution:1.5dppx) {
	.img-graph1 { background-image: url(../images/special/tap/graph1_2x.jpg); }
	.img-graph2 { background-image: url(../images/special/tap/graph2_2x.jpg); }
	.img-graph3 { background-image: url(../images/special/tap/graph3_2x.jpg); }
}

@media (max-width: 767px) {
	.ecology .column .column-large,
	.ecology .column .column-sidebar {
		float: none;
		width: auto;
		padding-left: 20px;
		padding-right: 20px;
		margin-bottom: 2em;
	}
}