@charset "UTF-8";
/* motion
----------------------------------------- */

/* トップ：キャッチコピー（上から書き出し）と本文 */
@keyframes motion-catch {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes motion-fadeup {
  from { opacity: 0; translate: 0 24px; }
  to   { opacity: 1; translate: none; }
}
.is-loaded .hero__catch { animation: motion-catch 1.6s cubic-bezier(.65, 0, .35, 1) .6s both; }
.is-loaded .hero__text  { animation: motion-fadeup 1.2s ease 1.6s both; }

/* トップ：丸写真が順にポップして、ふわふわ浮遊 */
@keyframes motion-pop {
  from { opacity: 0; scale: .6; }
  to   { opacity: 1; scale: 1; }
}
@keyframes motion-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}
/* li に scale を付けると絶対配置の基準が li に変わり位置が崩れるため、a（絶対配置）側で動かす */
.is-loaded .image-list .hover-link {
  animation: motion-pop .9s cubic-bezier(.34, 1.56, .64, 1) both, motion-float 6s ease-in-out infinite;
}
.is-loaded .image-list li:nth-child(1) .hover-link { animation-delay: .3s,  -0s; }
.is-loaded .image-list li:nth-child(2) .hover-link { animation-delay: .45s, -1s;   animation-duration: .9s, 7s; }
.is-loaded .image-list li:nth-child(3) .hover-link { animation-delay: .6s,  -2s;   animation-duration: .9s, 5.5s; }
.is-loaded .image-list li:nth-child(4) .hover-link { animation-delay: .75s, -3s;   animation-duration: .9s, 6.5s; }
.is-loaded .image-list li:nth-child(5) .hover-link { animation-delay: .9s,  -1.5s; animation-duration: .9s, 7.5s; }
.is-loaded .image-list li:nth-child(6) .hover-link { animation-delay: 1.05s, -2.5s; animation-duration: .9s, 5s; }
.image-list .hover-link img { transition: scale .5s ease; }
.image-list .hover-link:hover img { scale: 1.06; }

/* スクロール表示（js/motion.js が .reveal を付与） */
.reveal {
  opacity: 0;
  translate: 0 32px;
  transition: opacity .9s ease, translate .9s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-shown { opacity: 1; translate: none; }

/* 写真はマスクが開くように表示 */
.reveal-img {
  clip-path: inset(0 0 100% 0);
  scale: 1.08;
  transition: clip-path 1.2s cubic-bezier(.77, 0, .18, 1), scale 1.6s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal-img.is-shown { clip-path: inset(0 0 0 0); scale: none; }

/* 部門タイトル：下線が伸びる */
.section__title { position: relative; }
.section__title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin: 12px auto 0;
  background-color: #c73d7b;
  scale: 0 1;
  transition: scale .9s cubic-bezier(.22, 1, .36, 1) .4s;
}
.section__title.is-shown::after { scale: 1 1; }

/* ボタン：ホバーで浮き上がり＋アイコンが右へ */
.btn_s, .btn_m, .btn_m-p, .btn_l, .btn_lp, .pdf-download {
  transition: opacity .9s ease, translate .9s cubic-bezier(.22, 1, .36, 1), transform .3s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease;
  transition-delay: var(--reveal-delay, 0s), var(--reveal-delay, 0s), 0s, 0s, 0s, 0s;
}
.btn_s:hover, .btn_m:hover, .btn_m-p:hover, .btn_l:hover, .btn_lp:hover, .pdf-download:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
}
.btn_m::after, .btn_m-p::after, .btn_l::after, .btn_lp::after { transition: translate .3s ease; }
.btn_m:hover::after, .btn_m-p:hover::after, .btn_l:hover::after, .btn_lp:hover::after { translate: 5px 0; }

/* 店舗カード：ホバーで浮き上がり */
.section--restaurant_shopWrap > * {
  transition: opacity .9s ease, translate .9s cubic-bezier(.22, 1, .36, 1), transform .4s ease, box-shadow .4s ease;
  transition-delay: var(--reveal-delay, 0s), var(--reveal-delay, 0s), 0s, 0s;
}
.section--restaurant_shopWrap > *:hover { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(0, 0, 0, .12); }

/* 動きを減らす設定の閲覧者には止める */
@media (prefers-reduced-motion: reduce) {
  .is-loaded .hero__catch, .is-loaded .hero__text,
  .is-loaded .image-list .hover-link { animation: none; }
  .reveal, .reveal-img { opacity: 1; translate: none; clip-path: none; scale: none; transition: none; }
  .section__title::after { scale: 1 1; transition: none; }
}