@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-image: url("../img/bg_pattern.webp");
  background-repeat: repeat;
  background-size: 125px;
}

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;
}

.wrapper #content #sec-kv .inner-block {
  animation:
    final_kv-in 1s ease-in-out 0s both;
}


.pc {
  display: inline-block;
}

.sp {
  display: none;
}

.wrapper #content h2,
.wrapper #content .cont {
  width: 650px;
  margin: 0 auto;
}

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

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


.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;
}

#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;
  background: rgba(255, 255, 255, 0.2);
}

.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/img_kv_illust.webp") top center no-repeat;
  background-size: 750px;
}

.ttl {
  width: 665.0548px;
}

.wrapper #content #sec-kv h1 {
  position: absolute;
  z-index: 1000;
  opacity: 0;
  transform: scale(0.8);
  left: 45px;
  top: 977px;
}

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

.wrapper #content #sec-wrapper #sec-nav {
  width: 750px;
  height: 160px;
  position: absolute;
  top: 0;
  z-index: 100;
  background: #fff;
  overflow: hidden;
}

.wrapper #content #sec-wrapper #sec-nav #global-navi {
  width: 100%;
  padding: 16px 0 0;
  margin: 0 auto;
}

.wrapper #content #sec-wrapper #sec-nav #global-navi ul.global-navi-li {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  column-gap: 9px;
  row-gap: 9px;
  justify-content: center;
  align-items: center;
  padding: 0;
  list-style: none;
}

/* 黒ボタンを1行目で全幅スパン */
.wrapper #content #sec-wrapper #sec-nav #global-navi ul.global-navi-li li:first-child {
  grid-column: 1 / -1;
  justify-self: center;
}

.wrapper #content #sec-wrapper #sec-nav #global-navi ul.global-navi-li li {
  height: 59.085px;
  transition: transform 0.2s ease;
}

.wrapper #content #sec-wrapper #sec-nav #global-navi ul.global-navi-li li:first-child:hover {
  transform: scale(1.05);
}

.wrapper #content #sec-wrapper #sec-nav #global-navi ul.global-navi-li li:nth-child(n+2):hover {
  transform: scale(1.08);
}

.wrapper #content #sec-wrapper #sec-nav #global-navi ul.global-navi-li li a {
  display: block;
}

.wrapper #content #sec-wrapper #sec-nav #global-navi ul.global-navi-li li a img {
  height: 59.085px;
  width: auto;
  display: block;
  /* 余白対策 */
  vertical-align: top;
}

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

.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 {
  width: 690px;
  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,
.more-btn 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));
}

.item {
  overflow: hidden;
}

.item img {
  width: 690px;
  height: auto;
  display: block;
}

/* ボタン */
.actions {
  display: flex;
  justify-content: center;
  margin: 14px 0 4px;
}

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

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 念のため */
.item {
  background: transparent;
  border: 0;
}

.item img {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.shoplink-btn-et img {
  margin: 20px auto 50px;
  width: 690px;
  transition: transform 0.2s ease;
}

.shoplink-btn-ge img {
  margin: 20px auto 0;
  width: 690px;
  transition: transform 0.2s ease;
}

.more {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  grid-template-columns: inherit;
  gap: inherit;
}

.subcategory.is-open .more {
  display: grid;
  animation: fadeInUp 0.9s ease forwards;
  /* フェード＋少し上がる */
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


.wrapper #content #sec-01event,
.wrapper #content #sec-02price,
.wrapper #content #sec-03item,
.wrapper #content #sec-04service,
.wrapper #content #sec-bnr {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.wrapper #content #sec-01event .eventlink-btn img {
  margin: 0;
  transition: transform 0.2s ease;
}

.wrapper #content .contwrap-event {
  background: #f9ebd2;
}

.wrapper #content .contwrap-et {
  background: #fff8e3 url(img/bg_et.webp) repeat;
}

.wrapper #content .contwrap-ge {
  background: #fcf7f2;
}

.wrapper #content .shop-cta {
  width: 750px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

.wrapper #content .shop-cta__btn {
  display: block;
  line-height: 0;
}

.wrapper #content .shop-cta__btn img {
  display: block;
  width: 100%;
  height: 156px;
  object-fit: cover;
  transition: transform .2s ease;
}

.wrapper #content .shop-cta__btn:hover img {
  transform: scale(1.04);
}

.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;
  }

  .ttl {
    width: 88.6739vw;
  }

  .wrapper #content #sec-kv h1 {
    left: 6vw;
    top: 130.2667vw;
  }

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

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

  .wrapper #content #sec-wrapper #sec-nav #global-navi {
    padding: 2.1333vw 0 0;
  }

  .wrapper #content #sec-wrapper #sec-nav #global-navi ul.global-navi-li {
    column-gap: 1.2vw;
    row-gap: 1.2vw;
  }

  .wrapper #content #sec-wrapper #sec-nav #global-navi ul.global-navi-li li {
    height: 7.878vw;
  }

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

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

  .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;
  }

  .wrapper #content .contwrap img {
    width: 92vw;
  }

  .grid {
    grid-template-columns: 1fr;
    gap: 4vw;
  }

  .item img {
    width: 92vw;
  }

  .actions {
    margin: 1.8667vw 0 0.5333vw;
  }

  .shoplink-btn-et img {
    margin: 2.6667vw auto 6.6667vw;
    width: 92vw;
  }

  .shoplink-btn-ge img {
    margin: 2.6667vw auto 0;
    width: 92vw;
  }

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

  .wrapper #content .shop-cta__btn img {
    height: 20.8vw;
  }

  .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 span 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;
}

@media screen and (max-width: 768px) {
  #page_top {
    right: 3vw;
    bottom: -20vw;
  }

  #page_top span img {
    width: 13vw;
  }
}

#page_top span:hover img {
  transform: scale(1.1) !important;
}

#page_top span img[src*="_on."] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

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

#page_top span:hover img {
  transform: scale(1.1);
  transition: transform 0.3s;
}

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

  100% {
    opacity: 1;
  }
}



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

  25% {
    transform: scale(1.6);
    filter: blur(0px);
  }

  50% {
    transform: scale(0.90);
  }

  70% {
    transform: scale(1.05);
  }

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

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

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

  60% {
    transform: scale(0.90);
  }

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


@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 final_kv-in {
  from {
    opacity: 1;
    transform: scale(2);
  }

  40% {
    filter: blur(0px);
  }

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

@keyframes ttl-zoomin {
  from {
    opacity: 0;
    transform: scale(2);
  }

  50% {
    opacity: 1;
  }

  to {
    transform: scale(1.0);
  }
}