@charset "UTF-8";


/*  common
------------------------- */

body,html {
    display: block;
}

body {
    font-family: "游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    background: #ffffff;
    font-size: 15px;
    line-height: 1.875;
    letter-spacing: 0.02em;
    color: #000000;
}

a {
    color: #535353;
    transition: all 0.4s;
}

a:hover,
a:focus {
    color: #53868e;
    text-decoration: none;
}

img {
    width: inherit;
    max-width: 100%;
    height: auto;
}

p {}

ul {}

ul li {
    position: relative;
}

ul.circle {
    display: inline-block;
    list-style: none;
}
ul.circle li {
    padding-left: 18px;
    margin-bottom: 2em;
    text-align: left;
}
ul.circle li::before {
    content: "●";
    position: absolute;
    left: 0;
}

ul.disc {
    padding-left: 20px;
    list-style: disc;
}

table {
    width: 100%;
}

th,td {
    display: block;
    position: relative;
    padding: 16px 8px;
    vertical-align: top;
}

th {
    font-weight: bold;
    color: #446389;
    border-bottom: solid 1px #446389;
}
td {
    margin-bottom: 8px;
}

dl {}
dl dt {
    font-size: 18px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    color: #53868e;
    border-bottom: solid 1px #53868e;
}
dl dd {
    margin-bottom: 48px;
}

h2, .h2 {
    font-size: 36px;
    line-height: 1.7;
}

h3, .h3 {
    font-size: 30px;
    font-weight: bold;
    line-height: 1.7;
    text-align: center;
    color: #446389;
}

h4, .h4 {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.7;
    text-align: center;
    color: #446389;
}

a.more {
    position: relative;
    display: inline-block;
    padding: 10px 55px 10px 40px;
    color: #fff;
    border: solid 1px #fff;
}

a.more:hover {
    color: #333;
    background: none;
}

.font-large {
    font-size: 15px;
}

.centering {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}

.xs-mg-bottom0 {margin-bottom: 0px;}
.xs-mg-bottom15 {margin-bottom: 15px;}
.xs-mg-bottom30 {margin-bottom: 30px;}
.xs-mg-bottom50 {margin-bottom: 50px;}

.xs-block {display: block;}

.c_animated {visibility: hidden;}

.row-eq-height {
    display: flex;
    flex-wrap: wrap;
}



/*  header
------------------------- */

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background: #fff;
    border-bottom: solid 1px #dcdcdc;
    z-index: 1000;
}

.headerInner {}

.logo {
    float: left;
}

.logo h1 {
    float: left;
    font-size: inherit;
    margin: 0;
}

.logo img {
    width: 216px;
}

.logo p {
    display: inline-block;
    font-size: 10px;
    margin-bottom: 0;
    padding-top: 8px;
    color: #898989;
}


/*  mainmenu */

#mainNav {
    visibility: hidden;
    position: absolute;
    top: 53px;
    left: 0;
    width: 100%;
    height: 100vh;
    height: calc(100vh - 53px);
    overflow-x: hidden;
    background: #fff;
    z-index: 100;
    opacity: 0;
    transition: opacity .4s;
}

#navArea {
    height: 100%;
    margin-top: 50px;
}

#navArea:after {
    content: "";
    position: absolute;
    bottom: -10px;
    right: -80px;
    margin: auto;
    width: 428px;
    height: 200px;
    background: url(../images/page_back.png);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
}

.navOpen {}

.navOpen,
.navOpen span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.navOpen {
    position: absolute;
    top: 16px;
    right: 10px;
    width: 27px;
    height: 20px;
}
.navOpen span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  border-radius: 2px;
}
.navOpen span:nth-of-type(1) {
  top: 0;
}
.navOpen span:nth-of-type(2) {
  top: 9px;
}
.navOpen span:nth-of-type(3) {
  bottom: 0;
}


body.nav_open {}

#mainNav.active {
    visibility: visible;
    opacity: 1;
}

.navOpen.active span:nth-of-type(1) {
  -webkit-transform: translateY(9px) rotate(-45deg);
  transform: translateY(9px) rotate(-45deg);
}
.navOpen.active span:nth-of-type(2) {
  opacity: 0;
}
.navOpen.active span:nth-of-type(3) {
  -webkit-transform: translateY(-9px) rotate(45deg);
  transform: translateY(-9px) rotate(45deg);
}



#navArea ul {
    margin: 0;
}

#navArea ul li {
    display: block;
    margin: 30px 0;
    text-align: center;
    box-sizing: border-box;
}

#navArea ul li a {
    display: inline-block;
    position: relative;
    font-size: 20px;
    padding: 5px 8px;
    text-align: center;
    color: #000;
}

#navArea ul li a img {
    max-height: 18px;
}

#navArea ul li a span {
    display: block;
    font-size: 13px;
}

#navArea ul li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #000;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
    -webkit-transform-origin: right top;
    transform-origin: right top;
    -webkit-transition: -webkit-transform .4s cubic-bezier(1,0,0,1);
    transition: -webkit-transform .4s cubic-bezier(1,0,0,1);
    transition: transform .4s cubic-bezier(1,0,0,1);
    transition: transform .4s cubic-bezier(1,0,0,1),-webkit-transform .4s cubic-bezier(1,0,0,1);
}

#navArea ul li a:hover::before {
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
}




/*  footer
------------------------- */

#footer {}

#footer .page_top {
    text-align: center;
    background: #b5b5b5;
}
#footer .page_top a {
    position: relative;
    display: block;
    width: 100%;
    height: 60px;
    padding: 20px 0;
}
#footer .page_top a span {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 20px;
}
#footer .page_top a span:before,
#footer .page_top a span:after {
    position: absolute;
    content: "";
    width: 30px;
    height: 1px;
    background: #fff;
}

#footer .page_top a span:before {
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
    top: 7px;
    left: 2px;
}
#footer .page_top a span:after {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    top: 7px;
    right: 2px;
}

.footer_content {
    background: #1b1b1b;
    padding: 25px 8.333%;
}

.footer_content #footermanu {}

.footer_content #footermanu ul {}
.footer_content #footermanu ul li {
    display: block;
    line-height: 1;
}
.footer_content #footermanu ul li a {
    display: block;
    padding: 15px 0;
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
    color: #bfbfbf;
    border-bottom: dotted 1px #3e3e3e;
}

.footer_content #footermanu ul li:last-child a {
    border-right: none;
}

.footer_content #footer-copy {
    margin-top: 48px;
    color: #bfbfbf;
}

.footer_content #footer-copy address {
    margin-bottom: 0;
    font-size: 12px;
    font-style: italic;
    text-align: center;
}





/*  page-common
------------------------- */

main {
    margin-top: 53px;
}

/*  page-hero */

section.page_title {
    position: relative;
    overflow: hidden;
}

section.page_title:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -110px;
    margin: auto;
    width: 315px;
    height: 140px;
    background: url(../images/page_back.png);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
}

.page_title .company_name {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5px;
    margin: auto;
    height: 170px;
    color: #446289;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

.pageHero {
    position: relative;
}

.pageHero_text {
    margin: 50px 0;
    text-align: center;
}

.pageTitle {
}

.pageTitle::after {
}

.pageTitle h2 {
    margin: 0;
    padding-bottom: 30px;
    font-size: 27px;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.pageSubTitle {
}

.pageSubTitle span {
    position: relative;
    display: inline-block;
    padding: 0 10px 15px;
    font-size: 14px;
    color: #959595;
}

.pageSubTitle span:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #446389;
}


/*  section    */

.section {
    padding: 75px 0;
}

.sectionTitle {
    margin-bottom: 50px;
}

.sectionTitle h3 {
    margin-bottom: 0px;
    font-size: 21px;
    font-weight: bold;
    text-align: center;
    letter-spacing: .1em;
}

.sectionTitle h3 span {
    display: block;
    font-size: 10px;
    color: #53868e;
}

.sectionInfo {
    margin-bottom: 50px;
}

.sectionSubTitle {
    margin-bottom: 50px;
}

.sectionSubTitle h4 {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #635680;
}

.sectionSubTitle h4 span {
    display: inline-block;
    padding: 0 10px 10px;
    border-bottom: solid 4px #635680;
}


/*   fullBack   */

.fullBack {
    position: relative;
    z-index: 1;
}

.fullBack .imgArea,
.fullBack .nullArea {
    float: left;
}

.fullBack .imgArea {
    position: absolute;
    width: 90%;
    width: calc(100% - 15px);
    height: 280px;
    background: url(../images/message.jpg);
    background-size: cover;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
    z-index: 1;
}
.fullBack .imgArea_bg {
    top: 35px;
    left: 0;
    width: 50%;
    height: 543px;
    background: #446389;
    z-index: -1;
}
.fullBack .imgArea .imgArea_bg:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: url(../images/pattern_blue.png);
}
.fullBack .imgArea img {
    width: 100%;
}

.fullBack .imgArea .imgArea_title {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.fullBack .imgArea .imgArea_title h3 {
    margin: 0;
    font-size: 36px;
    font-weight: bold;
    color: #fff;
    text-align: left;
    -webkit-text-shadow: rgba(0, 0, 0, 0.6) 2px 2px 6px;
    text-shadow: rgba(0, 0, 0, 0.6) 2px 2px 6px;
}

.fullBack .nullArea {}

.fullBack .textArea {
    top: 35px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.fullBack .textArea p {
    margin-bottom: 30px;
}

.fullBack .imgArea .slider {
    width: 100%;
    height: 100%;
}



/*   pattern_bg   */

.pattern_bg {
    position: relative;
}

.pattern_bg::before,
.pattern_bg::after {
    content: "";
    position: absolute;
    width: 539px;
    height: 539px;
}

.pattern_bg.pattern_blue::before,
.pattern_bg.pattern_blue::after {
    background: url(../images/pattern_blue.png);
}

.pattern_bg.pattern_white::before,
.pattern_bg.pattern_white::after {
    background: url(../images/pattern_white.png);
}



/*  page-flont
------------------------- */

.flont {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    z-index: 100;
}

.flex_cover {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex_inner {
    width: 100%;
    padding: 0 48px;
}

.flont header {
    position: relative;
    width: 100%;
    z-index: 100;
    padding: 0;
    padding-top: 48px;
    margin-bottom: 32px;
    border: none;
    background: none;
}

.flont .headerInner {
    display: flex;
    text-align: center;
    justify-content: center;
}

.flont div.logo {}

.flont div.logo img {
    width: 131px;
}

.flont #mainNav {
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 1000;
    background: rgb(255, 255, 255);
}

.flont #navArea {
    margin-top: 24px;
}

.flont #navArea ul li {
    margin: 24px 0;
}

.navClose {
    position: absolute;
    top: 16px;
    right: 10px;
    width: 27px;
    height: 20px;
}
.navClose span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  border-radius: 2px;
}
.navClose span:nth-of-type(1) {
  top: 0;
  -webkit-transform: translateY(9px) rotate(-45deg);
  transform: translateY(9px) rotate(-45deg);
}
.navClose span:nth-of-type(2) {
  bottom: 0;
  -webkit-transform: translateY(-9px) rotate(45deg);
  transform: translateY(-9px) rotate(45deg);
}


.flont main {
    position: relative;
    margin-top: 30px;
    z-index: 100;
}

section#hero p {
    color: #fff;
    font-size: 14px;
    font-style: italic;
    line-height: 2.1;
}

.hero_slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.flont_border {}
.flont_border::before,
.flont_border::after {content: "";position: absolute;z-index: 100;background: #fff;}
.flont_border.TopLeft {}
.flont_border.TopLeft::before {top: 0;left: 0;width: 100%;height: 16px;}
.flont_border.TopLeft::after {top: 0;left: 0;height: 100%;width: 16px;}
.flont_border.bottomRight {}
.flont_border.bottomRight::before {bottom: 0;left: 0;width: 100%;height: 16px;}
.flont_border.bottomRight::after {top: 0;right: 0;height: 100%;width: 16px;}


/*  flont_mainmenu */

#flontMenu_open {
    margin: 32px 0 16px;
    padding-bottom: 48px;
    text-align: center;
}

#flontMenu_open span {
    display: inline-block;
    padding: 8px 48px;
    color: #fff;
    border: solid 1px #fff;
    background: rgba(255, 255, 255, 0.2);
}

.flont #navArea ul {}


.flont #footer {
    position: relative;
    bottom: 30px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 100;
}

.flont #footer address {
    margin: 0;
    color: #fff;
    font-size: 12px;
    font-style: italic;
}



/*  page-about
------------------------- */

#message {
    padding-top: 0;
}

#message .fullBack .imgArea_bg {
    position: absolute;
    top: 15px;
    left: auto;
    right: 0;
    width: 95%;
    width: calc(100% - 15px);
    height: 300px;
    overflow: hidden;
}

#message .fullBack .imgArea_bg:before {
    bottom: -270px;
    left: 300px;
}

#message .fullBack .imgArea_bg:after {
    content: none;
}

#message .fullBack .textArea {
    position: relative;
    margin-right: 0;
    padding-top: 256px;
    width: 95%;
    width: calc(100% - 15px);
    background: #446289;
}

#message .fullBack .textArea p {
    color: #fff;
}

#message .fullBack .textArea span {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
}


#about td a {
    display: inline-block;
    margin: 8px 0 16px;
    padding: 3px 15px;
    color: #fff;
    background: #626262;
    border: solid 1px #fff;
}
#about td a:hover {
    color: #626262;
    background: #fff;
    border: solid 1px #626262;
}
#about td .tel a {
    margin: 0;
    padding: 0;
    color: #000;
    background: none;
}
#about td ul.li_half li {
    width: 40%;
    float: left;
}


#timeline {
    position: relative;
    background: url(../images/timeline_bg.jpg);
    background-size: contain;
    background-repeat: repeat-x;
    overflow: hidden;
}

#timeline.pattern_bg::before {
    bottom: -130px;
    left: 100px;
}
#timeline.pattern_bg::after {
    top: -380px;
    right: 0;
}

#timeline h3 {
    margin: 0 0 32px;
}

#timeline th,
#timeline td {
    padding: 8px 16px;
    border: none;
    vertical-align: middle;
}


#recruit {
    height: 773px;
    overflow: hidden;
}

#recruit .fullBack .imgArea_bg {
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    height: 420px;
    width: 95%;
    width: calc(100vw - 15px);
    overflow: hidden;
}

#recruit .fullBack .imgArea_bg:before {
    bottom: -270px;
    left: 300px;
}
#recruit .fullBack .imgArea_bg:after {
    top: -270px;
    right: -200px;
}

#recruit .container_start {
}

#recruit .container {
    position: relative;
}

#recruit .fullBack .imgArea {
    position: relative;
    right: 0;
    width: 95%;
    width: calc(100vw - 15px);
    height: 300px;
    background: none;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

#recruit .recruit_message {
    margin-top: 24px;
    padding-left: 15px;
    position: relative;
    z-index: 10;
}
#recruit .recruit_message h3 {
    margin: 0;
    margin-bottom: 24px;
    font-size: 24px;
    text-align: left;
    color: #fff;
    -webkit-text-shadow: rgba(0, 0, 0, 0.6) 2px 2px 6px;
    text-shadow: rgba(0, 0, 0, 0.6) 2px 2px 6px;
}
#recruit .recruit_message p {
    margin-bottom: 24px;
    color: #fff;
    -webkit-text-shadow: rgba(0, 0, 0, 0.6) 2px 2px 6px;
    text-shadow: rgba(0, 0, 0, 0.6) 2px 2px 6px;
}
#recruit .recruit_message a {
    display: inline-block;
    padding-bottom: 8px;
    color: #fff;
    border-bottom: solid 1px #fff;
}



/*  page-work
------------------------- */

#workMessage {
    padding: 0;
}

#workMessage h3 {
    font-size: 18px;
}

.workMessage {
    padding: 0;
}

#recruit.recruitMessage .recruit_message a:hover {
    background: #fff;
    color: #446289;
}

.recruit_info h3 {
    margin-bottom: 60px;
}

#work {}

.workBox {
    margin-bottom: 75px;
}

.workBox .box_img {
    margin-bottom: 30px;
}

.workBox .box_text {}

.workBox .box_text h4 {
    margin-top: 0;
    margin-bottom: 30px;
}



/*  page-recruit
------------------------- */

.recruit_box {
    padding: 32px 0 48px;
    background: #f7f7f7;
}







/*  page-contact
------------------------- */

p.note {
    padding: 15px;
    font-size: 13px;
}

p.note a {
    color: #53868e;
    text-decoration: underline;
}

div.contactForm {
    padding: 15px;
    background: #f7f7f7;
}

div.contactForm p {
    margin-bottom: 0;
}

div.contactForm .required {

}

div.contactForm input,
div.contactForm button,
div.contactForm select,
div.contactForm textarea {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 8px 10px;
    border: solid 1px #cccccc;
}

div.contactForm div.formItem {
    margin-bottom: 15px;
}

div.contactForm div.formItem label {
    font-weight: normal;
    width: 100%;
}

div.contactForm div.formItem span.required {
    color: #C62828;
    font-size: 10px;
    font-weight: normal;
    padding-left: 8px;
    vertical-align: top;
}

div.contactForm div.formItem.item_submit {
    text-align: center;
}

div.contactForm div.formItem.item_submit input {
    display: inline-block;
    padding: 15px 0;
    max-width: 320px;
    font-size: 15px;
    letter-spacing: 0.5em;
    border: none;
    color: #fff;
    background: #446289;
}




@media print,screen and (min-width: 600px) {


}



@media print,screen and (min-width: 992px) {


    /*  common
    ------------------------- */

    .pad-col1 {
        padding-left: 8.333%;
        padding-right:  8.333%;
    }
    
    .pad-col2 {
        padding-left: 16.666%;
        padding-right:  16.666%;
    }
    
    .pad-col3 {
        padding-left: 25%;
        padding-right:  25%;
    }

    .row-eq-height {
        display: flex;
        flex-wrap: wrap;
    }

    .xs-block {display: inline-block;}

    .xs-mg-bottom0,
    .xs-mg-bottom15,
    .xs-mg-bottom30,
    .xs-mg-bottom50 {margin-bottom: 0px;}

    .md-mg-bottom0 {margin-bottom: 0px}
    .md-mg-bottom15 {margin-bottom: 15px}
    .md-mg-bottom30 {margin-bottom: 30px}
    .md-mg-bottom50 {margin-bottom: 50px}

    th, td {
        display: table-cell;
        position: relative;
        padding: 35px;
        padding-top: 15px;
        vertical-align: top;
    }
    
    th {
        width: 30%;
        font-weight: bold;
        color: #446389;
        border-top: solid 1px #446389;
    }

    td {
        width: 70%;
        padding-top: 0;
    }
    

    /*  header
    ------------------------- */

    header {
        position: relative;
        padding: 22px 5% 20px;
        border-bottom: solid 1px #dcdcdc;
    }

    .logo img {
        width: 315px;
    }



    /*  mainmenu */

    #mainNav {
        visibility: visible;
        position: relative;
        top: 0;
        right: 0;
        width: auto;
        height: auto;
        float: right;
        opacity: 1;
    }
    .navOpen {display: none;}
    #navArea {margin-top: 0;}
    #navArea:after {content: none;}

    #navArea ul {
        display: flex;
        justify-content: space-between;
        margin: 0;
    }

    #navArea ul li {
        display: inline-block;
        min-width: 144px;
        margin: 0;
        text-align: center;
        box-sizing: border-box;
    }


    /*  footer
    ------------------------- */

    .footer_content #footermanu {float: left;}
    .footer_content #footermanu ul li {display: inline-block;float: left;}
    .footer_content #footermanu ul li a {
        display: inline-block;
        padding: 0 30px;
        border: none;
        border-right: solid 1px #bfbfbf;
    }
    .footer_content #footer-copy {margin-top: 0;float: right;}



    /*  page-common
    ------------------------- */

    main {margin-top: 0;}


    /*  page-title */

    section.page_title:after {
        top: 0;
        bottom: 0;
        right: -140px;
        margin: auto;
        width: 738px;
        height: 333px;
    }
    .page_title .company_name {left: 75px;height: 333px;}
    .pageHero_text {margin: 150px 0;}
    .pageTitle h2 {padding-bottom: 30px;font-size: 36px;}
    .pageSubTitle span {padding-bottom: 30px;}
    .pageSubTitle span:after {height: 4px;}


    .fullBack .imgArea_bg {
        position: absolute;
        top: 35px;
        left: 0;
        width: 50%;
        height: 543px;
        background: #446389;
        z-index: -1;
    }

    .fullBack .imgArea {
        position: relative;
        width: 50%;
        width: calc(50% - 100px);
        height: 543px;
        background: url(../images/message.jpg);
        background-size: cover;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
    }
    
    .fullBack .imgArea_bg {
        top: 35px;
        left: 0;
        width: 50%;
        height: 543px;
        background: #446389;
        z-index: -1;
    }

    .fullBack .textArea {
        position: absolute;
        top: 35px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }
   


    /*  page-flont
    ------------------------- */

    .flex_cover {
        min-height: auto;
        height: 100vh;
    }
    .flont #mainNav {
        position: relative;
        width: 50%;
        min-width: 630px;
        float: right;
        background: none;
    }
    .flont #navArea {
        margin-top: 0;
    }
    .flont .headerInner {justify-content: space-between;}
    section#hero {
        width: 50%;
        min-width: 630px;
        float: right;
    }
    #flontMenu_open,
    .flontMainNnav_sp {display: none;}

    .flont #navArea ul li {
    display: inline-block;
    width: 25%;
    margin: 0;
    float: left;
    text-align: left;
    }
    
    .flont #navArea ul li a {
        display: inline-block;
        position: relative;
        font-size: 24px;
        font-style: italic;
        padding: 8px 16px;
        text-align: center;
        color: #fff;
    }
    
    .flont #navArea ul li a img {
        max-height: 20px;
    }
    
    .flont #navArea ul li a span {
        display: block;
        font-size: 13px;
    }
    
    .flont #navArea ul li a::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: #fff;
        -webkit-transform: scale(0,1);
        transform: scale(0,1);
        -webkit-transform-origin: right top;
        transform-origin: right top;
        -webkit-transition: -webkit-transform .4s cubic-bezier(1,0,0,1);
        transition: -webkit-transform .4s cubic-bezier(1,0,0,1);
        transition: transform .4s cubic-bezier(1,0,0,1);
        transition: transform .4s cubic-bezier(1,0,0,1),-webkit-transform .4s cubic-bezier(1,0,0,1);
    }
    
    .flont #navArea ul li a:hover::before {
        -webkit-transform-origin: left top;
        transform-origin: left top;
        -webkit-transform: scale(1,1);
        transform: scale(1,1);
    }

    .flont #footer {
        position: absolute;
        left: 40px;
        right: auto;
    }


    /*  page-about
    ------------------------- */

    #message {padding-top: 0;}
    #message .fullBack .imgArea_bg {
        position: absolute;
        top: 35px;
        left: 0;
        right: auto;
        width: 50%;
        height: 543px;
        overflow: hidden;
    }
    #message .fullBack .textArea {
        position: absolute;
        margin-right: inherit;
        padding-top: 0;
        width: auto;
        background: none;
    }
    #message .fullBack .textArea p {color: #000;}
    #message .fullBack .textArea span {color: #456389;}

    #about td a {margin: 0 0 0 30px;padding: 5px 15px;}
    #about td p .address {display: inline-block;width: 340px;}
    #about td ul.li_half li {width: 35%;float: left;}

    #timeline {margin-top: 50px;margin-bottom: 50px;}
    #timeline h3 {margin: 0 0 75px;}
    #timeline th,
    #timeline td {color: #000;padding: 15px;font-weight: normal;}

    #recruit .fullBack .imgArea_bg {
        top: 0;
        left: auto;
        right: 0;
        height: 543px;
        width: 92.666%;
        overflow: hidden;
    }
    #recruit .container_start {padding-left: 8.333%;position: relative;top: 0;}
    #recruit .recruit_message {margin-top: 80px;padding-left: 0;}
    #recruit .recruit_message h3 {margin-bottom: 60px;font-size: 30px;}
    #recruit .recruit_message p {margin-bottom: 50px;}

    #recruit .fullBack .imgArea {
        position: absolute;
        top: 80px;
        right: -120px;
        width: 845px;
        height: 541px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
    }


    /*  page-work
    ------------------------- */

    #workMessage {padding: 75px 0;}
    #workMessage h3 {font-size: 30px;}
    #work .row {margin-left: -50px;margin-right: -50px;}
    #work .row .col {padding: 0 50px;}



    /*  page-recruit
    ------------------------- */

    .recruit_box {
        padding-bottom: 104px;
        border-top: solid 1px #f7f7f7;
        background: none;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
    }


    /*  page-contact
    ------------------------- */

    div.contactForm {padding: 30px;}

    

}



@media print,screen and (min-width: 1200px) {




}



@media print {
    body {
        -webkit-print-color-adjust: exact;
        width: 1280px;
        transform: scale(0.8);
        -moz-transform: scale(0.8);
        -webkit-transform: scale(0.8);
        transform-origin: 0 0;
    }

    .pageHero_text {margin: 80px 0;}
    .zs-enabled .zs-slideshow .zs-slides .zs-slide {display: list-item;}
    #timeline {margin-bottom: 10px;}
    .page section {padding: 36px 0;}
    #recruit {height: 550px;}
    #recruit .fullBack .imgArea_bg {height: 440px;}
    #recruit .fullBack .imgArea {transform: scale(.8);top: -30px !important;}


}