@charset "utf-8";


/*-------------------------------------------
共通
-------------------------------------------*/
body {
    font-family: "Noto Sans JP", sans-serif;
    color: #333;
    overflow-x: hidden;
}
img {
    max-width: 100%;
}
.main-wrapper {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
}
a:hover {
    opacity: 0.8;
}
.title {
    background-color: #fffc86;
    color: #000;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    padding: 17px;
    border-radius: 10px;
    margin: 0 30px 46px;
}
.sp {
    display: none;
}

.display-none {
    display: none;
}


/*-------------------------------------------
main-visual-sec
-------------------------------------------*/
.main-visual-sec {
    text-align: center;
    margin: 0 auto 100px;
}
.main-visual-sec img{
    width: 100%;
    height: auto;
}
.main-visual-sec p {
    margin: 15px 0 40px;
}
.main-visual-sec .big {
    font-size: 64px;
    font-weight: 700;
    color: #FF94BA;
}
.main-visual-sec .small {
    font-size: 48px;
    font-weight: 700;
    color: #63E0D1;
}
.main-visual-sec .btn {
    display: block;
    width: 530px;
    height: 105px;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    background-color: #ff8b20;
    border-radius: 50px;
    box-shadow: 0 5px 10px -5px rgb(0,0,0,0.5);
    padding: 27px 10px;
    margin: 0px auto 35px;
}


/*-------------------------------------------
news-sec
-------------------------------------------*/
.news-sec {
    background-image: url(../images/news-bg.png);
    /* background-image: image-set(url(../images/news-bg.png) 1x, url(../images/news-bg@2x.png) 2x);
    background-image: -webkit-image-set(url(../images/news-bg.png) 1x, url(../images/news-bg@2x.png) 2x); */
    background-repeat: repeat;
    background-size: cover;
    margin-bottom: 85px;
    padding-bottom: 26px;
}
.news-sec h2 {
    font-size: 64px;
    text-align: center;
    padding: 50px 0;
}
.news-sec .news-list {
    background-color: #fff;
    width: 82%;
    padding: 45px 26px;
    margin: 0 auto 50px;
}
.news-sec .news-list li {
    height: 70px;
    border-bottom: solid 1px #ffdb20;
    position: relative;
}
.news-sec .news-list li a {
    height: 70px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.news-sec .news-list li::before {
    content: "";
    display: inline-block;
    width: 31px;
    height: 31px;
    background: url(../images/news-arrow.png) center center no-repeat;
    background-size: contain;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
.news-sec .news-list li .date {
    font-size: 12px;
    color: #3a3a3a;
    background-color: #fffa4d;
    padding: 4px 10px;
    text-align: center;
}
.news-sec .news-list li .news-title {
    font-size: 16px;
    line-height: 1.5;
    padding-left: 15px;
}
.news-sec .news-list li:last-child {
    border-bottom: solid 1px #ffdb20;
}


/*-------------------------------------------
minecraft-sec
-------------------------------------------*/
.minecraft-sec {
    background-image: url(../images/minecraft-bg.png);
    /* background-image: image-set(url(../images/minecraft-bg.png) 1x, url(../images/minecraft-bg@2x.png) 2x);
    background-image: -webkit-image-set(url(../images/minecraft-bg.png) 1x, url(../images/minecraft-bg@2x.png) 2x); */
    background-repeat: repeat;
    background-size: cover;
    padding-top: 16px;
    margin-bottom: 85px;
}
.minecraft-sec p {
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 60px;
}
.minecraft-sec img {
    display: block;
    margin: 0 auto;
    padding-bottom: 105px;
}


/*-------------------------------------------
reason-sec
-------------------------------------------*/
.reason-sec {
    margin-bottom: 85px;
}
.reason-sec-bg {
    background-color: #fffcea;
}
.reason-sec ol{
    padding-bottom: 90px;
    margin: 0 auto;
}
.reason-sec ol li {
    width: 60%;
    padding: 70px 20px;
    margin-left: 30%;
    position: relative;
}
.reason-sec ol li::before{
    content: "";
    border-left: 3px dashed #bbb6b6;
    height: 83%;
    position: absolute;
    top: 130px;
    left: -20px;
}
.reason-sec ol li::after {
    content: "";
    border-bottom: 1px solid #bbb6b6;
    width: 100%;
    position: absolute;
    left: 25px;
    bottom: -10px;
}
.reason-sec .year2020,
.reason-sec .year2021,
.reason-sec .year2022,
.reason-sec .year2025,
.reason-sec .year2030 {
    font-size: 24px;
    color: #bbb6b6;
    margin: 10px 0;
    position: relative;
}
.reason-sec .year2020:before,
.reason-sec .year2030:before {
    content: "";
    display: block;
    width: 27px;
    height: 27px;
    background-color:#ffdb20;
    border-radius: 50%;
    position: absolute;
    left: -55px;
    top: 0;
}
.reason-sec .year2021:before,
.reason-sec .year2022:before,
.reason-sec .year2025:before {
    content: "";
    display: block;
    width: 27px;
    height: 27px;
    background-color: transparent;
    border:3px solid #ffdb20;
    box-sizing: border-box;
    border-radius: 50%;
    position: absolute;
    left: -55px;
    top: 0;
}
.reason-sec .discription {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 30px;
}
/* 出典元 */
.source {
    font-size: 12px;
    color: #888;
    width: 60%;
    margin-left: 30%;
    padding-bottom: 50px;
}
.source-list {
    list-style-type: circle;
    margin-left: 15px;
    display: list-item;
}

/*-------------------------------------------
merit-sec
-------------------------------------------*/
.merit-sec {
    margin-bottom: 85px;
}
.merit-sec .title {
    margin: 0 30px 85px;
}
.merit-sec ol {
    padding: 0 30px;
}
.merit-sec ol li {
    border: 5px solid #d9d9d9;
    border-radius: 20px;
    padding: 72px 20px;
    margin-bottom: 110px;
    display: flex;
    justify-content: space-between;
}
.merit-sec .number {
    font-size: 64px;
    border-bottom: 1px solid #bbb6b6;
}
.merit-sec .merit-text {
    font-size: 32px;
    font-weight: 700;
    padding-top: 15px;
    line-height: 1.3;
}
.merit-sec .merit-text .red {
    color: #ff2b2b;
}
.merit-sec ol li img {
    display: block;
    width: 50%;
    border-radius: 10px;
    margin-left: 45px;
    object-fit: cover;
}

/*-------------------------------------------
block-programming-sec
-------------------------------------------*/
.block-programming-sec {
    margin-bottom: 85px;
}
.block-programming-text {
    font-size: 20px;
    line-height: 1.5;
    padding: 0 50px;
}
.block-programming-sec img {
    margin: 63px 25px 0px;
    width: 100%;
}
.block-programming-notes {
    font-size: 24px;
    text-align: center;
    margin-top: 25px;
}


/*-------------------------------------------
apply-sec
-------------------------------------------*/
.apply-sec {
    text-align: center;
    padding: 105px 20px;
    margin: 0 auto 85px;
}
.apply-sec .apply-text1 {
    font-size: 32px;
}
.apply-sec .apply-text2 {
    font-size: 64px;
    line-height: 1.4;
    margin: 20px 0 80px;
    position: relative;
}
.apply-sec .apply-text2::after {
    content: "";
    width: 200px;
    height: 8px;
    background: linear-gradient(to right, #ff94ba 30%, #ff035e);
    position: absolute;
    left: 51%;
    transform: translateX(-80%);
    bottom: -25px;
}
.apply-sec .apply-text2 span{
    display: inline-block;
    width: 87px;
    font-weight: 800;
    border-radius: 5px;
}
.apply-sec .apply-text2 .pink{
    color: #ff2674;
    border: 1px solid #ff2674;
}
.apply-sec .apply-text2 .white{
    color: #fff;
    background-color: #ff2674;  
}
.apply-sec .apply-text2 .black{
    color: #000;
    border: 1px solid #ff2674;  
}
.apply-sec .apply-text3 {
    font-size: 36px;
    line-height: 1.5;
    margin-bottom: 60px;
}
.apply-sec .apply-text3 .blue{
    color: #2c4eff;
}
.apply-sec .btn {
    display: block;
    width: 692px;
    height: 102px;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    background-color: #ff8b20;
    border-radius: 50px;
    box-shadow: 0 5px 10px -5px rgb(0,0,0,0.5);
    padding: 27px 10px;
    margin: 0 auto 35px;
}


/*-------------------------------------------
レスポンシブ対応
-------------------------------------------*/
@media screen and (max-width: 768px) {
    
    
    /*-------------------------------------------
    共通
    -------------------------------------------*/    
    .pc {
        display: none !important;
    }
    .sp {
        display: block;
    }
    .title {
        font-size: 16px;
        padding: 17px;
        border-radius: 0px;
        margin: 0 0 20px;
    }
    .display-none {
        display: none;
    }


    /*-------------------------------------------
    main-visual-sec
    -------------------------------------------*/
    .main-visual-sec {
        margin: 0 auto 40px;
    }
    .main-visual-sec p {
        margin: 15px 0 40px;
    }
    .main-visual-sec .big {
        font-size: 27px;
    }
    .main-visual-sec .small {
        font-size: 18px;
    }
    .main-visual-sec .btn {
        width: 70%;
        height: 20%;
        font-size: 5.5vw;
        padding: 14px;
        margin: 0 auto;
    }  
    

    /*-------------------------------------------
    news-sec
    -------------------------------------------*/
    .news-sec {
        background-image: url(../images/news-bg.png);
        /* background-image: image-set(url(../images/news-bg.png) 1x, url(../images/news-bg@2x.png) 2x);
        background-image: -webkit-image-set(url(../images/news-bg.png) 1x, url(../images/news-bg@2x.png) 2x); */
        background-repeat: repeat;
        background-size: cover;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    .news-sec h2 {
        font-size: 32px;
        padding: 20px 0;
    }
    .news-sec .news-list {
        width: 95%;
        padding: 10px 8px;
        margin: 0 auto;
    }
    .news-sec .news-list li::before {
        right: 0px;
    }
    .news-sec .news-list li .date {
        font-size: 10px;
        padding: 4px 6px;
    }
    .news-sec .news-list li .news-title {
        width:68%;
        font-size: 14px;
        padding-left: 10px;
    }


    /*-------------------------------------------
    minecraft-sec
    -------------------------------------------*/
    .minecraft-sec {
        /* background-image: url(../images/minecraft-bg.png);
        background-image: image-set(url(../images/minecraft-bg.png) 1x, url(../images/minecraft-bg@2x.png) 2x);
        background-image: -webkit-image-set(url(../images/minecraft-bg.png) 1x, url(../images/minecraft-bg@2x.png) 2x);
        background-repeat: repeat;
        background-size: cover;
        padding-top: 16px; */
        margin-bottom: 20px;
    }
    .minecraft-sec p {
        font-size: 12px;
        text-align: left;
        padding: 0 7%;
        margin-bottom: 17px;
    }
    .minecraft-sec img {
        width: 70%;
        padding-bottom: 40px;
    }


    /*-------------------------------------------
    reason-sec
    -------------------------------------------*/
    .reason-sec {
        margin-bottom: 20px;
    }
    .reason-sec ol{
        padding-bottom: 60px;
        margin: 0 auto 20px;
    }
    .reason-sec ol li {
        width: 70%;
        padding: 20px 0 20px 20px;
        margin-left: 15%;
    }
    .reason-sec ol li::before{
        border-left: 2px dashed #bbb6b6;
        height: 86%;
        top: 74px;
        left: -25px;
    }
    .reason-sec ol li::after {
        left: 18px;
        bottom: -6px;
    }
    .reason-sec .year2020:before,
    .reason-sec .year2030:before {
        width: 20px;
        height: 20px;
        top: 5px;
    }
    .reason-sec .year2021:before,
    .reason-sec .year2022:before,
    .reason-sec .year2025:before {
        width: 20px;
        height: 20px;
        top: 5px;
    }
    .reason-sec .discription {
        font-size: 14px;
        line-height: 1.3;
        margin-bottom: 15px;
    }
    /* 出典元 */
    .source {
        width: 70%;
        margin-left: 15%;
    }

    /*-------------------------------------------
    merit-sec
    -------------------------------------------*/
    .merit-sec {
        margin-bottom: 20px;
    }
    .merit-sec .title {
        margin: 0 0 40px;
    }
    .merit-sec ol li {
        padding: 20px 10px;
        margin-bottom: 40px;
    }
    .merit-sec .number {
        font-size: 18px;
        padding-bottom: 5px;
    }
    .merit-sec .merit-text {
        font-size: 12px;
    }
    .merit-sec ol li img {
        margin-left: 20px;
    }


    /*-------------------------------------------
    block-programming-sec
    -------------------------------------------*/
    .block-programming-sec {
        margin-bottom: 20px;
    }
    .block-programming-text {
        font-size: 12px;
        padding: 0 25px;
    }
    .block-programming-sec img {
        margin: 20px 0 0;
    }
    .block-programming-notes {
        font-size: 12px;
        margin-top: 5px;
    }

    /*-------------------------------------------
    apply-sec
    -------------------------------------------*/
    .apply-sec {
        padding: 55px 10px;
        margin: 0 auto 20px;
    }
    .apply-sec .apply-text1 {
        font-size: 4.5vw;
    }
    .apply-sec .apply-text2 {
        font-size: 6vw;
        line-height: 1.5;
        margin: 16px auto 40px;
        display: flex;
        justify-content: center;
        position: relative;
    }
    .apply-sec .apply-text2::after {
        content: "";
        width: 24.5vw;
        height: 1vw;
        background: linear-gradient(to right, #ff94ba 30%, #ff035e );
        position: absolute;
        left: 51%;
        transform: translateX(-80%);
        bottom: -12px;
    }  
    .apply-sec .apply-text2 span{
        width: 10vw;
        margin: 1vw;
    }
    .apply-sec .apply-text3 {
        font-size: 4.5vw;
        line-height: 1.3;
        margin-bottom: 20px;
    }
    .apply-sec .btn {
        width: 90%;
        height: 20%;
        font-size: 5.5vw;
        padding: 14px;
        margin: 0 auto;
    }
}