/* ----------------------------------------------------------------------
index
---------------------------------------------------------------------- */

@media screen and (max-width: 960px) {
    header h1 {
        width:200px;
    }

    header .inner {
        padding-top:50px;
    }
}

/*
mainvisual
-------------------------------------------------- */
.mainvisual {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.mainvisual img {
    width: 100%;
    height: auto;
}


/*
conceptSec
-------------------------------------------------- */
#conceptSec {
    background: url(/special/meets/img/co_bg_01.jpg) no-repeat center bottom;
    background-size: cover;
    padding: 70px 0 250px;
    /*max-width: 1700px;*/
    margin: 0 auto;
}

#conceptSec p {
    text-align: center;
}

#conceptSec p img {
    width:430px;
    max-width:80%;
}

#conceptSec .bBtn {
    margin-top: 50px;
    display: inline-block;
}

#conceptSec .secHead {
    display:none;
}

@media screen and ( max-width:1300px) {
    #conceptSec {
        padding-bottom:200px;
    }
}

@media screen and ( max-width:700px) {
    #conceptSec {
        padding:40px 0;
    }

    #conceptSec .bBtn {
        margin-top:30px;
        padding:5px 22px 5px 7px;
    }

    #conceptSec .secHead {
        display:block;
    }

    #conceptSec .secHead p {
        font-size:1.6rem;
        line-height:2em;
        font-weight:bold;
        margin-bottom:30px;
        letter-spacing:0.2em;
    }

}

/*
section
-------------------------------------------------- */
section {
    padding: 70px 0;
}


@media screen and ( max-width:1300px) {
    section {
        padding: 50px 0;
    }
}

@media screen and ( max-width:700px) {
    section {
        padding:35px 0;
    }
}

/*
secHead
------------------------------ */
.secHead {
    text-align: center;
}

.secHead h2 {
    font-size: 2.2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 25px;
    display: inline-block;
    border-bottom: 3px solid #333;
    padding-bottom: 10px;
    letter-spacing: 0.1em;
}

.secHead h2 em {
    display: block;
    color: #e0d12d;
    font-weight: bold;
    font-size: 1.3rem;
    margin-bottom: 15px;
    letter-spacing: 0.17em;
}

.secHead {
    margin-bottom: 30px;
}

.secHead p {
    text-align: center;
}

@media screen and ( max-width:700px) {
    .secHead {
        margin-bottom:10px;
    }
}

@media screen and ( max-width:400px) {
    .secHead h2 {
        font-size:1.8rem;
    }
    .secHead p {
        font-size:1.3rem;
    }
}

/*
articleSec
-------------------------------------------------- */
#articleSec {
    background: linear-gradient(#fefefe, #efefef);

    border-bottom: 1px solid #ededed;
    padding:50px 0;
}

.secNav {
    width: auto;
    margin: 0 auto 25px;
    text-align:center;
}

.secNav ul {
    display:inline-block;
}

.secNav ul li {
    display: inline-block;
    text-align: center;
    margin:0 10px;
    cursor:pointer;
}

.secNav ul li a {
    display: block;
    color: #666;
    padding: 5px 20px;
    cursor:pointer;
    transition:0.5s;
}


.secNav ul li#all.current a {
    background: #e0d12d;
    color: #fff;
}

.secNav ul li#all a:hover {
    background: #e0d12d;
    color: #fff;
}

.secNav ul li#all a {
    border:3px solid #e0d12d;
    background:#fff;
    position:relative;
    color: #cabb2d;
}

.secNav ul li#coc a {
    border:3px solid #004794;
    background:#fff;
    position:relative;
    color:#004794;
}

.secNav ul li#coc.current a {
    background: #004794;
    color: #fff;
}

.secNav ul li#coc a:hover {
    background: #004794;
    color: #fff;
}

.secNav ul li#school.current a {
    background: #3DD2CC;
    color: #fff;
}

.secNav ul li#school a:hover {
    background: #3DD2CC;
    color: #fff;
}

.secNav ul li#school a {
    border:3px solid #3DD2CC;
    background:#fff;
    position:relative;
    color:#3DD2CC;
}

.secNav ul li#all.current a:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #e0d12d;
    border-width: 12px;
    margin-left: -12px;
}

.secNav ul li#coc.current a:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #004794;
    border-width: 12px;
    margin-left: -12px;
}

.secNav ul li#school.current a:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #3DD2CC;
    border-width: 12px;
    margin-left: -12px;
}

@media screen and ( max-width:768px) {
    .secNav ul li {
        margin: 0 5px;
    }
}

@media screen and ( max-width:640px) {
    .secNav ul a {
        font-size:1.3rem;
        padding:5px 10px;
    }

    .secNav ul li {
        width:auto;
        margin-right:1px;
    }
}


@media screen and ( max-width:461px) {
    .secNav {
        margin-bottom:20px;
    }

    .secNav ul li a {
        padding:5px 10px;
    }

    .articleDetail.article-block {
        margin-bottom:20px;
    }
}

@media screen and ( max-width:400px) {
    .secNav ul li {
        margin:0 2px;
    }
    .secNav ul li#coc span {
        display:none;
    }

    .secNav ul li a {
        padding:5px 7px;
    }
}


@media screen and ( max-width:350px) {
    .secNav ul li {
        margin:0 1.5px;
    }
    .secNav ul li a {
        padding:5px;
    }
}

.articleBox ul {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}

@media screen and ( max-width:500px) {
    .articleBox ul {
        display:block;
    }
}


#articleSec .articleBox li {
    box-sizing: border-box;
    display: none;
}

.articleDetail {
    text-align: center;
    margin-bottom: 30px;
    display: none;
}

.articleDetail.article-block {
    display: block;
}


.update {
    color: #aaa;
    font-size: 1.2rem;
    line-height: 1em;
}

.articleBox .content p.aBtn {
    font-size: 1.2rem;
    font-weight: normal;
    text-align: center;
    margin-top: 10px;
}

.articleBox .content p.aBtn em {
    position: relative;
    transition:0.5s;
    padding: 2px 20px 2px 10px;
}

.articleBox .coc .content p.aBtn em {
    border: 1px solid #004794;
    color: #004794;
    display: inline-block;
}

.articleBox .coc .content p.aBtn em:after {
    content: url(/special/meets/img/co_ar_04.png);
    width: 11px;
    height: 11px;
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -10px;
    transition: 0.5s;
}

.articleBox .school .content p.aBtn em {
    border: 1px solid #3DD2CC;
    color: #3DD2CC;
}

.articleBox .school .content p.aBtn em:after {
    content: url(/special/meets/img/co_ar_05.png);
    width: 11px;
    height: 11px;
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -10px;
    transition: 0.5s;
}

.articleBox .coc a:hover .content p.aBtn em {
    background: #004794;
}

.articleBox .school a:hover .content p.aBtn em {
    background: #3DD2CC;
}

#articleSec .articleBox li a:hover p.aBtn em {
    color: #fff;
}

#articleSec .articleBox li a:hover p.aBtn em:after {
    content: url(/special/meets/img/co_ar_02.png);
}

.note {
    text-align:right;
    font-size:1.2rem;
}

@media screen and ( max-width:1100px) {
    #articleSec .articleBox li .thumb p em {
        /*font-size:5.7rem;*/
    }
}

@media screen and ( max-width:960px) {
    #articleSec .articleBox li {
        width: 49%;
        box-sizing: border-box;
        display: none;
        opacity: 0;
        padding: 10px;
    }

}

@media screen and ( max-width:768px) {
    #articleSec .articleBox li {
        padding:5px 5px 10px;
    }
    #articleSec .articleBox li .thumb p {
        /*font-size:2.5rem;*/
    }
    #articleSec .articleBox li .thumb p em {
        /*font-size:3rem;*/
    }
    .articleBox .content p.aBtn {
        margin-top:5px;
    }

    #articleSec .articleBox li a .txt {
        padding-bottom:30px;
    }
}

@media screen and ( max-width:500px) {
    #articleSec .articleBox li {
        padding:0 0 10px;
        width:100%;
    }
}

@media screen and ( max-width:440px) {
    #articleSec .articleBox li a .txt {
        padding-bottom:20px;
    }
    #articleSec .articleBox li {
        padding:0 0 10px;
        width:100%;
    }
    .articleBox article h2 {
        font-size:1.2rem;
    }

    .articleBox .content p {
        font-size:1.4rem;
    }

    .note {
        text-align:left;
    }

    .note small {
        text-indent: -1em;
        padding-left: 1em;
    }
}

/*
adSec
-------------------------------------------------- */
#adSec {
    background: #f7f7f7;
    border-top: 1px solid #fff;
}

#adSec .secHead {
    margin-bottom: 50px;
}

#adSec .adBox li {
    width: 49%;
    margin-left: 2%;
    margin-bottom:50px;
    position: relative;
    background: #fff;
    float:left;
}

#adSec .adBox li:nth-child(odd) {
    margin-left: 0;
}

#adSec .adBox li .num {
    position: absolute;
    top: -15px;
    font-size: 7rem;
    color: #fff;
    font-weight: bold;
}

#adSec .adBox li a {
    line-height: 0;
    display: block;
    transition: 0.5s;
}

#adSec .adBox li img {
    width: 100%;
    height: auto;
}

#adSec .adBox li a span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -35px;
    margin-left: -35px;
}

#adSec .adBox a + p {
    text-align: right;
    color: #fff;
    /*font-weight:bold;*/
    position: absolute;
    letter-spacing: 0.1em;
    bottom: 0;
    right: 1px;
    font-size: 2.7rem;
    line-height: 1;
}

#adSec > .container > p {
    text-align:center;
}

#adSec .bBtn {
    display:inline-block;
}

.mfp-auto-cursor .mfp-content {
    background: #fff;
    max-width: 1000px;
    padding: 30px;
}

.mfp-auto-cursor .mfp-content .inner {
    width: 80%;
    margin: 0 auto;
}

.mfp-close-btn-in .mfp-close {
    color: #333;
}

.mfp-content section {
    padding-bottom: 0;
}

.mfp-content .adhead {
    text-align: center;
    margin-bottom: 20px;
}

.mfp-content .adhead p {
    font-size: 4.7rem;
    color: #ccc;
    font-weight: bold;
    margin-bottom: 15px;
}

.mfp-content .adhead h3 {
    font-size: 1.7rem;
    margin-bottom:10px;
}

.mfp-content .mainimg {
    text-align: center;
    margin-bottom: 20px;
}

.mfp-content .infoBox .thumb {
    width: 30%;
    float: left;
    margin-right: 2%
}

.mfp-content .infoBox .thumb img {
    width: 100%;
    height: auto;
}

.mfp-content .infoBox .txt {
    width: 68%;
    float: right;
}

.mfp-content .infoBox .txt h4 {
    font-size: 1.6rem;
    margin-bottom: 15px;
}

.mfp-content .infoBox .txt p {
    font-size: 1.4rem;
}

.mfp-content .infoBox .txt p.bBtn {
    margin-top:10px;
    display:inline-block;
}

.popup-modal-dismiss {
    text-align: center;
    margin-top: 30px;
}

.popup-modal-dismiss .bBtn {
    display: inline-block;
}


@media screen and ( max-width:960px) {
    #adSec .secHead {
        margin-bottom:40px;
    }

    #adSec .adBox li .num {
        font-size:5rem;
    }
    #adSec .adBox a + p {
        font-size:2.3rem;
    }

    .mfp-auto-cursor .mfp-content .inner {
        width:100%;
    }

    .mfp-content .infoBox .txt h4 {
        font-size:1.5rem;
    }

    .mfp-content .infoBox .txt p {
        font-size:1.3rem;
    }
}


@media screen and ( max-width:768px) {
    #adSec .adBox li a span {
        position: absolute;
        width: 56px;
        height: 56px;
        top: 50%;
        left: 50%;
        margin-top: -28px;
        margin-left: -28px;
    }
}

@media screen and ( max-width:600px) {
    #adSec .secHead {
        margin-bottom:30px;
    }

    #adSec .adBox li {
        width:100%;
        margin:0 0 20px 0;
    }

    #adSec .adBox li .num {
        top:15px;
    }

    #adSec .adBox a + p {
        font-size:2rem;
    }

    .mfp-auto-cursor .mfp-content {
        padding:15px;
    }
}

@media screen and ( max-width:400px) {
    #adSec .adBox li .num {
        font-size:5rem;
        top:7px;
    }

    .infoBox {
        width:90%;
        margin:20px auto 0;
    }

    .mfp-content .infoBox .thumb {
        width:100%;
    }

    .mfp-content .infoBox .txt {
        width:100%;
    }
}

#cocSec {
    padding-bottom:70px;
}

/*
bannerBox
-------------------------------------------------- */
.bannerBox {
    padding:50px 0 70px;

    /*background-image: linear-gradient(-90deg, #E3EAD7, #FDF9F6);*/
    /*background-image: linear-gradient(-90deg, #ECFDE2, #E9F7F5);*/
    /*background-image: linear-gradient(-90deg, #F5FFF0, #C8E2F3);*/
    background-image: linear-gradient(-90deg, #FFF8E0, #F8FBEE);
}

.bannerBox ul {
    text-align:center;
}

.bannerBox img {
    max-width:500px;
    width:100%;
}