/* 役割: TOP固有セクションの共通／ページ表示・処理。
 * 利用ページ: TOP（日英）。
 * 関係する棚: S01共通土台・S04日英・S05予約・S10履歴・S12TOP・S16導入。
 * 注意: 詳細度・media・JS実行位置を保持。!important変更は証拠台帳に限定。P/U置換依存は変更しない。placement.jsonと地図の更新.mdを参照。TOP日英。S03/S04/S10/vendorに依存。P12開始タグ・seogeo-style id・CMS除去ID・spanのエスケープ保持。区画を元slotへ生成。PHP spacingは旧release互換。検査: test/run.py。対応表: placement.json。
 */
html body #loma-cuisine-entry a.cuisine-photo-link {
  --loma-cta-unit: 1px;
  --loma-cta-width: 200;
  --loma-cta-height: 45;
  --loma-cta-font: 14;
  --loma-cta-left: 15;
  --loma-cta-right: 15;
  --loma-cta-right-hover: 10;
  --loma-cta-arrow-width: 7;
  --loma-cta-arrow-height: 8;
  --loma-cta-border: 1;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: calc(var(--loma-cta-unit)*var(--loma-cta-width));
  max-width: 100%;
  height: calc(var(--loma-cta-unit)*var(--loma-cta-height));
  min-width: 0;
  min-height: 0;
  gap: 0;
  isolation: auto;
  overflow: visible;
  pointer-events: auto;
  font-family: yu-gothic-pr6n,sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: calc(var(--loma-cta-unit)*var(--loma-cta-font));
  line-height: 2;
  letter-spacing: normal;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .26s cubic-bezier(.445,.05,.55,.95),color .26s cubic-bezier(.445,.05,.55,.95);
}
html body #local-top-appeal a {
  --loma-cta-unit: 1px;
  --loma-cta-width: 200;
  --loma-cta-height: 45;
  --loma-cta-font: 14;
  --loma-cta-left: 15;
  --loma-cta-right: 15;
  --loma-cta-right-hover: 10;
  --loma-cta-arrow-width: 7;
  --loma-cta-arrow-height: 8;
  --loma-cta-border: 1;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: calc(var(--loma-cta-unit)*var(--loma-cta-width));
  max-width: 100%;
  height: calc(var(--loma-cta-unit)*var(--loma-cta-height));
  min-width: 0;
  min-height: 0;
  margin-left: 0;
  margin-right: 0;
  gap: 0;
  isolation: auto;
  overflow: visible;
  pointer-events: auto;
  font-family: yu-gothic-pr6n,sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: calc(var(--loma-cta-unit)*var(--loma-cta-font));
  line-height: 2;
  letter-spacing: normal;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .26s cubic-bezier(.445,.05,.55,.95),color .26s cubic-bezier(.445,.05,.55,.95);
}
html[lang="en"] body #loma-cuisine-entry a.cuisine-photo-link,
html[lang="en"] body #local-top-appeal a {
  font-family: Valky,serif;
}
html body #loma-cuisine-entry a.cuisine-photo-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: #000;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body #loma-cuisine-entry a.cuisine-photo-link>span {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  gap: 0;
  padding: 0 calc(var(--loma-cta-unit)*30) 0 calc(var(--loma-cta-unit)*var(--loma-cta-left));
  border: calc(var(--loma-cta-unit)*var(--loma-cta-border)) solid #0003;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: transparent;
  pointer-events: auto;
  transition: background-color .26s cubic-bezier(.445,.05,.55,.95),color .26s cubic-bezier(.445,.05,.55,.95);
}
html body #local-top-appeal a {
  padding: 0 calc(var(--loma-cta-unit)*30) 0 calc(var(--loma-cta-unit)*var(--loma-cta-left));
  border: calc(var(--loma-cta-unit)*var(--loma-cta-border)) solid #ffffff80;
  color: #fff;
  background: transparent;
}
html body #local-top-appeal a span {
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
html body #loma-cuisine-entry a.cuisine-photo-link>span::after,
html body #local-top-appeal a::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: calc(var(--loma-cta-unit)*var(--loma-cta-right));
  bottom: auto;
  left: auto;
  width: calc(var(--loma-cta-unit)*var(--loma-cta-arrow-width));
  height: calc(var(--loma-cta-unit)*var(--loma-cta-arrow-height));
  border: 0;
  margin: 0;
  padding: 0;
  flex: none;
  align-self: auto;
  background: currentColor;
  clip-path: polygon(0 0,100% 50%,0 100%);
  transform: translateY(-50%);
  translate: 0 0 !important;
  transition: right .36s cubic-bezier(.445,.05,.55,.95),background-color .26s cubic-bezier(.445,.05,.55,.95);
}
html body #loma-cuisine-entry a.cuisine-photo-link::before,
html body #loma-cuisine-entry a.cuisine-photo-link::after {
  content: none;
}
@media (hover:hover) {
  html body #loma-cuisine-entry a.cuisine-photo-link:hover>span {
    background: #000;
    color: #fff;
  }
  html body #local-top-appeal a:hover {
    background: #fff !important;
    color: #000 !important;
  }
  html body #loma-cuisine-entry a.cuisine-photo-link:hover>span::after,
html body #local-top-appeal a:hover::after {
    right: calc(var(--loma-cta-unit)*var(--loma-cta-right-hover));
  }
}
@media (hover:none) {
  html body #local-top-appeal a:hover {
    background: transparent;
    color: #fff;
  }
}
html body #loma-cuisine-entry a.cuisine-photo-link:focus-visible {
  outline: none;
}
html body #loma-cuisine-entry a.cuisine-photo-link:focus-visible>span {
  outline: 2px solid #000;
  outline-offset: 4px;
  background: #000;
  color: #fff;
}
html body #local-top-appeal a:focus-visible {
  outline: 2px solid #d2cbba;
  outline-offset: 4px;
  background: #fff !important;
  color: #000 !important;
}
html body #loma-cuisine-entry a.cuisine-photo-link:focus-visible>span::after,
html body #local-top-appeal a:focus-visible::after {
  right: calc(var(--loma-cta-unit)*var(--loma-cta-right-hover));
}
@media (min-width:769px) and (max-width:1279px) {
  html body #loma-cuisine-entry a.cuisine-photo-link,
html body #local-top-appeal a {
    --loma-cta-unit: calc((100vw - var(--scrollbar,0px))/1280);
  }
}
@media (max-width:768px) {
  html body #loma-cuisine-entry a.cuisine-photo-link,
html body #local-top-appeal a {
    --loma-cta-unit: calc((100vw - var(--scrollbar,0px))/750);
    --loma-cta-width: 380;
    --loma-cta-height: 90;
    --loma-cta-font: 28;
    --loma-cta-left: 27;
    --loma-cta-right: 30;
    --loma-cta-right-hover: 20;
    --loma-cta-arrow-width: 13;
    --loma-cta-arrow-height: 15;
    --loma-cta-border: 2;
  }
}
@media (prefers-reduced-motion:reduce) {
  html body #loma-cuisine-entry a.cuisine-photo-link,
html body #loma-cuisine-entry a.cuisine-photo-link>span,
html body #local-top-appeal a,
html body #loma-cuisine-entry a.cuisine-photo-link>span::after,
html body #local-top-appeal a::after {
    transition: none !important;
  }
  html body #loma-cuisine-entry a.cuisine-photo-link:hover>span::after,
html body #local-top-appeal a:hover::after,
html body #loma-cuisine-entry a.cuisine-photo-link:focus-visible>span::after,
html body #local-top-appeal a:focus-visible::after {
    right: calc(var(--loma-cta-unit)*var(--loma-cta-right));
  }
}

