@charset "utf-8";

/*-----------------------------------------------------------
タブ
-----------------------------------------------------------*/

.menu-atten-box {
    max-width: 300px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    margin: 0;
}

.tab {
    cursor: pointer;
}

.panel {
    display: none;
    margin: 0 auto 0;
    padding: 60px 0 0 0;
}

.panel.is-show {
    display: block;
}

.gjs-dashed .panel  {
    display: block;
    padding: 60px 15px 60px 15px;
}

.tab-group {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px auto 0;
    gap: 20px;
  	position: relative;
}

.tab {
    cursor: pointer;
    max-width: 280px;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(16px, 15.029px + 0.259vw, 20px);
    color: var(--base-font-color);
    /* border: 1px solid var(--primary); */
    border-radius: 5px;
    background: var(--secondary);
    box-shadow: 0 3px 6px rgba(0,0,0,.16);
	transition: all .3s;
}

.tab.is-active {
	color: var(--white);
	background: var(--base-body-color);
}

.tab:hover {
	color: var(--white);
	background: var(--base-body-color);
}

/*-----------------------------------------------------------
名物
-----------------------------------------------------------*/

.food-menu01 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.food-menu01-img-box {
    max-width: 760px;
    width: 100%;
    aspect-ratio: 760 / 500;
    position: relative;
  	min-height: 350px;
}

.food-menu01-img-box img {
    justify-content: center;
    align-items: center;
    position: absolute;
    display: flex;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    max-height: 100%;
    height: 100%;
    max-width: 100%;
    width: 100%;
    margin: auto;
    object-fit: cover;
    object-position: top;
}

.food-menu01-text-block {
    max-width: 760px;
    width: 100%;
    padding: 32px 15px;
    background: var(--secondary);
}

.food-menu01-text-block-in {
    max-width: 642px;
    width: 100%;
    margin: 0 auto;
}

.food-menu01-title-box img {
    max-width: 135px;
  	width: 25%;
    aspect-ratio: 130 / 85;
}

.food-menu01-title-box02 img {
    max-width: 303px;
  	width: 60%;
    aspect-ratio: 303 / 85;
}

.food-menu01-title-box03 img {
    max-width: 224px;
  	width: 40%;
    aspect-ratio: 224 / 85;
}

.food-menu01-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 15px;
    border-bottom: 1px solid var(--border-primary);
}

.food-menu01-title-box02,.food-menu01-title-box03 {
	margin: 20px 0 0;
}

/*food-menu01-title 30px*/

.food-menu01-spice-title {
    display: inline-flex;
    color: var(--white);
    background: var(--primary);
    gap: 10px;
    padding: 3px 10px 6px;
    font-size: clamp(16px, 14.301px + 0.453vw, 23px);
}

.food-menu01-spice-img-box {
    max-width: 599px;
    width: 100%;
    margin: 32px 0 0;
    aspect-ratio: 599 / 80;
}

.food-menu01-spice-box {
    margin: 40px 0 0;
}

.spice-atten-text {
	font-size: clamp(14px, 13.757px + 0.065vw, 15px);
  	margin: 9px 0 0;
}

/*-----------------------------------------------------------
串揚げ
-----------------------------------------------------------*/

.food-menu02 {
	margin: 80px 0 0;
	width: 100%;
	color: var(--white);
	background: var(--base-body-color);
}

.food-menu02-contents {
  	max-width: 1380px;
  	width: 100%;
  	margin: 0 auto;
  	padding: 60px 0;
  	position: relative;
}

.food-menu02-title-box {
    display: flex;
    align-items: center;
  	flex-wrap: wrap;
    gap: 25px 50px;
}

.food-menu02-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  	margin: 38px 0 0;
    max-width: 994px;
    width: 100%;
}

.food-menu02-price-title-box {
    /* margin: 0 0 0 20px; */
    padding: 5px 5px;
    width: 100%;
    text-align: center;
    color: var(--base-body-color);
    background: var(--secondary);
    font-size: 14px;
}

.food-menu02-list-area {
    /* padding: 0 0 0 20px; */
    margin: 12px 0 0;
}

.star-icon {
	position: relative;
}

.food-menu02-list-area p:nth-child(n+2) {
	margin: 10px 0 0;
}

.star-icon:before {
    content: "";
    position: absolute;
    top: 8%;
    left: -21px;
    width: 20px;
    aspect-ratio: 1 / 1;
    background: url(/system_panel/uploads/images/star-icon.svg) no-repeat center / contain;
    /* transform: translateY(-50%); */
    z-index: 1;
}

.food-menu02-item {
    padding: 0 0 0 20px;
}

.food-menu02-item-block:nth-child(n+2)  {
	margin: 20px 0 0;
}


.food-menu02-img-box01 {
	position: absolute;
	top: 3%;
	right: 0;
	max-width: 192px;
	width: 20%;
	aspect-ratio: 1 / 1;
    z-index: 10;
}

.food-menu02-img-box02 {
    position: absolute;
    right: 0;
    bottom: -3%;
    max-width: 508px;
    width: 35%;
    aspect-ratio: 508 / 637;
    z-index: 1;
}

.food-menu02-img-box03 {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 322px;
    width: 25%;
    aspect-ratio: 322 / 346;
    z-index: 1;
}

.food-menu02 .food-menu02-list-area {
    font-size: 14px;
}

.food-menu02-img-box04 {
	aspect-ratio: 508 / 1009;
    position: absolute;
    width: 30%;
    right: 0;
    bottom: -2%;
    z-index: 1;
}

.food-menu02-img-box02,
.food-menu02-img-box03,
.food-menu02-img-box04,
.tajime-menu02 .food-menu02-img-box02,
.tajime-menu02 .food-menu02-img-box03 {
    display: none;
}

.popular-menu-block {
    max-width: 420px;
    width: 100%;
    padding: 10px 20px;
    margin: 0 auto 0 20px;
}

.popular-menu-name {
    font-size: 16px;
  	flex:1;
}

.popular-menu-name span {
    font-size: 125%;
  	font-weight: 700;
}

.popular-menu-row {
    display: block;
}

.popular-price {
    font-size: 16px;
	margin: 0 0 0 auto;
  	text-align: right;
}

/*-----------------------------------------------------------
メニュー表
-----------------------------------------------------------*/
.com-menu01 {
	margin: 80px 0 0;
	width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

.com-menu-area {
    max-width: 625px;
    width: 100%;
    margin: 50px 0 0;
}

.com-menu-list-box {
    width: 100%;
    margin: 30px 0 0 auto;
    padding: 0 0 0 20px;
}

.com-menu-list-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--border-primary);
    margin: 10px 0 0;
    gap: 5px;
}

.com-menu-block:nth-child(n+2) {
	margin: 50px 0 0;
}

.com-menu-th {
	flex: 1;
}

.com-price {
	text-align: right;
  	margin: 0 0 0 auto;
}

/*-----------------------------------------------------------
飲み放題
-----------------------------------------------------------*/

.drink-menu02 {
	margin: 80px 0 0;
	width: 100%;
	color: var(--white);
	background: var(--base-body-color);
}

.drink-menu02-contents {
  	max-width: 1380px;
  	width: 100%;
  	margin: 0 auto;
  	padding: 60px 0;
  	position: relative;
}

.drink-menu02-title-box {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
}

.drink-menu02-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  	margin: 38px 0 0;
    width: 100%;
}

.drink-menu-deco-title-box {
    width: 50%;
    aspect-ratio: 380 / 60;
    position: absolute;
    top: -15px;
    left: 0;
    z-index: 1;
}

.drink-menu02-contents .food-menu02-price-title-box {
	margin: 0;
}

.drink-menu02-contents .food-menu02-list-area {
    padding: 0;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:414px) {
  
/*-----------------------------------------------------------
串揚げ
-----------------------------------------------------------*/

    .food-menu02-img-box02 {
        display: block;
        bottom: 0;
    }
  
  	.food-menu02-img-box03 {
        display: block;
    }
  
    .food-menu02-grid {
        grid-template-columns: repeat(2, 1fr);
    }
  
    .food-menu02-img-box04 {
        display: block;
        width: 38%;
        bottom: 0;
    }

    .drink-menu02-grid {
        grid-template-columns: repeat(2, 1fr);
    }  
  
}

/* min-width: 414px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:576px) {
  
/*-----------------------------------------------------------
串揚げ
-----------------------------------------------------------*/
  
    .food-menu02-grid {
        grid-template-columns: repeat(2, 1fr);
    }
  
    .food-menu02-img-box01 {
        width: 15%;
    }
  
    .com-menu-list-row {
        align-items: center;
      	flex-direction: row;
      	gap: 10px;
    }

    .drink-menu02-grid {
        grid-template-columns: repeat(2, 1fr);
    }
  
    .popular-menu-row {
        display: flex;
        align-items: flex-end;
        gap: 15px;
    }
  
    .popular-price {
        margin: 0;
        text-align: left;
    }
  
    .food-menu02-price-title-box {
        max-width: 280px;
        width: 90%;
    }

    .popular-menu-name span {
        font-size: 150%;
    }
  
}

/* min-width: 576px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:768px) {
  
/*-----------------------------------------------------------
タブ
-----------------------------------------------------------*/

    .menu-atten-box {
        margin: 0 0 0 auto;
    }

    .panel {
        padding: 80px 0 0 0;
    }
  
/*-----------------------------------------------------------
名物
-----------------------------------------------------------*/

    .food-menu01 {
        flex-direction: row;
        align-items: stretch;
    }
  
    .food-menu01-img-box {
      	width: 40%;
        min-height: 500px;
    }
  
    .food-menu01-spice-box {
        margin: 50px 0 0;
    }
  
/*-----------------------------------------------------------
串揚げ
-----------------------------------------------------------*/

    .food-menu02 {
        margin: 110px auto 0;
    }
  
    .food-menu02-img-box01 {
        width: 15%;
    }
  
    .food-menu02-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
  
    .food-menu02-img-box02 {
        width: 20%;
        bottom: -15%;
    }
  
    .food-menu02-price-title-box {
        padding: 5px 10px;
        font-size: 15px;
    }

    .food-menu02 .food-menu02-list-area {
		font-size: 15px;
    }
  
	.food-menu02-img-box04 {
        width: 29%;
        bottom: 0;
    }
  
    .popular-menu-block {
      	margin: 0;
      	width: 54%;
    }
  
/*-----------------------------------------------------------
メニュー表
-----------------------------------------------------------*/
  
    .com-menu01 {
        margin: 110px auto 0;
        align-items: flex-start;
        flex-direction: row;
    }
  
    .com-menu-area {
        width: 48%;
        margin: 0;
    }
  
    .com-menu-block:nth-child(n+2) {
        margin: 75px 0 0;
    }
  
    .com-menu-list-row {
        align-items: flex-start;
      	flex-direction: column;
      	gap: 5px;
    }
  
    .food-menu02-title-box {
        flex-wrap: wrap;
        gap: 25px;
    }
  
    .drink-menu-deco-title-box {
        width: 50%;
        top: -30px;
    }
  
}

/* min-width: 768px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1024px) {
  
    .food-menu02-title-box {
        align-items: center;
        gap: 50px;
    }
  
    .popular-menu-block {
      	width: 100%;
        flex: 1;
    }
  
    .popular-menu-row {
        align-items: flex-end;
        gap: 30px;
    }

	.food-menu02-img-box04 {
        width: 27%;
    }

    .com-menu-list-row {
        align-items: flex-start;
        flex-direction: row;
        gap: 10px;
    }
  
    .drink-menu02-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

}

/* min-width: 1024px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1150px) {

    .food-menu02-img-box02 {
        position: absolute;
        bottom: 0;
        right: -8%;
        width: 25%;
        z-index: 1;
    }
  
	.food-menu02-img-box04 {
        display: none;
    }
  
    .drink-menu02-title-box {
        flex-direction: row;
        align-items: center;
        gap: 50px;
    }
  
    .tajime-menu02 .food-menu02-img-box02 {
      	display: block;
        position: absolute;
      	top: 0;
        bottom: 0;
        right: -8%;
      	margin: auto;
        width: 25%;
        z-index: 1;
    }
  
    .tajime-menu02 .food-menu02-img-box03 {
      	display: block;
        position: absolute;
        bottom: 50px;
        right: -2%;
        width: 25%;
        z-index: 1;
    }
}

/* min-width: 1150px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1200px) {
  
/*-----------------------------------------------------------
タブ
-----------------------------------------------------------*/

  .panel {
      padding: 100px 0 0 0;
  }
  
  .tab-group {
      margin: 0 auto 0;
  }
  
/*-----------------------------------------------------------
名物
-----------------------------------------------------------*/

    .food-menu01-img-box {
      	width: 50%;
    }

    .food-menu02-img-box01 {
        width: 12%;
        top: 5%;
        right: 5%;
    }  
  
    .food-menu02-img-box02 {
        bottom: 5%;
        width: 25%;
    }
  
    .food-menu02-price-title-box {
        font-size: 16px;
    }
  
    .food-menu02 .food-menu02-list-area {
		font-size: 16px;
    }
}

/* min-width: 1200px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1300px) {

    .menu-atten-box {
        position: absolute;
        top: 0;
        right: 0;
    }  
  
}

/* min-width: 1300px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1450px) {

    .food-menu02-img-box01 {
        top: 5%;
        right: 10%;
        width: 25%;
    }
  
    .food-menu02-img-box02 {
        width: 37%;
    }
  
    .tajime-menu02 .food-menu02-img-box02 {
        top: 0;
        bottom: 0;
        margin: auto;
    }
  
    .food-menu02-price-title-box {
        font-size: 18px;
    }
  
    .food-menu02 .food-menu02-list-area {
		font-size: 18px;
    }
  
}

/* min-width: 1450px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1800px) {
  
    .food-menu02 {
        width: 95%;
    }

    .food-menu02-img-box02 {
        right: -16%;
    }
  
    .tajime-menu02 .food-menu02-img-box02 {
        bottom: 22%;
        right: -12%;
        width: 36%;
    }
}

/* min-width: 1800px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */