@charset "utf-8";

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

html {
    font-size: 62.5%;

}

body {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    font-family: "Shippori Mincho B1"
        "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;


    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

*,
*:before,
*:after {
    /*        outline:s 2px solid red !important;*/
}


/*a全てにホワッと動く*/
/*a全てに半透明になる*/

a:hover {
    transition: 1s;
    opacity: 0.3;
}

/*768以下で電話リンク有効*/
@media(min-width: 768px) {
    a[href^="tel:"] {
        pointer-events: none;
    }
}



/*メインビジュアル　消してる
.mv img {
    width: 100%;
}*/


.mv_bg {
    background-image: url(../images/mainv.jpg);
    background-repeat: no-repeat;
    /*    背景画像 隙間なくす*/
    background-size: cover;

    /*高さ　横並び　真ん中    */
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;

    /*  真ん中基準に広がる  */
}

.mvlogo img {
    width: 280px;

}

/*ヘッダー ロゴとアイコン２つ　背景の上に置く*/

.header_inner {
    padding: 28px;
    position: fixed;
    left: 70px;
}

.header_inner img {
    width: 126px;
}


.header_info {
    display: flex;
    align-items: center;
    position: fixed;
    right: 60px;
}

.header_info img {
    width: 25px;
    margin: 30px 8px;
}



.gnav {
    position: absolute;
    top: 20%;
    right: 13%;
    /* 縦棒   border-left: solid 1.2px rgb(155, 107, 45);*/

}


.gnav a {
    font-size: 20px;
    font-weight: 400;
    margin: 30px;
    display: block;
    color: rgba(106, 68, 18, 0.77);
    text-decoration: none;
}

.gnav a:hover {
    color: beige;
}



/*スライダー右側余白部分　小さいボタン見えなくする*/
.works_slider {
    overflow: hidden;
    margin-top: 100px;

}



.slider img {
    margin: 0 auto;
    height: 35vw; //ポイント1

    max-height: 400px; //ポイント2
    min-height: 370px; //ポイント2}






    section {
        padding: 100px;
    }



    /*サイズ幅にあわせて縮小max-width*/
    .ttl {
        max-width: 1700px;
        margin: 20px 40px 80px 80px;
        padding-top: 20px;

        /*    棒を水平に、上下真ん中に */

        display: flex;
        align-items: center;

        color: rgba(30, 30, 30, 0.9);
        font-size: 40px;
        letter-spacing: 0.05em;
    }


    /*後ろに棒　伸縮*/
    .ttl:after {
        border-top: 1px solid rgba(30, 30, 30, 0.9);
        margin-left: 50px;
        content: "";
        flex-grow: .9;
    }


    .works_wrap {
        width: 1000px;
        max-width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }


    /*  実例正方形　画像      */
    .works_item {
        width: 330px;
        margin-top: 20px;
        padding: 20px;
        margin: 0 auto;
    }


    .item_ttl {
        font-size: 16px;
        font-weight: bold;
        padding-top: 10px;

    }

    .item_btn {
        text-align: right;

    }

    .item_btn a {
        text-decoration: none;
        padding: 50px;
        color: #000;
    }

    /*アバウト*/

    #about {
        background-color: rgba(100, 85, 50, 0.3);

    }

    .message {
        margin: 0 auto;
        text-align: center;
        font-size: 23px;
        line-height: 2.5;
        letter-spacing: 0.2em;
        color: #333;

    }



    /*サービス内容３つ       */

    .service_item {
        width: 330px;
        padding: 25px;
        margin: 0 auto;
    }



    .service_naiyou {
        font-size: 27px;
        font-weight: bold;
        margin-top: 30px;
    }

    .service_item p {
        margin-top: 40px;
        font-size: 17px;
        line-height: 2;
    }

    /*サービス終わり       



    /*works画像　オフィス画像 スタッフ写真　横幅100％*/
    .works_item img,
    .office img,
    .staff_item img {
        width: 100%;
    }


    .staff_item {
        width: 240px;
        margin: 0 auto;
    }




    .staff_item p {
        text-align: center;
    }

    .name {
        font-size: 18px;
    }


    .staff2wrap {
        max-width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }




    .name1 {
        margin: 30px;
    }



    /*TOPアイコン*/
    .top img {
        position: fixed;
        bottom: 110px;
        right: 40px;
    }

    .top a {
        margin: 15px 15px;
        display: inline-block;
    }


    /*TELLアイコン*/
    .tell {
        position: fixed;
        bottom: 330px;
        left: 0px;
        padding: 15px 40px;
    }

    .tell img {
        width: 18px;
    }

    /*contactセクション*/


    .contact_wrap {
        max-width: 950px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }


    .ex {
        font-size: 15px;
        margin-top: 70px;
    }

    .contact_box {
        width: 380px;
        margin: 0 auto;
        font-size: 13px;
        letter-spacing: .40px;
    }


    .con_box,
    .insta_box {
        border: solid #000 1.5px;
        background-color: #fff;
        padding: 10px 70px;
        display: flex;
        align-items: center;
        font-size: 20px;
        letter-spacing: .2em;
    }

    .contact_box a {
        text-decoration: none;
        color: #333;
    }


    .insta_box img {
        width: 25px;
        margin-left: 10px;
    }


    .map {
        text-align: center;
        padding-top: 100px;
    }

    /*フッターロゴと住所*/

    footer {
        padding: 40px 0;
        /*           background-color: rgba(160, 120, 30, 0.3);*/

    }

    .address {
        max-width: 820px;
        border-top: solid rgba(106, 68, 18, 0.77) 0.5px;
        margin: 0 auto;
        padding-top: 20px;
        display: flex;
        justify-content: space-around;

    }

    .logo img {
        width: 130px;
        margin-top: 20px;
    }


    .address p {
        color: rgba(106, 68, 18, 0.77);
        padding: 20px 50px;
        font-size: 16px;
        letter-spacing: 0.1em;
    }


    /*フォント明朝*/
    .message,
    .service_item p,
    .staff_item p,
    .staff2wrap,
    .ex,
    .contact_box p,
    .address p {
        font-family: "游明朝", YuMincho,
            "Hiragino Mincho ProN W3",
            "ヒラギノ明朝 ProN W3",
            "Hiragino Mincho ProN",
            "HG明朝E",
            "ＭＳ Ｐ明朝",
            "ＭＳ 明朝",
            serif;
    }

    /*フォント英字*/
    .ttl,
    .gnav,
    .service_item {
        font-family: "Cormorant Garamond", serif;


    }





    /*スマホ化レスポンシブ*/
    /*0~768pxまでの幅に適応される*/
    @media screen and (max-width:768px) {

        /*    aリンク　アイコン*/
        .top img {
            bottom: 50px;
            right: 21px;
            width: 60px;
        }


        .tell {
            position: fixed;
            bottom: 100px;
            left: 0px;
            padding: 15px 20px;
        }

        .tell img {
            width: 15px;
        }

        /*    aリンク　アイコン終わり*/




        .mv_bg,
        .message,
        .works_wrap,
        .service_wrap,
        .contact_wrap,
        .address,
            {
            width: 100%;
        }


        .mv_bg {
            height: 400px;
        }

        .mvlogo img {
            width: 150px;
        }

        .header_inner {
            padding: 15px;
            position: fixed;
            left: 10px;
        }

        .header_inner img {
            width: 60px;
        }

        .header_info {
            position: fixed;
            right: 25px;
        }

        .header_info img {
            width: 20px;
            margin: 15px 3px;
        }


        .gnav {
            position: absolute;
            top: 9%;
            right: 10%;

            /* 縦棒   border-left: solid 1.2px rgb(155, 107, 45);*/

        }

        .gnav a {
            font-size: 13px;
            margin: 9px;
        }


        .works_slider {
            margin-top: 50px;

        }



        section {
            padding: 50px;

        }


        .ttl {
            margin: 0px 8px;
            font-size: 20px;
        }

        /*後ろに棒　伸縮*/
        .ttl:after {
            margin-left: 20px;
        }



        .works_wrap,
        .service_wrap,
        .contact_wrap {
            display: block;
        }


        /*  実例正方形　画像      */
        .works_item {
            width: 320px;
            margin-top: 50px;
        }


        .message {
            padding-top: 50px;
            text-align: left;
            font-size: 16px;
            line-height: 2;

        }



        .service_item {
            padding: 20px;

        }

        .service_naiyou {
            font-size: 25px;

        }

        .service_item p {
            margin-top: 20px;
            font-size: 16px;
            line-height: ;
        }

        .name {
            font-size: 15px;
            margin-top: 5px;
        }


        .staff_item {
            margin-top: 40px;
        }

        .staff2wrap {
            margin: 0 auto;
            margin-top: 70px;
        }





        .contact_wrap {
            max-width: 450px;

        }

        .contact_box {
            width: 370px;
        }

        .con_box,
        .insta_box {
            padding: 10px 30px;
            font-size: 18px;
        }

        .ex {
            margin: 20px 0 20px;
        }


        .map iframe {
            width: 370px;
            height: 370px;
        }



        footer {
            padding: 40px;
            background-color: rgba(100, 85, 50, 0.3);

        }



        .logo img {
            width: 80px;
        }

        .address p {
            color: rgba(106, 68, 18, 0.77);
            letter-spacing: 0.1em;
            font-size: 12px;
            padding: 20px;

        }



        /*スマホ化レスポンシブ*/
        /*0~425pxまでの幅に適応される*/
        @media screen and (max-width:425px) {


            section {
                padding: 40px;
            }

            .mv_bg {
                height: 300px;
            }

            .top img {
                bottom: 30px;
                right: 3px;
                width: 50px;
            }


            .gnav {
                top: 7%;
                right: 8%;
                /* 縦棒   border-left: solid 1.2px rgb(155, 107, 45);*/

            }

            .gnav a {
                font-size: 11px;
                margin: 3px;
            }





            /*  実例正方形　画像      */
            .works_item {
                width: 250px;
            }

            .works_item img,
            .service_item {
                width: 100%;
            }



            .contact_wrap {
                max-width: 330px;

            }

            .contact_box {
                width: 250px;
            }

            .con_box,
            .insta_box {
                padding: 10px 30px;
                font-size: 16px;
            }


            .map iframe {
                width: 250px;
                height: 250px;
            }

        }