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

.red {
  color: red;
}
.space_l{
	margin-left: 10px;
}
.red_s{
	font-size: 12px;
	color: #FF0004;
}
.hr{
	margin: 8px 0;
border-top: solid 1px #CADC38;
}
/* ==========================================

　共通

=========================================== */
/*アイコンとタイトル並列*/
.common_page_title_area div {
  display: inline-block;
  vertical-align: middle;
}
/*全体枠*/
#kouza_syousai  {
  width: 100%;
  max-width: 1000px;
	font-size: 14px;
	line-height: 18px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}
/* ----------------------------------------------
講座名 （ iconとテキスト並列
----------------------------------------------*/
#kouza_syousai .kouza_name_flex{
  display: flex;
	flex-wrap:wrap;
  align-items: center;
		  font-size: 20px;
  line-height: 24px;
  color: #0B67C4;
  width: 100%;
  margin: 0 0 0px 10px;
  padding: 6px 0px;
  box-sizing: border-box;
  text-align: left;
  /*background-color: #ffffff;*/
 border: solid 0px;
}

/*icon*/
#kouza_syousai .kouza_name_flex .icon img {
  width: 28px;
	height: 28px;
  vertical-align: bottom;
  border: solid 0px;
}
#kouza_syousai .kouza_name_flex .name{
	margin-left: 10px;

}
#kouza_syousai .kouza_name_flex .nendo{
	font-size: 16px;
	margin-left: 40px;
}
/* ----------------------------------------------
講座説明
----------------------------------------------*/
#kouza_syousai .kouza_setsumei{
  max-width: 800px;
	padding-left:50px;
	text-align: justify;
  border: solid 0px;
}

/* =========================================

講座の紹介

========================================== */
#kouza_syousai .kouza_area{
margin-top: 20px;
}
/* ----------------------------------------------
クリックで表示
----------------------------------------------*/
#kouza_syousai .tyuui{
	font-size: 12px;
}




/* =========================================
　通常のbox全体枠
========================================== */

.accbox { /*  クリック展開あり, なし */
  width: 100%;
  margin-bottom: 30px;
}
/* 項目展開 表示内容
--------------------------------------------------------------------*/
/* 枠*/
.koumoku_waku, .koumoku_waku_normal, .koumoku_waku_20kinen, .koumoku_waku_20kinen_normal { /* 左から、クリック展開あり,クリック展開なし,クリック展開あり20周年記念, クリック展開なし20周年記念 */
 /* font-size: 18px;*/
	font-size: 14px;
  color: #000000;
  text-align: left;
  padding: .6em 1em;
  background-color: #D2EFE8;
  border-radius: 22px;
  border: solid 1px #08C093;
  margin-bottom: 10px; /* 項目枠間のスペース */
}

/* 講座名、開催日spanで改行  */
.koumoku_waku span, .koumoku_waku_normal span{ /* 左から、クリック展開あり,クリック展開なし,クリック展開あり20周年記念, クリック展開なし20周年記念 */
  display: inline-block;
  margin-right: 30px;
}
/* 講座名*/
.koumoku_waku .kouza_mei{
	font-weight: bold;
}
/* 申込受付期間*/
.s{
	font-size: 12px;
	border: solid 0px;

}
@media (max-width: 500px) {
	.s{
			width: 100%
	}
}
/* 講座の説明
--------------------------------------------------------------------*/
.reed {
  width: 90%;
  margin: 0px auto 0px auto;
  text-align: left;
  /*font-size: 16px;*/
  color: #000000;
}
/* accbox 　非表示内容（クリックで表示）
--------------------------------------------------------------------*/
/* ラベル */
.accbox label_a1, .accbox label_a2, .accbox label_a3, .accbox label_a4, .accbox label_a5, .accbox label_a6, .accbox label_a7, .accbox label_a8, .accbox label_a9, .accbox label_a10, .accbox label_a11, .accbox label_a12, .accbox label_a13, .accbox label_a14, .accbox label_a15 {
  display: block;
  cursor: pointer;
}
.accbox input { /* チェックは隠す */
  display: none;
}
.accshow, .accshow_normal { /* 非表示文章　表示文章*/
  width: 100%;
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
}
.accshow {
  height: 0; /*必須*/
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
  font-size: 14px;
}
input:checked + .accshow { /* inputにチェックが入った時の accshowの属性*/
  height: auto;
  opacity: 1;
  margin-top: 0px;
  margin-bottom: 80px;
}
/*テーブル表示内容（講座の詳細）
--------------------------------------------------------------------*/
/* tableの外枠なし、タイトルthと最後のtrのborder-bottom太く*/
.tbl_kouza_list { /* テーブル名 */
  width: 100%;
  margin-top: 20px;
  /*font-size: 16px;*/
  color: #2F3030;
  text-align: left;
  vertical-align: middle;
  border-collapse: collapse; /* 囲み線を1本で重なりをなくす table,th,tdに指定 */
  border: 0px solid #292626; /* 外枠なし */
}
.tbl_kouza_list td {
  padding: 6px 10px; /*間隔　必須 */
}
.tbl_kouza_list tr {
  border-bottom: 1px solid #CADC38;
}
.tbl_kouza_list tr:nth-child(1) { /* 最初のtrのborder-top太く*/
  border-top: 4px solid #CADC38;
}
.tbl_kouza_list tr:last-child { /* 最後のtrのborder-bottom太く*/
  border-bottom: 4px solid #CADC38;
}
.tbl_kouza_list .td01 { /* 項目 */
  width: 20%;
  min-width: 90px;
  font-weight: bold;
  text-align: justify; /* 両端揃え(均等割り付け) */
  text-justify: inter-ideograph; /* IE用 文章均等割り付け */
  border: solid 0px;
}
.tbl_kouza_list .td02 { /* 内容 */
  width: 80%;
  /*text-align: justify;*/ /* 両端揃え(均等割り付け) */
  text-justify: inter-ideograph; /* IE用 文章均等割り付け */
}
.tbl_kouza_list .td02 span {
  display: inline-block;
  margin-right: 30px;
}
/*資料リンクボタン（幅無指定　文字数によってボタン幅が伸びる）
--------------------------------------------------------------------*/
.link_btn{
  display: inline-block;
  background-image: none;
  margin-top: 20px;
  padding: .4em 0.6em;
  border-radius: 4px;
  margin: 0.2em 0;
  /*background-color: #4CAF50;*/
  border: solid 1px #54BF66;
  /*border: none;*/
  color: #000000;
  text-decoration: none;
	font-size: 12px;
  cursor: pointer;
  position: relative;
  transition: 0.5s; /*hover処理の時間*/
}
.link_btn:hover{
  /*outline: none;*/
  color: #ffffff;
  background-color: #5AB4BD;
}
/*Logoフォームへのリンクボタン（幅無指定　文字数によってボタン幅が伸びる）
--------------------------------------------------------------------*/

.tbl_kouza_list .td02 a{
	text-decoration: none;
}
.tbl_kouza_list .td02 .moushikomi_btn{
  display: inline-block;
  background-image: none;
  margin-top: 20px;
  padding: .4em 0.6em;
  border-radius: 4px;
  margin: 0.2em 0;
  /*background-color: #4CAF50;*/
  border: solid 1px #54BF66;
  /*border: none;*/
  color: #000000;
  text-decoration: none;
	font-size: 12px;
  cursor: pointer;
  position: relative;
  transition: 0.5s; /*hover処理の時間*/
}
.tbl_kouza_list .td02 .moushikomi_btn:hover, .tbl_kouza_list .td02 .moushikomi_btn:focus {
  /*outline: none;*/
  color: #ffffff;
  background-color: #5AB4BD;
}
.tbl_kouza_list .td02 .moushikomi_btn::-moz-foucus-inner{
  padding: 0;
  /*border: none;*/
}
/* ---END コンテンツ表示非表示--------------------------------------*/

/*テーブル表示内容（自然観察 自然探検発見わくわくクラブの上のテーブル）
--------------------------------------------------------------------*/
/* tableの外枠なし、タイトルthと最後のtrのborder-bottom太く*/
.tbl_kouza_list_shizen { /* テーブル名 */
  width: 100%;
  margin-top: 20px;
  /*font-size: 16px;*/
  color: #2F3030;
  text-align: left;
  vertical-align: middle;
  border-collapse: collapse; /* 囲み線を1本で重なりをなくす table,th,tdに指定 */
  border: 0px solid #292626; /* 外枠なし */
}

.tbl_kouza_list_shizen td {
  padding: 10px 0px; /*間隔　必須 */
}
@media (max-width: 500px) {
	.tbl_kouza_list_shizen td{
		display: block;
		 padding: 1px 0px; /*間隔　必須 */
	}
}
.tbl_kouza_list_shizen tr {
  border-bottom: 1px solid #CADC38;
}

.tbl_kouza_list_shizen tr:nth-child(1) { /* 最初のtrのborder-top太く*/
  border-top: 4px solid #CADC38;
}
.tbl_kouza_list_shizen tr:last-child { /* 最後のtrのborder-bottom太く*/
  border-bottom: 4px solid #CADC38;
}
.tbl_kouza_list_shizen .td01 { /* 項目 */
  width: 10%;
  min-width: 40px;
  font-weight: bold;
  border: solid 0px;
}
@media (max-width: 500px) {
	.tbl_kouza_list_shizen .td01{
		width: 100%;
		max-width: 1000px;
	}
}
.tbl_kouza_list_shizen .td02 { /* 日付 */
  width: 30%;
  max-width: 200px;
  border: 0px solid #292626; /* 外枠なし */
}
@media (max-width: 500px) {
	.tbl_kouza_list_shizen .td02{
		width: 100%;
		max-width: 1000px;
	}
}
.tbl_kouza_list_shizen .td03 { /* 内容 */
  width: 60%;
  border: 0px solid #292626; /* 外枠なし */
}
@media (max-width: 500px) {
	.tbl_kouza_list_shizen .td03{
		width: 100%;
		max-width: 1000px;
	}
}
.tbl_kouza_list_shizen .td03 .sub_title{/*内容の中にサブタイトル*/
	font-weight: bold;
}
/*申し込みボタン（01-10）
--------------------------------------------------------------------*/
#moushikomi_btm01, #moushikomi_btm02, #moushikomi_btm03, #moushikomi_btm04, #moushikomi_btm05, #moushikomi_btm06, #moushikomi_btm07, #moushikomi_btm08, #moushikomi_btm09, #moushikomi_btm10 {
  width: 100px;
  padding: 3px;
  background-color: #FFFFFF;
  border: solid 1px #E2373A;
  text-align: center;
  font-size: 12px;
  margin-bottom: 3px;
}
#moushikomi_btm01:hover, #moushikomi_btm02:hover, #moushikomi_btm03:hover, #moushikomi_btm04:hover, #moushikomi_btm05, #moushikomi_btm06, #moushikomi_btm07, #moushikomi_btm08, #moushikomi_btm09, #moushikomi_btm10 {
  cursor: pointer;
  background-color: #F1BBBC;
}
/*申し込み方法
--------------------------------------------------------------------*/

.moushikomi {
  padding: 20px 20px;
  margin-bottom: 50px;
  font-size: 14px;
  line-height: 20px;
  color: black;
  border: solid 1px #119004;
}
.moushikomi .txt01 {
  font-size: 16px;
  margin-bottom: 10px;
}
.moushikomi .txt02 {
  padding: 0 50px;
}
/* ---END コンテンツ表示非表示---------------------------------------*/



/* ディバイスサイズ設定
   （全体レイアウトcontainer、main_areaはlayout.cssに記載）
======================================================================================================= */
/* スマホ用 */
@media (max-width: 749px) {
  /* 左に文化の森とはdiv(left) 　　　右にサイドメニューdiv(right)
-------------------------------------------------------------------------*/
	/*全体枠*/

  /*講座名*/
  .kouza_bunruimei {
    font-size: 18px;
    line-height: 22px;
  }
  /*説明など*/
  .kouza_setsumei {
    font-size: 14px;
    line-height: 20px;
  }
  .kouza .tyuui {
    font-size: 14px;
    margin-bottom: 20px;
  }
  .red {
    color: red;
  }
  /* 項目展開 表示内容--------------------- */
  /* 枠*/
  .koumoku_waku, .koumoku_waku_normal, .koumoku_waku_20kinen, .koumoku_waku_20kinen_normal { /* 左から、クリック展開あり,クリック展開なし,クリック展開あり20周年記念, クリック展開なし20周年記念 */
    font-size: 14px;
  }
  /* テーブル表示内容（講座の詳細）---------- */
  /* tableの外枠なし、タイトルthと最後のtrのborder-bottom太く*/
  .tbl_kouza_list { /* テーブル名 */
    margin-top: 20px;
    font-size: 14px;
    vertical-align: middle;
  }
  /* 講座の説明------------------------ */
  .reed {
    font-size: 14px;
  }
  /* テーブル表示内容（自然観察 自然探検発見わくわくクラブの上のテーブル）------------- */
  .tbl_kouza_list_shizen { /* テーブル名 */
    font-size: 14px;
  }
  /* 申し込み方法=============== */
  .moushikomi .txt02 {
    padding: 0 0px;
  }
}
/* タブレット用 */
@media (min-width: 750px) and (max-width: 1023px) {}
/* デスクトップ用------------------------------- */
@media (min-width: 1024px) {}