@charset "utf-8";

/**
 *
 * Style css
 *
 */

/*
 *
 *  FontSize
 *
 *  font-size: 0.8em   ← 8px
 *  font-size: 1em     ← 10px
 *  font-size: 1.2em   ← 12px
 *
 */


/* =============================================================================
   common
   ========================================================================== */

img { max-width:100%; height: auto; width /***/:auto; /* for ie8 */ }
.full-img { height: 100.1%; overflow-y: hidden; margin-left: -1px; margin-top: -1px;/* bug? */
    -moz-background-size:cover;
    -webkit-background-size:cover;
    -o-background-size:cover;
    -ms-background-size:cover;
    background-size:cover;
}
.common-contents { height: 100%; position: relative; overflow: hidden; text-align: left; background-color: #f1f1f1; }
    #company,
    #recruit,
    #contact { height: auto; }
.common-section { width: 960px; margin: 0 auto; }
.common-sentence { font-size: 1.3em; line-height: 2; }
.br-sp { display: block; }
@media screen and (max-width: 980px) {
    #site-header .full-img,
    .service .full-img,
    #company,
    #recruit,
    #contact { height: auto;
        -moz-background-size:100% auto;
        -webkit-background-size:100% auto;
        -o-background-size:100% auto;
        -ms-background-size:100% auto;
        background-size:100% auto;
    }
    #site-header .full-img *,
    .service .full-img *,
    #company *,
    #recruit * { position: static !important; top: 0 !important; left: 0 !important; bottom: 0 !important; }
    .common-contents { height: auto; }
    .common-section { width: 90%; }
    .br-sp { display: none; }
}
table.common-table { width: 100%; }
table.common-table th, table.common-table td { padding: 12px 0; font-size: 1.2em; }
table.common-table th { width: 14.375%; font-weight: bold; vertical-align: top; }
@media screen and (max-width: 420px) {
    table.common-table tr{ display: block; }
    table.common-table th,
    table.common-table td{ display: list-item; list-style: none; width: 100%; }
    table.common-table th { padding-bottom: 5px; }
    table.common-table td { padding-top: 0; }
}


/* =============================================================================
   block
   ========================================================================== */
/* body { overflow: hidden; } */
#wrapper { height: 100%; background-color: #333; }
@media screen and (max-width: 980px) {
    body { overflow: auto; }
    #wrapper { height: 100%; }
}

#site-header .full-img { background-image: url("../images/head-photo.jpg"); background-position: center center; background-repeat: no-repeat; height: 100%; }
#site-header h1.head-logo { position: absolute; top: 26px; left: 30px; }
#site-header .head-copy { position: absolute; top: 18.4%; left: 50%; width: 530px; margin-left: -265px; }
#site-header .keyicon { position: absolute; top: 44.8%; left: 50%; width: 46px; height: 28px; margin-left: -23px; }
#site-header .news-area { position: absolute; bottom: 4.3%; left: 50%; width: 656px; height: 32px; margin-left: -328px; line-height: 32px; }
#site-header .news-area h1 { background-color: rgba(255, 255, 255, 0.8); text-align: center; width: 83px; float: left; margin-right: 4px;
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#D0ffffff,EndColorStr=#D0ffffff);
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#D0ffffff,EndColorStr=#D0ffffff)";
}
#site-header .news-area h1:not(:target){ filter: none; -ms-filter: none; }

#site-header .news-area h1 img { vertical-align: middle; }
#site-header .news-area #rss-feed { background-color: rgba(255, 255, 255, 0.8); float: left; width: 569px; font-size: 1.2em;
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#D0ffffff,EndColorStr=#D0ffffff);
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#D0ffffff,EndColorStr=#D0ffffff)";
}
#site-header .news-area #rss-feed:not(:target){ filter: none; -ms-filter: none; }
#site-header .news-area #rss-feed li time { float: left; width: 83px; margin-left: 8px; }
#site-header .news-area #rss-feed li p { float: left; }
#site-header .news-area #rss-feed li p a { text-decoration: underline;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -ms-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;
}
#site-header .news-area #rss-feed li p a:hover { opacity:0.5; filter: alpha(opacity=50); -ms-filter: "alpha( opacity=50 )"; }
@media screen and (max-width: 980px) {
    #site-header h1.head-logo { position: absolute !important; top: 26px !important; left: 30px !important; width: 15%; }
    #site-header .head-copy { text-align: center; width: 100%; margin: 0 auto; padding: 9% 0 23%; }
    #site-header .head-copy img { width: 50%; }
    #site-header .keyicon { display: none; }
}
@media screen and (max-width: 700px) {
    #site-header h1.head-logo { top: 5% !important; }
    #site-header .news-area { display: none; position: static; margin-left: 0; width: 100%; height: auto; }
    #site-header .news-area h1,
    #site-header .news-area #rss-feed { background-color: transparent; float: none; }
    #site-header .news-area h1 { width: 12%; margin-right: 0; text-align: left; margin-left: 8px; }
    #site-header .news-area #rss-feed { width: 88%; margin-left: 0; font-size: 1em; }
    #site-header .news-area #rss-feed li time { width: 15%; }
}
@media screen and (max-height: 900px) and (min-width: 981px) {
    #site-header .keyicon { top: 54.8%; }
}
@media screen and (max-height: 700px) and (min-width: 981px) {

    #site-header .keyicon { top: 54.8%; }
}


#site-nav { position: absolute; top: 39px; right: 53px; }
#site-nav ul li { float: left; }
#site-nav ul li.disp-none { display: none; }
#site-nav ul li a { background: url("../images/nav.png") top left no-repeat; display: block; text-indent: -9999px; width: 414px; height: 10px; }
#site-nav ul li a.nav-about {width: 50px; background-position: 0 0;}
#site-nav ul li a.nav-service {width: 61px; background-position: -71px 0; margin-left: 21px;}
#site-nav ul li a.nav-company {width: 73px; background-position: -158px 0; margin-left: 26px;}
#site-nav ul li a.nav-recruit {width: 62px; background-position: -258px 0; margin-left: 27px;}
#site-nav ul li a.nav-contact {width: 68px; background-position: -346px 0; margin-left: 26px;}

#side-nav { position: fixed; top: 50%; right: 1%; z-index: 9999; }
.lt-ie8 #side-nav { display: none; }
#side-nav ul li { margin-bottom: 15px; }
#side-nav ul li:last-child { margin-bottom: 0; }
#side-nav ul li.last-el-child { margin-bottom: 0; }
#side-nav ul li a { width: 6px; height: 6px; margin: 0 auto; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; text-indent: -9999px; display: block; background-color: #d8d8d8; }
#side-nav ul li a.selected { background-color: rgba(0, 0, 0, 0.5); }
#side-nav ul.selected-recruit li a { background-color: rgba(0, 0, 0, 0.5); }
.lt-ie9 #side-nav ul li a.selected { background-color: #333; }
.lt-ie9 #side-nav ul.selected-recruit li a { background-color: #333; }
#side-nav ul.selected-recruit li a.selected { background-color: #e9e9e9; }
@media screen and (max-width: 980px) {
    #side-nav { display: none; }
}
@media screen and (max-width: 768px) {
    #site-nav { display: none; }
}

#about .full-img { background-image: url("../images/about-photo.jpg"); background-position: top center; background-repeat: no-repeat; }
#about h1.main-title, #about .contents { position: absolute; left: 50%; width: 960px; margin-left: -596px; }
#about h1.main-title { top: 26.7%; }
#about .contents { top : 33.1%; width: 622px; font-size: 1.2em; line-height: 1.7; }
#about .contents p { margin-bottom: 20px; }
#about .contents .president { margin: 35px 0 0; }
@media screen and (max-width: 1280px) {
    #about h1.main-title, #about .contents { margin-left: -480px; }
}
@media screen and (max-width: 980px) {
    #about { background-color: #fafafa; height: 100%; }
    #about .full-img { height: 101%; }
    #about h1.main-title, #about .contents { width: 90%; margin-left: -45%; }
    #about .contents p { width: 64.7%; }
}
@media screen and (max-width: 780px) {
    #about { height: auto; }
    #about .full-img { background: none; height: auto; margin-top: 0; }
    #about h1.main-title, #about .contents { position: static; left: 0; width: 100%; margin-left: 0; }
    #about h1.main-title { padding: 8% 0 1%; }
    #about h1.main-title img { width: 32%;  }
    #about .contents p { width: 100%; }
    #about .contents { padding: 2.5% 0 8%; }
    #about .contents .president { margin-top: 25px; }
    #about .contents .president img { width: 28% }
}
@media screen and (max-width: 480px) {
    #about h1.main-title { padding-top: 12%; }
    #about .contents { padding-bottom: 12%; }
    #about h1.main-title img { width: 40%;  }
    #about .contents .president img { width: 40% }
}
@media screen and (max-height: 800px) {
    #about h1.main-title { top: 17.7%; }
    #about .contents { top : 25%; }
}
@media screen and (max-height: 660px) {
    #about .full-img { background-position: top center; }
    #about h1.main-title { top: 7%; }
    #about .contents { top : 15%; }
    #about .contents p { margin-bottom: 10px; }
    #about .contents .president { margin: 15px 0 0; }
}

.service h1.main-title, .service .contents { position: absolute; left: 3%; opacity: 0; }
.service h1.main-title { top: 28.7%; }
.service .contents { top: 39%; }
#service05 h1.main-title { top: 14.95%; }
#service05 .contents { top: 25.25%; }
#service06 .contents p { margin-top: 25px; }
#service06 .contents p:first-child { margin-top: 0; }
.service .contents p span { background-color: rgba(255, 255, 255, 0.8);}
.lt-ie9 .service .contents p span { background-color: #fff; }
.service .contents .btn-link { display: block; letter-spacing: .2em; font-size: 0.9em; color: #fff; font-weight: bold; text-align: center; width: 232px; height: 38px; line-height: 38px; margin-top: 22px; }
#service06 .contents .btn-link { margin-top: 25px; }
@media screen and (max-width: 980px) {
    .service h1.main-title, .service .contents { opacity: 1; }
    .service .contents { position: static; left: 0; padding: 2.5% 0 8%; width: 90%; margin: 0 auto; }
    .service h1.main-title { margin: 0; background-color: rgba(0, 0, 0, 0.4); width: 100%; height: 100%; overflow: hidden; }
    .service h1.main-title img { padding: 8% 100% 25% 5%; width: 15%; }
    #service01 h1.main-title img { width: 21%; }
    #service05 h1.main-title img { width: 42%; }
    #service06 h1.main-title img { width: 22%; }
    .service .contents p span { background-color: transparent; }
}
@media screen and (max-width: 590px) {
    .service .contents .btn-link { margin-left: auto; margin-right: auto; }
}
@media screen and (max-width: 480px) {
    .service .contents { padding: 5% 0 12%; }
    .service h1.main-title { margin: 0; width: 100%; height: 100%; overflow: hidden; }
    .service h1.main-title img { padding: 19% 100% 19% 5%; width: 20%; }
    #service01 h1.main-title img { width: 27%; }
    #service04 h1.main-title img { width: 40%; }
    #service05 h1.main-title img { width: 55%; }
    #service06 h1.main-title img { width: 29%; }
}
@media screen and (max-height: 900px) and (min-width: 981px) {
    .service .contents { top: 40%; }
    #service05 .contents { top: 26.25%; }
}
@media screen and (max-height: 800px) and (min-width: 981px) {
    .service h1.main-title { top: 22%; }
    .service .contents { top: 35%; }
    #service05 h1.main-title { top: 8.25%; }
    #service05 .contents { top: 21.25%; }
}
@media screen and (max-height: 650px) and (min-width: 981px) {
    .service h1.main-title { top: 15%; }
    .service .contents { top: 30%; }
    #service05 h1.main-title { top: 15%; }
    #service05 .contents { top: 30%; }
}

#service01 .full-img { background-image: url("../images/service01-photo.jpg"); background-position: center center; background-repeat: no-repeat; }
#service01 .contents .btn-link-wrap { margin-top: 22px; }
#service01 .contents .btn-link { background-color: #244864; margin-top: 0; float: left; }
#service01 .contents .btn-link-wrap a.last-el-child { margin-left: 10px; background-color: #356991; }
#service01 .contents .btn-link-wrap a:last-child { margin-left: 10px; }
#service02 .full-img { background-image: url("../images/service02-photo.jpg"); background-position: center center; background-repeat: no-repeat; }
#service02 .contents .btn-link { background-color: #774f8b; }
#service03 .full-img { background-image: url("../images/service03-photo.jpg"); background-position: center center; background-repeat: no-repeat; }
#service03 .contents .btn-link { background-color: #377c48; }
#service04 .full-img { background-image: url("../images/service07-photo.jpg"); background-position: center center; background-repeat: no-repeat; }
#service04 .contents .btn-link { background-color: #59493f; width: 194px; }
#service04 .main-title .is-sp { display: none; }
#service05 .full-img { background-image: url("../images/service05-photo.jpg"); background-position: bottom center; background-repeat: no-repeat; }
#service05 .contents .btn-link { background-color: #d32a3a; width: 348px; }
#service06 .full-img { background-image: url("../images/service06-photo.jpg"); background-position: bottom center; background-repeat: no-repeat; }
#service06 .contents .btn-link { background-color: #f06317; width: 215px; }
#service06 .main-title .is-sp { display: none; }
@media screen and (max-width: 1300px) {
    #service05 .full-img { background-position: center right;  }
    #service06 .full-img  { background-position: 20% 50%;  }
}
@media screen and (max-width: 980px) {
    #service01 .full-img { background-position: center right;  }
    #service02 .full-img,
    #service03 .full-img,
    #service04 .full-img { background-position: center center;  }
    #service04 .main-title .is-pc { display: none; }
    #service04 .main-title .is-sp { display: block; }
    #service05 .full-img { background-position: bottom center; }
    #service06 .full-img { background-position: 50% 80%; }
    #service06 .main-title .is-pc { display: none; }
    #service06 .main-title .is-sp { display: block; }
}
@media screen and (max-width: 590px) {
    #service01 .contents .btn-link-wrap a.last-el-child { margin-left: auto; }
    #service01 .contents .btn-link-wrap a:last-child { margin-left: auto; }
    #service01 .contents .btn-link { float: none; margin-bottom: 10px; }
    #service05 .contents .btn-link { font-size: 0.8em; width: 100%; }
}

/*#company .main-title { margin: 23% 0 34px; }*/
#company { display: table; width: 100%; padding: 80px 0; }
#company .company-inner { display: table-cell; vertical-align: middle; }
#company .main-title { margin-bottom: 34px; }
#company table.common-table { width: 50%; }
#company table.common-table th { width: 28.75%; }
#company .left-contents, #company .right-contents { float: left; }
#company .left-contents a.bluetxt { color: #0089d0; }
@media screen and (max-width: 980px) {
    #company { background-color: #fafafa; /* padding-top: 0; padding-bottom: 8%; */ display: block; }
    #company .company-inner { display: block; }
    #company .main-title { margin: 0 0 4%;}
}
@media screen and (max-width: 780px) {
    #company table.left-contents { width: 60%; }
    #company table.right-contents { width: 40%; }
    #company .main-title img { width: 20%; }
}
@media screen and (max-width: 650px) {
    #company table.common-table { width: 100%; }
    #company table.common-table th { width: 32%; }
    #company .left-contents, #company .right-contents { float: none; }
}
@media screen and (max-width: 480px) {
    #company { padding: 60px 0; }
    #company .main-title { margin: 0 0 3%;}
    #company .main-title img { width: 29%; }
}
@media screen and (max-width: 420px) {
    #company table.common-table th { width: 100%; }
    #company table.common-table .br { display: none; }
}
@media screen and (max-height: 900px) and (min-width: 981px) {
    /*#company .main-title { margin-top: 17%;}*/
}
@media screen and (max-height: 800px) and (min-width: 981px) {
    /*#company .main-title { margin-top: 13%;}*/
    #company table.common-table th, #company table.common-table td { padding: 8px 0; }
}
@media screen and (max-height: 700px) and (min-width: 981px) {
    /*#company .main-title { margin-top: 9%;}*/
    #company table.common-table th, #company table.common-table td { padding: 5px 0; }
}


#recruit { background-image: url("../images/recruit-photo.jpg"); background-position: center center; background-repeat: no-repeat; padding: 200px 0; }
#recruit .main-title { margin: 0 0 34px; }
#recruit table.common-table, #recruit table.common-table a { color: #fff; }
#recruit table.common-table { width: 48%; line-height: 1.7; }
#recruit table.common-table th { width: 16%; }
#recruit .left-contents { float: left; }
#recruit .right-contents { float: right; }
@media screen and (max-width: 980px) {
    #recruit {  background: none; background-color: #454545; }
    #recruit .main-title { margin: 0 0 4%; }
}
@media screen and (max-width: 780px) {
    #recruit table.left-contents { width: 42%; }
    #recruit table.right-contents { width: 52%; }
    #recruit .main-title img { width: 20%; }
}
@media screen and (max-width: 650px) {
    #recruit table.common-table { width: 100%; }
    #recruit table.common-table th { width: 22%; }
    #recruit .left-contents, #company .right-contents { float: none; }
}
@media screen and (max-width: 480px) {
    #recruit { padding: 60px 0; }
    #recruit .main-title { margin: 0 0 3%;}
    #recruit .main-title img { width: 29%; }
}
@media screen and (max-height: 900px) and (min-width: 981px)  {
    /* #recruit .main-title { margin-top: 17%;} */
}
@media screen and (max-height: 800px) and (min-width: 981px)  {
    /* #recruit .main-title { margin-top: 13%;} */
    #recruit table.common-table th, #recruit table.common-table td { padding: 8px 0; }
}
@media screen and (max-height: 700px) and (min-width: 981px)  {
    /* #recruit .main-title { margin-top: 9%;} */
    #recruit table.common-table th, #recruit table.common-table td { padding: 5px 0; }
}
@media screen and (max-height: 500px) and (min-width: 981px)  {
    /* #recruit .main-title { margin-top: 3%;} */
}

#contact { height: 96%; }
#contact .main-title { margin: 18% 0 34px; }
#contact .form-sentence .left-contents { float: left; line-height: 1.6; }
#contact .form-sentence .right-contents { float: right; width: 426px; position: relative; height: 34px; }
#contact .form-sentence .right-contents dt { position: absolute; bottom: 0; left: 0; width: 320px; }
#contact .form-sentence .right-contents dd { position: absolute; bottom: -2px; left: 332px; font-size: 1.2em; line-height: 1.4;  }
#contact #mail-form .table-wrap { margin-top: 35px; padding-bottom: 22px; border-bottom: 1px solid #bdbdbd; }
#contact #mail-form table { width: 50%; }
#contact #mail-form table.left-contents { float: left; }
#contact #mail-form table.right-contents { float: right; }
#contact #mail-form table th, #contact #mail-form table td { padding: 12px 0; vertical-align: top; }
#contact #mail-form table th { width: 27%; }
#contact #mail-form table th .required { color: #a4005b; }
#contact #mail-form input.text-box,
#contact #mail-form textarea { border: none; background-color: #cecece; }
#contact #mail-form input.text-box { width: 90%; height: 24px; line-height: 24px;}
#contact #mail-form input.middle { width: 30%; }
#contact #mail-form textarea { width: 100%; height: 336px; }
#contact #mail-form table td.error span.validationMessage { display: block; color: #a4005b; }
#contact #mail-form table td.error input.text-box,
#contact #mail-form table td.error input.radio-btn,
#contact #mail-form table td.error select,
#contact #mail-form table td.error textArea { background-color: #ffc1df; }
#contact #form-btn-area { margin: 34px auto 0; width: 378px; }
#contact #form-btn-area a { display: block; float: left; margin-right: 10px; font-size: 1.4em; letter-spacing: .2em; line-height: 38px; height: 38px; width: 184px; text-align: center;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -ms-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;
}
#contact #form-btn-area a:hover { opacity:0.6; filter: alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; }
#contact #form-btn-area .first-btn { width: 184px; margin: 0 auto; }
#contact #form-btn-area a#btn-mail-send,
#contact #form-btn-area a#btn-mail-confirm { margin-right: 0; color: #fff; background: #2b2b2b;}
#contact #form-btn-area a#btn-mail-back { color: #fff; background: #8a8a8a;}
#contact #loader { margin: 10px auto 0; width: 24px; }
@media screen and (max-width: 980px) {
    #contact { padding-bottom: 8%; height: auto; }
    #contact .main-title { margin: 8% 0 5%;}
    #contact .form-sentence .left-contents,
    #contact .form-sentence .right-contents { float: none; width: 100%; }
    #contact .form-sentence .right-contents { margin-top: 20px;}
    #contact #mail-form table { width: 48%; }
}
@media screen and (max-width: 780px) {
    #contact .main-title img { width: 20%; }
    #contact #mail-form table.left-contents,
    #contact #mail-form table.right-contents { float: none; width: 100%; }
    #contact .form-sentence .right-contents { width: 100%; }
    #contact .form-sentence .right-contents dt { width: 35%; }
    #contact .form-sentence .right-contents dd { width: 40%; left: 37%; }
}
@media screen and (max-width: 540px) {
    #contact #form-btn-area { width: 90%; }
    #contact #form-btn-area a { float: none; margin-right: 0; margin-bottom: 10px; }
    #contact #form-btn-area .first-btn { margin: 0 auto; }
}
@media screen and (max-width: 480px) {
    #contact { padding-bottom: 12%; }
    #contact .main-title { margin: 12% 0 4%;}
    #contact .main-title img { width: 28%; }
    #contact .form-sentence .right-contents { height: auto; }
    #contact .form-sentence .right-contents dt { position: static; width: 100%; }
    #contact .form-sentence .right-contents dt img { width: 60%; }
    #contact .form-sentence .right-contents dd { position: static; margin-top: 10px; width: 100%; }
    #contact #mail-form .table-wrap { margin-top: 20px; }
    #contact #mail-form table tr{ display: block; }
    #contact #mail-form table th,
    #contact #mail-form table td{ display: list-item; list-style: none; width: 100%; }
    #contact #mail-form table th { padding-bottom: 5px; }
    #contact #mail-form table td { padding-top: 0; }
}
@media screen and (max-height: 840px) and (min-width: 981px) {
    #contact .main-title { margin-top: 11% }
}
@media screen and (max-height: 750px) and (min-width: 981px) {
    #contact .main-title { margin-top: 13% }
    #contact #mail-form table th, #contact #mail-form table td { padding: 8px 0; }
    #contact #mail-form textarea { height: 297px; }
}
@media screen and (max-height: 700px) and (min-width: 981px) {
    #contact .main-title { margin-top: 9% }
    #contact #mail-form table th, #contact #mail-form table td { padding: 5px 0; }
    #contact #mail-form textarea { height: 266px; }
    #contact #mail-form .table-wrap { margin-top: 20px; }
    #contact #form-btn-area { margin-top: 20px; }
}

#site-footer { font-size: 1.4em; background-color: #fff; padding: 20px 0;  }
@media screen and (max-width: 480px) {
    #site-footer { font-size: 1em; }
}

.cm-f__group { font-size: 12px; padding: calc(26em/12) 0; background-color: #f1f1f1; }
.cm-f__groupTitle { font-weight: bold; font-size: calc(13em/12); margin-bottom: 1em; }
.cm-f__groupList { display: flex; justify-content: center; flex-wrap: wrap; margin: 0 0 calc(-13em/12) calc(-13em/12); }
.cm-f__groupListItem { padding: 0 calc(13em/12); line-height: 1; margin-bottom: calc(13em/12); }
.cm-f__groupListItem:not(:last-of-type) { border-right: 1px solid #181818; }
.cm-f__groupListItem .target { color: #181818; }
.cm-f__groupListItem .target:hover { text-decoration: underline; }
@media screen and (max-width: 780px) {
    .cm-f__groupTitle { text-align: left; }
    .cm-f__group { font-size: 11px; }
    .cm-f__groupList { justify-content: flex-start; }
}