@charset "utf-8";
/* CSS Document */
/* とりあえず読書会のページのみ */
/* 枠組み */
body {
  width: 1000px;
  margin: 0px auto;
  font-family: "ＭＳ ゴシック", "Osaka－等幅";
  padding: 0;
  background: url("../image/background/bg300_300flower_spring.jpg");
/*background: url("../image/background/bg150_150leaf_spring.jpg");*/
  /*background-color: rgba(255, 255, 255, 0.4);*/
  background-blend-mode: lighten;
  color: #3a3a3a;
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  box-sizing: border-box;
}
a:link, a:visited {
  text-decoration: none;
  border-width: 0px;
  color: #4499dd;
  font-weight: 600;
}
a:visited { /*訪問後*/
  color: #26587a;
  font-weight: 600;
}
#Wrapper {
  margin: 0 auto;
  padding: 0;
  border: #4682b4 groove 1px;
  background: #FFF;
  color: #191970;
  width: 1000px;
}
/* Wrapperの部品 */
#topicpath { /*最上部右側パン屑リスト*/
  height: 15px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  text-align: right;
  background: url(../image/background/bg_gray.png) repeat-x;
  padding: 5px;
  font-weight: bold;
  border-bottom: #b3b3b3 solid 1px;
}
#topicpath a:hover {
  background: #ffedff;
}
#header {
  width: 100%;
  max-width: 1000px;
  height: 100px;
  background: url("../image/header/bg_head.png") no-repeat;
  margin: 0;
  padding: 0;
  /**border-bottom: solid 1px #61b7e7;**/
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
  /**border-radius: 6px #32516b**/
}
#header h1 {
  padding: 50px 10px 0px 520px;
  font-size: 1.6rem;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
  font-weight: bold;
  color: #1b1464;
  text-shadow: 2px 2px 0 #FFF, -2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px -2px 0 #FFF, 0px 2px 0 #FFF, 0-2px 0 #FFF, -2px 0 0 #FFF, 2px 0 0 #FFF;
  font-style: italic;
  margin: 0;
}
#update {
  text-align: right;
  padding: 5px;
  font-style: italic;
  font-size: 0.8rem;
  font-family: Arial, Helvetica, sans-serif;
}
#footer { /*トップページのフッター部分指定*/
  background: #CCC;
  background: url(../image/background/bg_gray.png) bottom repeat-x;
  height: 38px;
  width: 100%;
  border-top: #000 1px;
  text-align: center;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
  font-family: "Times New Roman", Times, serif;
  clear: both;
}
#footer img {
  vertical-align: bottom;
  padding-top: 8px;
}
/*ここからは左右に分かれたCSS*/
/*左側*/
#BoardLeft {
  width: 70%;
  float: left;
  margin: 0;
  padding: 20px 0;
}
/* リード文用枠 */
#lead {
  width: 90%;
  height: auto;
  padding: 0;
  margin: 0px 10px 40px 30px;
  color: #142438;
  background: #ffffff;
  border: solid 2px #9eacad;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}
/*イベントアーカイブのページ*/
/*イベントアーカイブ用リード文は水色系に*/
div.eventarchives_lead {
  width: 95%;
  height: auto;
  padding: 20;
  margin: 20px;
  color: #343473;
  background: #f0f7ff;
  border: solid 1px #cad2e5;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
  border-radius: 9px;
}
div.eventarchives_lead ul li {
  padding: 4px 35px;
  list-style: none;
  background: url(../image/listmark/list_yotuba_pk.gif) no-repeat 10px;
  margin: 0;
}
div.eventarchives_lead p {
  font-size: 1.3rem;
  font-weight: normal;
line-height: 150%;
  padding: 20px;
  font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
}
div.eventarchives_lead p img {
  float: right;
  padding-right: 5px;
}
#lead p {
  font-size: 1.2rem;
  line-height: 1.5rem;
  font-weight: normal;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
  padding: 10px auto;
  margin: 15px;
}
#lead p img {
  vertical-align: bottom;
  padding: 10px;
  float: right;
}
.box {
  width: 95%;
  margin: 20px 30px 10px 20px;
}
.box > .boxTitle {
  background: #a2c2f6;
  width: 100%;
  height: 60px;
  margin: 0;
  border-radius: 20px 20px 0 0;
  border-bottom: #D8D8D8;
}
.boxTitle h4 {
  padding: 15px 140px 0px 20px;
  float: left;
  font-size: 1rem;
  line-height: 95%;
  margin: 0;
  color: #ff1493;
}
.boxTitle h5 {
  padding: 20px 5px 5px 5px;
  float: right;
  font-size: 0.7rem;
  margin: 0;
  font-style: italic;
  font-weight: normal;
}
.box > .boxPhrase { /*読書会案内用*/
  background: white;
  border: #D8D8D8 solid 1px;
  border-top: none;
  margin: 0;
  padding: 10px 20px;
}
.box > .boxPhrase p {
  font-size: 0.9rem;
  line-height: 1.2rem;
}
.box > .boxPhrase img {
  float: right;
  padding: 10px;
}
.box > .boxPhrase ul li { /*イベントアーカイブ用箇条書き*/
  list-style-image: url("../image/sidemenu/marker.gif");
  margin: 15px;
  font-size: 1.2rem;
  line-height: 1.4rem;
}
.font_small_90 {
  font-size: 0.9rem;
}
/*formのCSS*/
#form {
  margin: 10px auto;
  padding: 0;
  width: 100%;
  background: #ffffff;
  align-content: center;
}
#form table {
  border-collapse: collapse;
  font-size: 1.2rem;
}
#form table td, table th {
  border: 1px solid #ccc;
  padding: 5px;
}
#form table caption {
  color: #000080;
  font-size: 1.5rem;
  margin: 10px auto;
}
#form table th {
  width: 45%;
  font-weight: normal;
  background: #BAD3FF;
  text-align: left;
  vertical-align: middle;
}
#form p {
  text-align: center;
  padding: 20px;
  margin-bottom: 20px;
}
.small10 {
  font-size: 1rem;
}
.small90_bl {
  font-size: 0.9rem;
  color: #4169e1;
  padding: 10px;
}
.font_pink {
  color: #ff1493;
  font-weight: bold;
}
.font_blue{
  color: #20415e;
  font-weight: bold;
}
/*右側のカテゴリ用*/
#BoardRight {
  /*width: 28%;*/
  width: 25%;
  float: right;
  margin: 0 40px 0 700px;
  padding: 0;
  height: auto;
  position: absolute;
  /*overflow: scroll;*/
}
.module_categories, .module_archives {
  background: url(../image/sidemenu/list_top.gif) left top repeat-y;
  margin: 0;
  padding: 0 0 0 10px;
  width: 100%;
}
.module_content {
  background: url(../image/sidemenu/list_bottom.gif) left bottom no-repeat;
  /*border: 1px solid #E0E0E0;*/
  height: auto;
  margin: 0;
  padding: 0 0 0 10px;
  width: 100%;
}
h3.module_header, h3.module_header_archive {
  padding: 40px 30px 0 40px;
  font-size: 0.85rem;
}
h3.module_header_archive {
  color: #8b8bf8;
}
ul.module_list, ul.module_list_archive {
  margin: 0;
  padding: 10px;
  font-size: 0.65rem;
  list-style: none;
  width:95%;
  /*width:13vw;*/
}
/*カテゴリのリスト設定*/
ul.module_list li {
  /*border-bottom: 1px solid*/ /*#74CE70*/ /*#b4b4b4;*/
  /*padding: 4px 20px 4px 20px;*/
  padding: 10px 20px;
  /*margin: 10px 10px 5px 20px;*/
  background: url(../image/sidemenu/marker.gif) no-repeat;
  color: #0ef9cf;
  width: 11vw;
}
ul.module_list li.realpage { /*現在のページを示す*/
  background: url(../image/sidemenu/marker_pink.gif) no-repeat;
  color: #ff00ff;
}
ul.module_list li a {
  display: block;
  color: #333333;
  text-decoration: none;
}
ul.module_list li a:hover {
  color: #ff00ff;
  background: #fdddfd;
  display: block;
}
/*アーカイブス下の段のことリスト設定*/
ul.module_list_archive li {
  /*border-bottom: 1px solid #8b8bf8;*/
  padding: 10px 20px;
  /*margin: 10px 10px 5px 20px;*/
  display: block;
  background: url(../image/sidemenu/marker_blue.gif) no-repeat;
  width: 11vw;
}
ul.module_list_archive li.liblue {
  background: url(../image/sidemenu/marker_blue.gif) no-repeat;
}
ul.module_list_archive li.lipink { /*sidemenu　大きなイベント用*/
  background: url(../image/sidemenu/marker_pink.gif) no-repeat;
}
ul.module_list_archive li.lipink a { /*sidemenu　大きなイベント用*/
  background: url(../image/sidemenu/marker_pink.gif) no-repeat;
  color: #fc6aff;
}
ul.module_list_archive li.liblue a {
  color: #8b8bf8;
  text-decoration: none;
}
ul.module_list_archive a:hover {
  color: #8b8bf8;
  background: #ececfe;
}
/* イベント内容開始。note3画像を使っています */
div.note3 { /*★note3のノート全体を包むボックスです。note3画像は、縦横の長さも調節できます。*/
  margin: 5px;
  width: 670px;
  height: 770px /*770px,460px*/ ;
}
div.note3_top { /*note3のトップの部分に画像を配置するためのdivボックス*/
  width: 100%;
  height: 30px;
  margin: 0;
}
div.note3_top_left { /*note3のトップ左側画像を配置するボックス(40px*30px)*/
  margin: 0;
  background: url("../image/note3/note3_01.gif") no-repeat;
  float: left;
  width: 40px;
  height: 30px;
}
div.note3_top_center { /*note3のトップ真ん中画像を配置するボックス(20px*30px)*/
  margin: 0;
  background: url("../image/note3/note3_02.gif") repeat-x;
  width: 590px;
  height: 30px;
  float: left;
}
div.note3_top_right { /*note3のトップ右側画像を配置するボックス(40px*30px)*/
  margin: 0;
  background: url("../image/note3/note3_03.gif") no-repeat;
  float: right;
  width: 40px;
  height: 30px;
}
div.note3_middle { /*note3の真ん中middleの部分に画像を配置するためのdivボックスボックス高さはボックス全体から70px引く*/
  width: 100%;
  height: 700px;
  margin: 0;
  clear: both;
}
div.note3_middle_left { /*★note3の縦位置真ん中左側画像を配置するボックス高さはボックス全体から70px引く*/
  background: url("../image/note3/note3_04.gif") repeat-y;
  height: 700px; /*height:700px*/
  width: 40px;
  float: left;
  margin: 0;
}
div.note3_main { /*★note3の本文を配置するボックス(40px*20px)ボックス高さはボックス全体から70px引くheight:700px*/
  width: 590px;
  height: 700px; /*height:700px*/
  background: white;
  float: left;
}
table.tbl_note3 { /*note3の中の表*/
  width: 95%;
  border: solid 1px #cccccc;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.2rem;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  font-family: 'MS UI Gothic';
}
table.tbl_note3 caption {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 5px;
  /*color:#ff1493;*/
  text-align: center;
}
table.tbl_note3 tr td {
  border: dotted 1px #cccccc;
  padding: 8px;
}
table.tbl_note3 tr th {
  border: dotted 1px #cccccc;
  /* font-size: 0.8rem;*/
  font-weight: normal;
  border-collapse: collapse;
  background: #e2f2f5;
  padding: 5px;
  vertical-align: middle;
  width: 30%;
}
table.tbl_note3 tr th.thpink {
  background: #fee3ff;
}
table.tbl_note3 tr th.thorange {
  background: #FFCC66;
}
table.tbl_note3 tr th.thyellow {
  background: #F7F9C7;
}
div.note3_middle_right { /*★note3の縦位置真ん中右側画像を配置するボックス(40px*20px)*/
  background: url(../image/note3/note3_05.gif) repeat-y;
  height: 700px; /*height:700px*/
  width: 40px;
  float: right;
  margin: 0;
}
div.note3_bottom { /*note3の底bottomの部分に画像を配置するためのdivボックス*/
  width: 100%;
  height: 40px;
  clear: both;
}
div.note3_bottom_left { /*note3のボトム左側画像を配置するボックス(40px*40px)*/
  background: url(../image/note3/note3_06.gif) no-repeat;
  width: 40px;
  height: 40px;
  float: left;
  margin: 0;
}
div.note3_bottom_center { /*note3のボトム真ん中画像を配置するボックス(20px*40px)*/
  background: url(../image/note3/note3_07.gif) repeat-x;
  width: 590px;
  height: 40px;
  float: left;
  margin: 0;
}
div.note3_bottom_right { /*note3のボトム右側画像を配置するボックス(40px*20px)*/
  background: url(../image/note3/note3_08.gif) no-repeat;
  float: right;
  margin: 0;
  width: 40px;
  height: 40px;
}
/*開始読書会ア－カイブスの設定*/
/*読書会ア－カイブスリード文はグリーン系に*/
div.lead_reading {
  width: 95%;
  height: auto;
  padding: 0;
  margin: 10px 20px;
  color: #073820;
  background: #f2fef8;
  border-bottom: solid 4px #e6fff3;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
  border-radius: 9px;
}
div.lead_reading p {
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight: normal;
  padding: 20px 0 15px 15px;
  font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
}
div.lead_reading p img {
  float: right;
  padding: 12px;
}
.box _reading {
  width: 95%;
  margin: 20px 30px 10px 20px;
}
.box_readingTitle {
  background: #d7ffea;
  width: 100%;
  height: 60px;
  margin: 0;
  border-radius: 20px 20px 0 0;
  border-bottom: #D8D8D8;
}
.box_readingTitle h4 {
  padding: 15px 15px 5px 20px;
  float: left;
  font-size: 1.2rem;
  line-height: 1.4rem;
  margin: 0;
  color: #04B252;
}
.box_readingTitle h5 {
  padding: 0px 5px 5px 5px;
  float: right;
  font-size: 0.7rem;
  margin: 0;
  font-style: italic;
  font-weight: normal;
  color: #073820;
}
.box_readingPhrase { /*読書会案内用*/
  background: #ff5fcf8;
  border: #D8D8D8 solid 1px;
  border-top: none;
  margin: 0;
  padding: 10px 20px;
  color: #073820;
}
.box_readingPhrase p {
  font-size: 1.2rem;
  line-height: 1.6rem;
}
.box_readingPhrase img {
  float: right;
  padding: 10px;
}
.box_readingPhrase ul li { /*イベントアーカイブ用箇条書き*/
  list-style-image: url("../image/sidemenu/marker.gif");
  margin: 15px;
  font-size: 1.2rem;
  line-height: 1.2rem;
}
.font_orange {
  color: #FF6633;
  font-weight: 400;
}
/*　簡易版レスポンシブ用CSS*/
@media (max-width:810px) {
  .module_categories, .module_archives {
    width: 236px;
  }
  .module_categories, .module_archives {
    margin-left: 20px;
  }
}
@media (min-width:920px) {
  .module_categories, .module_archives {
    width: 236px;
  }
}
/*@media screen and (max-width:572px) {
  #Wrapper {
    margin: 0;
    padding: 0;
    border: #999 groove 1px;
    background: #FFF;
    width: 100%;
    max-width:572px;
  }
  #header {
    width: 100%;
  }
  #header h1 {
  padding: 50px 10px 0px 470px;
    font-size: 1.8rem;}
  #BoardLeft {
    width:65%;
  }
  #BoardRight {
    width:35%;
  }
  #form table {
    width: 70%;
    margin: 10px;
    font-size:1.0rem;
  }
  #form {
    margin: 0;
    padding: 0;
  }
}*/