@charset "utf-8";

@media (max-width: 1200px) {

    .main_title {
        font-size: 60px;
    }


    .header_wrap {
        min-height: 70px;
    }

    .header_logo {
        margin: 10px 0 0 45px;
    }

    .header_logo img {
        height: 50px;
    }

    .header_nav {
        margin: 0px 0px 0 0;
        gap: 20px;

        position: fixed;
        top: 0;
        right: -200px;
        width: 200px;
        height: 100vh;
        background: #fff;
        transition: right 0.3s ease;
        z-index: 1001;
    }

    /* メニュー表示状態（active） */
    .header_nav.active {
        right: 0;
    }

    /* メニュー外クリック時のオーバーレイ */
    .menu_overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }

    .menu_overlay.active {
        display: block;
    }

    .header_nav {
        display: block;
        flex-direction: column;
    }

    .header_lists {
        display: flex;
        flex-direction: column;
        padding: 100px 10px 20px 10px;
    }


    .header_nav .contact {
        display: none;
    }

    /* .header_nav .header_menu {
        display: none;
    } */

    .header_menu_sp {
        display: block;
        z-index: 1001;
    }

    /* 開いた時の×アイコン */
    .header_menu_sp_open_btn.active::before {
        transform: rotate(25deg);
        top: 20px;
    }

    .header_menu_sp_open_btn.active::after {
        transform: rotate(-25deg);
        top: 20px;
        width: 50px;
    }

    /* メニュー背景スモーク（少し濃く） */
    .menu_overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 27, 91, 0.5);
        /* ← 少し強めに */
        z-index: 1000;
    }

    .menu_overlay.active {
        display: block;
    }

    #scroll_move {
        z-index: 1001;
    }

    .other_slider .main_title {
        font-size: 38px;
    }

    .other_slider .sub_title {
        font-size: 28px;
    }

    .slider1_big {
        width: 100%;
        position: relative;
    }

    .slider1 {
        width: 100%;
    }

    .slider1_on_design img {
        height: 310px;
    }

    .slider1_on_text img {
        width: 200px;
    }

    .slider1_big ul {
        width: 100%;
    }

    .footer_wrap {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }

    .footer_nav1 {
        gap: 15px;
    }

    .cta_contact {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .cta_contact__tel {
        margin: 0 auto 0 auto;
    }


    .top_sec1 .content {
        /* width: 700px; */
        margin: 0 auto;
        gap: 70px;
    }

    .top_sec2_btn {
        margin: 70px 0 0 0;
    }

    .top_sec3 {
        width: 100%;
        margin: 0 auto;
        min-height: 730px;
        display: flex;
        flex-direction: column-reverse;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 50px;
    }

    .top_sec3_prosess_item {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: flex-start;
        align-items: baseline;
        gap: 100px;
    }

    .top_sec3_imgarea {
        max-width: 790px;
        width: 700px;
        height: 250px;
        background-image: url(../img/12.webp);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 30px;
    }

    .top_sec3 img {
        display: none;
    }

    .top_sec3_prosess_item_ico::before {
        width: 80px;
        right: -80px;
    }

    .top_sec4 .backtxt {
        width: 700px;
        font-family: var(--font-title-main);
        font-size: 148px;
        opacity: 12%;
        position: relative;
        top: 220px;
        margin: -220px auto 0 auto;
    }

    .top_sec4 .top_sec4_1 {
        width: 700px;
        margin: 0 auto 55px auto;
    }

    .top_sec5 {
        width: 100%;
        margin: 0 auto;
        padding: 120px 0 80px 0;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: stretch;
    }

    .top_sec5_news_content_item {
        width: 700px;
    }

    .top_sec5_titlearea {
        width: 700px;
        margin: 0 auto;
    }
    .top_sec5_news_content {
        width: 700px;
        margin: 0 auto;
    }

    /* consept */
    .cons_sec1 {
        max-width: 700px;
    }

    .cons_sec1_content_big {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 80px;
    }

    .cons_sec1_content_logo {
        width: 700px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        gap: 50px;
    }

    .cons_sec1_content_text {
        width: 700px;
    }

    /* consept */

    /* portfolio */
    .port_sec1 {
        padding: 160px 0 195px 0;
        margin: 0 auto;
        width: 700px;
    }

    .port_sidebar {
        max-width: 635px;
    }

    .port_archive_content_article {
        width: 200px;
    }

    .port_archive_img {
        width: 200px;
        height: 200px;
    }

    .port_archive_content_ul {
        gap: 30px 30px;
    }

    /* portfolio */

    /* process */
    .proc_sec1 {
        padding: 160px 0 195px 0;
        margin: 0 auto;
        width: 700px;
    }

    .proc_sec1_content {
        gap: 200px;
    }

    .proc_sec1_content_item {
        gap: 50px;
    }

    .proc_sec1_content_item_text {
        max-width: 320px;
    }

    .proc_sec1_content_item img {
        width: 330px;
    }

    .proc_sec1_content_item .back_img {
        width: auto;
    }

    /* process */

    /* news */
    .news_sec1 {
        padding: 160px 0 195px 0;
        margin: 0 auto;
        width: 700px;
    }

    /* news */

    /* company */
    .comp_sec1 {
        padding: 160px 0 195px 0;
        margin: 0 auto;
        width: 700px;
    }

    .comp_sec1_item_sub_box1_ico_area {
        right: -150px;
    }

    .comp_sec1_item_sub {
        padding: 0 0 15px 15px;
    }

    .comp_sec1_maparea {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 60px;
    }

    /* company */

    /* recruit */
    .rec_sec1 {
        padding: 160px 0 195px 0;
        margin: 0 auto;
        width: 700px;
    }

    .rec_sec1_titledetail_text {
        width: fit-content;
        line-height: 2;
        font-size: 18px;
        color: var(--font-base-color);
        text-align: center;
        position: relative;
        right: 0;
        top: 0;
    }

    .rec_sec1_titledetail {
        display: flex;
        width: 100%;
        position: relative;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }

    /* recruit */

    /* contact */
    .inq_sec1 {
        padding: 160px 0 195px 0;
        margin: 0 auto;
        width: 700px;
    }
    /* contact */
}