@charset "utf-8";
/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
 全デバイス共通のスタイルとスマートフォンおよび小型タブレット向けレイアウトの指定
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/* html{ font-size : 62.5%; /* 10px = 1rem */ } */

/*==========================================
 body
===========================================*/
body {
  width: 100%;
  background-color:#fff;
/* font-size: 16px; Chrome's Check*/
  font-size: 1.6rem;
/*  font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; */
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color:#333;
}

div#wrapper{
 background-color: rgba(101,176,213,0.1); /* 透過率0.1 */
  max-width : 1200px;
  margin : auto;
}
/*==========================================
 コンテンツエリア全体のスタイル
===========================================*/
div#contents{
  padding-left : 1em;
  padding-right : 0.5em;
/*  background-color: rgba(101,176,213,0.2);  透過率0.2 */
}

h2{
  background-color: rgba(101,176,213,0.2); /* 透過率0.2 */
  font-size : 110%;
  border-left-width : 1em;
  border-left-style : solid;
  border-left-color : #c53d43;  /* 見出しの前　*/
  padding-left : 10px;
  border-bottom-width : 1px;
  border-bottom-style : solid;
  border-bottom-color : #65b0d5;
  margin-top : 1em;
  margin-bottom : 0.5em;
  color: #c53d43;
}

h3{
  /* clear: both; */
  font-size : 100%;
  text-indent: -1em;
  margin-left: 1em;
  padding-top : 0.5em;
  margin-bottom: 0.5em;
}
h3:before {
    content: '◆';
    color : #c53d43;
    font-size : 120%;
}

h4{
  font-size : 90%;
  padding-top : 0.5em;
}
h4:before {
    content: '★';
    color : #c53d43;
    font-size : 120%;
}

/* 見出し以外のフォントサイズなどの指定　旧来のもの　*/
p,li,dt,dd,th,td{
  font-size: 95%;
  line-height : 1.5;
  letter-spacing : 0.05em;
}
/* 文字色変更*/
span.iro{
  color : #c53d43;
}
.iropdf{
  color: #28a371;
}


/* テキストをリストにするときの左マージン　*/
.txt_list{
  margin-left : 2em;
}

/* 画像と文章を組み合わせるときの指定　*/
/* 写真（左）＋説明文 */
.leftobj{
  width : 44%; height:auto;
  float : left;
  margin-right : 1%;
  margin-left : 2%;
}
/* 写真縦（左)＋説明文 */
.leftobjt{
  width : 36%; height: auto;
  float : left;
  margin-right : 1%;
  margin-left : 2%;
}
/* 写真（右）＋説明文 */
.rightobj{
  width : 44%; height: auto;
  float : right;
  margin-right : 1%;
  margin-left : 1%;
}
/* 写真縦（右）＋説明文 */
.rightobjt{
  width : 36%; height: auto;
  float : right;
  margin-right : 1%;
  margin-left : 1%;
}
/* 写真2枚（右）＋説明文 */
.rightobj2{
  width : 60%;height: auto;
  float : right;
  margin-right : 1%;
  margin-left :1%;
}

/* 写真を並べる間隔　3枚、4枚列挙でない場合　*/

.margin_l{
  margin-left : 10%;  /*5em;*/
}
.margin_m{
  margin-left : 4%; /*2em;*/
}
.margin_s{
  margin-left : 1em;
}

/* 画像を楕円で表示する　*/
.img-round{
  border-radius: 50%;
}
/*==========================================
 ヘッダーのスタイル
===========================================*/
header{
  background: url(../images/backa.jpg) no-repeat;
}
header h1 {
  text-align:left;
  padding:1em 0.3em 0.5em 1em;
  width:90%;
  font-size:170%;
  color: #c53d43;
}
header h1 a{
  text-decoration:none;
   color: #c53d43;
}
/*　サイトロゴ　や　イメージなど
header h1 img {
  width:100%;
  max-width: 170px;
}
*/
/*==========================================
 グローバルナビゲーションのスタイル
===========================================*/
nav ul{
  padding-left: 1em;
}

nav ul li {
  text-align: center;
  float: left;
  width: 50%;
  line-height:150%;
  margin-bottom:2%;
}
nav ul li:nth-child(odd) {
  width: 49%;
}

nav ul li a{
  color: #fff;
  font-weight : bold;
  text-decoration:none;
  display: block;
  background-color: rgba(240,248,255,0.2); /* 透過率0.1 */
  border-radius: 6px;
  box-shadow:0px 0px 5px;  /*  周りにぼかし　*/
  width: 90%;
}

/* カレント表示用クラス */
nav ul li.active a{
 color:pink; /* active　のときの文字色*/
}
nav ul li a:hover{
  color: pink;
  font-weight : bold;
}



/*==========================================
 コンテンツメニューのスタイル
===========================================*/
div#contents section#cont_menu{
  width : 100%;
}
div#contents section#cont_menu ul{
 list-style : none;
}
.cont_list li {
	 padding-left: 80px; position: relative; height: auto; margin-top:1em; padding-top:0.5em;
}
.cont_list li {
	background: rgb(255, 255, 255);  border-radius: 4px; border: 1px solid rgb(101, 176, 213); border-image: none;
}
.cont_list li img {
	max-width: 25%; max-height: 85%; left: 2%; top: 5%; position: absolute;
}
.cont_list li a {
    text-decoration:none;
	background: url("arrow02_right.png") no-repeat 0px 50%; margin: 0px 0px 10px; padding: 0px 0px 0px 10px; display: block;
}
.cont_list li p {
	margin: 1%;
}
.cont_list li:nth-child(2n) {
	margin-right: 0px;
}
/*==========================================
 画像リストに関するスタイル
===========================================*/
ul.img3_list {
	text-align: center; /* 画像リストのセンタリング */
}
.img3_list li {
	width: 47%; height: auto;
	display: inline-block; /* floatの代替 */
}
ul.img4_list {
	text-align: center;
}
.img4_list li {
	width: 47%; height: auto;
	display: inline-block;
}
ul.img5_list {
	text-align: center;
}
.img5_list li {
	width: 47%; height: auto;
	display: inline-block;
}
.yoko {
  width:96%; height: auto;
}
.tate{
  width:72%; height: auto;
}


/*==========================================
 テーブルに関するスタイル
===========================================*/
td{
  border : 1px  solid  #cccccc ;}

th{
  text-align : center;
  background-color : #eeeeee;
  border : 1px  solid  #cccccc ;}

table{
  border-collapse : collapse;
}
/* 日常生活　外出や行事のためのcss　page1_a page2_a 共通 */
.js-masonry {
  margin: 0 auto;
}
/* jsmasonryの単位幅を縮小　*/
/* .item{
  width : 25％; 
  margin-bottom : 1em;
} */
.item img{
  width: 90%;
  height: 90%;
}
figcaption{
  font-size: 90%;
/*  text-align : left; 短い時は、centerが良い  */
}

/* もっと見る　コメント　*/
span.soego{
  font-size : 60%;
}
/* 隠しリンク　透明　*/
.hide-link{
  color : transparent;
  text-decoration: none;
}
.hide-link:hover{
  color : transparent;
  text-decoration: none;
}
/*==========================================
 スタッフに関するスタイル  page1_c, page2_c
===========================================*/
#staff_inf{
 margin-left : 2%;
}
#staff_inf .leftobj{
  width: 170px;
}
.staff1{
  margin-left : 180px;  /* 左の写真からの幅　*/
}
.staff1 dt{
  background-image : url(../images/staffback1.jpg);
  background-repeat : no-repeat;
  padding-left : 1%;
  padding-top : 1%;
}
.staff1 dd{
  padding-left : 0.5em;
}

#sikaku{
  margin-left : 1em;
}
#sikaku td{
  width :140px;
  text-align : center;
}

.comment{
border-width : 3px 3px 3px 3px;border-style : double double double double;
border-color : #eac0bf #eac0bf #eac0bf #eac0bf;
  padding : 1%;
}
/*==========================================
 ページトップや続きを見るのボタンのスタイル
===========================================*/
.pagetop {
  text-align: right;
  margin: 0 auto;
}

.buttonstyle{
  display: inline-block;
  color: #fff;
  font-size: 1em;
  padding: 6px 2em 4px;
  border-radius: 4px 4px 0 0;
  background: #65b0d5;
  text-decoration: none;
}

.readmorelink, .readclose{
  text-align: left;
  margin: 0 auto;
}

/*  ページのトップもbuttonstyleにしたら削除 */
.pagetop a {
  display: inline-block;
  color: #fff;
  font-size: 1em;
  padding: 6px 2em 4px;
  border-radius: 4px 4px 0 0;
  background: #65b0d5;
  text-decoration: none;
}
/*==========================================
  右のメニュー部分　非表示　
===========================================*/
div#content_right{
  display : none;
}
div#content_left{
  width: 100%
}

/*==========================================
 フッターのスタイル
===========================================*/
footer{
  clear:both;
  margin-left : auto;
  margin-right : auto;
  padding:1em 0.3em 0.5em 1em;
/*  background-color: #eeeeee; */
  font-size : 85%;
}

footer nav li{
  width : 30%;
  float : left;
  list-style-type : none;
}
footer nav li a{
  text-decoration:none;
  color:#8c8c8c;
}
footer p{
  text-align : center;
}

.yohaku5{
  margin-left : 2%; /*2em;*/
}
/*　スマホ対応　*/
@media (max-width: 767px) {
.item { width: 50%; }
}
/* 小型PCおよびタブレット向けのレイアウトの指定：768以上 */
@media only screen and (min-width: 768px) {
/*  html{ font-size : 70%;} */
  header {
    position:static;
    overflow:visible;
  }
  header h1 {

  }
  header h1 img {
    width:100%;
  }

  nav {
    text-align: center;
 /*   border-bottom: 3px double #000; */
    margin: 10px auto 15px auto;
  }
  nav ul li {
    text-align: center;
    float: left;
    width: 24%;
    line-height:250%;
 /*   border-right: 1px dotted #fff;    区切り　*/
  }
  nav ul li:nth-child(odd) {
    width: 25%;
 /*    border-bottom: none;  */
  }
  nav ul li.home {
    border-left: none;
    margin-left: 1px;
  }
  nav ul li.tiiki {
    border-right: none;
  }
  nav ul li a{
    display: block;
  }
/*　 コンテンツメニューのスタイル　*/
.cont_list li {
	width: 45%;  height:7em; margin-right: 2%; box-sizing: border-box;
    float: left; margin-top: 1em;
}
/* 画像リストに関するスタイル */
.img3_list li {
	width: 32%; height: auto;
	display: inline-block; /* floatの代替 */
}
.img3_list .yoko {
	width: 80%; height: auto;
}
.img3_list .tate {
	width: 60%; height: auto;
}
.img4_list li {
	width: 23%; height: auto;
	display: inline-block; /* floatの代替 */
}
.img4_list .yoko {
	width: 96%; height: auto;
}
.img4_list .tate {
	width: 72%; height: auto;
}
.img5_list li {
	width: 19%; height: auto;
	display: inline-block; /* floatの代替 */
}
.img5_list .tate {
	width: 92%; height: auto;
}

/* 画像と文章を組み合わせるときの指定　*/
/* 写真（左）＋説明文 */
.leftobj{
  width : 22%;
}
/* 写真縦（左)＋説明文 */
.leftobjt{
  width : 16%;
}
/* 写真（右）＋説明文 */
.rightobj{
  width : 22%;
}
/* 写真縦（右）＋説明文 */
.rightobjt{
  width : 16%;
}
/* 写真2枚（右）＋説明文 */
.rightobj2{
  width : 50%;
  float : right;
}

/* 日常生活　外出や行事のためのcss　page1_a page2_a 共通 */
.item{
  width : 25%;
  margin-bottom : 1em;
}
/* もっと見る　コメント　*/
span.soego{
  font-size : 70%;
}
/*=====================================================
 スタッフに関するスタイル  page1_c, page2_c 2段組み
======================================================*/
#staff1{
  margin-left : 2%;
  float : left;
  width : 60%;
}
}

/* 大型PC向けのレイアウトの指定：960以上 */
@media only screen and (min-width: 960px) {
/*  html{ font-size : 70%;} */
  header {
    max-width:95%;   /* wrapperの95%　*/
    margin-left:auto;
    margin-right:auto;
  }
  contents {
	max-width: 95%;
  }
  nav {
    max-width: 95%;
  }
  nav ul{
    margin-left: auto;
    margin-right: auto;
  }
  nav ul li:nth-child(odd) {
    border-bottom: none;
  }

/* 左のmain部分　*/
div#content_left{
/*  position: relative; */
  width: 76%;    /* 以前76% */
  float : left;
  margin: 0 1% 0 2% ;  /* 右：1%　左：2%　*/
}
/*　 コンテンツメニューのスタイル　*/
.cont_list li {
	width: 31%;  height:7em; margin-right: 2%; box-sizing: border-box;
    float: left; margin-top: 1em;
}
.cont_list li:nth-child(2n) {
	margin-right: 2%;
}
.cont_list li:nth-child(3n) {
	margin-right: 0px;
}
/* 画像リストに関するスタイル */
.img3_list .yoko {
	width: 68%; height: auto;
}
.img3_list .tate {
	width: 51%; height: auto;
}


/* 右サイドバー　*/
div#content_right {
  display: block;
  width: 15%;
  margin-left: auto;
}
div#content_right  ul {
  list-style-image: url(../images/arrow01.png);
  /*  list-style-type: square;  */
}
div#content_right  ul li {
  line-height: 2;
}
div#content_right  ul li a{
  text-decoration:none;
}
div#content_right  ul.nest{
  list-style-image: none;
  list-style-type: none;
/*  padding-right: 1%; */
}
}