@charset "utf-8";

.main{
    padding-top: 0;
    padding-bottom:0;
}

/* BANNER
----------------------------------------------------------------------------- */
.top-bnr{
    position: fixed;
    z-index:9999;
    top:190px;
    right:0;
}
.top-bnr li{
    margin-bottom:15px;
}
.top-bnr li img{
    width:75px;
    height:auto;
}
.top-bnr li a:hover{
    opacity:0.8;
}

@media screen and (max-width:768px){
    .top-bnr li img{
        display: none;
    }
}

/* MV
----------------------------------------------------------------------------- */
/* MV */
.top-mv{
    background: rgb(253,180,10);
    background: linear-gradient(337deg, rgba(253,180,10,1) 0%, rgba(253,180,10,1) 10%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 90%, rgba(253,180,10,1) 90%);
}

.top-mv .inner{
    height:380px;
    padding-top:70px;
}

.top-mv .col-2{
    vertical-align:middle;
}
.top-mv .col-2:first-child{
    width: 35%;
}

/* ttl */
.top-mv-ttl{
    text-align: center;
    margin-bottom: 20px;
}
.top-mv-ttl span{
    display: inline-block;
    text-align: center;
    color:#fff;
    background-color: #192951;
    padding:5px 15px;
    margin-bottom: 30px;
    border-radius: 8px;
}
.top-mv-ttl img{
    width: 300px;
}

.top-mv-intro{
    text-align: center;
    font-size:20px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* btn */
.top-mv-btn{
    padding-top:50px;
    text-align: center;
    margin-bottom: 15px;
}
.top-mv-btn a{
    display: inline-block;
    width:250px;
    height:50px;
    line-height:50px;
    margin:0 7px 35px;
    border-radius: 25px;
    text-decoration:none;
    font-size:17px;
    font-weight: bold;
    color:#fff;
}
.top-mv-btn a:hover{
    opacity: 0.6;
}
.top-mv-btn a span{
    font-size: 12px;
    font-weight: normal;
    padding-left: 10px;
}

.top-mv-btn-entry{
    background-color: #fb0009;
}
.top-mv-btn-login{
    background-color: #fdb40A;
}

/* info */
.top-mv-info{
    width:90%;
    margin:0 auto;
    padding:0 20px;
}

.top-mv-info-update{
    font-size:16px;
    font-weight: bold;
    color:#fdb40A;
    
}
.top-mv-info-num li{
    display:inline-block;
    width:45%;
    text-align: left;
    font-size:18px;
    font-weight: bold;
}
.top-mv-info-num li span{
    font-size: 40px;
    color:#fb0009;
    padding:0 10px;
}

@media screen and (max-width: 767px){
    .top-mv{
        padding-top:0;
        background:none;
    }
    
    .top-mv .inner{
        width:100%;
        padding-top:0;
        height:auto;
    }

    .top-mv .col .col-2:first-child{
        background: rgb(253,180,10);
        background: linear-gradient(315deg, rgba(253,180,10,1) 0%, rgba(253,180,10,1) 10%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 90%, rgba(253,180,10,1) 90%);
        padding:30px 0 10px;
        margin-bottom: 0 !important;
    }
    
    /* ttl */
    .top-mv-ttl{
        text-align: center;
        margin-bottom: 10px;
        
    }
    .top-mv-ttl img{
        width:60%;
    }
    .top-mv-ttl span{
        margin-bottom: 20px;
    }

    .top-mv-intro{
        font-size:15px;
        padding-right:0;
        margin-bottom: 30px;
    }
    
    /* btn */
    .top-mv-btn{
        margin-bottom: 15px;
        padding:15px 0;
        background-color: #f4f4f4;
    }
    .top-mv-btn a{
        display: inline-block;
        width:150px;
        height:40px;
        line-height:40px;
        margin: 0 5px;
        border-radius: 20px;
        font-size:14px;
    }
    
    /* info */
    .top-mv-info{
        width:100%;
        margin:0 auto;
        padding:0;
    }
    .top-mv-info-update{
        font-size:15px;
        text-align: center;
        margin-bottom: 5px;
    }
    .top-mv-info-num ul{
        text-align: center;
    }
    .top-mv-info-num li{
        text-align: center;
        font-size: 13px;
    }
    .top-mv-info-num li span{
        font-size: 20px;
        padding:0 5px;
    }
}

/* SEARCH
----------------------------------------------------------------------------- */
.top-search{
    background-color: #f4f4f4;
    padding:50px 0;
}

.top-search-box{
    background-color:#fff;
    width:75%;
    display:inline-block;
}

.top-search-box dl{
    display: table;
    width: 100%;
    border-bottom: 2px solid #eee;
    padding:30px 20px;
}
.top-search-box dl dt,
.top-search-box dl dd{
    display: table-cell;
    vertical-align: bottom;
}
.top-search-box dl dt h3{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}
.top-search-box dl dt input,
.top-search-box dl dt select{
    border:2px solid #fd9700;
    padding:10px 15px;
    border-radius: 5px;
    margin-right: 10px;
}
.top-search-box dl dt select{
    width:40%;
}
.top-search-box dl dd{
    width:200px;
    text-align: center;
    padding-left:20px;
}
@media screen and (max-width: 768px){
    .top-search{
        padding-top:70px;
    }
    .top-search-box{
        width:100%;
        position: relative;
    }
    .top-search-box dl{
        display: block;
        padding:15px 20px 30px;
    }
    .top-search-box dl dt,
    .top-search-box dl dd{
        display: block;
        width: 100%;
    }
    .top-search-box dl dt input,
    .top-search-box dl dt select{
        margin-bottom: 15px;
    }
}

/* くまモン */
.kuma{
    width: 220px;
    height: auto;
    float: right;
    margin-top: -25px;
}
@media screen and (max-width: 768px){
    .kuma{
        width: 120px;
        height: auto;
        float: right;
        margin-top: -55px;
        margin-bottom: 5px;
    }
}

/* ABOUT
----------------------------------------------------------------------------- */
.top-about{
    padding:50px 0;
    background: #e6e6e6;
}
.top-about-wrap{
    display: flex;
    margin-bottom: 50px;
}
.txt-normal {
    font-size: 16px;
    line-height: 1.8;
    padding: 0 15px;
    text-align: center;
}
.strong {
    font-size: 18px;
    font-weight: bold;
}
.strong-border {
    background: linear-gradient(transparent 40%, #ffff66 40%);
    padding: 0 5px;
    margin: 0 5px;
}
.top-about-wrap p,
.top-about-wrap img{
    width: 49%;
    text-align: left;
    justify-content: space-between;
}
.about-wrap .txt-intro {
    text-align: center;
    font-weight: bold;
    font-size: 23px;
    background-color: #fd9700;
    color: #fff;
    padding: 5px;
    width: 500px;
    margin: 0 auto;
    margin-bottom: 30px;
}
.about-wrap .txt-intoro-sub {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}
.about-wrap .txt-intoro-sub .strong {
    font-size: 25px;
    text-align: center;
    font-weight: bold;
    color: #fd9700;
}

@media screen and (max-width: 768px){
    .txt-normal{
        padding: 0;
    }
    .about-wrap .txt-intoro-sub{
        font-size: 18px;
    }
    .about-wrap .txt-intoro-sub .strong{
        font-size: 20px;
    }
    .about-wrap .txt-intro{
        width: 100%;
        font-size: 18px;
    }
}

/* ttl */
.top-about-ttl{
    text-align: center;
    margin-bottom: 30px;
    font-size:25px;
    font-weight: bold;
}
.top-about-ttl img{
    max-width: 592px;
}

@media screen and (max-width: 768px){
    .top-about-ttl{
        font-size:20px;
    }
}

/* intro */
.top-about-txt{
    text-align: center;
    margin-bottom: 50px;
    font-size: 16px;
    line-height: 1.8;
}

/* points */
.top-about-point-2{
    position: relative;
}
.top-about-point-2:before{
    content: "▶";
    color: #fd9700;
    position: absolute;
    left: 0;
    top: 50%;
}
.top-about-point-2:after{
    content: "▶";
    color: #fd9700;
    position: absolute;
    right: 0;
    top: 50%;
}
.top-about-point ul{
    margin-bottom: 50px;
}
.top-about-point ul li{
    display: inline-block;
    float:left;
    width:calc(100% / 3);  
    text-align: center;
}
.top-about-point ul li img{
    display: block;
    width: 200px;
    height: auto;
    margin:0 auto 15px;
}
.top-about-point-ttl{
    font-size:17px;
    font-weight: bold;
    margin-bottom: 15px;
}
.top-about-point ul li p{
    font-size:13px;
}

/* 注目企業 */
.top-point-logo{
    width: 100%;
}
.top-point-logo ul{
    margin-bottom: 30px;
}
.top-point-logo ul li{
    padding:0 15px 20px;
    text-align: center;
}
.top-point-logo ul li a{
    text-decoration: none;
}
.top-point-logo-ttl{
    text-align: center;
    margin-top:10px;
    font-size:16px;
}
.slick-dots{
    text-align: center;
}
.slick-dots li{
    display: inline-block;
    padding:0 10px 10px !important;
}
.slick-dots li button{
    color: transparent;
    text-indent: -999;
    width:18px;
    height: 18px;
    border-radius: 9px;
    background-color: #fff;
    outline:none;
}
.slick-dots .slick-active button{
    background-color: #fd9700;
}

@media screen and (max-width:1000px){
    .top-about-point-ttl{
        font-size: 12px;
    }
    .top-about-point ul li img{
        width: 150px;
    }
}

@media screen and (min-width:767px) and (max-width:1000px){
        .top-about-point-2:before,
        .top-about-point-2:after{
            font-size: 20px;
        }
}

@media screen and (max-width: 767px){
    .top-about-point{
        margin-top: 0!important;
    }
    .top-about-point-ttl{
        margin-bottom: 0;
    }
    .top-about-point ul{
        margin-bottom: 0;
    }
    .top-about-point ul li{
        float: none;
        width: 100%;
        padding-top:40px;
    }
    .top-about-point ul li img{
        margin-bottom: 0;
    }
    .top-about-point ul li p{
        margin-bottom: 30px;
    }
    .top-about-point-2:before{
        content: "▼";
        left: 25%;
        right: 25%;
        top: 0;
        font-size:25px;
    }
    .top-about-point-2:after{
        content: "▼";
        left: 25%;
        right: 25%;
        top: 95%;
        font-size:25px;
    }
    .top-point-logo{
        margin-bottom: 0!important;
    }
    .top-point-logo img{
        width: 100%;
        margin-bottom: 10px;
    }
    .top-point-logo ul {
        margin-bottom: 10px;
    }
    .slick-dots li{
        padding:0 5px 10px !important;
    }
    .slick-dots li button{
        width:15px;
        height: 15px;
        border-radius: 7.5px;
    }
}

/* POINT
----------------------------------------------------------------------------- */
.top-point{
    background-image:url("/top/images/bg_point.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding:50px 0;
}
.top-point-main{
    border-radius: 10px;
    background-color: rgba(255,255,255,0.7);
    padding:50px;
}

@media screen and (max-width: 768px){
    .top-point-main{
        padding:25px;
    }
}

/* ttl */
.top-point-main-ttl{
    text-align: center;
    margin-bottom: 25px;
}
.top-point-main-ttl img{
    width:310px;
    height: auto;
}

/* list */
.top-point-main-list{
    margin:0 auto 50px;
    font-size:16px;
    text-align: center;
}
.top-point-main-list li{
}
.top-point-main-list li span{
    color:#79cbdc;
    font-weight: bold;
    padding-right: 10px;
    font-size:25px;
}

@media screen and (max-width: 768px){
    .top-point-main-list{
        width: 100%;
    }
}

/* link */
.top-point-main-link{
    text-align:center;
}
.top-point-main-link a img{
    width:607px;
    height:auto;
}
.top-point-main-link a:last-child:hover{
    opacity:0.8;
}

@media screen and (max-width: 768px){
    .top-point-main-link a{
        min-width: 230px;
        margin-top: 20px;
        font-size: 13px;
    }
}

/* PREMIUM
----------------------------------------------------------------------------- */
.top-premium{
    padding: 50px 0;
}
.top-premium-ttl{
    text-align: center;
    margin-bottom:50px;
}
.top-premium-ttl img{
    width:592px;
    height:auto;
}
.top-premium-campaign{
    text-align: center;
    font-size:35px;
    font-weight:bold;
    margin-bottom:50px;
}
.top-premium-campaign span{
    font-size:45px;
    font-weight:bold;
    color:#ff0000;
}

/* INFO
----------------------------------------------------------------------------- */
.top-info{
    padding:50px 0;
}
.top-info .col-2:first-child{
    padding-right:15px;
}
.top-info .col-2:last-child{
    padding-left:15px;
}

/* box */
.top-info-box{
    background-color: #fff;
    border-radius: 10px;
    padding:20px;
    margin-bottom: 30px;
}

@media screen and (max-width:768px){
    .top-info-box{
        padding: 0;
    }
}

/* link */
.top-info-link{
    text-align: right;
}