/**
* Page専用css
*
* @author: zenkyoken
* @since 1.0.1 2024.06.23 レイアウト修正
*
*/

@charset "UTF-8";

/* ==========================================================================
   固定ページ共通レイアウト by Maru
   ========================================================================== */
/* メイン画像 */
#page-main {
    display: flex;
    height: 190px;
    margin-bottom: 20px;
}
#page-main .page-maintitle {
    width: 40%;
}
#page-main .page-mainimg {
    width: 60%;
}
#page-main .page-maintitle {
    background: #007338;
    color: #ffffff;
}
#page-main .page-maintitle {
    text-align: center;
    position: relative;
    box-shadow: 93px 0 rgba(255, 130, 0, 0.6);
}
/*
#page-main .page-maintitle::before{
  content: "";
  background-color: #ffffff;
  width: 120px;
  height: 60px;
  position: absolute;
  top: 0;
  left: 25%;
  opacity: 0.3;
}
*/
#page-main .page-maintitle::after{
  content: "";
  background-color: #ffffff;
  width: 100px;
  height: 100px;
  border-radius: 50% 50% 0% 0%;
  position: absolute;
  bottom: 0;
  right: 25%;
  opacity: 0.3;
}

#page-main .page-imgtitle span {
    font-size: 33px;
    font-weight: bold;
    margin: 0;
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    text-align: left;
    line-height: 1.4;
}
#page-main .page-maintitle.no-images {
    width: 100%;
    height: 100%;
    border: none;
    padding: 30px;
}
#page-main .page-maintitle.no-images .page-imgtitle {
    margin-top: 50px;
}
#page-main .page-maintitle.no-images .page-imgtitle span {
    position: static;
    transform: none;
}
#page-main .page-mainimg {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
}
#page-main .page-mainimg img {
    width: 100%;
}
@media only screen and (max-width: 767px) {
    #page-main {
        display: block;
    }
    #page-main .page-maintitle,
    #page-main .page-mainimg {
        width: 100%;
    }
    #page-main .page-maintitle.no-images .page-imgtitle {
        margin-top: 0px;
    }
    #page-main .page-imgtitle span {
        font-size: 18px;
        display: block;
        position: static;
        transform: none;
        padding-left: 10px;
    }
    #page-main .page-imgtitle {
        margin: 0;
        padding: 10px 0;
    }
}

#page-main2 {
    display: flex;
    height: 100%;
}
#page-main2 .page-mainimg {
    width: 100%;
}
/* 各ページタイトル用画像指定 スラッグ基準*/
/* 中ページ用共通 */
.page-wrap {
    max-width: 1080px;
    margin: 0 auto 40px;
    display: block;
}
.page-area {
    padding: 70px 0;
}

/* 中ページフッター周り調整 */
.page-contents .hentry {
    margin: 0;
}
@media only screen and (max-width: 767px) {
    .page-wrap {
        width: 100%;
        padding: 0 10px;
    }
}

/* ==========================================================================
   パンくずCSS
   ========================================================================== */
/*** PC ***/
.breadcrumbs {
    max-width: 1030px;
    margin: 0 auto 60px;
    z-index: 1000;
    text-align: left;
    padding-top: 30px;
    padding-left: 30px;
}
#breadcrumbs {
    color: #333;
}
#breadcrumbs a {
    color: #333;
}
#breadcrumbs span {
    margin: 0 10px;
}
#breadcrumbs br {
    display: none;
}
/* SP */
@media only screen and (max-width: 767px) {
    .breadcrumbs {
        top: 20px;
        padding-top: 0px;
    }
    #breadcrumbs {
        display: none;
    }
}

/* ==========================================================================
   固定ページ用 addquicking 登録CSS
   ========================================================================== */
.p-col {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    flex-wrap: wrap;
}
/* 2カラム */
.p-col.p-col2>div {
    width: 48%;
}
/* 3カラム */
.p-col.p-col3>div {
    width: 31%;
}
/* 4カラム */
.p-col.p-col4>div {
    width: 23%;
}
@media only screen and (max-width: 767px) {
    .p-col {
        display: block;
    }
    /* 2カラム */
    .p-col.p-col2>div {
        width: 100%;
    }
    /* 3カラム */
    .p-col.p-col3>div {
        width: 100%;
    }
    /* 4カラム */
    .p-col.p-col4>div {
        width: 50%;
    }
    .arrowlink-page {
        width: 100%;
        padding: 16px;
    }
    .p-col .p-col2.rph-first:nth-of-type(odd),
    .p-col .p-col2.rph-last:nth-of-type(even) {
        margin: 0;
        float: none;
    }
}

/* 矢印付きリンクボタン */
a.page-common-link {
    display: table;
    width: auto;
    border: 1px solid #fff;
    padding: 8px 70px;
    color: #fff;
    text-align: center;
    position: relative;
    margin: 0 auto;
    border-radius: 5px;
}
a.page-common-link::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}
a.page-common-link.center {
    margin: 0 auto;
}

/* 見出しタイトル */
.page-title {
    padding: 40px 0;
    margin-bottom: 80px;
    background: #f8f1d4;
    text-align: center;
    font-size: 30px;
}
.page-title h4 {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 30px;
    line-height: 1.4;
}
.page-title p {
    text-align: center;
}
.head-title {
    box-sizing: border-box;
    font-size: 20px;
    border-left: 5px solid #006ab5;
    line-height: 1;
    padding: 20px 0 20px 20px;
    font-weight: bold;
}
.head-title span {
    font-size: 33px;
}
.head-title-lv2 {
    font-size: 30px;
    color: #006ab5;
    font-weight: 500;
}
.head-title-lv3 {
    font-size: 24px;
}
@media only screen and (max-width: 767px) {
    .page-title {
        padding: 60px 20px;
    }
    .page-title h4 {
        font-size: 20px;
    }
    .page-title p {
        text-align: justify;
    }
    .page-title p br {
        display: none;
    }
    .head-title {
        font-size: 24px;
        padding: 10px;
    }
    .head-title span {
        font-size: 20px;
    }
    .head-title-lv2 {
        font-size: 18px;
    }
    .head-title-lv3 {
        font-size: 16px;
    }
}

/* 2カラム用左寄せタイトルと文章 */
.page-left-title {
    display: block;
    line-height: 1;
    margin: 0 auto 50px;
}
.page-left-title h4 {
    font-size: 45px;
    margin-bottom: 106px;
    font-weight: normal;
    font-family: 'Noto Serif JP', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', serif;
}
.page-left-title h4::after {
    display: block;
    content: "";
    width: 34px;
    height: 6px;
    background: #4db047;
    position: relative;
    top: 50px;
}
.page-left-title p {
    font-size: 16px;
    line-height: 1.8em;
    margin-bottom: 2em;
}
.beige-wrapper {
    background: #f1f0e6;
    padding: 50px;
}
.beige-wrapper.bw2 {
    padding: 25px 10px 25px 50px;
}

/* キーカラーと太文字 */
.indent-blue::first-letter {
    color: #006ab5;
}
.indent-red::first-letter {
    color: #cf0037;
}

@media only screen and (max-width: 767px) {
    /* 共通テーブル */
    .responsive-table01,
    .responsive-table01 th,
    .responsive-table01 td {
        width: 100%;
        display: block;
        padding: 20px;
    }
    .responsive-table01 tbody,
    .responsive-table01 tr {
        width: 100%;
        display: block;
    }
    .green-bar-title {
        line-height: 1.4;
        padding: 10px;
    }
    .responsive-table01 tbody {
        border-style: solid;
        border-color: #aaa;
        border-width: 1px 1px 0 1px;
    }
    .beige-wrapper.bw2 {
        padding: 25px;
    }
    .page-contents-title span,
    .page-left-title h4 {
        font-size: 26px;
        margin-bottom: 50px;
    }
    .page-contents-title span::after,
    .page-left-title h4::after {
        top: 25px;
    }
    .beige-wrapper {
        padding: 25px;
    }
    .green-radius-title span {
        padding: 20px;
        font-size: 20px;
        line-height: 1.4;
    }

    /* 共通アンカーリンク */
    .anker-link {
        display: block;
        padding-top: 80px;
        margin-top: -80px;
    }

}

/* ==========================================================================
   グローバルナビページCSS
   ========================================================================== */
/* helper class --------------------------------------------- */
.block-link a {
    display: block;
}
a.gline-link,
a:link.gline-link,
a:hover.gline-link,
a:visited.gline-link,
a:active.gline-link {
    color: #4db047;
    text-decoration: underline;
}
.mov-tumb a {
    position: relative;
    display: block;
}
.mov-tumb a::before {
    content: url('../wp-content/themes/syoei_template/library/images/icon-play.png');
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 93px;
    height: 93px;
    z-index: 9999;
}
.hr-m20 {
    margin: 40px 0;
}
.p-top {
    padding-top: 80px;
}
a.link-text {
    color: #006ab5;
    text-decoration: underline;
}


/* ==========================================================================
   カテゴリー一覧ページ
   ========================================================================== */
.newstopics-area .cate {
    padding: 2px 5px;
    background: #006ab5;
    width: 50%;
    margin: 0 auto 10px;
}
.newstopics-area .cate a {
    display: inline-block;
    color: #fff;
    text-align: center;
    width: 6em;
}
.new-topics li {
    padding: 25px;
    border-bottom: 1px solid #bfbfbf;
}
.new-topics li span {
    margin-right: 30px;
}
.new-topics li .cate {
    background: #006ab5;
    color: #fff;
    padding: 2px 10px;
    line-height: 1;
}
.cate_pdf,
.new-topics li .cate_pdf {
    background: #ffffff;
    font-size: 2.0rem;
}
@media only screen and (max-width: 767px) {

    .new-topics li {
        padding: 15px 0px;
    }
    .new-topics li .text {
        display: block;
        padding: 20px 0 0;
    }
    .newstopics-area .cate {
        width: 80%;
    }
    .new-topics li span {
        margin-right: 20px;
    }
}

/* ==========================================================================
   固定ページ用 CSS
   ========================================================================== */

/* .page-contents{
    background: url('../wp-content/themes/syoei_template/library/images/point-back_02.png') repeat-x;
    background-position: left bottom;
   } */

/* ==========================================================================
   お問い合わせ
   ========================================================================== */
#form-main {
    background: #006ab5;
    color: #fff;
    margin-bottom: 20px;
}
.form-maintitle {
    padding: 30px 0;
}
.form-maintitle .page-imgtitle {
    font-size: 33px;
    margin: 0;
}
.form-title {
    background: #006ab5;
    text-align: center;
    font-size: 25px;
    color: #fff;
    padding: 10px 0;
}
.form-table {
    width: 100%;
    margin-bottom: 30px;
    border-top: 1px solid #ccc;
}
.form-table th,
.form-table td {
    padding: 20px;
    border-bottom: 1px solid #ccc;
}
.form-table th {
    width: 30%;
    text-align: left;
    font-weight: normal;
    color: #434343;
    background: #f8f1d4;
    padding-left: 20px;
    font-weight: bold;
}
.submitbtns {
    margin-bottom: 170px;
}
.mw_wp_form_confirm+.submitbtns input[type="submit"] {
    width: 40%;
    display: inline-block;
}
.mw_wp_form a.privacy_link {
    text-decoration: underline;
    color: #004986;
}
@media only screen and (max-width: 767px) {
    .mw_wp_form .common-wrap {
        padding: 0;
    }
    .form-maintitle .page-imgtitle {
        font-size: 24px;
        margin: 0;
        text-align: center;
    }
    .form-title {
        padding: 10px 0;
        font-size: 16px;
    }
    .form-title h4 {
        font-size: 30px;
        font-weight: normal;
        letter-spacing: 4px;
        line-height: 1.2;
    }
    .form-title p {
        font-size: 12px;
        line-height: 1.6;
    }
    .form-table,
    .form-table tbody,
    .form-table tr,
    .form-table th,
    .form-table td {
        width: 100%;
        display: block;
    }
    .form-table th,
    .form-table td {
        padding: 10px;
    }
    .submitbtns {
        margin-bottom: 80px;
    }
    .submitbtns input[type="submit"] {
        width: 100%;
        margin: 0;
    }
}

/* ==========================================================================
   コース紹介
   ========================================================================== */
.anker_link_list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width:100%;
}
/* .anker_link_list:before {
  content: '';
  display: block;
  width: calc( 35% - 50px );
} */
.anker_link_list:after {
  content: '';
  display: block;
  width: calc( 35% - 50px );
  margin: 10px 25px;
}
.anker_link_list li{
  width: calc( 35% - 50px );
  margin: 10px 25px;
  border-radius: 25px;
  font-weight: bold;
  padding: 10px 0px;
}
.anker_link_list li span{
  width: 30%;
  min-width: 100px;
  font-size: 16px;
  font-weight: bold;
  padding: 0px 10px;
}
.anker_link_list li a {
  display: block;
}
.anker_link_list .anker_link_list_dummy {
  border: none !important;
}

.es .anker_link_list li{
  border: 1px solid #FF6F74;
}

.es .anker_link_list li span{
  color: #FF6F74;
}

.jhs .anker_link_list li{
  border: 1px solid #00B886;
}

.jhs .anker_link_list li span{
  color: #00B886;
}

.hs .anker_link_list li{
  border: 1px solid #009CEC;
}

.hs .anker_link_list li span{
  color: #009CEC;
}

.tokushin .anker_link_list li{
  border: 1px solid #FE9F27;
}

.tokushin .anker_link_list li span{
  color: #FE9F27;
}

.course_target_title{
  padding: 30px 0px;
  width:100%;
  text-align: center;
  position: relative;
  font-size: 32px;
  font-weight: bold;
  color: #ffffff;
  margin: 0px 0px -24px 0px;
}

.es .course_target_title{
  background-color: #FFAAAD;
}
.jhs .course_target_title{
  background-color: #68D5B8;
}
.hs .course_target_title{
  background-color: #79C4F5;
}
.tokushin .course_target_title{
  background-color: #FFC27F;
}

.course_target_title::after{
  content: "";
  position: absolute;
  display: inline-block;
  border-style: solid;
  border-width: 24px 28px 0 28px;
  bottom:-22px;
  left: 50%;
  transform: translateX(-50%);

}

/* ---------------小学生--------------- */
.es .course_target_title::after{
  border-color: #FFAAAD transparent transparent transparent
}

.es .course-outer{
  background-color: #FFF1F1;
  padding: 80px;
}

.es .course-outer .course-inner{
  display: block;
  background-color: #FFFFFF;
  /* width:80%; */
  width:100%;
  margin: 60px auto;
  padding: 30px 10px;
}
/* ---------------中学生--------------- */
.jhs .course_target_title::after{
  border-color: #68D5B8 transparent transparent transparent
}

.jhs .course-outer{
  background-color: #E8F9F3;
  padding: 80px;
}
.jhs .course-outer .course-inner{
  display: block;
  background-color: #FFFFFF;
  /* width:80%; */
  width:100%;
  margin: 60px auto;
  padding: 30px 10px;
}

/* ---------------高校生--------------- */
.hs .course_target_title::after{
  border-color: #79C4F5 transparent transparent transparent
}

.hs .course-outer{
  background-color: #EAF5FF;
  padding: 80px;
}
.hs .course-outer .course-inner{
  display: block;
  background-color: #FFFFFF;
  /* width:80%; */
  width:100%;
  margin: 60px auto;
  padding: 30px 10px;
}

/* ---------------特進--------------- */
.tokushin .course_target_title::after{
  border-color: #FFC27F transparent transparent transparent
}

.tokushin .course-outer{
  background-color: #FFF5EB;
  padding: 80px;
}
.tokushin .course-outer .course-inner{
  display: block;
  background-color: #FFFFFF;
  /* width:80%; */
  width:100%;
  margin: 60px auto;
  padding: 30px 10px;
}
@media only screen and (max-width: 767px) {
  .tokushin .course-outer{
    padding: 40px 0;
  }
  .tokushin .course-outer .course-inner{
    width:90%;
    margin: 4rem auto 0;
    padding: 10px;
  }
    
}

.point-outer{
  position: relative;
  height: 10px;
}
.point-inner{
  position: absolute;
  top:-60px;
  left:-40px;
  display:table;
  border-collapse:separate;
  border-spacing: 8px 0;
}
.point-inner .point{
  border-radius: 50%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 80px;
  height: 80px;
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 1;
  margin: 0px 10px;
}
.point-inner .point.risha {
  vertical-align: initial;
  padding-top: 4%;
}
.point.blue{
  background-color: #002F94;
}
.point.green{
  background-color: #00743A;
}
.point.point_dummy {
  background-color: transparent;
}
.point.font-s{
  font-size: 14px;
}
.point i{
  font-size: 8px;
}
.point-inner .point .point_row2 {
  display: flex;
  line-height: 1.4;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 70px;
}
.point-inner .point .point_i {
  font-style: italic;
  font-size: 80%;
}

.course-title-catch-outer{
  display: flex;
  flex-wrap        : wrap;
  justify-content: center;
  /* margin: 50px 0px; */
  margin: 50px 0px 0px;
}
.course-title-catch{
  color: #002F96;
  padding: 10px 20px;
  display: block;
  width: auto;
  position: relative;
  text-align: center;
}
.course-title-catch span{
  background: linear-gradient(transparent 0%, #FFF000 0%);
  margin: 0px auto;
  padding: 5px;
}
.course-title-catch::before{
  content: url('../wp-content/themes/syoei_template/library/images/course_catch_deco.png');
  position: absolute;
  top: -30px;
  right: -35px;
}
.course-title-catch-outer2nd{
  display: flex;
  flex-wrap        : wrap;
  justify-content: center;
  margin: -30px 0px 30px 0px;
}
.course-title-catch2nd{
  background-color: #FFF000;
  color: #002F96;
  padding: 10px 20px;
  display: block;
  width: auto;
  margin: 0px auto;
  position: relative;
  order:2;
}
.course-title-subtitle{
  font-size: 26px;
}
.es .course_grade_title{
  margin: 10px 20px;
  padding: 10px 20px;
  background-color: #FF6F74;
  text-align: center;
  color: #ffffff;
  font-size: 22px;
}
.jhs .course_grade_title{
  margin: 10px 20px;
  padding: 10px 20px;
  background-color: #00B886;
  text-align: center;
  color: #ffffff;
  font-size: 22px;
}
.hs .course_grade_title{
  margin: 10px 20px;
  padding: 10px 20px;
  background-color: #009CEE;
  text-align: center;
  color: #ffffff;
  font-size: 22px;
}
.tokushin .course_grade_title{
  margin: 10px 20px;
  padding: 10px 20px;
  background-color: #FF980B;
  text-align: center;
  color: #ffffff;
  font-size: 22px;
}

.course_detail_outer{
  margin: 10px 20px;
}
/*
.course-photo{
  margin: 20px;
}
*/
.course_outline_table{
  width:100%;
  margin: 20px 0px;
}
.course_outline_table th{
  text-align: center;
  width:25%;
  background-color: #002F94;
  color: #FFFFFF;
  padding: 5px 0px;
  border: 1px solid #C2C2C2;
}
.course_outline_table td{
  padding: 5px 5px;
  border: 1px solid #C2C2C2;
  font-weight: bold;
}
.course_outline_table .letter_spacing {
  letter-spacing: 1em;
  padding-left: 1em;
}
.classroom{
  color: #2409FF;
}

.tokushin-btn{
  font-size: 1.4rem;
  font-weight: bold;
  background-color: #FF980C;
  border-radius: 50px;
  color: #FFFFFF !important;
  display: block;
  margin: 0 auto;
  text-align: center;
  max-width: 70%;
  padding: 15px;
  position: relative;
}
.tokushin-btn span.strong{
  font-size: 1.8rem;
}
.tokushin-btn span.strong.yellow{
  font-size: 1.8rem;
  color: #FFCC00;
}
.tokushin-btn::after{
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  color: #FFFFFF !important;
  font-size: 1.6rem;
  right: 20px;
  /* line-height: 2.5; */
  top: 55%;
  transform: translateY(-50%);
}

@media only screen and (max-width: 767px) {
  .es .course-outer{
    padding: 10px;
  }
  .jhs .course-outer{
    padding: 10px;
  }
  .hs .course-outer{
    padding: 10px;
  }
  .point-inner{
    width: auto;
  }
  .point-inner .point{
    display: inline-block;
    font-size: 110%;
    width: 70px;
    height: 70px;
    line-height: 70px;
    margin: 0 4px;
  }
  .point-inner .point.risha {
    padding-top: 2%;
  }
  .point.font-s{
    font-size: 12px;
  }
  .anker_link_list li{
    width: 90%;
  }
  .point-inner {
    left: -15px;
    width: 100%;
  }

  .course-title-catch{
    padding: 10px 0px;
  }
  .course-title-catch span{
    padding: 5px 10px;
  }
  .course-title-catch::before{
    top: -30px;
    right: 30px;
  }
  .course-title-catch-outer{
    margin: 40px 0px 0px;
  }
  
  .course_detail_outer{
    margin: 10px 0;
  }
  .course-photo{
    margin: 20px auto;
  }

  .tokushin-btn{
    border-radius: 50px;
    margin: 0 auto 3rem;
    max-width: 95%;
    line-height: 1.5;
  }
  .tokushin-btn::after{
    right: 20px;
    top: 55%;
    transform: translateY(-50%);
  }
  
}

/* 特進科ページ用 */
.catch-box{
  background-color: #FFF0E1;
}
.catch-box .common-wrap p{
  width:70%;
  margin: 0px auto 0px auto;
  padding: 20px 0px;
  /* font-size: 14px; */
}
@media only screen and (max-width: 767px) {
  .catch-box .common-wrap p{
    width:85%;
  }
}

.tabs-head{
  border-bottom: 3px solid #FF980B;
  width: 100%;
  padding: 0% 2% 0% 2%;
}
.tab-group{
	display: flex;
  justify-content: space-between;
}
.tab-group div{
	/* width:100%; */
	width:50%;
}
.tab_item span{
  width:90%;
  height: 50px;
  margin: 0% auto -2px;
  border: 3px solid #FF980B;
  border-radius: 10px 10px 3px 3px;
  background-color: #FFFFFF;
  line-height: 50px;
  font-size: 23px;
  text-align: center;
  color: #FF980B;
  display: block;
  /* float: left; */
  text-align: center;
  font-weight: normal;
  transition: all 0.2s ease;
  font-family: "M PLUS Rounded 1c";
}
.tab_item.active span{
  background-color: #FF980B;
  color: #FFFFFF;
}
.tab_item:hover {
  opacity: 0.75;
}
.hukidasi{
  text-align: center !important;
  position: relative;
}
.hukidasi span{
  /* position: relative; */
}
.hukidasi:before {
/* .hukidasi span:before { */
    position: absolute;
    left: 25%;
    top: 0;
    content: "";
    width: 1px;
    height: 100%;
    background: #000;
    border-radius: 3px;
    transform: rotate(-25deg);
}
.hukidasi:after {
/* .hukidasi span:after { */
    position: absolute;
    content: "";
    right: 25%;
    top: 0;
    width: 1px;
    height: 100%;
    background: #000;
    border-radius: 3px;
    transform: rotate(25deg);
}
.hukidasi span i{
  color: #FE970A;
  font-size: 16px;
  margin-right: 5px;
}
@media only screen and (max-width: 767px) {
  .tab_item span{
    margin: 0% auto -3px;
  }
  .hukidasi {
    line-height: 1.5 !important;
  }
  .hukidasi:before {
      left: 5%;
      top: 0;
      transform: rotate(-15deg);
  }
  .hukidasi:after {
      right: 5%;
      top: 0;
      transform: rotate(15deg);
  }
  .hukidasi span i{
      margin-right: 0;
  }
  
}

/* --合格実績-- */
.result-box{
  background-color: #FFF0E1;
}
.result-inner-box{
  width:90%;
  margin: 0 auto;
  padding: 40px 0px;
}
.result-title{
  text-align: center;
  background-color: #FF89BD;
  color: #FFFFFF;
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 0;
}
.result-inner-box .col{
  background-color: #FFFFFF;
}
.result-list{
  padding: 20px;
}
.result-list li{
  font-size: 16px;
  padding: 10px 0px 10px 30px;
  position: relative;
  font-weight: bold;
}
.result-list li::before{
  content: url('../wp-content/themes/syoei_template/library/images/tokushin_result_list_icon.png');
  position: absolute;
  left:0;
}
.result-list li a{
  background-color: #C2F4F3;
  border-radius: 20px;
  font-size: 8px;
  font-weight: normal;
  padding: 3px 5px;
  color: #006593;
  margin-left: 5px;
}
.result-list li.main{
  font-size: 18px;
}
@media only screen and (max-width: 767px) {
  .result-inner-box{
    width:95%;
    padding: 0;
  }
  .result-list{
    padding: 10px;
  }
}

/* --説明-- */
.explain-box::before{
  content: "";
  display: block;
  width:100%;
  height: 60%;
  position: absolute;
  background-color: #F8F1E7;
  background-image: linear-gradient(#FFF 1px, transparent 0),
                    linear-gradient(90deg, #FFF 1px, transparent 0),
                    linear-gradient(#FFF 1px, transparent 0),
                    linear-gradient(90deg, #FFF 1px, transparent 0);
  background-size: 40px 40px, 40px 40px, 20px 20px, 20px 20px;
  z-index: 2;
}
.explain-box{
  background-color: #FADFC2;
  background-image: linear-gradient(#FFF 1px, transparent 0),
                    linear-gradient(90deg, #FFF 1px, transparent 0),
                    linear-gradient(#FFF 1px, transparent 0),
                    linear-gradient(90deg, #FFF 1px, transparent 0);
  background-size: 40px 40px, 40px 40px, 20px 20px, 20px 20px;
  position: relative;
  z-index: 1;
}
.explain-box .common-wrap{
  position: relative;
  z-index: 3;
  padding: 50px;
}
.explain-inner-box{
  width:90%;
  margin: 40px auto;
  padding: 0px 0px;
  background-color: #FFFFFF;
}
.explain-title{
  background-color: #FF980B;
  color: #FFFFFF;
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 0;
  padding-left: 15px;
}
.explain-inner-box .col{
  padding: 20px;
}

.explain-inner-box .col .col2 img{
  display: block;
  margin: 0 auto;
}
.explain-link-outer{
  width: 90%;
  margin: 30px auto 0px auto;
  border: 1px solid #FE9909;
  background-color: #FFFFFF;
  /* font-size: 26px; */
  font-size: 190%;
}
.explain-link{
  position: relative;
  display: inline-block;
  width:100%;
}
.explain-link i{
  color:#FE9909;
  margin: 5px 10px 5px 10px;
}
.explain-link::after{
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  background-color: #FF980B;
  color: #FFFFFF;
  position: absolute;
  right:0;
  width: 50px;
  text-align: center;
}
.explain-contents{
  width: 90%;
  margin: 0 auto;
  background-color: #FFFFFF;
  padding: 20px;
  display: none;
}

.explain_schedule_table {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 30px;
    padding-bottom: 40px;
}

.explain_schedule_table div {
    flex-grow: 1;
}

.explain_schedule_table .schedule-wraper {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 30px;
}

.explain_schedule_table .schedule-wraper+.schedule-wraper {
    margin-top: 20px;
}

.explain_schedule_table  .tit_lv1 {
    background-color: #FFECE6;
    border-radius: 8px;
    padding: 0 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #EA4D1C;
    flex-basis: 50px;
}

.explain_schedule_table  .tit_lv2 {
    background-color: #ffffce;
    border: 1px solid #ffffce;
    border-radius: 8px;
    padding: 0 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #3576B3;
    width: 25%;
}

.explain_schedule_table  .tit_lv3 {
    width: 75%;
    background-color: #e8f6ff;
    border: 1px solid #e8f6ff;
    border-radius: 8px;
    padding: 0.5em 1em;
}

.explain_schedule_table .month {
    display: block;
    font-weight: bold;
}

.explain_schedule_table .month-schedule {
    display: block;
    margin-left: 3em;
}
@media only screen and (max-width: 767px) {
  .explain-box .common-wrap {
    padding:0px;
  }
  .explain-link-outer,
  .explain-contents{
    width:100%;
  }
  .explain-link-outer{
    font-size: 150%;
  }
  
  .explain_schedule_table {
    flex-direction: column;
  }
  .explain_schedule_table .schedule-wraper{
    flex-direction: column;
  }
  .explain_schedule_table .tit_lv2{
    order: 2;
    width: 100%;
  }
  .explain_schedule_table .tit_lv3{
    width: 100%;
  }
}

/* ==========================================================================
   お知らせ一覧
   ========================================================================== */
.new-topics {
    width: 90%;
    margin: 0 auto 40px;
}
@media only screen and (max-width: 767px) {
    .new-topics {
        width: 98%;
        margin: 0 auto 20px;
    }
}

/* ==========================================================================
   校舎案内
   ========================================================================== */
.l-col{
  width:60%;
}
.r-col{
  width:40%;
}
.schoolarea{
  background-color: #BBEDF4;
  background-image: url('../wp-content/themes/syoei_template/library/images/bg-schoolarea.png?2503');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 380px;
}
.schoolarea .common-wrap{
  height: 100%;
}
.school_link_list{
  width: 60%;
  padding: 30px 0px 0px 60px;
  display: flex;
  flex-wrap: wrap;
}
.school_link_list li{
  width: calc( 50% - 60px );
  margin: 10px 30px;
  padding: 5px 0px 5px 50px;
  background-color: #0C308E;
  border-radius: 15px;
  border: 1px solid #0C308E;
}
.school_link_list li a{
  color: #FFFFFF !important;
  display: block;
}
.school_link_list li.active{
  background-color: #FFFFFF;
}
.school_link_list li.active a{
  color: #0C308E !important;
}
.school_link_list li a span{
  font-weight: bold;
}


.area-box.schoolmain {
  padding: 40px 0 0;
}
.schoolmain .common-wrap{
  /* padding: 0px 60px; */
}

.schoolmain h3{
  font-size: 28px;
  font-weight: bold;
  color: #0A318C;
  width:100%;
  padding-bottom: 10px;
  border-bottom: 1px solid #0A318C;
}
.schoolmain .r-col img{
  display: block;
  margin: 10px auto;
  padding: 0px 20px;
}
.schoolmain .col3 {
  height: 75px;
}

.timeschedule_area {
  margin: 40px 0;
}
.timeschedule{
  /* display: block; */
  display: flex;
  /* width:95%; */
  width:100%;
  height: 100%;
  align-items: center;
  margin: 5px;
  background-color: #EB7271;
  color: #FFFFFF !important;
  position: relative;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
}
.timeschedule::after{
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right:12px;
  top: 50%;
  transform: translateY(-50%);
}
.gyouji{
  /* display: block; */
  display: flex;
  width:100%;
  height: 100%;
  align-items: center;
  margin: 5px;
  background-color: #4CBE8A;
  color: #FFFFFF !important;
  position: relative;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
}
.gyouji::after{
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right:5px;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (min-width: 768px) {
  .schoolmain .col3 {
    margin-top: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .area-box.schoolmain {
    padding: 40px 0 0;
  }
  .schoolmain h3{
    font-size: 180%;
  }
  .schoolmain .col3 {
    padding: 5px 10px 5px 5px;
  }
}

.schoolblog_list {
  width: 100%;
}
.schoolblog_list li {
  border-bottom: 1px solid #eeeeee;
  padding: 5px 0px 7px;
  margin: 10px 0px;  
}
.schoolblog_list li .list_item {
  display: table;
  width: 100%;
}
.schoolblog_list li .day {
  font-weight: bold;
  display: table-cell;
  width: 15%;
  text-align: right;
  padding-right: 5px;
}
.schoolblog_list li .text {
  display: table-cell;
}

.school_calendar {}
.school_calendar .google_calendar {
  margin: 20px 0 80px;
}
.school_calendar .google_calendar iframe {
  width: 100%;
  height: 600px;
}
.school_calendar .btn_bigsize {
    margin: 2rem auto;
    display: block;
    background-color: #0C308E;
    color: #fff !important;
    font-size: 120%;
    padding: 15px 0;
    text-align: center;
    width: 70%;
}
@media only screen and (max-width: 767px) {
  .area-box.school_calendar {
    padding: 0 0;
  }
  .school_calendar .google_calendar {
    margin: 0 0;
  }
  .school_calendar .google_calendar iframe {
    height: 400px;
  }
  .school_calendar .btn_bigsize {
    width: 90%;
  }
}

.school-aisatu .common-wrap{
  padding: 50px 60px;
}
.school-aisatu-box{
  width: 100%;
  background-color: #E7F9F9;
  padding: 10px 30px;
}
.school-aisatu-box h4{
  font-size: 24px;
  font-weight: bold;
  color: #0A318C;
  width:100%;
  padding-bottom: 10px;
  border-bottom: 1px solid #0A318C;
  text-align: center;
}
.school-aisatu-box p{
  margin: 10px;
}
.school-aisatu .r-col .shoukai{
  display: block;
  margin: 0 auto;
  padding-left:50px;
}
.school-aisatu .r-col .shoukai img{
  max-width: 200px;
}
@media only screen and (max-width: 767px) {
  .school-aisatu .common-wrap{
    padding: 0 0;
  }
}

.school-rinen{
  background-color: #E4F5ED;
  position: relative;
  z-index: -2;
  margin-bottom: -100px;
  padding-bottom: 150px;
}
.school-rinen::before{
  content: "";
  display: block;
  width:100%;
  height: 10%;
  position: absolute;
  background-color: #FFFFFF;
  z-index: -1;
}
.school-rinen .common-wrap{
  padding: 0px 60px;
}
.school-rinen h4{
  width: 100%;
  color: #0A318C;
  font-size: 24px;
  text-align: center;
}
.school-rinen .rinen-point-box{
  width:100%;
  background-color: #0C308E;
  padding: 20px 50px;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: bold;
}
.school-rinen h3{
  color: #0A318C;
  font-size: 20px;
  margin-top: 2rem;
}
.point-1 span{
  color: red;
}
@media only screen and (max-width: 767px) {
  .school-rinen {
    padding-bottom: 90px;
  }
  .school-rinen .common-wrap{
    padding: 0 1rem;
  }
  .school-rinen::before{
    top: 0;
  }
  .school-rinen .rinen-point-box {
    font-size: 120%;
    padding: 2rem 1.5rem;
  }
  .school-rinen .rinen-point-box p {
    text-indent: -2.5rem;
    padding-left: 2.5rem;
  }
  .school-rinen h3 {
    font-size: 140%;
  }

}

.school-info .common-wrap{
  padding: 0px 60px;
}
.school-info-box{
  width: 100%;
  border: 1px solid #0C308E;
  padding: 20px 30px;
  background-color: #FFFFFF;
}
.school-info-box h4{
  width: 100%;
  color: #0A318C;
  font-size: 24px;
  text-align: center;
}

.school-info-table{
  width:100%;
  margin: 20px 0px;
}
.school-info-table th{
  text-align: center;
  width:25%;
  background-color: #002F94;
  color: #FFFFFF;
  padding: 5px 0px;
  border: 1px solid #C2C2C2;
}
.school-info-table td{
  padding: 5px 5px;
  border: 1px solid #C2C2C2;
  font-weight: bold;
}
.school-info .r-col img{
  margin: 10px auto;
  display: block;
  padding: 0px 20px;
}
.school-info .col3 {
  height: 75px;
}
@media only screen and (max-width: 767px) {
  .area-box.school-info {
    padding: 40px 0 0;
  }
  .school-info .common-wrap{
    padding: 0px 1rem;
  }
  .school-info-box{
    padding: 1rem;
  }
  .school-info .col3 {
    padding: 5px 10px 5px 5px;
  }
}

.school-map .common-wrap{
  padding: 30px 60px;
}
.school-map h4{
  width: 100%;
  color: #0A318C;
  font-size: 24px;
  text-align: center;
}
.googlemap{
  width: 100%;
}
.googlemap iframe{
  width: 100%;
  min-height: 300px;
}
@media only screen and (max-width: 767px) {
  .school-map .common-wrap{
    padding: 1rem;
  }
}

.school-appearance{
  background-color: #D8F6F6;
}
.school-appearance .common-wrap{
  padding: 60px 60px;
}
.school-appearance h4{
  width: 100%;
  color: #0A318C;
  font-size: 24px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .school-appearance .common-wrap{
    padding: 1rem;
  }
  
}

@media only screen and (max-width: 767px) {
  .schoolarea{
    background-image: none;
  }
  .school_link_list{
    width:auto;
    padding: 0px;
  }
  .school_link_list li {
    /* padding: 5px 0px 5px 20px; */
    padding: 10px 0px 10px 15px;
    margin: 1rem 5px;
    width: calc( 50% - 10px );
    border-radius: 10px;
  }
  .schoolmain .common-wrap {
    padding: 0px 10px;
  }
  .l-col,.r-col {
    width:100%;
  }
}

/* ==========================================================================
   個別指導
   ========================================================================== */
.title-img{
  width:100%;
  position: relative;
}
.title-img img{
  max-width: 460px;
  display: block;
  margin: 0 auto;
}
.title-img::before{
  content: "";
  background-image: url('../wp-content/themes/syoei_template/library/images/course/course_kobetsu/course_kobetsu_photo1.png');
  background-size: cover;
  background-repeat: no-repeat;
  width:420px;
  height: 360px;
  position: absolute;
  left:0;
  top:0;
  z-index: -1;
}
.title-img::after{
  content: "";
  background-image: url('../wp-content/themes/syoei_template/library/images/course/course_kobetsu/course_kobetsu_photo2.png');
  background-size: cover;
  background-repeat: no-repeat;
  width:420px;
  height: 360px;
  position: absolute;
  right:0;
  top:0;
  z-index: -1;
}

.kobetu-point-title{
  background-color: #00468A;
  color: #FFFFFF;
  font-size: 28px;
  font-weight: bold;
  width: 80%;
  display: block;
  margin: 50px auto -50px auto;
  padding: 10px 10px 20px 10px;
  text-align: center;
  z-index: 2;
  position: relative;
}
.kobetu-point-box{
  width: 100%;
  padding: 80px 80px 80px 80px;
  background-color: #DEF1EE;
  background-image: linear-gradient(#FFF 1px, transparent 0),
                    linear-gradient(90deg, #FFF 1px, transparent 0),
                    linear-gradient(#FFF 1px, transparent 0),
                    linear-gradient(90deg, #FFF 1px, transparent 0);
  background-size: 40px 40px, 40px 40px, 20px 20px, 20px 20px;
}
.kobetu-point-box .circle{
  border-radius: 50%;
  border: 1px solid #00468A;
  background-color: #FFFFFF;
  color: #00468A;
  width: 100px;
  height:100px;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  font-weight: bold;
  font-size: 16px;
  margin: 10px 20px;
  position: relative;
}
.kobetu-point-box .circle span{
  display: inline-block;
  margin: auto;
  position: absolute;
  top: 20%;
  left: 25%;
}
.kobetu-point-box .mini-point-box{
  width: calc(100% - 150px);
}
.mini-point{
  display: block;
  background-color: #99D8C3;
  color: #00468A;
  font-weight: bold;
  width: 100%;
  text-align: center !important;
  margin: 5px;
}

.check-point{
  position: relative;
  font-weight: bold;
  padding: 5px 10px 5px 100px;
  font-size: 18px;
  margin: 0px 0px 0px 30px;
}
.check-point::before{
  content: url('../wp-content/themes/syoei_template/library/images/course/course_kobetsu/icon_kobetsu_check.png');
  position: absolute;
  left:40px;
  top: 0;
  transform: scale(0.7);
}



.area-box.kobetu-gaiyou{
  background-image: url('../wp-content/themes/syoei_template/library/images/course/course_kobetsu/course_kobetsu_bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  padding: 60px 30px;
}
.area-box.kobetu-gaiyou .common-wrap{
  border-radius: 10px;
  background-color: rgba( 255, 255, 255, 0.5 );
}
.area-box.kobetu-gaiyou h3{
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: #FFFFFF;
}
.area-box.kobetu-gaiyou .common-wrap .col{
  padding: 10px;
}
.area-box.kobetu-gaiyou h4{
  background-color:#01478D;
  color: #FFFFFF;
  width: 100%;
  text-align: center;
}
.area-box.kobetu-gaiyou h5{
  background-color:#B8EAF1;
  color: #01478D;
  width: 100%;
  text-align: center;
  margin: 0;
  font-size: 14px;
  font-weight: bold;
}
.area-box.kobetu-gaiyou h6{
  background-color:#B8EAF1;
  color: #01478D;
  width: 100%;
  padding: 3px 3px 3px 10px;
  font-size: 12px;
}
.area-box.kobetu-gaiyou img{
  width:100%;
  background-color: #FFFFFF;
  padding: 10px;
}
.area-box.kobetu-gaiyou span.txtbox{
  width: 100%;
  background-color: #FFFFFF;
  font-weight: bold;
  display: inline-block;
  padding: 3px 3px 3px 10px;
  margin-left: 10px;
}
.area-box.kobetu-gaiyou span.txtbox.time{
  margin: 5px 0px;
}
.area-box.kobetu-gaiyou span.comment{
  width: 100%;
  display: inline-block;
}
.area-box.kobetu-gaiyou .label-box{
  width:40%;
}
.area-box.kobetu-gaiyou .subject-box{
  width:60%;
}

.area-box.kobetu-amount h3{
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: #00468A;
  margin-top: 50px;
}
.area-box.kobetu-amount .amount-outer{
  display: block;
  width: 90%;
  margin: 50px auto;
  border-radius: 25px;
  padding: 0px 0px 20px 0px;
}
.area-box.kobetu-amount .amount-outer h4{
  width:100%;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  border-radius: 25px 25px 0px 0px;
}
.area-box.kobetu-amount .amount-inner h5{
  color: #00488D;
  font-size: 20px;
  text-align: center;
}
.area-box.kobetu-amount .amount-inner h5 span{
  font-weight: bold;
  font-size: 22px;
}
.area-box.kobetu-amount .amount-inner h5 img{
  display: inline-block;
  margin-left: 10px;
  height: 30px;
}
.area-box.kobetu-amount table{
  width: 80%;
  margin: 30px auto;
  text-align: center;
  font-weight: bold;
  border: 1px solid #cccccc;
}
.area-box.kobetu-amount table tr th{
  background-color: #B8EAF1;
  color: #0C308E;
  border: 1px solid #cccccc;
}
.area-box.kobetu-amount table tr .heiyou_title {
  background-color: #B8EAF1;
  color: #0C308E;
  border: 1px solid #cccccc;
}
.area-box.kobetu-amount table tr td{
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #cccccc;
  padding: 5px;
}
.area-box.kobetu-amount table tr.header th{
  background-color: #FFFFFF;
  width: 20%;
  padding: 5px;
}
.area-box.kobetu-amount table tr.header td{
  background-color: #0C308E;
  color: #FFFFFF;
  min-width: 20%;
  max-width: 25%;
  padding: 5px;
}

.area-box.kobetu-amount .es-outer{
  background-color: #FBDDDD;
}
.area-box.kobetu-amount .amount-outer.es-outer h4{
  background-color: #F07879;
  color: #FFFFFF;
}

.area-box.kobetu-amount .jhs-outer{
  background-color: #CDEDE2;
}
.area-box.kobetu-amount .amount-outer.jhs-outer h4{
  background-color: #37B48A;
  color: #FFFFFF;
}

.area-box.kobetu-amount .hs-outer{
  background-color: #CFE6F8;
}
.area-box.kobetu-amount .amount-outer.hs-outer h4{
  background-color: #419BE7;
  color: #FFFFFF;
}
@media only screen and (max-width: 768px) {
  .title-img img{
    width:100%;
    max-width: 100%;
  }
  .title-img::before,
  .title-img::after{
    content: "";
    width:0px;
    height: 0px;
    background-image: none;
  }
  .kobetu-point-title {
    width: 100%;
    margin: 0px;
  }
  .kobetu-point-box {
    padding: 0px;
  }
  .check-point{
    padding: 5px 10px 5px 60px;
    margin: 0px;
    font-size: 12px;
  }
  .check-point::before {
    left:0px;
  }
  .kobetu-point-box .col > .col2 > .col{
    display: flex;
  }
  .kobetu-point-box .circle{
    margin: 0;
  }
  .kobetu-point-box .mini-point-box{
    width: calc(100% - 105px);
  }
  .area-box.kobetu-gaiyou .label-box,
  .area-box.kobetu-gaiyou .subject-box{
    width:100%;
  }
  .area-box.kobetu-gaiyou span.txtbox{
    margin-bottom: 10px;
  }
}