@charset "Shift_JIS";

/* =============================================================================
   リセット (html5doctorを利用)
============================================================================= */

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, footer, header, nav, main, section, article,
h1, h2, h3, h4, h5, h6, p, address, em, img, small,
dl, dt, dd, ol, ul, li, table, caption, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 vertical-align: baseline;
 background: transparent;
 box-sizing: border-box;
}

body {
 -webkit-text-size-adjust: 100%;
}

footer, header, nav, section {
 display: block;
}

a {
 margin: 0;
 padding: 0;
 vertical-align: baseline;
 background: transparent;
}

table {
 border-collapse: collapse;
 border-spacing: 0;
}

hr {
 display: block;
 padding: 0;
 width: 90%;
 height: 1px;
 border: 0;
 border-top: 1px solid #ccc;
}

img {
 vertical-align: middle;
}


/* =============================================================================
   全ページ・全レイアウト共通
============================================================================= */

/* フォント関連
------------------------------------------------------------------- */

/* 色・書体・行間 ----------------------------- */

html {
 color: #000;
 font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
 line-height: 1.5;
}

/* サイズ (単位 rem) -------------------------- */

html { font-size: 62.5%;  } /* 10px */
body { font-size: 1.6rem; } /* 16px */

/* 全体のリンク関連 (色・装飾)
------------------------------------------------------------------- */

a:link {
 color: #45b9ef;
}

a:visited {
 color: #9370db;
}

a:hover {
}

a:active {
}

/* ヘッダ
------------------------------------------------------------------- */

/* サブ --------------------------------------- */

header {
 background: url(../image/sub_header_bg.png) repeat-x 0 100% #45b9ef;
 border-radius: 0 0 10px 10px;
 height: 100px;
 margin: 0 auto 32px auto;
 width: 960px;
}

#logo {
 line-height: 1;
 margin: 0 auto;
 padding-top: 5px;
 text-align: center;
}

#logo:before {
 content: url(../image/sub_header_character.png);
 margin-right: 14px;
 vertical-align: -62px;
}

/* トップ ------------------------------------- */

.home header {
 background: url(../image/top_header_bg.png) repeat-x 0 100% #45b9ef;
 border-radius: 0 0 10px 10px;
 height: 240px;
}

.home #logo {
 line-height: 1;
 margin: 0 auto;
 padding-top: 11px;
 text-align: center;
}

.home #logo:before {
 content: url(../image/top_header_character.png);
 margin-right: 34px;
 vertical-align: -118px;
}

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

nav {
 margin: 0 auto;
 padding-left: 20px;
 width: 900px;
}

.global_nav {
 display: flex;
 position: relative;
 width: 100%;
}

.global_nav li {
 display: block;
 list-style-type: none;
 position: relative;
}

.global_nav a {
 display: flex;
 padding: 10px 40px;
 text-decoration: none;
 color: #2e5b70;
 background: #a2dffb;
 border-top-left-radius: 15px;
 border-top-right-radius: 15px;
}

.global_nav a:hover {
 text-decoration: underline;
}

.global_nav .active {
 z-index: 3;
}

.global_nav .active a {
 background: #45b9ef;
 color: #000;
}

.global_nav li:before,
.global_nav li:after,
.global_nav li a:before,
.global_nav li a:after {
 position: absolute;
 bottom: 0;
}

.global_nav li:last-child:after,
.global_nav li:last-child a:after,
.global_nav li:first-child:before,
.global_nav li:first-child a:before,
.global_nav .active:after,
.global_nav .active:before,
.global_nav .active a:after,
.global_nav .active a:before {
 content: "";
}

.global_nav .active:before,
.global_nav .active:after {
 background: #45b9ef;
 z-index: 1;
}

.global_nav li:before,
.global_nav li:after {
 background: #a2dffb;
 width: 10px;
 height: 10px;
}

.global_nav li:before {
 left: -10px;
}

.global_nav li:after {
 right: -10px;
}

.global_nav li a:after,
.global_nav li a:before {
 background: #fff;
 border-radius: 10px;
 width: 20px;
 height: 20px;
 z-index: 2;
}

.global_nav .active a:after,
.global_nav .active a:before {
 background: #a2dffb;
}

.global_nav li:first-child.active a:before,
.global_nav li:last-child.active a:after {
 background: #fff;
}

.global_nav li a:before {
 left: -20px;
}

.global_nav li a:after {
 right: -20px;
}

/* メイン
------------------------------------------------------------------- */

main {
 border: solid 5px #45b9ef;
 display: block; /* IE11対策 */
 margin: 0 auto;
 padding: 30px 25px 15px 25px;
 text-align: justify;
 text-justify: inter-ideograph;/* IE対策 */
 width: 920px;
}

main h1 {
 background: url(../image/h1_bg.jpg) no-repeat 0 100%;
 color: #de6f8e;
 font-size: 24px;
 letter-spacing: 0.2rem;
 line-height: 1;
 margin-bottom: 24px;
 padding: 20px 0 12px 60px;
}

main h2 {
 background: #45b9ef;
 border-radius: 10px;
 color: #fff;
 font-size: 20px;
 line-height: 1.2;
 margin: 40px 10px 24px 120px;
 padding: 12px 16px;
 position: relative;
 text-shadow:
  #1280b4 2px 0, #1280b4 -2px 0,
  #1280b4 0 -2px, #1280b4 0 2px,
  #1280b4 2px 2px, #1280b4 -2px 2px,
  #1280b4 2px -2px, #1280b4 -2px -2px,
  #1280b4 1px 2px, #1280b4 -1px 2px,
  #1280b4 1px -2px, #1280b4 -1px -2px,
  #1280b4 2px 1px, #1280b4 -2px 1px,
  #1280b4 2px -1px, #1280b4 -2px -1px;
}

main h2:before {
 content: url(../image/h2_before_character.jpg);
 position: absolute;
 top: -6px;
 left: -86px;
}

main h2:after {
 border: solid 10px transparent;
 border-right: solid 14px #45b9ef;
 content: "";
 position: absolute;
 top: 16px;
 left: -24px;
}

main h3 {
 border-bottom: solid 2px #de6f8e;
 color: #de6f8e;
 font-size: 18px;
 line-height: 1.2;
 margin: 20px 30px 12px 130px;
 padding: 2px 10px;
}

main h4 {
 font-size: 16px;
 line-height: 1.2;
 margin: 20px 30px 4px 140px;
}

main h4:before {
 color: #de6f8e;
 content: "\f058";
 font-family: "Font Awesome 5 Free";
 margin-right: 0.4rem;
}

main h5, main h6 {
 font-size: 16px;
 line-height: 1.5;
}

main p {
 margin: 0 60px 0 160px;
}

main ul {
 margin: 0 60px 0 180px;
}

main ol {
 margin: 0 60px 0 183px;
}

main dl {
 margin: 0 60px 0 160px;
}

main dd {
 margin: 0 0 0 1.8rem;
}

/* フッタ
------------------------------------------------------------------- */

footer {
 margin: 0 auto;
 padding-bottom: 30px;
 width: 920px;
}

/* コピーライト ------------------------------- */

.copyright {
 line-height: 2;
 text-align: center;
}

/* ナビゲーション関連
------------------------------------------------------------------- */

/* ページのトップに戻るナビ ------------------- */

.pagetop_nav {
 font-size: 1.4rem;
 margin: 30px 30px 0 auto;
 text-align: right;
}

.pagetop_nav a {
 color: #45b9ef;
 text-decoration: none;
}

.pagetop_nav:before {
 color: #45b9ef;
 content: '\f0aa';
 font-family: "Font Awesome 5 Free";
 font-weight: bold;
 margin-right: 0.5rem;
}

/* 汎用
------------------------------------------------------------------- */

.txt_right {
 text-align: right;
}


/* =============================================================================
   各カテゴリごと(トップページ含む)
============================================================================= */


/* 塾について
------------------------------------------------------------------- */

/* 住所・TEL/FAX・mail/Web -------------------- */

.us_info dt {
 border-bottom: dotted 1px #45b9ef;
 display: inline-block;
 font-size: 1.8rem;
 font-weight: bold;
 margin-bottom: 6px;
 padding: 0 5px;
}

.us_info dd {
 padding: 3px 5px;
}

/* 講師プロフィール --------------------------- */

.profile {
 display: flex;
}

.profile dt {
 border-bottom: dotted 1px #45b9ef;
 font-size: 1.8rem;
 font-weight: bold;
 margin-bottom: 6px;
 padding: 0 5px;
}

.profile dd {
 padding: 3px 5px;
}

.profile p {
 margin: 0;
}

/* 講習日程・料金
------------------------------------------------------------------- */

/* 時間割 ------------------------------------- */

.timetable {
 border: solid 2px #999;
 margin: 0 60px 8px 160px;
}

.timetable th, .timetable td {
 border: solid 1px #ccc;
 padding: 6px 12px;
}

.timetable .course {
 width: 26rem;
}
.timetable .week {
 width: 12rem;
}

/* 月謝 --------------------------------------- */

.monthly_fee dt {
 border-bottom: dotted 1px #45b9ef;
 display: inline-block;
 padding: 0 5px;
}

.monthly_fee dd {
 padding: 3px 5px;
}

.monthly_fee ul {
 margin-left: 2rem;
}

/* 徒然草
------------------------------------------------------------------- */


/* HOME
------------------------------------------------------------------- */

.home main p {
 margin: 0 0 2rem 0;
 text-align: center;
}

/* 新着情報 ----------------------------------- */

.info a {
 color: #000;
}

.info h2 {
 background: url(../image/h1_bg.jpg) no-repeat 0 100%;
 color: #de6f8e;
 font-size: 24px;
 letter-spacing: 0.2rem;
 line-height: 1;
 margin: 0 0 0.8rem 0;
 padding: 20px 0 12px 60px;
 text-shadow: none;
}

.info h2:before, .info h2:after {
 content: none;
}

.info dl {
 margin-left: 6rem;
}

.info dt {
 border-top: dotted 1px #45b9ef;
 padding: 0 5px;
}

.info dd {
 padding: 3px 5px;
}

/* ブログ ------------------------------------- */

.bnr_blog {
 list-style-type: none;
 margin: 0.5rem 0 0 auto;
 text-align: right;
}

.bnr_blog a:hover {
 opacity: 0.8;
}