body{
   display: flex;
   flex-direction: column;
   margin:0;
   border-top: 8px solid yellowgreen; 
   background-image:url(../images/w_paper.gif);
   /* background-repeat:repeat-x; */
}
/* 初期化 */
table {
	border-collapse: collapse;
}
ul{
   list-style-type: none;   
}
ul a {
   text-decoration: none;   
   }
/* 初期化 */

.big_fnt{ font-size:115%;}
.red_fnt{ color:red;}
.grn_fnt{color:green;}
.blu_fnt{color:rgb(4, 7, 177);}
.org_fnt{color:orangered}
.bld_fnt{font-weight: bold;}
.italic{font-style: italic;}
.right_date{ float: right;}
.right_date100{ 
   text-align: right;
   width:98%; 
}
.mr_top20{margin-top:20px;}
.mr_btm15{margin-bottom:15px;}
.mr_btm30{margin-bottom:30px;}
.mr_btm40{margin-bottom:40px;}
.mr_tb10{margin-bottom:10px;margin-top:10px;}
.mr_10{margin:10px;}
.pad_r10{padding-right:10px;}
.pad_b10{padding-bottom:10px;}

.logo {
   text-align: center;
}

.container{

   background-color: #fff;
}
.grovalNavigation{
   height: 70px;
   text-align: center;
   background-color: #fff;

}

main{
   min-height: 100vh;
   margin: auto;
   background-color: #fff;
   padding: 10px;
   display: flex;
   margin-top: 10px;
}

.content{
   width: 760px;/*ここで最大幅を表示*/
   flex: 1;
   /* background-color: #eee; */
   text-align: center;
   margin-left: 12px;
}

.localNavigation{
   width: 220px;
   font-size:90%;
   border-radius: 10px;
  padding: 10px 5px;  
  outline: dashed 2px yellowgreen;
  /* outline-offset:-10px; */
}

footer{
   margin:0;
   width: 100%;
   height: 170px;   
   /* padding: 15px 0; */
   background-image:url(../images/footer.png);
   background-repeat:no-repeat;
}

#footer_nav{
   width: 25%;
   float: right;
}

#footer_nav ul {
   /* width: 200px; */
   list-style: none;
   padding: 0;
   margin-top: 40px;
   
 }

#footer_nav ul li {
   position: relative;
   padding: 0 0 0.2em 1.2em;
   margin: 0.1em 0;
   
 }
#footer_nav ul li::before {
   position: absolute;
   left: 5px;
   font-family: "Font Awesome 5 Free";
   font-weight: 700;
   content: '\f105';
   color: green;
   margin-top:1px;  
 }
 
 #footer_nav ul li a{
   color:darkgreen;
   font-size:90%;
   
}
#footer_nav ul li a:hover{
   color:#fff ;

}

#footer_nav ul li a:active{
   color:green;
}

footer div.Copyright{
   clear:both;
   width: 100%;
   height:18px;
   padding-top:10px;
   font-size: 80%;
   vertical-align: bottom;
   text-align: center;
   color: #888;

}

footer div.add{
   padding-top:37px;
   float:left;width:75%; 
   font-size:85%;
   color:#333;

}

/* メニュー */
nav{
   border-bottom: 4px dotted rgb(165, 212, 71); 
	/* border-bottom: 1px solid #ccc; */
	margin-bottom:15px;
   /* box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2); */
   padding:0 0 10px 0 ;
}

.gradation {
    display: inline-block;
    padding: 0.5em 6em;
    background: linear-gradient(to right, #fff 0%, #3388dd 30%, #3388dd 70%, #fff 100%);
    color: #fff;
    font-size: 24px;
}

nav ul{
   display: table;
   table-layout: fixed;
	margin: 0 auto;
	padding: 0;
	width: 66%;
	text-align: center;
}
nav ul li{
	display: table-cell;
	min-width: 50px;
	border-right: 1px inset #ccc;
}
nav ul li:first-child{
	border-left: 1px solid #ccc;
}
nav ul li a{
	display: block;
	width: 100%;
	padding: 5px 0;
	text-decoration: none;
	color: #aaa;
   font-size:88%;

}
nav ul li a:hover{
	background: #f1f6fc;
	/* border-bottom: 5px solid #2887d1; */
}
nav ul li.current{
	pointer-events: none;
	/* border-bottom: 5px solid #00B0F0; */
}

nav ul li.current a{
	color: #000;
}

/* 
@media screen and (min-width: 1110px) {
   .navItem > a {
     text-align: center;
   }
 } */
 
 .navItem > a:before {
   display: block;
   /* font: 24px/1 FontAwesome; */
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   font-size:2em;
   margin-bottom: 4px;
 }
 
 .engHome a::before {
   content: '\f015';
   color:pink;
 }
 
 .engAbout a::before {
   content: '\f279';
   color:skyblue;
 }
 
 .engEvent a::before{
   content: '\f073';
   color:plum;
 }
 
 .engActiv a::before {
   content: '\f86d';
   color:orange;
 }
 
 .engClub a::before {
   content: '\f4d8';
   /* content: '\f554'; */
   color:yellowgreen;
 }
.engriyou a::before {
   content: '\f084';
   /* content: '\f554'; */
   color:plum;
 }

 .box1 {
 
   padding: 0.5em 2em;
   margin: 0 0 0 0.5em;
   /* outline: dashed 3px yellowgreen; */
   border: solid 4px yellowgreen;
}
.box1 p {
   margin: 0; 
   padding: 0;
   text-align: left;
}



/* サイドメニュー */
#side ul{ 
   margin: 0;
   padding: 0 3px 0 4px;
 }

#side h3{
   font-weight: normal;
   color:#fff;
   padding:5px 0 5px 5px;
   margin:0;
   margin: 0 0 10px 0;

}
 #side h3.pdf{
   border-left: 6px solid green;
   background: yellowgreen;

 }
 #side h3.event{
   border-left: 6px solid orangered;
   background: orange;
   
 }
 #side h3.link{
   border-left: 6px solid royalblue;
   background: skyblue;

 }
 #side li.sidemenu_item{ 
   padding :0; 
   margin:0; 
   }

   #side ul li a {
      color:#333 ;
   }

   #side ul.Pdf-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
   #side ul.Pdf-list li {
      position: relative;
      padding: 0 0 0.3em 1.6em;
      margin: 0.5em 0;
    }
   #side ul.Pdf-list li::before {
      position: absolute;
      left: 5px;
      font-family: "Font Awesome 5 Free";
      font-weight: 700;
      content: '\f138';
      color: yellowgreen;
    }
   #side ul.Pdf-list li a:hover{
      color:green ;
   }

   #side ul.Event-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
   #side ul.Event-list li {
      position: relative;
      padding: 0 0 0.3em 1.6em;
      margin: 0.5em 0;
    }
   #side ul.Event-list li::before {
      position: absolute;
      left: 5px;
      font-family: "Font Awesome 5 Free";
      font-weight: 700;
      content: '\f138';
      color: orange;
    }
   #side ul.Event-list li a:hover{
      color:darkorange ;
   }

   #side ul.link-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
   #side ul.link-list li {
      position: relative;
      padding: 0 0 0 1.6em;
      margin: 0.5em 0;
    }
   #side ul.link-list li::before {
      position: absolute;
      left: 5px;
      font-family: "Font Awesome 5 Free";
      font-weight: 700;
      content: '\f138';
      color: #00ACDB;
    }
   #side ul.link-list li a:hover{
      color:skyblue ;
   }

   /* \f06c 葉 */
   /* \f303 えんぴつ*/
   /* \f001 音符*/
   /* \f527 サイコロ*/
   /* f4da にこまる*/
   .info_box {
      position: relative;
      background: #fff0cd;
      box-shadow: 0px 0px 0px 5px #fff0cd;
      border: dashed 2px white;
      /* padding: 0.2em 0.5em; */
      color: #454545;
      padding: 0.5em 0.5em;
      margin:0em 0.1em 1.5em 0.7em;
   
   }
   
   .info_box:after{
      position: absolute;
      content: '';
      right: -7px;
      top: -7px;
      border-width: 0 15px 15px 0;
      border-style: solid;
      border-color: #ffdb88 #fff #ffdb88;
      box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
   }
  .newslist{
   /* padding: 0.5em 1.5em;
   margin: 0 0.5em 2em; */
   text-align: left;
}
  .newslist h2{
     margin-top: 0;
     margin-left:0;
     padding-left: 20px;

   height:28px;
   background: no-repeat url("../images/top/info.png");
   width: 100%;
   font-size:90%;
   font-weight: normal;
   color:#999;   
  }
  .newslist h2 b{
   font-size:125%;
  }
  .newslist h2 span{ 
     margin-left: 400px;
   text-align: right; 
   font-size:98%;
  }

  dt, dd {
   margin: 0;
   padding: 0;
}
.info_box dl {
   display: flex;  
   flex-wrap: wrap;
   margin-bottom: 20px;
   font-size:98%;
 }
 
 .info_box dt {
   width: 22%; 
   padding-top: 5px;
   padding-bottom: 5px;
   color:salmon;
 }
 
 .info_box dd {
     width: 78%;
     text-align: left;
     font-size: 95%;
     /* border-bottom: solid 1px #c8c8c8; */
     padding-top: 5px;
     padding-bottom: 5px;
 }
  .info_box dd a:link    {color:#333;}
  .info_box dd a:visited {color:#333;}
  .info_box dd a:hover   {text-decoration:none; color:orange; }
  .info_box dd a:active  {text-decoration:none; color:orange; }

  .event_box_new{
   padding:10px;
   text-align: left;
   font-size:92%;  

  }
  article {
	display: flex;
	margin-bottom: 10px;
	padding: 5px 0;
	border-radius: 5px;
	box-sizing: border-box;
	box-shadow: 0 0 5px #999;

}

   article figure {
      margin-left: 20px;
      margin-right: 20px;
      width: 165px;
      /* text-align: left; */
   }
   article figure img {
      min-width: 165px;
      max-width: 100%;
      vertical-align: top;
   }

  p.text_date{
      margin-bottom:0;
      color:salmon;
      font-size:105%;
   }

   article div.text_content{
      margin-right: 10px;

   }

   article p.cntxt {
      margin-top:7px

   }
 
   article h3 {
      margin:4px 0 0;
      font-size:99%;
   }

   .event_box{
      margin-left:30px;
      padding:0 10px;
      text-align: left;
      font-size:92%;     
     }

     .detail_box{
      margin-left:50px;
     }
     
     .event_box h2{
      margin:0;
      height: 55px;
      padding-top:8px;
      /* padding-left:8px; */
      text-align: center;
      background-image:url(../images/event2_lbl.png);
      background-repeat:no-repeat;
      letter-spacing: -0.04em;

      color :midnightblue;
      text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
                  -1px 1px 0 #FFF, 1px -1px 0 #FFF,
                  0px 1px 0 #FFF,  0-1px 0 #FFF,
                  -1px 0 0 #FFF, 1px 0 0 #FFF;
                  font-size:24px;
     }

     .event_box p{
      margin:4px 0 20px;
     }

     .contents{
         /* margin-top: 45px; */
         padding:0 0 25px;
      /* background: yellowgreen; */
     }

     .event_box img{     
      padding:0;
     }

    /* お知らせページ */
    .event_box_d{
      margin-left:30px;
      margin-top:0;
      padding:2px 10px 1px;
      text-align: left;
      font-size:92%; 
   }    

   
    .event_box_d h2 {
      position: relative;
      background: #fff0cd;
      box-shadow: 0px 0px 0px 5px #fff0cd;
      border: dashed 2px white;
      margin:0 0 30px;
      padding: 0.2em 0.5em;
      color: #454545;
      text-align: center;
    }
    
    .event_box_d h2 after {
      position: absolute;
      content: '';
      right: -7px;
      top: -7px;
      border-width: 0 15px 15px 0;
      border-style: solid;
      border-color: #ffdb88 #fff #ffdb88;
      box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
    }

    .event_box_d p{
      margin:4px 0 20px;
     }

     .event_box_d hr{     
      border: dashed 1px #777;
     }

     .event_box_d img{     
      padding:0;
     }

     #mark{color:#fff;}


     .page{
      border: solid 1px #258;
      color:  #258;
      padding: 2px 8px;
      margin:0 3px;
      text-decoration: none;
   }
   .page_top{
      text-decoration: none;  
      padding: 2px 8px;
      margin:0 3px;
   }
   .page_next{
      text-decoration: none;
      /* font-size: 85%;	 */
   }


/* 各ページ共通 */
#main{
   margin-left:30px;
   margin-top:0;
   padding:2px 10px 1px;
   text-align: left;
   font-size:92%; 

}

p .sml_txt{
   font-size:92%; 

}
figure {
	float: right;
	margin: 0 15px 15px 0;
	width: 47%;
}
figure img {
	max-width: 100%;
}


/* ブルー系 */
#main h1 {
   margin:0 0 30px 0;
   /* margin-bottom:30px; */
   position: relative;
   background: #f1f8ff;
   padding: 0.25em 0.5em;
   border-left: solid 2em #5c9ee7;
   font-size: 24px;

}

h1:before {
   font-family: "Font Awesome 5 Free";
   content: "\f303";
   position: absolute;
   padding: 0em;
   color: white;
   font-weight: 900;
   left: -1.5em;
   top: 50%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
 }

 #main h3 {
   margin-top:5px;
   margin-bottom:10px;

}

#main h2{
   padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
   color: #494949;/*文字色*/
   background: #f4f4f4;/*背景色*/
   border-left: solid 7px #7db4e6;/*左線*/
   border-bottom: solid 3px #d7d7d7;/*下線*/
   font-size: 21px;
}

#main h4.sub {
   margin-top:0;
   margin-bottom:5px;
   padding:5px 10px;
   /* font-size:14px; */
   color:#fff;
   background:orange;
}

/* //ポイント枠 */
.box27 {
   position: relative;
   margin: 3em 0;
   padding: 0.6em 1em;
   border: solid 3px #62c1ce;
}
.box27 .box-title {
   position: absolute;
   display: inline-block;
   top: -32px;
   left: -3px;
   padding: 3px 9px 2px;
   height: 25px;
   line-height: 25px;
   font-size: 17px;
   background: #62c1ce;
   color: #ffffff;
   font-weight: bold;
   border-radius: 5px 5px 0 0;
}
.box27 p {
   margin: 0; 
   padding: 0;
}

#free_tbl_s{
   margin:0 auto;
   width:100%;
 }
#free_tbl_s td{
   padding:12px 10px;
 }
#free_tbl_s th{
   color:#fff;
   background:#005ab3;
   text-align: center;
   font-weight: normal;
   padding:9px;
 }
#free_tbl_s tr:nth-child(odd){
   background:#e6f2ff;
 }

/* センターご利用案内 */
#annai_tbl{

   border:2px solid #aaa;
  background-color: #fff;
	width:700px;
   }

#annai_tbl th{/* thead 'th'のスタイル */
  background-color: #34b3d1;  /* 背景色 */
	font-size:12pt;
  color: #fff; /* 文字色 */
	/* font-weight:normal; */
	padding:4px 0;
   text-align: center;
   }
	 
#annai_tbl tbody tr td{
  text-align:center;
   padding:10px 0;
   border:1px solid #aaa;
line-height:104%; 	 

   }
	 
#annai_tbl tbody td.atari{
font-size:9pt;
   }

.coL00 { width: 90px;background-color: #cce5ff;  }
.coL11 { width: 88px; }
.coL22 { width: 82px; background-color: #eaf4ff;}

#annai_tbl tbody td.bdr_w{
   border-bottom:2px solid #aaa;
	    padding:6px 0;
}

.ko_midashi{
   width:48%;
   background-color:#ccff99;
   margin:6px 0 6px 0;
   padding:2px 5px;
   
   }
table.katudou_tbl{
   margin:0 auto 40px;
   width:100%;

}
table.katudou_tbl td{
   padding: 4px;px 8px 4px 0;
   text-align: center;
 }

 div.katudo_tbl{
    width: 98%;
   border-left:6px solid green;
   margin-top:5px;
   margin-bottom:5px;
   padding-left:8px;
   padding-top:8px;
   /* font-size:13pt; */
   border-top:1px dotted #999;
   border-bottom:3px solid yellowgreen;
   border-right:1px dotted #999;
}
.carrot{
color:#333;
font-weight: bold;
margin:0;

}

 .carrot::before{
   font-family: "Font Awesome 5 Free";
   content: "\f787";
   font-size: 20px;
   font-weight: 700;
   margin-right: 4px;
   color: orangered;
 }