/*
Theme Name:辻しば漬本舗カタログサイトテーマ
Template:hello-elementor
Version:2.4.1
Author: ヨキワークス
Author URI: https://joki-works.com
Description: Hello Elementor（子テーマ）
*/

/*以下にCSSを記述*/
body{
    display: flex !important;
    flex-wrap: wrap;
}
header{
    width:320px;
}
.site-header:not(.header-stacked) .header-inner .site-branding{
    max-width: 100% !important;
    
}
.site-header:not(.header-stacked) .header-inner{
    flex-direction: column;
}
main{
    width:calc(100% - 320px);
}
footer{
    display: none;
    width:100%;
}
.page-content{
    height: 100vh;
    overflow-y: scroll;
}
.cafe-menu-wrapper{
    padding:5%;
}
.set-menu-wrapper{
    padding:2%;
}
/* 縦画面 */
@media (orientation: portrait){
    header{
        width:100%;
        position: fixed !important;
        bottom: 0;
        left: 0;

    }
    main{
        width:100%;
    }
}
/* menu */
#site-header{
    height:97vh;
}
.site-header:not(.header-stacked) .header-inner .site-navigation{
    max-width: 96% !important;
    
}
.site-navigation ul{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.menu-default-container{
    height: 100%;
}
.menu-default-container ul{
    height: 100%;
}
.site-navigation li{
    width: 96%;
    margin: 2%;
    height:120px;
    font-size: 20px;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(10px 10px 10px rgba(255,255,255,0.6));
    box-shadow: 1px 3px 3px 1px rgba(0,0,0,0.3);


}
.site-navigation li a{
    color: #fff;
}
.site-navigation .menu01{
    background-color: #963bc7;

}
.site-navigation .menu02{
    background-color: #3bc778;

}
.site-navigation .menu03{
    background-color: #c79d3b;

}
.site-navigation .menu04{
    background-color: lightseagreen;
}
.site-navigation .menu05{
    background-color:mediumslateblue;
}
.site-navigation .bottom{
    background-color: #6a1f8a;
    margin-top: auto;

}
@media (orientation: portrait){
    header{
        background-color: #fff;
        box-shadow: 0 -8px 3px -3px rgba(0,0,0,0.3); /* 0 (-5px - 3px) 3px (-3px) #000000 */
    }
    .site-header:not(.header-stacked) .header-inner{
        flex-direction: row;
    }
    #site-header{
        height: 160px;
    }
    .header-inner{
        display: flex !important;
        
        margin: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .site-header:not(.header-stacked) .header-inner .site-navigation{
        max-width: 100% !important;
    }
    .site-branding{
        width: 30% !important;
    }
    .site-navigation{
        max-width: 100% !important;
    }
    .menu-default-container{
        width: 100%;
    }
    .site-navigation ul{
        flex-direction: row;
        width: 100%;
        justify-content: end;
    }
    .site-navigation li{
        width: 20%;
    }
    
}
/* Top */
.home #content{
    width:calc(100% - 330px);
    max-width: calc(100% - 330px);;
}
.home #site-header{
    background-color: rgba(255,255,255,0.6);
    height: 100vh;
}
#top-main .top-header{
    /* height: 10vh; */
}
#youtube-wrap {
	position: relative;
	width: 100%;
    /* aspect-ratio: 16 / 9; */
    height: 100vh;
}
@media (orientation: portrait){
    .home #content{
        width: 100%;
        max-width: 100%;;
    }
    #youtube-wrap{
        height: calc(100vh - 160px);
    }
}
/* cafe */
.page-id-22 .page-content ul,
.page-id-22 .page-content li{
    list-style: none;
    margin: 0;
    padding: 0;
}
.page-id-22 .page-content ul{
    display: flex;
    flex-wrap: wrap;
}
.page-id-22 .page-content li{
    display: flex;
    flex-wrap: wrap;
    width:32%;
    margin: 0.5%;
    transform: translateY(-3px);
  box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
  transition: all .5s;
}
.page-id-22 .page-content li figure{
    width: 100%;
    margin: 0;
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;

}
.page-id-22 .page-content li .cafe-menu-content{
    display: flex;
    flex-direction: column;
    width:100%;
    padding: 7px;
}
.page-id-22 .page-content li .cafe-menu-content h3{
    font-size: 1.5rem;
}
.page-id-22 .page-content li .cafe-menu-price{
    margin-top: auto;
    text-align: right;
    font-weight: bold;
}

/* set */
.page-id-56 .page-content ul,
.page-id-56 .page-content li{
    list-style: none;
    margin: 0;
    padding: 0;
}
.page-id-56 .page-content ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 50px;
    margin-bottom: 50px;
}
.page-id-56 .page-content li{
    display: flex;
    width:calc(50% - 12px);
    box-shadow: 1px 3px 3px 1px rgb(0 0 0 / 30%);
    margin-top: 18px;
    margin-left: 2px;
    margin-right: 10px;
}
.page-id-56 .page-content li figure{
    width: 30%;
}
.page-id-56 .page-content li .set-menu-content{
    display: flex;
    flex-direction: column;
    width:70%;
}
.page-id-56 .page-content li .set-menu-price{
    margin-top: auto;
    text-align: right;
}