@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;
    background-image: url(../../images/index/main.jpg);
}

.bg-slider img.main-image{
    position: absolute;
    top:50%;
    left:50%;
    margin-top:-160px;
    margin-left:-125px;
}

.bg-slider img.main-catch{
    position: absolute;
    top:43%;
    left:3%;
    margin-top:-160px;
    margin-left:0px;
}

@media screen and (max-width: 540px) {
    
    .bg-slider img.main-catch {
        width:520px;
    }

}

/* ------------------------------------
    ABOUT
------------------------------------- */
#about{
    position: relative;
    z-index: 20!important;
}

#about .wrap{
    position: relative;
    z-index: 30;
    background-color: #FFF;
}


#about h2{
    float:left;
    margin-right:30px;
}

#about p{
    text-align: left;
    margin:30px;
}

#about .about-catch{
    padding-top: 125px;
}


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

    #about h2{
        float:none;
        margin-right:0px;
        text-align: center;
    }
    #about .about-catch{
        padding-top: 0px;
    }

}

/* ------------------------------------
    PROFILE
------------------------------------- */

#profile{
    background-color: #00B4FF;
    padding-bottom:0!important;
}


#profile h2{
    margin-bottom:-40px;
}

@media screen and (max-width: 540px) {
    #profile h2{
        margin-bottom:0px;
    }

    #profile:before {
        content: '';
        position: absolute;
        top: -480px;
        left: 0;
        width: 120%;
        height: 80%;
        margin: 3% -10% 0;
        background: #FFF;
        -webkit-transform-origin: left center;
        -ms-transform-origin: left center;
        transform-origin: left center;
        -webkit-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
        transform: rotate(-3deg);
        z-index: 10;
    }


    #profile:after {
        content: '';
        position: absolute;
        top: 445px;
        left: 0;
        width: 120%;
        height: 60%;
        margin: 2.5% -10% 0;
        background: #C6ECFF;
        -webkit-transform-origin: left center;
        -ms-transform-origin: left center;
        transform-origin: left center;
        -webkit-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        transform: rotate(5deg);
        z-index: -1;
    }
    
}


@media screen and (max-width: 540px) {
    #profile{
        overflow: hidden;
        width:540px;
    }
    
    
    #profile:before {
        top: -250px;
        width: 120%;
    }


    #profile:after {
        top: 265px;
        width: 120%;
    }

}

/* ------------------------------------
    PROFILE-CONTS
------------------------------------- */

#profile-conts{
    background-color: #C6ECFF;
}

#profile-conts .wrap{
    margin:0 auto!important;
}

#profile-conts .leftSide{
    float:left;
    width:50%;
    text-align: left;
}

#profile-conts .leftSide h3{
    clear:none;
    margin:10px 15px 0;

}

#profile-conts .leftSide dl{
    
}
#profile-conts .leftSide dl dt{
    background-color: #234C9E;
    color:#FFF;
    padding:3px;
    width:90px;
    text-align: center;
    float:left;
    clear:both;
    margin:10px 15px 0;
}

#profile-conts .leftSide dl dd{
    padding:12px;
    margin:0px 0;
}



@media screen and (max-width: 540px) {
    #profile-conts{
        overflow: hidden;
        width:540px;
    }

    #profile-conts .leftSide h3{
        text-align: center;
    }
    
    #profile-conts .leftSide{
        float:none;
        width:100%;
        text-align: left;
    }
    
    #profile-conts .leftSide dl dt{
        text-align: center;
        float:none;
        clear:both;
        margin:10px auto;
    }

    #profile-conts .leftSide dl dd{
        padding:12px;
        margin:0px 0;
        text-align: center;
    }


}

/* ------------------------------------
    HISTORY
------------------------------------- */
#history{
    
}

#history h2{
    background-color:#FDFA26;
    font-size:16px;
    padding:10px 10px;
    width:300px;
    margin: 0 auto;
    position: relative;
}

#history h2:after{
    content: "▼";
    font-size:18px;
    position: absolute;
    left:50%;
    margin-left:-9px;
    bottom:-16px;
}

#history .history-conts{
    background-color: #FFF;
    padding:20px 30px;
    text-align: left;
    margin:30px 0;
    position: relative;
    z-index: 10;
}



#history .history-conts-after{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top:20px;
    left:20px;
    background: url(../../images/index/block-bg.jpg) 0 0 repeat;
    z-index: -10;
}

#history .history-conts-after:before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top:-20px;
    left:-20px;
    border:3px solid #234C9E;
    background-color: #FFF;
    z-index: -9;
}


#history .history-left{
    float:left;
    width:47%;
}

#history .history-right{
    float:right;
    width:47%;

}

#history .photo-history{
    text-align: center;
}

#history .photo-history img{
    margin: 25px 10px;   
}


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

    #history .history-conts{
        border:none;
        background-color: #FFF;
        padding:0px;
    }

    #history .history-left{
        float:none;
        width:100%;
    }

    #history .history-right{
        float:none;
        width:100%;
    }
    
    .history-p{
        margin-top: -1em!important;
    }
    
    #history .history-conts-after{
        display: none;
    }
    
}

/* ------------------------------------
    ACTIVITY
------------------------------------- */
#activity{

}

#activity h2{
    background-color:#FDFA26;
    font-size:16px;
    padding:10px 10px;
    width:300px;
    margin: 0 auto;
    position: relative;
}

#activity h2:after{
    content: "▼";
    font-size:18px;
    position: absolute;
    left:50%;
    margin-left:-9px;
    bottom:-16px;
}

#activity .activity-conts{
    background-color: #FFF;
    padding:20px 30px;
    text-align: left;
    margin:30px 0;
    position: relative;
    z-index: 10;
}



#activity .activity-conts-after{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top:20px;
    left:20px;
    background: url(../../images/index/block-bg.jpg) 0 0 repeat;
    z-index: -10;
}

#activity .activity-conts-after:before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top:-20px;
    left:-20px;
    border:3px solid #234C9E;
    background-color: #FFF;
    z-index: -9;
}

#activity p{
    margin:1em 0 2em;
}

#activity .activity-left{
    float:left;
    width:47%;
    font-size:92%;
}

#activity .activity-right{
    float:right;
    width:47%;

}


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

    #activity .activity-conts{
        border:none;
        background-color: #FFF;
        padding:0px;
    }

    #activity .activity-left{
        float:none;
        width:100%;
    }

    #activity .activity-right{
        float:none;
        width:100%;
    }


    #activity .activity-conts-after{
        display: none;
    }
    
    #activity h3{
        text-align: center;
    }

}




/* ------------------------------------
    RECRUIT
------------------------------------- */
#recruit{
    
}

#recruit h2{
    background-color: #234C9E;
    padding:20px 0 30px;
    margin-bottom: -20px;
}

#recruit .recruit-conts{
    background: url(../../images/index/recruit-bg.png) center center no-repeat #32a8e0;
    padding:45px 10px 45px 0;
}


#recruit .recruit-conts h3{
    padding:20px 0 15px;
}

#recruit .recruit-conts p{
    line-height: 1.8em;
    font-weight: bold;
	color:#FFFFFF;
}

#recruit .recruit-conts strong{
    color:#FFFA2E!important;
}


@media screen and (max-width: 540px) {
    
    #recruit .recruit-conts{
        background: none;
        background-color: #32a8e0;
        padding:0px 10px 45px 0;
    }
    
}

/* ------------------------------------
    NEWS
------------------------------------- */
#news{
    padding: 25px 0;
}


#news .leftNews{
    float: left;
    width: 48%;
    margin-bottom:40px;
}

#news .rightNews{
    float: right;
    width: 48%;
    margin-bottom:40px;
}


@media screen and (max-width: 540px) {
    
    #news .leftNews{
        float: none;
        width: 500px;
        margin:20px 0;
    }

    #news .rightNews{
        float: none;
        width: 500px;
        margin:20px 0;
    }
    
}


/* ------------------------------------
    CONTACT
------------------------------------- */
#contact{
    background-color: #00B4FF;
}

#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;
    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;
    text-align: left;
}

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

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

#contact p{
    margin: 45px;
    text-align: left;
}



/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
    display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
    outline-offset: -2px;
}



.submit{
    font-size:15px;
    color:#fff;
    background-color: #234C9E;
    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) {
    .bg-slider {
        width: 100vw;
        height: 70vh;
    }

    .bg-slider img.main-image{
        position: absolute;
        top:45%;
        left:50%;
        margin-top:-160px;
        margin-left:-125px;
    }

    .bg-slider img.main-catch{
        position: absolute;
        top:42%;
        left:3%;
        margin-top:-160px;
        margin-left:0px;
    }

    .bg-slider img{
        max-width:100%;
    }
     
    /*------------------------
        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;
    }
}