@charset "utf-8";

/* 下層ページ */
/* ************************************************ 
*	ページトップイメージ・タイトル
* ************************************************ */	
.pagetop-img {
margin: 140px 0 0 0;
padding: 0;
width: 100%;
position: relative;
z-index:0;
overflow: hidden;
}
.pagetop-img img{
width: 100%;
vertical-align: bottom;
}
.pagetop-img:before {
content: "";
position: absolute;
top: 30%;
left: 0;
width: 100%;
height: 40%;
background:rgba(0,0,0,0.0);
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}

.pagetoptitle-box {
margin: 140px 0 0 0;
padding: 0 0 30px 0;
width: 100%;
background: linear-gradient(
    -45deg,
    #efefef 25%, #fff 25%,
    #fff 50%, #efefef 50%,
    #efefef 75%, #fff 75%,
    #fff
  );
background-size: 16px 16px;
position:relative;
z-index:9;
-moz-box-shadow: 0px 3px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 3px 2px rgba(0,0,0,0.1);
-o-box-shadow: 0px 3px 2px rgba(0,0,0,0.1);
-ms-box-shadow: 0px 3px 2px rgba(0,0,0,0.1);
box-shadow: 0px 3px 2px rgba(0,0,0,0.1);
}
.pagetop-title-box {
margin: 0;
padding: 0;
width: 100%;
height: 150px;
background-color: #d9efeb;
position:relative;
z-index:2;
-moz-box-shadow: 0px 3px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 3px 2px rgba(0,0,0,0.1);
-o-box-shadow: 0px 3px 2px rgba(0,0,0,0.1);
-ms-box-shadow: 0px 3px 2px rgba(0,0,0,0.1);
box-shadow: 0px 3px 2px rgba(0,0,0,0.1);
}

.pagetop-title {
font-family: 'Noto Sans JP';
font-weight:500;
letter-spacing: 0.05em;
padding: 0;
margin: 0;
color: #333;
text-align:center;
border-bottom:none;
width:100%;
font-size: 190%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index:999;
}


/* ************************************************ 
*   見出し
* ************************************************ */
.htitle {
  position: relative;
  padding: 0 0 15px 0;
  margin: 0;
  font-size: 130%;
  font-weight: 700;
line-height: 150%;
}
.htitle:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #999, #999 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #999, #999 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.htitle span{ font-size: 80%; }
.htitle1 {
line-height: 150%;
  font-size: 140%;
  margin: 0 0 30px 0;
  overflow: hidden;
  align-items: center;
  background: #66beb0;
  color: #fff;
  height: 60px;
  line-height: 60px;
  display: flex;
}
.htitle1:before,
.htitle1:after {
  content: "";
  flex: 1;
  background: #fff;
  padding: 3px 0;
  height: 0;
  transform: rotate(45deg);
}
.htitle2 {
	display: inline;
	font-size: 120%;
	font-weight: 700;
	background-image: linear-gradient(rgba(0,0,0,0) 80%, rgb(255,224,178) 70%);
}
.htitle3 {
	position: relative;
	font-size: 120%;
	margin: 30px 0 30px 0;
	padding: 10px 0 10px 25px;
	background-color:#efefef; 
}
.htitle3::after {
     position: absolute;
     top: 50%;
     left:0;
     transform:translateY(-50%);
     content: '';
     width: 18px;
     height:4px;
     background-color:#00937c;
}

.leadtext {
  padding: 0 0 20px 0;
  font-size: 110%;
}

.htitle-box {
	margin: 30px 0 0 0;
}
.htitle-box2 {
	margin: 0 0 20px 0;
}
.htitle-box3 {
	margin: 30px 0 20px 0;
}

ol.dwat{
  counter-reset:list;
  list-style-type:none;
  padding:0;
}
ol.dwat li,
ol.dwat2 li{
  position:relative;
  padding: 0 0 0 20px;
  margin: 7px 0 7px 0px;
  font-size:16px;
  line-height: 30px;
}
ol.dwat li:before{
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #ccc;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ol.dwat2{
  counter-reset:list;
  list-style-type:none;
  padding:0 0 20px 0;
}
ol.dwat2 li:before{
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #66beb0;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


ul.dl-list { margin: 0 0 0 0; }
ul.dl-list li a {
color: #333;
text-decoration: none;
}
ul.dl-list li a:hover {
color: #000;
text-decoration: underline;
}

ul.dl-list li.pdf,
ul.dl-list li.word,
ul.dl-list li.excel{
font-size: 110%;
display: block;
position: relative;
margin: 15px 0 15px 0;
padding: 10px 10px 10px 40px;
background-color: #efefef;
background-position: 5px center;
background-repeat: no-repeat;
background-size: auto 25px;
line-height: 150%;
}
ul.dl-list li.pdf{ background-image: url("../images/pdf_icon.png"); }
ul.dl-list li.word{ background-image: url("../images/word_icon.png"); }
ul.dl-list li.excel{ background-image: url("../images/excel_icon.png"); }


/* ************************************************ 
*   構成団体について
* ************************************************ */
ul.group-list {margin: 10px 0 40px 0; }
ul.group-list li{
margin: 0 0 0 0;
padding: 10px 0 10px 20px;
display: block;
position:relative;
text-decoration: none;
}

ul.group-list li:before {
  content: '';
  width: 15px;
  height: 15px;
  background: #00937c;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -9px;
}
ul.group-list li:after {
  content: '';
  width: 3px;
  height: 3px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  position: absolute;
  top: 50%;
  left: 4px;
  margin-top: -4px;
  transform: rotate(45deg);
}

ul.group-list li a {
color: #333;
text-decoration: underline;
}
ul.group-list li a:hover {
color: #000;
text-decoration: none;
}


/* ************************************************ 
*   DWAT
* ************************************************ */
.dwat-imgbox {
margin: 0 auto 50px auto;
padding: 0 0 0 0;
width:50%;
}
.dwat-imgbox img,
.dwat-imgbox2 img,
.dwat-imgbox3 img{
width:100%;
vertical-align: bottom;
}
.dwat-imgbox2 {
margin: 20px auto 70px auto;
padding: 0 0 0 0;
width:60%;
}
.dwat-imgbox3 {
margin: 20px auto 0 auto;
padding: 0 0 0 0;
width:60%;
}


/* ************************************************ 
*   お問い合わせ
* ************************************************ */
.contact-box {
margin: 0 auto;
padding: 0 0 0 0;
width:80%;
}
table.contact {
width: 100%;
margin: 0 0 50px 0;
padding: 0 0 0 0;
border-top: 1px #999 solid;
border-left: 1px #999 solid;
border-right: 1px #999 solid;
border-collapse: collapse;
border-spacing: 0;
}

table.contact th {
font-weight: normal;
text-align: left;
padding: 10px;
white-space: nowrap; 
vertical-align: middle;
border-bottom: 1px #999 solid;
border-right: 1px #999 solid;
width:28%;
background-color:#efefef;
}

table.contact td {
text-align: left;
padding: 10px;
white-space: normal;
vertical-align: middle;
border-bottom: 1px #999 solid;
}

.contact-red { color: #c20018; font-size: 80%; }
.contact-text {
margin: 3px 0 0 0;
padding: 0;
font-size: 80%;
}

.contactlink-box {
margin: 50px auto 30px auto;
padding: 0;
text-align:center;
}
.contactlink {
margin: 0 auto;
padding: 0;
text-align:center;
width: 30%;
font-size: 110%;
}
.contactlink a{
background-color:#333;
color: #fff;
padding: 10px 0;
font-size:100%;
text-decoration: none;
display: block;
}
.contactlink a:hover{
color: #fff;
background-color:#00937c;
}
.contact-box input[type="checkbox"],
.contact-box input[type="radio"]{
vertical-align: middle;
}
.privacy-box{
padding: 20px 40px;
background-color:#fff5e5;
}
.privacy-box span{
font-size: 110%;
font-weight: 500;
}


/* ************************************************ 
*	お知らせ、災害情報・活動報告　共通
* ************************************************ */	
.news-box {
margin: 0 auto;
padding: 0 0 0 0;
width:80%;
}
ul.news{
margin: 0 0 80px 0;
padding: 0 0 0 0;
list-style: none;
border-top:1px solid #999;
}
ul.news li{
margin: 0 0 0 0;
padding: 20px 0 20px 10px;
border-bottom:1px solid #999;
}
ul.news li a{
margin: 0 0 0 15px;
color:#333;
text-decoration: none;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
ul.news li a:hover{
color:#000;
text-decoration: underline;
}
.pager{
margin: 0 auto 0 auto;
text-align:center;
}
.news-page-navi{
margin: 0 3px;
padding: 6px 0px;
text-align:center;
border:1px solid #999;
}
.news-page-navi a{
color: #333;
padding: 6px 10px;
}
.news-page-navi a:hover{
color: #00937c;
text-decoration:underline;
}
.news-contents-box{
margin: 30px 0 0 0;
padding: 0 0 0 0;
line-height: 180%;
}
.news-contents-box img{
margin: 0 0 0 0;
padding: 30px 0px;
}


.this-page{
margin: 0 3px;
padding: 6px 10px;
text-align:center;
border:1px solid #999;
background-color: #dcdcdc;
}

/* ************************************************ 
*   レスポンシブ
* ************************************************ */
/* PC 画面の横幅が960px以上 */
@media only screen and (min-width: 960px){
}

/* Tablet (Portrait) 画面の横幅が768px〜959pxまで */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.pagetoptitle-box {
margin: 115px 0 0 0;
padding: 0 0 20px 0;
}
.pagetop-title-box { height: 120px; }
.pagetop-title { font-size: 150%; }
.htitle { font-size: 120%; }
.htitle1 { font-size: 120%; }
.leadtext { font-size: 100%; }
ul.dl-list li.pdf,
ul.dl-list li.word,
ul.dl-list li.excel{
font-size: 100%;
}
.contact-box { width:100%; }
.dwat-imgbox {
margin: 20px auto 50px auto;
width:80%;
}
.dwat-imgbox2 {
margin: 20px auto 50px auto;
width:90%;
}
.dwat-imgbox3 {
margin: 20px auto 50px auto;
width:80%;
}
}


/* Mobile (Portrait) 画面の横幅が767pxまで */
@media only screen and (max-width: 767px) {
.pagetoptitle-box {
margin: 0 0 0 0;
padding: 20px 0;
}
.pagetop-title-box { height: 100px; }
.pagetop-title { font-size: 6vw; }
.htitle { font-size: 120%; }
.htitle1 {
font-size: 120%;
height: auto;
line-height: 150%;
padding: 0 0 10px 0;
overflow: hidden;
background: #fff;
color: #333;
display: block;
border-bottom: 4px solid #66beb0;
}
.leadtext { font-size: 100%; }
.pagetop-img { margin: 0 0 0 0; }
ul.dl-list li.pdf,
ul.dl-list li.word,
ul.dl-list li.excel{
font-size: 100%;
}
.contact-box { width:100%; }
table.contact { margin: 0 0 30px 0; }
table.contact th {
display:block;
width: 94%;
padding: 10px 3%;
border-bottom: none;
text-align:left;
font-weight:bold;
}
table.contact td {
display:block;
width: 94%;
padding: 10px 3%;
}
.privacy-box { padding: 15px; }
.contactlink-box { margin: 30px auto; }
.contactlink { width: 100%; }
.news-box { width:100%; }
ul.news li{ padding: 20px 0; }
ul.news li a{ margin: 0 0 0 0; }
.dwat-imgbox,
.dwat-imgbox2 {
margin: 0 auto 50px auto;
width:100%;
}
.dwat-imgbox3 {
margin: 10px auto 20px auto;
width:50%;
}
ol.dwat li:before,
ol.dwat2 li:before{ top: 15px; }
}