@charset "utf-8";

/* ==================================================================
	Site Name:
	Author:高橋 潤
	Version: 1.0

	Page Title:	TOP

=================================================================== */


/*------------------------
    MAIN VISUAL
-------------------------*/
.bg-slider {
	width: 100vw;
	height: 100vh;
	background-position:center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bg-slider img{
    position: absolute;
    top:50%;
    left:50%;
    margin-top:-81px;
    margin-left:-214px;
}


/* ------------------------------------
    WORKS
------------------------------------- */
#works h2{
    float:left;
    margin-right:3em;
}

#works ul.work-list{
    
}

#works ul.work-list li{
    text-align: left;
    text-indent: -1.3em;
    margin:5px 0 5px 1.3em;
}

#works ul.work-list li:before{
    content: "◇";
}


.works-list{
    clear: both;
    margin-top: 45px;
}

.works-list li{
    text-align: right;
    position: relative;
    height:267px;
    margin:10px 0;
}

.works-list li img{
    float:right;
    margin-left:45px;
}

.works-list li h3{
    clear:none;
    font-size:20px;
    padding:85px 0 20px;
    position: relative;
    z-index: 80;
	-webkit-transition: all 1.0s ease;
	-moz-transition: all 1.0s ease;
	-o-transition: all 1.0s ease;
}

.works-list li span{
    font-size:14px;
    position: relative;
    z-index: 80;
	-webkit-transition: all 1.0s ease;
	-moz-transition: all 1.0s ease;
	-o-transition: all 1.0s ease;
}

.works-list li a{
    color: #000!important;
    text-decoration: none!important;
    display: block;
    max-width: 1200px;
    margin: 0 auto;
}

.works-list li .overray{
    background-color: rgba(0, 0, 0, 0.5);
    display: block;
    width:0%;
    height:100%;
    position: absolute;
    top:0;
    left: 0;
    z-index: 50;
    transition: all 0.3s ease;
	-webkit-transition: all 1.0s ease;
	-moz-transition: all 1.0s ease;
	-o-transition: all 1.0s ease;
}

.works-list li:hover .overray{
    background-color: rgba(0, 0, 0, 0.5);
    display: block;
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left: 0;
    z-index: 50;
}

.works-list li:hover h3,
.works-list li:hover span{
    color:#FFF;
}


@media screen and (max-width: 980px) {
    
    .works-list li{
        text-align: left;
        height:auto;
        padding:0px 0 10px;
    }

    .works-list li img{
        float:none;
        margin-left:0px;
        margin-bottom:10px;
        width:100%;
    }

    .works-list li h3{
        clear:none;
        font-size:20px;
        padding:0px 0 0px;
        margin:10px 10px 5px 20px;
        display: inline;
    }

    .works-list li span{
        margin-left:0px;
    }
}


/* ------------------------------------
    PROFILE
------------------------------------- */
#profile{
    background-color: #938075;
}

#profile h2{
    text-align: left;
    margin-bottom: 25px;
}

#profile .profile-photo{
    float:left;
    margin:0 30px 50px 0;
}

#profile h3{
    clear: none;
    text-align: left;
    font-weight: normal;
}

#profile h3 img{
    margin:30px 0;
}

#profile p{
    margin:30px 0;
    line-height: 1.8em;
}

.profile-stats{
    background-color: #BBAEAA;
    padding:35px;
    text-align: left;
}

.profile-stats dt{
    background-color: #000;
    color:#FFF;
    padding:5px;
    margin:10px 0;
    display: inline-block;
    width:100px;
    text-align: center;
}

.profile-stats dd{
    line-height: 1.8em;
    margin:15px;
}


/* ------------------------------------
    NEWS
------------------------------------- */
#news{
    background-color: #E0E0E0;
    padding:50px 0 100px!important;
}


#news h2{
    float: left;
    width:250px;
    text-align: center;
    position: absolute;
    top:50%;
    margin-top:-12px;
}

#news .news-list{
    border-left: 1px solid #000;
    text-align: left;
    margin-left:250px;
}

#news .news-list li{
    
}


#news .news-list li a{
    color:#000!important;
    text-decoration: none;
    display: block;
    padding:10px 20px;
}


#news .news-list li a:hover{
    background-color: #FFF;
}

#news .news-list li span{
    margin-right:1em;
}


@media screen and (max-width: 750px) {

    #news h2{
        float: none;
        width:250px;
        text-align: center;
        position: absolute;
        top:0%;
        left:50%;
        margin-left:-125px;
        padding-bottom:30px;
        border-bottom: 1px solid #000;
    }
    

    #news .news-list{
        border-left: none;
        text-align: left;
        margin-left:0px;
        padding-top:70px;
    }
    
    #news .news-list span{
        display: block;
    }

    
}



/* ------------------------------------
    CONTACT
------------------------------------- */
#contact{
    background: url(../../images/index/contact-bg.png) 0 0 repeat;
    color:#FFF;
}

#contact h2{
    margin:30px 0;
    color: #FFF;
    font-weight: normal;
}


#contact table{
    width:100%;
}

#contact table th{
    padding:15px;
    vertical-align: top;
    position: relative;
    text-align: right;
    color:#FFF;
    font-weight: normal;
}

#contact table th span{
    font-weight: normal;
    color:#FFF;
    background-color: #3869B5;
    font-size:12px;
    padding:3px 15px;
    position: absolute;
    top:15px;
    right:15px;
}

#contact table td{
    padding:10px;
    margin-left;20px;
}

#contact table td input.text{
    padding:5px;
    min-width:350px
}

#contact table td textarea{
    padding:5px;
    width:68%;
    height:5em;
}

#contact p{
    margin: 45px;
}


.submit{
    font-size:15px;
    color:#fff;
    background-color: #000;
    padding:15px 40px!important;
    border:none;
    display: block;
    width:300px;
    margin: 0 auto;
}

#privacy{
    background-color: #000;
    color:#FFF;
    font-size:82%;
    margin-bottom: 0!important;
}



@media screen and (max-width: 540px) {
    
    /*------------------------
        MAIN VISUAL
    -------------------------*/
    .main-visual{
        width:540px;
        height:960px;
        background: url(../../images/index/main-sp.png) bottom center no-repeat;
        position: relative;
    }

    .main-visual img{
        position: absolute;
        top:95px;
        left: 100px;
        text-align: center;
    }

     
    /*------------------------
        WORKS
    -------------------------*/
   
    #works h2{
        float:none;
        margin-right:0em;
        margin-bottom:35px;
        text-align: center;
    }
    
    
    /* ------------------------------------
        PROFILE
    ------------------------------------- */

    #profile h2{
        text-align: center;
    }
    
    #profile h2 img{
        max-width: 100%;
    }

    #profile .profile-photo{
        float:none;
        margin:0 auto 50px auto;
    }

    #profile h3{
        clear: none;
        text-align: left;
        font-weight: normal;
    }

    #profile h3 img{
        margin:30px 0;
    }
    
    .profile-stats{
        background-color: #BBAEAA;
        padding:15px;
        text-align: left;
    }
    

    /* ------------------------------------
        CONTACT
    ------------------------------------- */

    #contact table{
        border-collapse: collapse;
        width:100%;
    }   
    #contact table th{
        display: block;
        border: none;
        text-align: left;
    }
    #contact table td{
        display: block;
        border: none;
    }
    
    #reserve-btn img{
        width:120px;   
    }
    
    .reserve img{
        width:120px;   
    }
    
    #contact table td textarea{
        padding:5px;
        width:95%;
        height:5em;
    }
}