/*----------------------------------------
TOPページCSS：top.css
CDNで適用されるcssは「_bootstrap-4.1.3-dist」参照のこと
bootstrapの既存クラス名はすべてのページに影響するので注意、
カスタムする場合は新規クラス/IDを追加
任意のクラスには大文字を入れる
共通のものはbase.css
-------------------------------------------*/

h2.ttlTop {
    position: relative;
    display: inline-block;
    padding: 0 65px 1rem 65px;
    text-align: center;
    font-size: 1.5rem;
    color: black;
    font-family: 'Kosugi Maru', sans-serif;
}

h2.ttlTop:before, h2.ttlTop:after {
    position: absolute;
    top: calc(50% - 0.75rem);
    width: 50px;
    height: 6px;
    content: '';
    border-top: solid 2px #000;
    border-bottom: solid 2px #000;
}

h2.ttlTop:before {
    left: 0;
}

h2.ttlTop:after {
    right: 0;
}

h2.ttlTop .subTitle {
    padding-left: 0.5rem;
    text-align: center;
    font-size: 1rem;
    position: relative;
    bottom: 3px;
}

/* h2 {
    position: relative;
    display: inline-block;
    padding: 0 65px 1rem 65px;
    text-align: center;
    font-size: 1.5rem;
    color: black;
    font-family: 'Kosugi Maru', sans-serif;
}

h2:before, h2:after {
    position: absolute;
    top: calc(50% - 0.75rem);
    width: 50px;
    height: 6px;
    content: '';
    border-top: solid 2px #000;
    border-bottom: solid 2px #000;
}

h2:before {
    left: 0;
}

h2:after {
    right: 0;
}

h2 .subTitle {
    padding-left: 0.5rem;
    text-align: center;
    font-size: 1rem;
    position: relative;
    bottom: 3px;
}

h2 .en {
    font-family: 'Varela Round', sans-serif;
    font-weight: 900;
} */

/* 検索 */

#searchBar {
    background-color: var(--logocolor);
}

.searchBar {
    padding: 0 1rem;
}

#searchBar .searchBar i {
    /* 学校を探す */
    position: relative;
    display: inline-block;
    padding: 0;
    text-align: center;
    font-size: 1.75rem;
    font-weight: bold;
    background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#fee140));
    background-image: -webkit-linear-gradient(left, #fa709a 0%, #fee140 100%);
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
    -webkit-background-clip: text;
    /* テキストでくり抜く */
    -webkit-text-fill-color: transparent;
    /* くり抜いた部分は背景を表示 */
}

#searchBar .searchBar-txt {
    /* 学校を探す*/
    position: relative;
    /* display: inline-block; */
    padding: .5rem .5rem;
    font-size: 1.75rem;
    font-weight: bold;
    font-family: 'Kosugi Maru', sans-serif;
    font-weight: 900;
    color: var(--white);
}

#searchBar h2 {
    position: relative;
    display: inline-block;
    /* キャッチコピー */
    padding: 0 60px 1rem 60px;
    text-align: center;
    font-size: 1rem;
    color: white;
    font-family: 'Kosugi Maru', sans-serif;
}

#searchBar h2:before, #searchBar h2:after {
    position: absolute;
    top: calc(50% - 0.75rem);
    width: 50px;
    height: 6px;
    content: '';
    border-top: solid 2px white;
    border-bottom: solid 2px white;
}

#searchBar h2:before {
    left: 0;
}

#searchBar h2:after {
    right: 0;
}

#searchBar .navbar {
    top: -1rem;
}

/* 動画チャンネル */

#movie1 {
    /*在校生の声*/
    background-image: url(../img/movie01-now.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

#movie2 {
    /*卒業生の声*/
    background-image: url(../img/movie02-ob.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

#movie3 {
    /*留学生の声*/
    background-image: url(../img/movie03-fr.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

#movie4 {
    /*専門学校制度*/
    background-image: url(../img/movie04-school.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

#movie1 h3, #movie2 h3, #movie3 h3, #movie4 h3 {
    display: none;
}

/* それぞれのルート */

#Route {
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-blend-mode: screen;
}

#Route .card-img-overlay {
    position: absolute;
    padding: 0;
    top: calc(50% - 0.5rem);
    text-align: center;
    color: white;
}

*ズームイン*/
#Route .zoomIn img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
#Route .zoomIn:hover img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

#Route h3 {
    font-size: 1.2rem;
    font-family: 'Kosugi Maru', sans-serif;
}

/* // 極小スマホ, 576px 以下 */

@media (max-width: 576px) {

    #Route h3 {
        font-size: 1rem;
    }
}
/* // タブレット(md), 768px 以上 */

@media (min-width: 1200px) {
    #Route .card-img-overlay {
        top: calc(60% - 0.5rem);
    }

}

/*PickUp
専門学校の就職は/スペシャリスト&SEBIT2022/40th映像FES*/

#pickUp {
    background-color: var(--white);
}

#pickUp h3 {
    font-size: 1.5rem;
}

#bgRecruit {
    /*専門学校の就職は*/
    background-image: url(../img/bg-recruit.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#bgSpecialist {
    /*スペシャリスト*/
    background-image: url(../img/bg-specialist.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#bgRecruit h4, #bgSpecialist h4 {
    font-size: 1.25rem;
}

#bgSebit2022{
    /*SEBIT2022*/
    background-image: url(../img/sebit2022.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


/*TOPICS & What'sNEW----*/

/*TOPICS*/

#Topics {
    /* background-color: rgba(14, 110, 179, .3); */
    border-top: 1px solid var(--logocolor);
}

#Topics .newsDate {
    color: var(--yellow);
    padding-left: 0.5rem;
}

/*What'sNEW*/

#New {
    background-color: var(--p-gray);
    border-top: 1px solid var(--logocolor);
    border-bottom: 1px solid var(--logocolor);
}

#New .newsDate {
    color: tomato;
}

/* 共通 */

#Topics h3, #New h3 {
    font-size: 1rem;
    color: var(--primary);
}

#Topics p, #New p {
    font-size: 0.75rem;
}

/*----------------*/

/*jumbotron
特集*/

.jumbotron {
    /*下のマージン消す*/
    margin-bottom: 0;
}

#specialNews {
    /*専門学校の就職は*/
    background-image: url(../img/bg/bg-lightstripe_wide.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 1.25rem 1rem;
    border-radius: 5px;
    border: 1px solid white;
    max-width: 100%;
}

#specialNews h4 {
    font-weight: bold;
    position: relative;
    padding: 0.25rem 0 1.5rem 0;
}

#specialNews h4:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    content: '';
    background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
    background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
    background-size: 7px 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 専修学校・各種学校とは */

#schoolType {
    background-color: var(--p-yellow);
}

#schoolType h3 {
    font-size: 1rem;
}

#schoolType .card {
    min-height: 180px;
}

#schoolType .imgonText {
    color: white;
    font-size: 1rem;
    text-align: center !important;
    border-radius: 5px;
    font-weight: bold;
    border: white solid 1px;
}

#school1 {
    /*専門学校*/
    background-image: url(../img/s4-haircut.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#school2 {
    /*高等専修学校*/
    background-image: url(../img/s4-study.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#school3 {
    /*各種学校*/
    background-image: url(../img/s4-room.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#school4 {
    /*日本語学校*/
    background-image: url(../img/s4-jls.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* 関連バナーエリア */

#bnrArea {
    background-color: var(--p-gray);
    border-top: 1px solid var(--logocolor);
    border-bottom: 1px solid var(--logocolor);
}

#bnrAreaSNS {
    background-image: url(../img/bg/bg-lightdot.png);
    border-bottom: 1px solid var(--logocolor);
}

/*----------------------------------------
メディアクエリ：
575px以下で適用するCSSはメディアクエリの外、
576px以上で適用するCSSはメディアクエリにて適用
-------------------------------------------*/

/* // タブレット(md), 768px 以上 */

@media (min-width: 768px) {
    #searchBar h2 {
        /* キャッチコピー */
        font-size: 1.25rem;
    }
}

/* // デスクトップ(lg)・ワイド(xl), 1200px 以上 */

@media (min-width: 1200px) {
    .carousel-inner {
        -ms-flex-pack: center !important;
        justify-content: center !important;
        background-color: var(--dark);
    }
    .carousel-item img {
        max-width: 1140px;
        margin: 0 auto;
    }
}