/* DINING
*****************************************************************/
/* mixin
********************************************************************/
/* color */
/* media query */
#contents {
  background-image: url("../images/bg_sakura.svg");
  background-position: center 20px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  position: relative;
}
@media all and (max-width: 899px) {
  #contents {
    background-position: center 0px;
    background-size: 130% auto;
  }
}

.area_images {
  padding: 80px 0 0;
}
.area_images ul {
  display: flex;
}
.area_images ul li {
  line-height: 0em;
}
.area_images ul li img {
  width: 100%;
  height: auto;
}

.area_restaurant {
  padding: 0 20px;
}
.area_restaurant .block_ttl {
  text-align: center;
  padding: 70px 0 0;
}
@media all and (max-width: 899px) {
  .area_restaurant .block_ttl {
    padding: 30px 0 0;
  }
}
.area_restaurant .block_ttl .box_copy {
  padding: 30px 0 0;
  display: inline-block;
}
@media all and (max-width: 899px) {
  .area_restaurant .block_ttl .box_copy {
    padding: 10px 0 0;
  }
}
.area_restaurant .block_ttl .box_copy p {
  font-size: 1.5rem;
  line-height: 1.8em;
  text-align: left;
}
.area_restaurant .block_dining {
  max-width: 1200px;
  margin: 0 auto;
}
.area_restaurant .block_dining ul li {
  padding: 50px 0;
  position: relative;
}
@media all and (max-width: 899px) {
  .area_restaurant .block_dining ul li {
    padding: 20px 0;
  }
}
.area_restaurant .block_dining ul li .box_fluid {
  position: absolute;
  top: 50px;
  right: 50px;
  width: 50%;
}
@media all and (max-width: 899px) {
  .area_restaurant .block_dining ul li .box_fluid {
    width: calc(100% + 40px);
    right: -20px;
    top: auto;
    bottom: 20px;
  }
}
.area_restaurant .block_dining ul li .box_fluid img {
  width: 100%;
  height: auto;
}
.area_restaurant .block_dining ul li .box_dining {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}
.area_restaurant .block_dining ul li .box_dining .side_img {
  line-height: 0em;
  width: 50%;
}
@media all and (max-width: 899px) {
  .area_restaurant .block_dining ul li .box_dining .side_img {
    width: 100%;
  }
}
.area_restaurant .block_dining ul li .box_dining .side_img img {
  width: 100%;
  height: auto;
}
.area_restaurant .block_dining ul li .box_dining .side_txt {
  width: 47%;
}
@media all and (max-width: 899px) {
  /* fixes: each dining section (urara/AO/manka) needs title -> image -> description order on mobile (refined from an earlier title+description-then-image attempt same day). DOM order is side_img then side_txt(h3+h4+p) as one flex item, which can't be split before/after side_img with order alone. display:contents promotes side_txt's children to be direct flex items of .box_dining so h3 can sit before side_img and h4/p after it (user request 2026-08-26) */
  .area_restaurant .block_dining ul li .box_dining .side_txt {
    display: contents;
  }
  .area_restaurant .block_dining ul li .box_dining .side_txt h3 {
    order: -1;
    width: 100%;
  }
  .area_restaurant .block_dining ul li .box_dining .side_txt h4,
  .area_restaurant .block_dining ul li .box_dining .side_txt p {
    order: 1;
    width: 100%;
  }
}
.area_restaurant .block_dining ul li .box_dining .side_txt h3 {
  font-size: 3rem;
  line-height: 1.2em;
  padding: 0 0 10px;
  border-bottom: #666 dotted 1px;
}
@media all and (max-width: 899px) {
  .area_restaurant .block_dining ul li .box_dining .side_txt h3 {
    font-size: 2.4rem;
  }
}

/* fixes: manka h3 title "料理茶寮 万華 / 和食ダイニング" wrapped with a lone trailing character ("グ") on mobile widths (375px needed <=22px, 320px needed <=18px to fit on one line). Scoped to #manka only so urara/AO titles (which already fit) are untouched (user request 2026-08-26) */
@media all and (max-width: 899px) {
  #manka .side_txt h3,
  #manka-pattern-b .side_txt h3 {
    font-size: clamp(1.8rem, calc((100vw - 80px) * 0.073), 2.4rem);
  }
}
.area_restaurant .block_dining ul li .box_dining .side_txt h3 span {
  font-size: 0.7em;
  padding: 0 0.8em 0 0;
}
.area_restaurant .block_dining ul li .box_dining .side_txt h4 {
  padding: 10px 0 0;
  font-size: 2rem;
  line-height: 1.6em;
}
@media all and (max-width: 899px) {
  .area_restaurant .block_dining ul li .box_dining .side_txt h4 {
    font-size: 1.8rem;
  }
}
.area_restaurant .block_dining ul li .box_dining .side_txt p {
  padding: 10px 0 0;
  font-size: 1.5rem;
  line-height: 1.8em;
}
.area_restaurant .block_dining ul li .box_images ul {
  padding: 20px 0;
  margin: 0 -20px;
  display: flex;
  flex-wrap: wrap;
}
@media all and (max-width: 899px) {
  .area_restaurant .block_dining ul li .box_images ul {
    padding: 5px 0;
    margin: 0 -5px;
  }
}
.area_restaurant .block_dining ul li .box_images ul li {
  padding: 20px;
  box-sizing: border-box;
  width: 33.3333%;
}
@media all and (max-width: 899px) {
  .area_restaurant .block_dining ul li .box_images ul li {
    padding: 5px;
    width: 50%;
  }
}
.area_restaurant .block_dining ul li .box_images ul li img {
  width: 100%;
  height: auto;
}
.area_restaurant .block_dining ul li:nth-child(even) .box_fluid {
  right: auto;
  left: 50px;
}
@media all and (max-width: 899px) {
  .area_restaurant .block_dining ul li:nth-child(even) .box_fluid {
    left: -20px;
  }
}
.area_restaurant .block_dining ul li:nth-child(even) .box_dining {
  flex-direction: row-reverse;
}
.area_restaurant .block_dining .btn_daytrip {
  max-width: 300px;
  padding: 20px 0 0;
  margin: 0 auto;
}
@media all and (max-width: 899px) {
  .area_restaurant .block_dining .btn_daytrip {
    padding: 10px 0 0;
  }
}
.area_restaurant .block_dining .btn_daytrip a {
  padding: 13px 0;
  position: relative;
}
.area_restaurant .block_dining .btn_daytrip a::after {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: "\f152";
  position: absolute;
  top: 48%;
  transform: translateY(-48%);
  right: 7px;
  font-size: 0.9em;
}

.area_allergies {
  padding: 0 20px;
  border-bottom: #666 dotted 1px;
}
.area_allergies .block_allergies {
  max-width: 920px;
  margin: 100px auto;
  border: solid 1px #C5C5C5;
}
@media all and (max-width: 899px) {
  .area_allergies .block_allergies {
    margin: 30px 0;
  }
}
.area_allergies .block_allergies h2 {
  text-align: center;
  font-size: 3rem;
  line-height: 1.3em;
}
@media all and (max-width: 899px) {
  .area_allergies .block_allergies h2 {
    font-size: 2.4rem;
  }
}
.area_allergies .block_allergies .box_txt {
  padding: 20px 0 0;
}
@media all and (max-width: 899px) {
  .area_allergies .block_allergies .box_txt {
    padding: 4px 0 0;
  }
}
.area_allergies .block_allergies .box_txt p {
  font-size: 1.5rem;
  line-height: 2em;
  padding: 8px 0;
  text-align: justify;
}
@media all and (max-width: 899px) {
  .area_allergies .block_allergies .box_txt p {
    padding: 4px 0;
  }
}
.area_allergies .block_allergies .signature p {
  font-size: 1.5rem;
  line-height: 2em;
  padding: 8px 0;
  text-align: right;
}
.area_allergies .block_allergies .ttl_allergies {
  line-height: 1.4em;
  padding: 32px 30px 32px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}
.area_allergies .block_allergies .ttl_allergies:hover {
  background-color: rgba(255, 154, 0, 0.2);
}
.area_allergies .block_allergies .ttl_allergies::after {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: "\f13a";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
}
.area_allergies .block_allergies .ttl_allergies.open::after {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: "\f139";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
}
.area_allergies .block_allergies .box_inner {
  padding: 0 50px 50px 50px;
  border-top: none;
  display: none;
}
@media all and (max-width: 480px) {
  .area_allergies .block_allergies .box_inner {
    padding: 0 30px 30px 30px;
  }
}
.area_allergies .visible .box_inner {
  display: block;
}

/* ===== ������/���H���� �^�C�g�������idining�y�[�W�j ===== */
.area_header .block_heading {
  width: auto;
  padding: 0 30px;
}
.area_header .block_heading .inner h1 {
  white-space: nowrap;
}
@media all and (max-width: 899px) {
  .area_header .block_heading {
    padding: 0 16px;
  }
  .area_header .block_heading .inner h1 {
    font-size: 1.8rem;
  }
}

/* fixes v95 - the earlier fix above hid the too-pale fluid05.svg and replaced it with a flat radial-gradient tan circle, but a plain gradient with no texture still reads as a flat single color to the user (compared against TOP/onsen pages, which use a visible wave-pattern texture via bg_seigaiha.svg on .area_contact etc.). Layer that same seigaiha wave pattern, tiled, on top of the warm-tan gradient so this circle actually shows decoration instead of a flat tone */
.area_restaurant .block_dining ul li .box_fluid {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background-color: #ecdec0;
  background-image: radial-gradient(circle at 42% 38%, rgba(246,238,221,.85) 0%, rgba(217,195,147,.35) 100%), url("../../common/images/bg_seigaiha.svg");
  background-repeat: no-repeat, repeat;
  background-size: cover, 260px auto;
  background-position: center, center;
}
.area_restaurant .block_dining ul li .box_fluid img { display: none; }