@charset "utf-8";
/* CSS Document */
.sp {
    display: none;
}
    body {
    font-family: 'Open Sans','Noto Sans JP', sans-serif;
    padding: 0;
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.05rem;
    line-height: 1.4rem;
    }
    ul,li {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    a {
        text-decoration: none;
        color: #000;
    }
    a:hover img {
        opacity: 0.8
    }

    .wrap {
        width: 1280px;
        margin: 0 auto;
    }
    header .wrap {
        display: flex;
        justify-content: space-between;
    }
    .logo {
        margin: 8px auto 0;
        width: 30%;
    }
    nav {
            width: 92%;
    position: relative;
    right: -6%;
    }
    nav ul {
        display: flex;
        justify-content: space-between;
            align-items: center;
    }
    nav ul li a {
        font-family: 'Noto Sans JP', sans-serif
    }
    nav ul li a:hover {
        font-weight: bold;
        font-size: 0.9rem;
        position: relative;
    }
    nav ul li a:hover:before,
    nav ul li a:hover:after{
width: 100%;
    position: absolute;
    content: "";
    height: 4px;
    }
    nav ul li a:hover:before {
        background: #012060;
        bottom:-10px;
    }
    nav ul li a:hover:after{
        background: #c00000;
        bottom: -16px;
        left: -10px;
    }
        
    nav ul li:last-child a {
           padding: 40px 42px;
    background: #012060;
    color: #FFF;
    display: block;
    margin-right: -3px;
    }
    nav ul li:last-child a:hover {
        font-size: 0.8rem;
        font-weight: normal;
        opacity: 0.7;
    }
    nav ul li:last-child  a:hover:before,
    nav ul li:last-child  a:hover:after{
        height: 0;
        width: 0;
    }
    #fv {
background: url(/img/top/fv.jpg) center top no-repeat;
    background-size: cover;
    text-align: center;
    padding: 115px 0 480px;
    width: 100%;
    margin: -33px auto 100px;
    position: relative;
    }



    .news {
    margin: 0 auto 0 15%;
    width: 840px;
    text-align: left;
    height: 240px;
    overflow-y: scroll;
        position: absolute;
        bottom: 0;
}
@media screen and (min-width: 1500px) {
    #fv {
    padding: 115px 0 400px;
    }
}
@media screen and (min-width: 1600px) {
    #fv {
    padding: 115px 0 500px;
    }
}
@media screen and (min-width: 1670px) {
    #fv {
    padding: 115px 0 600px;
    }
}
    .news li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #c3c3c3;
    padding: 6px 0 6px;
    width: 80%;
    }
    
    .news li:first-child {
    margin-left: 11%;
    }
        .news li:nth-child(2) {
    margin-left: 6%;
    }
    .news .date {
    font-weight: bold;
    letter-spacing: 0.01rem;
    margin-right: 6%;
    font-family: 'Open Sans';
    font-size: 0.9rem;
    }
.news .newscont {
   width: 70%;
    text-align: left;
}
        	.news::-webkit-scrollbar{
   width: 10px;
}
.news::-webkit-scrollbar-track{
   background-color: #e4e4e4;
}
.news::-webkit-scrollbar-thumb{
   background-color: #012060;
}

    .left,.right {
        width: 50%;
    }
    .left {
        padding-top: 10px;
    }
   #topabout .right {
    margin-left: 13%;
        }
        #topabout {
            display: flex;
    justify-content: space-between;
    position: relative;
            margin-bottom: 190px;
    }
    .topaboutunderimg {
          position: absolute;
    right: 0;
        bottom: -125px;
    }
        #topabout .ttltext {
    margin: 84px auto 0;
    }
    .ttltext {
        font-style: italic;
    margin: 63px auto 0;
    font-size: 1.4rem;
    line-height: 2.4rem;
        font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
    }
    .ntext {
       width: 80%;
    margin: 24px 0 0 0;
    line-height: 2rem;
    font-size: 0.85rem;
    letter-spacing: -0.01rem;
    }
    .more {
        margin: 48px auto 0;
    display: block;
    }
    .businessunderimg {
            margin: 121px auto 0 7px;
    }
    #topbusiness {
        display: flex;
    justify-content: space-between;
    position: relative;
            margin: 0 auto 120px;
    }
    #topbusiness .right ul {
        margin: 107px auto 0;
    }
    
    #topbusiness .right li:nth-child(2) {
           margin: 90px auto 85px 150px;
    }
    #topbusiness .right li:last-child {
           margin: 0 0px 0 320px;
    }
    #toprecruit {
        display: flex;
        justify-content: space-between;
            margin: 0 auto 340px;
    }
  #toprecruit.toprec .siderwrap {
      
}
.toprec {
    position: relative;
}

    #toprecruit.toprec .right {
    position: absolute;
    right: 0;
    top: 0;
    margin-right: 0;
        z-index: 0
}
#toprecruit.toprec .topttlimgsp {
    position: relative;
    z-index: 1
}
    #toprecruit .left {
        width: 36%;
    }
    #toprecruit .right {
            width: 74%;
    margin-right: -6%;
            position: relative;
        z-index: -1
    }

.underrecruit #toprecruit .right { 
       margin-right: 0;
    width: 64%;
    padding: 0; 
    z-index: 1;
    }
    #toprecruit .left .ntext {
        width: 100%;
    }
    .recbg {
        position: absolute;
    top: 0;
    right: 0;
    }
#toprecruit.toprec .siderwrap {
    width: 780px
}




                    .siderwrap {
                         padding: 85px 0 130px 106px;
    width: 82%;
    margin: 0 0 0 auto;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%);
                }

 .underrecruit #toprecruit  .siderwrap {
    padding: 85px 0 130px 10px;
    width: 95%;
}
@media screen and (max-width: 1200px) {
    .siderwrap {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    .recbg { 
        display: none;
        }
}
                .slider {
                    width: 130%;
                    max-width: 130%;
                    position: relative;
                                }
                .slider div p{
                    width: 280px;
                }

                .slider img {
                    width: 100%;
                    height: auto;
}
                .slider img.recmore,
.slider img.slide-arrow{
                    width: auto;
}
                        
                .prev-arrow,.next-arrow {
                        position: absolute;
        bottom: -85px;
                        cursor: pointer;
                }
                .prev-arrow {
    left: 34%;
                }
                .next-arrow {
                    left: 50%;
                }
    #topcompany {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        position: relative;
    }
    
    #topcompany .right {
           position: absolute;
    right: 0;
    top: 20px;
    width: auto;
    z-index: -1;
    }
    #topcompany ul {
       display: flex;
    flex-wrap: wrap;
    margin: 52px auto 60px 0;
    width: 74%;
    }
    #topcompany ul li:nth-child(odd) {
           width: 30%;
    font-size: 0.9rem;
    font-weight: bold;
    }
    #topcompany ul li:nth-child(even) {
        width: 70%;
    }
    #topcompany li {
                border-bottom: 1px dashed #c3c3c3;
    padding: 16px 0 19px;
    }
    .map {
        background: url("/img/common/mapbg.png") no-repeat top left;
          padding: 135px 0 410px;
    text-align: center;
    width: 100%;
    margin: -64px 0 0 0;
        position: relative;
        z-index: 0
    }
    .map a{
        margin-left: 80px;
    }
                    .mapwrap {
                        width: 480px;
    margin: 0 auto 10px;
    height: 360px;
    margin-bottom: 10px;
    text-align: left;
    position: relative;
    left: 15%;
       overflow: hidden
                    }
                    .mapwrap iframe {
                        border: 0;
    position: relative;
    top: -130px;
    left: -60px;
                    }
    #topcontact,#contact {
       margin: 0 auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
        position: relative;
    }
#topcontact {
       margin: -232px auto 0;
    position: relative;
}
#topcontact .topcontrightimg {
    top: 30px;
}
.topcontrightimg {
    position: absolute;
    right: 0;
    z-index: -1;
    top: 0
}
    
    
    #topcontact .left,
#contact .left{
            width: 40%;
    padding-top: 220px;
    }
    #topcontact .ntext,
#contact .ntext{
        width: 100%;
    }
    #topcontact .right,
#contact .right{
        width: 60%;
    }
#contact .right {
    position: absolute;
    right: 0;
    text-align: right
}
    #topcontact .right img,
#contact .right img{
    margin-left: -76px;
    }
#topcontact a,
#contact a{
        text-align: center;
    width: 30%;
    margin: 82px auto 0;
    padding: 37px 7px;
    background: #012060;
    display: block;
    font-size: 1rem;
    color: #FFF;
    }
    footer {
    background: #f2f2f2;
    margin: 82px 0 auto;
    padding: 0 0 15px;
    }
    footer .wrap {
        display: flex;
    justify-content: space-between;
    position: relative;
        flex-wrap: wrap;
    }
    .footnav {
          width: 53%;
    margin: 0;
    padding: 35px 0 0;
}
    
    footer .wrap ul {
        display: flex;
    justify-content: space-between;
        flex-wrap: wrap;
    }
    footer .wrap li a {
            padding: 10px 0 10px 15px;
    text-align: left;
    display: block;
    position: relative;
        font-family: 'Noto Sans JP', sans-serif
    }
    
    footer .wrap li a:before {
        content: "";
        background: url("img/common/footmenu.png") no-repeat left;
        width: 9px;
        height: 10px;
        position: absolute;
        left: 0;
            top: 17px;
    }
        
    .footlogo {
    padding: 50px 0 0;
            width: 25%;
    }
    .copy {
        width: 100%;
    text-align: center;
    font-size: 0.7rem;
    margin: 10px auto 0;
    }
    
    footer li:nth-child(1),
    footer li:nth-child(5) {
        width: 19%;
    }
    
    footer li:nth-child(2),
    footer li:nth-child(6) {
        width: 20%;
    }
    footer li:nth-child(3),
    footer li:nth-child(7) {
        width: 38%;
    }
    footer li:nth-child(4),
    footer li:nth-child(8) {
        width: 21%;
    }
    .topjump {
        margin: 0 48px 0 0;
    }


/****************privacy***********/
 #underfv {
        position: relative;
    padding: 189px 0 141px;
    margin: -33px auto 0;
    }
    
    #underfv .wrap img {
            margin-left: 11px;
    position: relative;
    z-index: 1;
    }
#underfv.recruitfvsp,
#underfv.newsfvsp{
    padding: 50px 0 20px
}
#underfv.recruitfvsp .wrap img,
#underfv.newsfvsp .wrap img {
    width: 20%;
}
    .fvimg {
    position: absolute;
        top: 0;
        right: 0;
    }
@media screen and (max-width: 1000px) {
    .fvimg {
        width: 80%;
        }

    }

    .bread {
        margin-bottom: 265px;
    }
    .breadunderline {
        margin-bottom: 265px;
    position: relative;
    z-index: 1;
    }
    .breadunderline:before,
    .breadunderline:after{
    content: "";
    width: 65%;
    height: 4px;
    position: absolute;
    }
    .breadunderline:before {
            background: #012060;
    left: 10px;
    bottom: -12px;
    }
    .breadunderline:after {
        background: #c00000;
            left: 0;
    bottom: -18px;
    }
    #pp {
    width: 1000px;
    margin: 0 auto;
    }
    
    #pp .ntext {
        width: 100%;
    }
    .ppttl {
        margin: 42px auto -9px;
    position: relative;
    font-size: 1.6rem;
    font-weight: bold;
    font-style: italic;
    padding-left: 22px;
    letter-spacing: -0.08rem;
    color: #012060;
    }
    .ppttl:before {
    content: "";
    width: 4px;
    height: 1.7rem;
    background: #012060;
    position: absolute;
    left: 2px;
    top: 0;
    }
    #pp ul {
        margin: 40px auto 27px
    }
    
    #pp li {
        position: relative;
            padding-left: 16px;
    padding-bottom: 9px;
    }
    #pp li:before {
        content: "・";
        position: absolute;
        left: 2px;
    }
    .homebtn {
    text-align: center;
    margin: 128px auto;
    width: 100%;
    }

/*************************recruit*********************/
 #recruitlistwrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 312px auto 60px;
        }
        .reclist {
              margin: 0 0 70px;
    width: 280px;
        }
        .reclist p.date {
                font-size: 0.9rem;
    margin: 15px auto 0;
        }
        .reclist p {
        margin: 7px auto 9px;
        }

        .reclist img {
            width: 100%;
            height: auto
}

        .reclist img.resmore {
            width: auto;
}
        .pager {
                width: 18%;
    margin: 0 auto 80px;
        }
        .pager ul {
            display: flex;
            justify-content: space-between;
        }
        .pager li {
    border: 3px solid #012060;
    font-size: 1.1rem;
        }
        .pager li a {       
               padding: 4px 0.65rem;
            display: block;
        }
        .pager li.now {
                border: none;
    position: relative;
    padding: 7px 0.65rem;
        }
        .pager li.now:before,
        .pager li.now:after{
               width: 70%;
    content: "";
    position: absolute;
    height: 4px;
        }
        .pager li.now:before {
            background:#012060;
                left: 10px;
    bottom: 1px;
        }
        .pager li.now:after{
            background: #c00000;
            left: 0;
            bottom: -4px;
        }
        .underotherlink {
            margin: 200px auto 0 ;
            width: 100%
        }
        .underotherlink ul {
    display: flex;
    justify-content: space-between;
        }
        .underotherlink ul li {
            width: calc(100% / 3);
}
        .underotherlink img {
            width: 100%;
                vertical-align: bottom;
        }
        .underotherlink a {
        display: block;
        }

/**************************recruit detail**********************/
    #recruitdetailwrap {
          margin: -200px auto -200px;
    padding: 54px 0 75px;
        background: #e7e7e7
    }
    
    #recruitdetailwrap .wrap {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    #recruitdetailwrap .wrap .left {
        width: 40%;
    margin-left: 11%;
    }
    #recruitdetailwrap .wrap .right {
            width: 46%;
    }
    #recruitdetailwrap .date {
           font-size: 0.95rem;
    margin: 15px auto 8px;
    }
    #recruitdetailwrap .recdetttl {
    margin: 0 auto 45px;
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: -0.01rem;
    }
    #recruitdetailwrap .recdetntext {
        line-height: 2rem;
    margin: 0 auto;
    }
    
    #recruitdetailwrap .wrap .left ul {
           display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 39px auto 0;
    }
    #recruitdetailwrap .wrap .left li:nth-child(odd) {
            width: 20%;
    background: #012060;
    color: #FFF;
    padding: 6px 0;
    text-align: center;
    }
    #recruitdetailwrap .wrap .left li:nth-child(even) {
        width: 78%;
            margin-bottom: 40px;
    }
    #recruitdetailwrap .wrap .left .big {
    margin: 6px auto 12px;
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.13rem;
    }
    #recruitdetailwrap .wrap .left ul p.recdetntext {
        font-family: 'Noto Sans JP', sans-serif;
    margin: 0 auto ;
    font-size: 0.88rem;
    }
    .recdetimg {
            position: relative;
    margin: 30px auto 0;
    z-index: 3;
    }
    
    .recdetimg img {
           position: relative;
    z-index: 3;
    width: 85%;
    height: auto;
    }
    
    .recdetimg:before,
    .recdetimg:after{
        content: "";
        width: 85%;
        height: 100%;
        position: absolute;
        mix-blend-mode: multiply;
        display: inline-block;
        z-index: 2
    }
    .recdetimg:before {
        background: #012060;
            bottom: -40px;
    right: 50px;
    }
    
    .recdetimg:after{
        background: #c00000;
        bottom: -80px;
        right: 0;
    }
    .recprenext {
            width: 22%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    }

/****************news******************/
                #newslist  {
                    width: 1000px;
    margin: 0 auto 130px
                }
                #newslist div {
                    padding: 20px 0;
    border-bottom: 1px dashed #c3c3c3;
                }
                #newslist div a {
                       display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
                }
                #newslist div .date {
                    width: 13%;
                }
                #newslist div .ntext {
                    margin: 0 auto;
                }
                #newslist div img {
                    width: 14%;
                }
                #newslist div .newsttl {
                   display: block;
    font-weight: bold;
                }
                

 #newsdetial {
                   background: #e7e7e7;
                      padding: 65px 0 80px;
    margin: -200px auto 130px;
                }
                .newsdetwrap  {
                    width: 1000px;
                    display: flex;
                    justify-content: space-between;
                    margin: 0 auto 70px;
                }
                #newsdetial .date {
                    font-size: 0.95rem;
    margin: 15px auto 8px
                }
                #newsdetial .newsttl {
                    margin: 0 auto 45px;
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: -0.01rem;
                }
                .newsdetwrap.left {
    padding-top: 10px;
    width: 51%;
}
               
                .newsdetwrap .right { 
                    width: 43%;
                        padding-top: 27px;
                }
                .newsdetwrap .right img { 
                    width: 100%;
                    height: auto;
}
                    
                .newsdetwrap .ntext {
                    width: 100%;
                }
                
                
                .underrecruit .recbg {
                    display: none;
                }
                .underrecruit .siderwrap {
                    clip-path:none
                }
                .underrecruit #toprecruit {
                margin:  0 auto -60px
                }

/*****************************company***********************/
                #companycont {
                    margin: 310px auto;
                    position: relative;
                }

                #companycont .wrap {
    display: flex;
    justify-content: space-between;
                    position: relative;
}
                #companycont ul,
                #related ul{
                    width: 75%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
                       margin: 48px 0 97px;
                }
                
                #companycont li,
                #related li{
                    border-bottom: 1px dashed #c3c3c3;
                        padding: 18px 0;
                }
                #companycont li:nth-child(odd),
                #related li:nth-child(odd){
                    width: 30%;
                        font-weight: bold;
                }
                #companycont li:nth-child(even),
                #related li:nth-child(even){
                    width: 70%;
                }
                
                .companycontimg2 {
                      position: absolute;
    bottom: -206px;
    right: 0;
                }
                .companycontbg {
                     position: absolute;
    z-index: -1;
    top: 412px;
    right:0 ;
                }
                .map.comppagemap {
                    margin: -194px auto 0 ;
                        padding: 230px 0 310px;
                }
                                    #related {
                            display: flex;
    justify-content: space-between;
    margin: 0 auto 30px;
                    }
                    #related .right {
                            margin: -70px auto 0;
                    }

/*****************************about**************************/

    
    
    #aboutaccess  .ttltext{
        margin: 0 auto 40px;
    }
    #aboutaccess  .ttltext span{
    font-family: 'Noto Sans JP', sans-serif;
    display: table;
    position: relative;
    }
    #aboutaccess  .ttltext span:before{
    content: "";
    width: 40px;
    height: 1px;
    background: #000;
    position: absolute;
    right: -50px;
    top: 22px;
    }
    #aboutaccess .wrap {
        display: flex;
    justify-content: space-between;
    }
    #aboutaccess .left {
        width: 40%;
    }
    #aboutaccess .left p.ntext {
        width: 100%;
    }
    #aboutaccess .right {
        width: 60%;
    padding-top: 70px;
    }
    #philo .wrap {
        display: flex;
        justify-content: space-between;
    }
    #philo .left {
        margin-top: -20px;        
    }
    #philo .left .ttltext {
    margin: 25px auto 45px;
    font-family: 'Noto Sans JP', sans-serif;
    }
    #philo .right {
        text-align: right;
    padding-top: 170px;
    }
    #concept {
        margin: 145px auto 0;
    }
    
    #concept .wrap {
        display: flex;
        justify-content: space-between;
    }
    #concept .right {
            width: 46%;
    padding-top: 100px;
    }
    #concept .right .ttltext {
        margin: 20px 0 40px
    }
    #concept .right .ntext {
        width: 90%;
    }
    #guideline {
        margin: -105px auto 0;
            }
    
    #guideline .wrap  {
    display: flex;
    justify-content: space-between;
    }
    
    #guideline .left .ntext  {
        width: 100%
    }
    #guideline ul {
    width: 87%;
    margin: 71px 0 0 auto;
    }
    #guideline li:nth-child(2) {
    padding-left: 20px;
    }
    #guideline li:nth-child(3) {    
        padding-left: 86px;
    }
    #guideline li:nth-child(4) {  
        padding-left: 110px;
    }
    
    #guideline .right {
        text-align: right;
    padding-top: 192px;
    }
/*********************************business*************/
        #businesshead {
            display: flex;
    justify-content: space-between;
        }
        #businesshead .ttltext {
            font-family: 'Noto Sans JP', sans-serif;
                 margin: 44px auto 37px;
        }
        #businesshead .ntext {
            width: 100%;
        }
        #businesshead .right {
            width: 60%;
    padding-top: 110px;
        }
        #traffic {
            margin: 93px auto 190px;
    display: flex;
    justify-content: space-between;
        }
        #traffic .left{
        width: 60%;
        }
        #traffic .left .ntext{
            margin: 70px auto 0 0;
        }        
        #traffic .right{
        padding-top: 80px;
        }
        
        #crowd {
            display: flex;
            justify-content: space-between;
        }
        #crowd .left {
            padding-top: 50px;
        }
        #crowd .right {
            width: 47%;
        }
        #crowd .right .ntext {
            width: 89%;
        }
        #parking {
            margin: 180px auto 120px;
    display: flex;
    justify-content: space-between;
        }
        #parking .left .ntext{
            margin: 34px 0;
        }
        #parking .right {
            width: 47%;
    padding-top: 55px;
        }

/*************************contact*****************/
                .contheadtext{
                text-align: center;
    margin: 300px auto 0;
                }
                .contheadtext .ntext {
                    text-align: center;
    margin: 24px auto;
                }
                .formTable {
                      width: 60%;
    margin: 40px auto;
                }
                .formTable th {
                    text-align: left;
                    font-weight: normal;
                    position: relative;
                }
                .formTable th.hi:before {
                     content: "必須";
    background: #012060;
    color: #fff;
    padding: 5px 10px;
    position: absolute;
    right: 0;
    top: 12px;
    line-height: 1rem;
    font-size: 80%;
                }
                input[type=text] {
                  width: 100%;
    padding: 6px;
    height: 30px;
    background: #e7e7e7;
    border: none;
                }
                .formTable th,
                .formTable td {
                       text-align: left;
    padding: 5px 20px;
    vertical-align: middle;
                }
                
                input[type=text].w50 {
                    width: 50%;
                }
                textarea {
                    width: 100%;
    background: #e7e7e7;
    height: 90px;
    border: none;
    padding: 6px;
                }
                .submitbtn {
                    text-align: center;
                }
                input[type=submit] {
                       width: 22%;
    color: #FFF;
    border: none;
    background: #012060;
    padding: 25px 0;
                }
                #formWrap {
                    margin: 0 auto 100px;
                }