@charset "UTF-8";

body {
    animation-name: opacity;
    animation-duration: 1.5s;
    background-color: #fff;
    color: #222;
}



.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.clearfix:before {
    content: "";
    display: block;
    clear: both;
}

.clearfix {
    display: block;
}

@keyframes opacity {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

.logo {
    text-align: center;
}

.pcNav {
    display: none;
}

header {
    background: #fff;
    width: 100%;
    position: fixed;
    z-index: 9999;
}

#page_top {
    width: 60px;
    height: 60px;
    position: fixed;
    right: 0;
    bottom: 40px;
    opacity: 0.9;
}

#page_top a {
    width: 60px;
    height: 60px;
    text-decoration: none;
}

#page_top a::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f139';
    font-size: 45px;
    color: #860005;
}

/*hamburger*/
.menu {
    cursor: pointer;
    height: 20px;
    position: absolute;
    right: 30px;
    top: 25px;
    width: 30px;
    z-index: 99;
}

.index .menu {
    top: 10px;
}

.menu__line {
    background: #777;
    display: block;
    height: 2px;
    position: absolute;
    transition: transform .3s;
    width: 100%;
}

.menu__line--center {
    top: 9px;
}

.menu__line--bottom {
    bottom: 0;
}

.menu__line--top.active {
    top: 8px;
    transform: rotate(45deg);
}

.menu__line--center.active {
    transform: scaleX(0);
}

.menu__line--bottom.active {
    bottom: 10px;
    transform: rotate(135deg);
}

li {
    font-family: 'Montserrat', sans-serif;
}

/*gnav*/
.gnav {
    background: rgba(166, 166, 166, 0.72);
    display: none;
    height: 100%;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 98;
}

.gnav__wrap {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    width: 100%;
}

.gnav__menu__item {
    text-align: center;
    margin: 40px 0;
}

.gnav__menu__item a {
    font-family: sans-serif;
    letter-spacing: 0.5px;
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    padding: 40px;
    text-decoration: none;
    transition: .3s;
}

.gnav__menu__item a .navColor {
    color: #df0009;
}

.gnav__menu__item a:hover {
    color: #df0009;
}

.gnav hr {
    margin-bottom: 30px;
    width: 50%;
}

.navSns {
    text-align: center;
    margin: 0 auto;
    width: 80%;
}

.navSns img {
    padding: 5px;
    width: 15%;
}

/*hamburger*/


.slider__1 {
    height: 100vh;
    background-size: cover;
    background-position: 20% center;
    background-image: url(../img/top1800.jpg);
}

.slider__2 {
    height: 100vh;
    background-size: cover;
    background-position: center center;
    background-image: url(../img/zixyouki.jpg);
}


.slider__3 {
    height: 100vh;
    background-size: cover;
    background-position: 75% center;
    background-image: url(../img/coffee.jpg);
}

.mainCopy {
    text-shadow: 1px 1px 4px #222;
    text-align: right;
    color: #fff;
    position: absolute;
    top: 25%;
    right: 20%;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    line-height: 1.8;
    letter-spacing: 0.3em;
    font-family: serif;
    animation-name: opacity;
    animation-duration: 2s;
    animation-delay: 0s;
}

.main_wrap {
    padding: 0 30px 0 30px;
}

a {
    transition: .3s;
    text-decoration: none;
    color: #333;
}

a:hover {
    color: crimson;
}

a img:hover {
    opacity: .7;
}


em {
    font-size: 20px;
    letter-spacing: 3;
}

.mainCopy span {
    padding-top: 130px;
}

h1 {
    font-size: 24px;
    text-align: center;
    padding: 50px 0 10px 0;
    font-family: 'Sorts Mill Goudy', serif;
}

h2 {
    font-family: 'Sorts Mill Goudy', serif;
    margin: 25px 0;
    text-align: center;
    font-size: 20px
}

h3 {
    margin-top: 10px;
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.07em;
    margin-bottom: 30px;
    font-family: 'Noto Sans JP', sans-serif;
}

p {
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.07em;
    font-family: 'Noto Sans JP', sans-serif;
}

hr {
    width: 75%;
    margin-bottom: 20px;
}

dt {
    font-family: 'Noto Sans JP', sans-serif;
}

dd {
    font-family: 'Noto Sans JP', sans-serif;
}

.more {
    width: 50%;
    margin: 50px auto 0 auto;
    border: solid 1px #41210c;
    text-align: center;
    background: #41210c;
    font-weight: bold;
}

.more a {
    padding: 10px 0;
    display: block;
    width: 100%;
    color: aliceblue;
    font-weight: bold;
}

.more a:hover {
    background: #f8f8f8;
    color: #41210c;
}

.eventImg {
    background-image: url(../img/IMG_0850.JPG);
    background-size: cover;
    background-position: center center;
    height: 100px;
}

.topDl dl {
    padding: 0 0 0 30px;
    margin-top: 50px;
}

.topDl dt {
    padding-bottom: 20px;
    float: left;
    clear: both;
}

.topDl dd {
    padding-bottom: 20px;
    padding-left: 150px;
    text-decoration: underline;
}

.hausuRogo img {
    width: 80px;

}

.hausuRogo {
    text-align: center;
    margin-bottom: 30px;
}



footer {
    background: #1a0202;

}

footer a {
    color: aliceblue;
    font-size: 14px;
}

footer a:hover {
    color: aliceblue;
    opacity: .7;
}

.footerText {
    width: 310px;
    margin: 0 auto;
}

.footer_box_text {
    float: left;
    width: 110px;
    padding-left: 30px
}

.footer_box_privacy {
    float: right;
    width: 180px;
    padding-top: 30px;
}

.footer_map img {
    width: 100%;
    padding-top: 50px;
    margin-bottom: 50px;

}

.footer_map {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.footerCopy {
    clear: both;
    text-align: center;
    color: aliceblue;
    font-size: 14px;
    padding: 20px 0;
}

.footer_text_p p {
    text-align: center;
    line-height: 2;
    font-size: 14px;
    color: aliceblue;
}

.footer_box_privacy {
    width: 300px;

}

.footerSpan {
    font-size: 13px;
    color: aliceblue;
    text-align: center;
}

.footerWifi p {
    font-size: 14px;
    text-align: center;
    color: aliceblue;

}

.logoAicon img {
    width: 40px;
    float: left;
    padding-right: 15px;
    padding-top: 10px;
}

.logoAicon {
    width: 230px;
    margin: 0 auto;
    padding-left: 40px;
}

.footerTitle {
    color: aliceblue;
    text-align: center;
    font-size: 20px;
    padding-top: 50px;
    font-family: 'Sorts Mill Goudy', serif;

}

.heroCafe,
.heroCoffee,
.heroAbout,
.heroWebshop,
.heroContact,
.heroNews {
    padding-top: 230px;
}

/*AboutUs*/
.heroAbout {
    height: 40vh;
    background-size: cover;
    background-position: center top;
    background-image: url(../img/abouttop.1800.jpg);
}

.about_box {
    padding: 0 30px;
    line-height: 3;
    font-size: 14px;
}

.about_kobayashi_masuta {
    text-align: right;
}

.about_kobayashi_masuta img {
    width: 40%;
}

.textabout1 {
    margin-bottom: 20px;
}

.textabout2 {
    margin-bottom: 20px;
}

.textabout3 {
    margin-bottom: 20px;
}

.about_box h1 {
    text-align: center;
    padding-top: 20px;
    font-size: 20px;
    font-family: 'Sorts Mill Goudy', serif;
}

.about_text_p {
    text-align: center;
    margin-bottom: 30px;
    font-size: 13px;
}

.aboutH3 h3 {}

.aboutTxst p {
    font-size: 16px;
    margin-bottom: 30px;
}

.acout_text_p {
    font-size: 14px;
    margin-bottom: 50px;
}

.aboutus_img img {
    width: 100%;
    margin-bottom: 100px;
}

.hausu_about_rogo img {
    width: 80px;
}

.hausu_about_rogo {
    text-align: center;
    margin-bottom: 30px;
    padding-top: 0px;
}

/*AboutUs*/

/*NEWS&EVENTS*/
.heroNews {
    height: 40vh;
    background-size: cover;
    background-position: center center;
    background-image: url(../img/IMG_1212.jpg);
}

.pc__selectBox__news {
    display: none;

}



.pc__selectBox__event {
    display: none;
}

.selectBox {
    width: 350px;
    margin: 20px auto;
}

.selectBox__news {
    text-align: center;
    width: 150px;
    border: solid 1.5px #727272;
    margin: 35px auto 20px;
}

.selectBox__event {
    text-align: center;
    width: 150px;
    border: solid 1.5px #727272;
    margin: 0 auto 20px;
}

.selectBox__event a,
.selectBox__news a {
    width: 72%;
    font-weight: bold;
    color: aliceblue;
    border: solid 1px #41210c;
    text-align: center;
    background: #41210c;
    display: block;
    padding: 10px 20px;
}

.selectBox__event a:hover,
.selectBox__news a:hover {
    background: #f8f8f8;
    color: #41210c;

}

.newsBox1__img {
    height: 15vh;
    background-size: cover;
    background-position: center 35%;
    background-image: url(../img/burunge.png);
    margin-bottom: 10px;
}

.newsBox2__img {
    height: 15vh;
    background-size: cover;
    background-position: center 65%;
    background-image: url(../img/112live1.jpg);
    margin-bottom: 10px;
}

.newsBox3__img {
    height: 15vh;
    background-size: cover;
    background-position: center 65%;
    background-image: url(../img/cuba.jpg);
    margin-bottom: 10px;
}

.newsBox4__img {
    height: 15vh;
    background-size: cover;
    background-position: center 65%;
    background-image: url(../img/112event1.jpg);
    margin-bottom: 10px;
}

.newsContent {
    margin-bottom: 150px;
}

/*NEWS&EVENTS*/

/*NEWSdetail*/
.detail__select__news {
    text-align: center;
    width: 150px;
    border: solid 1.5px #727272;
    margin: 50px auto 20px;
    padding: 10px 20px;
}

.detail__select__event {
    text-align: center;
    width: 150px;
    border: solid 1.5px #727272;
    margin: 50px auto 20px;
    padding: 10px 20px;
}


/*NEWSdetail*/
/* BEANS*/
.priceBeans {
    font-weight: bold;
    color: #000;
    margin-top: 30px;
    text-align: right;
}

.heroCoffee {
    height: 40vh;
    background-size: cover;
    background-position: center center;
    background-image: url(../img/beanstop.jpg);
}

.beansBox {
    display: flex;
    margin: 0 auto;
}

.beansBox h2 {
    font-size: 3vw;
}

.beansMenu2 {
    padding-left: 10px;
}

.beansText p {
    margin-bottom: 30px;
}



/* BEANS*/

/*CAFE MENU*/
.heroCafe {
    height: 40vh;
    background-size: cover;
    background-position: center center;
    background-image: url(../img/cafe1500jpg.jpg);
}

.drinkBox p {
    text-align: center;
    margin-bottom: 40px;
}

.menuBox {
    margin-top: 70px;
}

.menuTitle {
    margin: 80px 0 10px 0;
    letter-spacing: 2px;
}

.drinkBox {
    margin-top: 10px;

}

.coffeeMenu {
    width: 49%;

    float: left;
}

.menuImg {
    text-align: center;
}

.menuImg img {
    width: 100%;

}

.otherMenu {
    width: 49%;
    float: right;
}

.sweetMenu {
    width: 49%;
    float: left;
    margin-top: 20px;
}

.foodMenu {
    width: 49%;

    float: right;
    margin-top: 20px;
}

.more {

    margin-top: 30px;
    margin-bottom: 30px;
}

.blend_coffee_box {
    line-height: 2;
    font-size: 16px;
    margin: 15% 7%;
}

.blend_coffee_box dt {
    font-weight: bold;
}

.blend_coffee_box dd {
    padding-left: 20px;
}

.cafeDd {
    text-align: right;
}

.dorink_other_box {
    width: 90%;
    margin: 0 auto;
    border: 1px solid #333;
    padding-bottom: 10%;
    margin-bottom: 20%;

}

.dorink_tea_box {
    width: 90%;
    margin: 0 auto;
    border: 1px solid #333;
    padding-bottom: 10%;
    margin-bottom: 20%;
    height: 350px;
    position: relative;
}

.dorink_soft_box {
    width: 90%;

    margin: 0 auto;
    border: 1px solid #333;
    padding-bottom: 10%;
    margin-bottom: 20%;
    height: 350px;
}

.underline {
    text-decoration: underline;
}

.dorink_sweets_box {
    width: 90%;
    margin: 0 auto;
    border: 1px solid #333;
    padding-bottom: 10%;
    margin-bottom: 20%;
}

.dorink_foods_box {
    width: 90%;
    margin: 0 auto;
    border: 1px solid #333;
    padding-bottom: 10%;
    margin-bottom: 20%;
}

.dorinkMenu dl dt {
    width: 55%;
    float: left;
    padding-left: 10%;
}

.money {
    width: 29%;
    float: right;


}

.sab_text {
    font-size: 11px;
}

.sweetP {
    width: 70%;
    clear: both;
    margin: 0 10%;
    font-size: 11px;
}

.dorink_img_main img {
    width: 100%;
}

.dorink_teacocoa_box {}

dl {
    line-height: 2;
}

.dorinkMenu h2 {
    width: 100%;
    padding-top: 20px;
    margin: 0 auto;
    line-height: .5;
    margin-bottom: 30px;
    /*box-shadow: 0px -6px 5px -5px  #8d0505 inset,0px 8px 4px -8px  #FFC0CB;*/
}

.dorinkMenu hr {
    width: 140px;
    background-color: crimson;
    border: none;
    height: 5px;

}

/*CAFE MENU*/
/*CONTACT*/

.tel {
    font-size: 25px;
    color: black;
}

.telbox {
    text-align: center;
}

input[type="text"] {
    width: 100%;
    padding: 10px 0;
    margin-bottom: 20px;
}

input[type="email"] {
    width: 100%;
    padding: 10px 0;
    margin-bottom: 20px;
}

input[type="subject"] {
    width: 100%;
    padding: 10px 0;
    margin-bottom: 20px;
}

textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 20px;
}

.button {
    display: block;
    border-radius: 5%;
    /* 角丸       */
    font-size: 12pt;
    /* 文字サイズ */
    text-align: center;
    /* 文字位置   */
    cursor: pointer;
    /* カーソル   */
    padding: 12px 12px;
    /* 余白       */
    background: #41210c;
    /* 背景色     */
    color: #ffffff;
    /* 文字色     */
    line-height: 1.3em;
    /* 1行の高さ  */
    transition: .3s;
    /* なめらか変化 */
    box-shadow: 2px 2px 7px #666666;
    /* 影の設定 */
    width: 100%;
}

.button:hover {
    box-shadow: none;
    /* カーソル時の影消去 */
    opacity: 1;
    /* カーソル時透明度 */
}

.form_button_box {
    text-align: center;
}

.heroContact {
    height: 40vh;
    background-size: cover;
    background-position: center center;
    background-image: url(../img/contacttop.jpg);
}

.contact_form_h1 h1 {
    margin-bottom: 50px;
    text-align: center;
    font-size: 20px;
    padding-top: 50px
}

.contact_form_p {
    margin-bottom: 20px;
}

.form-horizontal dt {
    float: none;

}

.form-horizontal dd {
    float: none;
    text-align: center;
}

.form-horizontal span {
    color: brown;
}

form {
    margin-bottom: 50px;
}

/*CONTACT*/


/*WEB SHOP*/


.heroWebshop {
    height: 40vh;
    background-size: cover;
    background-position: center center;
    background-image: url(../img/webshoptop.jpg);
}


.topbox {
    justify-content: center;
    margin-top: 50px;
}

.cost {
    width: 90%;
    margin: 40px auto 0;
    text-align: left;
    padding: 1% 5%;
}

.costpic {
    text-align: center;
}

.gift {
    width: 90%;
    margin: 20px auto 0;
    text-align: left;
    padding: 1% 5%;
}

.giftpic {
    text-align: center;
}

.paypay {
    width: 90%;
    margin: 20px auto 40px;
    text-align: left;
    padding: 1% 5%;
}

.paypaypic {
    text-align: center;
}

.beanstype {
    margin-top: 80px;
    margin-bottom: 40px;
}

.beansmenu {
    width: 100%;
    margin-bottom: 50px;
}

.beansmenu1 img {
    width: 48%;
    float: left;
    margin: 0 auto;
    text-align: center;
}

.beansmenu2 img {
    width: 48%;
    float: right;
    text-align: center;
    margin: 0 auto;
}

.applicationbox {
    width: 100%;
    margin: 0 auto 100px;
}

.mainform {
    width: 49%;
    float: left;
}

.mainbottom {
    margin: 0 auto;
    width: 49%;
    text-align: center;
    float: right;
    border: solid 1px #41210c;
    background: #41210c;
    font-weight: bold;
}

.mainbottom a {
    padding: 5px 0;
    display: block;
    width: 100%;
    color: aliceblue;
    transition-duration: .5s;

}

.mainbottom a:hover {
    background: #f8f8f8;
    color: #41210c;
}

.baseform {
    width: 49%;
    float: left;
}

.basebottom {
    margin: 0 auto;
    width: 49%;
    text-align: center;
    float: right;
    border: solid 1px #41210c;
    background: #41210c;
    font-weight: bold;

}

.basebottom a {
    padding: 5px 0;
    display: block;
    width: 100%;
    color: aliceblue;
    transition-duration: .5s;


}

.basebottom a:hover {
    background: #f8f8f8;
    color: #41210c;
}

/*WEB SHOP*/

@media screen and (min-width:769px) {
    hr {
        width: 70%;
        margin-bottom: 50px;
    }

    .heroAbout {
        height: 70vh;
    }

    /*cafemenu*/
    .heroCafe {
        height: 70vh;
    }

    /*cafemenu*/
    /*NEWS&EVENTS*/
    .heroNews {
        height: 70vh;
    }

    .selectBox__event,
    .selectBox__news {
        display: none;
    }

    .pc__selectBox__news {
        display: block;
        text-align: center;
        width: 80%;
        margin: 0 auto;
        background-color: #41210c;

    }

    .pc__selectBox__news a {
        color: #ededed;
        text-decoration: none;
        display: block;
        padding: 10px 20px;
        border: solid 1.5px #727272;
        margin: 20px 0 45px 0;
        font-weight: bold;
    }

    .pc__selectBox__news a:hover {
        background-color: #fff;
        color: #41210c;

    }

    .pc__selectBox__event {
        text-align: center;
        display: block;
        width: 80%;
        margin: 0 auto;
        background-color: #41210c;
    }

    .pc__selectBox__event a {
        color: #ededed;
        text-decoration: none;
        display: block;
        padding: 10px 20px;
        border: solid 1.5px #727272;
        margin: 20px 0 45px 0;
        font-weight: bold;
    }

    .pc__selectBox__event a:hover {
        background-color: #fff;
        color: #41210c;

    }

    .subTitle {
        text-align: center;
    }

    .newsBox1 {
        width: 48%;
        float: left;
    }

    .newsBox2 {
        width: 48%;
        float: right;
    }

    .newsBox3 {
        width: 48%;
        float: left;
        padding-bottom: 150px;

    }

    .newsBox4 {
        width: 48%;
        float: right;

    }



    .newsBox1__img {
        height: 30vh;
    }

    .newsBox2__img {
        height: 30vh;
    }

    .newsBox3__img {
        height: 30vh;
    }

    .newsBox4__img {
        height: 30vh;
    }

    /*NEWS&EVENTS*/
    /*NEWSdetail*/

    .detail__news__1 {
        text-align: center;
        margin: 0 auto;
        width: 80%;
    }

    .detail__event__1 {
        margin: 0 auto;
        width: 80%;
    }

    /*NEWSdetail*/


    /*WEB SHOP*/
    .heroWebshop {
        height: 70vh;
    }

    .applicationbox {
        width: 80%;
        margin: 0 auto;
    }

    .heroContact {
        height: 70vh;

    }

    .heroCoffee {
        height: 70vh;

    }
}


@media screen and (min-width:960px) {
    main {
        padding: 0 30px 0 30px;
    }

    header {
        width: 95%;
        padding: 0 35px;
    }

    .clearfix:after {
        content: "";
        display: block;
        clear: both;
    }

    .slider__1 {
        background-position: center center;
    }

    .slider__3 {
        background-size: cover;
    }

    .gnav {
        display: none;
    }

    .pcNav {
        display: block;
    }

    .pcNav__menu {
        padding-top: 5px;
        justify-content: flex-end;
        display: flex;
    }

    .pcNav__menu__item a {
        display: block;
        padding: 25px 0;
        font-size: 15px;
        margin: 0 8px;
        letter-spacing: 2px;
        text-decoration: none;
        list-style: none;
        color: #727272;
        transition: .3s;
    }

    .pcNav__menu__item a .navColor {
        color: #df0009;
    }


    .pcNav__menu__item a:hover {
        color: #df0009;
    }

    .beansBox h2 {
        font-size: 20px;
    }

    .menu {
        display: none;
    }

    .logo {
        float: left;
    }

    #page_top {
        bottom: 0px;
    }


    .eventImg {
        background-image: url(../img/IMG_0850.jpg);
        background-size: cover;
        background-position: center center;
        height: 100px;
    }

    .topDl dl {
        padding: 0 0 0 30px;
        margin-top: 50px;
    }

    .topDl dt {
        padding-bottom: 20px;
        float: left;
        clear: both;
    }

    .topDl dd {
        padding-bottom: 20px;
        padding-left: 150px;
    }

    .hausuRogo img {
        width: 80px;

    }

    .hausuRogo {
        text-align: center;
        margin-bottom: 30px;
    }

    .contentBox {
        margin: 0 20%;

    }

    .footer_map {
        width: 700px;
        margin-bottom: 50px;
    }

    .logoAicon img {
        padding-top: 20px;
    }

    .footer_map img {
        width: 700px;
        padding-top: 50px;
        margin-bottom: 50px;
    }

    .footer_map {
        width: 700px;
    }

    .footer_box_privacy {
        padding-top: 20px;
    }

    .footerSpan {
        font-size: 16px;
    }

    .footer_text_p p {
        font-size: 18px;
    }

    /*ABOUT US*/
    .heroAbout {
        height: 80vh;
        background-position: center 28%;
    }

    .about_box {
        margin: 0 15%;
        padding: 0;

    }

    .acout_text_p {
        width: 60%;
        margin: 0 auto;
        margin-bottom: 10%;


    }

    .aboutus_img {
        text-align: center;
    }

    .aboutus_img img {
        width: 100%;


    }

    .hausu_about_rogo img {
        width: 80px;
    }

    .hausu_about_rogo {
        text-align: center;
        margin-bottom: 30px;
        padding-top: 30px;
    }

    /*ABOUT US*/
    /*NEWS&EVENTS*/
    .heroNews {
        height: 80vh;
    }

    .newsContent {
        margin: 0 auto;
    }

    .newsBox1 {
        margin: 0 5% 0 10%;
        width: 35%;

    }

    .newsBox2 {
        margin: 0 10% 0 5%;
        width: 35%;
        float: left;
    }

    .newsBox3 {
        margin: 0 5% 0 10%;
        width: 35%;
    }

    .newsBox4 {
        margin: 0 10% 0 5%;
        float: left;
        width: 35%;
    }

    /*NEWS&EVENTS*/
    /*NEWSdetail*/

    .detail__news__1 {
        margin: 0 auto;
        width: 650px;
    }

    .detail__event__1 {
        margin: 0 auto;
        margin-bottom: 80px;
        width: 650px;
    }

    /*NEWSdetail*/


    /* BEANS*/
    .heroCoffee {
        height: 80vh;
    }

    .beansMenu2 {
        padding-left: 60px;
    }

    .beansBox {
        display: flex;
        width: 60%;
        margin: 0 auto;
    }

    .more {
        margin-bottom: 50px;
    }

    .beansText p {
        width: 90%;
        margin: 0 auto;

    }

    .dorink_BLEND_box h2 {
        font-size: 20px;
    }

    /* BEANS*/

    /*CAFE MENU*/
    .heroCafe {
        height: 80vh;
    }

    .coffeeMenu {
        width: 23%;
        float: left;
        margin: 0 1%;
    }

    .menuImg {
        text-align: center;
    }

    .menuImg img {
        width: 100%;

    }

    .otherMenu {
        width: 23%;
        float: left;
        margin: 0 1%;
    }

    .sweetMenu {
        width: 23%;
        float: left;
        margin-top: 0;
        margin: 0 1%;
    }

    .foodMenu {
        width: 23%;
        float: left;
        margin-top: 0;
        margin: 0 1%;
    }

    .dorink_BLEND_box h2 {
        letter-spacing: 2.5px;
        font-size: 25px;
        text-align: center;
    }

    .dorink_BLEND_box {
        width: 60%;
        margin: 0 auto;
    }

    .blend_coffee_box {

        margin: 0 auto;
        margin-bottom: 20%;
    }


    .dorink_BLEND_box dt {
        font-size: 14px;
        line-height: 1.7;
    }

    .dorink_BLEND_box dd {
        padding-left: 10%;
        font-size: 14px;
        line-height: 1.7;

    }

    .dorink_img_main img {
        margin-bottom: 10%
    }

    .dorink_flex_box {
        display: flex;
    }

    .dorink_flex_box2 {
        display: flex;
        justify-content: center;

    }

    .dorink_other_box {
        width: 30%;
        margin: 0 auto;
        border: 1px solid #333;
        padding-bottom: 2%;
        margin-bottom: 10%;
        height: auto;

    }

    .dorink_tea_box {
        width: 30%;
        margin: 0 auto;
        margin-bottom: 10%;
        border: 1px solid #333;
        padding-bottom: 0%;
        height: auto;
    }

    .dorink_soft_box {
        width: 30%;
        margin: 0 auto;
        margin-bottom: 10%;
        border: 1px solid #333;
        padding-bottom: 0%;
        height: auto;
    }

    .dorink_sweets_box {
        width: 30%;
        margin: 0 2% 0 auto;
        border: 1px solid #333;
        padding-bottom: 2%;
        margin-bottom: 10%;
        height: auto;

    }

    .dorink_foods_box {
        width: 30%;
        margin: 0 auto 0 2%;
        border: 1px solid #333;
        padding-bottom: 2%;
        margin-bottom: 10%;
        height: auto;

    }

    .dorink_other_box dl dt {
        width: 55%;
        float: left;
        padding-left: 10%;
    }

    .dorink_other_box dl dd {
        width: 29%;
        float: right;


    }

    .menu_hr {
        width: 40% color: #de0404;
        line-height:
    }

    .dorink_img_main img {
        width: 100%;
    }

    .dorinkMenu h2 {
        width: 100%;
        padding-top: 40px;
        margin: 0 auto;
        line-height: .5;
        margin-bottom: 30px;
    }

    /*CAFE MENU*/
    /*CONTACT*/

    .contact_main {
        margin: 0 auto;
    }

    input[type="text"] {
        padding: 10px 0;
        margin-bottom: 20px;
    }

    input[type="email"] {
        padding: 10px 0;
        margin-bottom: 20px;
    }

    input[type="subject"] {
        padding: 10px 0;
        margin-bottom: 20px;
    }

    textarea {
        height: 50px;
        margin-bottom: 20px;
    }

    .form_button_box {
        margin: 0 auto;
    }

    button {
        padding: 10px 0;
        margin-bottom: 20px;
    }


    .heroContact {
        height: 80vh;

    }

    .contact_form_h1 h1 {
        margin-bottom: 10px;
        text-align: center;
        font-size: 20px;
        padding-top: 50px
    }

    .contact_main dl {
        width: 500px;
        margin: 0 auto;
    }

    .contact_form_p {
        margin-bottom: 20px;
        text-align: center;
    }

    .form-horizontal dt {
        float: none;

    }

    .form-horizontal dd {
        float: none;
        text-align: left;
    }

    .form-horizontal span {
        color: brown;
    }



    /*CONTACT*/

    /*WEB SHOP*/
    .heroWebshop {
        height: 80vh;
    }

    .bottombox {
        margin-top: 90px;
    }

    .guide {
        margin-bottom: 30px;
        text-align: center;
    }

    .topbox {
        display: flex;
        justify-content: center;
        margin-bottom: 100px;
        margin-top: 100px;
    }

    .cost {
        width: 28%;
        margin: 0 0 0 2%;
        padding-left: 2%;
        padding-right: 1%;
    }

    .gift {
        width: 18%;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        margin: 0 1%;
        padding-left: 3%;
        padding-right: 3%;

    }

    .paypay {
        width: 18%;
        margin: 0 2% 0 0;
        padding-left: 2%;
        padding-right: 1%;
    }

    .beansmenu {
        width: 75%;
        margin: 0 auto 50px;
    }

    .giftpic {
        margin: 28px 0 50px;
    }

    .beansmenu1 img {
        width: 45%;
        margin: 0 auto;
    }

    .beansmenu2 img {
        width: 45%;
        margin: 0 auto;
    }

    .applicationbox {
        width: 60%;
        margin: 0 auto;

    }

    .costpic {
        margin: 20px 0 50px;
    }

    .webshopText {
        margin-bottom: 150px;
    }

    /*WEB SHOP*/
}