@charset "UTF-8";

/* .menu-first-view {
	background-image: url(../img/menu/nakano_haikei.jpg);
    background-attachment: fixed;

} */

body::before {
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
    background-repeat:no-repeat;
    background-position:50% 100%;
    background-image:url(../img/menu/nakano_haikei.jpg);
    background-size:cover;
}

.menu-w-container {
	max-width: 1200px;
    width: 90%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tab-container {
    width: 100%;
    margin-bottom: 50px;
    align-items: center;
}

/* ----------------ウサギのための余白----------------------- */
main {
    margin-bottom: 130px;
}

h2 {
    margin-bottom: 3rem;
    padding-top: 8rem;
    text-align: center;
}

h3 {
    font-size: 55px;
    text-align: center;
    margin-bottom: 10px;
}

h4 {
    font-size: 40px;
    margin-bottom: 0px;
}

p {
    font-size: 20px;
    font-family: serif;
    font-weight: bold;
}

p img {
    width: 50%;
}

.butatama-yen {
    width: 47%;
}

span {
	font-size: 14px;
	line-height: 1;
    display: block;
    margin: 0 0 10px 0;
}

th {
	font-size: 22px;
    font-family: "Noto Serif JP", serif;
    font-weight: bold;
    line-height: 1.1;
}

td {
    font-size: 22px;
    font-family: serif;
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
    line-height: 1.1;
}

.price {
    width: 100%;
    font-size: 30px;
    font-family: Mochiy;
    font-weight: bold;
    text-align: end;
}

.reverse {
    flex-direction: row-reverse;
}

.medama,.haritsuke,.medama-cheese {
    width: 30%;
}

.medama img ,.haritsuke img ,.medama-cheese img {
    border-radius: 80px;
}

.medama p,.haritsuke p,.medama-cheese p {
   text-align: center;
}

/* --------------------------TAB内---------------------------------- */
.okonomi-container {
    display: flex;
    justify-content: center;
}

/* ------------------------当店のおすすめ----------------------------- */
.push-container {
    /* width: 90%; */
    display: flex;
    flex-direction: column;
}

.push-menu-container {
    /* width: 90%; */
    display: flex;
    justify-content: space-around;
    margin-bottom: 50px;
}

.push-img {
    width: 45%;
}

.push-img img {
    border-radius: 80px;
}

.push-menu-text-container {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.type-container {
    display: flex;
    justify-content: space-evenly;
}
/* ----------------------昼定食----------------------------- */
.limited {
    color: #c16d29;
    font-size: 30px;
    margin-bottom: 20px;
}

.lunch-plus {
    font-size: 30px;
    font-family: serif;
    font-weight: bold;
    text-align: center;
    margin-bottom: 50px;
    line-height: 1.1;
}

.lunch-top-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.lunch-top-side-img {
    width: 20%;
}

/* .lunch-top-center-img {
    width: 100%;
} */

/* --------------------メニュー一覧--------------------------- */
.menu-list-container {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.menu-list {
    text-align: justify;
    width: 45%;
    justify-content: space-between;
}

/* .rice-br {
    display: none;
} */

/* ーーードリンクのカテゴリータイトルーーー */
.drink-title {
    font-size: 33px;
    font-family: serif;
    font-weight: bold;
}

/* --------------------TABのコピペ------------------------ */
/*tabの形状*/
.tab{
	display: flex;
	flex-wrap: wrap;
}

/* 押されてないタブの形状 */
.tab li a{
	display: block;
	background:#dfc068;
	border: 5px solid #c16d29;
	border-radius: 10px 10px 0 0;
	margin: -0.4;
	padding:10px 10px;
	font-size: 20px;
    font-family: "Zen Maru Gothic";
    font-weight: bold;
	color: black;
	border-bottom: none;
}

/*liにactiveクラスがついた時の形状*/
.tab li.active a {
	background:#fffed5;
	opacity: 0.70;
	border-bottom: none;
}

/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	background: #fffed5a3;
	padding:30px 10px;
	opacity: 0.11;/*透過0*/
	border: 5px solid #c16d29;
    border-radius: 0 10px 10px 10px;
	/* border-top: none; */
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
            display: block;/*表示*/
            animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
            animation-duration: 1s;
            animation-fill-mode: forwards;
            align-items: center;
}

.plus-menu-modan {
    /* display: flex; */
    /* text-align: center; */
    border-top: 3px #c16d29 solid;
    border-spacing: 30px;
    /* flex-direction: column; */
    /* justify-content: center; */
    /* align-items: center; */
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* -----------------------------TABのコピペ終わり-------------------------- */
/* -----------------------------モバイル---------------------------------- */
@media (max-width: 767px) {

h2 {
    width: 80%;
    margin-bottom: 20px;
    padding-top: 6rem;
}

h3 {
    font-size: 35px;
    text-align: center;
    margin-bottom: 0;
}

h4 {
    width: 70%;
    padding: -10 auto;
    margin-bottom: 0;
}

.abokado-size{
    width: 90%;
}

p {
    font-size: 20px;
    font-family: serif;
    font-weight: bold;
    margin-bottom: 10px;
}

span {
    font-size: 10px;
    line-height: 1;
    display: block;
    margin: -1px 0 10px 0;
}

th {
    font-size: 14px;
    font-family: "Noto Serif JP", serif;
    font-weight: bold;
}

td {
    font-size: 14px;
    font-family: serif;
    font-weight: bold;
    text-align: right;
}

.limited {
    color: #c16d29;
    font-size: 20px;
    margin-bottom: 10px;
}

.price {
    width: 100%;
    font-size: 25px;
    font-family: Mochiy;
    font-weight: bold;
    text-align: end;
}

.push-container {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.push-menu-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.push-img {
    width: 80%;
    /* margin-bottom: 10px; */
}

.push-img img {
    border-radius: 80px;
}

.push-menu-text-container {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.menu-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
}

.menu-list-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
}

.menu-list {
    text-align: justify;
    width: 90%;
    max-width: 350px;
    justify-content: space-between;
}

.lunch-plus {
    font-size: 15px;
    font-family: serif;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.drink-title {
    font-size: 20px;
    font-family: serif;
    font-weight: bold;
}

.plus-menu {
    font-size: 18px;
}

.rice-br {
    display: block;
}


/* --------------------TABのコピペ------------------------ */
/*tabの形状*/
.tab{
	display: grid;
    grid-template-columns: repeat(3, 1fr);
	flex-wrap: wrap;
}

/* 押されてないタブの形状 */
.tab li a{
	display: block;
	background:#dfc068;
	border: 5px solid #c16d29;
	border-radius: 10px 10px 0 0;
	margin: -0.4px;
    margin-top: -13px;
	padding:5px 0 20px;
	font-size: 14px;
    font-family: "Zen Maru Gothic", serif;
    font-weight: bold;
	color: black;
	border-bottom: none;
    text-align: center;
}

.tab .tab-front a {
    padding:8px 0 8px;
}

/*liにactiveクラスがついた時の形状*/
.tab li.active a {
	background:#fffed5;
	opacity: 1;
	border-bottom: none;
}

/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	background: #fffed59a;
	padding:20px 10px 30px;
	opacity: 0.11;/*透過0*/
	border: 5px solid #c16d29;
    border-radius: 0 0 10px 10px;
	/* border-top: none; */
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 1s;
    animation-fill-mode: forwards;
    align-items: center;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/* -----------------------------TABのコピペ-------------------------- */

}