@charset "uft-8";
@media (max-width: 1670px) {
/* ドローン写真アニメーションのCSS */
    .main-visual {
        height: 850px;
    }
}
@media (max-width: 1580px) {
/* ドローン写真アニメーションのCSS */
    .main-visual {
        height: 800px;
    }
}
@media (max-width: 1480px) {
/* ドローン写真アニメーションのCSS */
    .main-visual {
        height: 750px;
    }
}
@media (max-width: 1390px) {
/* ドローン写真アニメーションのCSS */
    .main-visual {
        height: 700px;
    }
    .main-visual li img {
        aspect-ratio: 4 / 3;
    }
}
@media (max-width: 1300px) {
/* ドローン写真アニメーションのCSS */
    .main-visual {
        height: 650px;
    }
}
@media (max-width: 1264px) {
/* ドローン写真アニメーションのCSS */
    .main-visual {
        height: 600px;
    }
    .main-visual li img {
        aspect-ratio: 0;
    }
}
@media (max-width: 1125px) {
/* ドローン写真アニメーションのCSS */
    .main-visual {
        height: 550px;
    }
}
@media (max-width: 1050px) {
/* ドローン写真アニメーションのCSS */
    .main-visual {
        height: 540px;
    }
}
@media (max-width: 1024px) {
/* iPad ProのCSS */
/* ドローン写真アニメーションのCSS */
    .main-visual {
        height: 500px;
    }
    .main-visual li {
        width: 100%;
        height: 700px;
        object-fit: cover;
        /*aspect-ratio: 4 / 3;*/
    }
    .main-visual li img {
        width: 100%;
        height: 700px;
        object-fit: cover;
        /*aspect-ratio: 4 / 3;*/
    }
    .img-box-1 {
        object-position: 50% 60%;
    }
    .img-box-2 {
        object-position: 50% 70%;
    }
    .img-box-3 {
        object-position: 50% 60%;
    }
    .img-box-4 {
        object-position: 50% 50%;
    }
    .img-box-5 {
        object-position: 50% 70%;
    }
/* 工事名と説明文 */
    .visual-text1, .visual-text2, .visual-text3, .visual-text4, .visual-text5 {
        left: 50%;
        top: 50%;
        transform: translate(-50% , -50%);
    }
    .projects-card {
        width: 50%;
    }
}
@media (max-width: 920px) {
/* iPad ProのCSS */
/* ドローン写真アニメーションのCSS */
    .main-visual {
        height: 500px;
        width: 100%;
        overflow: hidden;
    }
    .main-visual li {
        width: 100%;
        height: 600px;
        object-fit: cover;
    }
    .main-visual li img {
        width: 100%;
        height: 600px;
        object-fit: cover;
    }
}

@media (min-width: 911px) {
/* ハンバーガーメニューをここまで非表示 */
    .hamburger-menu {
        display: none !important;
    }
}

@media (max-width: 910px) {
/* iPadのCSS */
/* ヘッダーライトをここから非表示 */
    .header-right {
        display: none !important;
    }
/* ヘッダーを固定 */
    .header {
        position: fixed;
        top: 0;
        height: 70px;
    }
/* ハンバーガーメニュー表示 */
/* 基本 */
    .menu-btn {
        position: fixed;
        top: 10px;
        right: 10px;
        display: flex;
        height: 50px;
        width: 50px;
        justify-content: center;
        align-items: center;
        z-index: 90;
        background-color: #00fa9a;
    }
    .menu-btn span, .menu-btn span:before, .menu-btn span:after {
        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: #ffffff;
        position: absolute;
    }
    .menu-btn span:before {
        bottom: 8px;
    }
    .menu-btn span:after {
        top: 8px;
    }
    /* 三本線を×マークにする */
    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
    }
    /* チェックボックス隠し */
    #menu-btn-check {
        display: none;
    }
    /* メニューの装飾 */
    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 80;
        background-color: #2e8b57;
    }
    .menu-content ul {
        padding: 70px 30px 0;
    }
    .menu-content ul li {
        border-bottom: solid 1px #ffffff;
        list-style: none;
    }
    .menu-content ul li a {
        display: block;
        width: 100%;
        font-size: 40px;
        line-height: 80px;
        box-sizing: border-box;
        color: #ffffff;
        text-decoration: none;
        padding: 9px 15px 10px 0;
        position: relative;
    }
    .menu-content ul li a::before {
        content: "";
        width: 20px;
        height: 20px;
        border-top: solid 2px #ffffff;
        border-right: solid 2px #ffffff;
        transform: rotate(45deg);
        position: absolute;
        right: 20px;
        top: 45px;
    }
    /* ボタンを押したらメニューを出す */
    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 100%;/*leftの値を変更してメニューを画面外へ*/
        z-index: 80;
        background-color: #2e8b57;
        transition: all 0.5s;/*アニメーション設定*/
    }
    #menu-btn-check:checked ~ .menu-content {
        left: 0;/*メニューを画面内へ*/
    }
/* ドローン写真アニメーションのCSS */
    .main-visual {
        margin-top: 70px;
    }
    .news {
        width: 100%
    }
/* 企業情報 */
    .outline {
        margin-top: 70px;
        width: 100%;
    }
    .outline table {
        width: 100%;
        margin: 50px 0;
    }
    .outline th, .outline td {
        display: inline-block;
        width: 100%;
        float: left;
    }
    .outline-subtitle {
        border: none;
        padding: 20px 0;
    }
    .outline-text {
        padding: 10px 0 50px;
        border: none;
        border-bottom: 1px solid black;
    }
    .outline-map {
        border: none;
    }
/* 施工実績 */
    .projects {
        margin-top: 70px;
    }
/* 求人情報 */
    .recruit {
        margin-top: 70px;
    }
    .recruit-card-inner1, .recruit-card-inner2, .recruit-card-inner3 {
        height: 450px;
    }
    .recruit-card-inner1-img, .recruit-card-inner2-img, .recruit-card-inner3-img {
        bottom: 542px;
    }
/* 新着情報 */
    .news-page {
        margin-top: 70px;
        width: 100%;
    }
    .news-card {
        margin: 100px 0 100px;
        width: 100%;
    }
/* フッターメニューをここから非表示 */
    .footer-2  {
        display: none !important;
    }
/* フッターレスポンシブ対応 */
    .footer {
        height: 200px;
    }
    .footer-3-1 {
        font-size: 11px;
    }
    .footer-3 {
        font-size: 9px;
    }
}
@media (max-width: 800px) {
/*施工実績用のCSS*/
    .con-title, .con-name, .pla-title, .pla-name {
        font-size: 15px;
    }
}
@media (max-width: 670px) {
/*スマートフォンのCSS*/
    .header {
        height: 50px;
        padding:  0px;
        margin: 0px;
    }
    .header-left {
        height: 50px;
    }
    .header-corp {
        line-height: 55px;
    }
    .menu-btn {
        height: 30px;
        width: 30px;
    }
    .menu-btn span, .menu-btn span:before, .menu-btn span:after {
        height: 2px;
        width: 15px;
    }
    .menu-btn span:before {
        bottom: 4px;
    }
    .menu-btn span:after {
        top: 4px;
    }
    .main-visual {
        width: 100%;
        height: 500px;
        margin-top: 50px;
        margin-bottom: 0;
    }
/* 工事名と説明文 */
    .visual-text1, .visual-text2, .visual-text3, .visual-text4, .visual-text5 {
        height: 100px;
        width: 320px;
    }
    .msg {
        font-size: 12px;
    }
    .msg-01, .msg-01-1, .msg-02, .msg-02-1, .msg-03, .msg-03-1, .msg-04, .msg-04-1, .msg-05, .msg-05-1 {
        width: 290px;
        line-height: 22px;
        transform: translate(-50% , -50%);
    }
    .msg-01-1, .msg-02-1, .msg-03-1, .msg-04-1, .msg-05-1 {
        top: 75%;
    }
/* メイン */
    .main {
        height: 600px;
        padding-top: 60px;
    }
    .main .container {
        padding: 0 10px;
    }
    .main-text h2 {
        font-size: 20px;
    }
    .line-1 {
        width: 150px;
    }
    .line-2 {
        width: 210px;
    }
    .line-3 {
        width: 250px;
    }
    .line-4 {
        width: 150px;
    }
    .main-text h3 {
        font-size: 17px;
        margin: 0 20px 50px;
        padding: 20px 0 20px;
    }
    .line-box-1 {
        height: 110px;
        width: 40px;
        top: 100px;
        left: 92%
    }
    .line-box-2 {
        height: 110px;
        width: 40px;
        bottom: 155px;
        left: 2%;
    }
/* ニュースリスト */
    .news {
        margin: 50px auto 50px auto;
    }
    .news li {
        padding: 10px 10px;
    }
    .news ul li .day {
        font-size: 12px;
        min-width: 50px;
    }
    .news ul li .title {
        font-size: 12px;
    }

/* 企業情報 */
    .outline-title {
        font-size: 20px;
        margin: 25 0 0;
    }
    @keyframes border-top {
        0% {
          width: 0%;
        }
        100% {
          width: 330px;
        }
    }
    @keyframes border-bottom {
        0% {
          width: 0%;
        }
        100% {
          width: 330px;
        }
    }
    .outline-title:after {
        top: 52px;
    }
    .outline-subtitle {
        font-size: 18px;
    }
    .outline-text {
        font-size: 12px;
        line-height: 17px;
    }
/* 施工実績トップ */
    .projects-title {
        font-size: 20px;
        margin: 25 0 0;
    }
    .projects-title:after {
        top: 52px;
    }
    .projects-card-wrapper {
        margin: 50px 0;
    }
    .projects-card {
        width: 100%;
    }

/* 施工実績各種 */
    .projects-navi {
        margin: 0;
        font-size: 14px;
    }


/* 求人情報 */
    .recruit-info {
        font-size: 20px;
        margin: 25 0 0;
    }
    .recruit-info:after {
        top: 52px;
    }
    .recruit-card-inner1-top, .recruit-card-inner2-top, .recruit-card-inner3-top {
        height: 150px;
    }
    .recruit-card-inner1-img, .recruit-card-inner2-img, .recruit-card-inner3-img {
        bottom: 620px;
    }
    .recruit-card-inner1, .recruit-card-inner2, .recruit-card-inner3 {
        height: 500px;
    }
    .recruit-title {
        font-size: 30px;
        padding: 20px 30px 20px;
    }
    .recruit-title:before {
        left: 10%;
    }
    .recruit-title:after {
        right: 10%;
    }
    .recruit-subtitle {
        margin: 15 40 10px;
    }
    .recruit-text {
        line-height: 30px;
        margin: 10 40 10px;
    }
    .recruit-subtext {
        line-height: 30px;
        margin: 10 40 10px;
    }
/* 新着情報 */
    .news-title {
        font-size: 20px;
        margin: 25 0 0;
    }
    .news-title:after {
        top: 52px;
    }
    .news-subtitle {
        font-size: 19px;
        line-height: 25px;
    }
    .news-text {
        font-size: 15px;
        line-height: 25px;
    }
/* フッター */
    .footer {
        height: auto;
    }
    .footer .container {
        padding: 0 3px 0 3px;
        margin-left: 0;
        margin-right: 0;
    }
    .footer-3-1, .footer-3 {
        
    }
}
@media (max-width: 540px) {
/* main-text用CSS */
    .main {
        height: 500px;
    }
    .main-text h2 {
        font-size: 16px;
    }
    .line-1 {
        width: 140px;
        margin-left: 50px;
    }
    .line-2 {
        width: 190px;
        margin-left: 50px;
    }
    .line-3 {
        width: 230px;
        margin-left: 50px;
    }
    .line-4 {
        width: 140px;
        margin-left: 50px;
    }
    .main-text h3 {
        height: 120px;
        line-height: 40px;
        font-size: 11px;
    }
    .line-box-1 {
        height: 90px;
        width: 30px;
        top: 80px;
        left: 91%
    }
    .line-box-2 {
        height: 90px;
        width: 30px;
        bottom: 130px;
        left: 3%;
    }
/* 求人情報 */
    .recruit-card-inner1-img, .recruit-card-inner2-img, .recruit-card-inner3-img {
        bottom: 600px;
    }
    .recruit-card-inner1, .recruit-card-inner2, .recruit-card-inner3 {
        padding: 150px 20px 50px;
    }
    .recruit-subtitle {
        font-size: 16px;
        margin: 15 20 10px;
    }
    .recruit-text {
        font-size: 14px;
        line-height: 25px;
        margin: 15 20 10px;
    }
    .recruit-subtext {
        font-size: 14px;
        line-height: 25px;
        margin: 15 20 10px;
    }
    .recruit-endtext {
        font-size: 15px;
    }
}
@media (max-width: 450px) {
/* 求人情報 */
    .recruit-card-inner1-top, .recruit-card-inner2-top, .recruit-card-inner3-top {
        height: 80px;
    }
    .recruit-main-img {
        width: 60%;
    }
/* 新着情報 */
    .news-subtitle {
        font-size: 15px;
    }
    .news-text {
        font-size: 13px;
    }
}
@media (max-width: 330px) {
/* スマートフォンのCSS */
    .header {
        height: 30px;
        padding:  0px;
        margin: 0px;
    }
    .header-left {
        width: 180px;
        height: 30px;
    }
    .header-logo {
        width: 21px;
        height: 21px;
        font-size: 20px;
        margin: auto 0;
        line-height: 23px;
    }
    .header-corp {
        line-height: 35px;
        font-size: 14px;
        height: 30px;
        width: 130px;
        padding: 0 5px;
    }
    .menu-btn {
        top: 5px;
        height: 20px;
        width: 20px;
    }
    .menu-btn span, .menu-btn span:before, .menu-btn span:after {
        height: 2px;
        width: 10px;
    }
    .menu-btn span:before {
        bottom: 4px;
    }
    .menu-btn span:after {
        top: 4px;
    }
    .main-visual {
        width: 100%;
        height: 450px;
        margin-top: 30px;
        margin-bottom: 0;
    }
    .main-visual img {
        width: 100%;
        height: 190px;
    }
    .main .container {
        padding: 0 10px;
    }
    .line-1 {
        width: 110px;
        margin-left: 20px;
    }
    .line-2 {
        width: 160px;
        margin-left: 20px;
    }
    .line-3 {
        width: 200px;
        margin-left: 20px;
    }
    .line-4 {
        width: 110px;
        margin-left: 20px;
    }
    .line-box-1 {
        width: 20px;
        left: 89%
    }
    .line-box-2 {
        width: 20px;
        left: 5%;
    }
/* フッター */
    .footer-1 {
        height: 90px;
        padding-top: 30px;
    }
    .footer-logo {
        font-size: 45px;
        width: 45px;
        height: 45px;
        line-height: 50px;
    }
    .footer-3-1 {
        font-size: 9px;
    }
    .footer-3 {
        font-size: 7px;
    }
}

@media (max-height: 600px) {
    .menu-content ul li a {
        font-size: 20px;
        line-height: 25px;
    }
    .menu-content ul li a::before {
        width: 12px;
        height: 12px;
        right: 30px;
        top: 20px;
    }
}


/*@media (max-width: 320px) {
    .header {
        height: 40px;
        padding:  0px;
        margin: 0px;
    }
    .header-left {
        height: 40px;
    }
    .header-logo {
        font-size: 16px;
    }
    .header-corp {
        line-height: 45px;
        font-size: 15px;
        width: 130px;
    }
    .menu-btn {
        height: 20px;
        width: 20px;
    }
    .menu-btn span, .menu-btn span:before, .menu-btn span:after {
        height: 1.5px;
        width: 10px;
    }
}*/

/* 改行 */
/* 施工実績　工事種別・工事場所 */
@media screen and (min-width: 801px) {
    .br-pro {
        display: none;
    }
}
@media screen and (max-width: 800px) {
    .br-pro {
        display: block;
    }
}
@media screen and (max-width: 670px) {
    .br-pro {
        display: none;
    }
}
@media screen and (max-width: 420px) {
    .br-pro {
        display: block;
    }
}