@charset "UTF-8";
/* =========================================================
   【1】本文の基本（書体・行間・ページの地色）※全端末
   ・ページ全体をグレーにして、この上に白いカードを置きます
   ========================================================= */
body{
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,Arial,sans-serif;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  background-color:#F4F6F8;
  color:#2B3440;
  font-weight:500;
}


/* =========================================================
   【2】見出しの書体をすべて游ゴシックに
   ・明朝体をやめ、太さで見出しらしさを出す
   ・ページ最上部のキャッチコピーは見出し扱いにしない
   ========================================================= */
#main h1, #main h2, #main h3, #main h4,
.headline-h2, .headline-h3, .headline-h4,
.page-title, .side .side-title{
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,Arial,sans-serif;
  font-weight:bold;
  letter-spacing:0.04em;
}
.header .catchcopy .content{
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,Arial,sans-serif;
  font-weight:normal;
  letter-spacing:normal;
}


/* =========================================================
   【3】ヘッダー上部（電話番号・お問い合わせボタン）※パソコンのみ
   ========================================================= */
@media (min-width:690px){
  .header{ background:#FFFFFF; }
  .header-contact-text{ text-align:right; }
  .header p.text_1{
    color:#0071BC;
    font-size:24px;
    font-weight:bold;
    line-height:1.2em;
  }
  .header p.text_2{
    font-size:12px;
    line-height:1em;
    margin-bottom:10px;
    color:#2B3440;
    opacity:0.7;
  }
  .header .header-contact-button{
    background:#0071BC;
    color:#FFFFFF;
    padding:0 22px;
    margin-bottom:5px;
    border-radius:100px;
    font-weight:bold;
    transition:opacity 0.2s ease, transform 0.2s ease;
  }
  .header .header-contact-button:hover{
    background:#0071BC;
    color:#FFFFFF;
    opacity:0.85;
    transform:translateY(-2px);
  }
  .header-logo .logo{ max-height:59px; }
}


/* =========================================================
   【4】上部メニュー ※パソコンのみ
   ========================================================= */
@media (min-width:690px){
  .global-nav{
    background:#FFFFFF;
    border-top:1px solid #DDE3E9;
    border-bottom:3px solid #0071BC;
  }
  .global-nav .menu-item a{
    background:none;
    border-right:1px solid #DDE3E9;
    box-shadow:none;
    color:#2B3440;
    font-weight:bold;
    position:relative;
    transition:color 0.2s ease;
  }
  .global-nav .menu-item a:hover{
    background:none;
    color:#0071BC;
    opacity:1;
  }
  .global-nav .menu-item > a:before{
    content:"";
    position:absolute;
    left:14%;
    right:86%;
    bottom:4px;
    height:2px;
    background:#0071BC;
    transition:right 0.25s ease;
  }
  .global-nav .menu-item > a:hover:before{ right:14%; }
  .header-menu{ border-left:1px solid #DDE3E9; }
  .header-menu > .menu-item > a:after{ border-right:none; }
}


/* =========================================================
   【5】リンク・ボタン
   ========================================================= */
a{ color:#0071BC; }
a:hover{ color:#0071BC; opacity:0.8; }
.more,
input[type="submit"],
button[type="submit"],
.search-submit.button.primary{
  background:#0071BC !important;
  color:#FFFFFF !important;
  border:2px solid #0071BC !important;
  border-radius:100px !important;
  font-weight:bold !important;
  box-shadow:0 3px 0 rgba(0,0,0,0.18) !important;
  transition:opacity 0.2s ease, transform 0.2s ease !important;
}
.more:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.search-submit.button.primary:hover{
  opacity:0.88;
  transform:translateY(-2px);
}
.more:active,
input[type="submit"]:active,
button[type="submit"]:active{
  box-shadow:0 1px 0 rgba(0,0,0,0.18) !important;
  transform:translateY(2px);
}


/* =========================================================
   【6】かたまり（カセット）1つを、白いカード1枚にする  ★v4の中心
   ・区切り線の有無や、中に画像が何枚あるかに左右されません
   ========================================================= */
#main .content-body{
  background:#FFFFFF;
  border:1px solid #DDE3E9;
  border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 6px 16px rgba(0,0,0,0.05);
  padding:22px 26px;
  margin-bottom:28px;
}
#main .content-body p{ margin:0 0 18px; }
#main .content-body p:last-child{ margin-bottom:0; }


/* =========================================================
   【7】青い見出しの帯と、その下の本文を1枚のカードにする
   ・帯 = カードの見出し、すぐ下の本文 = カードの中身
   ========================================================= */
#main .content-body.back-color-content{
  background-color:#0071BC !important;
  border:1px solid #0071BC;
  border-radius:12px 12px 0 0;
  box-shadow:none;
  padding:18px 26px;
  margin-bottom:0;
}
#main .content-body.back-color-content .headline-h2,
#main .content-body.back-color-content h1,
#main .content-body.back-color-content h2,
#main .content-body.back-color-content h3{
  color:#FFFFFF !important;
  font-size:20px;
}
#main .content-body.back-color-content .headline-h2.hl-ul-udl{
  border-top-color:rgba(255,255,255,0.45) !important;
  border-bottom-color:rgba(255,255,255,0.45) !important;
  padding-bottom:0.35em;
}
#main .content-body.back-color-content + .content-body{
  border-top:none;
  border-radius:0 0 12px 12px;
  margin-top:0;
}


/* =========================================================
   【8】小見出しは、カードの中を横切る青い帯にする
   ・カードの左右いっぱいに広げて、話の切り替わりを見せます
   ・大見出しとの違いは「帯の高さ」と「文字の大きさ」で付けます
   ========================================================= */
#main .content-body > .headline-h3{
  background:#0071BC;
  color:#FFFFFF;
  font-size:16.5px;
  border:none;
  border-radius:0;
  margin:36px -26px 18px;
  padding:12px 26px;
}
#main .content-body > .headline-h3:first-child{
  margin-top:-22px;
  border-radius:12px 12px 0 0;
}


/* =========================================================
   【9】区切り線は、ただの余白にする
   ・v2ではカードの底として使っていましたが、順番が守られないと
     崩れるため、見た目としては消して余白だけ残します
   ・画像の回り込みを解除する役目は残します
   ========================================================= */
#main .content-body > hr.clear{
  border:none;
  background:none;
  height:0;
  margin:0;
  clear:both;
}


/* =========================================================
   【10】色を絞る（塾長が付けた赤・青の文字を、決めた色に置き換える）
   ・赤 → アクセント色（強調）、青 → メインの青
   ・元の色に戻したいときは、このかたまりを消してください
   ========================================================= */
#main .content-body span[style*="ff0000"],
#main .content-body span[style*="rgb(255, 0, 0)"]{
  color:#E8710A !important;
  font-weight:bold;
}
#main .content-body span[style*="3366ff"],
#main .content-body span[style*="0000ff"]{
  color:#0071BC !important;
  font-weight:bold;
}


/* =========================================================
   【11】本文の中のリンクを、押せるボタンに見せる
   ・申し込み・お問い合わせへのリンクだけ、アクセント色で塗ります
     （一番押してほしい場所を1つに絞るため）
   ========================================================= */
#main .content-body p a[href]{
  display:inline-block;
  background:#FFFFFF;
  border:1px solid #0071BC;
  border-radius:100px;
  padding:2px 16px;
  margin:2px 3px;
  color:#0071BC;
  font-weight:bold;
  text-decoration:none;
}
#main .content-body p a[href]:hover{
  background:#0071BC;
  color:#FFFFFF;
}
#main .content-body p a[href*="/contact"]{
  background:#E8710A;
  border-color:#E8710A;
  color:#FFFFFF;
}
#main .content-body p a[href*="/contact"]:hover{
  background:#E8710A;
  border-color:#E8710A;
  color:#FFFFFF;
  opacity:0.88;
}


/* =========================================================
   【12】画像の見た目をそろえる
   ・角を丸め、下に余白を付けて、カードの中で整って見えるようにする
   ========================================================= */
#main .content-body .wp-caption img{
  border-radius:8px;
}
#main .content-body .wp-caption{
  margin-bottom:16px;
}
#main .content-body .wp-caption-text{
  color:#2B3440;
  opacity:0.75;
  font-size:12.5px;
}


/* =========================================================
   【13】サイドバー
   ========================================================= */
@media (min-width:690px){
  .sidebar{ width:290px; min-width:290px; }
}
.side .side-title{
  box-shadow:none;
  border-top:1px solid #DDE3E9;
  border-bottom:3px solid #0071BC;
  padding:10px;
  text-align:left;
}
.side li a{
  border-bottom:1px solid #DDE3E9;
  color:#2B3440;
  font-size:14px;
  padding:10px;
  background-size:10px;
  transition:color 0.2s ease, background 0.2s ease;
}
.side li a:hover{
  opacity:1;
  color:#0071BC;
  background-color:#F4F6F8;
}
.side.widget_recent_post_widget .side-title,
.side.widget_link_widget .side-title{ margin-bottom:0; }
.side.widget_simpleimage{ margin-top:0; }


/* =========================================================
   【14】フッター
   ========================================================= */
footer .footer, footer .line{
  background:#0071BC;
  color:rgba(255,255,255,0.85);
}
footer .footer{
  border-bottom:1px solid rgba(255,255,255,0.2);
  font-size:15px;
}
footer .footer a{ color:rgba(255,255,255,0.85); }
footer .footer a:hover{ color:#FFFFFF; }
footer .line{
  border-top:1px solid rgba(255,255,255,0.2);
  text-shadow:none;
}
footer .line .copyright{
  color:rgba(255,255,255,0.65);
  font-size:12px;
}
footer .footer-link a{ font-size:14px; }


/* =========================================================
   【15】表
   ========================================================= */
#main table{ border-collapse:collapse; width:100%; }
#main table th{
  background:#F4F6F8;
  color:#2B3440;
  font-weight:bold;
  border:1px solid #DDE3E9;
  padding:10px 12px;
}
#main table td{
  border:1px solid #DDE3E9;
  padding:10px 12px;
  background:#FFFFFF;
}
#main .content-body .table-title,
#main .content-body .list-title,
#main .content-body .map-title,
#main .content-body .video-title{
  background:#F4F6F8;
  border-left:5px solid #0071BC;
  border-radius:0 6px 6px 0;
  padding:9px 14px;
  margin-top:24px;
  margin-bottom:10px;
  font-size:16px;
  color:#2B3440;
}
#main .content-body .table-scroll{
  border:1px solid #DDE3E9;
  border-radius:8px;
  padding:10px;
  background:#FFFFFF;
  margin-bottom:22px;
}


/* =========================================================
   【16】色を選ばずに追加した見出しにも、同じ帯を自動で付ける
   ・新しい記事やページを作るとき、色の設定をしなくてOKになります
   ・色を選んだ見出しは「青い外箱の中に見出し」という二重の作りなので、
     帯の幅・高さ・上下の線の位置を同じ寸法にそろえています
     （寸法はブラウザで実測して合わせたもの）
   ========================================================= */
#main .content-body:not(.back-color-content) .headline-h2{
  position:relative;
  background:#0071BC;
  color:#FFFFFF !important;
  display:block;
  font-size:20px;
  border-top:none;
  border-bottom:none;
  border-radius:12px;
  margin-top:40px;
  margin-bottom:22px;
  margin-left:-26px;
  margin-right:-26px;
  padding:24px 26px 46px;
}
#main .content-body:not(.back-color-content) > .headline-h2:first-child{
  margin-top:-22px;
  border-radius:12px 12px 0 0;
}
/* 上下の線を、青い帯の内側（文字の上と下）に引く */
#main .content-body:not(.back-color-content) .headline-h2.hl-ul-udl:before,
#main .content-body:not(.back-color-content) .headline-h2.hl-ul-udl:after{
  content:"";
  position:absolute;
  left:26px;
  right:26px;
  display:block;
  width:auto;
  height:0;
  margin:0;
  background:none;
  border-top:1px solid rgba(255,255,255,0.45);
}
#main .content-body:not(.back-color-content) .headline-h2.hl-ul-udl:before{ top:18px; }
#main .content-body:not(.back-color-content) .headline-h2.hl-ul-udl:after{ bottom:38px; }


/* =========================================================
   【17】「ページ上部へ」ボタン・スマホのメニューボタン
   ========================================================= */
#pagetop, #pagetop a{
  background:#0071BC !important;
  color:#FFFFFF !important;
  border-radius:50% !important;
}
#header-smp-menu-link{
  background:#0071BC !important;
  color:#FFFFFF !important;
}


/* =========================================================
   【18】ページタイトルの帯
   ========================================================= */
.page-title.hl-backclr, .page-title.hl-stripe{
  background-color:#FFFFFF;
  color:#2B3440;
  padding:14px 18px;
  border-left:5px solid #0071BC;
  border-radius:0 8px 8px 0;
}


/* =========================================================
   【19】スマホでの読みやすさ（689px以下のみ）
   ========================================================= */
@media (max-width:689px){
  #main p{ font-size:15px; line-height:1.95; }
  #main .content-body{
    padding:16px 14px;
    border-radius:10px;
    margin-bottom:20px;
  }
  #main .content-body > .headline-h3{
    font-size:15.5px;
    margin-left:-14px;
    margin-right:-14px;
    padding:11px 14px;
  }
  #main .content-body > .headline-h3:first-child{ margin-top:-16px; }
  #main .content-body:not(.back-color-content) .headline-h2{
    margin-left:-14px;
    margin-right:-14px;
    padding-left:14px;
    padding-right:14px;
  }
  #main .content-body:not(.back-color-content) > .headline-h2:first-child{
    margin-top:-16px;
  }
  #main .content-body:not(.back-color-content) .headline-h2.hl-ul-udl:before,
  #main .content-body:not(.back-color-content) .headline-h2.hl-ul-udl:after{
    left:14px;
    right:14px;
  }
  .more,
  input[type="submit"],
  button[type="submit"]{ min-height:48px !important; font-size:15px !important; }
}


/* =========================================================
   【20】他のサイトから貼った文章の書式を打ち消す
   ・InstagramやWord、LINEから文章をコピーして貼ると、本文が
     「見出し」扱いになったり、書体や大きさが付いてきたりします
   ・見出しカセットで作った正式な見出しには「headline」という名前が
     付いています。付いていない見出しは、ふつうの本文の見た目に戻します
   ・貼るときに Ctrl + Shift + V（書式なしで貼り付け）を使えば、
     そもそもこの問題は起きません
   ========================================================= */
#main .content-body h1:not([class*="headline"]),
#main .content-body h2:not([class*="headline"]),
#main .content-body h3:not([class*="headline"]),
#main .content-body h4:not([class*="headline"]),
#main .content-body h5:not([class*="headline"]),
#main .content-body h6:not([class*="headline"]){
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,Arial,sans-serif;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:normal;
  text-align:inherit;
  color:inherit;
  background:none;
  border:none;
  padding:0;
  margin:0 0 18px;
}
#main .content-body [style*="font-family"]{
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,Arial,sans-serif !important;
}