@charset "UTF-8";

/*------------------------------------------
  共通設定
------------------------------------------*/
li{list-style: none;}
a{text-decoration: none; color: #Fff;}
.m-0{margin: 0;}
.lineh-0{line-height: 100%;}
.p-50{padding: 50px 0;}



    /*　for PC　1024px*/
/*------------------------------------------
  初期設定
------------------------------------------*/
body {
    font-family: "メイリオ", Meiryo;
    font-size: 2rem;
    color: #fff;
    background:#000;
    width: 100vw;
    margin: 0 auto;
    min-height: 100vh;
    display: grid;
    scroll-behavior: smooth;
    text-align: center;
    overflow-x: hidden;
    grid-template:
    " header " auto
        " about " auto
        " menu " auto
        " tekeout " auto
        " ... " 120px
        " news " auto
        " ... " 120px
        " contact " auto
        " ... " 120px
        " access " auto
        " ... " 80px
        " footer " auto
        /  100vw  ;
}

.pc { display: block !important; }
.sp { display: none !important; }


/*------------------------------------------
  ヘッダー
------------------------------------------*/
header{
    grid-area: header;
    position: relative;
}

.slider{
    width: 100vw;
      margin:0 auto;
      position: relative;
}
.slider img {
width: 100vw;
}

.hamburger {
    display : none;
  }

nav{
    position: absolute;
    top: 0;
    right: 110px;
    font-size: 16px;
}

nav .menu_ber{
    display: flex;
    margin: 20px ;
    padding: 0;
}

nav .under_line{
    text-align: center;
    height: 20px;
    line-height: 15px;
    margin-right: 2px;
}

nav .li_img{
    height: 20px;
}
nav a{
    font-family:
        YuGothic,
        "游ゴシック",
        Hiragino Sans,
        "ヒラギノ角ゴシック",
        Hiragino Kaku Gothic ProN,
        "ヒラギノ角ゴ ProN W3",
        Roboto,
        "Droid Sans",
        Meiryo,
        "メイリオ",
        Verdana,
        "ＭＳ Ｐゴシック",
        sans-serif;
    padding: 10px;
    position: relative;
    display: inline-block;
}


a.nav_txt:after {
    content: '';
    position: absolute;
    left: 40%;
    bottom: 0px;/*線の上下位置*/
    display: inline-block;
    width: 20px;/*線の長さ*/
    height: 4px;/*線の太さ*/
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);/*位置調整*/
    background-color: #8C0202;/*線の色*/
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform .3s;
  }

  a.nav_txt:hover::after {
    transform: scale(1, 1);
  }
nav a.nav_img{
    margin: 0 0 0 15px;
    padding: 6px;
    vertical-align: center;
}
.header_title{
    position: absolute;
    top: 37%;
    left: 10%;
    text-align: left;
}

.header_title h1{
    position: relative;
    display: inline-block;
    line-height: 1.3;
}

.header_title h1::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 4px;
    background: #8C0202;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform .3s;
  }

.header_title h1:hover::after {
    transform: scale(1, 1);
  }

  .header_title h2{
    font-size: min(40px,2.5vw);
    
  }
  .header_title p{
    margin-top: 10%;
  }
.nav_image{
    position: absolute;
    top: 17px;
    right: 40px;
    display: flex;
}

.nav_image .li_img{
    display: inline-block;
    width: 20px;
    height: 20px;
}
.nav_image a{
    line-height: 20px;
}
.nav_image a img{
    width: 20px;
    height: 20px;
    margin: 10px;
}

.nav_image a img:hover{
    opacity: 0.7;
}

/* トップに戻る */
.go-top{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 60px; /*ボタンの横サイズ*/
    height: 60px; /*ボタンの縦サイズ*/
    text-align: center;
    background: #8C0202; 
    border-radius: 50%;
    z-index: 1000;
}


.go-top a{
  fill: #FFF;
  line-height: 60px;
  display: inline-block;
  width: 100%;
}

.go-top svg{
  padding: 18px 0;
}

/*------------------------------------------
  アバウト
------------------------------------------*/
.about{
    grid-area: about;
    background-color: #292828;
    text-align: center;
    position: relative;
}
.about .concept1{
    margin: 0;
    padding: 0;
    position: absolute;
    top: 60px;
    right: 0;
    width: calc(min(570px,30vw) - 60px);
    overflow: hidden;
    z-index: 10;
}
.about .concept1 img{
    width: min(570px,30vw);
}
.about .concept2{
    margin: 0;
    padding: 0;
    position: absolute;
    top: 27%;
    left: -5vw;
    overflow: hidden;
    z-index: 10;
}
.about .concept2 img{
    width: min(694px,35vw);
}
.about .concept3{
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: -50px;
    right: 0;
    width: calc(1467px - 550px);
    overflow: hidden;
    z-index: 10;
}
.about .concept3 img{
    width: min(1467px,80vw);
}

.about .effect-fade {
    opacity : 0;
    transform : translate(0, 45px);
    transition : all 3000ms;
}
    
.about .effect-fade.effect-scroll {
opacity : 1;
transform : translate(0, 0);
}

.about .sub_title{
    padding-top: 200px;
    padding-bottom: 50px;
    height: 100px;
    position: relative;
}

.about_sub_title_top{
    display: inline-block;
    text-align: center;
    margin:0 auto;
    width: 400px;
    position: absolute;
    left:25%;
}
.about_sub_title_bottom{
    display: inline-block;
    text-align: center;
    margin:0 auto;
    width: 350px;
    position: absolute;
    bottom:5%;
    left:40%;
}

.about_sub_title_top span.font_red,
.about_sub_title_bottom span.font_red{
font-size: 50px;
}


.text-line-right{
	display: flex;
	align-items: center;
}

.text-line-right:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	display: block;
    margin-left: .10em;
	background: #ffffff;
}

.text-line-left{
	display: flex;
	align-items: center;
}

.text-line-left:before {
	content: "";
	flex-grow: 1;
	height: 1px;
	display: block;
	margin-left: .10em;
	background: #ffffff;
}

.about .about_text p{
    line-height: 40px;
    
}
.about .about_text {
    width: 526px;
    height: 626px;
    margin: 0 auto 30vw;
}
/*------------------------------------------
  メニュー
------------------------------------------*/
.menu{
    grid-area: menu;
    background-image: url(images/bg_menu.webp);
    background-size: cover;
    text-align: center;
    z-index:10;
}
.menu h2{
    display: inline-block;
    line-height: 1.43;
    font-size: min(60px,3vw);
    margin-top: 120px;
    margin-bottom: 0;
}

.menu p.sub_sectionname{
    margin: 0;
    line-height: 2.35;
    margin: 0 auto 50px;
    /* margin-bottom: 50px; */
    font-size: min(20px,2vw);
}


/* フレックスボックス */
.flex-container {
    display: flex;
    text-align: center;
    position: relative;
    /* margin: 100px 0; */
}
/* 子要素(アイテム) */
.flex-item1,
.flex-item2 {
    width: 50%;
    /* height: 60vh; */
}  
.flex-item1 a img{
    width: 40%;
}

.flex-item2 .flex_text p,
.flex-item2 .flex_text p span{
    line-height: 40px;
}
.flex_left{
    width: 40vw;
}
.flex_text{
	box-sizing: border-box;
	border: 3px solid #fff;
}



/* メニューのフレックスＣＳＳ */
.menu .flex-container {
    height: min(1030px,61vw);
    margin-bottom: 8vw;
}
.menu .flex-item1, .menu.flex-item2 {
    height: 100%;
}


.menu .flex-item1 img{
    box-shadow: 30px 30px 0px #707070;
    width: min(800px,40vw);
    position: absolute;
    left: 13.5vw;
    z-index: 1;
}

.menu .flex_left{
    position: absolute;
    top: 16vw;
    width: min(700px,42vw);
    height: min(720px,45vw);
}

.menu .flex_text {
    padding: 70px;
    width: 100%;
    /* height: 600px; */
}

.menu .flex_text p{
    line-height: 2.2;
    margin: 35px 0;
}

.menu .flex_text p span{
    font-size: 30px;
}

.menu_more{
    display: inline-block;
    border: 3px solid #fff;
    background-color: rgba(0, 0, 0, 0);
    padding: 10px 100px;
    margin-top: 30px;
}

.menu_more:hover{
    opacity: 0.7;
}

.menu img.effect-fade {
    opacity : 0;
    transform : translate(0, -45px);
    transition : all 2000ms;
    }
    
.menu img.effect-fade.effect-scroll {
    opacity : 1;
    transform : translate(0, 0);
    }

/*------------------------------------------
  テイクアウト
------------------------------------------*/
.tekeout{
    grid-area: tekeout;
    background-image: url(images/bg_takeout.webp);
    background-size: cover;
        text-align: center;
}
.tekeout h2{
    display: inline-block;
    line-height: 1.43;
    font-size: min(60px,3vw);
    margin-top: 120px;
    margin-bottom: 0;
}

.tekeout p.sub_sectionname{
    margin: 0;
    line-height: 2.35;
    margin: 0 auto 50px;
    /* margin-bottom: 50px; */
    font-size: min(20px,2vw);
}



/* テイクアウトのフレックスＣＳＳ */
.tekeout .flex-container {
    height: min(1030px,61vw);
    margin-bottom: 0;
    flex-direction: row-reverse;
}



.tekeout .flex-item1 img{
    box-shadow: -30px 30px 0px #707070;
    position: absolute;
    right: 13.5vw;
    width: min(800px,40vw);
    z-index: 1;
}

.tekeout .flex_left{
    position: absolute;
    top: 16vw;
    right: 50%;
    width: min(700px,42vw);
    height: min(500px,40vw);
}

.tekeout .flex_text {
    padding: 120px 70px;
    width: 100%;
    /* height: 600px; */
}

.tekeout .flex_text p{
    line-height: 2.2;
    line-height: 40px;
    margin: 35px 0;
}

.tekeout .flex_text p span{
    font-size: 30px;
}

.tekeout img.effect-fade {
    opacity : 0;
    transform : translate(0, -45px);
    transition : all 2000ms;
    }

  
.tekeout img.effect-fade.effect-scroll {
    opacity : 1;
    transform : translate(0, 0);
    }

    /*------------------------------------------
ニュース
------------------------------------------*/
.news{
    grid-area: news;
    background-color: #000;
    text-align: center;
}

.news h2{
    display: inline-block;
    line-height: 1.43;
    font-size: min(60px,3vw);
    margin-top: 0px;
    margin-bottom: 0;
}

.news p.sub_sectionname{
    margin: 0;
    line-height: 2.35;
    margin: 0 auto 50px;
    /* margin-bottom: 50px; */
    font-size: min(20px,2vw);
}

.news ul#instagram-list{
    list-style: none;
    display: flex;
    flex-wrap: center;
    justify-content: center;
    padding: 0;
    margin: 50px ;
  }
  .news a img.insta{
    width: 32px;
    height: 32px;
    vertical-align:middle;
  }

  .news ul#instagram-list li{
      width:min(400px,25vw);
      margin: 0 min(43px,2vw);
  }
  .news ul#instagram-list li img{
      width: 100%;
  }
  .news li .pic_style{
    width:min(400px,25vw);
   
  }  

  .news p.insta_text,
  .news p.insta_text2{
    font-family:
    YuGothic,
    "游ゴシック",
    Hiragino Sans,
    "ヒラギノ角ゴシック",
    Hiragino Kaku Gothic ProN,
    "ヒラギノ角ゴ ProN W3",
    Roboto,
    "Droid Sans",
    Meiryo,
    "メイリオ",
    Verdana,
    "ＭＳ Ｐゴシック",
    sans-serif;
      text-align: left;
      margin: 0;

  }

  .news p.insta_text{
    font-size: 16px;
    margin-bottom: 15px;
    line-height: 2.5;
}

.news p.insta_text2{
  font-size: 14px;
  line-height: 1.35;
}

  .news_more{
    display: inline-block;
    border: 2px solid #fff;
    background-color: #000;
    width: 320px;
    height: 65px;
    margin-bottom: 50px;
}

.news_more:hover{
    opacity: 0.8;
}

/*------------------------------------------
コンタクト
------------------------------------------*/
.contact{
grid-area: contact;
background-color: #000;
text-align: center;
}

.contact h2{
    display: inline-block;
    line-height: 1.43;
    font-size: min(60px,3vw);
    margin-top: 0px;
    margin-bottom: 0;
}

.contact p.sub_sectionname{
    margin: 0;
    line-height: 2.35;
    margin: 0 auto 50px;
    /* margin-bottom: 50px; */
    font-size: min(20px,2vw);
}

.contact .flex-container{
    margin-top: 50px;
    margin-bottom: 0;
    height: min(762px,50vw);
}

.contact .flex-item1{
    margin: 0;
    padding: 0;
}

.contact .flex-item1 img{
    width: 100%;
    height: 100%;
}

.contact .flex-item2{
    background:linear-gradient(#8C0202, #551414 70%,#410000 );
    text-align: left;
    display: inline-block;
    
}

.contact .flex_left {
    width: min(390px,25vw);
    margin: 160px auto 40px;
}
.contact h3{
    width: 250px;
    font-size: min(32px,3vw);
    text-align: left;
    display: inline-block;
}

.contact p{
    width: 387px;
    font-size: min(1vw,16px);
}

.contact .tel{
    font-size: min(1vw,16px);
    padding: 1.5% 3%;
    display: inline-block;
    border: 2px solid #fff;
    margin: 0 min(10vw,200px);

} 

.contact .tel span{
    font-size: min(40px,3vw);
    display: inline-block;
    padding-left: 50px;
    vertical-align: middle;
}


.contact p.dayoff,
.contact p.settlement{
    text-align: left;
}

/*------------------------------------------
アクセス
------------------------------------------*/
.access{
grid-area: access;
background-color: #000;
text-align: center;
}
.access h2{
    display: inline-block;
    line-height: 1.43;
    font-size: min(60px,3vw);
    margin-top: 0px;
    margin-bottom: 0;
}

.access p.sub{
    margin: 0;
    line-height: 2.35;
    margin: 0 auto 50px;
    font-size: min(20px,2vw);
}

.access p.address{
    width: 100%;
    margin: 0;
    line-height: 2.35;
    margin: 0 auto 50px;
    font-size: min(20px,2vw);
}

.gmap{
    height: 500px;
    filter: grayscale(90%) invert(100%) contrast(83%);
}

/*------------------------------------------
フッター
------------------------------------------*/
footer{
grid-area: footer;
background-color: #000;
}

footer h2{
    font-size: min(60px,3vw);
    display: inline-block;
    line-height: 1.43;
    margin: 0;
}

footer img{
    width: 39px;
    margin: 30px 20px;
}
footer p.unei{
    font-family:
        YuGothic,
        "游ゴシック",
        Hiragino Sans,
        "ヒラギノ角ゴシック",
        Hiragino Kaku Gothic ProN,
        "ヒラギノ角ゴ ProN W3",
        Roboto,
        "Droid Sans",
        Meiryo,
        "メイリオ",
        Verdana,
        "ＭＳ Ｐゴシック",
        sans-serif;
    font-size: 8px;
    color: #fff;
    margin: 0;
}

footer a img.footer_logo{
    width: 120px;
    margin: 0 0 20px 0; 
}



/*------------------------------------------
------------------------------------------*/
/*------------------------------------------
------------------------------------------*/
/*------------------------------------------
------------------------------------------*/
/*------------------------------------------
------------------------------------------*/
@media screen and (max-width:1450px) { 
/* トップ */
.header_title {
    top: 30%;
}
.header_title h1 {

    font-size: 45px;
}

/* アバウト */
.about .concept3{
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: -50px;
    right: 0;
    width: calc(1467px - 800px);
    overflow: hidden;
    z-index: 10;
}

.about .about_text p {
    line-height: 40px;
    font-size: 16px;
}

/* メニュー */
.menu .flex-container {
    /* flex-direction: row; */
    height: 750px;
    margin-bottom: 40px;
}

.menu .flex-item1,
.menu .flex-item2 {
    width: 50%;
    height: 510px;
    text-align: center;
}
.tekeout .flex_left,
.menu .flex_left{
    margin: 0 auto;
    width: min(600px,40vw);
    height: auto;
}

.menu .flex-item1 img{
    width: min(600px,40vw);
}

.menu .flex_text {
    padding: 35px;
}
.menu .flex_text p {
    font-size: 13px;
}

/* テイクアウト */
.tekeout .flex-container {
    /* flex-direction: row; */
    height: 750px;
    margin-bottom: 40px;
}

.tekeout .flex-item1,
.tekeout .flex-item2 {
    width: 50%;
    height: 510px;
    text-align: center;
}


.tekeout .flex-item1 img{
    width: min(600px,40vw);
}

.tekeout .flex_text {
    padding: 70px 35px;
}
.tekeout .flex_text p {
    font-size: 13px;
}

/* コンタクト */
.contact .flex-container {
    height: min(587px,45vw);
}

/* .contact .flex-item1, .contact .flex-item2 {
    width: 50%;
    height: 100%;
    text-align: center;
} */

.contact .flex-item1 img{
    width: 100%;
}

.contact .flex_left {
    width: 388px;
    margin: min(40px,10vw) auto;
}

.contact .tel {
    margin-bottom: min(40px,10vw);
}

}


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

    .about_sub_title_top {
        left: 15%;
    }

    .about .concept3 {
        bottom: -50px;
        width: calc(1467px - 900px);
    }

    .menu .flex-container{
        flex-direction: column;
        height: 1200px;
        margin-bottom: 40px;
    }

    .tekeout .flex-container {
        flex-direction: column;
        height: 1100px;
        margin-bottom: 40px;
    }
    
    .menu .flex-item1, .menu .flex-item2,
    .tekeout .flex-item1, .tekeout .flex-item2 {
        width: 100%;
        height: 510px;
        text-align: center;
    }
    
    .menu .flex_left,
    .tekeout .flex_left {
        position: initial;
        width: min(700px,64vw);
    }
    
    .menu .flex-item1 img,
    .tekeout .flex-item1 img {
        width: min(600px,71vw);
    }
    
    .menu .flex_text p,
    .tekeout .flex_text p {
        font-size: 16px;
    }


    .contact .flex_left {
        width: 300px;
        margin: min(25px,10vw) auto;
    }
    .contact p {
        width: 387px;
        font-size: 13px;
    }
    .contact .tel {
        margin-bottom: min(40px,10vw);
        font-size: 12px;
    }

}


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

/* ヘッダー */
.header_title h1 {
    font-size: 35px;
}

.header_title h2 {
    font-size: 23px;
}

.header_title p {
    margin-top: 5%;
    font-size: 13px;
}
/* ハンバーガーメニュー */
.hamburger {
    display: block;
    position: fixed;
    z-index: 101;
    right: 0px;
    top: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    text-align: center;
}
.hamburger span {
    display : block;
    position: absolute;
    width   : 30px;
    height  : 2px ;
    left    : 6px;
    background : #fff;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition   : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
    top: 8px;
}
.hamburger span:nth-child(2) {
    top: 16px;
}
.hamburger span:nth-child(3) {
    top: 24px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
    top : 16px;
    left: 6px;
    background :#fff;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
    height: 3px;
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
    top: 16px;
    background :#fff;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
    height: 3px;
}

/* --ハンバーガーメニューの中身-- */
nav.globalMenuSp {
    position: fixed;
    z-index : -2;
    top  : 0;
    left : 0;
    color: #fff;
    /* background: rgba(29, 29, 29, 0.9); */
    background-color: #8c0202dc;
    text-align: center;
    width: 100%;
    opacity: 0;
    transition: opacity .6s ease, visibility .6s ease;
}

nav.globalMenuSp.active{
    position: fixed;
    padding-top: 47px;
    top: 0;
    z-index: 100;
}

nav.globalMenuSp .menu_ber {
    display: initial;
    margin: 0 auto;
    padding: 0;
    padding-top: 15px;
    width: 100%;
}

nav.globalMenuSp .menu_ber .header_menu {
    list-style-type: none;
    display: block;
    padding: 0;
    width: 100%;
    transition: .4s all;
}

nav.globalMenuSp .menu_ber .header_menu:last-child {
    padding-bottom: 0;
}

nav.globalMenuSp .menu_ber .header_menu a {
    display: block;
    color: #000;
    padding: 20px 0;
    text-decoration: none;
}
nav.globalMenuSp .menu_ber .header_menu a:hover{
opacity :.5;
}

nav .under_line {
    text-align: center;
    height: 60px;
    line-height: 15px;
    margin-right: 2px;
}

nav.globalMenuSp .under_line a {
    font-size: 18px;
}

.nav_image {
    right: 60px;
}


/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    opacity: 100;
}



/* アバウト */
.about .concept2 {
    left: -10vw;
}

.about .concept3 img {
    width: min(1467px,90vw);
}

.about .concept3 {
    bottom: -50px;
    width: calc(1467px - 1100px);
}

.about_sub_title_top {
    left: 5%;
}

.about_sub_title_bottom {
    left: 33%;
}

/* メニュー */
.menu .flex-container {
    flex-direction: column;
    height:  min(1180px,200vw);
    margin-bottom: 0px;
}
.menu .flex_text {
    padding: 21px;
}
.menu .flex-item1,
.tekeout .flex-item1 {
    height: min(450px,65vw);
}

.menu .flex_left, .tekeout .flex_left {
    position: initial;
    width: min(700px,77vw);
}
.tekeout .flex-container {
    flex-direction: column;
    height: min(1100px,170vw);
    margin-bottom: 40px;
}
.tekeout .flex_text {
    padding: 70px 21px;
}

/* コンタクト */
.contact .flex-container {
    display: flex;
    text-align: center;
    position: relative;
    flex-direction: column;
    height: auto;
}
.contact .flex-item1,
.contact .flex-item2{
    width: 100%;
    height: 392px;
    text-align: center;
}
.contact .flex_left {
    width: 310px;
    text-align: left;
}
.contact h3 {
    font-size: 28px;
    margin: 4px 0;
}

.contact .tel span {
    font-size: 25px;
    padding-left: 20px;
}

    }

/*------------------------------------------
------------------------------------------*/
/*------------------------------------------
------------------------------------------*/
/*------------------------------------------
------------------------------------------*/
/*------------------------------------------
------------------------------------------*/
@media screen and (max-width:499px) { 
.pc { display: none !important; }
.sp { display: block !important; }
/* テイクアウト */
body {
    font-family: "メイリオ", Meiryo;
    font-size: 2rem;
    color: #fff;
    /* background: #000; */
    background-color: #Fff;
    width: 100vw;
    margin: 0 auto;
    min-height: 100vh;
    display: grid;
    scroll-behavior: smooth;
    text-align: center;
    overflow-x: hidden;
    grid-template:
        " header " auto
        " about " auto
        " menu " auto
        " tekeout " auto
        " news " auto
        " contact " auto
        " access " auto
        " footer " auto / 100vw;
}

.header_title {
    top: 40%;
}

.header_title h1 {
    font-size: 24px;
}
.header_title h1::after {
    transform: scale(1);
}
.header_title h2 {
    font-size: 20px;
}

/* ハンバーガーメニュー */
.hamburger {
    display: block;
    position: fixed;
    z-index: 101;
    right: 12px;
    top: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    text-align: center;
}
.hamburger span {
    display : block;
    position: absolute;
    width   : 30px;
    height  : 2px ;
    left    : 6px;
    background : #fff;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition   : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
    top: 8px;
}
.hamburger span:nth-child(2) {
    top: 16px;
}
.hamburger span:nth-child(3) {
    top: 24px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
    top : 16px;
    left: 6px;
    background :#fff;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
    height: 3px;
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
    top: 16px;
    background :#fff;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
    height: 3px;
}

/* --ハンバーガーメニューの中身-- */
nav.globalMenuSp {
    position: fixed;
    z-index : -2;
    top  : 0;
    left : 0;
    color: #fff;
    /* background: rgba(29, 29, 29, 0.9); */
    background-color: #8c0202dc;
    text-align: center;
    width: 100%;
    opacity: 0;
    transition: opacity .6s ease, visibility .6s ease;
}

nav.globalMenuSp.active{
    position: fixed;
    padding-top: 47px;
    top: 0;
    z-index: 100;
}

nav.globalMenuSp .menu_ber {
    display: initial;
    margin: 0 auto;
    padding: 0;
    padding-top: 15px;
    width: 100%;
}

nav.globalMenuSp .menu_ber .header_menu {
    list-style-type: none;
    display: block;
    padding: 0;
    width: 100%;
    transition: .4s all;
}

nav.globalMenuSp .menu_ber .header_menu:last-child {
    padding-bottom: 0;
}

nav.globalMenuSp .menu_ber .header_menu a {
    display: block;
    color: #000;
    padding: 20px 0;
    text-decoration: none;
}
nav.globalMenuSp .menu_ber .header_menu a:hover{
opacity :.5;
}

nav .under_line {
    text-align: center;
    height: 60px;
    line-height: 15px;
    margin-right: 2px;
}

nav.globalMenuSp .under_line a {
    font-size: 18px;
}

.nav_image {
    right: 55px;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    opacity: 100;
}

/* アバウト */

.about .sub_title {
    padding-top: 50px;
    padding-bottom: 10px;
}

.about_sub_title_top {
    text-align: center;
    margin: 0 auto;
    width: 250px;
    position: absolute;
    left: 0;
    font-size: 20px;
}
.about_sub_title_top span.font_red, .about_sub_title_bottom span.font_red {
    font-size: 30px;
}
.about_sub_title_bottom {
    text-align: center;
    margin: 0 auto;
    width: 220px;
    position: absolute;
    bottom: 5%;
    font-size: 20px;
    left: 30%;
}

.about_sub_title_bottom span{
    font-size: 24px;
}

.p-50 {
    padding: 20px 0;
}

.about .about_text{
    width: initial;
    height: 400px;
}

.about .about_text p {
    font-size: 11px;
    line-height: 30px;
}

.about .concept1 {
    top: 26px;
    right: 0;
    width: calc(116px - 45px);
}


.about .concept2 {
    top: 23%;
    left: -11vw;
}

.about .concept3 {
    bottom: 0;
    width: calc(300px - 100px);

}

/* メニュー */
.menu h2 {
    font-size: 20px;
    margin-top: 40px;
}

.menu .flex-container {
    flex-direction: column;
    height: 865px;
    margin-bottom: 40px;
}

.menu .flex-item1,
.menu .flex-item2 {
    height: 320px;
}

.menu .flex-item1 img{
    width: 95vw;
    /* height: 320px; */
    display: inline-block;  
    box-shadow: 20px 20px 0px #707070;
    left: 0;
}

.menu .flex_left {
    position: initial;
    width: 335px;
}

.menu .flex_text {
    padding: 15px;
}

.menu .flex_text p {
    line-height: 2.2;
    margin: 30px 0;
    font-size: 12px;
}
.menu .flex_text p span {
    font-size: 22px;
}
/* テイクアウト */
.tekeout h2 {
    font-size: 20px;
    margin-top: 40px;
}

.tekeout .flex-container {
    flex-direction: column;
    height: 765px;
    margin-bottom: 40px;
}

.tekeout .flex-item1,
.tekeout .flex-item2 {
    height: 320px;
}

.tekeout .flex-item1 img{
    width: 95vw;
    /* height: 320px; */
    display: inline-block;  
    box-shadow: 20px 20px 0px #707070;
    left: 0;
}

.tekeout .flex_left {
    position: initial;
    width: 335px;
}

.tekeout .flex_text {
    padding: 85px 15px;
}

.tekeout .flex_text p {
    line-height: 2.2;
    margin: 30px 0;
    font-size: 12px;
}
.tekeout .flex_text p span {
    font-size: 22px;
}
/* ニュース */
.news h2 {
    font-size: 20px;
    margin-top: 40px;
}

.news ul#instagram-list{
    list-style: none;
    display: flex;
    flex-direction: column;
    flex-wrap: center;
    justify-content: space-evenly;
    padding: 0;
    margin: 20px 0;
  }
  .news ul#instagram-list li {
    width: 95vw;
    margin: 0 auto 20px;
}

/* コンタクト */
.contact h2 {
    font-size: 20px;
    margin-top: 40px;
}


.contact .flex_left {
    text-align: left;
}
.contact h3 {
    font-size: 20px;
}
.contact p {
    width: 315px;
    font-size: 13px;
}
.contact .tel{
    font-size: 10px;
}

.contact .tel span {
    font-size: 24px;
    padding-left: 10px;
}


/* アクセス */

.access h2 {
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-size: 20px;
    margin-top: 40px;
}

.access p.address {
    font-size: 12px;
    margin: 0 auto 20px;
}

.access p.sub {
    margin: 0 auto 20px;
}

.gmap{
    height: 200px;
    margin-bottom: 35px;
}

/* フッター */
footer h2{
    font-size: 20px;
}
footer img {
    width: 16px;
    margin: 30px 13px;
}
footer a img.footer_logo{
    margin: 0; 
}


}