@charset "UTF-8";
/* CSS Document */

/*-----------------------

共通項目

-----------------------*/
html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}
body {
    letter-spacing: 0.05em;
    font-feature-settings: "palt";
/*    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";*/
    font-size: 2rem;
    font-family: source-han-sans-japanese, sans-serif;
    font-style: normal;
	line-height: 1.6;
    font-style: normal;
    -webkit-appearance: none;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    font-feature-settings: "palt";
}
small{
    font-size: 1.2rem;
}
img{
    max-width: 100%;
}
div{
    box-sizing: border-box;
}
footer{
    padding: 40px 0 20px;
    text-align: center;
    color: #fff;
    background-color: #000;
}
footer p{
    font-size: 1.4rem;
}
footer a{
    margin: 0 30px 10px;
    display: inline-block;
}
.wrap{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px;
}
.block{
    padding: 100px 0;
}
.bold{
    font-weight: 700;
}
a{
    transition: .4s;
}
a:hover{
    opacity: .5;
}
.flex{
    display: flex;
}
.ttl-area{
    text-align: center;
    margin-bottom: 50px;
}
.btn-area{
    text-align: center;
    margin-top: 50px;
}
.btn-area img{
    margin-bottom: -30px;
}
.wrap .contents:not(:last-child){
    padding-bottom: 60px;
}
/************************
header
************************/
header{
    background: #000;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items:center;
    position: fixed;
    width: 100%;
    height: 103px;
}
.header-logo{
    width: 20%;
}
.burger-wrapper{
    width: 80%;
}
.header-right{
    display: flex;
    justify-content: flex-end;
}
.header-right li{
    margin-right: 40px;
    padding: 5px 0;
}
.header-right #cart{
    background-color: #fff;
    color: #000;
    border-radius: 10px;
    font-weight: bold;
    padding: 5px 15px
}
.header-right #cart::before{
    content: '';/*何も入れない*/
    display: inline-block;/*忘れずに！*/
    width: 30px;/*画像の幅*/
    height: 30px;/*画像の高さ*/
    background-image: url(../images/cart-icon.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}
#fv-area{
    padding-top: 100px;
}
/************************
net-area ネットで簡単注文！
************************/
#net-area, #order-form{
    background: url(../images/ord-bg.jpg) center top / cover no-repeat;
}
#net-area .flex{
    flex-wrap: wrap;
}
#net-area .item{
    background-color: #fff;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    width: 32%
}
#net-area .item img{
    margin-bottom: 10px;
}
#net-area .item:not(:nth-child(3n)){
    margin-right: 2%;
}
#net-area .item:last-child{
    width: 100%;
    margin-right: 0;
    margin-top: 20px;
    flex-direction: row;
    justify-content: space-between;
}
#net-area .item:last-child img{
    margin-bottom: 0;
}
#net-area .item:last-child .item-img{
    width: 60%;
    margin-bottom: 0;
}
#net-area .item:last-child .item-text{
    width: 36%;
}

#net-area .item h3{
    font-size: 2.8rem;
    font-weight: bold;
}
/************************
com-area 焼肉用お肉
************************/
#com-area{
    background: url(../images/comm-bg.jpg) center top / cover no-repeat;
}
#com-area .flex{
    flex-wrap: wrap;
}
#com-area .item{
    width: 32%;
    text-align: center;
}
#com-area .item:not(:nth-child(3n)){
    margin-right: 2%;
}
#com-area .item:nth-child(-n+3){
    margin-bottom: 20px;
}
#com-area h3{
    background-color: #fff;
    padding: 5px;
    font-weight: bold;
}
/************************
about 店舗情報
************************/
#about{
    background: url(../images/about-bg.jpg) center top / cover no-repeat;
    color: #fff;
}
#about .flex{
    justify-content: space-between;
    align-items: center;
}
#about .flex .item:first-child{
    margin-right: 30px;
}
#about h3{
    font-weight: bold;
    font-size: 2.8rem;
}
#about .bold{
    font-size: 2.8rem;
}
#about ul{
    padding: 20px 0;
}
/************************
ord　ご注文はこちら
************************/
#order-form .flex{
    flex-direction: column;
}
.table-row{
    display: flex;
    width: 100%;
}
.table-row p{
    padding: 5px 10px;
}
.table-row .table-th{
    width: 30%;
    background-color: #ab8080;
    border-bottom: solid 2px #fff;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}
.table-row .table-td{
    width: 70%;
    background-color: #fff;
    border-bottom: solid 2px #ab8080;
    padding: 15px;
}
.table-row:last-child .table-td{
    border-bottom: none;
}
.table-row:last-child .table-th{
    border-bottom: none;
}
input{
    background-color: #eaeaea;
    width: 80%;
    outline: none;
    padding: 5px;
}
.order-com .table-td{
    display: flex;
    flex-direction: column;
}
.order-com .table-td label{
    display: flex;
    align-items: center;
    justify-content:flex-start;
}
.order-com .table-td label input{
    width: 5%;
}
.order-com .table-td label span{
    width: 95%;
}

/************************
下層ページ
************************/
#under{
    padding-top: 103px;
}
#under .ttl-area{
    border-bottom: solid 2px #000;
    padding-bottom: 10px;
}
#under .contents{
    padding: 0 30px;
}
#under .contents-item{
    padding: 30px 0;
}
#under h2{
    font-size: 3rem;
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
#under h3{
    font-size: 1.8rem;
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    background-color: #eee;
    padding: 5px 20px;
    margin-bottom: 10px;
}
#under .contents-item ul {
    padding: 10px 0 0;
}
#under .contents-item ul li{
    list-style-type: circle;
    margin-left: 80px
}
.contents .table-area{
    border: solid 2px #ab8080;
}

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

}
@media screen and (max-width:1440px){

}
@media screen and (max-width:1300px){

    
}
@media screen and (max-width:1150px){

}
@media screen and (max-width:1024px){

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


}
@media screen and (max-width:479px){
    .pconly{
        display: none;
    }
    .wrap{
        padding: 0 20px;
    }
    .block{
        padding: 50px 0;
    }
    .flex{
        display: block;
    }
    .ttl-area{
        margin-bottom: 20px;
    }
    .btn-area{
        margin-top: 10px;
    }
    /************************
    ハンバーガーメニュー
    ************************/
    /* 以下、ハンバーガーボタン */
    .burger-btn{
      display: block;      
      width: 39px;      
      height: 39px;      
      position: relative;      
      z-index: 3;
      border:none;    
    }    
    .burger-btn span{      
      width: 20px;      
      height: 1px;        
      display: block;      
      position: absolute;      
      left: 50%;      
      transform: translateX(-50%);      
      background-color: #fff;    
    }    
    .burger-btn span:first-child{   
      top: 10px;
    }
    .burger-btn span:nth-child(2){    
      top: 50%;
      transform: translate(-50%,-50%);
    }
    .burger-btn span:last-child{
      bottom: 10px;
    }
    /* 以下、クリックした際の挙動 */
    .burger-btn.close span:first-child{      
        transform: translate(-50%,10px) rotate(45deg);
        transition: transform .3s;
    }    
    .burger-btn.close span:nth-child(2){      
        opacity: 0;
        transition: opacity .3s;
    }    
    .burger-btn.close span:last-child{      
        transform: translate(-50%,-8px) rotate(-45deg);
        transition: transform .3s;
    }
    /* 以下、クリックした際のメニューリスト */
    .burger-wrapper{
        visibility: hidden;
        opacity: 0;
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        transition: all .5s;
        z-index: 2;
    }
    .burger-list{
        width: 100%;
        height: 100%;
        background-color:#1B1310;
        z-index: 2;
    }
    .header-right{
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
    }
    /* メニューオープン時 */
    .burger-wrapper.fade {
        visibility: visible;
        opacity: 1;
    }
    header{
        height: 43px;
    }
    .header-right li{
        width: 100%;
        padding: 15px 0;
    }
    .header-right #cart{
        margin-top: 15px;
    }
    #fv-area{
        padding-top: 43px;
    }
    /************************
    net-area ネットで簡単注文！
    ************************/
    #net-area .item h3{
        font-size: 1.8rem;
    }
    #net-area .item{
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }
    #net-area .item:last-child{
        margin-bottom: 0;
    }
    #net-area .item:last-child{
        display: block;
    }
    #net-area .item:last-child .item-img{
        width: 100%;
    }
    #net-area .item:last-child .item-text{
        width: 100%;
    }
    /************************
    com-area 焼肉用お肉
    ************************/
    #com-area .item{
        width: 100%;
    }
    #com-area .item:nth-child(-n+3){
        margin-bottom: 0;
    }
    #com-area .item:not(:last-child){
        margin-bottom: 20px;
    }
    #com-area .item:not(:nth-child(3n)){
        margin-right: 0;
    }
    /************************
    about 店舗情報
    ************************/
    #about .bold {
        font-size: 2.3rem;
    }
    #about .flex .item:first-child{
        margin-right: 0;
    }
    /************************
    ord　ご注文はこちら
    ************************/
    .table-row {
        flex-direction: column;
    }
    .table-row .table-th{
        width: 100%;
    }
    .table-row .table-td{
        width: 100%;
        padding: 10px;
    }
    input{
        width: 100%
    }
    .order-com .table-td label input{
        margin-right: 5px;
    }
    /************************
    下層ページ
    ************************/
    #under{
        padding-top: 43px;
    }
    #under h2{
        font-size: 2.5rem;
    }
    #under .contents{
        padding: 0;
    }
    #under .contents-item{
        padding: 10px 0;
    }
    #under .contents-item ul{
        padding: 5px 0 0;
    }
    #under .contents-item ul li{
        margin-left: 20px;
    }
}
@media screen and (max-width:375px){

}
@media screen and (max-width:320px){

}