/* v1.14から維持するタップ・スクロール・状態・reduce演出。 */

/* 全数値は元のraw宣言。QA未合格の外部候補。 */

@keyframes m-fv-pop {from{scale:.9}to{scale:1}}

@keyframes m-fv-stamp {from{scale:1.04;rotate:-3deg}to{scale:1;rotate:0deg}}

@keyframes m-fv-ribbon {from{scale:.96;translate:0 3px}to{scale:1;translate:0 0}}

@keyframes tap-ink {from{scale:0;opacity:1}to{scale:var(--ink-scale,60);opacity:0}}

@keyframes nav-turn {to{rotate:1turn}}

@keyframes faq-answer {from{opacity:.4;translate:0 -4px}to{opacity:1;translate:0 0}}

@keyframes tap-sheen {0%{translate:0 0;opacity:0}15%{opacity:1}85%{opacity:1}100%{translate:500% 0;opacity:0}}

html.motion [data-m] {
  transition-property:opacity,translate,scale,rotate,clip-path;
  transition-duration:360ms;
  transition-timing-function:var(--m-ease-out);
  transition-delay:var(--m-delay,calc(var(--m-i,0)*var(--m-stagger)));
}

html.motion [data-m].is-in:not(.m-running) {
  transition:none;
}

html.motion [data-m="rise"] {
  transition-duration:var(--m-dur-m);
}

html.motion [data-m="rise"]:not(.is-in) {
  opacity:0;
  translate:0 14px;
}

html.motion [data-m="rise-soft"] {
  transition-duration:var(--m-dur-m);
}

html.motion [data-m="rise-soft"]:not(.is-in) {
  opacity:.6;
  translate:0 10px;
}

html.motion [data-m="settle"] {
  transition-duration:var(--m-dur-l);
}

html.motion [data-m="settle"]:not(.is-in) {
  opacity:.6;
  translate:0 18px;
  rotate:1.5deg;
}

html.motion [data-m="pop"] {
  transition-duration:420ms;
  transition-timing-function:var(--m-ease-pop);
}

html.motion [data-m="pop"]:not(.is-in) {
  opacity:0;
  scale:.9;
}

html.motion [data-m^="wipe"] {
  transition-duration:520ms;
}

html.motion [data-m^="wipe"].m-running.is-in {
  clip-path:inset(0)!important; /* 理由: 状態または実行時DOMの優先度を保持 / 同時適用するimportant宣言との元の勝者を維持: [data-ornament] / 同時適用するimportant宣言との元の勝者を維持: [data-pc-ornament] / 同時適用するimportant宣言との元の勝者を維持: html.motion [data-m="wipe-r"]:not(.is-in) / 同時適用するimportant宣言との元の勝者を維持: html.motion [data-m="wipe-l"]:not(.is-in) */
}

html.motion [data-m="wipe-r"]:not(.is-in) {
  clip-path:inset(0 100% 0 0)!important; /* 理由: 状態または実行時DOMの優先度を保持 / 同時適用するimportant宣言との元の勝者を維持: [data-ornament] / 同時適用するimportant宣言との元の勝者を維持: [data-pc-ornament] / 同時適用するimportant宣言との元の勝者を維持: html.motion [data-m^="wipe"].m-running.is-in */
}

html.motion [data-m="wipe-l"]:not(.is-in) {
  clip-path:inset(0 0 0 100%)!important; /* 理由: 状態または実行時DOMの優先度を保持 / 同時適用するimportant宣言との元の勝者を維持: html.motion [data-m^="wipe"].m-running.is-in */
}

html.motion [data-m="wipe-u"]:not(.is-in) {
  clip-path:inset(100% 0 0 0)!important; /* 理由: 状態または実行時DOMの優先度を保持 / 同時適用するimportant宣言との元の勝者を維持: html.motion [data-m^="wipe"].m-running.is-in */
}

html.motion [data-m="wipe-d"]:not(.is-in) {
  clip-path:inset(0 0 100% 0)!important; /* 理由: 状態または実行時DOMの優先度を保持 / 同時適用するimportant宣言との元の勝者を維持: html.motion [data-m^="wipe"].m-running.is-in */
}

html.motion [data-m="wipe-c"]:not(.is-in) {
  clip-path:inset(0 50% 0 50%)!important; /* 理由: 状態または実行時DOMの優先度を保持 */
}

html.motion [data-m="stamp"] {
  transition-timing-function:var(--m-ease-pop);
}

html.motion [data-m="stamp"]:not(.is-in) {
  opacity:0;
  scale:1.04;
  rotate:-3deg;
}

html.motion [data-m="fade"]:not(.is-in) {
  opacity:0;
  translate:0 6px;
}

html.motion [data-m="fade"][data-m-group$="-heading"]:not(.is-in) {
  translate:0 8px;
}

html.motion .m-running {
  will-change:opacity,translate,scale,rotate,clip-path;
}

html.motion .pc-flow-steps::before {
  transition:scale 400ms var(--m-ease-out);
  transition-delay:420ms;
  transform-origin:left;
}

html.motion .pc-flow-steps:not(.is-in)::before {
  scale:0 1;
}

html.motion .sp-flow-steps li::before {
  transition:scale 400ms var(--m-ease-out);
  transition-delay:420ms;
  transform-origin:top;
}

html.motion .sp-flow-steps:not(.is-in) li::before {
  scale:1 0;
}

html.motion .sp-flow-steps li:nth-child(2)::before {
  transition-delay:840ms;
}

html.motion .m-fv-play {
  animation:m-fv-pop 420ms var(--m-ease-pop) var(--m-fv-delay,0ms);
}

html.motion .m-fv-play[data-m-fv="stamp"] {
  animation-name:m-fv-stamp;
  animation-duration:360ms;
}

html.motion .m-fv-play[data-m-fv="wipe-c"] {
  animation-name:m-fv-ribbon;
  animation-duration:520ms;
}

@media(prefers-reduced-motion:reduce) {
  html.motion [data-m] {
    transition:none!important; /* 理由: 状態または実行時DOMの優先度を保持 / prefers-reduced-motionで既存演出を停止 */
  }
}

@media(prefers-reduced-motion:reduce) {
  html.motion .m-fv-play {
    animation:none!important; /* 理由: 状態または実行時DOMの優先度を保持 / prefers-reduced-motionで既存演出を停止 / 通常宣言の詳細度/順序を打ち消す: html.motion .m-fv-play[data-m-fv="stamp"] / 通常宣言の詳細度/順序を打ち消す: html.motion .m-fv-play[data-m-fv="wipe-c"] / 通常宣言の詳細度/順序を打ち消す: html.tap-motion .tap-ink.is-on */
  }
}

@media print {
  html.motion [data-m] {
    transition:none!important; /* 理由: 状態または実行時DOMの優先度を保持 / 通常宣言の詳細度/順序を打ち消す: html:not([data-plan-still]) a[data-plan-zoom].p1-nagao-original>span */
    animation:none!important; /* 理由: 状態または実行時DOMの優先度を保持 */
  }
}

.tap-relative {
  position:relative;
}

.tap-frame {
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}

.tap-target {
  transition:scale var(--m-dur-release,180ms) var(--m-ease-press,ease),translate 180ms var(--m-ease-press,ease),box-shadow 180ms;
}

.button:active {
  filter:none;
  transform:none;
}

.button.pc-reserve-request:active {
  transform:translateX(-50%);
}

.button--tel:active {
  background-color:color-mix(in srgb,var(--c-navy) 88%,black);
}

.button--web:active {
  background-color:color-mix(in srgb,var(--c-terracotta) 88%,var(--c-navy));
}

.button--request:active {
  background-color:color-mix(in srgb,var(--c-ivory) 90%,var(--c-navy));
}

.button--map:active {
  background-color:color-mix(in srgb,var(--c-ivory) 90%,var(--c-navy));
}

.pc-access-map:active {
  background-color:color-mix(in srgb,var(--c-ivory) 90%,var(--c-navy));
}

.sp-map:active {
  background-color:color-mix(in srgb,var(--c-ivory) 90%,var(--c-navy));
}

:is(.request-link,.sp-request,.pc-request):active {
  color:var(--c-terracotta);
}

html.tap-motion .tap-target:active {
  scale:.97;
  box-shadow:0 2px 6px rgb(34 57 92/.08);
  transition-duration:var(--m-dur-press,110ms);
}

.tap-ink {
  position:absolute;
  left:var(--ink-x);
  top:var(--ink-y);
  width:8px;
  height:8px;
  margin:-4px 0 0 -4px;
  border-radius:50%;
  background:rgb(255 255 255/.18);
  scale:0;
  opacity:0;
  pointer-events:none;
}

html.tap-motion .tap-ink.is-on {
  animation:tap-ink 420ms var(--m-ease-out,ease);
}

.is-navigating>.icon>:not(.nav-spinner) {
  opacity:0!important; /* 理由: 状態または実行時DOMの優先度を保持 / 同時適用するimportant宣言との元の勝者を維持: [data-pc-art-icon]>.pc-art-icon-picture */
}

.nav-icon-relative {
  position:relative;
}

.nav-spinner {
  position:absolute;
  display:block;
  box-sizing:border-box;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  pointer-events:none;
}

html.tap-motion .nav-spinner {
  animation:nav-turn 700ms linear infinite;
}

#faq summary:active {
  background-color:rgb(34 57 92/.07);
}

html.tap-motion #faq summary {
  transition:background-color 120ms;
}

html.tap-motion #faq .faq-symbol>.icon {
  grid-area:1/1;
  transition:rotate 200ms var(--m-ease-out,ease),opacity 200ms;
}

html.tap-motion #faq .faq-minus {
  display:inline-flex;
  rotate:-90deg;
  opacity:0;
}

html.tap-motion #faq details[open] .faq-plus {
  display:inline-block;
  rotate:90deg;
  opacity:0;
}

html.tap-motion #faq details[open] .faq-minus {
  rotate:none;
  opacity:1;
}

html.tap-motion #faq .faq-opening .faq-answer {
  animation:faq-answer 200ms var(--m-ease-out,ease);
}

@supports (interpolate-size:allow-keywords) and selector(details::details-content) {
  html.tap-motion #faq details {
    interpolate-size:allow-keywords;
  }
}

@supports (interpolate-size:allow-keywords) and selector(details::details-content) {
  html.tap-motion #faq details::details-content {
    block-size:0;
    overflow:clip;
    transition:block-size 240ms var(--m-ease-out,ease),content-visibility 240ms allow-discrete;
  }
}

@supports (interpolate-size:allow-keywords) and selector(details::details-content) {
  html.tap-motion #faq details[open]::details-content {
    block-size:auto;
  }
}

@media(max-width:1023px) {
  #sticky-booking-bar {
    display:grid;
    translate:0 100%;
    visibility:hidden;
  }
}

@media(max-width:1023px) {
  #sticky-booking-bar.is-visible {
    translate:0 0;
    visibility:visible;
  }
}

@media(max-width:1023px) {
  html.tap-motion #sticky-booking-bar {
    transition:translate 240ms var(--m-ease-out,ease),visibility 240ms;
  }
}

.tap-sheen {
  position:absolute;
  left:-35%;
  top:-40%;
  width:30%;
  height:180%;
  rotate:-18deg;
  background:rgb(255 255 255/.18);
  opacity:0;
  pointer-events:none;
}

html.tap-motion .tap-sheen.is-on {
  animation:tap-sheen 600ms var(--m-ease-out,ease);
}

@media(hover:hover) and (pointer:fine) {
  html.tap-motion .tap-target:hover {
    translate:0 -2px;
    box-shadow:0 4px 12px rgb(34 57 92/.16);
  }
}

@media(hover:hover) and (pointer:fine) {
  html.tap-motion .tap-target:active {
    translate:0 0;
    box-shadow:0 2px 6px rgb(34 57 92/.08);
  }
}

@media(hover:hover) and (pointer:fine) {
  .button:hover {
    filter:none;
  }
}

@media(hover:hover) and (pointer:fine) {
  html.tap-motion :is(.button--map,.pc-access-map,.sp-map) .icon {
    transition:translate 180ms var(--m-ease-press,ease);
  }
}

@media(hover:hover) and (pointer:fine) {
  html.tap-motion .button--map::after {
    transition:translate 180ms var(--m-ease-press,ease);
  }
}

@media(hover:hover) and (pointer:fine) {
  html.tap-motion .sp-map>[aria-hidden] {
    transition:translate 180ms var(--m-ease-press,ease);
  }
}

@media(hover:hover) and (pointer:fine) {
  html.tap-motion .site-footer__properties a::after {
    transition:translate 180ms var(--m-ease-press,ease);
  }
}

@media(hover:hover) and (pointer:fine) {
  html.tap-motion :is(.button--map,.pc-access-map,.sp-map):hover .icon {
    translate:0 -2px;
  }
}

@media(hover:hover) and (pointer:fine) {
  html.tap-motion .button--map:hover::after {
    translate:3px 0;
  }
}

@media(hover:hover) and (pointer:fine) {
  html.tap-motion .sp-map:hover>span[aria-hidden]:not(.icon) {
    translate:3px 0;
  }
}

@media(hover:hover) and (pointer:fine) {
  html.tap-motion .site-footer__properties a:hover::after {
    translate:4px 0;
  }
}

html:not(.tap-motion) .tap-target {
  transition:none;
}

html:not(.tap-motion) :is(.tap-ink,.tap-sheen) {
  display:none;
}

@media(prefers-reduced-motion:reduce) {
  .tap-target {
    transition:none!important; /* 理由: 状態または実行時DOMの優先度を保持 / prefers-reduced-motionで既存演出を停止 / 通常宣言の詳細度/順序を打ち消す: html.tap-motion .tap-target:active */
  }
}

@media(prefers-reduced-motion:reduce) {
  .tap-ink {
    display:none!important; /* 理由: 状態または実行時DOMの優先度を保持 / prefers-reduced-motionで既存演出を停止 / 通常宣言の詳細度/順序を打ち消す: .p1-company-cta .button--tel > span:not(.icon) */
  }
}

@media(prefers-reduced-motion:reduce) {
  .tap-sheen {
    display:none!important; /* 理由: 状態または実行時DOMの優先度を保持 / prefers-reduced-motionで既存演出を停止 */
  }
}

@media(prefers-reduced-motion:reduce) {
  .nav-spinner {
    animation:none!important; /* 理由: 状態または実行時DOMの優先度を保持 / prefers-reduced-motionで既存演出を停止 / 通常宣言の詳細度/順序を打ち消す: html.motion .m-fv-play / 通常宣言の詳細度/順序を打ち消す: html.tap-motion .nav-spinner */
  }
}