@charset "UTF-8";
/*
Theme Name: nakamurasyaji
Description: 中村社寺コーポレートサイト
Version: xxx
Author: xxx
*/

@media screen and (max-width:1400px){
    .dentou_bottombox{
        margin:100px auto 300px auto;
    }
}

@media screen and (max-width:1300px){
    .dentou_bottombox{
        display:none;
    }
    .sekou_inner{
        padding:120px 40px;
    }
}

@media screen and (max-width:1200px){
    .flow_list{
        min-height:800px;
    }
    .flow_list::before{
        left:-400px;
        width:900px;
        height:850px;
    }
    .flow_step{
        left:385px;
    }
    .flow02{
        top:250px;
        left:455px;
    }
    .flow03{
        top:380px;
        left:470px;
    }
    .flow04{
        top:510px;
        left:450px;
    }
    .flow05{
        top:640px;
        left:370px;
    }
}

@media screen and (max-width:1275px){
    .dentou_rightbox{
        width:22%;
    }
    .sekou_inner{
        padding:100px 40px 0 40px;
    }
}

@media screen and (max-width:1100px){
    .header.menu-open {
        background: rgb(18, 52, 82,0.8) !important;
        position: fixed;
        top: 0;
        width: 100%;
        transition: none;
        z-index: 9999;
    }
    .header_gnav_wrapper{
        display:none;
    }
    .hamburger {
        display: block;
    }
    #hamburger-window.open {
        display: flex;
        opacity: 1;
        visibility: visible;
        transform:translateX(0);
    }

    /*施工実績*/
    .top_work_item_txt{
        flex-direction: column;
    }

    /*フッター*/
    .f_gnav_list,
    .f_small_link_list{
        display:none;
    }
    .f_btnArea{
        flex-direction: column;
        gap:10px;
    }

    /*
    下層ページ
    */
    /*施工実績*/
    .search_list{
        grid-template-columns: repeat(2,1fr);
    }
    .work_item_txtArea{
        padding:10px;
    }
    .work_item_structure{
        font-size:.8em;
        padding:2px 6px;
    }
}

@media screen and (max-width:1024px){
    .dentou_txtArea h1{
        font-size:2em;
    }

    /*歴史/沿革*/
    .history_item{
        gap:10px;
        flex-direction: column;
    }

    /*建築工程*/
    .step_item{
        padding:2vw 4vw 2vw 0;
    }
    .step_content_wrapper{
        flex-direction: column;
        align-items: flex-start;
        padding-left:200px;
        gap:20px;
        width:100%;
    }
    .step_content h3{
        margin-bottom:30px;
    }
    .step_content{
        padding-left:0;
        width:100%;
    }
}

@media screen and (max-width:1000px){
    .top_news_right{
        width:70%;
    }

    .top_takumi_block01{
        gap:50px;
    }
    .top_takumi_img03{
        margin-left:80px;
        margin-top:150px;
    }

    /*
    下層ページ
    */

    /*中村社寺について*/
    .about_feeling{
        width:60%;
    }
    .about_txt_block02{
        width:100%;
    }

    /*施工実績*/
    .work_list{
        grid-template-columns: repeat(2,1fr);
    }
}

@media screen and (max-width:900px){
    .dentou_rightbox{
        display:none;
    }
    .dentou_txtArea{
        max-width:60%;
        margin:0 0 0 auto;
        padding-right:7vw;
    }
    .dentou_leftbox{
        width:30%;
    }

    /*
    下層ページ
    */
    /*企業概要*/
    .page_link_list{
        gap:30px;
    }
    .group_item01{
        width:100%;
    }
    .group_list02{
        grid-template-columns: repeat(1,1fr);
    }

    /*建築工程*/
    .work-flow_inner{
        padding:100px 0;
    }
    .work-flow_inner h2{
        position:static;
        margin-bottom:50px;
        padding-left:40px;
    }
    .flow_list::before{
        left:-500px;
    }
    .flow_step{
        left:285px;
    }
    .flow02{
        top:250px;
        left:350px;
    }
    .flow03{
        top:380px;
        left:370px;
    }
    .flow04{
        top:510px;
        left:350px;
    }
    .flow05{
        top:640px;
        left:270px;
    }

    /*施工実績　絞り込み検索*/
    .searchandfilter li{
        width:100%;
        margin-bottom:25px;
    }

    /*サイトマップ*/
    .sitemap_item ul{
        grid-template-columns: repeat(2,1fr);
    }
}

@media screen and (max-width:768px){
    /*メインビジュアル*/
    .mv_txt{
        left:40px;
    }

    /*お知らせ*/
    .top_news{
        padding:100px 40px 0;
    }
    .top_news_inner{
        flex-direction: column;
        gap:50px;
    }
    .top_news_right{
        width:100%;
    }
    .view_btn{
        margin-left:auto;
    }

    /*中村社寺について*/
    .top_about,
    .top_work{
        padding:100px 0;
    }

    .top_about_img02{
        top:360px;
    }

    /*画像パララックス*/
    .parallax_imgArea{
        display:none;
    }

    /*施工実績*/
    .work_ttl{
        flex-direction: column;
        align-items: flex-start;
    }
    .top_work_item_txt{
        opacity:1;
        position:static;
        padding:10px 0;
    }
    .top_work_slide{
        padding-left:0;
    }
    .top_work_item:last-child {
        margin-right: 0;
    }
    .swiper-button-prev{
        left:5%;
    }

    /*伝統の技と匠*/
    .top_takumi{
        margin:50px 0;
    }
    .top_takumi_block01{
        flex-direction: column;
        margin-bottom:50px;
    }
    .top_takumi_block01_imgArea{
        width:100%;
    }
    .top_takumi_img02{
        position:static;
        width:100%;
        margin-top:20px;
    }
    .top_takumi_img03{
        width:100%;
        margin-top:20px;
        margin-left:0;
    }
    .top_takumi_block02{
        padding-left:40px;
        display:flex;
        flex-direction: column;
    }
    .view_btn4{
        margin-left:auto;
        margin-right:auto;
    }

    /*建築工程*/
    .top_work-flow{
        margin-bottom:50px;
    }
    .top_work-flow_wrapper{
        left:50%;
        transform:translate(-50%,-50%);
        text-align:center;
        width:100%;
        padding:0 20px;
    }
    .work-flow_txt{
        font-size:1.1em;
    }

    /*企業概要・採用情報*/
    .outline{
        flex-direction: column;
    }
    .top_company_img,
    .recruit_img{
        aspect-ratio: 720 / 480;
    }

    /*フッター*/
    .footer_inner{
        flex-direction: column;
        padding:0 40px;
    }
    .f_btnArea{
        flex-direction: row;
        gap:30px;
    }

    /*
    下層ページ
    */

    /*中村社寺について*/
    .about_txt_block01{
        margin:30vh 0;
        flex-direction: column;
        align-items: center;
        gap:100px;
    }
    .about_feeling{
        width:100%;
    }
    .about_feeling h3,
    .about_feeling h4{
        text-align: center;
    }
    .about_txt_block02{
        padding-bottom:100px;
    }
    .img_loop{
        padding:50px 0 0 0;
    }
    .about_content{
        padding:100px 40px;
    }
    .about_content_inner > h3{
        padding:0;
    }
    .about_content_item,
    .about_content_item2{
        flex-direction: column;
        gap:30px;
    }
    .about_content_item_img{
        height:auto;
        width:100%;
        aspect-ratio: 720 / 500;
    }
    .about_content_item_txt{
        width:100%;
    }

    /*再生事例*/
    .about_saisei_imgArea{
        flex-direction: column;
        align-items: center;
    }
    .content_wrapper{
        max-height:900px;
    }
    .about_saisei_img_content2::before{
        top:-35px;
        left:50%;
        transform:translateY(0) translateX(-50%) rotate(0deg);
    }

    /*伝統の技と匠*/
    .sekou_item,
    .sekou_item2{
        flex-direction: column;
        gap:20px;
    }
    .sekou_img{
        max-width:100%;
    }

    .total_item{
        flex-direction: column;
        gap:30px;
    }
    .total_txt{
        width:100%;
    }

    .quality_txt{
        width:100%;
        padding:0 40px;
    }

    /*企業概要*/
    .main_ttl2_inner h2{
        left:2em;
    }

    .page_link_list{
        flex-direction: column;
    }
    .company_profile_item{
        padding:20px 1em;
        flex-direction: column;
        gap:10px;
    }
    .company_profile_item dt{
        width:100%;
    }

    .company03_imgArea{
        display:grid;
        grid-template-columns: repeat(2,1fr);
        width:max-content;
    }

    /*歴史/沿革*/
    .main_ttl3_inner h2{
        left:2em;
    }
    .history_item > div{
        flex-direction: column;
    }
    .history_item{
        margin-left:0;
        padding-left:4em;
    }
    .history_item::before{
        max-width:50px;
    }
    .history_item_txtArea{
        width:100%;
    }

    /*施工実績*/
    .main_ttl4_inner h2{
        left:2em;
    }
    .search_list{
        grid-template-columns: repeat(1,1fr);
    }

    /*施工実績　詳細*/
    .work_single_detail_item{
        flex-direction: column;
        gap:10px;
        padding:15px;
    }
    .work_single_detail_ttl{
        width:100%;
    }
    .lightbox_comment{
        display:none;
    }
    [data-lightbox] {
        pointer-events: none;
    }

    /*建築工程*/
    .wf_message h2{
        font-size:1.6em;
    }
    .flow_list{
        min-height:700px;
    }
    .flow_list::before{
        left:-650px;
        width:800px;
        height:700px;
    }
    .flow_step{
        gap:30px;
        left:30px;
        top:100px;
    }
    .flow02{
        top:215px;
        left:105px;
    }
    .flow03{
        top:330px;
        left:125px;
    }
    .flow04{
        top:440px;
        left:100px;
    }
    .flow05{
        top:550px;
        left:35px;
    }
    .flow_num{
        width:50px;
        height:50px;
        font-size:1.2em;
    }
    .flow_content{
        padding:10px 20px;
    }

    .after-care h2{
        font-size:1.6em;
    }

    .step_item{
        flex-direction: column;
        padding:0;
    }
    .step_item h2{
        position:static;
        width:100%;
        flex-direction: row;
        gap:5px;
        padding:20px 0;
    }
    .step_item h2::before{
        left:50%;
        transform:translateX(-50%);
    }
    .step_content_wrapper{
        padding:20px;
    }

    /*お問い合わせ*/
    .main_ttl5_inner h2{
        left:2em;
    }
    .mail_form_item{
        padding:20px 0;
        flex-direction: column;
        gap:15px;
    }
    .mail_form_item > dt,
    .mail_form_item > dd,
    .add_box{
        width:100%;
    }

    /*お知らせ*/
    .news_item a{
        padding:15px 10px;
    }
    .news_item a{
        flex-direction: column;
        gap:10px;
        align-items: flex-start;
    }
    .news_item01{
        gap:10px;
        flex-direction: row-reverse;
    }
    .news_cate{
        font-size:.8em;
    }
}