@charset "utf-8";
/* CSS Document */

/** reset **/
main ul {
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
}

.ttlArea h2.ttl {
  text-align:center;
  background-color:#47a4ff;
  color:#fff;
  font-weight:bold;
  font-size:1.8em;
  padding:20px;
  border-radius: 10px;
  line-height:1.4;
  box-shadow: 4px 4px #C2E6FA;
  margin-bottom:20px;
}
.ttlArea h2.ttl span {
  font-size:1.3em;
}
.ttlArea ul.txtbox {
  display:flex;
  justify-content: space-between;
  list-style: none;
  paddig:0;
  margin-bottom:25px;
}
.ttlArea ul.txtbox li {
  width:48%;
  paddig:0;
}
.ttlArea ul.txtbox li h3 {
  text-align:center;
  background-color:#47a4ff;
  color:#fff;
  font-weight:bold;
  font-size:1.4em;
  padding:10px;
  border-radius: 10px;
  box-shadow: 4px 4px #C2E6FA;
  margin-bottom:30px;
  line-height:1.5;
  min-height:80px;
  display:flex;
  align-items: center;
  justify-content: center;
}
.ttlArea ul.txtbox li p {
  text-align:left;
  font-size:1.3em;
  line-height:1.5;
}

@media screen and (max-width:768px) {
.ttlArea h2.ttl {
  font-size:1.1em;
  padding:10px;
}
.ttlArea ul.txtbox {
  display:block;
}
.ttlArea ul.txtbox li {
  width:100%;
  margin-bottom:20px;
}
.ttlArea ul.txtbox li h3 {
  text-align:center;
  min-height:auto;
  display:block;
  font-size:1em;
}
.ttlArea ul.txtbox li p {
  font-size:1em;
}
}
  
.ttlArea .box_img {
  border:3px solid #C2E6FA;
  padding:20px;
  border-radius: 6px;
}
.ttlArea .box_img img {
  max-width:100%;
  margin:0 auto;
}

/* ------------------------

aboutArea

------------------------- */
.aboutArea div dl dt{
	color:#47a4ff;
	font-weight:bold;
	font-size:1.1em;
	padding:10px 0 3px;
}
.aboutArea div dl dd{
	border-bottom:1px dotted #bebebe;
}
.aboutArea div p strong{
	font-size:1.1em;
	color:#004267;
	display:block;
	margin:0 0 10px;
}
/* PC */
@media print, screen and (min-width: 769px) {
.aboutArea div{
	height:auto;
}
.aboutArea div dl{
	width:480px;
	float:left;
}
.aboutArea div dl dt img{
	margin-right:7px;
}
.aboutArea div dl dd{
	padding:0 0 10px 35px;
}
.aboutArea div p{
	width:400px;
	float:right;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.aboutArea div dl dd{
	padding:0 0 10px 28px;
}
}

.graphArea p {
  text-align:left;
}
.graphArea p.waterg img {
  max-width:480px;
}

@media screen and (max-width:768px) {
.graphArea p.waterg img {
  max-width:100%;
}
}