@charset 'UTF-8';
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    list-style: none;

}
h1, h2, h3, h4, h5, h6{
    font-weight: normal;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section {
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
}
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align: middle;
}
img{
    max-width: 100%;
}
/* VARS */
:root {
    --main-color: #006a9a;
    --sub-color: #2982aa;
    --key-color: #ea5404;
    --link-color: #004eff;
    --w3-font: "ヒラギノ角ゴ Pro W3", "HiraKakuProN-W3";
    --w6-font:  "ヒラギノ角ゴ Pro W6", "HiraKakuProN-W6";
}
/* PARTS
/////////////////////////////////////////////*/
.cf:before, .cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.cf {
    zoom:1;
}
.grid {
    *zoom:1;
}
.grid > *{
    float: left;
    box-sizing: border-box;

}
.grid > * img{
    vertical-align: bottom;

}
.grid:after, .grid:before {
    content: "";
    display: table;
    clear: both;

}
.grid .grid__col-01 {
    width: 4.16666666667%;

}
.grid .grid__col-02 {
    width: 8.33333333333%;

}
.grid .grid__col-03 {
    width:12.5%;

}
.grid .grid__col-04 {
    width: 16.6666666667%;

}
.grid .grid__col-05 {
    width: 20.8333333333%;

}
.grid .grid__col-06 {
    width: 25%;

}
.grid .grid__col-07 {
    width: 29.1666666667%;

}
.grid .grid__col-08 {
    width: 33.3333333333%;

}
.grid .grid__col-09 {
    width: 37.5%;

}
.grid .grid__col-10 {
    width: 41.6666666667%;

}
.grid .grid__col-11 {
    width: 45.8333333333%;

}
.grid .grid__col-12 {
    width: 50%;

}
.grid .grid__col-13 {
    width: 54.1666666667%;

}
.grid .grid__col-14 {
    width: 58.3333333333%;

}
.grid .grid__col-15 {
    width: 62.5%;

}
.grid .grid__col-16 {
    width: 66.6666666667%;

}
.grid .grid__col-17 {
    width: 70.8333333333%;

}
.grid .grid__col-18 {
    width: 75%;

}
.grid .grid__col-19 {
    width: 79.1666666667%;

}
.grid .grid__col-20 {
    width: 83.3333333333%;

}
.grid .grid__col-21 {
    width: 87.5%;

}
.grid .grid__col-22 {
    width: 91.6666666667%;

}
.grid .grid__col-23 {
    width: 95.8333333333%;

}
.grid .grid__col-24 {
    width: 100%;

}
.grid--gutter{
    margin-left: -6px;
    margin-right: -6px;
}
.grid--gutter > *{
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 12px;

}
.grid--gutter2{
    margin-left: -15px;
    margin-right: -15px;
}
.grid--gutter2 > *{
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 30px;

}
.pc-none{
    display: none;
}
.align-c{
    text-align: center;
}
.align-r{
    text-align: right;
}
.align-l{
    text-align: left;
}
.text-ll{
    font-size: 1.8rem;
}
.text-l{
    font-size: 1.6rem;
}
.text-m{
    font-size: 1.4rem;
}
.text-s{
    font-size: 1.2rem;
}
.anchor{
    padding-top: 70px;
    margin-top: -70px;
}
.mb08{ margin-bottom: 8px;}
.mb16{ margin-bottom: 16px;}
.mb24{ margin-bottom: 24px;}
.mb32{ margin-bottom: 32px;}
.mb40{ margin-bottom: 40px;}
.mb48{ margin-bottom: 48px;}
.mb56{ margin-bottom: 56px;}
.mb64{ margin-bottom: 64px;}
.mb72{ margin-bottom: 72px;}
.mb80{ margin-bottom: 80px;}
.mb88{ margin-bottom: 88px;}
.mb106{ margin-bottom: 106px;}
.mb114{ margin-bottom: 114px;}
.mb120{ margin-bottom: 120px;}
.btn-tp01 a{
    display: block;
    position: relative;
    padding: 6px 48px 6px 24px;
    font-size: 1.4rem;
    line-height: 1.5em;
    color: #FFF;
    background: #949494;
    text-align: center;
    box-sizing: border-box;
    behavior: url('/js/boxsizing.htc');
    -webkit-transition:background .3s ease;
    transition: background .3s ease;

}
.btn-tp01 a:hover{
    background: #555;
    text-decoration: none;

}
.btn-tp01.btn-tp01--blank a:after{
    position: absolute;
    content: "";
    top: 50%;
    right: 16px;
    width: 16px;
    height: 15px;
    margin-top: -8px;
    background: url(../img/blank3.png) center center no-repeat;
    background-size: 16px;

}

.btn-wrap {
    margin-top: 40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
            justify-content: center;
}

.btn-wrap > * {
    margin-right: 30px;
    margin-left: 30px;
}

.btn-blank a{
    display: inline-block;
    position: relative;
    font-size: 1.4rem;
    padding-right: 24px;

}

.btn-blank a:hover {
    text-decoration: underline !important;
}

.btn-blank a:after{
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 16px;
    height: 15px;
    margin-top: -8px;
    background: url(../img/blank2.png) center center no-repeat;
    background-size: 16px;
    content: "";

}
.no-backgroundsize .btn-tp01--blank a:after{
    background-image: url(../img/blank3_ie.png);

}
.no-backgroundsize .btn-blank a:after{
    background-image: url(../img/blank2_ie.png);

}
/* LAYOUT
///////////////////////////////////////////////////*/
/* base
---------------------------------------------------*/
html{
    font-size: 62.5%;
}
body{
    font-family: "Noto Sans JP","ヒラギノ角ゴ Pro W3", "HiraKakuProN-W3", "ヒラギノ角ゴ Pro W6", "HiraKakuProN-W6", "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
    font-size: 1.4rem;
    line-height: 2;
    color: #333;
    width: 100%;
}
body.no-scroll {
  position: fixed;
  overflow-x: scroll;
  overflow-y: scroll;
}
a{
    color: #000;
}
a:hover{
    text-decoration: underline;

}
img{
    max-width: 100%;
}
#wrapper{
    overflow: hidden;
    position: relative;
}
#header{
    visibility: hidden;
    position: relative;
    z-index: 100;
    width: 100%;
    background: #FFF;
    top: 10px;
}
#main{
    /*visibility: hidden;*/
    position: relative;
    background: #FFF;
    padding-bottom: 100px;
}
#mainContents{
    position: relative;
    z-index: 10;
    background: #FFF;
}
#footer{
    /*visibility: hidden;*/
    display: block;
    position: relative;
    z-index: 10;
    background: #FFF;
}
/* loading
---------------------------------------------------*/
.loading{
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFF;
}
.loading .loading__logo{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 360px;
    height: 50px;
    margin: -25px 0 0 -180px;

}
.loading .none{
    display: none;

}
#logo{
    display: none;
}
#logo path{
    stroke: #000;
    fill: none;
    stroke-width: 1;
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    -webkit-transition:all 1s ease;
    transition: all 1s ease;

}
@-webkit-keyframes logoAnime{
    0%{ stroke-dashoffset: 3000; fill: #FFF;}
    70%{ stroke-dashoffset: 2000; fill: #FFF;}
    100%{ stroke-dashoffset: 0; fill: #000;}
}
@keyframes logoAnime{
    0%{ stroke-dashoffset: 3000; fill: #FFF;}
    70%{ stroke-dashoffset: 2000; fill: #FFF;}
    100%{ stroke-dashoffset: 0; fill: #000;}
}
.start #logo{
    display: block;

}
.start #logo path{
    -webkit-animation: logoAnime 2s ease-in .6s forwards;
    animation: logoAnime 2s ease-in .6s forwards;

}
/* header
---------------------------------------------------*/
.hd .hd__inr{
    position: relative;
    padding: 48px 20px;
    margin: 0 auto;

}
.hd .hd__inr .hd__logo{
    width: 360px;
    height: 50px;
    margin: 0 auto;

}
.hd .hd__inr .hd__logo img{
    width: 100%;

}
/* main
---------------------------------------------------*/
.main-visual{
    overflow: hidden;
    position: relative;
    z-index: 10;
    width: 100%;
    height: 0;
    padding-top: calc(600 / 1440 * 100vw);
}
.main-visual .main-visual__img{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}
.main-visual .main-visual__img img{
    width: 100%;

}
.main-visual .filter{
    display: block;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0, .8);
    opacity: 0;

}
.main-cnts{

}
/* footer
---------------------------------------------------*/
.ft .ft__inr{
    text-align: center;
    padding: 24px 0 100px;
    border-top: 1px solid #CCC;

}
.ft .copyright{
    font-size: 12px;
    display: inline-block;
    margin: auto;
    color: rgba(0,0,0,.5);

}
.ft .copyright img{
    width: 100%;
    height: auto;

}
#pageTop{
    display: none;
    position: fixed;
    z-index: 10;
    width: 30px;
    height: 30px;
    bottom: 8px;
    right: 50px;
}
#pageTop img{
    width: 100%;
    height: auto;

}
/* main content
///////////////////////////////////////////////////*/
/* Section
---------------------------------------------------*/
.sec{
    max-width: 1000px;
    margin: 0 auto;
    padding: 72px 20px 72px;
}

.sec.pb0 {
    padding-bottom: 0;
}

.sentence{
    margin-bottom: 100px;

}
.sentence:last-child{
    margin-bottom: 0;

}
.sentence p{
    margin-bottom: 24px;

}
.sentence.sentence_width_560{
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;

}
.sentence.sentence_width_570{
    max-width: 570px;
    margin-left: auto;
    margin-right: auto;

}
.menu figure{
    border: 1px solid #e9eaed;
    margin-bottom: 16px;

}
.aside{
    position: relative;

}
.aside > *{
    white-space: nowrap;

}
.aside h4{
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;

}
.aside p{
    margin-bottom: 24px;

}
.aside p:last-child{
    margin-bottom: 0;

}
.aside .tel:hover{
    text-decoration: underline !important;
}

.aside dl {
    display: flex;
    width: 100%;
}

.aside .link {
    margin-top: 30px;
}

/* haedline
---------------------------------------------------*/
.headline-01{
    margin: 0 auto 56px;
    text-align: center;
    font-size: 15px;
    line-height: 1;
    max-width: 400px;
}

.heading-01 {
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 40px;
}

.social-area{
    overflow: hidden;
    margin: 0 -32px 100px;
}
.social-area h3{
    text-align: center;
    margin-bottom: 32px;

}
.social-area h3 img{
    width: 140px;

}
.social-area .social-area__item{
    float: left;
    width: 50%;
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;

}
.social-area .social-area__item > img{
    width: 100%;
    vertical-align: bottom;
}
.social-insta{
    margin: 0 -6px;
}
.social-insta li{
    float: left;
    width: 33.3333333333%;
    padding: 0 6px;
    margin-bottom: 12px;
    box-sizing: border-box;

}
.social-insta li a{
    display: block;
    position: relative;
    height: 0;
    padding-top: 100%;

}
.social-insta li img{
    position: absolute;
    width: auto;
    height: auto;
    left: 50%;
    top: 50%;
    max-width: 100%;
    max-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

}
.social-insta:after, .social-insta:before {
    content: "";
    display: table;
    clear: both;

}
#fbBx, .fb-page{
    width: 100%;
}


.logo-cafe {
    width: fit-content;
    margin: 0 auto 80px;
}

/* ///////////////////////////////////////////////////////////////////////
    max 1050px
///////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 1050px) {

#pageTop{
    right: 10px;
}

}
/* ///////////////////////////////////////////////////////////////////////
    max 768px
///////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 768px) {


/* PARTS
/////////////////////////////////////////////*/
.grid > *{
        float: none;
        width: auto !important;

    }

.pc-none{
    display: block;
}
.sp-none{
    display: none;
}


/* LAYOUT
///////////////////////////////////////////////////*/
/* loading
---------------------------------------------------*/
.loading .loading__logo{
        width: 290px;
        height: 40px;
        margin: -20px 0 0 -145px;

    }

/* header
---------------------------------------------------*/
.hd .hd__inr{
        position: relative;
        padding: 24px 10px;
        margin: 0 auto;

    }
.hd .hd__inr .hd__logo{
        position: relative;
        width: 46.875%;
        height: 0;
        padding-top: 6.51042%;

    }
.hd .hd__inr .hd__logo img{
        display: block;
        position: absolute;
        top: 0;
        left: 0;

    }


/* main content
///////////////////////////////////////////////////*/
/* main
---------------------------------------------------*/
.main-visual .main-visual__img{
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin-top: 0;

    }
.main-visual .filter{
        background: none;

    }

/* Section
---------------------------------------------------*/
.sec{
    padding: 48px 10px 48px;
}
.sec.sec--fill{
        margin-left: 0;
        margin-right: 0;

    }
.sentence{
    margin-bottom: 48px;
}
.sentence br{
        display: none;

    }

.sentence br.block{
        display: block;

    }

.social-insta{
    margin: 0 -8px;
}
.social-insta li{
        padding: 0 8px;
        margin-bottom: 16px;

    }

.social-area{
    margin: 0 -32px 48px;
}

.social-area .social-area__item{
        float: none;
        width: auto;
        padding-left: 32px;
        padding-right: 32px;
        margin-bottom: 32px;
        box-sizing: border-box;

    }

.social-area .social-area__item:last-child{
        margin-bottom: 0;

    }

/* haedline
---------------------------------------------------*/
.headline-01{
    margin: 0 auto 48px;
    text-align: center;
    font-size: 15px;
    line-height: 1;
}

.heading-01 {
    font-size: 24px;
}



/* btn
---------------------------------------------------*/
.btn-wrap {
    margin-top: 40px;
    display: block;
}

.btn-wrap > * {
    margin-right: 0;
    margin-left: 0;
}

.logo-cafe {
    margin-bottom: 40px;
}


}

.map-wrap iframe {
    width: 100%;
    height: 460px;
}

.menu {
    color: blue !important;
}

.menu a {
    color: blue !important;
}