/* クラスつけ方 */
/* .ex_main-img */
/* ↑ページ略_タグ-要素 */

/* カラー */

/* ★文字 */
/* color:#231813; */
/* ★見出し文字 */
/* color: #398fce; */

/* ★背景 グリーン */
/* color: #009c84; */


/* 共通Style */

html{
    font-size: 62.5%;
    overflow-y: scroll;
}

body{
    font-size: 1.4rem;
    font-family: '游ゴシック','ヒラギノ角ゴ ProN',sans-serif;
}

/* header Start */
.hambMenu,.hambMenuList{
    display: none;
}

header{
    width: 100%;
    height: 80px;
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 999999;
    box-shadow: 0px 0px 7px #969696;
}
nav{
    display: flex;
    justify-content: center;
}
.navMenu{
    height: 80px;
    display: flex;
    justify-content: center;
}
.navMenu li{
    text-align: center;
    margin: auto 0;
    padding: 5px 15px;
}
.navMenu a{
    margin: auto 0;
    text-decoration: none;
    font-size: 1.3rem;
    color: #231813;
}
.navMenu a:hover{
    opacity: .7;
    transition: .3s;
}
.header_bar{
    width: 1px;
    height: 50px;
    margin-top: 15px;
    line-height: 80px;
    background: #231813;
}
.logo_img img{
    width: 100%;
}
.logo_img{
    width: 300px;
    min-width: 200px;
    margin: auto 0;
    margin-right: 15px;
}
.header_insta{
    max-width: 40px;
    margin: auto 10px;
}
/* header End */

/* 共通使用タグのスタイル */
a{
    text-decoration: none;
}

h1{
    font-size: 2.8rem;
    font-weight: bold;
}

button{
    transition: .2s;
}
button:hover{
    transition: .2s;
    opacity: .7;
}

/* テーブル */
table{
    width: 80%;
}

table th,table td{
    width: fit-content;
    border: #231813 solid 1px;
    padding: 10px;
}

main{
    margin-top: 100px;
    min-height: 80vh;
}


/* 共通仕様のクラススタイル */
.ds-flex{
    display: flex;
}

.main_width{
    width: 65%;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 1.6rem;
}

.main_width.sekou_main{
    margin-top: 110px;
}

.ft_mincho{
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/* footer上 Start */

/* インスタバナー */
.insta_banner{
    width: 100%;
    padding: 60px 0;
    background-color: #fff;
}
.insta_banner-img{
    width: 50%;
    min-width: 300px;
    max-width: 450px;
    margin: 0 auto;
    transition: .3s;
}
.insta_banner-img:hover{
    opacity: .7;
    transition: .3s;
}

/* お問い合わせバナー */
.contact_banner{
    width: 100%;
    padding: 60px 0;
    background-color: #fff;
}
.contact_banner-img{
    width: 80%;
    max-width: 700px;
    min-width: 350px;
    margin: 0 auto;
}

/* footer上 End */

/* footer Start */

footer{
    width: 100%;
    background-color: #009c84;
}

footer p{
    width: 40%;
    max-width: 600px;
    min-width: 350px;
    margin: 0 auto;
}

/* footer End */



/* 各ページ見出し */
.page_midashi{
    height: auto;
    display: flex;
    justify-content: space-between;
}
.page_midashi-img{
    width:20%;
    min-width: 150px;
}
.page_midashi div{
    width: 70%;
    height: auto;
    display: flex;
    justify-content: left;
}
.page_midashi div p{
    width: 100px;
}
.page_midashi ul{
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    color: #398fce;
}
.page_midashi li{
    margin: 0 10px 5px 10px;
}
.page_midashi a{
    transition: .2s;
    color: #398fce;
}
.page_midashi a:hover{
    transition: .2s;
    opacity: .6;
}










/* トップページ(index.html) Style */

.main_visual{
    margin-top: 20px;
}

/* 導入 */
.top_intro{
    width: 100%;
    height: auto;
    margin: 60px auto;
}

.top_mark-img{
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
    /* background-color: #26bb47; */
}
.top_mark-img img{
    width: 120px;
}

.intro-text{
    width: 70%;
    height: auto;
    margin: 0 auto;
}

.intro-text h1,.intro-text_01{
    width: fit-content;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 15px;
}

.intro-text h1{
    max-width: 711px;
}

.intro-text_01{
    position: relative;
}

.intro-img{
    width: 120px;
    height: 120px;
    position: absolute;
    right: -10px;
    bottom: -30px;
}

.intro-img img{
    width: 100%;
}


/* お庭のお悩み */
.top_garden{
    width: 100%;
    padding: 20px 0;
    margin: 60px 0;
    background-color: #EFEFEF;
    position: relative;
}

.top_garden-title{
    width: 80%;
    max-width: 1070px;
    margin: 0 auto;
    margin-bottom: 20px;
    display: flex;
}

.top_garden-title p{
    width: 100%;
    margin: auto 0;
    margin-left: 20px;
    font-size: 3.5rem;
    font-weight: bold;
}

.garden_q-img{
    display: inline-block;
    width: 10%;
    max-width: 85px;
    min-width: 55px;
    height: fit-content;
    margin: auto 0;
    margin-right: 5px;
}
.garden_a-img{
    width: 10%;
    max-width: 85px;
    min-width: 55px;
    height: fit-content;
    margin-right: 5px;
}
.garden_q-img img,.garden_a-img img{
    width: 100%;
    height: auto;
}


.garden_circle-img{
    width: 220px;
    position: absolute;
    top: -120px;
    right: -50px;
}

.garden-text{
    width: 70%;
    max-width: 1070px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.garden-text div{
    width: 50%;
    margin: 10px 0;
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    justify-content: left;
}

.garden-text div p{
    margin: auto 0;
    font-size: 2.2rem;
}

.garden_check-img{
    display: inline-block;
    width: 60px;
    margin: auto 0;
}

.garden_shosai-btn{
    width: 30%;
    min-width: fit-content;
    padding: 10px 40px;
    font-size: 2.5rem;
    font-weight: bold;
    color: #fff;
    background-color: #009c84;
    transition: .3s;
    position: absolute;
    bottom: 0;
    right: 0;
}

.garden_shosai-btn:hover{
    color: #fff;
    background-color: #06695a;
    transition: .3s;
}



/* 施行実例 */
.top_jitsurei{
    width: 100%;
    background-color: #EFEFEF;
}

.jitsurei_midashi{
    width: 30%;
    text-align: right;
    margin-bottom: 30px;
    padding: 10px 40px;
    font-size: 2.5rem;
    font-weight: bold;
    color: #fff;
    background-color: #009c84;
}

.jitsurei_list{
    width: 70%;
    max-width: 1180px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
}

.jitsurei_list li{
    width: 30%;
    margin: 0 10px 10px 10px;
    text-align: center;
    transition: .3s;
}

.jitsurei_list li:hover{
    opacity: .7;
    transition: .3s;
}

.jitsurei_list li p{
    margin-bottom: 10px;
    text-align: center;
    font-weight: bold;
    color: #231813;
}





/* エクステリア・外構工事 */
.ex_main h1{
    margin: 35px 0;
}

.ex_main h3{
    font-size: 2.3rem;
    font-weight: bold;
    margin: 10px 0;
}

.ex_main section{
    margin: 10px 0 40px 0;
}

.ex_main-flex{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.ex_main-flex p{
    width: 49%;
}


/* 宅地建物取引 */
.pr_main-flex{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
}
.pr_main-flex p{
    width: 49%;
}


/* お庭のなんでも相談 */
.gr_main-top{
    justify-content: center;
    width: 100%;
    height: 20vh;
}
.gr_main-top h1{
    margin: auto 0;
}
.gr_circle{
    width: 180px;
    margin: auto 0;
}

.gr_ans,.gr_que{
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
}

.gr_que h4{
    width: 90%;
    font-size: 2.5rem;
    font-weight: bold;
    margin: auto 0;
}

.gr_ans div{
    width: 90%;
}
.gr_ans div p{
    height: auto;
    font-size: 1.6rem;
    margin-bottom: 10px;
    margin-right: 10px;
    overflow-x: auto;
    overflow-y: hidden;
}
.gr_ans div p img{
    width: 100%;
    min-width: 600px;
}






/* 施行実例 */
.ji_main-list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
}

.ji_main-list a{
    width: 45%;
    margin: 20px 0;
    text-align: center;
    transition: .3s;
}

.ji_main-list li{
    width: 100%;
}

.ji_main-list li p{
    margin-bottom: 10px;
    text-align: center;
    font-weight: bold;
    color: #231813;
}

.ji_main-list a:hover{
    transition: .3s;
    opacity: .8;
}




/* 求人 */
.re_main h1,.re_main-text{
    text-align: center;
}

.re_logo{
    width: 180px;
    margin: 0 auto;
}

.re_main table{
    width: 60%;
    margin: 0 auto;
}

.re_table-title{
    border: none;
    font-size: 1.8rem;
}

.re_boshu{
    width: 100%;
    margin: 50px auto;
}

.re_boshu h4{
    font-size: 1.6rem;
    font-weight: bold;
    margin: 10px 0;
}

.re_boshu div{
    display: flex;
    justify-content: center;
}

.re_boshu div p{
    text-align: left;
    padding: 10px 15px;
}

.re_boshu-midashi{
    width: 20%;
    font-weight: bold;
    border: #231813 solid 1px;
}

.re_boshu-naiyo{
    width: 80%;
    border: #231813 solid 1px;
}

.re_contact{
    width: 90%;
    font-weight: bold;
    font-size: 2.5rem;
    text-align: center;
    padding: 10px;
    margin: 20px auto;
    border-radius: 18px;
    color: #fff;
    background-color: #009c84;
}

/* 会社情報・アクセス */
.co_main{
    margin: 0 auto;
}

.co_main p{
    text-align: center;
}

.co_main01{
    width: 50%;
    margin: 0 auto;
}

.co_main-img{
    display: flex;
    width: 50%;
    margin: 0 auto;
}

.co_main table{
    margin: 0 auto;
}

.co_main-map{
    width: 80%;
    margin: 0 auto;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
}

.co_main-map p{
    width: 45%;
    margin-top: 20px;
}

.co_main-map div{
    width: 53%;
    margin-top: 20px;
}

.co_main-map div p{
    width: 100%;
}

/* お問い合わせ */
.ct_main div{
    margin: 15px 0;
}

.hissu{
    width: fit-content;
    padding: 3px 10px;
    background-color: #e62424;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    font-size: 1.2rem;
    margin-left: 10px;
}

.ct_main p{
    font-size: 1.6rem;
    margin-left: 15px;
}

.ct_main-box input{
    width: 50%;
    min-width: 250px;
    border: #acacac solid 2px;
    padding: 10px 10px;
    border-radius: 10px;
}

.ct_main textarea{
    width: 90%;
    border: #acacac solid 2px;
    padding: 10px 10px;
    border-radius: 10px;
}

.Sendbtn-box{
    display: block;
    width: 160px;
    height: 50px;
    margin-bottom: 50px;
    border-radius: 5px;
    background-color: #009c84;
    transition: .3s;
}

.Sendbtn-box:hover{
    background-color: #006b5b;
    transition: .3s;
}

.Sendbtn{
    display: block;
    width: 160px;
    height: 50px;
    font-size: 2rem;
    color: #fff;
    font-weight: bold;
    border: none;
    background-color: #ffffff00;
    cursor: pointer;
}

/* お問い合わせ確認画面 */
.btnBox{
    display: flex;
    margin-bottom: 50px;
}

.conf_title{
    width: 80%;
    max-width: 1200px;
    margin: 25px auto;
    font-size: 2rem;
    font-weight: bold;
}

.conf_midashi{
    font-weight: bold;
}

.conf_main-box p{
    margin: 20px 0;
    margin-left: 15px;
}

.Backbtn-box{
    display: block;
    width: 160px;
    height: 50px;
    background-color: #b8b8b8;
    border-radius: 5px;
    transition: .3s;
}

.Backbtn:hover{
    background-color: #929292;
    transition: .3s;
}

.Backbtn{
    display: block;
    width: 160px;
    height: 50px;
    font-size: 2rem;
    color: #fff;
    font-weight: bold;
    border: none;
    background-color: #ffffff00;
    cursor: pointer;
}

.Backbtn_mailTo{
    color: #fff;
    height: fit-content;
}

.Backbtn_mailTo p{
    width: 160px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    background-color: #b8b8b8;
    border-radius: 5px;
    transition: .3s;    
}

.Backbtn_mailTo p:hover{
    background-color: #929292;
    transition: .3s;    
}


/* お問い合わせ完了画面 */
.mailTo_text{
    margin: 30px 0;
}


/* 施行実例のスタイル */

.sekou_main{
    margin-bottom: 80px;
}

.sekou_midashi{
    width: 100%;
    text-align: center;
    padding: 10px 0;
    margin: 30px 0;
    font-weight: bold;
    background-color: #EFEFEF;
}

.sekou_main ul li p{
    width: 60%;
    margin: 20px auto;
}

.sekou_main ul li p img{
    width: 100%;
}
.sekou_main ul li p video{
    width: 100%;
}

.sekou_main ul li{
    text-align: center;
}






























@media screen and (max-width:1250px) {
    header{
        width: 100%;
        height: 150px;
        background-color: #fff;
        position: fixed;
        top: 0;
        z-index: 999999;
        box-shadow: 15px 0px 3px #969696;
    }

    main{
        margin-top: 170px;
    }

    nav{
        display: block;
    }

    .logo_img{
        width: 100px;
        margin: 0 auto;
        margin-top: 30px;
    }
    
    .main_width{
        width: 80%;
        margin: 20px auto;
        font-size: 1.6rem;
    }

    .main_width.sekou_main{
        margin-top: 180px;
    }

    /* index.html garden お庭のお悩み */      
    .garden-text div{
        width: 100%;
        font-size: 1.4rem;
        font-weight: bold;
        display: flex;
        justify-content: left;
    }

    .garden-text span{
        margin-top: 10px;
    }

    .garden_circle-img{
        width: 220px;
        position: absolute;
        top: -20px;
        right: 0px;
    }

    /* お問い合わせ */
    .conf_title{
        width: 90%;
    }

}

























/* スマホ・タブレット */
@media screen and (max-width:850px) {
    p{
        font-size: 1.4rem;
    }

    .logo_img{
        margin-top: 30px;
        margin-left: 30px;
    }

    h1{
        font-size: 2.2rem;
    }

    header{
        width: 100%;
        height: auto;
        position: unset;
        box-shadow: none;
    }

    main{
        margin-top: 0;
    }

    .main_width.sekou_main{
        margin: 20px auto;
        margin-top: 0px;
    }


    /* hambMenu ハンバーガーメニュー Start */
    .hamb_logo{
        width: 60%;
        margin: 0 auto;
    }
    .hambMenu,.hambMenuList{
        display: block;
    }
    .navMenu{
        display: none;
    }
    #hambMenu_check{
        visibility: hidden;
    }
    .hambMenu{
        width: fit-content;
        text-align: right;
        display: flex;
        position:fixed;
        top: 30px;
        right: 20px;
        z-index: 9999;
    }
    .hamb_MENU{
        display: block;
        height: 30px;
        width: fit-content;
        font-size: 1.6rem;
        text-shadow: 0 0 5px #fff;
        padding: 10px 15px;
        color: #009c84;
        font-weight: bold;
        position: relative;
        z-index: 9999;
        cursor: pointer;
    }
    .hambMenu_checkbox:checked + .hamb_MENU{
        font-size: 0;
    }
    .hambMenu_checkbox:checked + .hamb_MENU::before{
        font-size: 1.6rem;
        content: '✕ CLOSE';
    }
    /* ハンバーガーメニューが出ているとき後ろの画面をスクロールできないようにする */
    .hambMenu_checkbox:checked + body{
        height: 100%;
    }

    .hambMenuList{
        width: 100%;
        height: 100vh;
        overflow-x: scroll;
        background-color: #EFEFEF;
        position: fixed;
        top: 0;
        right: -100%;
        z-index: 999;
        transition: .5s;
        opacity: 0;
    }
    .hambMenu_checkbox:checked + .hamb_MENU + .hambMenuList{
        right: 0;
        transition: .5s;
        opacity: 1;
    }

    .hambMenuList ul{
        width: 80%;
        height: auto;
        margin: 0 auto;
        margin-top: 100px;
    }
    .hambMenuList li,.hambMenuList{
        width: 100%;
        padding: 10px 0;
        margin: 0 auto;
        border-bottom: #fff solid 3px;
        text-align: center;
        font-size: 1.8rem;
        font-weight: bold;
    }
    .header_insta{
        width: 100%;
        min-width: 20px;
        max-width: 40px;
        padding: 10px 0;
        margin: 0 auto;
        text-align: center;
        font-size: 1.8rem;
        font-weight: bold;
    }
    .hambMenuList a li{
        color: #009c84;
        transition: .3s;
        font-size: 16px;
    }
    .hambMenuList a:hover{
        opacity: .7;
        transition: .3s;
    }

    /* hambMenu ハンバーガーメニュー End */

    /* 子画面共通 */
    .page_midashi{
        height: auto;
        display: block;
        margin-top: 20px;
    }

    .page_midashi div{
        width: 95%;
        height: auto;
        margin-top: 30px;
    }

    .page_midashi a{
        font-size: 1.4rem;
    }


    /* トップページ(index) Start */
    .intro-text{
        width: 95%;
        height: auto;
        margin: 0 auto;
    }

    .top_garden-title p{
        width: 100%;
        margin: auto 0;
        margin-left: 10px;
        font-size: 2.2rem;
        font-weight: bold;
    }

    .garden_shosai-btn{
        width: 30%;
        padding: 10px 20px;
        font-size: 1.7rem;
    }
    

    .garden-text div p{
        font-size: 1.6rem;
    }
    
    .garden_circle-img{
        display: none;
    }

    .jitsurei_list li{
        width: 45%;
        margin: 0 5px 10px 5px;
        text-align: center;
    }
    
    .jitsurei_list li p{
        font-size: 1.4rem;
    }
    /* トップページ(index) End */


    /* 擁壁工事(yoheki) Start */
    .ex_main h3{
        font-size: 1.8rem;
    }
    /* 擁壁工事(yoheki) End */

    /* 宅地建物取引(property) Start */
    .pr_main-flex{
        display: block;
        margin-bottom: 20px;
    }
    .pr_main-flex p{
        width: 100%;
        max-width: 300px;
        margin: 0 auto 20px auto;
    }
    /* 宅地建物取引(property) End */

    /* お庭のお悩み(garden) Start */
    .gr_que h4{
        width: 100%;
        font-size: 1.8rem;
        font-weight: bold;
        margin: auto 0;
    }

    .gr_ans div p{
        font-size: 1.4rem;
    }
    /* お庭のお悩み(garden) End */

    /* 施行実例(jitsurei) Start */
    .ji_main-list li p{
        font-size: 1.4rem;
    }
    /* 施行実例(jitsurei) End */

    /* 求人(recruit) Start */
    .re_main-text{
        margin-top: 15px;
    }

    .re_boshu{
        width: 80%;
        margin: 20px auto;
    }

    .re_boshu div{
        display: block;
    }
    
    .re_boshu div p{
        text-align: left;
    }
    
    .re_boshu-midashi{
        width: 100%;
        margin-left: -5px;
        padding: 10px -20px 10px 10px;
        border: none;
        border-left: #009c84 solid 5px;
        background-color: #EFEFEF;
    }
    
    .re_boshu-naiyo{
        width: 100%;
        border: none;
    }

    .re_contact{
        font-size: 1.6rem;
        text-align: center;
    }

    /* 求人(recruit) End */

    /* 会社情報(company) Start */
    .co_main p{
        height: fit-content;
    }

    .co_main-content01{
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }

    .co_main-content01 p{
        margin: auto 10px;
    }

    .co_main-img{
        width: 100%;
        margin: 20px 0;
    }

    .co_main-map{
        width: 80%;
        margin: 0 auto;
        margin-top: 15px;
        display: block;
    }
    
    .co_main-map p{
        width: 100%;
    }
    
    .co_main-map div{
        width: 100%;
    }
    
    .co_main-map div p{
        width: 100%;
    }
    /* 会社情報(company) End */


    /* お問い合わせ(contact) */
    .main_width.page_midashi{
        width: 90%;
    }
    .main_width.ct_main{
        width: 90%;
    }

    .ct_main p{
        margin-left: 0px;
    }

    .ct_main-box input{
        width: 100%;
        box-sizing: border-box;
    }
    .ct_main textarea{
        width: 100%;
        box-sizing: border-box;
    }

    .Sendbtn-box{
        display: block;
        width: fit-content;
        height: auto;
        margin-bottom: 0;
        margin: 0 auto;
    }

    .Sendbtn{
        width: fit-content;
        height: auto;
        padding: 5px 40px;
    }
    
    .Backbtn_mailTo p{
        width: fit-content;
        height: auto;
        padding: 5px 40px;
        line-height: normal;
        margin-right: 10px;
    }



    /* 施行例ページ Start */
    .sekou_main ul li p{
        width: 70%;
        margin: 20px auto;
    }
    /* 施行例ページ End */
    
}