@charset "utf-8";
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フレームデザイン
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_point .base_width {
    width: 90%;
    min-width: 1200px;
}

#home_point .base_width {
    max-width: 1400px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ヘッダー(インフォメーション)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#header_frame {
    border-top: 4px solid #0072ff;
}

#header_frame > .inner {
    padding: 20px 0 15px;
}

#header_frame .logo {
    margin-top: 12px;
    width: 330px;
}

#header_frame .textwidget {
    display: flex;
    flex-wrap: wrap;
}

#header_frame p.tel {
    border: 2px solid #f37200;
    border-radius: 4px;
    align-items: center;
    padding: 10px 12px 5px;
    margin-right: 20px;
}

#header_frame p.tel .num {
    font-size: 3.6rem;
    letter-spacing: .05em;
    line-height: 1;
    margin-right: 15px;
}

#header_frame p.tel .num::before {
    font-family: "icomoon";
    content: '\f095';
    color: #F37200;
    font-size: .9em;
    margin-right: 5px;
    vertical-align: -2px;
}

#header_frame p.tel .open {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.5;
}

#header_frame [class*="cmn"]:not(:last-child) {
    margin-right: 10px;
}

#header_frame [class*="cmn"] a {
    min-width: 160px;
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: .075em;
    padding: 10px 10px 10px 50px;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    position: relative;
    border:2px solid;
}

#header_frame .cmn_order a {
    background-color: #5575ff;
    border-color:#5575ff;
}

#header_frame .cmn_taiken a {
    background-color: #ff556e;
    border-color:#ff556e;
}

#header_frame [class*="cmn"] a:hover {
    text-decoration: none;
    background-color:#fff;
}

#header_frame .cmn_order a:hover {
    color:#5575ff;
}

#header_frame .cmn_taiken a:hover {
    color:#ff556e;
}

#header_frame [class*="cmn"] a::before {
    position: absolute;
    left: 25px;
    top: calc(50% - 13px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
グローバルナビ（下段／親のスタイル）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#h_navi_main ul:not(.sub-menu) {
    padding: 18px 0;
}

#h_navi_main ul:not(.sub-menu) > li {
    min-width: auto;
    text-align: center;
}

#h_navi_main ul:not(.sub-menu) > li:not(.cp) {
    border-right: 1px solid #d6d6d6;
}

#h_navi_main ul:not(.sub-menu) > li.home,
#h_navi_main ul:not(.sub-menu) > li.contact {
    display: none;
}

#h_navi_main ul:not(.sub-menu) > li > a {
    display: inline-block;
    position: relative;
    font-size: 1.6rem;
    font-weight: bold;
    padding: 0;
}

#h_navi_main ul:not(.sub-menu) > li.cp > a {
    border-right:none;
}

#h_navi_main ul:not(.sub-menu) > li > a::before {
    display: inline-block;
    content:"";
    width:30px;
    height:30px;
    background: no-repeat 50% 50%;
    vertical-align: -8px;
    margin-right: 10px;
}

#h_navi_main ul:not(.sub-menu) > li.usp > a::before {
    background-image:url(images/menu_about.svg);
}

#h_navi_main ul:not(.sub-menu) > li.course > a::before {
    background-image:url(images/menu_course.svg);
}

#h_navi_main ul:not(.sub-menu) > li.flow > a::before {
    background-image:url(images/menu_flow.svg);
}

#h_navi_main ul:not(.sub-menu) > li.voice > a::before {
    background-image:url(images/menu_voice.svg);
}

#h_navi_main ul:not(.sub-menu) > li.blog > a::before {
    background-image:url(images/menu_blog.svg);
}

#h_navi_main ul:not(.sub-menu) > li.about > a::before {
    background-image:url(images/menu_kosha.svg);
}

#h_navi_main ul:not(.sub-menu) > li.cp > a::before {
    background-image:url(images/menu_cp.svg);
}

#h_navi_main ul:not(.sub-menu) > li > a:after {
    width: 100%;
    left: 0;
    bottom: -8px;
}

body[class*="archive-voice"] #h_navi_main ul:not(.sub-menu) > li.voice > a:after {
    height: 2px;
    opacity: 1;
}

#h_navi_main ul:not(.sub-menu) > li[class*='current'] > a:after, #h_navi_main ul:not(.sub-menu) > li > a:hover:after {
    height: 2px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
グローバルナビ（下段／子のスタイル）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#h_navi_main ul.sub-menu {
    background-color: rgba(0, 69, 154, .95);
	border-radius: 4px;
}

#h_navi_main ul.sub-menu:before {
    border-bottom-color: rgba(0, 69, 154, .95);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　プロモ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#promo_frame {
    /*---（画面高さ - ヘッダー - グロナビ）jsが効かない時用---*/
    height: calc(100vh - 94px - 66px);
    /*---可変対応（タブレット含める）---*/
    height: calc((var(--my_vh) * 100) - 94px - 66px);
    /*---ノート用（ノートPC高さ - ヘッダー - グロナビ）---*/
    min-height: calc(648px - 94px - 66px);
    /*---タブレット縦用（画像原寸高さ）---*/
    max-height: 598px;
    width: 100vw;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ディスプレイ右サイドの固定エリア
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#side_fixed_zone {
    margin-top:calc(-304px / 2);
    transition: all 0.2s linear;
    right: -15px;
}

@media screen and (max-width:1460px) {
    /*　画面サイズが1460pxまではここを読み込む　*/
    #side_fixed_zone {
        display:none;
    }
}

#side_fixed_zone:hover {
    right: 0px;
}

#side_fixed_zone a:hover img {
    opacity:1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
固定ページ　＞　ローカルナビ(2019-10-31追加tky)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
ul.child_navi a {
    background: #eaeff5;
}

ul.child_navi a:hover,ul.child_navi li.current_page_item a {
    background-color: #00459a;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　ヒーローズの特長
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_point ol.items li .area_a p.img {
    position: relative;
    z-index: 1;
}

#home_point ol.items li .area_a p.img::after {
    content: "";
    background: no-repeat 50% 50%/contain;
    position: absolute;
    z-index: -1;
}

#home_point ol.items li:nth-child(1) .area_a p.img::after {
    width: 290px;
    height: 541px;
    right: -200px;
    bottom: -310px;
}

#home_point.lazyloaded ol.items li:nth-child(1) .area_a p.img::after {
    background-image: url(images/reason01_gara.jpg);
}

#home_point ol.items li:nth-child(2) .area_a p.img::after {
    width: 350px;
    height: 529px;
    left: -245px;
    bottom: -285px;
}

#home_point.lazyloaded ol.items li:nth-child(2) .area_a p.img::after {
    background-image: url(images/reason02_gara.jpg);
}

#home_point ol.items li:nth-child(3) .area_a p.img::after {
    width: 394px;
    height: 598px;
    right: -260px;
    bottom: -295px;
}

#home_point.lazyloaded ol.items li:nth-child(3) .area_a p.img::after {
    background-image: url(images/reason03_gara.jpg);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　入塾の流れ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_flow.lazyloaded {
    background: url(images/flow_bg01.jpg) no-repeat 0 0/auto 100%,url(images/flow_bg02.jpg) no-repeat 100% 0/auto 100%;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フッター(ナビ)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
div#f_navi_wrap {
    background-color:#f7f7f7;
}

div#f_navi_other > * {
    border-color:#000;
}

div#f_navi_wrap .navi_a ul:not(.sub-menu) > li {
    margin-right: 42px;
}