@charset "utf-8";
/* ===================================================================
//CSS information

// file name  :  common.css
// style info :  スタイル指定
=================================================================== */
.bg_page {
    width: 100%;
    margin: 0;
}
.bg_page_g {
    background-color: #FFFCF1;
    width: 100%;
    margin: 0;
}
.bg_page_s {
    background-color: #FFF3EB;
    width: 100%;
    margin: 0;
    padding-bottom: 30px;
}
.bg_page_h {
    background-color: #F3FFEA;
    width: 100%;
    margin: 0;
    padding-bottom: 30px;
}
.bg_page_inner {
    padding: 6vw;
    max-width: 1000px;
    margin: 0 auto;
}
/* kitchen
--------------------------------------------------------------------------------*/
#page_kitchen h1{
    line-height: 1.1em;
    font-size: 50px;
    color: #6DCAF9;
}
ul.kitchen_about {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 1fr;
    grid-gap: 3em;
    padding: 0;
    margin: 60px 0;
    list-style: none;
}
ul.kitchen_about li{
    list-style: none;
}
#kitchen_about ul > li {
    padding: 0;
    list-style: none;
}
li.kitchen_abour_r{
    position: relative;
    height: 400px;
    width: auto;
}
.kitchen01 img{
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.kitchen02 img{
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 200px;
    height: auto;
}
/* CAFE
--------------------------------------------------------------------------------*/
.bg_page_drink_inner{
    margin-top: 80px;
}
.bg_page_insta_inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 3vw 6vw;
}
#cafe_about h1{
    font-size: 50px;
    color: #FCD25B;
}
#cafe_about p{
    margin: 0;
    padding: 0;
}
#cafe_about ul{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 1fr;
    grid-gap: 3em;
    padding: 0;
    margin: 60px 0;
}
#cafe_about ul > li {
    padding: 0;
    list-style: none;
}
li.cafe_abour_r{
    position: relative;
    height: 400px;
    width: auto;
}
.cafe01 img{
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.cafe02 img{
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 200px;
    height: auto;
}
.bg_page_inner h2,.bg_page_insta_inner h2{
    text-align: left;
}
.bg_page_inner h2 i,.bg_page_insta_inner h2 i{
    color: #FCD25B;
    margin-right: 10px;
}
.bg_page_inner h3{
    text-align: center;
    font-size: 14px;
    line-height: 1.75em;
    color: #333;
    margin: 10px 0;
}
ul.menu_inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 220px));
    grid-auto-rows: 1fr;
    grid-gap: 2.5em;
    padding: 0;
    margin: 30px 0 0;
}
ul.menu_inner > li {
    overflow: auto;
    min-width: 0;
    padding: 0;
}
.menu_img{
    position: relative;
}
.menu_online{
    position: absolute;
    background-color: #FCD25B;
    padding: 5px 10px;
    top: 0;
    right: 0;
}
.menu_img img{
    width: 100%;
    height: 200px;
    object-fit: cover;
}
#menu .txtbox p{
    font-size: 13px;
    line-height: 1.8em;
    text-align: justify;
}
.price{
    background-color: #FCD25B;
    margin: 0 auto;
    padding: 0 10px;
    display: table;
}
.price p{
    margin: 0;
}
ul.icon_select{
    display: table;
    margin: 0 auto;
    padding: 0;
}
ul.icon_select li{
    display: table-cell;
    list-style: none;
    padding: 0 5px;
}
.food_title{
    position: relative;
    width: 100%;
}
.food_title ul{
    position: absolute;
    display: table;
    right: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
}
.food_title ul li{
    display: inline-flex;
    list-style: none;
}
.food_title ul li:first-child{
    margin-right: 10px;
}

/****ドリンク*****/
.bg_page_drink_inner::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    top: -65px;
    left: 0;
    background: url(../static/assets/images/line_bg.png) center center no-repeat;
    background-size: 990px 2px;
}
ul.drink_inner{
    padding: 0;
    margin: 30px 0;
}
ul.drink_inner li {
    padding: 0;
    list-style: none;
    border-bottom: 1px doted #333;
}
.drink_box{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 200px));
    grid-auto-rows: 1fr;
    grid-gap: 0.8em;
}
.drink_box > p {
    overflow: auto;
    min-width: 0;
    margin: 5px;
}

.drink_title{
    width: 300px;
}
.drink_inner .price{
   display: unset;
    padding: 5px;
}
.drink_inner p span{
    font-size: 14px;
    display: inline-block;
}
/****インスタ*****/
.drink_inner::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: -65px;
    left: 0;
    background: url(../static/assets/images/line_bg.png) center center no-repeat;
    background-size: 990px 2px;
}
.cafe_insta{
    position: relative;
}
ul.cafe_insta_inner{
    padding: 0;
}
.cafe_insta .follwme {
    position: absolute;
    right: 80px;
    bottom: 0;
}
.slider_wrap{
    margin-bottom: 100px;
}
.txtbox p{
    font-size: 14px;
    line-height: 1.5em;
}
@media screen and (max-width: 1024px) {
    ul.menu_inner {
        grid-template-columns: repeat(auto-fit, minmax(200px, 269px));
    }
}

@media screen and (max-width: 1007px) {
    ul.menu_inner{
        grid-gap: 2em;
    }
}
@media screen and (max-width: 981px) {
    ul.menu_inner {
        grid-template-columns: repeat(auto-fit, minmax(200px,auto));
    }
}
@media screen and (max-width: 768px) {
    .food_title ul li {
        display: inline-flex;
        list-style: none;
        font-size: 12px;
    }
}
@media screen and (max-width: 736px) {
    #cafe_about ul{
        margin: 30px 0;
        grid-auto-rows:inherit;
    }
}
@media screen and (max-width: 768px) {
    .bg_page_inner {
        padding: 6vw 8vw 3vw 6vw;
        max-width: 1000px;
        margin: 0 auto;
    }
    .bg_page_insta_inner{
        padding: 6vw;
    }
}
@media screen and (max-width: 414px) {
    .pageheadimg img {
        height: 120px;
    }
    #cafe_about ul {
        margin: 10px 0;
    }
    #cafe_about ul{
        grid-gap: 1em;
    }
    #cafe_about .bg_page_inner{
        padding:6vw 6vw 15vw 6vw;
    }
    li.cafe_abour_r {
        height: 250px;
    }
    ul.menu_inner {
        grid-template-columns: repeat(auto-fit, minmax(120px, 46%));
    }
    .menu_img img {
        height: 120px;
    }
    ul.menu_inner{
        grid-gap: 1.5em;
    }
    .slider img{
        height: 100%;
    }
    .txtbox p {
        font-size: 14px;
        line-height: 1.5em;
    }
    .food_title ul{
        position: inherit;
    }
    .drink_box{
        grid-template-columns: repeat(auto-fit, minmax(80%,20%));
    }
    .bg_page_drink_inner::after {
        top: -40px;
    }
    .drink_inner::after{
        bottom: -40px;
    }
}
@media screen and (max-width: 375px){
.drink_box {
    grid-template-columns: repeat(auto-fit, minmax(80% , 20%));
    grid-auto-rows: inherit;
    grid-gap: 0;
    }
    .drink_title{
        width: inherit;
    }
}
@media screen and (max-width: 375px){
    #cafe_about ul {
        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    }
    .pageheadimg img {
        height: 100px;
    }
    #cafe_about h1 {
        font-size: 40px;
    }
    ul.menu_inner {
        grid-template-columns: repeat(auto-fit, minmax(100%,100%));
    }
    .menu_img img {
        height: 160px;
    }
    #cafe_insta .slider_wrap{
        margin: 0;
    }
    p {
        font-size: 14px;
        line-height: 2em;
    }
}
/* SPACE
--------------------------------------------------------------------------------*/
#page_space h1{
    line-height: 1.1em;
    font-size: 50px;
    color: #F3B3CF;
}
ul.space_about {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 1fr;
    grid-gap: 3em;
    padding: 0;
    margin: 60px 0;
    list-style: none;
}
ul.space_about li{
    list-style: none;
}
.space_g{
    display: table;
    width: 100%;
}
.space_g img{
    width: 250px;
    height: 250px;
    object-fit: cover;
}
.space_g li{
    display: table-cell;
    
}
#space_about ul > li {
    padding: 0;
    list-style: none;
}
li.space_abour_r{
    position: relative;
    height: 400px;
    width: auto;
}
.space01 img{
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.space02 img{
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 200px;
    height: auto;
}
.asobu{
    margin: 60px auto;
}
.asobu p{
    max-width: 700px;
    margin: 0 auto;
}
/**スライダー**/
.asobu_noslide{
    width: 700px !important;
    border: 1px solid #F3B3CF;
    border-radius: 15px;
    padding: 0px 20px;
}
.asobu_noslide p{
    text-align: center;
    font-size: 15px;
}
.asobu_slide{
    width: 700px;
    border: 1px solid #F3B3CF;
    border-radius: 15px;
    padding: 30px;
}
.asobu_slide h3{
    font-size: 25px;
}
.asobu_slide h3 span{
    background-color: #F3B3CF;
    padding: 5px 10px;
    margin-right: 10px;
    font-size: 20px;
}
.asobu_slide img{
    width: 100%;
    height: 450px;
    object-fit: cover;
}
.asobu_slide ul{
    display: table;
    margin: 0;
    list-style: none;
    padding: 0;
}
.asobu_slide ul span{
    background-color: #F3B3CF;
    padding: 3px 5px;
    width: 70px;
    display: inline-block;
    margin-right: 15px;
    text-align: center;
}
.asobu_slide ul li{
    margin: 20px 0;
}

#asobu_slick .slick-slide {
  transition: .3s ease;
  transform: scale(.85);
}
#asobu_slick .slick-current {
  transform: scale(1);
}
#asobu_slick .slick-slide:not(.slick-current) {
  opacity: .5;
}
@media screen and (max-width: 768px) {
    .asobu_slide {
        width: 500px;
    }
    #space_about .bg_page_inner {
        padding: 6vw 8vw 8vw 6vw;
    }
}
@media screen and (max-width: 414px) {
    #space_about .bg_page_inner {
    padding: 10vw 6vw 15vw 6vw;
    }
    #space_about ul.space_about {
        margin: 20px 0;
        grid-gap: 0;
    }
    li.space_abour_r {
        height: 250px;
    }
    #space_about ul.space_about{
        grid-auto-rows: 260px;
    }
    #gallery h1{
        font-size: 40px;
        margin: 20px;
    }
    #page_space h1 {
        font-size: 40px;
    }
    .asobu {
        margin: 30px auto;
    }
    .asobu_slide {
        width: 250px;
    }
    .asobu_slide img {
        height: 250px;
    }
    .asobu_slide{
        padding: 5px 15px;
    }
    .asobu_slide h3 {
        font-size: 18px;
        line-height: 2em;
    }
    .asobu_slide h3 span {
        padding: 0 10px;
        margin: 0 auto;
        font-size: 15px;
        display: table;
        text-align: center;
    }
    .asobu_slide ul span{
        padding: 0 5px;
    }
}
@media screen and (max-width: 375px) {
    #page_space h1 {
        font-size: 30px;
    }
    #space_about p{
        margin: 0;
    }
    #space_about ul.space_about {
        grid-auto-rows: 230px;
    }
    .full-screen-o .slick-list {
        margin: 0 auto 30px;
    }
    .asobu_slide ul li {
        font-size: 14px;
    }
}
@media screen and (max-width: 320px) {
    .bg_page_inner {
        padding: 6vw 3vw;
    }
    ul.space_about{
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    #s_gallery .bg_page_inner {
        padding: 10vw 3vw;
    }
    #s_gallery .full-screen-o img {
        height: 200px; 
    }
    #s_gallery .full-screen-o .slick-list {
        margin: 0 auto 20px;
    }
    #asobu .bg_page_inner {
        padding: 10vw 6vw;
    }
    .asobu {
        margin: 20px auto;
    }
}
/* HOME
--------------------------------------------------------------------------------*/
#page_home h1{
    line-height: 1.1em;
    font-size: 50px;
    color: #87C796;
}
.home_about p{
    margin: 0;
}
ul.home_about {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 1fr;
    grid-gap: 3em;
    padding: 0;
    margin: 60px 0;
    list-style: none;
}
ul.home_about li{
    list-style: none;
}
#home_about ul > li {
    padding: 0;
    list-style: none;
}
li.home_abour_r{
    position: relative;
    height: 400px;
    width: auto;
}
.home01 img{
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.home02 img{
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 200px;
    height: auto;
}
.home_service {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  padding: 0;
  margin: 0;
    list-style: none;
}
.home_service > li {
  overflow: auto;
  min-width: 0;
  padding: 0;
}
.home_service li ul{
    display: table;
    padding: 0;
}
.home_service li ul li{
    display: inline-table;
}
.home_service ul li span{
    background-color: #ADDBB3;
    padding: 0 10px;
    display: block;
    width: 100px;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 20px;
}
.home_move{
    border: 1px solid #87C796;
    padding: 0 30px;
    display: table;
    margin: 0 auto;
}
.sliderArea {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 25px;
}
.full-screen-o .slick-list {
    overflow: visible;
    max-width: 300px;
    margin: 0 auto 60px;
}
.full-screen-o img{
    width: 100%;
    height: 300px;
    object-fit: cover;
}
@media screen and (max-width: 768px) {
    #home_about .bg_page_inner {
        padding: 6vw 8vw 8vw 6vw;
    }
}
@media screen and (max-width: 414px) {
    #home_about .bg_page_inner {
    padding: 6vw 6vw 15vw 6vw;
    }
    #home_about .home_about {
        margin: 20px 0;
    }
    li.home_abour_r {
        height: 250px;
    }
    #home_about ul.home_about{
        grid-auto-rows: 300px;
    }
    #gallery h1{
        font-size: 40px;
        margin: 20px;
    }
    .home_move{
        padding: 5px 10px;
    }
    .home_move p{
        margin: 0;
    }
}
@media screen and (max-width: 375px){
    .home_service{
        grid-template-columns: repeat(auto-fit, minmax(50%, 100%));
    }
    .home_service ul li span{
        margin-bottom: 5px;
    }
    #home_about ul > li{
        margin-bottom: 5px;
    }
    #home_about .bg_page_inner {
        padding: 6vw;
    }
    #home_about ul {
        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    }
}