@charset "utf-8";
/* =========================================================================================================================================== */
/* ヘッダーデザイン                                                                                                                                */
/* =========================================================================================================================================== */
/* トップページ */
@media all {
    #page-top #header {
        position: absolute;
        width: 100%;
        height: calc(100% - 44px);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: var(--zindex-header);
    }
    #page-top .header-inner {
        width: var(--width-100);
        max-width: var(--content-width-5);
        margin: 0 auto;
    }
    #page-top #header #logo {
        width: 100%;
        max-width: 305px;
        margin: 0 auto;
        padding-bottom: 57px;
    }
    #page-top #header #logo img {
        filter: drop-shadow(2px 4px 8px rgba(94,94,94,0.75));
    }
    #page-top #header #gnavi {
        width: 100%;
        height: 118px;
        border-radius: 59px;
        background-color: rgba(255,255,255,0.95);
        padding: 22px;
        padding-bottom: 0;
    }
    #page-top #header #gnavi ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    #page-top #header #gnavi ul li {
        padding: 0 20px;
    }
    #page-top #header #gnavi ul li a .icon {
        text-align: center;
        height: 59px;
        padding-bottom: 7px;
    }
    #page-top #header #gnavi ul li a .icon img {
        height: 52px;
        width: auto;
    }
    #page-top #header #gnavi ul li.contact a .icon img {
        height: 49px;
    }
    #page-top #header #gnavi ul li a p {
        font-size: 14px;
        font-weight: var(--font-weight-bold);
        text-align: center;
        line-height: 1;
    }
}
/* 1024px ~ 1700pxは可変 */
@media (max-width: 1700px) and (min-width: 1024px) {
    /* 基準点 */
    html.top {
        font-size: calc(100vw / 17);  /* ウィンド幅が1700pxを基準。100px */
    }
    #page-top .header-inner {
        max-width: 8.8rem;
    }


    #page-top #header #logo {
        max-width: 3.05rem;
        padding-bottom: 0.57rem;
    }

    
    #page-top #header #gnavi {
        height: 1.18rem;
        border-radius: calc(1.18rem / 2);
        padding: 0.22rem;
        padding-bottom: 0;
    }
    #page-top #header #gnavi ul li {
        padding: 0 0.2rem;
    }
    #page-top #header #gnavi ul li a .icon {
        height: 0.59rem;
        padding-bottom: 0.07rem;
    }
    #page-top #header #gnavi ul li a .icon img {
        height: 0.52rem;
    }
    #page-top #header #gnavi ul li.contact a .icon img {
        height: 0.49rem;
    }
}
/*
@media (max-width: 1023px) {
    #page-top #header {
        padding-top: 37px;
    }
    
    #page-top #header #logo {
        padding-bottom: 45px;
    }
    
    #page-top #header #gnavi {
        height: auto;
        padding: 22px 30px 7px;
        border-radius: 102.5px;
        max-width: 600px;
        margin: 0 auto;
    }
    #page-top #header #gnavi ul {
        justify-content: space-between;
        max-width: 400px;
        margin: 0 auto;
    }
    
    #page-top #header #gnavi ul li {
        padding: 0;
        width: calc(100% / 3);
        text-align: center;
        padding-bottom: 15px;
    }
    #page-top #header #gnavi ul li a .icon {
        display: inline-block;
    }
    
}
*/
@media (max-width: 1023px) {
    #page-top #header {
        height: 422px;
        min-height: calc(100vh - 29px);
    }
    
    #page-top #header #logo {
        max-width: 170px;
        padding-bottom: 30px;
    }
    
    #page-top #header #gnavi {
        height: auto;
        border-radius: 102.5px;
        max-width: 600px;
        margin: 0 auto;
        padding: 0;
        padding-top: 14px;
        padding-bottom: 3px;
    }
    #page-top #header #gnavi ul {
        max-width: 230px;
        justify-content: space-between;
        margin: 0 auto;
    }    
    #page-top #header #gnavi ul li {
        padding: 0;
        padding-bottom: 14px;
        width: calc(100% / 3);
        text-align: center;
    }
    #page-top #header #gnavi ul li a .icon {
        padding-bottom: 7px;
        height: auto;
        display: inline-block;
    }
    #page-top #header #gnavi ul li a .icon img {
        height: 40px;
    }
    #page-top #header #gnavi ul li.contact a .icon img {
        height: 40px;
    }
    #page-top #header #gnavi ul li a p {
        font-size: 12px;
    }
}


/* 下層ページ */
@media all {
    .page-sub #header {
        width: 100%;
        padding-top: 20px;
        position: fixed;
        z-index: var(--zindex-header);
    }
    
    .page-sub .header-inner {
        width: var(--width-100);
        margin: 0 auto;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }


    /* ロゴ */
    .page-sub #header #logo {
        --logo-width: 254px;
        --logo-height: calc(var(--logo-width) * (52 / 270));
        width: var(--logo-width);
        height: var(--logo-height);
        margin-top: 20px;
    }
    .page-sub #header #logo a {
        display: block;
        width: 100%;
        height: 100%;
        background-image: url('../../img/sub/sub_logo_w.png');
        background-size: contain;
        background-repeat: no-repeat;
    }
    .page-sub.scroll #header #logo {
        opacity: 0;
        pointer-events: none;
    }

    /* Gメニュー */
    .page-sub #header #gnavi {
        position: absolute;
        top: 0;
        margin: auto;
        left: 0;
        right: 0;
        max-width: 770px;
    }
    .page-sub #header #gnavi ul {
        display: flex;
        justify-content: center;
    }
    .page-sub #header #gnavi ul li {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 88px;
        padding: 12px 0;
        border-radius: 50%;
        border: solid 2px transparent;
    }
    .page-sub #header #gnavi ul li a {
        border-radius: 50%;
        border: solid 1px transparent;
        display: block;
    }
    .page-sub #header #gnavi ul li .icon {
        width: 50px;
        height: 36px;
        margin: 0 auto;
        margin-bottom: 8px;
        display: block;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .page-sub #header #gnavi ul li.home      .icon { background-image: url('../../img/menu_icon00_w.png') ; }
    .page-sub #header #gnavi ul li.company   .icon { background-image: url('../../img/menu_icon01_w.png') ; }
    .page-sub #header #gnavi ul li.surveying .icon { background-image: url('../../img/menu_icon02_w.png') ; }
    .page-sub #header #gnavi ul li.develop   .icon { background-image: url('../../img/menu_icon03_w.png') ; }
    .page-sub #header #gnavi ul li.d3        .icon { background-image: url('../../img/menu_icon04_w.png') ; }
    .page-sub #header #gnavi ul li.recuit    .icon { background-image: url('../../img/menu_icon05_w.png') ; }
    .page-sub #header #gnavi ul li.contact   .icon { background-image: url('../../img/menu_icon06_w.png') ; }
    .page-sub #header #gnavi ul li p {
        font-size: 12px;
        font-weight: var(--font-weight-bold);
        color: var(--color-white);
        text-align: center;
        line-height: 1;
    }
    /* スクロール */
    .page-sub.scroll #header #gnavi {
        display: none;
    }

    /* Gメニュー カレント */
    .page-sub.gnavi-current-1 #header #gnavi ul li:nth-child(1),
    .page-sub.gnavi-current-2 #header #gnavi ul li:nth-child(2),
    .page-sub.gnavi-current-3 #header #gnavi ul li:nth-child(3),
    .page-sub.gnavi-current-4 #header #gnavi ul li:nth-child(4),
    .page-sub.gnavi-current-5 #header #gnavi ul li:nth-child(5),
    .page-sub.gnavi-current-6 #header #gnavi ul li:nth-child(6),
    .page-sub.gnavi-current-7 #header #gnavi ul li:nth-child(7),
    .page-sub.gnavi-current-8 #header #gnavi ul li:nth-child(8),
    .page-sub.gnavi-current-9 #header #gnavi ul li:nth-child(9) {
        border-color: var(--color-white);
        background: var(--gradient1);
    }
    .page-sub.gnavi-current-1 #header #gnavi ul li:nth-child(1) a,
    .page-sub.gnavi-current-2 #header #gnavi ul li:nth-child(2) a,
    .page-sub.gnavi-current-3 #header #gnavi ul li:nth-child(3) a,
    .page-sub.gnavi-current-4 #header #gnavi ul li:nth-child(4) a,
    .page-sub.gnavi-current-5 #header #gnavi ul li:nth-child(5) a,
    .page-sub.gnavi-current-6 #header #gnavi ul li:nth-child(6) a,
    .page-sub.gnavi-current-7 #header #gnavi ul li:nth-child(7) a,
    .page-sub.gnavi-current-8 #header #gnavi ul li:nth-child(8) a,
    .page-sub.gnavi-current-9 #header #gnavi ul li:nth-child(9) a {
        pointer-events: none;
    }

    /* @@@
    .page-sub.scroll.gnavi-current-1 #header #gnavi ul li:nth-child(1) .icon { background-image: url('../../img/menu_icon00_w.png') ; }
    .page-sub.scroll.gnavi-current-2 #header #gnavi ul li:nth-child(2) .icon { background-image: url('../../img/menu_icon01_w.png') ; }
    .page-sub.scroll.gnavi-current-3 #header #gnavi ul li:nth-child(3) .icon { background-image: url('../../img/menu_icon02_w.png') ; }
    .page-sub.scroll.gnavi-current-4 #header #gnavi ul li:nth-child(4) .icon { background-image: url('../../img/menu_icon03_w.png') ; }
    .page-sub.scroll.gnavi-current-5 #header #gnavi ul li:nth-child(5) .icon { background-image: url('../../img/menu_icon04_w.png') ; }
    .page-sub.scroll.gnavi-current-6 #header #gnavi ul li:nth-child(6) .icon { background-image: url('../../img/menu_icon05_w.png') ; }
    .page-sub.scroll.gnavi-current-7 #header #gnavi ul li:nth-child(7) .icon { background-image: url('../../img/menu_icon06_w.png') ; }
    .page-sub.scroll.gnavi-current-8 #header #gnavi ul li:nth-child(8) .icon { background-image: url('../../img/menu_icon07_w.png') ; }
    .page-sub.scroll.gnavi-current-9 #header #gnavi ul li:nth-child(9) .icon { background-image: url('../../img/menu_icon08_w.png') ; } 

    .page-sub.scroll.gnavi-current-1 #header #gnavi ul li:nth-child(1) p { color: var(--color-white) ; }
    .page-sub.scroll.gnavi-current-2 #header #gnavi ul li:nth-child(2) p { color: var(--color-white) ; }
    .page-sub.scroll.gnavi-current-3 #header #gnavi ul li:nth-child(3) p { color: var(--color-white) ; }
    .page-sub.scroll.gnavi-current-4 #header #gnavi ul li:nth-child(4) p { color: var(--color-white) ; }
    .page-sub.scroll.gnavi-current-5 #header #gnavi ul li:nth-child(5) p { color: var(--color-white) ; }
    .page-sub.scroll.gnavi-current-6 #header #gnavi ul li:nth-child(6) p { color: var(--color-white) ; }
    .page-sub.scroll.gnavi-current-7 #header #gnavi ul li:nth-child(7) p { color: var(--color-white) ; }
    .page-sub.scroll.gnavi-current-8 #header #gnavi ul li:nth-child(8) p { color: var(--color-white) ; }
    .page-sub.scroll.gnavi-current-9 #header #gnavi ul li:nth-child(9) p { color: var(--color-white) ; }
    */
    
    /* Gメニュー ボタン */
    .page-sub #btn-gnavi {
        display: flex;
        opacity: 0;
        transition: opacity 0.5s ease;
        width: 88px;
        height: 88px;
        border-radius: 50%;
        border: solid 2px var(--color-white);
        justify-content: center;
        align-items: center;
        background: var(--gradient1);
        cursor: pointer;
    }
    .page-sub.scroll #btn-gnavi {
        opacity: 1;
    }
    .page-sub #btn-gnavi .bar {
        width: 28px;
        height: 18px;
        margin: auto;
        position: relative;
        margin-bottom: 9px;
    }
    .page-sub #btn-gnavi .bar span {
        position: absolute;
        width: 22px;
        height: 1px;
        background-color: var(--color-white);
        right: 0;
        top: 8px;
    }
    .page-sub #btn-gnavi .bar span::before {
        content: "";
        display: block;
        width: 28px;
        height: 1px;
        background-color: var(--color-white);
        right: 0;
        position: absolute;
        top: -8.5px;
    }
    .page-sub #btn-gnavi .bar span::after {
        content: "";
        display: block;
        width: 28px;
        height: 1px;
        background-color: var(--color-white);
        right: 0;
        position: absolute;
        top: 8.5px;
    }
    .page-sub #btn-gnavi .caption {
        font-size: 12px;
        line-height: 1;
        color: var(--color-white);
    }


    /* スマホメニュー */
    .page-sub .sp-navi {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        background-color: var(--color-white);
        transition: height 0.5s ease;
        overflow: hidden;
    }
    .page-sub.sp-navi-open .sp-navi {
        height: 100%;
    }
    .page-sub .sp-navi-inner {
        padding: 25px;
    }
    .page-sub .sp-navi .logo {
        width: 254px;
        margin-left: 30px;
        margin-top: 15px;
        padding-bottom: 120px;
    }
    .page-sub .sp-navi ul {
        max-width: 310px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        /*
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        height: 366px;
        */
    }
    .page-sub .sp-navi ul li {
        width: 85px;
        text-align: center;
        padding-bottom: 39px;
    }
    .page-sub .sp-navi ul li figure img {
        height: 61px;
        width: auto;
        margin: 0 auto;
        margin-bottom: 15px;
    }
    .page-sub .sp-navi ul li.home figure img {
        height: 40px;
    }
    .page-sub .sp-navi ul li figure figcaption {
        font-size: 14px;
        line-height: 1;
    }


    /* Gメニュー closeボタン */
    .page-sub .sp-navi #btn-gnavi-close {
        position: absolute;
        background: var(--gradient1);
        border-radius: 50%;
        width: 88px;
        height: 88px;
        right: 55px;
        top: 20px;
    }
    .page-sub .sp-navi #btn-gnavi-close span {
        width: 0;
        height: 0;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        position: absolute;
    }
    .page-sub .sp-navi #btn-gnavi-close span::before,
    .page-sub .sp-navi #btn-gnavi-close span::after {
        content: "";
        background: var(--color-white);
        position: absolute;
        margin: auto;
        width: 30px;
        left: -14px;
        height: 1.5px;
    }
    .page-sub .sp-navi #btn-gnavi-close span::before {
        transform: rotate(45deg);
    }
    .page-sub .sp-navi #btn-gnavi-close span::after {
        transform: rotate(-45deg);
    }
}
/* モバイル表示 */
@media (max-width: 1200px) {
    .page-sub #header {
        padding: 25px 0;
    }


    /* ロゴ */
    .page-sub #header #logo {
        --logo-width: 180px;
        
        margin: 0;
    }


    /* Gメニュー */
    .page-sub #header #gnavi {
        display: none;
    }


    /* Gメニュー ボタン */
    .page-sub #btn-gnavi {
        opacity: 1;
        width: 56px;
        height: 56px;
    }
    .page-sub #btn-gnavi .bar {
        width: 19px;
        height: 14px;
        margin-bottom: 8px;
    }
    .page-sub #btn-gnavi .bar span {
        width: 13px;
        height: 1px;
        top: 7px;
    }
    .page-sub #btn-gnavi .bar span::before {
        width: 19px;
        height: 1px;
        position: absolute;
        top: -7px;
    }
    .page-sub #btn-gnavi .bar span::after {
        width: 19px;
        height: 1px;
        top: 7px;
    }
    .page-sub #btn-gnavi .caption {
        font-size: 10px;
        color: var(--color-white);
    }



    /* スマホメニュー */
    .page-sub .sp-navi .logo {
        width: 180px;
        margin: 0;
    }

    /* Gメニュー closeボタン */
    .page-sub .sp-navi #btn-gnavi-close {
        width: 52px;
        height: 52px;
        top: 28px;
    }
    .page-sub .sp-navi #btn-gnavi-close span::before,
    .page-sub .sp-navi #btn-gnavi-close span::after {
        width: 18px;
        height: 1px;
        left: -9px;
    }
}
@media (max-width: 1023px) {
    /* Gメニュー closeボタン */
    .page-sub .sp-navi #btn-gnavi-close {
        right: 28px;
    }

}


/* ------------------------------------------------------------- */
/* オーバーレイメニュー                                               */
/* ------------------------------------------------------------- */
@media all {
    #overlay-navi {
        position: fixed;
        z-index: var(--zindex-header);
        top: 220px;
        right: 0;
    }
    #overlay-navi .email a {
        display: flex;
        width: 42px;
        height: 42px;
        margin: 0 auto;
        justify-content: center;
        align-items: center;
        background-color: var(--color-red1);
        border-radius: 50%;
    }
    #overlay-navi .email a img {
        width: 23px;
    }
    #overlay-navi .email {
        padding-bottom: 7px;
    }
    #overlay-navi .tel a {
        display: block;
        width: 55px;
        height: 242px;
        background-color: var(--color-red1);
        text-align: center;
        padding: 9px 0;
    }
    #overlay-navi .tel a .icon {
        width: 20px;
        margin: auto;
        padding-bottom: 7px;
    }
    #overlay-navi .tel a .number {
        font-weight: var(--font-weight-bold);
        color: var(--color-white);
        text-orientation: upright;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        margin: auto;
    }
}
@media (max-width: 767px) {
    #overlay-navi {
        bottom: 68px;
        top: auto;
    }
    #overlay-navi .email a {
        width: 26px;
        height: 26px;
    }
    #overlay-navi .email {
        padding-bottom: 6px;
    }
    #overlay-navi .email a img {
        width: 16px;
    }
    #overlay-navi .tel a {
        width: 34px;
        height: 212px;
        padding: 5px 0;
    }
    #overlay-navi .tel a .icon {
        width: 18px;
    }
    #overlay-navi .tel a .number {
        font-size: 14px;
    }
}