@charset "UTF-8";
/* リンク先の表示 */
body {
  font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template: "header" auto "main" 1fr "footer" auto;
}

ul {
  list-style: none;
}

header {
  border: 1px solid;
  grid-area: header;
  background-color: #EE0000;
  text-align: center;
}

main {
  border: 1px solid;
  grid-area: main;
}

footer {
  border: 1px solid;
  grid-area: footer;
  background-color: #EE0000;
  text-align: center;
}

.menu-navi{
  display: flex;
  justify-content: center;
}
header a, footer a {
  color: white;
  font: bold 1.7rem sans-serif;
  margin-right: 35px;
  text-decoration: none;
}

header a:hover {
  color: #ffff1a;
  text-decoration: underline;
}

.phone-number::before, .map-navi::before {
  font-family: "Font Awesome 5 Free";
  color: #fff;
  text-align: center;
}
.phone-number::before {
  content: "\f879";
}

.map-navi::before {
  content: "\f5a0";
  margin-right: 5px;
}

/* メニュー文字 */
.menu-header {
  margin-bottom: 3%;
  text-align: center;
}
.menu-header-title {
  font-size: 2rem;
  margin-bottom: 5%;
}
.menu-header-bottom {
  border-bottom: 5px solid red;
  padding-bottom: 10px;
}

input[name="menu"] {
  display: none;
}

#navi label {
  margin: 20px;
  cursor: pointer;
  font-size: 1.5em;
}

#menu > div {
  display: none;
}

#menu-wrapper {
  width: 90%;
  margin: 0 auto;
}

#all:checked ~ #navi label[for="all"],
#noodle:checked ~ #navi label[for="noodle"],
#rice:checked ~ #navi label[for="rice"],
#side:checked ~ #navi label[for="side"],
#drink:checked ~ #navi label[for="drink"],
#takeout:checked ~ #navi label[for="takeout"],
#lunch:checked ~ #navi label[for="lunch"] {
  color: orangered;
  border-bottom: 1px solid orange;
}

#all:checked ~ #menu > div,
#noodle:checked ~ #menu > .noodle,
#rice:checked ~ #menu > .rice,
#side:checked ~ #menu > .side,
#drink:checked ~ #menu > .drink,
#takeout:checked ~ #menu > .takeout,
#lunch:checked ~ #menu > .lunch {
  display: block;
  padding-top: 20px;
}

#all:checked ~ #menu,
#noodle:checked ~ #menu,
#rice:checked ~ .rice-menu,
#side:checked ~ .side-menu,
#drink:checked ~ .drink-menu,
#takeout:checked ~ .takeout-menu,
#lunch:checked ~ .lunch-menu {
  margin-bottom: 3%;
}

#menu {
  background-color: #FAF0E6;
  place-items: center stretch;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(auto-fit, 250px);
  gap: 20px;
}

#navi {
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2%;
}

.price {
  font-size: 1.5rem;
}

.miso-name, .category-miso, .miso-category-concept, .ginger-sentence {
  color: #B22222;
}
.miso-name {
  font-size: 1.8rem;
}
.category-miso {
  font-size: 3rem;
}
.miso-category-concept, .ginger-sentence, .chuka-category-concept, .wantan-sentence, .syouyu-category-concept, .solt-category-concept {
  font: bold 1.1rem sans-serif;
  padding-left: 20px;
  text-align: justify;
  text-justify: auto;
}

.chuka-name, .syouyu-name, .category-chuka, .category-syouyu, .chuka-category-concept, .syouyu-category-concept, .wantan-sentence {
  color: red;
}
.chuka-name, .syouyu-name {
  font-size: 1.8rem;
}
.category-chuka, .category-syouyu {
  font-size: 3rem;
}

.solt-name, .category-solt, .solt-category-concept {
  color: #007700;
}
.solt-name {
  font-size: 1.8rem;
}
.category-solt {
  font-size: 3rem;
}

.other-name, .child-name, .rice-name, .side-name, .drink-name, .takeout-name {
  font-size: 1.8rem;
}
.category-other, .category-child, .category-rice, .category-side, .category-lunch {
  font-size: 3rem;
}

.category-alcohol, .category-drink, .category-takeout {
  font-size: 2.5rem;
}

.other-category-concept,.child-category-concept, .rice-category-concept, .drink-category-concept, .side-category-concept, .takeout-category-concept, .lunch-category-concept {
  color: #000;
  font: bold 1.1rem sans-serif;
  padding-left: 20px;
  text-align: justify;
  text-justify: auto;
}

.impact {
  color: red;
}

.space {
  margin-left: 15px;
}

footer a:hover {
  color: #ffff1a;
  text-decoration: underline;
}
.phone-wrapper {
  margin: 2.5% 0px;
}
.guidance-sentence {
  color: white;
  font-size: 24px;
}
.phone-guidance {
  margin-bottom: 7%;
}
.footer-phone,  .footer-phone::before{
  color: #fff;
  font-size: 24px;
  text-align: center;
}
.footer-phone {
  padding: 15px;
  line-height: 1.4;
  background: #e9546b;
  border-radius: 5px;
  box-shadow: 5px 5px 5px #e5e4e6;
}

.footer-phone::before {
  font-family: "Font Awesome 5 Free";
  content: "\f879";
  left: 15px;
}
/*# sourceMappingURL=menu.css.map */