@charset "utf-8";
/* CSS INFORMATION -====================================================
File name : base.css
Description :
===================================================================== */

/* =====================================================================
*    共通・大枠
* =================================================================== */

html {
    font-size: 10px;
    font-size: 3.125vw;
}

main {
    font-family: "メイリオ", "ＭＳ Ｐゴシック", "小塚ゴシック Pro R", "ヒラギノ角ゴ Pro W3", "Meiryo", "MS PGothic", "KozGoPro-Regular", "Hiragino Kaku Gothic Pro", "MS UI Gothic", Osaka, sans-serif;
    color: #333333;
}

.inner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (min-width:768px) {
    html {
        font-size: 0.91vw;
    }

    .inner {
        max-width: 1100px;
    }
}

@media screen and (min-width:1100px) {
    html {
        font-size: 10px;
    }
}

@media screen and (max-width:767px) {
    .pc {
        display: none !important;
    }
}

@media screen and (min-width:768px) {
    .sp {
        display: none !important;
    }
}


/* =====================================================================
*    header
* =================================================================== */

.header {
    position: relative;
    padding: 1.33% 0 0;
    background-color: #393e27;
}

/* mainvisual
---------------------------------------------------------- */

.mainvisual {
    position: relative;
    background: url(../images/img_mv_sp.jpg) no-repeat left top;
    background-size: 100% auto;
}

.site_ttl {
    width: 48.93%;
    margin: 0 auto;
    padding-top: 2.5%;
}

.site_catch {
    width: 100%;
    margin: -3% auto 0;
}

/* nav
---------------------------------------------------------- */

.nav {
    position: relative;
    background: url(../images/bg_green.jpg) repeat left top;
    background-size: 128px 128px;
}

.nav .menu_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.nav .menu_list li {
    width: 50%;
}

.nav .menu_list li a {
    display: block;
    padding: 10% 0;
    position: relative;
}

.nav .menu_list li:nth-child(n+3) a::before {
    content: "";
    display: block;
    width: 83%;
    padding-top: 1%;
    background: url(../images/line_nav_sp1.png) repeat-x left top;
    background-size: 4% auto;
    position: absolute;
    top: -1px;
    left: 10%;
}

.nav .menu_list li:nth-child(2n+3) a::before {
    left: auto;
    right: 10%;
    transform: scale(-1, 1);
}

.nav .menu_list li:nth-child(2n+1) a::after {
    content: "";
    display: block;
    width: 1%;
    height: 50%;
    background: url(../images/line_nav_sp2.png) repeat left top;
    background-size: auto 24%;
    position: absolute;
    top: 25%;
    right: -1px;
}

.nav .menu_list li:nth-child(2n) a::after {
    content: "";
    display: block;
    width: 7.2%;
    padding-top: 7.46%;
    background: url(../images/icon_nav.png) no-repeat left top;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0 0 -3.6% -3.6%;
}

.nav .menu_list li:nth-child(2n):last-child a::after {
    content: none;
}

.nav .menu_list li img {
    width: 66.4%;
    margin: 0 auto;
}

/* info-box
---------------------------------------------------------- */

.info-box {
    padding: 1rem;
    background: url(../images/bg_next_white.jpg) repeat left top;
}

.info-box p {
    width: 92%;
    margin: 0 auto;
    padding: 1rem;
    font-size: 1.2rem;
    line-height: 2rem;
    border: 1px solid #cccccc;
    background-color: #ffffff;
}

@media screen and (min-width:768px) {
    .header {
        padding: 0.91% 0 0;
    }

    .mainvisual {
        background: url(../images/img_mv_pc.jpg) no-repeat center top;
        background-size: auto 100%;
    }

    .site_ttl {
        width: 30%;
        padding-top: 2.5%;
    }

    .site_catch {
        width: 55%;
        padding: 3.1% 0 0.27%;
    }

    .nav .menu_list {
        width: 90%;
        margin: 0 auto;
    }

    .nav .menu_list li {
        width: 25%;
    }

    .nav .menu_list li a {
        padding: 15% 0;
    }

    .nav .menu_list li:nth-child(n) a::before {
        content: ""!important;
        width: 7.66%;
        height: 0;
        padding-top: 7.66%;
        background: url(../images/icon_nav.png) no-repeat left top;
        background-size: 100% auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        margin: auto 0 auto -3.83%;
    }

    .nav .menu_list li:nth-child(n):first-child a::before {
        content: none!important;
    }

    .nav .menu_list li:nth-child(n) a::after {
        content: ""!important;
        display: block;
        width: 68%;
        height: 3%;
        background: url(../images/line_nav_pc.png) repeat-x left top;
        background-size: auto 75%;
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto 7%;
        padding-top: 0;
        opacity: 0;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .nav .menu_list li a:hover::after {
        opacity: 1;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .nav .menu_list li img {
        width: 66.94%;
    }

    .info-box p {
        width: 60%;
        font-size: 2rem;
        line-height: 3rem;
    }
}

@media screen and (min-width:1100px) {
    .header {
        padding: 10px 0 0;
    }
}

@media screen and (min-width:1600px) {
    .mainvisual {
        background: url(../images/img_mv_pc.jpg) no-repeat center center;
        background-size: 100% auto;
    }
}


/* =====================================================================
*    footer
* =================================================================== */

.footer {
    position: relative;
    background: url(../images/bg_green.jpg) repeat left top;
    background-size: 128px 128px;
}

.pagetop {
    position: absolute;
    z-index: 2;
    width: 100%;
    margin: -5.3% 0 0;
}

.pagetop a {
    display: block;
    width: 10.67%;
    margin: 0 auto;
    position: relative;
}

.pagetop a::before {
    content: "";
    display: block;
    width: 22.5%;
    height: 0;
    padding-top: 23.75%;
    background: url(../images/img_pagetop_arrow.png) no-repeat left top;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 45% auto 0;
}

.sns {
    padding: 11% 0 7%;
}

.sns_ttl {
    width: 15.6%;
    margin: 0 auto 7%;
}

.sns_list {
    display: block;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 90%;
    margin: 0 auto;
}

.sns_list img {
  max-width: 150px;
}

.sns_list li {
  margin-bottom: 4%;
}

.sns_list li a {
    display: block;
}

@media screen and (min-width:768px) {
    .pagetop {
        margin: -3.63% 0 0;
    }

    .pagetop a {
        width: 7.27%;
    }

    .pagetop a::before {
        width: 22.5%;
        padding-top: 23.75%;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .pagetop a:hover::before {
        margin-top: 35%;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .sns {
        padding: 0;
    }

    .sns_ttl {
        width: 10.64%;
        margin: 0 auto;
        padding: 6.5% 0 4%;
    }

    .sns_list {
        display: block;;
        width: 40%;
        padding: 0 0 4.5%;
    }

    .sns_list li a:hover {
        opacity: 0.7;
    }
}

@media screen and (min-width:1100px) {
    .pagetop {
        margin: -40px 0 0;
    }
}


/* =====================================================================
*    bnr,btn
* =================================================================== */

.bnr {
    position: relative;
    width: 100%;
    padding: 4rem 0;
    background: url(../images/bg_next_white.jpg) repeat left top;
    background-size: 128px auto;
}

.bnr ul {
    width: 100%;
}

.bnr ul li {
    width: 90%;
    margin: 2rem auto 0 auto;
}

.bnr ul li:first-child {
    margin-top: 0;
}

.bnr ul li a {
    display: block;
}

.bnr ul li a img {
    transition: opacity 0.3s ease-out;
}

.bnr ul li a:hover img {
    opacity: 0.7;
}

.bnr_bottom ul li.bnr_tvu {
    background: url(../images/bnr_tvu_on.png) no-repeat center center;
    background-size: contain;
}

.bnr_bottom ul li.bnr_tvu a:hover img {
    opacity: 0;
}
.backnumber-btn {
    width: 90%;
    margin: 2rem auto;
}
.backnumber-btn img {
    width: 100%;
}

@media screen and (min-width:768px) {
    .bnr {
        padding: 80px 0;
    }

    .bnr ul li {
        margin: 40px auto 0 auto;
    }

    .bnr_top ul li.bnr_tver {
        max-width: 500px;
    }

    .bnr_top ul li.bnr_song {
        max-width: 1000px;
    }

    .bnr_bottom ul li.bnr_tvu {
        max-width: 690px;
    }

        .backnumber-btn {
            width: 500px;
            margin: 5rem auto;
        }
}