@charset "utf-8";

/*html, body {
    height: 100%;
}

body{
    width: 100%;
    display: block;
}*/

#wrapper {
    width: 100%;
    min-width: 1100px; 
    margin: 0 auto;
    overflow:hidden;
    position: relative;
}

    


/* --------------- header --------------- */
#ab7_header{
    width: 100%;
    border-bottom: 1px solid  #ccc;
    min-width: 1000px;
    margin:0 auto 10px;
}

#ab7_header #ab7_headerW{
    width: 1000px;
    margin:15px auto 5px;
}

#ab7_headerW #ab7_header_logo{
    width: 305px;
}

#ab7_headerW #ab7_header_logo img{
    width: 305px;
}


/* --------------- footer --------------- */
#ab7_footer{
    width: 100%;
    min-width: 1000px;
    background-color: #e5e5e5;
    padding: 50px 0;
}

#ab7_footerW{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
}
    

#ab7_footer ul.alink{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
    margin-right: 80px;
    font-size: 16px;
    
}

#ab7_footer ul.alink li:before{
    content: "";
    background: url(../img/arrow_footer.png) no-repeat center;
    background-size: 8px auto;
    padding-right: 40px;
}

#ab7_footer ul.alink li:not(:last-child){
    margin-right: 30px;
}

#ab7_footer ul.snslink{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;

}

#ab7_footer ul.snslink li:not(:last-child){
    margin-right: 20px;
}


#ab7_footer ul.snslink li:nth-child(1) {
    width: 18px;
}
#ab7_footer ul.snslink li:nth-child(2) {
    width: 18px;
}
#ab7_footer ul.snslink li:nth-child(3) {
    width: 18px;
}
#ab7_footer ul.snslink li:nth-child(4) {
    width: 55px;
    margin-right: 0;
}

#ab7_footer ul.snslink > li img {
    width: 100%;
}


/* --------------- Top --------------- */

#compose{
    width: 100%;
}

#compose .workW{
    width: 1000px;
    margin: 60px auto 150px;
    text-align: left;
}


#compose .workW a{
    display: block;
}


.workW h2{
    font-size: 20px;
    border-bottom: 1px solid  #ccc;
    padding-bottom: 30px;
    font-weight: bold;
}

.work_listW .work_list li {
    border-bottom: 1px solid  #ccc;
    padding: 15px 0;
}

.work_listW h3 {
    font-size: 18px;
    margin: 0 auto 5px;
    font-weight: normal;
}

.work_listW p{
    font-size: 14px;
}

.work_listW .work_list li a:hover{
    text-decoration: none;
}


/* --------------- slider --------------- */
.slider1 {
position: relative;
}
.slider1 .titleTxt {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width:  1000px;
z-index:2;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-ms-align-items: center;
align-items: center;
}

.slider1 .titleTxt h1 {
color:#fff;
text-align:  center;
font-size:  28px;
font-weight: bold;
}

.slider1 .titleTxt h1 b{
    font-size: 50px;
    font-weight: bold;
}

.slider1 .slideImg img{
    width:100%;
}


a.next {
position: absolute;
display: block;
width: 30px;
height: 60px;
top: 50%;
margin-top: -30px;
right: 30px;
}
a.prev {
position: absolute;
display: block;
width: 30px;
height: 60px;
top: 50%;
margin-top: -30px;
left: 30px;
}
.indicator{
display: none;
}

/* --------------- job --------------- */
#job{
    width: 1000px;
    margin: 50px auto 100px;
    text-align: left;
}

#job p{
    font-size: 14px;
    margin: 20px auto 40px;
}

#job h1{
    font-size: 24px;
    font-weight: bold;
}

#job .job_list{
    display:flex;
    flex-wrap: wrap;
    border-top: 1px solid  #ccc;
}
.job_list dt{
    width: 170px;
    padding: 20px 30px 20px 0px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    font-weight: bold;
    align-items: center;
    display: flex;
}
.job_list dd{
    padding: 20px 0;
    margin: 0;
    border-bottom: 1px solid #ccc; 
    width: 830px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.75;
}

.job_list a{
    color: #003295;
    text-decoration: underline;
}

.job_list a:hover{
    text-decoration: none;
}

.entryBtn{
    width: 540px;
    background-color: #ff4d00;
    line-height: 80px;
    margin: 100px auto 0;
    text-align: center;
}
.entryBtn a{
    display: block;
}

.entryBtn a:hover{
    opacity: 0.7;
}


.entryBtn b{
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}


@media only screen and (max-width:1150px) {
    a.next {
        display: none;
    }
    
    a.prev {
        display: none;
    }
}

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

    #wrapper {
        min-width: 100%; 
    }
    

    
    /* --------------- header --------------- */
    #ab7_header{
        min-width: 100%;
    }
    
    #ab7_header #ab7_headerW{
        width: 100%;
    }
    
    #ab7_headerW #ab7_header_logo{
        width: 70%;
        max-width: 305px;
        margin: 0 auto;
    }
    #ab7_headerW #ab7_header_logo img{
        width: 100%;
    }
    

    /* --------------- footer --------------- */
    #ab7_footer{
        min-width: 100%;
        padding: 7% 0;
    }
    
    #ab7_footerW{
    display: block;
    justify-content: initial;
    align-items: initial;
    }
    
    #ab7_footer ul.alink{
        display: inline-block;
        justify-content: initial;
        -ms-align-items: initial;
        align-items: initial;
        margin: 0 auto;
        font-size: 110%;
    }
    
    #ab7_footer ul.alink li:not(:last-child){
        margin-right: auto;
    }
    
    
    #ab7_footer ul.alink li{
        margin: 0 auto 6%;
        text-align: left;
    }
    
    #ab7_footer ul.snslink{
        margin: 3% auto 0;
        width: 60%;
        max-width: 230px;
    }
    

    #ab7_footer ul.snslink li:nth-child(1) {
        width: 11%;
    }
    #ab7_footer ul.snslink li:nth-child(2) {
        width: 11%;
    }
    #ab7_footer ul.snslink li:nth-child(3) {
        width: 11%;
    }
    #ab7_footer ul.snslink li:nth-child(4) {
        width: 33%;
        margin-right: 0;
    }
    
    /* --------------- top --------------- */
  
    #compose img{
        width: 100%;
    }
    
    #compose .workW{
        width: 94%;
    }
    
    .workW h2{
        font-size: 6vw;
    }
    
    .work_listW h3 {
        font-size: 120%;
    }
    
    .work_listW p{
        font-size: 105%;
    }
    
    .work_listW .work_list li{
        background: url(../img/arrow_sp.png) no-repeat 96% center;
    background-size: 3% auto;
    }
    
    #ab7_footer ul.alink li:before{
        padding-right: 35px;
    }
    
        
    
    /* --------------- slider --------------- */
    
    .slider1 .titleTxt {
        width: 90%;
        display: block;
        align-items: initial;
        top: 5%;
    }
    
    .slider1 .titleTxt h1{
        font-size: 5.5vw;
    }
    
    .slider1 .titleTxt h1 b{
        font-size: 10vw;
    }
    
    /* --------------- job --------------- */
    #job{
        width: 96%;
        margin: 50px auto 15%;
    }
    
    #job p{
        font-size: 100%;
    }

    #job h1{
        font-size: 6vw;
        text-align: center;

    }
    
    #job .job_list{
        display:block;
    }

    .job_list dt{
        width: 100%;
        padding: 4% 0 10px;
        border-bottom:none;
        font-size: 120%;
        display: block;
    }
    
    .job_list dd{
        padding: 0 0 4%;
        margin: 0;
        width: 100%;
        font-size: 110%;
        line-height: 1.75;
    }
    

    .entryBtn{
        width: 65%;
        margin: 10% auto 0;
        line-height: 1;
        padding: 5% 0px;
    }
    
    .entryBtn b{
        font-size: 5.5vw;
    }

    
}