@charset "UTF-8";

/* CSS Document */
@media screen and (min-width: 768px) {
    /* メディアクエリー */

    html {
        scroll-behavior: smooth;
    }

    * {
        margin: 0;
        padding: 0;
    }

    body {
        font: 16px/1.5;
        color: #000;
        word-wrap: break-word;
        min-width: 1200px;
    }

    a {
        color: #2c2c2c;
        text-decoration: none;
        transition-property: all;
        transition: 0.3s linear;
    }

    a:hover {
        text-decoration: none;
        transition-property: all;
        transition: 0.2s linear;
        opacity: 0.5;
    }

    a[href^="tel:"] {
        pointer-events: none;
    }

    img {
        vertical-align: bottom;
    }

    a:hover img,
    a:hover figure {
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
        -webkit-transition: 0.3s ease;
        -moz-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease;
    }



    .pcnone {
        display: none;
    }


    .inv_box {
        transition: 1.0s;
        opacity: 0;
        transform: translate(0, 30px);
        -webkit-transform: translate(0, 30px);
    }

    .js-list-mv01 {
        transition: 1.0s;
        opacity: 0;
        transform: translate(0, 30px);
        -webkit-transform: translate(0, 30px);
    }


    .js-list-mv02 {
        transition: 1.5s;
        opacity: 0;
        transform: translateX(30px, 0);
        -webkit-transform: translateX(30px, 0);
    }

    .mv07 {
        opacity: 1.0;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }


    /***************************************************************************
  ヘッダー
  ***************************************************************************/
    header .inner {
        display: flex;
        position: fixed;
        width: 100%;
        z-index: 20;
    }

    .float-active {
        background: #080c56;
    }

    header h1 {
        display: inline-block;
    }

    header .logo {
        width: 130px;
        height: 130px;
        display: inline;
    }

    header .nav-ul {
        display: flex;
        padding: 50px 0 50px 75px;
    }

    header .nav-ul li {
        margin: 0 0 0 55px;
    }

    header .nav-ul li a {
        font-size: 18px;
        font-weight: bold;
        color: #fff;
    }

    .nav-ul li:nth-child(1) {
        margin: 0;
    }

    header .tel {
        position: absolute;
        right: 38px;
        top: 45px;
        font-size: 25px;
        font-weight: bold;
        color: #fff;
    }

    header .tel:before {
        font-family: "Font Awesome 5 Free";
        content: "\f879";
        font-weight: 900;
        display: inline-block;
        padding-right: 5px;
    }


    /***************************************************************************
  トップページ
  ***************************************************************************/
    .main {
        position: relative;
    }

    .side-mask {
        width: 80px;
        height: 100%;
        background: #080c56;
        position: absolute;
        z-index: 1;
        top: 130px;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .side-mask small {
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        color: #fff;
        position: absolute;
        top: 270px;
        left: 25px;
        font-size: 12px;
    }

    .top-image {
        height: 913px;
        position: relative;
        z-index: -1;
    }

    .bxslider img {
        width: 100%;
    }


    .top-image h2 {
        font-size: 42px;
        font-weight: bold;
        color: #fff;
        position: absolute;
        top: 330px;
        left: 185px;
        z-index: 3;
    }

    .top-image h3 {
        font-size: 23px;
        color: #fff;
        position: absolute;
        top: 475px;
        left: 190px;
        z-index: 3;
    }


    .info p {
        position: absolute;
        bottom: -90px;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 30px 50px;
        font-size: 18px;
        font-weight: bold;
        box-shadow: 5px 6px 0px 3px #9c9ebb;
    }

    .info .color {
        color: #080c56;
        margin: 0 35px 0 0;
    }

    .info .space {
        margin: 0 20px 0 0;
    }

    /***************************************************************************
  メッセージ
  ***************************************************************************/
    .message {
        padding: 170px 0 100px 0;
        position: relative;
        margin: 0 0 0 80px;
    }

    .message h2 {
        font-size: 39px;
        font-weight: bold;
        padding: 95px 0 70px 0;
    }

    .message h3 {
        font-size: 26px;
        font-weight: bold;
        line-height: 2.5;
        padding: 0 0 65px 0;
    }

    .message ul li {
        font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
        font-size: 16px;
        margin: 0 0 5px 0;
    }

    .message ul li {
        margin: 0 0 45px 0;
        text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
    }

    .message ul li:last-child {
        margin: 0;
    }

    .message .left {
        margin: 80px auto 0;
        padding: 0 0 0 40px;
    }

    .message img {
        position: absolute;
        right: 0;
        top: 300px;
        z-index: -1;
    }

    /***************************************************************************
  事業内容
  ***************************************************************************/
    .works {
        background-image: url(../images/top/bg-image.png);
        background-position: top;
        padding: 200px 0 0 0;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .works h2 {
        text-align: center;
        font-size: 57px;
        font-weight: bold;
        letter-spacing: 15px;
        color: #fff;
    }

    .works-width {
        width: 1120px;
        margin: 0 auto;
    }

    .works-list {
        display: flex;
        justify-content: space-around;
        padding: 110px 0 0 0;
    }

    .img-mask {
        background: #080c56;
        opacity: 0.8;
    }

    .environment {
        position: relative;
        height: 446px;
        width: 328px;
        background-size: cover;
        background-image: url(../images/top/works1.jpg);
    }



    .environment .p1,
    .overseas .p1 {
        font-size: 54px;
        font-weight: bold;
        position: absolute;
        right: 10px;
        bottom: 30%;
        color: #fff;
    }

    .environment .p2,
    .network .p2,
    .overseas .p2 {
        position: absolute;
        left: 25px;
        bottom: 20px;
        color: #fff;
        font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    }

    .network .p1 {
        font-size: 54px;
        font-weight: bold;
        position: absolute;
        right: 10px;
        bottom: 30%;
        color: #fff;
        text-align: right;
        font-size: 42px;
        line-height: 1.2;
    }

    .network {
        margin: 65px 0 0 0;
        position: relative;
        height: 446px;
        width: 328px;
        background-size: cover;
        background-image: url(../images/top/works2.jpg);

    }


    .overseas {
        margin: 130px 0 0 0;
        position: relative;
        height: 446px;
        width: 328px;
        background-size: cover;
        background-image: url(../images/top/works3.jpg);

    }

    /***************************************************************************
  採用情報
  ***************************************************************************/

    .recruit {
        padding: 200px 0 340px 0;
        position: relative;
        background-image: url(../images/top/bottom.jpg);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: contain;
    }


    .recruit-flex {
        display: flex;
    }

    .recruit-left {
        margin: 0 0 0 80px;
        width: 1600px;
    }

    .recruit-left ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        -ms-flex-wrap: wrap;
    }

    .recruit-left ul li {
        width: calc(100%/2);
    }



    .recruit-left li:nth-child(2) {
        margin: 0 0 0 -38px;
    }

    .recruit-left li:nth-child(4)  {
        margin: 0 0 0 -107px;
    }

    .recruit-content {
        position: relative;
        width: 100%;
    }

    .recruit-content h2 {
        font-size: 72px;
        font-style: italic;
        padding: 60px 0 0 0;
        text-align: center;
    }

    .recruit-content h3 {
        font-size: 34px;
        padding: 10px 0;
        text-align: center;

    }

    .recruit-content a {
        background-image: url(../images/top/recruit.png);
        background-repeat: no-repeat;
        color: #fff;
        font-size: 30px;
        font-weight: bold;
        padding: 40px 0 25px 0px;
        display: flex;
    }

    .recruit-content a:before {
        content: "";
        margin: 0 120px 0 0;
    }


    .bg-image1 {
        background-size: cover;
        background-image: url(../images/top/bottom.jpg);
        height: 410px;
        margin: -30px 0 0 0;
    }

    /***************************************************************************
  フッター
  ***************************************************************************/
    #pagetop {
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 100;
        background-image: url(../images/common/page-scroll.png);
        background-repeat: no-repeat;
    }

    #pagetop img {
        width: 131px;
        height: 131px;
    }

    .footer {
        border-left: 80px solid #080c56;
        width: 100%;
    }

    .footer-width {
        width: 1120px;
        margin: 0 auto;
    }

    .footer1 {
        display: flex;
        justify-content: space-between;
        padding: 15px 30px 25px 30px;
    }

    .footer1 ul {
        display: flex;
        padding: 25px 0 0 0;
        font-size: 14px;
        font-weight: bold;
    }

    .footer1 ul li {
        margin: 0 0 0 45px;
    }

    .footer1 ul li:before {
        content: "-";
        margin: 0 5px 0 0;
        font-size: 20px;
    }

    .footer1 ul li a {
        font-size: 14px;
        font-weight: bold;
        font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    }

    .footer1 img {
        width: 255px;
        height: 73px;
    }

    .footer2 {
        background: #000;
        color: #fff;
        padding: 40px 0 50px 0;
    }

    .footer2-width {
        width: 1000px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }


    .footer2-left li:nth-child(1) {
        font-size: 17px;
        margin: 0 0 0 40px;
    }

    .footer2-left li a {
        font-size: 40px;
        color: #fff;
    }

    .footer2-left li:nth-child(2) a:before {
        font-family: "Font Awesome 5 Free";
        content: "\f879";
        font-weight: 900;
        display: inline-block;
        padding-right: 5px;
        font-size: 31px;
    }

    .footer2-left li:nth-child(3) {
        font-size: 16px;
        font-weight: bold;
    }

    .footer2-left li:nth-child(4) {
        font-size: 16px;
        font-weight: bold;
    }

    .footer2-left li:nth-child(5) {
        margin: 30px 0 0 0;
    }

    .footer2-right .right1 {
        display: flex;
        padding: 35px 30px 0 0;
    }

    .footer2-right .right1 li:nth-child(n+1) {
        padding: 15px 0 0 0;
    }

    .right1 a {
        color: #fff;
        font-size: 15px;
        font-weight: bold;
        font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    }

    .right1 a:before {
        content: "-";
        margin: 0 5px 0 0;
        font-size: 20px;
    }

    .right1 ul:nth-child(2) {
        margin: 0 0 0 110px;
    }




    /***************************************************************************
 会社概要ページ
  ***************************************************************************/

    .about-top {
        background-image: url(../images/about/top.jpg);
        background-position: center;
        background-size: cover;
        position: relative;
        height: 389px;
    }

    .topic h2 {
        position: absolute;
        top: 50%;
        left: 25%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        font-size: 66px;
        color: #fff;
    }

    .topic p {
        position: absolute;
        top: 70%;
        left: 20%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        font-size: 23px;
        color: #fff;
    }

    .president {
        padding: 55px 0 70px 0;
    }

    .bar-title {
        text-align: center;
        font-size: 50px;
        font-weight: bold;
        background-image: url(../images/about/message-top.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        color: #fff;
        width: 90%;
    }

    .president-width {
        position: relative;
        width: 1200px;
        margin: 0 auto;
        padding: 90px 0 0 105px;
        height: 515px;
    }

    .president-width h3 {
        font-size: 32px;
        font-weight: bold;
        padding: 0 0 40px 0;
    }

    .president-width .p1 {
        font-size: 17px;
        line-height: 2.0;
    }

    .president-width .p2 {
        font-size: 20px;
        font-family: "HG行書体", monospace;
        display: inline;
        position: absolute;
        bottom: 11%;
        left: 35%;

    }

    .president-width .p2 span {
        font-size: 30px;
    }

    .president-width img {
        position: absolute;
        right: 0;
        top: 40px;
        z-index: -1;
    }





    .company {
        padding: 0 0 110px 0;
    }

    .about-width {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        padding: 60px 0 0 0;
    }

    .about-left {
        margin: 0 0 0 90px;
    }

    .about-left li:nth-child(2) {
        margin: 20px 0;
    }

    .about-width table {
        margin: 0 0 0 110px;
    }

    .about-width tr {
        border-bottom: 1px solid #ddd;
    }

    .about-width tr:first-child {
        border-top: 1px solid #ddd;
    }

    .about-width table th {
        width: 130px;
        text-align: left;
        padding: 5px;
        display: inline-block;
    }

    .accessmap {
        background: #080c56;
        padding: 50px 0 0 0;
        height: 360px;
        margin: 135px 0 230px 0;
    }

    .accessmap-width {
        width: 1200px;
        margin: 0 auto;
        padding: 0 0 0 80px;
        position: relative;
        z-index: 1;
    }


    .accessmap-width h2 {
        color: #fff;
        font-size: 50px;
        font-weight: bold;
        padding: 0 0 40px 0;
    }

    .accessmap-width p {
        font-size: 16px;
        color: #fff;
        padding: 0 0 20px 0;
    }

    .accessmap-width a {
        color: #fff;
        font-size: 15px;
    }

    .accessmap-width .large {
        font-size: 30px;
        font-weight: bold;
        color: #fff;
        margin: 0 0 0 5px;
    }

    .iframe {
        position: absolute;
        right: 0;
        top: 7%;
    }


    /***************************************************************************
 共通リクルートページ
  ***************************************************************************/


    .recruit-bottom figure img{
        width: 100%;
    }

    .recruit-bottom a {
        display: flex;
        text-align: center;
        background-image: url(../images/about/recruit-bottom.jpg);
        color: #fff;
        height: 110px;
        font-size: 30px;
        font-weight: bold;
        align-items: center;
        justify-content: center;
    }

    /***************************************************************************
 事業内容ページ
  ***************************************************************************/

    .business-top {
        background-image: url(../images/business/top.jpg);
        background-position: center;
        background-size: cover;
        position: relative;
        height: 389px;
    }


    #environment,
    #network,
    #oversea {
        margin-top: -130px;
        padding-top: 130px;
    }

    .eco-title {
        margin: 50px 0 0 0;
    }

    .eco-width {
        width: 1120px;
        margin: 0 auto;
        padding: 80px 0 145px 40px;

    }

    .eco-box {
        display: flex;
    }

    .eco-right {
        padding: 0 0 0 35px;
    }

    .eco-right h3 {
        padding: 0 0 50px 0;
        font-size: 32px;
        font-weight: bold;
    }

    .eco-right .h4 {
        font-size: 23px;
        font-weight: bold;
        padding: 50px 0 20px 0;
    }

    .eco-right .h4-1 {
        font-size: 17px;
        padding: 50px 0 20px 0;
    }


    .eco-right .p1 {
        font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
        font-size: 17px;
        line-height: 2.0;
        font-weight: 500;
    }

    .eco-right .p2 {
        font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
        font-size: 17px;
        font-weight: 500;
        padding: 60px 0 0 0;
        line-height: 2.0;
    }

    .eco-right .p3 {
        font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
        font-size: 17px;
        font-weight: 500;
        line-height: 2.0;
    }

    .eco-box1 {
        display: flex;
        padding: 110px 0;
    }

    .network-width,
    .foreign-width {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        padding: 95px 0 120px 0;
    }


    /***************************************************************************
 スタッフページ
  ***************************************************************************/
    .staff-top {
        background-image: url(../images/staff/staff-top.jpg);
        background-position: center;
        background-size: cover;
        position: relative;
        height: 389px;
    }

    .staff-list {
        padding: 50px 0 0 0;
    }

    .staff-title {
        margin: 0 0 90px 0;
    }

    .staff-bg {
        background-image: url(../images/staff/background.jpg);
        background-position: center;
        background-repeat: repeat-x;
    }

    .staff-width {
        width: 1120px;
        margin: 0 auto 280px;
        min-height: 675px;
        position: relative;
    }

    .staff-width:nth-child(n+1) {
        padding: 0;
    }

    .staff-width:last-child {
        padding: 0;
        margin: 0 auto 130px;
    }

    .staff-detail {
        display: flex;
    }

    .staff-right {
        padding: 0 0 0 30px;
    }

    .staff-width h3 {
        font-size: 50px;
        font-weight: bold;

    }

    .staff-width .p1 {
        font-size: 20px;
        font-weight: bold;
        color: #777;
    }

    .staff-profile {
        border: 1px solid #080c56;
        width: 615px;
        min-height: 435px;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 2;
        background: #fff;
        padding: 30px 0 0 50px;
        font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;

    }

    .staff-profile table td {
        padding: 0 0 0 30px;
    }

    .staff-profile p {
        font-size: 23px;
        padding: 50px 0 0 0;
        font-weight: bold;
    }

    /***************************************************************************
施工事例ページ
  ***************************************************************************/
    .works-box {
        background-image: url(../images/works/top-image.jpg);
        background-position: center;
        background-size: cover;
        position: relative;
        height: 389px;
    }

    .works-title {
        margin: 50px 0 60px 0;
    }

    .works-width1 {
        width: 1200px;
        margin: 0 auto;
        padding: 0 0 0 40px;
    }


    .works-doing {
        display: flex;
        justify-content: space-around;
    }


    .works-career-width {
        width: 1200px;
        margin: 0 auto;
    }

    .works-career-width:nth-child(n+3) {
        margin: 145px auto 0;
    }

    .works-career-width:last-child {
        margin: 145px auto 160px;
    }


    .works-career-width h3 {
        font-size: 32px;
        font-weight: bold;
        padding: 0 0 20px 0;
    }

    .works-career-info {
        display: flex;
        justify-content: center;
    }

    .more-info {
        margin: 0 0 0 15px;
    }
    .more-info img{
        width: 250px;
    }

    .more-info img:nth-child(odd) {
        margin: 0 0 15px 0;
    }

    .more-info img:nth-child(even) {
        margin: 0 0 15px 0;
    }

    /***************************************************************************
 プライバシーポリシーページ
  ***************************************************************************/
    .privacy {
        padding: 50px 0 50px 0;
    }

    .privacy-top {
        background-image: url(../images/privacy/top-image.jpg);
        background-position: center;
        background-size: cover;
        position: relative;
        height: 389px;
    }

    .privacy-top h2 {
        left: 35%;
    }

    .privacy-width {
        width: 1200px;
        margin: 0 auto;
        padding: 50px 30px 0 110px;
    }

    .privacy-content h3 {
        font-size: 42px;
        margin: 0 0 30px 0;
        border-bottom: 1px solid #080c56;
    }

    .privacy-content h4 {
        font-size: 30px;
        margin: 20px 0 20px 0;
    }

    .privacy-content:nth-child(n+2) {
        padding: 30px 0 30px 0;
    }

    .privacy-end ul li {
        text-align: right;
        margin-bottom: 5px;
    }

    /***************************************************************************
サイトマップページ
  ***************************************************************************/
    .sitemap {
        padding: 50px 0 50px 0;
    }

    .sitemap-top {
        background-image: url(../images/sitemap/top-image.jpg);
        background-position: center;
        background-size: cover;
        position: relative;
        height: 389px;
    }

    .sitemap-width {
        width: 1200px;
        margin: 0 auto;
        padding: 50px 30px 0 100px;
    }

    .sitemap-content {
        margin: 20px 0 20px 0;
    }

    .sitemap-content h3 {
        font-size: 42px;
        margin: 0 0 30px 0;
        border-bottom: 1px solid #080c56;
    }

}