@charset "utf-8";

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


    html {
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
    }

    * {
        margin: 0;
        padding: 0;
    }

    body {
        font: 15px/1.5 'Noto Sans Japanese', sans-serif;
        color: #000;
        word-wrap: break-word;
        min-width: initial;
    }

    header,
    article,
    footer,
    aside,
    time,
    nav,
    small,
    section {
        display: block;
    }

    a {
        color: #000;
        text-decoration: none;
    }

    ul li,
    ol li {
        list-style-type: none;
    }

    a img {
        border-style: none;
    }

    img {
        vertical-align: bottom;
        height: auto;
        max-width: 100%;
    }

    .spnone {
        display: none;
    }

    .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 {
        position: fixed;
        width: 100%;
        z-index: 20;
    }

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

    header h1 {
        display: inline-block;
    }

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



    header .tel {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        font-size: 20px;
        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;
        font-size: 20px;
    }


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

    .side-mask {
        width: 15px;
        height: 100%;
        background: #080c56;
        position: absolute;
        z-index: 10;
        top: 65px;
    }



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

    .top-image h2 {
        font-size:15px;
        font-weight: bold;
        color: #fff;
        position: absolute;
        top: 40%;
        left: 10%;
        z-index: 5;
    }

    .top-image h3 {
        font-size: 11px;
        color: #fff;
        position: absolute;
        top: 60%;
        left: 11%;
        z-index: 5;
    }

    .top-mask {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 200px 200px 0 0;
        border-color: #000000 transparent transparent transparent;
        opacity: 0.8;
        position: absolute;
        top: 0;
    }

    .info p {
        position: absolute;
        bottom: -128px;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 10px 25px;
        font-size: 15px;
        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: 50px 0 0 0;
        position: relative;
    }

    .message h2 {
        font-size: 23px;
        font-weight: bold;
        padding: 70px 0 40px 10px;
        text-align: center;
    }

    .message h3 {
        font-size: 20px;
        font-weight: bold;
        line-height: 2.0;
        padding: 0 0 45px 15px;
        text-align: center;
    }

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

    .message p:nth-of-type(n+1) {
        line-height: 2.0;
    }

    .message .left {
        width: 100%;
        padding: 10px 10px 10px 20px;
        margin: 0 auto;
    }
    .message .left ul{
		padding: 0 10px 0 20px;
	}

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


    .bg-image {
        height: 150px;
        position: absolute;
        background: #dddddd;
        width: 100%;
        z-index: -1;
        top: 45%;
        left: 0;
        transform: skew(0deg, 10deg);
    }

    /***************************************************************************
  事業内容
  ***************************************************************************/
    .works {
        position: relative;
    }


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

    .works-list {
        padding: 75px 0 0 10px;
    }


    .works-width {
        width: 100%;
        margin: -50px auto;
        padding: 180px 0 0 0;
        background-image: url(../images/top/bg-image.png);
        background-position: top;
        background-repeat: no-repeat;

    }


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

    .environment {
        position: relative;
        height: 410px;
        width: 90%;
        display: block;
        margin: 0 auto;
        background-size: cover;
        background-image: url(../images/top/works1.jpg);
    }

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


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

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

    .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 {
        position: relative;
        height: 410px;
        width: 90%;
        display: block;
        margin: 20px auto;
        background-size: cover;
        background-image: url(../images/top/works2.jpg);

    }


    .overseas {
        position: relative;
        height: 410px;
        width: 90%;
        display: block;
        margin: 0 auto;
        background-size: cover;
        background-image: url(../images/top/works3.jpg);

    }

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

    .recruit {
        padding: 80px 0 0 10px;
        position: relative;
    }
    

    .recruit-left ul {
        margin: 0 0 0 17px;
    }


   .recruit-left ul li img{
        min-height: 100%;
       width: 90%
    }
 .recruit-left ul li .space4{
        margin: 0 0 0 6vw;
    }


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

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

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

    .recruit-content a {
        display: block;
        text-align: center;
        background: #080c56;
        color: #fff;
        padding: 10px;
        clip-path: polygon(13% 0%, 100% 0%, 100% 100%, 0% 100%);
    }



    .bg-image1 {
        background-size: cover;
        background-image: url(../images/top/bottom.jpg);
        height: 205px;
        background-position: center;
    }

    /***************************************************************************
  フッター
  ***************************************************************************/

    #pagetop {
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 100;
        background-image: url(../images/common/page-scroll.png);
        background-repeat: no-repeat;
        height: 65px;
        width: 65px;
    }

    .footer {
        border-left: 15px solid #080c56;
    }

    .footer-width {
        width: 100%;
        margin: 0 auto;
        padding: 10px;
    }


    .footer1 img {
        display: block;
        margin: 0 auto;
        width: 200px;
        height: auto;
    }

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

    .footer2-width {
        width: 100%;
        margin: 0 auto;
        padding: 10px;
    }


    .footer2-left li:nth-child(1) {
        font-size: 17px;
        text-align: center;
    }

    .footer2-left li a {
        font-size: 30px;
        color: #fff;
        display: block;
        text-align: center;
    }

    .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;
        padding: 15px 0 0 0;
        text-align: center;
    }

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

    .footer2-left li:nth-child(6) {
        font-size: 12px;
        font-weight: bold;
        text-align: center;
    }

    .footer2-left img {
        display: block;
        margin: 15px auto;
    }

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

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

    .topic h2 {
        position: absolute;
        top: 50%;
        left: 20%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        font-size: 25px;
        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: 25px 0 50px 0;
    }

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

    }

    .president-width {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 10px;
    }

    .president-mask {
        background: rgba(0, 0, 0, .6);
        margin: 40px 10px 0 20px;
    }

    .president-width h3 {
        font-size: 21px;
        font-weight: bold;
        padding: 10px 0 25px 0;
        text-align: center;
        color: #fff;
    }

    .president-width .p1 {
        font-size: 17px;
        line-height: 1.5;
        color: #fff;
        padding: 0 5px 15px 5px;
    }

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

    }

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


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

    .company {
        padding: 140px 0 25px 0;
    }

    .about-width {
        width: 100%;
        margin: 0 auto;
        padding: 10px;
    }

    .about-left {
        padding: 15px 15px 15px 25px;
    }

    .about-left ul {
        display: flex;
    }

    .about-width table {
        padding: 15px;
        display: block;
    }

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

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

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

    .accessmap {
        background: #080c56;
    }

    .accessmap-width {
        width: 100%;
        margin: 0 auto;
        padding: 10px;
        position: relative;
    }


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

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

    .accessmap-width a {
        color: #fff;
        font-size: 15px;
        display: block;
        text-align: center;
        margin: 0 0 20px 0;
    }

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

    .iframe {
        height: 200px;
        width: 100%;
    }

    /***************************************************************************
 共通リクルートページ
  ***************************************************************************/
    .recruit-bottom-width {
        width: 100%;
        padding: 0 0 0 10px;

    }

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


    .recruit-bottom a {
        text-align: center;
        background-image: url(../images/about/recruit-bottom.jpg);
        color: #fff;
        font-size: 23px;
        padding: 15px;
        display: block;
    }

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

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

    .business-eco {
        padding: 25px 0 25px 0;
    }

    .eco-width {
        width: 100%;
        margin: 0 auto;
        padding: 10px 10px 10px 20px;

    }


    .eco-right h3 {
        padding: 10px 0 20px 0;
        font-size: 22px;
        font-weight: bold;
        text-align: center;
    }

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

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


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

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

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

    .eco-box1 {
        padding: 30px 0;
    }

    .network-width,
    .foreign-width {
        width: 100%;
        margin: 0 auto;
        padding: 30px 10px 30px 20px;
    }


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

    .staff-top h2 {
        left: 30%;
    }

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

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

    .staff-width {
        width: 100%;
        margin: 0 auto;
        position: relative;
        padding: 10px 10px 10px 20px;
    }


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


    .staff-width h3 {
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        display: block;
    }

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

    .staff-profile {
        border: 1px solid #080c56;

        z-index: 2;
        background: #fff;
        font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
        padding: 10px 10px 10px 20px;
        line-height: 2.0;
    }


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

    .staff-profile p {
        font-size: 20px;
        padding: 25px 5px 0 5px;
        font-weight: bold;
    }


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

    .works-title {
        margin: 25px 0 25px 0;
    }

    .works-width1 {
        width: 100%;
        margin: 0 auto;
        padding: 10px 10px 10px 20px;
    }

    .works-width1 img {
        margin: 0 auto;
        display: block;
    }

    .works-width1 p {
        text-align: center;
        margin: 10px 15px 15px 15px;
    }

    .works-career-width {
        width: 100%;
        margin: 0 auto;
        padding: 10px 10px 10px 20px;
    }

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

    .works-career-width:last-child {
        margin: 20px auto 0;
    }


    .works-career-width h3 {
        font-size: 21px;
        text-align: center;
        font-weight: bold;
        padding: 0 0 10px 0;
    }


    .more-info figure {
        display: flex;
        margin: 15px 0 0 0;
    }

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

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


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

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

    .privacy-top h2 {
        left: 40%;
        font-size: 19px;
    }

    .privacy-width {
        width: 100%;
        margin: 0 auto;
        padding: 10px 10px 10px 20px;
    }

    .privacy-content h3 {
        font-size: 21px;
        margin: 10px 0 30px 0;
        border-bottom: 1px solid #080c56;
        text-align: center;
    }

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

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

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

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

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

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

    .sitemap-top p {
        left: 30%;
    }

    .sitemap-width {
        width: 100%;
        margin: 0 auto;
        padding: 10px 10px 10px 20px;
    }

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

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

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