@charset "utf-8";
/*----------------------------------------
	reset
----------------------------------------*/
*,
::before,
::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  font-size: inherit;
  line-height: inherit;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header, main, menu, nav, section,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

header, footer, article, section, aside, main, nav, menu, figure, figcaption {
  display: block;
}

span, small, strong, em, b, i {
  color: inherit;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  overflow-x: hidden;
  overflow-y: auto;
}

ul,
ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: top;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th {
  text-align: left;
}

input, select {
  vertical-align: middle;
}

input, textarea {
  margin: 0;
  padding: 0;
}

address {
  font-style: normal;
}

q::before,
q::after {
  display: none;
}

.text-right {
    text-align: right;
}

.pagetitle{
	width:100%;
	background-color:#0023c7;
	text-align: left;
color: #ffffff;
	marign: 0px;
	padding:5px;
	font-size: 1.1rem;
}
/*----------------------------------------
	base
----------------------------------------*/
body {
  color: #333;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.5;
}
a {
  color: #72bbf0;
  transition: color 0.3s;
}
a:hover {
  color: #72bbf0;
  text-decoration: none;
}

.sr-only{
	border: 0;
	clip: rect(0 0 0 0 );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/*ボタン*/
.btn{
	display: block;
	width: 208px;
	margin: 0 auto;
	padding: 11px 11px 11px;
	box-sizing: border-box;
	border-radius: 24px;
	background-color: #0023c7;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-align: center;/*文字を中央寄せ*/
	text-decoration: none;/*アンダーラインなし*/
	vertical-align: center;
}
.container{
	width: 98%;
	margin: 0 auto;

}
@media (min-width : 900px ){
.container{
	width: 84%;
	max-width: 1240px;
}
}
/* --------------------------------
 * parts
 * -------------------------------- */
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.heading {
  padding: 2px 12px;
  background: url('img/bg-slash.gif');
  letter-spacing: 1px;
  font-size: 1.0rem;
}

/*========= ナビゲーションドロップダウンのためのCSS ===============*/

/*==ナビゲーション全体の設定*/
nav{
  background:#000;
  color:#fff;
  text-align: center;
}
/*ナビゲーションを横並びに*/
nav ul{
  list-style: none;
  display: flex;
  justify-content: center;
}
/*2階層目以降は横並びにしない*/
nav ul ul{
  display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{
  position: relative;
}

/*ナビゲーションのリンク設定*/
nav ul li a{
  display: block;
  text-decoration: none;
  color: #fff;
  padding:10px 35px;
  transition:all .3s;

}

nav ul li li a{
  padding:10px 35px;
	
}

nav ul li a:hover{
  color:#0023c7; 
}

/*==矢印の設定*/

/*2階層目を持つliの矢印の設定*/
nav ul li.has-child::before{
  content:'';
  position: absolute;
  left:15px;
  top:25px;
  width:6px;
  height:6px;
  border-top: 2px solid #999;
    border-right:2px solid #999;
    transform: rotate(135deg);
}

/*3階層目を持つliの矢印の設定*/
nav ul ul li.has-child::before{
  content:'';
  position: absolute;
  left:6px;
  top:17px;
  width:6px;
  height:6px;
    border-top: 2px solid #fff;
    border-right:2px solid #fff;
    transform: rotate(45deg);
}

/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
nav li.has-child ul{
    /*絶対配置で位置を指定*/
  position: absolute;
  left:-100px;
  top:45px;
  z-index: 4;
    /*形状を指定*/
  background:#0023c7;
  width:350px;
    /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
    /*アニメーション設定*/
  transition: all .3s;
}

/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a{
  color: #fff;
  border-bottom:solid 1px rgba(255,255,255,0.6);
}

nav li.has-child ul li:last-child a{
  border-bottom:none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{
  background:#3577CA;
}


/*==3階層目*/

/*3階層目の位置*/
nav li.has-child ul ul{
  top:0;
  left:182px;
  background:#66ADF5;
}

nav li.has-child ul ul li a:hover,
nav li.has-child ul ul li a:active{
  background:#448ED3;
}


/*==900px以下の形状*/

@media screen and (max-width:900px){
  nav{
    padding: 0;
  }
  
  nav ul{
    display: block;
  }
  
  nav li.has-child ul,
  nav li.has-child ul ul{
    position: relative;
  left:0;
  top:0;
  width:100%;
  visibility:visible;/*JSで制御するため一旦表示*/
  opacity:1;/*JSで制御するため一旦表示*/
  display: none;/*JSのslidetoggleで表示させるため非表示に*/
  transition:none;/*JSで制御するためCSSのアニメーションを切る*/
}
  
nav ul li a{
  border-bottom:1px solid #ccc;
}

/*矢印の位置と向き*/

nav ul li.has-child::before{
  left:20px;  
}

nav ul ul li.has-child::before{
    transform: rotate(135deg);
  left:20px;
}
    
nav ul li.has-child.active::before{
    transform: rotate(-45deg);
}

}

/* --------------------------------
 * メイン画像
 * -------------------------------- */
/*ナビゲーションメニュー（PC）*/
@media screen and (min-width: 1600px),print {
.hero {
	height: 550px;
	background-image: url(img/main.jpg);
	background-position: center;
	position: relative;
	background-repeat: no-repeat;
	background-color: #000;

}
.hero img{
display: none;

}
	
}



/*メイン画像　モバイル*/
@media (max-width: 1599px){
.hero {
height: auto;
background-image: none;
}
.hero img{
width: 100%;
	height: auto;

}

}
/* --------------------------------
 * 各ページトップ画像
 * -------------------------------- */

.sub {
		height: 300px;
	background-image: url("img/SubPageTop.jpg");
	background-position: center;
	display: flex;
    align-items: center;
}
.sub .container {
text-align: center;
}
.sub img{
	width: 70%;
}


/*メイン画像　モバイル*/
@media screen and (max-width: 900px) {
.sub img{
	width: 100%;
}
}

/* --------------------------------
 * main
 * -------------------------------- */
.main {
position: relative;
	
}
/*大枠の設定*/
.main-area {
margin: 30px 0;				/*外側の余白*/
padding: 0px;				/*内側の余白*/
width: 100%;
justify-content: center;
}
/*左側枠：タイトル枠と詳細情報枠を管理する枠*/
.main-contents{
	width: 100%; /* 横幅 */
	
}
/*左側枠：ロゴとタイトルを管理する枠*/
.main-topic {
width: 100%;
}
/*各ページの情報を載せている枠*/
.detail {
	padding: 10px;
	margin: 20px 0;
}
/*ロゴ*/
.main_thumb img{
	width:120px;
	padding: 0px;	/*内側の余白*/
	margin: 0 20px;
}

.main-topic h3 {
	font-size: 0.8rem;
	margin-bottom: 2px;
	padding-bottom: 4px;
	border-bottom: dotted 1px currentColor;
}
.main-topic p {
	font-size: 1.6rem;
}


/*PC*/
@media (min-width: 900px){
/*コンテンツと広告を横並び*/
.main-area {
	display: flex; /*横並びにする*/
	justify-content: center;

}
/*ロゴとタイトルを横並び*/
.main-topic {
	text-align: center;
	display: flex;	
	justify-content: center;
	}
.main_thumb img{
	margin: 0 60px;
}
.page-title{
	width: 50%;
}
}

/*------メイン画像　モバイル------*/
@media screen and (max-width: 900px) {
.main-topic {
	text-align: center;		
	}
.main_thumb img{
	width: 160px;
	padding: 10px;	/*内側の余白*/
}
/*モバイルの時はタイトル幅を100%*/
.page-title{
	width: 100%;
}
.main-topic p {
	font-size: 1.2rem;
}
}


/*右側枠の設定*/
.side-menu {

}
/*メイン画像　PC(縦並びにする)*/
@media (min-width: 900px){
	.side-menu {
		flex-direction: column;
	}
}
/*メイン画像　モバイル(横並びにする)*/
@media screen and (max-width: 900px) {
	.side-menu{
			justify-content: center;
			display: flex;	/*横並びにする*/
      transform: translateY(-70px);
		}
}
.ad-space{
width: 336px;
margin: 10px;
border: 1px solid black;
 border-radius: 10px;
 margin-right: 10px;	/*外側の余白*/
 padding: 10px;			/*内側の余白*/
 text-align: center;	/*中央ぞろえ*/
	
}
.ad-space img{
  margin-bottom: 5px;
}

/* --------------------------------
 * お知らせリスト設定
 * -------------------------------- */
/*-ul-*/
.scroll-list {
  max-height: 600px;
  overflow-y: auto;
  margin-bottom: 60px;
  list-style-type: none;
}
.infogroup{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.scroll-list .scroll-item a {
  display: block;
  padding: 4px 0;
  color: #333;
  font-size: 0;
  transition: background-color 0.1s;
  text-decoration: none;

}
.scroll-list .scroll-item:nth-of-type(even) a {
  background: url('img/bg-slash.gif');
}
.scroll-list .scroll-item a:hover {
  background-color: #fafaf8;
}

.scroll-list .date {
  display: inline-block;
  vertical-align: middle;
  width: 120px;
  letter-spacing: 1px;
  font-size: 1.0rem;
}
.scroll-list .category.news {
  background-color: #2c3c53;
}
.scroll-list .title {
  display: inline-block;
  width: 90%;
  padding-left: 30px;
  overflow: hidden;
  text-overflow:  clip;

  font-size: 1.0rem;
}
/*モバイル(横並びにする)*/
@media screen and (max-width: 900px) {

.scroll-list .scroll-item a {
  padding: 4px 0px;
}
.scroll-item {
  display: block;
	}
.scroll-list .date {
  display: block;
	text-decoration: none;
}	
.scroll-list .scroll-item a {
  display: block;
		text-decoration: none;
	}
.scroll-list .title {
  display: block;
  width: 100%;
	  padding-left: 10px;
}
}
/* --------------------------------
 * コンテンツ一般設定
 * -------------------------------- */
/*大枠の設定*/
.desc2{

	padding:0 20px;
}

.contents {
	height: auto;
	min-height: 300px;
	padding: 20px 0px;

}
.contents h3 {
	font-size: 1.4rem;
	margin-bottom: 2px;
	padding-bottom: 4px;
}


.textlist{
	text-align: left;
	  width: 90%;
	    margin:  5px auto;  /* 中央寄せ */
} 
.textlist2{
	text-align: left;
		    margin:  2px 10px;  /* 中央寄せ */
} 
.ruletext{
	text-align: left;
		  width: 100%;
	margin: 5px 5px;
}
.linetag{
width: 100%;
	height: 1px;
	margin-bottom: 2px;
	padding-bottom: 4px;
	border-bottom: dotted 1px currentColor;
}
/*役員リスト*/
.boardtitle{
	width:100%;
	background-color:#0023c7;
	text-align: left;
color: #ffffff;
	marign: 0px;
	padding:5px;
	font-size: 1.1rem;
}

  .tbl-boardlist {
	font-size: 1.0rem;
	      width: 100%;

  }


  .tbl-boardlist td {
border-bottom: dotted 1px currentColor;
   }

.tbl-boardlist td:first-child {
  background: #ffffff;
	padding:10px;
    font-weight: bold;
}

.tbl-boardlist a {
  color: #000000;
     }

/*PC(ホバー処理)*/
@media (min-width: 1100px){
.tbl-boardlist tr:hover td {
background-color: #DCDCDC;
}
}

@media screen and (max-width: 1100px) {
	.boardtitle{
margin-bottom: 20px;
}
  .tbl-boardlist {
    width: 100%;
	  
  }
  .tbl-boardlist .thead {
    display: none;

  }

  .tbl-boardlist td {
	padding: 2px; 
    display: block;
    text-align: left;
    width: 100%;
	  font-size: 0.9rem;
	  	border-bottom: dotted 1px currentColor;
  }
  .tbl-boardlist td:first-child {
	padding: 10px;   
    background: #ffffff;
    color:#000000;
    text-align: center;
	  font-weight: bold;

	  
  }
  .tbl-boardlist td:before {
    content: attr(data-label);
    float: left;

	  
  }
}
@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
  .tbl-boardlist td {
    word-wrap: break-word;
	  font-size: 0.8rem;
  
  }
}

/*入会区別リスト*/

  .tbl-enrolllist {

  }


  .tbl-enrolllist td {
	  font-size: 1.0rem;

   }

.tbl-enrolllist td:first-child {
  background: #ffffff;
	  width: 15%;
	white-space: nowrap;
}

@media screen and (max-width: 1100px) {
.tbl-enrolllist{

}
.tbl-enrolllist .thead {
    display: none;
  }
  .tbl-enrolllist td {
	padding: 2px; 
    display: block;
    text-align: left;

	  font-size: 1.0rem;

  }
  .tbl-enrolllist td:first-child {
	padding: 5px;   
    background: #ffffff;
    color:#000000;
    text-align: center;
	  border:none;
	  width: 100%;
	  
  }
  .tbl-enrolllist td:before {
    content: attr(data-label);
    float: left;
  }
}
/*----------------------------------------
	イベントページ
----------------------------------------*/
.tbl-event {
  margin: 20px auto;
  font-size: 1.0rem;
  width: 100%;
}

.tbl-event th {
  background: #ffffff;
  color: #000000;
  padding: 5px;
  text-align: center;
  
}
.tbl-event td {
　border: solid 1px #ccc;
  padding: 10px;
}

@media screen and (max-width: 900px) {
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .tbl-event {
    width: 100%;
  }
  .tbl-event th,
  .tbl-event td {
　　border-bottom: none;
    display: block;
    width: 100%;
    text-align: left;
  }
}

/*----------------------------------------
	footer
----------------------------------------*/
.footer {
	  position: fixed;
  bottom: 0;
	width: 100%;
	padding: 10px 0 10px;
    background: #000;
	color: #fff;
	text-align: center;
}
.footer p{
	margin: 0 20px;
  font-size: 0.8rem;
}

/*メイン画像　PC*/
@media (min-width: 900px){
.footer .info{
	  display: flex;
	  justify-content: center;
}

}