/**********************************
 *
 * キービジュアル
 *
 **********************************/

#keyVisual {
    width:100%;
    height:auto;
    position:relative;
}

#keyVisual .title {
    position:absolute;
    top:32%;
    left:10%;
}

#keyVisual .title  h2{
    font-size: 35px;
    line-height:1.7;
    letter-spacing:0.2em; 
    color: #505050;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
}

#keyVisual .title p {
    margin-top:45px;
    width:345px;
    height:60px;
    background-color:#55c6f0;
}

#keyVisual .title p a{
    text-decoration:none;
    color:#fff;
    font-size:15px;
    text-align:center;
    display:block;
    width:100%;
    line-height:60px;
}

#keyVisual .title p a:hover {
    opacity:0.7;
}



/**********************************
 *
 * Feature
 *
 **********************************/
#bgWrap {
    width:100%;
    height:100%;
    background-image: url(../img/pc/bg_wall.png);
    background-repeat: repeat;
    background-position: top center;
    background-size: 64px 64px;
    padding:80px 0 0 0;
}


#feature {
    width:960px;
    height:360px;
    margin:0 auto;
    background-image: url(../img/pc/bg_feature.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 960px 360px;
}

#feature ul {
    width:100%;
    padding:100px 0;
}

#feature ul li {
    float:left;
    width:545px;
    height:155px;
    position:relative;
}


#feature ul li:first-child {
    width:414px;
    border-right:1px #626262 solid;
}


#feature ul li:first-child .wrap {
    top:35px;
    left:60px;
    width:330px;
}

#feature ul li:first-child h3 {
    width:115px;
    margin:0 auto;
}

#feature ul li:first-child p {
    font-size: 30px;
    line-height:1.7;
    letter-spacing:0.2em; 
    color: #505050;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
}


#feature ul li .wrap {
    position:absolute;
    top:0px;
    left:30px;
    width:400px;
}


#feature ul li .btn {
    width:400px;
    height:60px;
    background-color:#55c6f0;
    margin-top:20px;
}

#feature ul li .btn a{
    text-decoration:none;
    color:#fff;
    font-size:15px;
    text-align:center;
    display:block;
    width:100%;
    line-height:60px;
}

#feature ul li .btn a:hover {
    opacity:0.7;
}




/**********************************
 *
 * List
 *
 **********************************/
#list {
    width:960px;
    height:auto;
    margin:65px auto 110px;
}


#list ul {
    width:100%;
}

#list ul li {
    float:left;
    position:relative;
    width:450px;
    padding-left:30px;
}

#list ul li:first-child {
    padding-left:0;
    padding-right:30px;
}

#list ul li h3 {
    width:310px;
    position:absolute;
    top:-15px;
    left:100px;
    z-index:1;
}

#list ul li:first-child h3 {
    width:241px;
    position:absolute;
    top:-15px;
    left:100px;
}

#list ul li a {
    display:block;
    background-color: #000;
}

#list ul li:first-child p {
    left:60px;
}

#list ul li p {
    position:absolute;
    bottom:-30px;
    left:100px;
    width:330px;
    height:60px;
    background-color:#55c6f0;
}

#list ul li p span{
    text-decoration:none;
    color:#fff;
    font-size:15px;
    text-align:center;
    display:block;
    width:100%;
    line-height:60px;
    cursor:pointer;
}


#list ul li a:hover > img{
    opacity:0.8;
}

/**********************************
 * 
 * MOVIE
 *
***********************************/
#movie {
	margin-bottom: 40px;
}

#movie img {
	border: 1px solid #55c6f0;
}

/**********************************
 *
 * News
 *
 **********************************/
#news {
    width:100%;
    height:auto;
    background-image: url(../img/pc/bg_news.png);
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 100% 100%;
    padding:80px 0 70px 0;
}

#news h3 {
    width:128px;
    height:auto;
    padding-bottom:50px;
    margin:0 auto;
}

#news ul {
    width:100%;
    height:auto;
    padding-bottom:20px;
    margin:0 auto;
}

#news ul li{
    padding:0 12px;
    float:left;
    font-size:14px;
    color:#333333;
}

#news ul li .cate{
    background-color:#fff;
    padding:1px 0;
    width:110px;
    text-align:center;
}

#news ul li a {
    color:#333333;
}

#news .btn {
    width:340px;
    height:60px;
    background-color:#626262;
    margin:20px auto 0;
}

#news .btn a{
    text-decoration:none;
    color:#fff;
    font-size:15px;
    text-align:center;
    display:block;
    width:100%;
    line-height:60px;
}

#news .btn a:hover {
    opacity:0.7;
}



/*------------------------------------------------------------*/
/* スマホサイト用
 ------------------------------------------------------------*/
@media screen and (max-width: 780px) {

    * {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
             -o-box-sizing: border-box;
            -ms-box-sizing: border-box;
                box-sizing: border-box;
        -webkit-text-size-adjust: 100%;
    }


    /**********************************
     *
     * キービジュアル
     *
     **********************************/

    #keyVisual {
        width:100%;
        height:auto;
        position:relative;
    }

    #keyVisual .title {
        position:absolute;
        top:40%;
        left:0;
        width:100%;
    }

    #keyVisual .title  h2{
        font-size: 15px;
        line-height:1.7;
        letter-spacing:0.2em; 
        text-align:center;
    }

    #keyVisual .title p {
        margin:15px auto 0;
        width:80%;
        height:40px;
    }

    #keyVisual .title p a{
        text-decoration:none;
        color:#fff;
        font-size:12px;
        text-align:center;
        display:block;
        width:100%;
        line-height:40px;
    }



    /**********************************
     *
     * Feature
     *
     **********************************/
    #bgWrap {
        width:100%;
        height:100%;
        padding:45px 4% 20px 4%;
    }


    #feature {
        width:100%;
        height:auto;
        background-image: url(../img/sp/bg_feature.png);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100% 100%;
        padding:40px 4%;
    }

    #feature ul {
        width:100%;
        padding: 25px 4% 5px 4%;
    }

    #feature ul li {
        float:none;
        width:100%;
        height:auto;
        position:relative;
    }


    #feature ul li:first-child {
        width:100%;
        border-right:none;
        padding-bottom:20px;
    }


    #feature ul li:first-child .wrap {
        top:0px;
        left:0px;
        width:100%;
        text-align:center;
    }

    #feature ul li:first-child h3 {
        margin:0 auto;
    }

    #feature ul li:first-child h3 img{
        width:100%;
    }

    #feature ul li:first-child p {
        font-size: 18px;
        line-height:1.7;
        letter-spacing:0.2em;
        padding:20px;
        border-bottom:1px #626262 solid;

    }


    #feature ul li .wrap {
        position:static;
        top:0px;
        left:0;
        width:100%;
    }

    #feature ul li .wrap .explain{
        font-size:12px;
    }

    #feature ul li .btn {
        width:100%;
        height:40px;
        margin:20px auto 0;
    }

    #feature ul li .btn a{
        font-size:12px;
        line-height:40px;
    }



    /**********************************
     *
     * List
     *
     **********************************/
    #list {
        width:100%;
        height:auto;
        margin:40px 0 45px 0;
    }

    #list ul {
        width:100%;
    }

    #list ul li {
        float:none;
        width:100%;
        padding-left:0;
    }

    #list ul li:first-child {
        padding-left:0;
        padding-right:0;
        margin-bottom:70px;
    }

    #list ul li h3 {
        width:44%;
        position:absolute;
        top:-20px;
        left:28%;
        z-index:1;
    }

    #list ul li h3 img{ 
        width:100%;
    }

    #list ul li:first-child h3 {
        width:44%;
        position:absolute;
        top:-15px;
        left:28%;
    }


    #list ul li:first-child p {
        left:10%;
    }

    #list ul li p {
        position:absolute;
        bottom:-20px;
        left:10%;
        width:80%;
        height:40px;
        background-color:#55c6f0;
    }

    #list ul li p span{
        text-decoration:none;
        color:#fff;
        font-size:12px;
        text-align:center;
        display:block;
        width:100%;
        line-height:40px;
        cursor:pointer;
    }


    /**********************************
     *
     * News
     *
     **********************************/
    #news {
        width:100%;
        background-image: url(../img/sp/bg_news.png);
        padding:45px 0;
    }

    #news h3 {
        width:20%;
        padding-bottom:30px;
    }

    #news h3 img {
        width:100%;
    }

    #news ul {
        width:92%;
        height:auto;
        padding-bottom:20px;
        margin:0 auto;
    }

    #news ul li{
        padding:0 5%;
        float:left;
        font-size:10px;
    }

    #news ul li .cate{
        background-color:#fff;
        padding:0;
        width:90px;
    }

    #news ul li:last-child{
        width:100%;
        float:none;
        display: inline-block;
        padding-top:5px;
        font-size:12px;
    }

    #news .btn {
        width:73%;
        height:40px;
        background-color:#626262;
        margin:0 auto;
    }

    #news .btn a{
        color:#fff;
        font-size:12px;
        width:100%;
        line-height:40px;
    }




}