@charset "UTF-8";
/* CSS Document */
/*  /////////////////////////////////////////////////////////////// 
学校活用アクセシビリティ対応
       共通　item　トップページ　その他のページ
//////////////////////////////////////////////////////////////// */
/*ボタン基本色　#92BB8F;*/
/*共通-----------------------------*/
img {
  vertical-align: bottom; /*下の隙間なくす*/
}
/*END 共通-------------------------*/
/*main----------------------------*/
/*基本設定*/
#introduce {
  font-size: 0.9em;
  line-height: 1.2em;
  color: #252424;
}

/* ==================================================
ヒーロー
===================================================== */
#introduce .hero_img {
  margin-top: 6em;
  text-align: center;
}
#introduce .hero_img .top_img {
  width: 100%;
  max-width: 500px;
}
/* ====================================================

全セクション共通

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


/* ================================================
案内
================================================ */
.annai_section { /*共通設定*/
	margin-bottom: 100px;
	border: solid 0px;
}
/*文章
-------------------------------------------------*/
.annai_section .annai_flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  width: 100%;
  margin: 0px auto;
}
/*カラム*/
.annai_section .annai_flex .colum {
  width: 100%;
  max-width: 380px;
  padding: 0px 20px 10px 20px;
	box-sizing: border-box;
  text-justify: inter-ideograph; /* IEで必要 */
  text-justify: inter-character; /* Firefoxで必要 */
  text-align: justify;
 
}
/*タイトル*/
.annai_section .annai_flex .colum p {
  text-align: center;
  font-size: 16px;
  color: #20A537;
  /*font-weight: bold;*/
  background-color: #ffffff;
}
.annai_section .annai_flex .colum p span {
  display: inline-block;
}
/* ===============================================

　 メニュー

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

/*Flex  メニュー*/
.annai_section .menu_flex2{
  	display:flex;
  	flex-wrap: wrap;/*複数行に上から下へ*/
	justify-content: space-between;
	align-items: flex-start; /*アイテムを上揃え*/
	margin-top: 50px;
	margin-bottom: 0px;
	width: 100%;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	border: solid 0px;
}




/*===========================================
ボタン　矢印付き
font-size: 0.8em;

	             <!-- リンクボタン--- -->
            <a href="pdf1/01.pdf" target="_blank">
                <div class="btn_flex">
                  <div>考え方と目指すこと（PDF）</div>
                  <div class="next_arrow"></div>
                </div>
                </a> 

============================================ */
.annai_section .menu_flex2 a{
	width: 100%;
	max-width: 380px;
	margin-bottom: 30px;
		text-decoration: none;
	color: #000000;
}
/*ボタン仕様
------------------------------------------------*/


.annai_section .btn_flex .number_flex{
	display: flex;
	align-items: center;
}
.annai_section .btn_flex .number_flex .number{
	font-size: 1.6em;
}
.annai_section .btn_flex{
	   display: flex;
   justify-content: space-between;/*両端揃え*/
    align-items: center;
	width: 100%;
	/*max-width: 360px;*/
  /*text-align: center;*/
  padding: 16px 30px;
	box-sizing: border-box;
  /*cursor: pointer;*/
  font-size: 1.0em;
  border-radius: 4px;
	border: solid 1px #92BB8F;
  transition: 0.5s; /*hover処理の時間*/
}
 .annai_section .btn_flex:hover{
	background-color:#D8F5D3;
	color: #000000;
}
/*ボタンの右矢印*/
 .annai_section .next_arrow {
  display: block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  border-top: solid 1px;
  border-right: solid 1px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*ボタンの左矢印*/
.annai_section .back_arrow {
  display: block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-top: solid 1px;
  border-right: solid 1px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}



.annai_section .waku{
	font-size: 1em;
	line-height: 1.2em;
	
	width: 100%;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	border-left: solid 6px #92BB8F;
	padding-left: 10px;
	box-sizing: border-box;
	
}




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


活用の様子katsuyou_section

================================================== */
/*見出し
-------------------------------------------------*/
.bunri_midashi {
  position: relative;
  text-align: center;
  width: 100%;
  max-width: 900px;
  margin: 80px auto 50px auto;
  font-size: 22px;
}
.bunri_midashi span {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 0 2.5em;
  padding: 0 1em;
	box-sizing: border-box;
  background-color: #fff;
  text-align: left;
}
.bunri_midashi::before {
  position: absolute;
  top: 50%;
  z-index: 1;
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
}




/*イラスト
--------------------------------------------------*/
.katsuyou_section .img_area{
	text-align: center;
}
.katsuyou_section .img_area img{
	width: 100%;
	max-width: 300px;
	margin-bottom: 30px;
}


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

年（月）表示年切り替えボタン（円形）

===================================== */
.year_change_flex{
	display:flex;
	align-items: center;
	margin-bottom: 10px;
	border: solid 0px;
}

.year_change_flex .year_change img {/*矢印ボタン*/
	width: 20px;
	margin-top: 0px;/*文字年月日との上下調整*/
	border: solid 0px;
}
.year_change_flex .year_change .yyyy_mm {
  font-size: 16px;
	line-height: 18px;
	margin:0px 10px 0 10px;/*矢印との間隔*/
  border: solid 0px;
}

/*テーブル
--------------------------------------------------*/
/*自動付番
------------------------------------------------------*/
table.tbl_katsuyou_list {
  counter-reset: bangou; /*bangouは変数名　自動付番 No.*/
}
table.tbl_katsuyou_list tbody .no:before { /*td class="no"が出る都度*/
  counter-increment: bangou 1; /*1づつ　追加*/
  content: counter(bangou); /*カウンタの値は変数名（bangou）*/
}
/*テーブルレーアウト
tableの外枠なし、タイトルthと最後のtrのborder-bottom太く
----------------------------------------------*/
table.tbl_katsuyou_list {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  vertical-align: middle;
  margin-bottom: 50px;
  border-collapse: collapse; /* 囲み線を1本で重なりをなくす table,th,tdに指定 */
  border: 0px solid #292626;
}
table.tbl_katsuyou_list th {
  background: #EAF49C;
  padding-top: 5px;
  padding-bottom: 5px;
  box-sizing: border-box;
  letter-spacing: 0px;
  border-collapse: collapse;
  border-top: 1px solid #CADC38;
  border-bottom: 1px solid #CADC38;
}
table.tbl_katsuyou_list td { /*スマホ無効*/
  height: 40px; /*1行でも同じ高さにする*/
  padding-top: 10px; /*間隔　必須 */
  padding-bottom: 10px;
  box-sizing: border-box;
  border: solid 0px;
}
table.tbl_katsuyou_list tr {
  border-collapse: collapse;
  border-top: 1px solid #CADC38;
  border-bottom: 1px solid #CADC38;
}
table.tbl_katsuyou_list tr:last-child {
  border-bottom: 4px solid #CADC38; /* 最後のtrのborder-bottom太く*/
}
/*各項目幅
------------------------------------------------------*/
table.tbl_katsuyou_list .no { /* No. */
  width: 6%;
  text-align: center;
}
table.tbl_katsuyou_list .th01 { /*タイトル */
  width: 60%;
  text-align: left;
  border: solid 0px;
}
table.tbl_katsuyou_list .td01 {
  padding-right: 20px;
  box-sizing: border-box;
}

table.tbl_katsuyou_list .th02 { /* 詳細*/
  width: 14%;
  text-align: center;
  border: solid 0px;
}
table.tbl_katsuyou_list .td02{
	text-align: center;
}

table.tbl_katsuyou_list .td02 a { 

  text-decoration: none;
  color: #454343; /*他の色と同じ*/
}
/*画像全体をdivで改行し余白*/
table.tbl_katsuyou_list .td02 div {
  padding-top: 5px;
}
/*pdfボタン　 画像ボタン*/
table.tbl_katsuyou_list .pdf_btn { /*ボタン仕様*/
  padding: 1px 4px;
  font-size: 12px;
  white-space: nowrap;
  border: solid 1px #CADC38;
}
table.tbl_katsuyou_list .pdf_btn:hover { /*オンマウス仕様*/
  background-color: #CADC38;
}

/* ディバイスサイズ設定
======================================================================================================= */
@media (max-width: 749px) {
  /*-----------------------------------
  イラスト
-----------------------------------*/
  #introduce .hero_img {
    margin-top: 1em;
  }

  /*-----------------------------------
  案内
-----------------------------------*/
  .annai_flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    margin: 0px auto;
  }
  /*カラム*/
.annai_section .annai_flex .colum{
	  width: 100%;
	  max-width: 900px;
    /*max-width: initial; *//* 初期状態にリセット */
    padding: 20px 0px;
  }
/*タイトル*/
.annai_section .annai_flex .colum p {
  text-align:left;
}
/*Flex  メニューボタン*/
.annai_section .menu_flex2{
	flex-direction: column; /*縦並び*/
	margin-top: 30px;
}


/*リンクボタン並列（スマホ縦列）*/
#introduce .menu_btn,.dummy_btn{
	display: inline-block;
	width: 100%;
	max-width: 800px;/*横1列分*/
	margin:10px 0%;
	border: solid 0px;
}
	/*ダミーボタン　なくす*/
#introduce .dummy_btn{
	display: none;
}

  /*-----------------------------------
  分類　タイトル
-----------------------------------*/
  .bunri_midashi {
    margin: 0px auto 30px auto;
    font-size: 14px;
  }
	
  /*-----------------------------------
  テーブル　活用プログラム利用状況
-----------------------------------*/
  table.tbl_katsuyou_list {
    font-size: 12px;
    line-height: 14px;
  }
  table.tbl_katsuyou_list .no { /* No. */
    display: none;
  }
  table.tbl_katsuyou_list th { /* テーブル項目を非表示 */
    display: none;
  }
  table.tbl_katsuyou_list td {
    width: 100%;
    height: auto; /*高さ指定解除*/
    padding: 6px 0px; /*間隔　必須 */
    display: block;
  }
  /*タイトル上にスペース入れる*/
  table.tbl_katsuyou_list .td01 {
    padding-top: 16px;
    padding-bottom: 0px;
  }
  /*資料の下にスペースを入れる*/
  table.tbl_katsuyou_list .td03 {
    padding-bottom: 16px;
  }
  /* tdに設定したaria-label 資料項目を表示する */
  table.tbl_katsuyou_list .td01::before {
    content: attr(aria-label);
    display: inline-block;
    color: #525351;
    font-size: 12px;
    margin-right: 10px;
  }
  /*資料項目名*/
  table.tbl_katsuyou_list .td01 {
    font-size: 14px;
    line-height: 16px;
    /*font-weight: bold;*/
    color: #127E05;
  }
  /*-----------------------------------
  学習風景を紹介
-----------------------------------*/
  .gakusyuu_huukei_flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: center;
    width: 100%;
    max-width: 900px;
    margin: 0px auto;
    border: solid 0px;
  }
}
/* タブレット用 ***************** */
@media (min-width: 750px) and (max-width: 1023px) {}
/* Desktop ***************** */
@media (min-width: 1024px) {}