/* 役割: Cuisineの共通／ページ表示・処理。
 * 利用ページ: Cuisine（日英）。
 * 関係する棚: S01共通土台・S04日英・S05予約・S10履歴・S12TOP・S16導入。
 * 注意: 詳細度・!important・media・JS実行位置を保持。P/U置換依存は変更しない。placement.jsonと地図の更新.mdを参照。区画コメントは生成位置との対応。区画を手作業で移動しない。
 */
#loma-cuisine-page .food-chapter {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 128px;
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  grid-template-rows: auto 1fr;
  column-gap: 28px;
  align-items: start;
  scroll-margin-top: 96px;
}
#loma-cuisine-page .food-chapter .chapter-heading {
  grid-column: 1/5;
  grid-row: 1;
  padding-top: 32px;
  min-width: 0;
}
#loma-cuisine-page .food-chapter .chapter-heading .english {
  font-size: clamp(44px,4.6vw,68px);
  line-height: 1.08;
}
#loma-cuisine-page .food-chapter .chapter-heading h2 {
  font-size: clamp(22px,2vw,30px);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .1em;
  margin-top: 20px;
}
html[lang=en] #loma-cuisine-page .food-chapter .chapter-heading h2 {
  letter-spacing: .035em;
}
#loma-cuisine-page .food-chapter .chapter-body {
  grid-column: 1/5;
  grid-row: 2;
  font-size: 15px;
  line-height: 2.3;
  margin-top: 20px;
  max-width: 25em;
  min-width: 0;
}
#loma-cuisine-page .food-chapter .photo-pair {
  grid-column: 5/13;
  grid-row: 1/3;
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  column-gap: 12px;
  min-width: 0;
  isolation: isolate;
}
#loma-cuisine-page .food-chapter .main-photo {
  grid-column: 3/13;
  grid-row: 1;
  min-width: 0;
}
#loma-cuisine-page .food-chapter .main-photo img {
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: 50% 50%;
}
#loma-cuisine-page .food-chapter .detail-photo {
  grid-column: 1/6;
  grid-row: 2;
  position: relative;
  z-index: 1;
  margin-top: -72px;
  padding: 12px 12px 0 0;
  background: #000;
  min-width: 0;
}
#loma-cuisine-page .food-chapter .detail-photo img {
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: 50% 50%;
}
#loma-cuisine-page .food-chapter--reverse .photo-pair {
  grid-column: 1/9;
}
#loma-cuisine-page .food-chapter--reverse .chapter-heading,
#loma-cuisine-page .food-chapter--reverse .chapter-body {
  grid-column: 9/13;
}
#loma-cuisine-page .food-chapter--reverse .main-photo {
  grid-column: 1/11;
}
#loma-cuisine-page .food-chapter--reverse .detail-photo {
  grid-column: 8/13;
  padding: 12px 0 0 12px;
}
#loma-cuisine-page #water .detail-photo img {
  object-position: 50% 18%;
}
@media (max-width:960px) {
  #loma-cuisine-page .food-chapter {
    display: flex;
    flex-direction: column;
    margin-bottom: 104px;
    scroll-margin-top: 96px;
  }
  #loma-cuisine-page .food-chapter .chapter-heading {
    order: 0;
    padding-top: 0;
    margin-bottom: 0;
    width: 100%;
    max-width: 34em;
  }
  #loma-cuisine-page .food-chapter .photo-pair {
    order: 2;
    width: 100%;
  }
  #loma-cuisine-page .food-chapter .chapter-body {
    order: 1;
    margin-top: 18px;
    margin-bottom: 28px;
    width: 100%;
    max-width: 32em;
  }
  #loma-cuisine-page .food-chapter .chapter-heading .english {
    font-size: 52px;
  }
  #loma-cuisine-page .food-chapter .chapter-heading h2 {
    font-size: 26px;
  }
}
@media (max-width:600px) {
  #loma-cuisine-page .food-chapter {
    width: 100%;
    margin-bottom: 88px;
    scroll-margin-top: 88px;
  }
  #loma-cuisine-page .food-chapter .chapter-heading {
    margin-bottom: 0;
  }
  #loma-cuisine-page .food-chapter .photo-pair {
    width: calc(100% + 48px);
    margin: 0 -24px;
    column-gap: 0;
  }
  #loma-cuisine-page .food-chapter .photo-pair .main-photo {
    grid-column: 1/13;
  }
  #loma-cuisine-page .food-chapter .photo-pair .detail-photo {
    grid-column: 6/13;
    margin-top: -44px;
    margin-right: 24px;
    padding: 10px 0 0 10px;
  }
  #loma-cuisine-page .food-chapter .chapter-heading .english {
    font-size: 46px;
  }
  #loma-cuisine-page .food-chapter .chapter-heading h2 {
    font-size: 22px;
    line-height: 1.8;
    margin-top: 14px;
  }
  #loma-cuisine-page .food-chapter .chapter-body {
    font-size: 14px;
    line-height: 2.2;
    margin-top: 18px;
    margin-bottom: 26px;
  }
}
#loma-cuisine-page {
  --side: clamp(24px,7.5vw,130px);
}
#loma-cuisine-page #top>.wrap {
  width: calc(100% - var(--side)*2);
  max-width: 1280px;
}
#loma-cuisine-page .chapter-heading .english {
  font-family: Valky,Georgia,serif;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
  color: #fff;
}
#loma-cuisine-page .food-chapter {
  border: 0;
  padding: 0;
}
#loma-cuisine-page .food-chapter img {
  display: block;
  width: 100%;
  height: auto;
}
#loma-cuisine-page .chapter-body {
  color: rgba(255,255,255,.72);
  letter-spacing: .08em;
}
#loma-cuisine-page .hero h1 {
  font-size: clamp(72px,9vw,144px);
}
#loma-cuisine-page .hero-copy>p {
  font-size: clamp(19px,1.8vw,28px);
}
#loma-cuisine-page .intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  text-align: left;
  padding: 112px 0 96px;
}
#loma-cuisine-page .intro h2 {
  font-size: clamp(22px,2.1vw,32px);
  line-height: 1.9;
  margin: 0;
  letter-spacing: .12em;
}
#loma-cuisine-page .intro>p {
  margin: 0;
  max-width: 31em;
  line-height: 2.3;
  letter-spacing: .08em;
}
#loma-cuisine-page .practical h2 {
  font-size: clamp(22px,2.3vw,32px);
}
@media (max-width:600px) {
  #loma-cuisine-page .hero h1 {
    font-size: 68px;
  }
  #loma-cuisine-page .hero-copy>p {
    font-size: 18px;
  }
  #loma-cuisine-page .intro {
    display: block;
    padding: 68px 0 65px;
  }
  #loma-cuisine-page .intro h2 {
    font-size: 21px;
    margin-bottom: 26px;
  }
  #loma-cuisine-page .intro h2 br {
    display: initial;
  }
  #loma-cuisine-page .intro>p {
    max-width: none;
    font-size: 14px;
    margin: 0;
  }
  #loma-cuisine-page .practical h2 {
    font-size: 23px;
  }
}
#loma-cuisine-page :is(#land,#fire,#water) {
  display: grid;
  grid-template-columns: minmax(0,3fr) minmax(0,5fr) minmax(0,3fr);
  grid-template-rows: auto auto;
  column-gap: clamp(24px,3.1vw,44px);
  row-gap: 0;
  align-items: start;
  isolation: isolate;
}
#loma-cuisine-page :is(#land,#fire,#water)>.chapter-heading {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  padding-top: 20px;
  width: auto;
  max-width: none;
  margin: 0;
  min-width: 0;
}
#loma-cuisine-page :is(#land,#fire,#water)>.chapter-body {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  width: auto;
  max-width: none;
  margin: 20px 0 0;
  padding-left: clamp(22px,2.8vw,40px);
  border-left: 1px solid rgba(255,255,255,.28);
  min-width: 0;
}
#loma-cuisine-page :is(#land,#fire,#water)>.photo-pair {
  display: contents;
}
#loma-cuisine-page :is(#land,#fire,#water) .photo-pair>.main-photo {
  grid-column: 1/4;
  grid-row: 2;
  position: relative;
  z-index: 0;
  width: 80.5%;
  min-width: 0;
  margin: clamp(52px,5.6vw,80px) 0 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
}
#loma-cuisine-page :is(#land,#fire,#water) .photo-pair>.detail-photo {
  grid-column: 3;
  grid-row: 1/3;
  align-self: start;
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
}
#loma-cuisine-page :is(#land,#fire,#water) .photo-pair>figure>img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
}
#loma-cuisine-page :is(#land,#fire,#water) .photo-pair>.main-photo>img {
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: 50% 50%;
}
#loma-cuisine-page :is(#land,#fire,#water) .photo-pair>.detail-photo>img {
  aspect-ratio: 5/9;
  object-fit: cover;
  object-position: 50% 50%;
}
#loma-cuisine-page #land .photo-pair>.detail-photo>img {
  object-position: 32% 50%;
}
#loma-cuisine-page #water .photo-pair>.detail-photo>img {
  object-position: 50% 18%;
}
#loma-cuisine-page #fire.food-chapter--reverse>.chapter-heading {
  grid-column: 3;
}
#loma-cuisine-page #fire.food-chapter--reverse>.chapter-body {
  padding-left: 0;
  padding-right: clamp(22px,2.8vw,40px);
  border-left: 0;
  border-right: 1px solid rgba(255,255,255,.28);
}
#loma-cuisine-page #fire.food-chapter--reverse .photo-pair>.main-photo {
  margin-left: auto;
  margin-right: 0;
}
#loma-cuisine-page #fire.food-chapter--reverse .photo-pair>.detail-photo {
  grid-column: 1;
}
@media (max-width:960px) {
  #loma-cuisine-page :is(#land,#fire,#water) {
    display: flex;
    flex-direction: column;
  }
  #loma-cuisine-page :is(#land,#fire,#water)>.chapter-heading {
    order: 0;
    width: 100%;
    max-width: none;
    padding-top: 0;
    margin: 0;
  }
  #loma-cuisine-page :is(#land,#fire,#water)>.chapter-body {
    order: 1;
    width: 100%;
    max-width: 36em;
    margin: 18px 0 28px;
    padding: 0;
    border: 0;
  }
  #loma-cuisine-page :is(#land,#fire,#water)>.photo-pair {
    order: 2;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  #loma-cuisine-page :is(#land,#fire,#water) .photo-pair>.main-photo {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  #loma-cuisine-page :is(#land,#fire,#water) .photo-pair>.detail-photo {
    width: 62%;
    max-width: 340px;
    margin: 24px 0 0 auto;
    padding: 0;
  }
  #loma-cuisine-page :is(#land,#fire,#water) .photo-pair>.detail-photo>img {
    aspect-ratio: 4/3;
    object-position: 50% 50%;
  }
  #loma-cuisine-page #fire.food-chapter--reverse>.chapter-body {
    padding: 0;
    border: 0;
  }
  #loma-cuisine-page #fire.food-chapter--reverse .photo-pair>.detail-photo {
    margin-left: 0;
    margin-right: auto;
  }
}
@media (max-width:600px) {
  #loma-cuisine-page :is(#land,#fire,#water)>.chapter-body {
    max-width: none;
    margin-bottom: 26px;
  }
  #loma-cuisine-page :is(#land,#fire,#water)>.photo-pair {
    width: 100%;
    margin: 0;
  }
  #loma-cuisine-page :is(#land,#fire,#water) .photo-pair>.detail-photo {
    width: 72%;
    max-width: 280px;
    margin-top: 18px;
  }
}
@media (max-width:350px) {
  #loma-cuisine-page .hero h1 {
    font-size: 50px;
  }
}