@charset "utf-8";

/* ヘッダー */
header {
    background-color: #fff;
}
.sp-postage {
    display: none; /* 初期表示はヘッダー非表示 */
}

/* ページ先頭のヘッダー */
#header_home {
    display: flex;
    box-shadow: none;
    background: none;
    position: absolute;
}

/* 見出し1 */
.home_h1 {
    background-color: #fff;
}
h1 {
    margin: 0 auto;
    max-width: 810px;
    position: relative;
    padding-top: 40px;
    z-index: 10;
}

/* メインビジュアル(スライドショー) */
.mv_wrapper {
    background-color: #fff;
    padding-bottom: 10px;
}
.mv {
    margin: -25px auto 0 auto;
    background-color: #fff;
}
.mv_slide {
    position: relative;
    width: 1161px;
    height: 575px;
    padding: 0 30px;
    margin-bottom: 15px;
}
.mv_slide a:hover .mv_detail {
    background: #f00;
    color: #fff;
}
.mv_catch {
    position:absolute;
    top: 60px;
    left: 70px;
    filter: drop-shadow(0 0 2px white) drop-shadow(0 0 2px white) drop-shadow(0 0 2px white) drop-shadow(0 0 2px white) drop-shadow(0 0 2px white) drop-shadow(0 0 2px white) drop-shadow(0 0 2px white) drop-shadow(0 0 2px white);
}
.mv_image {
    border-radius: 40px;
}
.mv_detail {
    display: block;
    position: absolute;
    bottom: 20px;
    right: 40px;
    padding: 10px 20px;
    border-radius: 100px;
    border: 2px solid #F00;
    background: rgba(255, 255, 255, 0.90);
    color: #f00;
    font-weight: bold;
    transition: all .3s ease;  // 変化のスピードと動き
}
.mv_detail:hover {
    background: #f00;
    color: #fff;
}
.mv .slick-list {
    /*overflow: visible; !* 左右のスライドを表示する *!*/
}
.mv .slick-dots li button:before,
.about_mv .slick-dots li button:before {
    font-size: 1.1rem !important; /* ドットのサイズを大きくする */
}
.mv .slick-dots li.slick-active button:before,
.about_mv .slick-dots li.slick-active button:before {
    color: red; /* アクティブなスライドのドットの文字色を赤にする */
}
#mv_image2_pc {
    display: block;
}
#mv_image2_sp {
    display: none;
}

/* バイトルキャリア教育プログラム スライドショー */
.inner_no_padding {
    background-color: #fff;
    border-radius: 40px;
    max-width: 810px;
    margin: 50px auto 0 auto;
    padding: 40px 0 40px 40px; /* 右の余白を0にして、スライドショーを右端まで表示する */
}
.inner_no_padding_content { /* コンテンツは右に余白を設ける */
    padding-right: 40px;
}
.about_mv .slick-list {
    /*overflow: visible; !* 左右のスライドを表示する *!*/
}
.about_mv_wrapper {
}
.about_mv div {
    padding-right: 40px;
}
.about_mv img {
    border-radius: 20px;
    margin-bottom: 15px;
}

.h2_company {
    margin-top: 50px;
}
.h2_program:after {
    content: ' - Program';
    font-size: 2.2rem;
    padding-left: 20px;
    position: relative;
    bottom: 5px;
}

.movie {
    margin-top: .5rem;
}

/* バイトルキャリア教育プログラム */
.program_nav_home {
    display: none; /* ホームはPC画面では非表示 */
}

/* お問い合わせボタン */
a.fixed_contact_btn {
    display: none;
}

@media screen and (max-width:1024px) {

    html {
        scroll-behavior: smooth; /* ページ内リンクをスムースにする */
    }

    /* タブレットサイズ */
    /* h1はやや小さく表示する */
    h1 img {
        width: 80vw;
        padding-left: 20px;
    }
    /* メインビジュアルスライドショー ※スマホと同様の表示にする */
    .mv_wrapper {
        padding-bottom: 10px;
    }
    .mv {
        margin-left: -10vw; /* 若干左にずらす */
    }
    .mv .slick-dots {
        padding-left: 10vw; /* 中央に表示 */
    }
    .mv .mv_catch {
        top: 50px;
        left: calc(10vw + 30px);
        width: 35vw;
        filter: drop-shadow(0 0 1px white) drop-shadow(0 0 2px white) drop-shadow(0 0 3px white) drop-shadow(0 0 4px white) drop-shadow(0 0 2px white) drop-shadow(0 0 1px white); /* スマホで同じ設定を繰り返すと無視されるので調整 */
    }
    .mv .mv_slide {
        width: 110vw;
        height: 560px;
        padding: 0 16px;
    }
    .mv .mv_image {
        height: 560px;
        border-radius: 20px;
        object-fit: cover;
    }
    .mv .mv_image1 {
        /*object-position: 35% 50%; !* 画像の位置を若干ずらす *!*/
    }
    .mv .mv_image3 {
        /*object-position: 30% 50%; !* 画像の位置を若干ずらす *!*/
    }
    .mv .mv_detail {
        font-size: 1.4rem;
        padding: 10px;
        bottom: 10px;
        right: 5vw;
    }
}

@media screen and (max-width:767px) {

    /* h1 */
    .home_h1 {
        padding: 40px 0 0 30px;
    }
    .home_h1 p {
        color: red;
        font-size: 1.5rem;
        font-weight: 700;
    }
    h1 {
        padding-top: 20px;
    }

    /* メインビジュアルスライドショー */
    .mv .mv_catch {
        left: calc(10vw + 30px);
        width: 50vw;
        /*filter: drop-shadow(0 0 2px white) drop-shadow(0 0 2px white) drop-shadow(0 0 2px white) drop-shadow(0 0 2px white); !* PCよりシャドウを薄くする *!*/
    }
    .mv .mv_slide {
        width: 110vw;
        height: 419px;
        padding: 0 16px;
    }
    .mv .mv_image {
        height: 419px;
        border-radius: 20px;
        object-fit: cover;
    }
    .mv .mv_image1 {
        object-position: 35% 50%; /* 画像の位置を若干ずらす */
    }
    .mv .mv_image2 {
        /*object-position: 40% 50%; !* 画像の位置を若干ずらす *!*/
    }
    .mv .mv_image3 {
        object-position: 48% 50%; /* 画像の位置を若干ずらす */
    }
    .mv .mv_detail {
        font-size: 1.4rem;
        padding: 10px;
        bottom: 10px;
        right: 20px;
    }
    #mv_image2_pc {
        display: none;
    }
    #mv_image2_sp {
        display: block;
    }

    /* バイトルキャリア教育プログラム スライドショー */
    .inner_no_padding {
        border-radius: 20px;
        margin: 50px auto 0 auto;
        padding: 20px 0 20px 20px; /* 右の余白を0にして、スライドショーを右端まで表示する */
    }
    .inner_no_padding_content { /* コンテンツは右に余白を設ける */
        padding-right: 20px;
    }
    .about_mv .slick-slide {
        width: 80vw;
        /*padding: 0 0 0 16px;*/
    }

    /* 実績例 */
    .h2_company {
        margin: 0;
    }
    .company_list img {
        margin-top: 20px;
    }

    /* バイトルキャリア教育プログラム */
    .program_nav_home {
        display: flex; /* ホームはSP画面のみ表示 */
    }
    .anchor{
        padding-top: 70px;
        margin-top: calc(-70px + 30px) !important; /* ヘッダーと重ならないようにアンカーリンクの位置調整 */
    }

    .h2_program:after {
        font-size: 1.5rem;
        padding-left: 40px;
        bottom: 1.6rem; /* cssでh3を2行表示するため、位置調整 */
    }
}