body {
    margin: 0px;
}


/* --テキスト選択時のオリジナルハイライト色設定-- */
/*******************************************/

::selection {
    background-color: #cf9;
    color: #000;
}

/* --Firefox-- */

::-moz-selection {
    background-color: #cf9;
    color: #000;
}


/*=============================================*/
/* 基本設定 */
/*=============================================*/

.container {
    width: min(100%, 1920px);
    background-color: #ffffff;
}


.info-box {
    width: 100vw;
}

.inf-img {
    width: 100vw;
}

li {
    width: max-document;
    font-weight: 300;
    display: block;
    vertical-align: top;
    border-color: purple;
    border-width: 3px;
}


a.mailto {
    color: #f77941;
    text-decoration: underline;
}

/* --トップページ下部のサブページリンク-- */
/*===========================================*/

.sec-bot {
    display: block;
    background: none;
}

.sec-bot:hover {
    background: none;
}

.sec-bot p {
    width: 240px;
    text-align: center;
    margin: 30px auto 3px auto;
}


/* --メニューリンク下部のイメージ画像-- */
/*===========================================*/

.article-flx {
    display: flex;
    flex-wrap: wrap;
}


/*===========================================*/
/*　サイト名　*/
/*===========================================*/

header {
    position: relative;
}

.he-bk {
    width: 100%;
    /*
    margin-top: -2em;
    */
}

.hed-tex {
    position: absolute;
    /*
    width: max-content;
    right: 0;
    margin-top: 30vw;
    */
    margin-top: 38vw;
    z-index: 5;
    top: 0;
    text-shadow: 1px 1px 1px #000000,
        -1px -1px 1px #000000,
        1px -1px 1px #000000,
        -1px 1px 1px #000000;
}


/* ヘッダー　帯 */
/*===========================================*/
.hed-box {
    z-index: 5;
    top: 0;
}

.top-logo {
    background-color: #000000;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}

.top-cen {
    width: 100%;
    margin-top: -6px;
    margin-bottom: 40px;
}

.top-lg {
    width: min(95%, 750px);
}

.top-lg2 {
    width: min(50%, 230px);
}

.sub-logbox {
    background-color: #74472D;
}


/*============================================*/
/* ドロップシャドウ設定 */
/*============================================*/

.shad {
    /*
    text-shadow: 1px 1px 8px #000000,
        -1px -1px 8px #000000,
        1px -1px 8px #000000,
        -1px 1px 8px #000000,
        1px 1px 1px #000000,
        -1px -1px 1px #000000,
        1px -1px 1px #000000,
        -1px 1px 1px #000000;
    */
    text-shadow: 1px 1px 8px #f77941,
        -1px -1px 8px #f77941,
        1px -1px 8px #f77941,
        -1px 1px 8px #f77941,
        1px 1px 1px #f77941,
        -1px -1px 1px #f77941,
        1px -1px 1px #f77941,
        -1px 1px 1px #f77941;
}

/*==============================================*/
/* メニュー設定 */
/*==============================================*/

.l-box {
    width: auto;
}

.top-link {
    width: auto;
    display: flex;
    flex-direction: column;
}

.menu-link {
    /*
    margin-left: 25vw;
    */
    margin-left: 18vw;
}

/*
.menu-ty {
    height: 12vw;
}
*/


/* インスタ　FB */
/*===========================================*/
.sns-lin {
    width: 100vw;
    display: flex;
    justify-content: center;
}

.sns-img {
    margin: 3vw 6vw;
}


/* インフォメーション */
/*===========================================*/
.sid-sp {
    padding: 0px 2vw;
}


/*============================================*/
/* メインコンテンツ */
/*============================================*/

section {
    max-width: 100vw;
}


/* --各説明テキスト　背景-- */
/*===========================================*/
.text-1,
.text-2,
.text-3,
.text-4,
.text-5 {
    background-color: rgba(59, 28, 5, 0.6);
    margin: 0px auto 0px auto;
}

/* 各セクション背景 */
/*===========================================*/
.tec-bk {
    width: 100%;
    height: 100%;
}

.sec-bk1,
.sec-bk2 {
    /* スマホ 100％表示*/
    width: 100%;
    height: 100%;
}


.sec-end {
    width: 600px;
    margin: 0px auto 0px auto;
}

.sec-bot {
    margin: 0px 25px 0px 25px;
}


/* カレンダー */
/*===========================================*/
.calen {
    width: 100vw;
}

/* 店内 */
/*===========================================*/
.ten-nai {
    width: 100vw;
    height: 100%;
}

/* グーグルマップ */
/*===========================================*/
.g-map {
    width: 100vw;
    height: 100vw;
}


/* 店舗住所 */
/*===========================================*/

.marg0 {
    margin: 0px;
}

.end-add {}

.end-logo {
    width: auto;
    height: 100%;
    margin: 0px auto;
    display: flex;
    justify-content: center;
}

.end-add-tx {
    display: flex;
    justify-content: center;
}


/*============================================*/
/* footer 設定 */
/*============================================*/

/* --企業名　連絡先　テキストスタイル-- */
/*===========================================*/

footer {
    background-color: #C5AA9A;
    width: 100%;
    height: 20px;
}

.end-1 {
    font-size: 14px;
    text-align: center;
    color: #76093f;
    margin: 0px;
}

/* --コピーライト　スタイル-- */
/*===========================================*/

.end {
    color: #5a5958;
    font-size: 16px;
    text-align: center;
    margin: 2px auto 20px auto;
    padding-top: 10px;
    border-top: 1px solid #000000;
}



/*==================================================*/
/* 画面サイズ760px以上で、PC専用画面になる。 */
/*==================================================*/

@media screen and (min-width: 760px) {

    /* 760px サイトネーム */
    /*===========================================*/

    header {}

    /* 760px ヘッダー帯 */
    /*===========================================*/
    .hed-box {
        position: absolute;
        width: 100%;
    }

    .top-logo {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .top-cen {
        width: 100%;
        margin-top: min(6.5vw, 130px);
    }

    .hed-tex {
        margin-top: 5px;
    }

    h1 br {
        display: none;
    }

    /* 760px リンク */
    /*===========================================*/

    .l-box {
        max-width: 1300px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-top: 70px;
        margin-left: auto;
        margin-right: auto;
        padding: 0px;
    }

    .top-link {
        width: 18%;
        display: flex;
        flex-direction: column;
        margin-top: min(5vw, 50px);
    }

    /*
    .menu-ty {
        width: auto;
        margin: 13px 10px;
        height: 30px;
        border-radius: 5px;
    }
*/

    .menu-link {
        height: 20px;
        /*
        margin: 13px 16px;
        */
        margin: 10px 16px;
        font-size: min(2vw, 18px);
    }


    /* 760px インスタ FB */
    /*===========================================*/
    .sns-lin {
        width: 100%;
    }

    .sns-img {
        width: 47px;
        margin: 1vw 1vw;
    }


    /* 760px インフォメーション */
    /*===========================================*/
    .info-box {
        width: 60%;
    }

    .inf-img {
        width: min(80%, 600px);
        /*
        margin: 10px calc(50% - min(80%, 600px) / 2);
        */
        margin: 10px auto 10px 0px;
    }


    /* 760px メインコンテンツ */
    /*===========================================*/

    section {
        width: min(100%, 1920px);
        padding-bottom: 10px;
    }

    .article-flx {
        flex-direction: row;
    }


    /* 760px 各セクション背景 */
    /*===========================================*/
    .sec-bk1 {
        /* PC 100％表示*/
        width: 100%;
        height: 100%;
    }

    /* PC 50％表示*/
    /*===========================================*/
    .sec-bk2 {
        width: 50%;
        height: 100%;
    }

    .sid-sp {
        padding: 0px;
    }

    .sub0 {
        width: 540px;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
    }


    /* 760px テイクアウト */
    /*===========================================*/
    .tec-bk {
        width: 50%;
    }


    /* 760px カレンダー */
    /*===========================================*/
    .id-calen {
        margin-left: calc(50% - min(40%, 400px));
    }

    .id-cal-tex {
        margin: 0px;
    }


    /* 760px グーグル・カレンダー */
    /*===========================================*/
    .calen {
        width: min(80%, 800px);
    }


    /* なまはげ　グーグル・マップ */
    /*===========================================*/
    .ten-g {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }


    /* 760px なまはげ写真 */
    /*===========================================*/
    .ten-nai {
        width: min(40%, 800px);
        height: min(100%, 400px);
        margin-right: 20px;
    }


    /* 760px グーグルマップ */
    /*===========================================*/
    .g-map {
        width: min(40%, 800px);
        height: min(20vw, 400px);
        margin-left: 20px;
    }


    /* 760px 各コメント　テキスト位置 */
    /*===========================================*/

    /* 760px テイクアウト */
    /*===========================================*/
    .text-1 {
        /*
        background-color: rgba(59, 28, 5, 0.51);
        */
        padding: 10px 20px 10px 20px;
        z-index: 10;
        position: absolute;
        right: 0;
    }


    /* 760px 自家焙煎 */
    /*===========================================*/
    .text-2 {
        padding: 10px 20px 10px 20px;
        z-index: 10;
        position: absolute;
        right: 0;
    }

    .text-3,
    /* 760px ギフト */
    .text-4,
    /* 760px 移動販売 */
    .text-5

    /* 760px 店舗情報 */
    /*===========================================*/
        {
        padding: 10px 20px 10px 20px;
        z-index: 11;
        position: absolute;
    }


    /* 760px 店舗住所 */
    /****************/

    .end-add {
        display: flex;
        justify-content: center;
        flex-direction: none;
    }

    .end-logo {
        width: auto;
        height: 100%;
        margin: 0px 40px 0px 0px;
        align-self: center;
    }


    /* 1001px 以上の位置設定 */
    /**********************/

    @media screen and (min-width: 1001px) {

        .top-link {
            width: 15%;
        }


        /* 1001px テイクアウト */
        /*===========================================*/
        .text-1 {
            width: min(90%, 970px);
            z-index: 10;
            align-self: flex-end;
            right: 0;
        }


        /* 1001px 自家焙煎 */
        /*===========================================*/
        .text-2 {
            width: min(90%, 1270px);
            align-self: flex-end;
        }


        /* 1001px ギフト */
        /*===========================================*/
        .text-3 {
            width: min(90%, 1300px);
            margin-top: 12%;
            margin-left: min(50% - min(46%, 680px));
        }


        /* 1001px 移動販売 */
        /*===========================================*/
        .text-4 {
            width: min(85vw, 1000px);
        }


        /* 1001px 店舗情報 */
        /*===========================================*/
        .text-5 {
            width: min(80vw, 900px);
        }

        .shop-fl {
            display: flex;
            flex-direction: row;
        }


        /*========================================= */
        /* 画面サイズ71920px以上 */
        /*========================================= */

        @media screen and (min-width: 1920px) {

            /* サイト幅最大1000px固定 */
            /*===========================================*/

            .container {
                width: 1920px;
                margin: 0px auto;
            }

            header {}

            .top-logo {
                width: 1920px;
            }

            section {}


            /* 1920px テイクアウト */
            /*===========================================*/
            .text-1 {
                margin-left: 910px;
                right: auto;
            }


            /* 1920px 自家焙煎 */
            /*===========================================*/
            .text-2 {
                margin-left: 610px;
                right: auto;
            }


            /* 1920px ギフト */
            /*===========================================*/
            .text-3 {
                margin-left: 300px;
                margin-top: 240px;
            }


            /* 1920px 移動販売 */
            /*===========================================*/
            .text-4 {
                margin-right: calc(50vw - 960px);
            }


            /* 1920px 店舗情報 */
            /*===========================================*/
            .text-5 {}

            footer {
                width: 1920px;
            }
        }
    }
}