@charset "UTF-8";
header {
  border-bottom: 1px solid #e5e5e5
}
.contents .main-col {
  animation: fadeIn 2s forwards;
  margin: 155px auto 85px;
  text-align: center
}
@media only screen and (max-width:1024px) {
  .contents .main-col {
    margin: 105px auto 65px
  }
}
@media only screen and (max-width:767px) {
  .contents .main-col {
    margin: 95px auto 45px
  }
}
.contents .main-col h3 {
  font-family: "Noto Serif JP";
  font-size: 25px;
  margin-bottom: 35px
}
@media only screen and (max-width:767px) {
  .contents .main-col h3 {
    font-size: 18px;
    margin-bottom: 25px
  }
}
.contents .main-col h3 span {
  font-size: 14px;
  font-family: "Noto Sans CJK JP";
  padding: 2px 8px 3px;
  margin-left: 15px;
  background-color: #000;
  color: #fff;
  position: relative;
  top: -4px
}
@media only screen and (max-width:767px) {
  .contents .main-col h3 span {
    font-size: 11px;
    top: -2px
  }
}
.contents .link-col {
  animation: fadeIn 2s forwards;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 90px
}
@media only screen and (max-width:1024px) {
  .contents .link-col {
    margin-bottom: 65px
  }
}
@media only screen and (max-width:767px) {
  .contents .link-col {
    display: block;
    margin-bottom: 45px
  }
}
.contents .link-col li {
  width: calc(33.3333333% - 6.6666666667px);
  text-align: center;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media only screen and (max-width:1024px) {
  .contents .link-col li {
    width: calc(50% - 5px);
  }
}
@media only screen and (max-width:767px) {
  .contents .link-col li {
    width: 100%;
    margin-bottom: 10px
  }
}
.contents .link-col li a {
  padding: 20px 25px 20px 20px;
  position: relative
}
@media only screen and (max-width:1024px) {
  .contents .link-col li a {
    padding: 15px 25px 15px 10px;
    font-size: 13px
  }
}
@media only screen and (max-width:767px) {
  .contents .link-col li a {
    padding: 15px 25px 15px 15px
  }
}
.contents .link-col li:before {
  content: "";
  width: 6px;
  height: 6px;
  border: 0px;
  border-bottom: solid 1px #000;
  border-right: solid 1px #000;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -4px
}
@media only screen and (max-width:1024px) {
  .contents .link-col li a:before {
    right: 7px
  }
}
@media only screen and (max-width:767px) {
  .contents .link-col li a:before {
    right: 15px
  }
}
@media only screen and (max-width:1130px) {
  .contents .link-col.type02 {
    flex-wrap: wrap;
    justify-content: space-between
  }
  .contents .link-col.type02 li {
    width: 49%;
    margin-bottom: 10px
  }
  .contents .link-col.type02 li a {
    border-right: 1px solid #000
  }
}
@media only screen and (max-width:767px) {
  .contents .link-col.type02 {
    display: block
  }
  .contents .link-col.type02 li {
    width: 100%
  }
}
.contents .menu-detail .item {
  margin-bottom: 110px
}
@media only screen and (max-width:1024px) {
  .contents .menu-detail .item {
    margin-bottom: 75px
  }
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item {
    margin-bottom: 50px
  }
}
.contents .menu-detail .item .headline-col {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #000;
  margin-bottom: 30px;
  padding-bottom: 10px
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .headline-col {
    display: block
  }
}
.contents .menu-detail .item .headline-col .text {
  min-width: 280px;
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .headline-col .text {
    display: flex;
    flex-direction: column
  }
}
.contents .menu-detail .item .headline-col .text h3 {
  font-family: "Noto Serif JP";
  font-size: 25px
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .headline-col .text h3 {
    font-size: 18px;
    margin-bottom: 3px
  }
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .headline-col .text .catch {
    font-size: 11px
  }
}
.contents .menu-detail .item .headline-col .text .icon-col {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 5px
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .headline-col .text .icon-col {
    justify-content: flex-start;
    order: 2;
    margin: 5px 0 0
  }
}
.contents .menu-detail .item .headline-col .text .icon-col p {
  font-size: 11px;
  padding: 1px 10px 2px;
  border-radius: 2em;
  border: 1px solid #000;
  position: relative;
  margin-right: 20px
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .headline-col .text .icon-col p {
    font-size: 10px
  }
}
.contents .menu-detail .item .headline-col .text .icon-col p:after {
  content: "+";
  color: #000;
  font-size: 16px;
  position: absolute;
  right: -15px;
  top: -3px
}
.contents .menu-detail .item .headline-col .text .icon-col p:last-child {
  margin-right: 0
}
.contents .menu-detail .item .headline-col .text .icon-col p:last-child:after {
  content: none
}
.contents .menu-detail .item .headline-col .text .price {
  font-size: 20px;
  text-align: right
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .headline-col .text .price {
    font-size: 16px;
    text-align: left;
    order: 1
  }
}
.contents .menu-detail .item .headline-col .text .price span {
  font-size: 12px
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .headline-col .text .price span {
    font-size: 11px
  }
}
.contents .menu-detail .item .inner {
  display: flex;
  justify-content: space-between
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .inner {
    display: block
  }
}
.contents .menu-detail .item .inner .image {
  width: 490px
}
@media only screen and (max-width:1130px) {
  .contents .menu-detail .item .inner .image {
    width: 280px;
    margin-right: 25px
  }
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .inner .image {
    width: 100%;
    margin-bottom: 25px;
    margin-right: 0
  }
}
.contents .menu-detail .item .inner .text {
  width: 540px
}
@media only screen and (max-width:1024px) {
  .contents .menu-detail .item .inner .text {
    width: calc(100% - 280px)
  }
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .inner .text {
    width: 100%
  }
}
.contents .menu-detail .item .inner .text table {
  width: 100%;
  margin-bottom: 20px
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .inner .text table {
    margin-bottom: 15px;
    border: 1px solid #d1d4d7
  }
}
.contents .menu-detail .item .inner .text table tr {
  text-align: left
}
.contents .menu-detail .item .inner .text table td, .contents .menu-detail .item .inner .text table th {
  padding: 15px 15px;
  border-top: 1px solid #d1d4d7;
  border-bottom: 1px solid #d1d4d7
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .inner .text table td, .contents .menu-detail .item .inner .text table th {
    border-top: none;
    border-bottom: none
  }
}
@media only screen and (max-width:360px) {
  .contents .menu-detail .item .inner .text table td, .contents .menu-detail .item .inner .text table th {
    padding: 15px 10px
  }
}
.contents .menu-detail .item .inner .text table th {
  width: 25%;
  background-color: #f7f7f7
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .inner .text table th {
    width: 100%;
    display: block
  }
}
@media only screen and (max-width:320px) {
  .contents .menu-detail .item .inner .text table th {
    font-size: 12px
  }
}
.contents .menu-detail .item .inner .text table td {
  width: 75%
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .inner .text table td {
    width: 100%;
    display: block
  }
}
.contents .menu-detail .item .inner .text .caution {
  font-size: 12px;
}
.contents .menu-detail .item .reserve_button {
  width: 31.5%;
  text-align: center;
  margin: 20px auto 0;
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .reserve_button {
    width: 100%;
    margin-bottom: 10px
  }
}
.contents .menu-detail .item .reserve_button a {
  display: block;
  border: 1px solid #000;
  padding: 12px 0 14px;
  position: relative
}

.contents .menu-detail .item .inner .text .comment {
  margin-bottom: 35px;
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .inner .text .comment {
    margin-bottom: 20px
  }
}
.contents .menu-detail .item .inner .text .detail {
  margin-top: 45px;
  padding: 30px 0;
  border-top: 1px solid #d1d4d7;
  border-bottom: 1px solid #d1d4d7
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .inner .text .detail {
    margin-top: 35px;
    padding: 20px 0
  }
}
.contents .menu-detail .item .inner .text .detail h3 {
  font-size: 16px;
  margin-bottom: 20px
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .inner .text .detail h3 {
    font-size: 14px;
    margin-bottom: 10px
  }
}
.contents .menu-detail .item .inner .text .detail ul {
  display: flex;
  flex-wrap: wrap
}
.contents .menu-detail .item .inner .text .detail ul li {
  margin-right: 25px;
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .inner .text .detail ul li {
    display: block;
    width: 100%;
    padding-left: 15px;
    margin-bottom: 5px
  }
}
.contents .menu-detail .item .inner .text .detail ul li:before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #e2e2e2;
  position: absolute;
  left: 0;
  top: 5px
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .inner .text .detail ul li:before {
    width: 10px;
    height: 10px
  }
}
.contents .menu-detail .item .inner .text .detail ul li span {
  font-size: 13px
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .inner .text .detail ul li span {
    font-size: 11px
  }
}
.contents .menu-detail .item .inner .text .detail ul li.menu {
  display: flex;
  flex-wrap: wrap
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .inner .text .detail ul li.menu {
    display: block
  }
}
.contents .menu-detail .item .inner .text .detail ul li.menu .name {
  padding-right: 15px;
  position: relative
}
.contents .menu-detail .item .inner .text .detail ul li.menu .name:after {
  content: "：";
  color: #000;
  position: absolute;
  right: 0
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .inner .text .detail ul li.menu .name:after {
    content: none
  }
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .inner .text .detail ul li.menu .name-detail {
    font-size: 11px
  }
}
.contents .menu-detail .item .inner .text .detail.type02 {
  margin: 0 0 20px
}
@media only screen and (max-width:767px) {
  .contents .menu-detail .item .inner .text .detail.type02 {
    margin-bottom: 15px
  }
}
.contents .menu-detail .item .inner .text .detail.type02 ul {
  display: block
}
.contents .button-col {
  border-top: 1px solid #d1d4d7;
  padding-top: 45px
}
@media only screen and (max-width:767px) {
  .contents .button-col {
    padding-top: 0;
    border-top: none
  }
}
.contents .button-col ul {
  display: flex;
  /*justify-content: space-between*/
	justify-content: center;
	gap: 2.75%;
}
@media only screen and (max-width:767px) {
  .contents .button-col ul {
    display: block
  }
}
.contents .button-col ul li {
  width: 31.5%;
  text-align: center
}
@media only screen and (max-width:767px) {
  .contents .button-col ul li {
    width: 100%;
    margin-bottom: 10px
  }
}
.contents .button-col ul li a {
  display: block;
  border: 1px solid #000;
  padding: 12px 0 14px;
  position: relative
}
.contents .contact {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  border-top: 1px solid #d1d4d7;
  padding-top: 75px;
  margin-top: 155px
}
@media only screen and (max-width:1024px) {
  .contents .contact {
    margin-top: 105px;
    padding-top: 55px
  }
}
@media only screen and (max-width:767px) {
  .contents .contact {
    margin-top: 75px;
    padding-top: 45px
  }
  .contents .contact .banner {
    padding: 0 20px
  }
}