@charset "UTF-8";

html {
    scroll-behavior: smooth;
}

body {
    /*font-family: "メイリオ", "Meiryo", sans-serif;*/
    line-height: 1.7;
    letter-spacing: 1px;
    background-color: #f7f7ef;
}

.wrapper {
    margin: 0 auto;
    max-width: 1400px;
    padding: 0 3%;
}

.basic-font-size {
    font-size: 20px;
}

.biz-udpgothic-bold {
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 700;
    font-style: normal;
}




/*top-bg*/
#top-bg {
    position: relative;
    margin-top: 10px;
}

.slider {
    position: relative;
    z-index: 1;
    /*z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
    height: 100vh;
    /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    margin-top: -3px;
}

/*　背景画像設定　*/
.slider-item01 {
    background: url(../img/top-bg1.png);
}

.slider-item02 {
    background: url(../img/top-bg2.png);
}

.slider-item03 {
    background: url(../img/top-bg3.png);
}

.slider-item04 {
    background: url(../img/top-bg4.png);
}



.slider-item {
    width: 100%;
    /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height: 100vh;
    /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;
    /*背景画像をリピートしない*/
    background-position: center;
    /*背景画像の位置を中央に*/
    background-size: cover;
    /*背景画像が.slider-item全体を覆い表示*/
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
    position: absolute;
    /*絶対配置にする*/
    z-index: 3;
    top: 42%;
    cursor: pointer;
    /*マウスカーソルを指マークに*/
    outline: none;
    /*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;
    /*矢印の色*/
    border-right: 2px solid #ccc;
    /*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {
    /*戻る矢印の位置と形状*/
    left: 2.5%;
    transform: rotate(-135deg);
}

.slick-next {
    /*次へ矢印の位置と形状*/
    right: 2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    position: relative;
    z-index: 3;
    text-align: center;
    margin: -50px 0 0 0;
}

.slick-dots li {
    display: inline-block;
    margin: 0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width: 8px;
    /*ドットボタンのサイズ*/
    height: 8px;
    /*ドットボタンのサイズ*/
    display: block;
    border-radius: 50%;
    background: #ccc;
    /*ドットボタンの色*/
    display: none;
}

.slick-dots .slick-active button {
    background: #333;
    /*ドットボタンの現在地表示の色*/
}

#top-bg .top-bg-text {
    position: absolute;
    z-index: 2;
    top: 82%;
    right: 40px;
    font-size: 22px;
    color: #fff;
    text-align: right;
    line-height: 1.6;
}

.br-pc {
    display: block;
}



/*header*/
.header {
    background-image: url(../img/header-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 96px;
    background-color: #fff;
    z-index: 9990;
    transition: all .4s ease-out;
    box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.5);
}

h1.header-logo {
    height: 90px;
    display: flex;
    align-items: center;
}

h1.header-logo img {
    width: 200px;
    margin: auto 20px;
}

.first-section {
    background-image: url(../img/header-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 50px 0;
    z-index: 999;
    width: 100%;
    height: 35%;
    position: relative;
}

/*
.first-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    height: 6px;
    background-image: url(../img/rainbow.png);
}*/

.first-section-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.first-section-flex .logo {
    margin-bottom: 40px;
}

.first-section-img-esports {
    /* margin-right: 25px; */
}

.first-section-img {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    width: 90%;
    flex-wrap: wrap;
}

.first-section-img img {
    width: 40%;
}


/*introduction*/
#introduction {
    padding: 10% 0;
    background-image: url(../img/introduction-bluebg.png), url(../img/introduction-pinkbg.png), url(../img/introduction-line.png);
    background-repeat: no-repeat;
    background-position: right top, left bottom, right bottom;
    background-size: 30%, 30%, 25%;
}

#introduction h1 {
    font-size: 57px;
    text-align: center;
    margin-bottom: 30px;
    color: #015aaa;
    position: relative;
    padding-bottom: 20px;
}

#introduction h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 28%;
    right: 28%;
    display: block;
    height: 6px;
    background-image: url(../img/rainbow.png);
    background-size: 192px 6px;
}

#introduction p {
    text-align: center;
    color: #015aaa;
}


/*explanation*/
#explanation {
    width: 100%;
}

.sky-bg {
    background-image: url(../img/sky-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10% 0;
}

.sentence-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.what-is-esports {
    display: flex;
    margin-bottom: 7%;
    padding: 0 5%;
}

.what-is-esports img {
    width: 50%;
    object-fit: contain;
    filter: drop-shadow(0 0 5px #3f73a8);
}

.what-is-esports .sentence {
    width: 50%;
    padding: 8% 4%;
}

.what-is-esports p {
    color: #015aaa;
    line-height: 1.8;
}

.what-is-tradingcard {
    display: flex;
    flex-direction: row-reverse;
    padding: 0 5%;
}

.what-is-tradingcard img {
    width: 50%;
    object-fit: contain;
    filter: drop-shadow(0 0 5px #3f73a8);
}

.what-is-tradingcard .sentence {
    width: 50%;
    padding: 8% 4%;
}

.what-is-tradingcard p {
    color: #015aaa;
    line-height: 1.8;
}


/*recruitment*/
#recruitment {
    background-image: url(../img/recruitment-greenbg.png), url(../img/recruitment-purplebg.png), url(../img/recruitment-line.png);
    background-repeat: no-repeat;
    background-position: right top, left bottom, 10% top;
    background-size: 25%, 25%, 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 250px 0 150px 0;
}

.recruitment-bluebg {
    background-color: #3178e2;
    padding: 200px 50px 50px 50px;
    width: 900px;
    position: relative;
    border-radius: 60px;
}

#recruitment .speech-bubble {
    margin: 0 auto;
    display: block;
    filter: drop-shadow(0 0 6px #6f85ae);
    width: 80%;
    position: absolute;
    top: -200px;
    right: 0;
    left: 0;
}

.white-box {
    position: relative;
}

.flag {
    position: absolute;
    top: -80px;
    left: -50px;
}

#recruitment .sentence {
    background-color: rgba(255, 255, 255);
    padding: 50px 70px;
    color: #015aaa;
    text-align: left;
    margin: 0 auto;
    border-radius: 60px;
}


/*schedule*/
.sky-bg-schedule {
    background-image: url(../img/schedule-line2.png), url(../img/sky-bg.png);
    background-repeat: no-repeat;
    background-position: left 70%, center;
    background-size: 30%, cover;
    padding: 150px 0;
    width: 100%;
    position: relative;
}

.schedule-line1 {
    position: absolute;
    top: -150px;
    right: 15%;
    width: 30%;
}

.schedule-box {
    border: #015aaa solid 5px;
    background-color: #ffffff;
    border-radius: 40px;
    width: 700px;
    padding: 65px 50px 50px 50px;
    filter: drop-shadow(0 0 6px #6f85ae);
    position: relative;
}

#schedule .box-heading-time {
    font-size: 29px;
    background-color: #015aaa;
    display: inline-block;
    color: #ffffff;
    padding: 0.6rem 2rem 0.3rem 2rem;
    border-radius: 18%/50%;
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
}

.activity-time {
    margin-bottom: 150px;
}

.activity-time .base-time {
    font-size: 25px;
    color: #ea295a;
    text-align: center;
}

.time-table {
    color: #015aaa;
    border-top: #015aaa solid 3px;
    border-bottom: #015aaa solid 3px;
    padding: 20px 0;
    margin: 8px 0;
}

.time-table-free {
    margin-bottom: 40px;
}

.time-table-free1 {
    margin-bottom: 40px;
    display: flex;
}

.time-table-free1 p {
    padding-left: 21px;
}

.time-table-heading {
    margin-bottom: 10px;
}

.column1 {
    padding-left: 21px;
    -moz-text-align-last: justify;
    text-align-last: justify;
}

.time-table-free1 {
    margin-bottom: 8px;
}

.time-table-free2 {
    display: flex;
}

.free-column-do {
    padding-left: 21px;
}

.time-table-reserve div {
    padding-left: 21px;
}

.all-time-ok {
    color: #015aaa;
    text-align: right;
    font-size: 21px;
    margin: 20px 10px 0 0;
}

#schedule .box-heading-cost {
    font-size: 29px;
    background-color: #015aaa;
    display: inline-block;
    color: #ffffff;
    padding: 0.6rem 2rem 0.3rem 2rem;
    border-radius: 26%/50%;
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
}

.cost-flex {
    display: flex;
    justify-content: space-around;
}

.cost-box {
    border: #015aaa solid 3px;
    width: 265px;
    height: 140px;
    text-align: center;
}

.cost-box-heading {
    background-color: #015aaa;
    padding: 0.3rem;
    color: #ffffff;
    font-size: 21px;
}

.cost-box-text-5000 {
    margin-top: 3%;
    color: #015aaa;
    font-size: 25px;
}

.cost-box-text-badge {
    color: #015aaa;
    font-size: 17px;
}

.cost-box-text-10000 {
    margin-top: 8%;
    color: #015aaa;
    font-size: 25px;
}

.cost-box-text-5000 span,
.cost-box-text-10000 span {
    font-size: 17px;
}


/*footer*/
footer {
    background-color: #fff;
    width: 100%;
    padding: 50px 70px 60px 70px;
    color: #015aaa;
    position: relative;
}

footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    height: 6px;
    background-image: url(../img/rainbow.png);
    background-size: 192px 6px;
}

.footer-flex {
    display: flex;
    justify-content: space-around;
}

.footer-heading {
    margin-bottom: 15px;
    font-size: 18px;
    text-shadow:
        0.01px 0.01px 0,
        0.01px -0.01px 0,
        -0.01px 0.01px 0,
        -0.01px -0.01px 0,
        0.01px 0 0,
        0 0.01px 0,
        -0.01px 0 0,
        0 -0.01px 0;
}

footer .address {
    margin-top: 15px;
}

.footer-contact-flex-column {
    display: flex;
    flex-direction: column;
}

.footer-contact-flex {
    display: flex;
}

.contact-heading {
    margin-right: 10px;
}

.x-logo-container {
    /* margin-top: 6%; */
    display: flex;
    align-items: center;
    margin: 0 15px;
}

.pdf {
    display: flex;
    align-items: center;
    margin-left: 20px;
    text-decoration: underline #e62452;
}

.operation {
    width: 30%;
    margin: 0 20px;
}

section.inquiry {
    margin: 0 15px;
    width: 50%;
}

.link {
    width: 30%;
    display: flex;
    flex-wrap: wrap;
}

img.footer-logo {
    width: 200px;
}




/*responsive*/

@media screen and (max-width:1250px) {
    .what-is-esports .sentence {
        padding: 8% 4% 8% 3%;
    }
}

@media screen and (max-width:1050px) {
    .header-img img {
        width: 80%;
        margin: 30px auto;
    }

    footer {
        padding: 50px 30px 60px 30px;
    }
}

@media screen and (max-width:1000px) {
    .basic-font-size {
        font-size: 17px;
    }

    .slider {
        height: 70vh;
        /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    }

    .slider-item {
        height: 70vh;
        /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    }

    #top-bg .top-bg-text {
        font-size: 20px;
    }

    .what-is-esports,
    .what-is-tradingcard {
        height: 330px;
    }

    .recruitment-bluebg {
        padding: 200px 50px 50px 50px;
        width: 800px;
    }

    #recruitment .speech-bubble {
        position: absolute;
        top: -180px;
    }

    .sky-bg-schedule {
        background-image: url(../img/schedule-line2.png), url(../img/sky-bg.png);
        background-position: left 59%, center;
        background-size: 30%, cover;
    }

    .time-table-free1 p {
        padding-left: 18px;
    }

    .column1 {
        padding-left: 18px;
    }

    .free-column-do {
        padding-left: 18px;
    }

    .time-table-reserve div {
        padding-left: 18px;
    }
}

@media screen and (max-width: 950px) {
    .header-img img {
        width: 70%;
    }

    .first-section-img img {
        width: 70%;
        margin: 30px auto;
    }
}

@media screen and (max-width: 920px) {
    #introduction h1 {
        font-size: 45px;
        margin-bottom: 30px;
    }
}

@media screen and (max-width:900px) {
    .footer-flex {
        flex-direction: column;
        justify-content: center;
        align-items: baseline;
    }

    footer {
        padding: 50px 70px 60px 70px;
    }

    .address {
        margin-bottom: 30px;
    }

    footer .address {
        margin-top: 5px;
    }

    footer section {
        margin-bottom: 30px;
    }

    .footer-heading {
        margin-bottom: 0;
        font-size: 18px;
    }

    .x-logo-container {
        margin-top: 2%;
    }

    .x-logo {
        width: 32px;
    }

    .operation {
        width: 60%;
        margin: 10px auto;
    }

    section.inquiry {
        margin: 10px auto;
        width: 60%;
    }

    .link {
        width: 60%;
        margin: 10px auto;
    }

    .x-logo-container {
        margin: 30px;
    }
}



@media screen and (max-width: 850px) {
    .basic-font-size {
        font-size: 16px;
    }

    .header-img img {
        /* width: 350px; */
    }

    .recruitment-bluebg {
        padding: 160px 50px 50px 50px;
        width: 700px;
    }

    .flag {
        top: -70px;
        width: 120px;
    }

    .schedule-box {
        width: 700px;
        padding: 65px 50px 50px 50px;
    }

    .operation {
        width: 70%;
    }

    section.inquiry {
        width: 70%;
    }

    .link {
        width: 70%;
    }

    .x-logo-container {
        margin: 30px;
    }
}

@media screen and (max-width: 800px) {
    .slider {
        height: 60vh;
        /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    }

    .slider-item {
        height: 60vh;
        /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    }

    #top-bg .top-bg-text {
        font-size: 18px;
    }

}

@media screen and (max-width: 770px) {
    .header-img img {
        /* width: 320px; */
    }

    /*explanation*/
    .what-is-esports {
        flex-direction: column;
        height: auto;
        padding: 50px;
    }

    .what-is-esports img {
        width: 100%;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        margin-bottom: 30px;
    }

    .what-is-esports .sentence {
        width: 100%;
        padding: 0;
    }

    .what-is-tradingcard {
        flex-direction: column;
        height: auto;
        padding: 50px;
    }

    .what-is-tradingcard img {
        width: 100%;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        margin-bottom: 30px;
    }

    .what-is-tradingcard .sentence {
        width: 100%;
        padding: 0;
    }

    .operation {
        width: 80%;
    }

    section.inquiry {
        width: 80%;
    }

    .link {
        width: 80%;
    }
}

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

    /*header*/
    .header-flex .logo {
        width: 350px;
    }

    #top-bg .top-bg-text {
        top: 75%;
        right: 40px;
    }

    /*introduction*/
    #introduction h1 {
        font-size: 38px;
        margin-bottom: 14px;
    }
}

@media screen and (max-width: 725px) {
    .cost-box {
        width: 220px;
    }
}

@media screen and (max-width: 720px) {
    #recruitment {
        padding: 210px 0 130px 0;
    }

    .recruitment-bluebg {
        padding: 140px 50px 50px 50px;
        width: 600px;
    }

    #recruitment .speech-bubble {
        position: absolute;
        top: -150px;
    }

    #recruitment .sentence {
        padding: 40px;
    }

    .sky-bg-schedule {
        background-image: url(../img/schedule-line2.png), url(../img/sky-bg.png);
        background-position: left 60%, center;
        background-size: 30%, cover;
    }

    .schedule-box {
        width: 600px;
        padding: 65px 50px 50px 50px;
    }

    .activity-time .base-time {
        font-size: 20px;
    }

    .all-time-ok {
        font-size: 20px;
    }
}

@media screen and (max-width: 700px) {
    .header-img img {
        /* width: 300px; */
    }

    .operation {
        width: 100%;
    }

    section.inquiry {
        width: 100%;
    }

    .link {
        width: 100%;
    }
}

@media screen and (max-width: 650px) {
    .header-img img {
        /* width: 270px; */
    }
}


@media screen and (min-width: 630px) {
    .br-sp-schedule-2 {
        display: none;
    }
}

@media screen and (max-width: 630px) {
    #recruitment {
        padding: 190px 0 130px 0;
    }

    .recruitment-bluebg {
        padding: 120px 40px 40px 40px;
        width: 500px;
    }

    #recruitment .speech-bubble {
        position: absolute;
        top: -120px;
    }

    .sky-bg-schedule {
        background-image: url(../img/schedule-line2.png), url(../img/sky-bg.png);
        background-position: left 55%, center;
        background-size: 30%, cover;
        padding: 120px 0;
    }

    .schedule-box {
        width: 500px;
        padding: 65px 30px 50px 30px;
    }

    #schedule .box-heading-time,
    #schedule .box-heading-cost {
        font-size: 25px;
        padding: 0.6rem 2rem 0.5rem 2rem;
    }

    .cost-flex {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .cost-box {
        width: 265px;
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 600px) {
    .slider {
        height: 50vh;
        /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    }

    .slider-item {
        height: 50vh;
        /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    }

    #top-bg .top-bg-text {
        font-size: 16px;
    }

    /*header*/
    .header-img {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .header-img img {
        width: 80%;
    }

    .header-img-esports {
        margin-right: 0;
        margin-bottom: 30px;
    }

    /*introduction*/
    #introduction h1 {
        font-size: 30px;
        margin-bottom: 14px;
    }
}

@media screen and (max-width: 590px) {
    .footer-contact-flex {
        flex-direction: column;
    }

    footer .responsive-margin {
        margin-top: 10px;
    }

    footer {
        padding: 40px 50px;
    }

    .footer-heading {
        margin-bottom: 6px;
    }

    .telephone-number,
    .mail-address {
        font-size: 15px;
    }

    .first-section-flex {
        text-align: center;
    }

    .first-section-flex .logo {
        width: 70%;
    }
}

@media screen and (min-width: 501px) {

    /*introduction*/
    .br-sp-introduction1 {
        display: none;
    }


}

@media screen and (min-width: 530px) {
    .br-sp-schedule {
        display: none;
    }
}

@media screen and (max-width: 530px) {
    #top-bg .top-bg-text {
        font-size: 15px;
        right: 20px;
    }

    .what-is-esports,
    .what-is-tradingcard {
        padding: 30px;
    }

    #recruitment {
        padding: 160px 0 110px 0;
    }

    .recruitment-bluebg {
        padding: 100px 40px 40px 40px;
        width: 400px;
        border-radius: 40px;
    }

    #recruitment .speech-bubble {
        position: absolute;
        top: -90px;
    }

    #recruitment .sentence {
        border-radius: 40px;
        padding: 30px 40px;
    }

    .flag {
        top: -50px;
        left: -30px;
        width: 80px;
    }

    .sky-bg-schedule {
        background-image: url(../img/schedule-line2.png), url(../img/sky-bg.png);
        background-position: left 60%, center;
        background-size: 30%, cover;
        padding: 90px 0;
    }

    .schedule-line1 {
        top: -110px;
    }

    .schedule-box {
        width: 400px;
        padding: 50px 20px;
    }

    .activity-time {
        margin-bottom: 100px;
    }

    .activity-time .base-time {
        font-size: 19px;
    }

    .flame-sp {
        border-bottom: #015aaa solid 2px;
        width: 80px;
        padding-bottom: 3px;
    }

    .all-time-ok {
        font-size: 19px;
    }

    .time-table-free1 {
        flex-direction: column;
        margin-bottom: 30px;
    }

    .time-table-free2 {
        flex-direction: column;
    }

    .time-table-reserve div {
        padding-left: 17px;
    }

    .first-section-img img {
        width: 80%;
    }
}

@media screen and (min-width: 491px) {
    .br-sp-footer {
        display: none;
    }
}


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

    /*header*/
    .header-flex .logo {
        width: 320px;
    }

    /*slider*/
    .slider {
        height: 40vh;
        /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    }

    .slider-item {
        height: 40vh;
        /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    }

    #top-bg .top-bg-text {
        top: 80%;
    }


    .br-sp-introduction2 {
        display: none;
    }

    #introduction p {
        padding: 0 40px;
    }

    .mail-address {
        word-break: break-all;
    }

    .footer-logo {
        width: 200px;
    }
}

@media screen and (max-width: 450px) {
    .br-pc {
        display: none;
    }

    .time-table.basic-font-size {
        width: 90%;
        margin: 0 auto;
    }

}

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

    /*slider*/
    .slider {
        height: 35vh;
        /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    }

    .slider-item {
        height: 35vh;
        /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    }


    #recruitment {
        padding: 140px 0 90px 0;
    }

    .recruitment-bluebg {
        padding: 80px 30px 30px 30px;
        width: 360px;
        border-radius: 40px;
    }

    #recruitment .speech-bubble {
        position: absolute;
        top: -80px;
    }

    #recruitment .sentence {
        padding: 30px 30px;
    }

    .schedule-box {
        width: 370px;
        padding: 45px 10px 45px 10px;
    }

    #schedule .box-heading-time,
    #schedule .box-heading-cost {
        font-size: 22px;
        top: -30px;
    }

    .time-table-free1 {
        margin-bottom: 16px;
    }

    .time-table-free1 p {
        padding-left: 2px;
    }

    .column1 {
        padding-left: 2px;
    }

    .free-column-do {
        padding-left: 2px;
    }

    .time-table-reserve div {
        padding-left: 2px;
    }

    footer {
        padding: 30px 40px;
    }

    .footer-heading {
        font-size: 17px;
    }

    .contact-heading,
    .address {
        font-size: 15px;
    }

    .telephone-number,
    .mail-address {
        font-size: 14px;
    }

    .x-logo {
        width: 25px;
    }
}

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

    /*header*/
    .header-flex .logo {
        width: 290px;
    }

    /*introduction*/
    #introduction h1 {
        font-size: 30px;
        margin-bottom: 14px;
    }
}


@media screen and (max-width: 376px) {
    #recruitment {
        padding: 120px 0 90px 0;
    }

    .recruitment-bluebg {
        width: 320px;
    }

    #recruitment .sentence {
        padding: 20px 20px;
    }

    .schedule-box {
        width: 320px;
        padding: 65px 10px 50px 10px;
    }

    #schedule .box-heading-time,
    #schedule .box-heading-cost {
        font-size: 20px;
        top: -25px;
        padding: 0.4rem 1.3rem 0.3rem 1.3rem;
    }

    .no-justify {
        text-align-last: auto;
    }

    .time-table.basic-font-size {
        width: 98%;
    }
}

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

    /*header*/
    .header-flex .logo {
        width: 250px;
    }

    .recruitment-bluebg {
        width: 300px;
    }

    .schedule-box {
        width: 300px;
        padding: 65px 20px 50px 20px;
    }

    #schedule .box-heading-time,
    #schedule .box-heading-cost {
        font-size: 18px;
        top: -25px;
    }
}

@media screen and (max-width: 300px) {
    .recruitment-bluebg {
        width: 270px;
    }

    .schedule-box {
        width: 270px;
        padding: 65px 20px 50px 20px;
    }

    .cost-box {
        width: 230px;
        margin-bottom: 30px;
    }

    #schedule .box-heading-time,
    #schedule .box-heading-cost {
        font-size: 17px;
        padding: 0.4rem 1rem 0.2rem 1rem;
        top: -22px;
    }
}

@media screen and (max-width: 280px) {
    .header-flex .logo {
        width: 200px;
    }
}