/*
Theme Name:     Synapse Child Theme
Theme URI:      http: //www.simplethemes.com/
Description:    Child theme for the Synapse Theme
Author:         Simple Themes
Author URI:     http: //www.simplethemes.com/wordpress-themes/theme/synapse
Template:       synapse
Version: 3.1.1
*/

/* +++++++++++++++++++++++++++++   目次 +++++++++++++++++++++ Last updated Oct 24,2015

0) 初期値の変更
  html, body, ul, a, blockquotes, table, クラス(nav-below, .entry-utility, .bolder,）グローバルナビ, ティーザー, header-extra, サイドバー, フッター, 投稿ページの投稿日, ショートコード(column, latestposts, post-written, st-callout, accodionはQandAページ)

1) メディアクエリ（まとめて。これら以外はそれぞれに追記）

2) 基本コンテンツ
  d_section,responsive 12 column grid,info-box, 横並びのリスト(yokomenu2), 位置揃え, clearfix, フロート(img_L, alignleftなど), ボックスサイズ(w-xx), two-columns, dl.q-and-a囲み罫
  2-1) heading & title (h4,5,6とクラス, 見出しの背景色 bg_green, bg_red)
  2-2) yahoo pure (buttons only), Schema UI button
  2-3) フォント色(google-xxx)

3) ページコンテンツ
  3-1) 校舎案内 (.kosha)
  3-2) 授業内容と宿題 (.t_homework)
  3-3) 授業曜日・費用一覧 (.t_cal, .t_price)
  3-4) ごあいさつ (.greeting)
  3-5) 中学部 (ol.chugaku, table.bottomline)
  3-6) 小学部 (.w20,.w80は(ボックスサイズ)に, p.heading2 (赤チェックボックス文字黒), p.heading3(緑チェックボックス文字オレンジ) 
  3-7) 資料請求・お問い合わせ
  3-8) カレンダー
  3-9) よくあるご質問
  3-10) 講習ページ詰め合わせ // 全国統一テスト
  3-11) バス停

4) テーブル
  4-1) 速報ページ用の表（th が濃紺）
  4-2) イベント日程（見出しピンク）
  4-3) サイドバーがあるページの表
  4-4) 明るい青のグラデテーブル（講習用）
  4-5) 茶と黄色のアカデミーっぽい表（講習用）
  4-6) 要項用の表 大活躍 summary, zentou（全統用を追加）

その他
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/*
Customization for synapse-styoel.css
==================================================

This file is the main stylesheet that controls the overall structure and resets
of the theme. It is intended for advanced customization only.

For basic customization, select a style preset from the theme options panel and
apply your customizations to that preset.


Additional Stylesheets
==================================================

This theme also includes the following stylesheets:

skeleton.css
- the brains behind the column and responsive grids

layout.css
- theme specific responsive tweaks

formalize.css
- better cross browser form elements

style{x}.css
- user preset if loaded from theme options


Table of Contents
==================================================

(Hint: copy + ctrl/cmd +F an @group below to jump to a section)

  @group Global Reset
  @group Structural Customization
  @group Header
  @group Navigation Bar
  @group Footer
  @group Breadcrumbs
  @group Typography
  @group Tables
  @group Widgets
  @group WP Blog Styles
  @group Form Buttons
  @group Comments
  @group WP Gallery
  @group Flickr Widget
  @group Twitter Widget
  @group Utility Styles
  @group Bonus Styles
*/


/*        0 初期値の変更 
------------------------------------------------------------------------------------------- */

html {
    font-size: 100%;
}

body {
    font-size: 1rem !important;
    color:#333333 !important;
      -webkit-font-smoothing: antialiased;
    font-family:"Hiragino Kaku Gothic ProN", Helvetica, YuGothic, Meiryo, sans-serif;
    line-height: 1.4;
}

@media only screen and (max-width:1024px) {
    body, html {
        font-size: .857rem !important;
          -webkit-font-smoothing: antialiased;
    }
    .menu ul li a {
        font-size: 1rem;    
    }
}

#header {
  background: #f5f5f5 !important;
  margin-bottom: 0 !important;
}


.entry-title {
  border-bottom: 3px solid #445e7e;
  }
  
ul {
  list-style-type:none;
}

li {
  line-height: 1.4;
}

a {
    text-decoration:none;
}

a:hover img {
opacity: 0.7;
}

/*  Blockquotes  */
blockquote, blockquote p {
   font-family: sans-serif;
}

@media only screen and (max-width: 760px) {
  blockquote p {
    font-size: .857rem;
    font-style: normal;
  }
}

/* table */
table td {
  background-color: #fafafa;
  border: 1px solid #CCC;
}

/* ----------------------- header ----------------------------- */
/* グローバルナビ */

#menu ul li {
  padding: 0 5px !important;
  margin: 0 5px !important;
}
@media only screen and (max-width:768px) {
  #menu ul li {
    padding-right: 0;
    padding-left: 0;
  }
}

/* #menu ul li.active a {
background: #15344f !important;
} */

/* teaser widget */
#teaser {
    background: #2c4860 !important;
    color: #ffffff !important;
}

/* header extra */

#header .header_extras {
    width:390px !important;
    line-height:1.7;
    text-align: right;
}
/*@media only screen and (max-width: 767px) {
    #wrap #header .header_extras {
        width: 100px !important;
    }
}*/

/* style1.css をコメントアウト */
#menu .columns, #menu.wide {
  background: #f5f5f5 !important;
}

@media only screen and (max-width:767px) {
  #wrap #menu li a{
    border-bottom: 1px solid #c4c4c4 !important;
  }
  #wrap #menu ul.sub-menu li a {
    color: #333 !important;
    margin-bottom: 6px !important;
  }
}

/* ----------------------- sidebar ----------------------------- */
#sidebar a,
#sidebar a:link,
#sidebar a:visited,
#sidebar a:active {
    color:#3c5664 !important;
}
#sidebar a:hover {
    color: #e8a302 !important;
}

li.page_item a,
li.menu-item a {
  font-weight:400;
}

h3.widget-title {
  background-color: #0d5875;
  color: #fff;
  text-align: center;
  margin-top: .5em;
  padding-top: 5px;
  padding-bottom: 5px;
}
/* スマホ用サイドバー*/
@media only screen and (max-width:767px) {
  #wrap #sidebar .widget-container{
    margin-left: 0 !important;
  }
  #sidebar li.page_item, #sidebar li.menu-item {
    margin-bottom: 6px;
  }
  #sidebar li.page_item a,
  #sidebar li.menu-item a {
    font-size: 1rem;
    line-height: 1.6;
  }
}


/* ----------------------- footer ----------------------------- */
#footer a,
#footer a:link,
#footer a:visited,
#footer a:active {
    color:#3c5664 !important;
}
#footer a:hover {
    color: #e8a302 !important;
}

#footer h3 {
    font-size: 1.2rem;
}

/* フッター最下部スマホ用の行間 */
ul#menu-branch li {
  margin-bottom: 12px;
}

div.nav-below,
div.nav-prev,
div.nav-next {
    display:none;
}

div.entry-utility {
    display:none;
}

.bolder {
  letter-spacing:normal !important;
}

/*---------------------------------------投稿ページの投稿日削除 ---- */
div.post > div.postmeta > span.post_written,
div.post > div.postmeta > span.post_categories {
  display: none;
}


/*  -------------------- simple shortcode -------------------------------------------- */

/* ショートコード・コラム */
.one_half, .one_third, .two_thirds, .three_fourth, .three_fourths, .one_fourth, .one_fifth, .two_fifth, .two_fifths, .three_fifth, .three_fifths, .four_fifth, .four_fifths, .one_sixth, .five_sixth, .five_sixths {
margin-bottom: 0 !important;
}

/* トップページ投稿一覧タイトル */
div.latestposts div.latest-item {
  padding-bottom:0 !important;
  margin-bottom:0;
  line-height: 1.4;
}

.tabs-toppage {
  background: #f7f7f7 !important;
}

.tabs-toppage ul.tabs li {
  text-align: center;
  margin-bottom: 2em;
  width: 50%;
}

.tabs-toppage ul.tabs li a {
  background:#dedede !important;
  border: 1px solid #9b9b9b;
}

.tabs-toppage ul.tabs li a.active {
  background: #f7f7f7 !important;
}

#footer div.latestposts div.latest-item {
  margin-bottom: 12px;
}

.latestposts .latest-title a,
.post_written {
  font-weight:400 !important;
  font-size: 1rem;
}

.post_written {
  margin-left:2em;
}

/* ul.tabs-content {
  border-bottom: 1px solid #5a677a;
}*/

/* st-callout ショートコード */
.st-callout a {
  color: #2F93E0;
  text-decoration: none !important;
}

.st-callout a:hover{
  color: #e8a302;
}

.st-callout h4.st-callout-title.center {/* なぜかインデントされているので解除 */
    text-indent: 0 !important;
    padding-top: 5px;
    padding-bottom:5px;
}

.st-callout.hastitle .inside {
  padding: 10px;
}

.st-callout.hastitle p {
  padding:5px;
  font-size: .857rem;
  line-height: 1.1;
}

/*.st-callout .inside p {
    margin-bottom: 0 !important;
  }*/

.st-callout.gray {
    background-color: #f7f7f7;/* ray97 */
}

div.st-callout {
    margin:0 auto !important;
}

.inside .tabs-content {
  margin-top: 2em !important;
}

.st-callout .inside {
  padding-bottom: 0;
}


/*--------------------------------------------------------------------------------------------
          1  メディアクエリ (media query)  screen size smaller than 760px
---------------------------------------------------------------------------------------------- */
@media only screen and (max-width:1024px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
}

@media only screen and (min-width:768px) {
  div.d_section p {
    margin-right: 10px;
    margin-left: 10px;
  }
/* ＰＣでハーフサイズの料金表 */
  .width45per {
      width: 45% !important;
  }
}

/* 以下ずっと続く */
@media only screen and (max-width:767px) {
/* フッターのモバイル表示 */
  #footer {
    font-size: 1rem !important;
  }

  .latestposts .latest-title a {
    font-size: 1rem !important;
  }

/* コンテンツの余白 */
  #content, #sidebar {
    padding-top: 0;
  }

/* トップページのタブタイトル幅 */
  ul.tabs li {
    width:100%;
  }
  
/* 宿題の表を最大に */
  table.t_homework-responsive {
    width: 100% !important;
  }

/* バス停 */
  ul.bus-stop li {
    font-size: 1.2rem;
  }

/* ごあいさつ */
  div.greeting {
    margin: 0;
  }

  div.greeting p {
    margin-right: 3%;
    margin-left: 3%;
  }

  div.greeting img {
    display: block;
    margin: 10px auto;
  }

/* 小学生コース */
  div.w20,
  div.w50,
  div.w80 {
    width:100% !important;
    overflow: hidden;
    float:none;
    margin: 0 !important;
  }

/* トップページ Strong Pointsの画像 */
  .col-140 img {
    float: left;
    margin-right: 1em;
  }

/* モバイルでのnote上余白削除 */
  div.note{
    margin-top: 0;
  }
/* 授業曜日・費用一覧の表 */
  table.t_cal-responsive, table.t_cal-responsive caption, table.t_cal-responsive th, table.t_cal-responsive td, table.t_cal-responsive tr, table.t_cal-responsive tr th, table.t_cal-responsive tr td, table.t_cal-responsive thead, table.t_cal-responsive thead th, table.t_cal-responsive thead td, table.t_cal-responsive thead tr, table.t_cal-responsive thead tr th, table.t_cal-responsive thead tr td, table.t_cal-responsive tbody, table.t_cal-responsive tfoot, table.t_cal-responsive tfoot th, table.t_cal-responsive tfoot td, table.t_cal-responsive tfoot tr, table.t_cal-responsive tfoot tr th, table.t_cal-responsive tfoot tr td, table.t_price-responsive, table.t_price-responsive caption, table.t_price-responsive th, table.t_price-responsive td, table.t_price-responsive tr, table.t_price-responsive tr th, table.t_price-responsive tr td, table.t_price-responsive thead, table.t_price-responsive thead th, table.t_price-responsive thead td, table.t_price-responsive thead tr, table.t_price-responsive thead tr th, table.t_price-responsive thead tr td, table.t_price-responsive tbody, table.t_price-responsive tfoot, table.t_price-responsive tfoot th, table.t_price-responsive tfoot td, table.t_price-responsive tfoot tr, table.t_price-responsive tfoot tr th, table.t_price-responsive tfoot tr td {
    display: block;
  }

  table.t_cal-responsive caption,
  table.t_price-responsive caption {
    font-size: 1.286rem;
  }

  table.t_cal-responsive > thead,
  table.t_price-responsive > thead {
    float: left;
    box-sizing: border-box;
    white-space: nowrap;
  }
  table.t_cal-responsive > thead {
    width: 30%;
  }
  table.t_price-responsive > thead {
    width: 7em;
  }
  
  table.t_cal-responsive > thead > th,
  table.t_price-responsive > thead > th {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }

  table.t_cal-responsive > tbody,
  table.t_price-responsive > tbody {
    white-space: nowrap;
    overflow-x: auto;
    box-sizing: border-box;
  }
  table.t_cal-responsive > tbody {
    width: 70%;
  }
  table.t_price-responsive > tbody {
    width: auto;
  }

  table.t_cal-responsive > tbody > tr,
  table.t_price-responsive > tbody > tr {
    display: inline-block;
    vertical-align: top;
    width: 100%;
  }

  table.t_price-responsive thead th {
    border-bottom: 1px solid #4169e1 !important;
  }

  table.t_cal-responsive thead th {
    border-bottom: 1px solid #f4a460 !important;
  }

/* 全統ページ */
  .zentou-box {
    width: 100%;
    margin-left: 0;
  }
  .zentou {
    border-spacing: 0 !important;
  }

/* 全統申込フローチャート */
  .z-flow {
    width:50%;
    margin-bottom: 12px;
  }

/* スライダー スマホの矢印非表示 */
  .flex-direction-nav .flex-prev,
  .flex-direction-nav .flex-next {
    display: none;
  }
}
/*                                                                   end of media query
---------------------------------------------------------------------------------------- */
/*        2  基本コンテンツ
/* -------------------------------------------------------------------------------------- */

/* d_section 囲み罫のボックス */
.d_section,
.d_section-black,
.d_section-blue,
.d_section-orange,
.d_section-yellow,
.d_section-green {
  margin: 20px 0;
  padding-bottom: 15px; 
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  overflow: hidden;
}

@media only screen and (min-width:768px) {
  .d_section {
  border: 1px solid #d3d3d3;
  }
}

/* 新オリジナル */
.d_section h2 {
  color:#333333;
  background: #ffffff;
  background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 80%,#ededed 100%);
  border-bottom: 2px solid #3f9ce5;
}

@media only screen and (min-width:768px) {
.d_section-orange {
  border: 1px solid #ff2f00;
  }
}

.d_section-orange h2 {
  color:#fff;
  background-image: linear-gradient(to bottom, #FF894A 0%, #FF2F00 94%);
  border-bottom: 1px solid #ff2f00;
}

@media only screen and (min-width:768px) {
  .d_section-black {
    border: 1px solid #565656;
  }
}

.d_section-black h2 {
  color:#fff;
  text-shadow: 0.5px 0 #e6e6e6;
  background: #565656;
  background: linear-gradient(to bottom,  #565656 0%,#000000 100%);
}

@media only screen and (min-width:768px) {
  .d_section-green {
    border: 1px solid #9fe558;
  }
}

.d_section-green h2 {
  color:#000000;
  background: #9fe558;
  background: linear-gradient(to bottom,  #9fe558 0%,#67c200 100%);
}

@media only screen and (min-width:768px) {
  .d_section-yellow {
    border: 1px solid #ffff00;
  }
}

.d_section-yellow h2 {
  color:#000000;
  background: #ffff88;
  background: linear-gradient(to bottom,  #ffff88 0%,#ffff28 100%);
}

@media only screen and (min-width:768px) {
  .d_section-blue {
    border: 1px solid #499bea;
  }
}

.d_section-blue h2 {
  color:#ffffff;
  background: #499bea;
  background: linear-gradient(to bottom,  #499bea 0%,#1478e2 100%);
}

.d_section h2,
.d_section-black h2,
.d_section-blue h2,
.d_section-orange h2,
.d_section-yellow h2,
.d_section-green h2 {
  font-weight: 400;
  margin: 0 0 10px 0;
  padding: 5px 30px 5px 50px;
  }
@media only screen and (max-width:767px) {
    .d_section h2,
    .d_section-black h2,
    .d_section-blue h2,
    .d_section-orange h2,
    .d_section-yellow h2,
    .d_section-green h2 {
        font-size: 1.1rem;
        padding:5px 5px 5px 1rem;
    }
}

.d_section h3,
.d_section-orange h3,
.d_section-black h3,
.d_section-green h3,
.d_section-yellow h3,
.d_section-blue h3 {
  margin: 20px;
  padding: 0.1em 0.5em;
  background: #eee;
  border-bottom: 4px solid #122dae;
  color: #122dae;
}
@media only screen and (max-width:760px) {
  div.d_section h3 {
    text-indent: 0;
    margin-bottom: 1em;
  }
}

@media only screen and (min-width:768px) {
  .d_section > p,
  .d_section-orange > p,
  .d_section-black > p,
  .d_section-green > p,
  .d_section-yellow > p,
  .d_section-blue > p {
    margin: 10px 1em;
  }

  .d_section > div,
  .d_section-orange > div,
  .d_section-black > div,
  .d_section-green > div,
  .d_section-yellow > div,
  .d_section-blue > div {
    margin: 0 .7543%;
  }
 
  .d_section > img,
  .d_section-orange > img,
  .d_section-black > img,
  .d_section-green > img,
  .d_section-yellow > img,
  .d_section-blue > img {
    margin: 0 .7543%;
  }
}
/* d_section 中の画像サイズ */
@media only screen and (max-width:767px) {
  div.d_section img {
    display: block;
    width: 80%;
    margin: 0 auto;
    float:none;
  }
}

.d_section ul {
  list-style-type: none;
  margin-right: 30px;
}

.d_section ul li {
  border-bottom: 1px dotted #ddd;
  padding: 8px 0;
}

.d_section li a {
  padding: 10px 5px 10px 2em;
  text-decoration: none;
  background-image: none;
}

.d_section ul li a:before {
    position: absolute;
    left: 3em;
    font-family: "FontAwesome";
    content: "\f0a4";
}

/* end of d_section */

/*          =Responsive 12 Column Grid
---------------------------------------------------------------------------------------- */
/* ie10以下は切り捨て */
.flex {
  display:  -webkit-flex;
  display: flex;
}

.grid {
  float: left;
  margin-bottom: 2.127659574468%;
  padding-top: 0;
}

.grid-right {
  float: right;
  margin-bottom: 2.127659574468%;
  padding-top: 0;
}

.col-60,
.col-140,
.col-220,
.col-300,
.col-380,
.col-460,
.col-540,
.col-620,
.col-700,
.col-780,
.col-860 {
  display: inline;
  margin-right: 2.127659574468%;
}

.col-60 {
  width: 6.382978723404%;
}

.col-140 {
  width: 14.893617021277%;
}

.col-220 {
  width: 23.404255319149%;
}

.col-300 {
  width: 31.914893617021%;
}

.col-380 {
  width: 40.425531914894%;
}

.col-460 {
  width: 48.936170212766%;
}

.col-540 {
  width: 57.446808510638%;
}

.col-620 {
  width: 65.957446808511%;
}

.col-700 {
  width: 74.468085106383%;
}

.col-780 {
  width: 82.978723404255%;
}

.col-860 {
  width: 91.489361702128%;
}

.col-940 {
  width: 100%;
}

.fit {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media screen and (max-width: 650px) {
  .grid,
  .grid-right {
    float: none;
  }
}

.d_section > grid > p {
  margin-left: 1em;
  margin-right: 1em;
}

div.col-140 p {
    font-size: 12px !important;
    font-size: .857rem !important;
    line-height: 1.2;
    text-align: left;
}

/*         New =Responsive 12 Column Grid
---------------------------------------------------------------------------------------- */
/*  responsive grid 組み合わせ 最後には fit を追加
*   ２コラム [92+8] [85+15] [75+25] [67+33] [60+40] [50+50]
*   ２コラム [40+60] [33+67] [25+75] [15+85] [8+92] 
*   ３コラム[33+33+33]
*   ４コラム[25+25+25+25]
*   ５コラム[15+15+15+15+15+15] */

/*.grid {
	float: left;
	margin-bottom: 2.127659574468%;
	padding-top: 0;
}

.grid-right {
	float: right;
	margin-bottom: 2.127659574468%;
	padding-top: 0;
}*/

.col-8,
.col-15,
.col-25,
.col-33,
.col-40,
.col-50,
.col-60,
.col-67,
.col-75,
.col-85,
.col-92 {
	display: inline;
	margin-right: 2.127659574468%;
}

.col-8 {
	width: 6.382978723404%;
}

.col-15 {
	width: 14.893617021277%;
}

.col-25 {
	width: 23.404255319149%;
}

.col-33 {
	width: 31.914893617021%;
}

.col-40 {
	width: 40.425531914894%;
}

.col-50 {
	width: 48.936170212766%;
}

.col-60 {
	width: 57.446808510638%;
}

.col-67 {
	width: 65.957446808511%;
}

.col-75 {
	width: 74.468085106383%;
}

.col-85 {
	width: 82.978723404255%;
}

.col-92 {
	width: 91.489361702128%;
}

.col-100 {
	width: 100%;
        display: -webkit-flex;
        display: flex;
}
@media screen and (max-width: 760px) {
  .main {
    flex-direction: column;
  }
}
/*.fit {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

@media screen and (max-width: 650px) {
	.grid,
				  .grid-right {
		float: none;
	}
}

.d_section > grid > p {
	margin-left: 1em;
	margin-right: 1em;
}

div.col-15 p {
	font-size: 12px !important;
	font-size: .857rem !important;
	line-height: 1.2;
	text-align: left;
}*/
/* --------------- end of responsive grid --------------------*/

/* ====  Info Boxes
---------------------------------------------------------------------------------------- */
.info-box {
  border-radius: 4px;
  display: block;
  margin: 20px 0;
  padding: 15px;
  text-align: left;
}

.alert {
  background-color: #faebeb;
  border: 1px solid #dc7070;
  color: #212121;
}

.address {
  background-color: #f6f5ef;
  border: 1px solid #cdc9a5;
  color: #212121;
}

.notice {
  background-color: #fbf9e9;
  border: 1px solid #e3cf57;
  color: #212121;
}

.success {
  background-color: #f9fde8;
  border: 1px solid #a2bc13;
  color: #212121;
}

.download {
  background-color: #fff4e5;
  border: 1px solid #ff9912;
  color: #212121;
}

.information {
  background-color: #eef3f6;
  border: 1px solid #6ca6cd;
  color: #212121;
}

.info-box > p:last-child {
  margin-bottom: 0;
}

/* 横並びリスト２ コース選択のメインで使用  */
ul.yokomenu2 {
  width: 100%;
  list-style: none;
/*  text-align: center;*/
}

.yokomenu2 li {
  display: inline-block;
  width: 23.5%;
  border: 1px solid #ddddda;
  background-color: #f6f6f3;
  margin: 2px;
  line-height:1.4;
}

@media only screen and (max-width:760px) {
  ul.yokomenu2 {
    text-align: center;
    margin-left:0;
  }
  
  .yokomenu2 li {
    width: 90%;
    margin: 10px auto 0;
  }
  
  .yokomenu2 li a {
    font-size: .9rem;
  }
}

.yokomenu2 li a {
  display: block;
  width: 100%;
  padding: .3em 3px;
  text-align: center;
  text-decoration: none;
  font-size: 1.1rem;
  color: #333;
}

@media only screen and (max-width:600px) {
  .yokomenu2 li a {
    width: 90% !important;
  }
}

.yokomenu2 li a:hover {
  background-color: #2d56be;
  color: #fff;
}


/*        clearfix
------------------------------------------------------------------------------------------ */
/* フロートの解除を親要素に */
/*.clearfix:after {
  clear: both !important;
  content: "";
  display: block;
}*/

/*        位置揃え
----------------------------------------------------------------------------------------- */
/* inline要素のセンタリング */
.navi-buttons {
  width: 80%;
  margin: 20px auto;
}

.navi-buttons2 {
  width: 60%;
  margin: 15px auto;
}

.nav-center {
  text-align: center;
}

div.clear_box2 {
  clear: both;
  width: 565px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 10px;
}

.centered {
  position: relative;
  overflow: hidden;
  text-align:center;
}

.centered ul {
  position: relative;
  left: 50%;
  float: left;
}

.centered ul li {
  position: relative;
  left: -50%;
  float: left;
}

/* ブロック要素のセンター寄せ */
.auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

/* テーブルをスクロール可能に */
.scroll-x {
  overflow-x: auto;
}

.scroll-y {
  overflow-y: auto;
}

.scroll {
  overflow: auto;
}

/*-------------------------------------------
  float alignright,alirgnleftは親テーマに
------------------------------------------------------------------------------------------- */
.img_L {
  margin-right: 1%;
/*  margin-top: 1%;*/
  float: left;
}

.img_R {
  margin-left: 1%;
/*  margin-top: 1%;*/
  float: right;
}

.alignnone {
  float:none;
}

/* ボックスサイズ
------------------------------------------------------------------------------------------- */
div.w20 {
  width: 20%;
  margin-left: 1em;
  float: left;
}

div.w20 image {
  max-width: 100%;
}

div.w50 {
  width: 50%;
  margin-left: 1em;
  margin-right: 1em;
}

div.w75 {
  width: 70%;
  margin-right: 5%;
  padding-left: 2em;
  overflow: auto;
}

div.w60 {
  width: 60%;
  padding-left:2em;
  overflow:auto;
}

/* 小学部右側の本文 */
div.w80 {
  width: 75%;
  margin-left: 25%;
  overflow: auto;
}

/* d_section内の余白のため */
div.w90 {
  width:90%;
}

/* 段組 */
div.blocka {
  float: left;
  width: 43%;
  margin-top: 2rem;
  padding: 0 1rem 0 2rem;
}

div.blockb {
  float: left;
  width: 43%;
  margin-top: 2rem;
  padding: 0 2rem 0 1rem;
}

/* 2カラム段落 */
.two-columns {
  width: 90%;
  margin: 0 auto 0 5%;
  column-count: 2;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -ms-column-count: 2;
  -o-column-count: 2;
  column-gap: 2rem;
  -webkit-column-gap: 2rem;
  -moz-column-gap: 2rem;
  -ms-column-gap: 2rem;
  -o-column-gap: 2rem;
  column-rule: none;
  -webkit-column-rule: none;
  -moz-column-rule: none;
  -ms-column-rule: none;
}
@media only screen and (max-width:1000px) {
  .two-columns {
  width: 90%;
  margin: 5px auto;
  column-count: 1;
  -webkit-column-count: 1;
  -moz-column-count: 1;
  -ms-column-count: 1;
  -o-column-count: 1;
/*  column-gap: 2rem;
  -webkit-column-gap: 2rem;
  -moz-column-gap: 2rem;
  -ms-column-gap: 2rem;
  -o-column-gap: 2rem;*/
  column-rule: none;
  -webkit-column-rule: none;
  -moz-column-rule: none;
  -ms-column-rule: none;
  }
}

.two-columns p {
  margin: 0 0 1rem;
  text-indent: 1rem;
}

/* dl.q-and-a 囲み罫*/ 
dl.q-and-a dt {
  position: relative;
  top: 1em;
  display: inline-block;
  left: 2em;
  background: #FFF;
  padding: 0 1em;
  font-size: 18px;
  font-size: 1.286rem;
  font-weight: bold;
  color: #008744;
}

/* QandA の内容と囲み罫 */
dl.q-and-a dd {
  border: 3px groove #8b9dc3;
  padding: 1.5em 1em 1em;
  margin-bottom: 2em;
  background-color: #f7f7f7;
  font-size: 14px;
  font-size: 1rem;
  color: #3b5998;
}

@media screen and (max-width: 479px) {
  dl.q-and-a {
    width: 98%;
    margin: 5px auto;
  }
  
  dl.q-and-a dt {
    font-size: 1rem;
    left: 1em;
  }
  
  dl.q-and-a dd {
    margin-bottom: 1em;
    font-size: .857rem;
  }
}

/*        2-1  heading & title 
--------------------------------------------------------------------------------- */
/* h2向け上下の破線 */
.border-dashed {
  font-weight: 700;
  margin-top: 2em;
  padding: .5em;
  border-top: 2px dashed #000000;
  border-bottom: 2px dashed #000000;
}

/* 見出し4~6の追加-> さらにクラスに変更 */

.balloon {
  position:relative;
  margin:0 15px 30px 15px;
  padding:10px 20px;
  font:bold 14px Arial, Helvetica, sans-serif;
  color:#333;
  border:#333 solid 3px;
  border-radius:18px;
  background:#fff;
  box-shadow:
    -7px -5px 0 0 #e8e8e8 inset,
    2px 3px 0 0 #000;
}

.balloon:before{
  content:" ";
  position:absolute;
  top:100%;
  left:14px;
  width:0;
  height:0;
  border-width:20px;
  border-style:solid;
  border-color:transparent;
  border-top-color:#333;
}

.balloon:after{
  content:" ";
  position:absolute;
  bottom:-27px;
  left:18px;
  width:0;
  height:0;
  border-width:14px;
  border-style:solid;
  border-color:transparent;
  border-top-color:#e8e8e8;
}

.drop{
  position:relative;
  padding:5px 20px;
  font:bold 16px sans-serif;
  color:#333;
  border-top:#333 solid 3px;
  border-bottom:#333 solid 3px;
}

.drop:before{
  content:" ";
  position:absolute;
  top:100%;
  left:24px;
  width:0;
  height:0;
  border-width:12px;
  border-style:solid;
  border-color:transparent;
  border-top-color:#333;
}

.drop:after{
  content:" ";
  position:absolute;
  top:100%;
  left:28px;
  width:0;
  height:0;
  border-width:8px;
  border-style:solid;
  border-color:transparent;
  border-top-color:#f0f0f0;
  z-index:1;
}

.flag {
  position:relative;
  margin:1em 20px 30px 20px;
  padding:10px 15px;
  font:bold 15px Arial, Helvetica, sans-serif;
  color:#fff;
  background:#c33;
}

.flag:before{
  content:"<";
  position:absolute;
  top:auto;
  left:-10px;
  width:0;
  height:0;
  font-size:25px;
  line-height:1.0;
  color:#c96;
}

.flag:after{
  content:" ";
  position:absolute;
  top:-2px;
  left:-10px;
  width:0;
  height:130%;
  border:#600 solid 2px;
  border-radius:2px;
  transform: rotate(-2deg);

}

/* 見出しあざやかな青背景 */
.hard-shadow {
/*	width: 100%;
	position: relative;*/
	background: #0066cc;
	padding: 3px 1rem;
	font-size: 1.5rem;
	color: white;
	text-shadow: -1px 3px 0 #404040;
}
@media only screen and (max-width:600px) {
	.hard-shadow {
		font-size: 1.2rem;
		padding: 3px 0;
		text-shadow: none;
	}
}

/* 見出しの背景色 つくば個別のh2 */
.bg_green {
    margin-top: 2rem;
    padding-left:2rem;
    background: #d9e3de;
    line-height: 2;
}

.bg_red {
    margin: 1rem 0 1rem 3rem;
    color: #ffffff;
    background: #ea4646;
    line-height:2;
    padding-left: 2rem;
}

/* buttons */
/* ======================================================================================== */
/*        2-2  Yahoo Pure のCSSボタンだけ 
*/
/*
Pure v0.5.0
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
https://github.com/yui/pure/blob/master/LICENSE.md
============================================================================================ */

.pure-button {
    /* Structure */
    display: inline-block;
    line-height: normal;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
 }

/* Firefox: Get rid of the inner focus border */
.pure-button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

/*csslint outline-none:false*/

.pure-button {
    font-family: inherit;
    font-size: 100%;
    padding: .5em 1em;
    color: #444; /* rgba not supported (IE 8) */
    color: rgba(0, 0, 0, 0.80); /* rgba supported */
    color: #444; /* IE 6 & 7 */
    border: 1px solid #999;  /*IE 6/7/8*/
    border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
    background-color: #E6E6E6;
    text-decoration: none;
    border-radius: 2px;
}

.pure-button-hover,
.pure-button:hover,
.pure-button:focus {
    background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}
.pure-button:focus {
    outline: 0;
}
.pure-button-active,
.pure-button:active {
    box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
}

.pure-button[disabled],
.pure-button-disabled,
.pure-button-disabled:hover,
.pure-button-disabled:focus,
.pure-button-disabled:active {
    border: none;
    background-image: none;
    opacity: 0.40;
    cursor: not-allowed;
    box-shadow: none;
}

.pure-button-hidden {
    display: none;
}

/* Firefox: Get rid of the inner focus border */
.pure-button::-moz-focus-inner{
    padding: 0;
    border: 0;
}

.pure-button-primary,
.pure-button-selected,
a.pure-button-primary,
a.pure-button-selected {
   background-color: rgb(0, 120, 231);
   color: #fff !important;
   font-weight: 400;
}

.button-green,
.button-red,
.button-orange,
.button-lightblue {
  color: #fff !important;
  font-weight: 400;
}

.button-green,
a.button-green {
  background: rgb(28, 184, 65); /* this is a green */
}

.button-red,
a.button-red {
  background: rgb(202, 60, 60); /* this is a maroon */
}

.button-orange,
a.button-orange {
  background: rgb(223, 117, 20); /* this is an orange */
}

.button-lightblue,
a.button-lightblue {
  background: rgb(66, 184, 221); /* this is a light blue */
}

.button-zentou,
a.button-zentou {
  background: #ee0000;
  color: #fff !important;
  font-weight: 700;
  line-height: 1.2;
}

.button-xsmall {
  font-size: 70%;
}

.button-small {
  font-size: 85%;
}

.button-large {
  font-size: 125% !important;
}

.button-xlarge {
  font-size: 150% !important;
}

/* yahoo pure スマホ表示 */
@media screen and (max-width:760px) {
  .pure-button {
    width:47%;
    box-sizing: border-box;
    font-size: .857rem !important;
    margin-right: 6px !important;
  }

  .pure-button,
  .pure-button-primary,
  .pure-button-selected {
    box-sizing: border-box;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }
}

/* pure button がくっつかないように */
.pure-button {
  margin: 6px 12px 6px 0;
}

/* ボタンを全幅 */
.full-width {
  width: 100%;
  margin: 1em 0 0 0;
  padding: .5em 0;
}

/* ======================================================================================== */
/*        2-2b  Schema UI のボタンからoutlineボタンだけ 
============================================================================================ */
a.btn-green,a.btn-orange,a.btn-turquoise,a.btn-red,a.btn-primary,a:hover.btn-green,a:hover.btn-orange,a:hover.btn-turquoise,a:hover.btn-red,a:hover.btn-primary,a:hover.btn-green-gradient,a:hover.btn-primary-gradient,a:hover.btn-turquoise-gradient,a:hover.btn-red-gradient,a:hover.btn-orange-gradient,a.btn-orange-ol:hover,a.btn-turquoise-ol:hover,a.btn-primary-ol:hover,a.btn-green-ol:hover,a.btn-red-ol:hover,a:hover.btn-green-ol,a:hover.btn-turquoise-ol,a:hover.btn-orange-ol,a:hover.btn-primary-ol,.nav > li > a:hover.btn-default-ol,.nav > li > a:hover.btn-primary-ol,.nav > li > a:hover.btn-turquoise-ol,.nav > li > a:hover.btn-green-ol,.nav > li > a:hover.btn-orange-ol,.nav > li > a:hover.btn-red-ol {
  text-decoration: none;
  color: #ffffff !important;
}

.btn > i:before {
  margin-right: 8px;
  margin-right: 0.5rem;
}

.btn {
  padding: 0.5rem 0.875rem;
  margin: 0 .5rem .5rem 0;
  font-size: 1rem;
  line-height: 1.3125 !important;
  border-radius: 6px;
  color: #777777;
  border: 1px solid transparent;
  display: inline-block;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}
@media screen and (max-width: 767px) {
  .btn {
    box-sizing: border-box;
    width: 49%;
    padding-right: .2rem;
    padding-left: .2rem;
    text-align: center;
    margin: 0 0 .5rem 0;
  }
  .primary-ol {
    width: 100% !important;
  }
  .btn-large {
    width:100% !important;
  }
}

.btn-large {
  padding: 0.875rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.70625;
  border-radius: 6px;
}

.btn-small {
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
  line-height: 1rem;
  border-radius: 6px;
}

.btn-link {
  background: transparent;
  color: inherit;
  text-shadow: none;
}

.btn-full {
  display: block;
  width: 100% !important;
}

.btn-default-ol,
.default-ol {
  color: #777777 !important;
  background-color: transparent;
  border-color: #777777;
  transition: all 0.25s ease;
  text-shadow: none;
}

.btn-default-ol:active,
.default-ol:active {
  color: #777777;
  background-color: rgba(0, 0, 0, 0);
  border-color: #616161;
  box-shadow: inset 0px 2px 4px 1px rgba(0, 0, 0, 0.15);
}

.btn-default-ol:hover,
.default-ol:hover {
  color: #ffffff !important;
  background-color: #777777;
  text-decoration: none;
}

.btn-primary-ol,
.primary-ol {
  color: #3498db !important;
  background-color: transparent;
  border-color: #3498db;
  transition: all 0.25s ease;
  text-shadow: none;
}

.btn-primary-ol:active,
.primary-ol:active {
  color: #3498db;
  background-color: rgba(0, 0, 0, 0);
  border-color: #2282c1;
  box-shadow: inset 0px 2px 4px 1px rgba(0, 0, 0, 0.15);
}

.btn-primary-ol:hover,
.primary-ol:hover {
  border-color: rgba(0, 0, 0, 0.08);
  color: #ffffff !important;
  background-color: #3498db;
}

.btn-red-ol,
.red-ol {
  color: #e74c3c !important;
  background-color: transparent;
  border-color: #e74c3c;
  transition: all 0.25s ease;
  text-shadow: none;
}

.btn-red-ol:active,
.red-ol:active {
  color: #e74c3c;
  background-color: rgba(0, 0, 0, 0);
  border-color: #dd2d1b;
  box-shadow: inset 0px 2px 4px 1px rgba(0, 0, 0, 0.15);
}

.btn-red-ol:hover,
.red-ol:hover {
  border-color: rgba(0, 0, 0, 0.08);
  color: #ffffff !important;
  background-color: #e74c3c;
}

.btn-turquoise-ol,
.turquoise-ol {
  color: #24cabc !important;
  background-color: transparent;
  border-color: #24cabc;
  transition: all 0.25s ease;
  text-shadow: none;
}

.btn-turquoise-ol:active,
.turquoise-ol:active {
  color: #24cabc;
  background-color: rgba(0, 0, 0, 0);
  border-color: #1da59a;
  box-shadow: inset 0px 2px 4px 1px rgba(0, 0, 0, 0.15);
}

.btn-turquoise-ol:hover,
.turquoise-ol:hover {
  border-color: rgba(0, 0, 0, 0.08);
  color: #ffffff !important;
  background-color: #24cabc;
}

.btn-orange-ol,
.orange-ol {
  color: #f39c12 !important;
  background-color: transparent;
  border-color: #f39c12;
  transition: all 0.25s ease;
  text-shadow: none;
}

.btn-orange-ol:active,
.orange-ol:active {
  color: #f39c12;
  background-color: rgba(0, 0, 0, 0);
  border-color: #cf830a;
  box-shadow: inset 0px 2px 4px 1px rgba(0, 0, 0, 0.15);
}
.btn-orange-ol:hover,
.orange-ol:hover {
  border-color: rgba(0, 0, 0, 0.08);
  color: #ffffff !important;
  background-color: #f39c12;
}

.btn-green-ol,
.green-ol {
  color: #2ecc71 !important;
  background-color: transparent;
  border-color: #2ecc71;
  transition: all 0.25s ease;
  text-shadow: none;
}

.btn-green-ol:active,
.green-ol:active {
  color: #2ecc71;
  background-color: rgba(0, 0, 0, 0);
  border-color: #26a95d;
  box-shadow: inset 0px 2px 4px 1px rgba(0, 0, 0, 0.15);
}

.btn-green-ol:hover,
.green-ol:hover {
  border-color: rgba(0, 0, 0, 0.08);
  color: #ffffff !important;
  background-color: #2ecc71;
}

/*        2-3  テキストの文字・グーグル様仕様
---------------------------------------------------------------------------------------- */
.google-green {
  color: #008744;
}

.google-orange {
  color: #ffa700;
}

.google-red {
  color: #d62d20;
}

.google-blue {
  color: #0057e7;
}

.google-gray {
  color: #BEBEBE;
}
/*----------------------------------------------------------------end of basic elements---- */

/*        3-1  校舎案内 
------------------------------------------------------------------------------------------- */

table.kosha {
  width: 90%;
  margin: 10px auto;
  border-collapse: collapse;
  border: solid 2px #8895a3 !important;
}

table.kosha td {
  font-size: 1rem;
  line-height: 1.3;
  padding-left: 5px;
  vertical-align: middle;
}

/* 項目 */
.row1 {
  width: 15%;
  border-bottom: solid 1px #8895a3;
  border-left: 0;
  border-right: 0;
  text-align: center;
        padding-left: 5px;
}

/* 内容 */
.row2 {
  width: 40%;
  border-bottom: solid 1px #8895a3;
  border-left: 0;
  border-right: 0;
  text-align: left;
}

/* 画像 */
.row3 {
  width: 35%;
  border-left:0;
  text-align: center;
  vertical-align: middle;
  padding-top: 5px;
}

/* 左下段ＨＰリンク */
.bottom-cell {
  text-align: center;
  border-right: 0;
  border-bottom: solid 2px #8895a3;
}

/* 凡例の■ */
.sq_kid {
  color: #f8c700;
  font-size: 20px;
}

.sq_kouritu {
  color: #293389;
  font-size: 20px;
}


.sq_kokushiritu {
  color: #f2001b;
  font-size: 20px;
}

.sq_kobetu {
  color: #00933e;
  font-size: 20px;
}

.sq_koukou {
  color: #db8cb8;
  font-size: 20px;
}

.sq_kokuritu {
  color: #00b0f0;
  font-size: 20px;
}

.sq_manabisu {
  color: #773f91;
  font-size: 20px;
}

div.d_course {
  width: 85%;
  margin: 1% auto;
  border: 1px solid #232323;
  padding: 10px 3%;
  overflow: hidden;
}

div.d_course p {
  margin-bottom: 10px;
}

ul.ul_course {
  list-style-type: none;
  margin-top: -10px;
}

ul.ul_course li {
  float: left;
  display: block;
  width: 40%;
}

.f_bold {
  font-weight: bold;
}

/* 校舎レスポンシブ */

@media only screen and (max-width: 760px) {
  table.kosha-responsive {
    width:100%;
  }
  .kosha-responsive td, .kosha-responsive th, .kosha-responsive tr {
    display: block;
  }

  .kosha-responsive td {
    width:100%;
    box-sizing: border-box;
    border-bottom: 1px solid #eeeeee;
    padding-left: 1em !important;
  }

  .row1 {
    font-weight: bold;
  }
}


/* 流れ */

div.flow {
  overflow: hidden;
  margin-top: 1rem;
}

div.flow p.h_flow {
  font-weight: bold;
  font-size: 18px;
  color: #122dae;
  overflow: hidden;
  margin-bottom: 0;
}

div.f_pic {
  width: 30%;
}

/*        3-2  授業内容と宿題
------------------------------------------------------------------------------------------- */

table.t_homework {
  width: 90%;
  margin: 24px auto;
}

table.t_homework td {
  padding-left: 2%;
  border: 1px solid #b7b7b7;
  background: #fff;
  
}

table.t_homework td.title {
  line-height: 1.1;
  padding-left: 1em;
  font-size: 23px;
  font-size: 1.643rem;
  color: #ffffff;
  background: #3d77bf;
  border: 1px solid #245da5;
}

table.t_homework td.date {
        line-height: 1.2;
  background-color: #f6f6f6;
  font-size: 20px;
  font-size: 1.429rem;
}

table.t_homework td.left {
}

table.t_homework td.mid,
table.t_homework td.right {
  width: 40%;
        line-height: 1.1;
}

/* レスポンシブテーブル */
@media only screen and (max-width: 760px) {
  td.left, td.mid, td.right {
      font-size: 0.857rem;
      line-height: 1;
  }
}

/* 宿題ページのナビアイコン */
div.navi_icon{
     margin-left: 3em;
     float: left;
}

/* 宿題ページの注意 */
.gray_bg {
  width: 80%;
  border: solid 1px #DEDEDE;
  background: #f9f9ec;
  margin: 0 auto;
  color: #222222;
  padding: 4px;
  padding-left: 5%;
}

/*        3-3  授業曜日・費用一覧　
------------------------------------------------------------------------------------------- */
/* 授業料テーブル */
@media only screen and (max-width:767px) {
  table.t_price, table.t_cal {
    width:100%;
    margin:0;
  }
}

table.t_price,
table.t_cal {
    table-layout: fixed;
    width: 90%;
    margin:0 auto 10px 5%;
}

table.t_price caption,
table.t_cal caption {
    font-size: 1.571rem;
    text-align: left;
    text-indent:.5em;
    background: darkcyan;
    line-height: 1.4;
    color: #fff;
    margin-bottom: 0;
}

table.t_price thead th,
table.t_cal thead th {
    font-size: 14px;
    font-size: 1rem;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    line-height: 1.5;
}

table.t_price thead th {
    border-bottom: 3px solid #4169e1;
}

table.t_cal thead th {
  border-bottom: 3px solid #f4a460;
}

table.t_price tfoot td,
table.t_cal tfoot td {
    font-size: 12px;
    font-size: 0.857rem;
    color: #3f3f3f;
    background-color: #ffffff;
    text-align: left;
    padding-left: 15px;
}

table.t_price td.year {
    text-align: center;
}

table.t_price td.subject {
    text-align: center;
}


table.t_price tbody td,
table.t_cal tbody td {
    width: auto;
    color:#3f3f3f;
    font-size: 14px;
    font-size: 1rem;
    font-weight: normal;
    padding-right: 15px;
    line-height: 1.5;
}

table.t_price tbody td {
  text-align:right;  
}

table.t_cal tbody td {
    text-align: center;
}

.sq_kid_s {
  color: #f8c700;
  font-size: 14px;
}

.sq_kouritsu_s {
  color: #293389;
  font-size: 14px;
}


.sq_juken_s {
  color: #f2001b;
  font-size: 14px;
}

.sq_kobetu_s {
  color: #00933e;
  font-size: 14px;
}

.sq_chugaku_s {
  color: #db8cb8;
  font-size: 14px;
}

.sq_manavis_s {
  color: #773f91;
  font-size: 14px;
}

@media only screen and (min-width:760px){
  .period {
    width: 9em;
  }
}

/*        3-4  ごあいさつ
---------------------------------------------------------------------------------------- */

.greeting {
  line-height: 1.5;
  margin: 2em;
  text-indent: 1em;
}


/*        3-5  中学部
---------------------------------------------------------------------------------------- */

/* 中学生ページPU講座の表 */
table.bottomline {
  margin: auto;
  width: 90%;
  font-size: 1rem;
  border-collapse: collapse;
}

table.bottomline td {
  border-bottom: 1px solid #1C79C6;
}

/* 中学部の特長 */
ol.chugaku {
  counter-reset: li; /* Initiate a counter */
  padding: 0; /* Remove the default left padding */
  list-style: none; /* Disable the normal item numbering */
  width: 100%;
  margin-left: 2%;
  margin-top: 4px;
}
@media only screen and (max-width:768px) {
    ol.chugaku {
        margin-left: 0;
    }
}


ol.chugaku li {
  position: relative;
/* Create a positioning context */
  margin: 0 0 6px 4rem;
  width: 40%;
  float: left;
/* Give each list item a left margin to make room for the numbers */
  padding: 4px 8px;
  border-top: 2px solid #666;
  background: #f6f6f6;
  font-size: 1.3rem;
  line-height: 1.3;
}

@media only screen and (max-width: 760px) {
  ol.chugaku li {
    width: 80%;
    margin-left: 2em !important;
  } 
}

ol.chugaku a {
  color: #00004e;
  display: block;
  text-decoration: none;
}

ol.chugaku a:hover {
  background: #0033cc;
  color: #ffffff;
}

ol.chugaku li:before {
  content: counter(li);
/* Use the counter as content */
  counter-increment: li;
/* Increment the counter by 1 */
/* Position and style the number */
  position: absolute;
  top: -2px;
  left: -2em;
  width: 2em;
  padding: 4px 0;
  border-top: 2px solid #666;
  color: #fff;
  background: #cc0000;
  font-weight: bold;
  font-family: "Helvetica Neue", Arial, sans-serif;
  text-align: center;
}

ol.chugaku a:after {
  position: absolute;
  content: '';
  border: 1em solid transparent;
  left: -1em;
  top: 50%;
  margin-top: -1em;
  transition: all .3s ease-out;
}

ol.chugaku a:hover:after {
  left: -.5em;
  border-left-color: #fa8072;
}

/*        3-6  小学部
---------------------------------------------------------------------------------------- */
/* 小学生理社用 heading */
p.heading2 {
  font-size: 20px;
  font-size: 1.429rem;
  font-weight: 700;
  margin: 10px 0;
  padding: 10px 10px 5px 50px;
  color: #000000;
  line-height: 1.5;
  background-image: url(../../uploads/2014/04/icon_check_red.png);
  background-repeat: no-repeat;
  background-position: left center;
  border-bottom-width: 2px;
  border-bottom-style: dotted;
  border-bottom-color: #2b579a;
}

p.heading3 {
  font-size: 16px;
  font-size: 1.143rem;
  font-weight: 700;
  margin: 10px 0 30px;
  padding: 10px 10px 5px 50px;
  color: #e55b00;
  line-height: 1.5;
  background-image: url(../../uploads/2014/04/icon_check_green.png);
  background-repeat: no-repeat;
  background-position: left center;
  border-bottom: 1px solid #ff8432;
  border-top: none;
}

/* タイトル強調 */
.emphasize {
  font-size: 20px;
  font-weight: 700;
  color: #800000;
}

/* ボタンのセンタリング */

.centered {
        text-align: center;
}

/*        3-7  資料請求・お問い合わせ 
----------------------------------------------------------------------------------------- */
/* 新コンタクトフォーム */
.cf1, .cf2 {
  padding: 2%;
  border-bottom: 1px solid #ccc;
  color: #595858;
  display: block;
  font-weight: bold;
  line-height: 2;
}
@media only screen and (max-width:767px) {
  .cf1, .cf2 {
    padding: 0;
  }
}

.cf1 {
  background: #fffcf5;
}

.cf2 {
  background: #E8EEF9;
}

p.cf1, p.cf2 {
  margin: 0;
}

.cf1:hover,.cf2:hover {
  background: #FFEEEE;
}

.cf1.last,.cf2.last {
  border-bottom: none;
}

.required {
  padding: 2px 7px !important;
  background: #ff8080;
  color: #fff;
  margin: 5px;
}

.cf1 textarea,.cf2 textarea {
  font-size: 14px;
  font-size: 1rem;
  width: 95%;
}

.file {
  margin: 10px;
  display: block;
}

span.wpcf7-list-item {
  display: block;
  float: left;
}

input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus {
  border: solid 1px #20b2aa;
}

input[type=text], select,input[type=email],input[type=tel] {
  outline: none;
}

input[type=submit] {
  font-size: 16px;
  font-size: 1.143rem;
}

.contact_right textarea {
  border-radius: 5px;
  border: #a9a9a9 1px solid;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2), 0 0 2px rgba(0,0,0,0.3);
  width: 100%;
  padding: 0 3px;
}

.contact_right textarea:focus {
  border: solid 1px #20b2aa;
}

.contact_right textarea {
  outline: none;
  width: 95%;
}

.contact_form input[type=text], .contact_form input[type=tel],.contact_form input[type=email] {
  font-size: 14px;
  font-size: 1rem;
}

.contact_form input[type=text] {
  width: 40%;
}

.contact_form input[type=tel], .contact_form input[type=email] {
  width: 90%;
}

input[type="radio"] {
  margin: 0 0 4px !important;
}

.submit-cf7 {
  line-height: 1.2;
  text-align: center;
  font-size: 18px;
  font-size: 1.286rem;
}

.wpcf7 .wpcf7-response-output {
  margin: 10px 0 0;
  padding: 8px 35px 8px 14px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  border-radius: 4px;
}

/* なぜサイズ未指定の画像 */
.wpcf7 img.ajax-loader {
  width: 16px;
  height: 16px;
}

/* 送信エラー */
.wpcf7 .wpcf7-validation-errors {
  color: #ffffff;
  font-weight: bold;
  background-color: #a40000;
  border: 1px solid #EED3D7;
}

.wpcf7 .wpcf7-not-valid {
    background: pink;
}

/* 送信完了 */
.wpcf7 .wpcf7-mail-sent-ok {
  color: #ffffff;
  font-weight: bold;
  background-color: #328639;
  border: 1px solid #BCE8F1;
}

/* エラーダイアログ */
.wpcf7 span.wpcf7-not-valid-tip {
    display: block;
    position: static;
    top: 0;
    left: 0;
    border: none;
    color: red;
}

.remark {
  font-size: 10px;
  font-size: .714rem;
}

/* テキスト入力ボックスのサイズ */
input.wpcf7-form-control {
  font-size:1rem;
  line-height: 1.2;
}
.wpcf7-form textarea,
.wpcf7-form input {
  max-width: 96% !important;
}

/* ドロップダウンを少し右に */
.indent-2rem {
  text-indent: 2rem;
  margin-top: .2em;
}

/* 個人情報の扱い（スクロール） */
.policy {
  width: 80%;
  height: 200px;
  overflow: auto;
  margin-bottom: 2em;
}

@media only screen and (max-width:760px) {
  .policy {
    box-sizing: border-box;
    width: 100%;
    margin: 10px auto 2em;
  }
}

/*        3-8  カレンダー
---------------------------------------------------------------------------------------- */
/* カレンダーの説明 */
ul.schedule-list li:before {
  content: "\f133";
  font-family: FontAwesome;
  display: block;
  float: left;
  text-align:center;
  margin-right: .5em;
  width: 1em;
}

/* カレンダーをインライン表示 スマホには少し小さいか */

div.responsive-inline,
div.responsive-inline iframe[style],
div.responsive-inline span {
  box-sizing: border-box;
  width: 100% !important;
}

/*        3-9  よくあるご質問
---------------------------------------------------------------------------------------- */

/* -------------------- アコーディオン --------------------------------- */
div.d_section .accordion {
    margin-bottom: .5em;
}

p.trigger {
    background-color: #fafafa;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.2;
}

p.trigger a {
    color: #0E6BB5 !important;
}

.d_section > accordion,
.d_section-orange > accordion,
.d_section-black > accordion,
.d_section-green > accordion,
.d_section-yellow > accordion,
.d_section-blue > accordion {
    margin-bottom: .5em;
}

/* FAQページのリスト */
.qa-list {
  margin: 0;
  font-size: 1.143rem;
  padding: 0 20px 0 0;
}

ul.qa-list li {
  margin: 0;
  padding: .5rem 0;
  font-size: 1.143rem;
  list-style: none;
  vertical-align: middle;
  border-top: 1px solid #5b5b5b;
  border-bottom: 1px solid #dedede;
}

ul.qa-list li:first-child {
  border-top: 0;
}

ul.qa-list li:last-child {
  border-bottom: 0;
}

ul.qa-list li a {
  color: #5b5b5b;
  text-decoration: none;
}

ul.qa-list li a:hover {
  color: #ff0000;
}

/* ------------------リストの前にアイコンフォントを設定 ------------------- 役に立つ */
ul.qa-list li:before {
  content: "\f054";
  font-family: FontAwesome;
  color: #ff0000;
  display: block;
  float: left;
  text-align: center;
  width: 1em;
  margin-right: .5em;
}

/*        3-10  講習ページ詰め合わせ
---------------------------------------------------------------------------------------- */
/* ナビゲーションボタンの文字サイズ */
.text-13px {
  font-size: 13px;
  font-size: .929rem;
}

/* 申込方法 */
.box-oldlace {
  overflow: hidden;
  background: #fff0f5;
  color: #696969;
  padding: 10px;
  font-size: 1rem;
  }

.box-oldlace p {
  text-indent: 0;
  }

.box-oldlace p:last-child {
  margin-bottom: 0;
  }

/* 費用備考 */
/* 中段右のボックス --> 不使用*/
/*.note2 {
*  width: 45%;
*  overflow: hidden;
*  margin-top:22px !important;
}*//* テーマのショートコードとダブった */
/*@media only screen and (max-width:760px) {
  .note2{
    width:100%;
    margin-top:0;
  }
}*/

/* 画像のボックス */
.discount-banner {
  width: 100%;
  margin: 1em auto 0;
}

/* ボックス内の画像サイズ */
.discount-banner img {
  max-width: 100%;
  width: 100% !important;
}

/* スキンカラーの背景と文字設定 */
.box-seashell {
  margin-top: 22px;
  padding: 10px 10px 10px 2em;
  background: #fff5ee;
  color: #2f4f4f;
  font-size: 1rem;
}

.box-seashell p {
  text-indent: -1em;
}

.box-seashell p:last-child {
  margin-bottom: 0;
  }

/*　----------------------------- 全統テスト------------------------------------------ */
/* 学年ブロック統一くん */
.yt-youkou {
  background-image: url(../../uploads/2014/04/touitsukun-light.jpg);
  background-repeat: repeat;
  border: 2px ridge #108080;
  margin-top: 3em;
  margin-bottom: 3em;
}

.yt-youkou2 {
  background: #f7f7f7;
  border: 2px solid #ee2a2a;
  margin-bottom: 1em;
}

.yt-youkou2 h2 {
  background: #ee0000;
  color: #fff;
  line-height: 1.7;
  text-indent: 1em;
 }

.yt-youkou2 p {
  margin: 1em;
}

/* 当日までの流れ */
.procedure,
.procedure-red {
  margin-top: 20px;
  font-size: 1.571rem;
  text-indent: 1em;
  font-weight: 700;
  line-height: 1.6;
}
.procedure {
  border-bottom: 6px solid #4838bf;
}
.procedure-red {
  border-bottom: 3px solid #be0000;
}

@media only screen and (max-width:760px) {
  .procedure, .procedure-red {
    font-size: 1.214rem;
    text-indent: 0;
  }
  .procedure {
    border-bottom: 2px solid #4838bf;
  }
  .procedure-red {
    border-bottom: 2px solid #be0000;
  }
}

.subheading {
  font-weight: 700;
  font-size: 22px;
  font-size: 1.571rem;
  line-height: 1.4;
}

.zentou-box {
  width:90%;
  margin-left: 5%;
  margin-right: auto;
}
@media only screen and (max-width: 760px) {
  .zentou-box {
    width: 100%;
    margin-left: 0;
  }
}

.orange {
  background: #ee7700 !important;
}

.red2 {
  background: #f34c4c !important;
}

/*        3-11  バス停
---------------------------------------------------------------------------------------- */
.bus-timetable {
  margin: 0;
  padding: 0;
  width: 100%;
  box-shadow: 10px 10px 5px #888888;
  border: 1px solid #000000;
  border-radius: 9px;
}


/* その他 */
/* 02.テープ黄色 */
p.yellow_tape {
  position: relative;
  margin-bottom: 2em;
  font: bold 30px/1.6 Arial, Helvetica, sans-serif;
  text-align: center;
  color: #333;
  background: #f0e800;
  -webkit-transform: rotate(-3deg) skew(-3deg);
  transform: rotate(-3deg) skew(-3deg);
  text-shadow: 1px 1px 0 rgba(255,255,255,1);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 30px 0 0 0 #f0e800, -30px 0 0 0 #f0e800;
}

/* =========================================================================================
  ******** TABLES
  ========================================================================================== */
  
/* ------------------4-1  速報ページ用の表-------------------------------------------------- */
table.sokuho {
  margin-left: 5%;
  width: 90%;
  border-collapse: collapse;
}

table.sokuho td {
  border-bottom: 1.5px solid #1C79C6;
  padding-left: 1.5rem;
}

table.sokuho th {
  background: #003366;
  line-height: 2em;
  color: #ffffff;
  font-size: 1.2rem;
  text-align: center;
}

/* ------------------4-2 大活躍中　イベント日程お知らせ用の表 見出しピンク------------------ */
table.kokai_sche,
.guideline {
  table-layout: fixed;
  width: 82%;
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  margin: 0 0 0 15px;
}

table.kokai_sche th,
.guideline th {
  width: 15%;
  table-layout: fixed;
  padding: 4px;
  text-align: center;
  font-size: 1.2rem;
  vertical-align: middle;
  color: #444;
  background: #feedf3;
  border-left: 3px double #999;
  border-top: 1px solid #fff;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

table.kokai_sche td,
.guideline td {
  width: 67%;
  table-layout: fixed;
  padding-left: 4px;
  background-color: #fafafa;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
} 

.kokai_sche_C01,
.guideline_C01 {
  width: 15%;
}

.kokai_sche_C02,
.guideline_C02 {
  width: 85%;
}

/* メディアクエリ */

@media only screen and (max-width: 767px) {
  .kokai_sche thead, .kokai_sche tbody, .kokai_sche tr, .kokai_sche td, .kokai_sche th, .guideline thead, .guideline tbody, .guideline tr, .guideline td, .guideline th {
    display: block;
    border: none !important;
    width: 100% !important;
  }
  
  table.kokai_sche,
  table.guideline {
    width: 100% !important;
    margin: 0;
    border: none !important;
  }
}

/* ------------------4-3  サイドバーのあるページ用の表 --------------------------------------- */
table.youkou {
  width: 90%;
  margin: 0 0 0 3%;
}

table.youkou,table.youkou td, table.youkou th {
  border: 1px #00aaee solid;
  border-collapse: collapse;
  vertical-align: middle;
}

table.youkou td,table.youkou th {
  font-size: 16px;
  font-size: 1.143rem;
}

table.youkou th {
  background: #ebeaed;
  text-align: center;
}

table.youkou td {
  line-height: 1.1;
  padding-left: 14px;
  padding-left: 1rem;
}

table.youkou tfoot td {
  background: #fcfdf1;
  font-size: 14px;
  font-size: 1rem;
}

table.youkou caption {
  margin-bottom: 0;
  font-weight: 700;
}

/* ------------------4-4  明るい青のグラデテーブル -------------------------------------------------- */
table.bluegradation {
  width: 98%;
  margin: 0 1%;
  border: 2px groove #386977;
  border-collapse: collapse;
  border-spacing: 0;
}

table.bluegradation caption {
  border-top: 3px solid #386977;
  border-right: 3px solid #386977;
  border-left: 3px solid #386977;
  background: #e6f8fe;
  color: #222222;
  text-shadow: 0 1px 1px #fff;
  font: bold 1.3rem sans-serif;
  padding: 4px 0;
  margin-bottom: 0;
  text-align: center;
  width: 40%;
  font-weight: normal;
}
@media only screen and (max-width: 760px) {
  table.bluegradation caption {
    width: 100%;
  }
}

table.bluegradation td {
  font-size: 14px;
  font-size: 1rem;
  color: #222222;
  text-shadow: 0 1px 1px #ffffff;
  padding: 3px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #047fa6;
  border-right: 1px solid #047fa6;
  background: #feffff;
}

table.bluegradation th {
  color: #f9fdff;
  text-shadow: 0 2px 2px #097799;
  font-size: 16px;
  font-size: 1.143rem;
  line-height: 1.429;
  padding: 3px;
  border-bottom: 1px solid #f1f1f1;
  border-right: 1px solid #f9fdff;
  background: #05abe0;
  text-align: center;
}

/* ------------------4-5  茶と黄色のアカデミーっぽい表 -------------------------------------------------- */
table.seminar {
  width: 98%;
  margin: 0 1%;
  border-collapse: separate;
  background-color: #FCEE9E;
  border: 3px solid #990033;
}

table.seminar caption {
  background: #903;
  color: #fefdcf;
  padding: 4px 0;
  margin-bottom: 1px;
  text-align: center;
  width: 40%;
  font-weight: normal;
}

@media screen and (max-width:760px) {
  table.seminar caption {
    width: 100%;
  }
}

table.seminar td {
  border: 1px solid #CC9933;
  padding: 3px;
  vertical-align: middle;
  text-align: center;
  background: #FEFDCF;
  color: #000;
}

table.seminar thead th {
  background: #be5061;
  color: #fefdcf;
  text-align: center;
  font-weight: normal;
  font-size: 1.1rem;
  padding: 3px;
  border: 1px solid #990033;
}

table.seminar th {
  border: 1px solid #CC9933;
  padding: 3px;
  font-size: 1.1rem;
  text-align: center;
}

table.seminar tfoot td {
  background: #DDF0CE;
}

table.seminar tbody th:hover {
  background-color: #fefdcf;
}

/* ７・８月のセルに設定を追加するとき使用 */
.jun,
.aug,
.dec,
.jan {
  font-weight: 700;
}

/* ------------------4-6  摘要欄罫線でなくマージンで見やすく これも大活躍中 ----------------------------- */
table.summary, table.zentou {
  float: left;
  overflow: hidden;
  margin-right: 2%;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 15px;
  font-size: 14px;
  font-size: 1rem;
}

table.summary thead th,
table.zentou thead th {
  color: #ffffff;
  text-align: center;
}

table.summary thead th {
  background: #295890;
  font-size: 1.143rem;
}

table.zentou thead th {
  background: #f13232;
  font-size: 1.286rem;
  font-weight: 700;
}

table.summary th,
table.summary td,
table.zentou th,
table.zentou td {
  padding: 5px;
/*  line-height: 1 !important;*/

}

table.summary th,
table.zentou th {
  vertical-align: middle;
  text-align: left;
  overflow: visible;
  position: relative;
  color: #fff;
  font-weight: normal;
  font-size: 16px;
  font-size: 1.143rem;
}

table.summary th {
  background: #295890;
  width: 30%;
}

table.zentou th {
  background: #f13232;
  font-weight: 700;
  width: 20%;
}

table.summary td,
table.zentou td {
  background: #f8f8f8;
  width: auto;
  padding-left: 1.5em;
  font-size: 16px;
  font-size: 1.143rem;
}

/* モバイル表示でウィンドウいっぱいに */
@media screen and (max-width: 760px) {
  table.summary,
  table.zentou {
    width: 100%;
    border-spacing: 0 !important;
  }

  table.summary th,
  table.summary td,
  table.zentou th,
  table.zentou td {
    font-size: 1rem !important;
  }
  
  table.summary th,
  table.zentou th {
    width: 30%;
  }
  
  table.summary td,
  table.zentou td {
    width: auto;
    padding-left: 0;
  }
}

/* つくばのカレンダーで使用しているアイコンフォントの設定 */
.fa-apple {
  font-size: 16px;
  font-size: 1.143rem;
}

.fa-flag {
  font-size: 16px;
  font-size: 1.143rem;
}


/*--------------------------------------------------------------------------------- 以上のスペースが共通のCSS----- */

/* ------------ ▶▶▶  NT教室 ------------------------------------------------ */

/* 合宿ブログ */
.camp-post-date {
  font-size: 20px !important;
  font-size: 1.429rem;
}

.blog-camp-title {
  font-size: 24px !important;
  font-size: 1.714rem;
  line-height: 1em !important;
}

@media screen and (max-width: 600px) {
  .blog-camp-title {
    font-size: 1.2586rem !important;
    line-height: 1.1em !important;
  }
}

/* 合宿ブログ用画像サイズ横に３枚 */
.gallery img {
  width: 31%;
  margin: 5px 10px 0 0;
  float: left;
}


/* フロートでなく横並び テーブルセル */
.two-columns-body {
  display: table;
  width: 100%;
  margin-bottom: 10px;
  vertical-align: middle;
  text-align: center;
}

.two-columns-content {
  display: table-cell;
}

/* ------------ ▶▶▶  つくば教室 ------------------------------------------------ */

/* つくば個別コース ポイントのリスト ok */
ol.point {
	counter-reset: li;
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

ol.point > li {
	position: relative;
	margin: 0 0 6px 2em;
	padding: 4px 8px;
	list-style: none;
	border-top: 2px solid #666;
	background: #f6f6f6;
	font-size: 1.2rem;
	line-height: 1.4;
}

ol.point > li:before {
	content: counter(li);
	counter-increment: li;
/* Position and style the number */
	position: absolute;
	top: -2px;
	left: -2em;
	box-sizing: border-box;
	width: 2em;
/* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
	margin-right: 8px;
	padding: 4px;
	border-top: 2px solid #666;
	color: #fff;
	background: #666;
	font-weight: bold;
	font-family: "Helvetica Neue", Arial, sans-serif;
	text-align: center;
}

ol.point li ol,
li ul {
	margin-top: 6px;
}

ol.point ol li:last-child {
	margin-bottom: 0;
}

/* ------------ ▶▶▶  我孫子教室 ------------------------------------------------ */

/* トップページのテキストボックス */
.bulletin {
  background: #f7f7f7;
/*  border: 1px solid #d5d5d5;
  border-top: 3px solid #005b96;*/
  box-shadow: 0px 0px 4px #e6e6e6;
  padding: 5px;
}

div.bulletin:hover {
  background-color: #bbeeff;
}

.bulletin h3 {
  color: #03396c;
  border-bottom: 2px solid #005b96;
  font-weight: bold;
}

.bulletin h3::before {
  content:"\f054";
  font-family: FontAwesome;
  margin-right: .5em;
}

.bulletin h4 {
  background: #ffffff;
  color: #a3032d;
  font-size: 1rem;
  text-align: center;
}

.bulletin h4::before {
  content: "\f0a1";
  font-family: FontAwesome;
  margin-right: .5em;
}

/* メディアクエリ */
@media screen and (max-width: 767px) {
  .bulletin > h3 {
    font-size: 1.1rem;
  }
  .bulletin > h4 {
    font-size: .857rem;
  }
}

.bulletin p {
  color: #333333;
  font-size: .857rem;
  line-height: 1.2;
  margin-bottom: .5em;
} 

.bulletin a, .bulletin a:link, .bulletin a:visited, .bulletin a:active {
  color: #333333;
}

.bulletin a:hover {
  color: #333333;
}