@charset "UTF-8";

/*================================================================
  リセット & 共通設定
================================================================*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
}

body {
  background: url("../img/bg_pattern.webp")top center repeat;
  background-size: 3043px;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  height: auto;
  line-height: 0;
  vertical-align: top;
}

#header {
  animation:
    fade-in_content 0.5s ease-in-out both;
}

.wrapper {
  width: 100%;
}



.wrapper #content h2 {
  animation: sttl_zoom 1.2s ease both;
}

.wrapper #content h3 {
  animation: content_zoom 1.2s ease both;
}

.wrapper #content #sec-04store .inner-block .list01,
.wrapper #content #sec-04store .inner-block .list02,
.wrapper #content #sec-04store .inner-block .list03,
.wrapper #content .cont {
  animation: fade-in_content .7s ease-in-out both;
}

.wrapper #content #sec-01event .inner-block,
.wrapper #content #sec-02movie .inner-block,
.wrapper #content #sec-03event .inner-block,
.wrapper #content #sec-04store .inner-block {
  animation: fade-in_content .5s ease-in-out both;
}


/* 最初は非表示 */
.ttl,
.main,
.people,
.icon,
.copy {
  opacity: 0;
  animation: fade-in 0.8s ease forwards;
}

/* 順番に delay を振る */
.main {
  animation-delay: 0.0s;
}

.people {
  animation-delay: 0.3s;
}

.ttl {
  animation-delay: 0.6s;
}

.icon {
  animation-delay: 0.9s;
}

.copy {
  animation-delay: 1.2s;
}

.pc {
  display: inline-block;
}

.sp {
  display: none;
}


.wrapper #content .illust {
  width: 750px;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 150;
  pointer-events: none;
}



.wrapper #content .btn-more:hover {
  transform: scale(1.1) !important;
}

#header {
  width: 750px;
  height: 100px;
  margin: 0 auto;
  background: #fff;
}

#header img {
  margin: 22px auto;
  width: 618px;
  transition: transform 0.2s ease;
}

h3 img {
  width: 690px;
  height: auto;
  display: block;
  margin: 0 auto;
}

#header img:hover {
  transform: scale(1.1);
}

.cf::after {
  content: '';
  display: block;
  clear: both;
}

.wrapper {
  width: 100%;
}

.wrapper #content {
  width: 750px;
  height: auto;
  margin: 0 auto;
  text-align: center;
  position: relative;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.wrapper #content:after {
  content: '.';
  display: block;
  clear: both;
  height: 0;
  font-size: 0;
  visibility: hidden;
}

.wrapper #content #sec-kv {
  width: 100%;
  height: auto;
  margin: 0 auto 0;
  overflow: hidden;

}

.wrapper #content #sec-kv .inner-block {
  width: 100%;
  height: 1100px;
  margin: 0 auto;
  position: relative;
  background: url("../img/bg_kv.webp") no-repeat center top;
  background-size: 750px;
}

.wrapper #content #sec-kv img {
  position: absolute;
  width: 750px;
  left: 0px;
  top: 0px;
}


.wrapper #content #sec-wrapper {
  width: 750px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.wrapper #content #sec-wrapper #sec-nav {
  width: 750px;
  height: 195px;
  position: absolute;
  top: 0;
  z-index: 100;
  background: url(../img/bg_nav.webp) top center no-repeat;
  background-size: 750px;
}

/* グローバルナビ本体 */
.wrapper #content #sec-wrapper #sec-nav #global-navi {
  width: 750px;
  height: 195px;
  margin: 0 auto;
  position: relative;
}

/* ボタン2つ横並び（左30px・上76px・gap18px） */
.wrapper #content #sec-wrapper #sec-nav #global-navi ul.global-navi-li {
  position: absolute;
  top: 76px;
  left: 30px;
  display: flex;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* li はそのままボタンサイズに合わせる */
.wrapper #content #sec-wrapper #sec-nav #global-navi ul.global-navi-li li {
  flex: 0 0 auto;
}

/* ボタン画像サイズ＆ホバーアニメ */
.wrapper #content #sec-wrapper #sec-nav #global-navi ul.global-navi-li li a img {
  width: 336px;
  height: auto;
  display: block;
  transition: transform 0.3s;
}

.wrapper #content #sec-wrapper #sec-nav #global-navi ul.global-navi-li li:hover a img {
  transform: scale(1.1);
}


/* 固定表示化する時はfixedに */
.wrapper #content #sec-wrapper #sec-nav.fixed {
  width: 750px;
  position: fixed;
  top: 0;
  z-index: 10000;
}

#sec-02gourmet-food {
  padding-top: 200px;
}

.wrapper #content .section-divider {
  width: 750px;
  height: 140px;
  display: grid;
  place-items: center;
}

.wrapper #content .section-divider img {
  display: block;
  width: 750px;
  height: auto;
}

.wrapper #content .contwrap {
  position: relative;
  width: 690px;
  margin: 0 auto;
  padding: 40px 0;
}

.wrapper #content .contwrap img {
  transition: transform 0.2s ease;
}

.more-btn {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.more-btn img {
  display: block;
  width: 100%;
  height: auto;
}

.eventlink-btn img:hover,
.shoplink-btn-et img:hover,
.shoplink-btn-ge img:hover,
.wrapper #content #sec-bnr img:hover {
  transform: scale(1.03) !important;
}

.category {
  margin: 0 auto;
  padding: 0;
}

.subcategory {
  margin: 0
}

.grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  list-style: none;
  margin: 0 0 100px;
  padding: 0;
}

.item {
  position: relative;
  background: transparent;
  border: 0;
}

.item img {
  width: 690px;
  height: auto;
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.reserve-btn,
.guide-btn {
  position: absolute;
  left: 100px;
  top: 100px;
  transform: none;
  display: inline-block;
}

.reserve-btn img,
.guide-btn img {
  display: block;
}

/* もっと見るまわりはそのまま */
.actions {
  display: flex;
  justify-content: center;
  margin: 0 0 4px;
}

.more-btn {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

/* 展開アニメ（そのまま利用） */
.more {
  display: none;
  opacity: 0;
  grid-template-columns: inherit;
  gap: inherit;
}

.subcategory.is-open .more {
  display: grid;
  animation: fadeInxmas 0.6s ease forwards;
}

/* トップ帯画像を690pxに */
.contwrap img[src="img/img_cont_top.webp"] {
  width: 690px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 予約ボタン（284px） */
.reserve-btn img {
  width: 284px;
  height: auto;
}

/* ショップガイドボタン（330px） */
.guide-btn img {
  width: 330px;
  height: auto;
}

/* 予約ボタン（284px） */
.reserve-btn img {
  width: 284px;
  height: auto;
  display: block;
  transition: transform 0.3s;
}

/* ショップガイドボタン（330px） */
.guide-btn img {
  width: 330px;
  height: auto;
  display: block;
  transition: transform 0.3s;
}

/* ホバー時の拡大 */
.reserve-btn img:hover,
.guide-btn img:hover {
  transform: scale(1.07);
}


/* 01：ボタン1個 */
.reserve-btn--cake-01-1 {
  left: 378px;
  top: 893px;
}

/* 02：ボタン3個（100 / 400 / 700） */
.reserve-btn--cake-02-1 {
  left: 32px;
  top: 1424px;
}

.reserve-btn--cake-02-2 {
  left: 378px;
  top: 851px;
}

.reserve-btn--cake-02-3 {
  left: 32px;
  top: 2133px;
}

/* 03：ボタン1個 */
.reserve-btn--cake-03-1 {
  left: 378px;
  top: 1510px;
}

.guide-btn--cake-et {
  left: 5px;
  top: 1620px;
}

.guide-btn--cake-ge {
  left: 355px;
  top: 2540px;
}

.reserve-btn--gourmet-food-01-1 {
  left: 378px;
  top: 1996px;
}

.reserve-btn--gourmet-food-01-2 {
  left: 378px;
  top: 2605px;
}

.guide-btn--gourmet-food-et {
  left: 5px;
  top: 2730px;
}

.guide-btn--gourmet-food-ge {
  left: 355px;
  top: 3759px;
}

.guide-btn--gift-et {
  left: 5px;
  top: 1820px;
}

.guide-btn--gift-ge {
  left: 355px;
  top: 3691px;
}

.wrapper #content #sec-01cake,
.wrapper #content #sec-02gourmet-food,
.wrapper #content #sec-03gift,
.wrapper #content #sec-bnr {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}



.wrapper #content #sec-bnr img {
  width: 750px;
  height: auto;
  margin-bottom: 60px;
  transition: transform 0.2s ease;
}

.wrapper #content #sec-annotation {
  width: 100%;
  height: 237px;
  margin: 0 auto;
  position: relative;
}

.wrapper #content #sec-annotation img {
  width: 750px;
  margin: 0;
}

#footer {
  width: 750px;
  margin: 0 auto;
}

#footer_wrap {
  padding: 70px 0;
  background: #fff;
}

#footer .logo {
  width: 458.8457px;
}

#footer .border {
  width: 600px;
}

#footer_wrap .footer_info {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5em;
  text-align: center;
  margin: 18px auto 0;
}

#footer_copy {
  background: #c2c2c2;
  width: 750px;
  margin: 0 auto;
  padding-top: 35px;
  padding-bottom: 38px;
}

#footer_copy .copy {
  color: #000;
  font-size: 19.2px;
  font-weight: 500;
  line-height: 1.5em;
  display: block;
  margin: 0 auto;
  text-align: center;
}


@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }

  img {
    height: auto;
    width: auto;
  }


  .wrapper #content h2,
  .wrapper #content .cont {
    width: 86.6667vw;
    margin: 0 auto;
  }

  .wrapper #content .illust {
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
  }

  .wrapper #content h2 img,
  .wrapper #content h3 img,
  .wrapper #content .cont img {
    width: 100%;
    height: auto;
  }

  #header {
    width: 100vw;
    height: 13.3333vw;
  }

  #header img {
    margin: 2.9333vw auto;
    width: 82.4vw;
  }

  .wrapper #content {
    width: 100vw;
  }

  .wrapper #content #sec-kv .inner-block {
    height: 146.6667vw;
    background-size: 100vw;
  }

  .wrapper #content #sec-kv img {
    width: 100vw;
  }

  .wrapper #content #sec-wrapper {
    width: 100vw;
  }

  .wrapper #content #sec-wrapper #sec-nav {
    width: 100vw;
    height: 26.6667vw;
    background-size: 100vw;
  }

  .wrapper #content #sec-wrapper #sec-nav #global-navi {
    width: 100vw;
    height: 26.6667vw;
  }

  .wrapper #content #sec-wrapper #sec-nav #global-navi ul.global-navi-li {
    top: 10.1333vw;
    left: 4vw;
    gap: 2.4vw;
  }

  .wrapper #content #sec-wrapper #sec-nav #global-navi ul.global-navi-li li a img {
    width: 44.8vw;
  }

  .wrapper #content .section-divider {
    width: 100vw;
    height: 18.6667vw;
  }

  .wrapper #content .section-divider img {
    width: 100vw;
  }

  .wrapper #content .contwrap {
    width: 92vw;
    padding: 5.3333vw 0;
  }

  .contwrap img[src="img/img_cont_top.webp"] {
    width: 92vw;
  }

  .grid {
    margin: 0 0 13.3333vw;
  }

  .item img {
    width: 92vw;
  }

  .reserve-btn,
  .guide-btn {
    left: 13.3333vw;
    top: 13.3333vw;
  }

  .reserve-btn img {
    width: 37.8667vw;
  }

  .guide-btn img {
    width: 44vw;
  }

  .wrapper #content #sec-wrapper #sec-nav.fixed {
    width: 100vw;
  }

  #sec-02gourmet-food {
    padding-top: 26.6667vw;
  }


  .reserve-btn--cake-01-1 {
    left: 50.4vw;
    /* 378px */
    top: 119.0667vw;
    /* 893px */
  }

  /* 02：ボタン3個 */
  .reserve-btn--cake-02-1 {
    left: 4.2667vw;
    /* 32px */
    top: 189.8667vw;
    /* 1424px */
  }

  .reserve-btn--cake-02-2 {
    left: 50.4vw;
    /* 378px */
    top: 113.4667vw;
    /* 851px */
  }

  .reserve-btn--cake-02-3 {
    left: 4.2667vw;
    /* 32px */
    top: 284.4vw;
    /* 2133px */
  }

  /* 03：ボタン1個 */
  .reserve-btn--cake-03-1 {
    left: 50.4vw;
    /* 378px */
    top: 201.3333vw;
    /* 1510px */
  }

  .guide-btn--cake-et {
    left: 0.6667vw;
    /* 5px */
    top: 216vw;
    /* 1620px */
  }

  .guide-btn--cake-ge {
    left: 47.3333vw;
    /* 355px */
    top: 338.6667vw;
    /* 2540px */
  }

  /* グルメ */
  .reserve-btn--gourmet-food-01-1 {
    left: 50.4vw;
    /* 378px */
    top: 266.1333vw;
    /* 1996px */
  }

  .reserve-btn--gourmet-food-01-2 {
    left: 50.4vw;
    /* 378px */
    top: 347.3333vw;
    /* 2605px */
  }

  .guide-btn--gourmet-food-et {
    left: 0.6667vw;
    /* 5px */
    top: 364vw;
    /* 2730px */
  }

  .guide-btn--gourmet-food-ge {
    left: 47.3333vw;
    /* 355px */
    top: 501.2vw;
    /* 3759px */
  }

  /* ギフト */
  .guide-btn--gift-et {
    left: 0.6667vw;
    /* 5px */
    top: 242.6667vw;
    /* 1820px */
  }

  .guide-btn--gift-ge {
    left: 47.3333vw;
    /* 355px */
    top: 492.1333vw;
    /* 3691px */
  }

  .wrapper #content #sec-bnr img {
    width: 100vw;
    margin-bottom: 8vw;
  }

  .wrapper #content #sec-annotation {
    height: 31.6vw;
  }

  .wrapper #content #sec-annotation img {
    width: 100vw;
  }

  #footer {
    width: 100vw;
  }

  #footer_wrap {
    padding: 9.3333vw 0;
  }

  #footer .logo {
    width: 61.1794vw;
  }

  #footer .border {
    width: 80vw;
  }

  #footer_wrap .footer_info {
    font-size: 3.2vw;
    margin: 2.4vw auto 0;
  }

  #footer_copy {
    width: 100vw;
    padding-top: 4.6667vw;
    padding-bottom: 5.0667vw;
  }

  #footer_copy .copy {
    font-size: 2.56vw;
  }
}


/*------------------------------------
topに戻るボタン
------------------------------------*/
#page_top {
  z-index: 10000;
  position: fixed;
  right: 20px;
  bottom: -110px;
}

/* 画像ベース */
#page_top a img {
  display: block;
  width: 124px;
  height: auto;
  transform: scale(1) !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
  transform-origin: center center;
}

/* PCホバー */
#page_top a:hover img {
  transform: scale(1.1) !important;
}

/* ON画像（もし使う場合） */
#page_top a img[src*="_on."] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

#page_top a:hover img[src*="_on."] {
  opacity: 1;
}

/*------------------------------------
SP（768px以下）
------------------------------------*/
@media screen and (max-width: 768px) {

  #page_top {
    right: 3vw;
    bottom: -20vw;
  }

  #page_top a img {
    width: 13vw;
    /* ← SP幅指定 */
  }
}

/*------------------------------------
アニメーション
------------------------------------*/
@keyframes fade-in {
  from {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes content_zoom {
  from {
    transform: scale(0);
    filter: blur(10px);
  }

  30% {
    transform: scale(1.1);
    filter: blur(0px);
  }

  60% {
    transform: scale(0.90);
  }

  100% {
    transform: scale(1.00);
  }
}

.fade-in_content {
  animation: fade-in_content .6s ease-in-out 0.1s both;
}

@keyframes fade-in_content {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


@keyframes fadeInxmas {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}