@import url("sanitize.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap");

:root { font-size: 62.5%; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #050204;
  color: #fff;
  font-family: "Helvetica Neue", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  font-size: 1.6rem;
}
img { display: block; max-width: 100%; height: auto; }
a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* メインビジュアル：元の横幅いっぱいの表示を維持 */
.hero { width: 100%; margin: 0; }
.hero h1 { margin: 0; }
.hero img { width: 100%; }

/* 本文 */
.news-area { width: min(100% - 40px, 980px); margin: 0 auto; }

/* 4つの画像ナビ */
.news-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 32px auto 38px;
}
.news-nav__link { display: block; transition: transform .2s ease, filter .2s ease; }
.news-nav__link img { width: 100%; }
@media (hover: hover) {
  .news-nav__link:hover { transform: translateY(-3px); filter: brightness(1.25) saturate(1.15); }
}

/* イベント記事 */
.event-section { margin: 0 auto 54px; scroll-margin-top: 16px; }
.event-section__heading { margin: 0 auto 20px; }
.event-section__heading img { width: 100%; }
.event-list { display: grid; gap: 20px; }
.event-list__item img { width: 100%; }

/* Coming Soon */
.coming-soon {
  width: 100%;
  margin: 20px auto;
  text-align: center;
}

.coming-soon img {
  display: block;
  width: 100%;
  height: auto;
}

/* ページ下部の金色リンク */
.detail-link {
  width: min(100%, 1180px);
  margin: 0 auto;
  background: linear-gradient(
    90deg,
    #f6d64d 0%,
    #fff6bf 50%,
    #dfbb43 100%
  );
}
.detail-link a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 14px 20px;
  margin-bottom: 30px;
  transition: filter .2s ease;
}
.detail-link a:hover { filter: brightness(1.08); }
.detail-link img { width: min(56%, 260px); }

/* ページトップ */
#page-top { position: fixed; z-index: 10; right: 12px; bottom: 12px; margin: 0; }
.topbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 2px solid #dbc35c;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff2ad, #c99d32);
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
.topbtn i { font-size: 1.8rem; }

@media (hover: hover) {
  .topbtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(245, 213, 107, 0.4);
  }
}

footer { padding: 14px 10px; text-align: center; background: #050204; }
footer section { margin: 0 auto; font-size: 1.2rem; }

@media (max-width: 767px) {
  .news-area { width: calc(100% - 24px); }
  .news-nav { gap: 10px; margin: 18px auto 24px; }
  .event-section__heading { margin-bottom: 14px; }
  .event-list { gap: 16px; }
  .event-section { margin-bottom: 20px; }
  .detail-link a {min-height: 44px; padding: 8px 16px;}
  .detail-link img {width: 50%; max-width: 180px;}
  .coming-soon { margin: 16px auto;}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .news-nav__link, .detail-link a { transition: none; }
}


/* ==================================
   超！特価セクション
================================== */

.price-section {
  margin: 0 auto 54px;
  scroll-margin-top: 16px;
}

/* タイトル画像 */
.price-section__heading {
  margin: 0 auto 24px;
  text-align: center;
}

.price-section__heading img {
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto;
}

/* 商品画像一覧 */
.price-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.price-list__item img {
  display: block;
  width: 100%;
  height: auto;
}

/* パンダ装飾 */
.price-list__item--decoration {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.price-list__item--decoration img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* SP */
@media (max-width: 767px) {
  .price-section {
    margin-bottom: 20px;
  }

  .price-section__heading {
    margin-bottom: 16px;
  }

  .price-section__heading img {
    width: 80%;
  }

  .price-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .price-list__item--decoration img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center;
  }
}

/* コンテンツ内の詳しくはこちら */
.news-area > .detail-link {
  width: min(1180px, 100vw);
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}
/* 詳しくはこちら：キラッと光るホバー */
.detail-link a {
  position: relative;
  overflow: hidden;
}

.detail-link a::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 70%;
  height: 100%;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.65) 40%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.65) 60%,
    rgba(255, 255, 255, 0.2) 80%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
}

@media (hover: hover) {
  .detail-link a:hover {
    filter: brightness(1.15);
  }

  .detail-link a:hover::after {
    animation: detail-shine 0.65s ease-out forwards;
  }
}

@keyframes detail-shine {
  from {
    left: -100%;
  }
  to {
    left: 150%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-link a:hover::after {
    animation: none;
  }
}

@media (hover: none) {
  .detail-link a.is-shining::after {
    animation: detail-shine 0.65s ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-link a.is-shining::after {
    animation: none;
  }
}

/* =========================
   超！放題＆特典
========================= */

.houdai-section {
  margin: 0 auto 54px;
  scroll-margin-top: 16px;
}

.houdai-section__heading {
  margin: 0 auto 24px;
}

.houdai-section__heading img {
  width: 80%;
  margin: 0 auto;
}

.houdai-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.houdai-list__item {
  min-width: 0;
}

.houdai-list__item img {
  width: 100%;
  height: auto;
}

/* パンダ */
.houdai-list__item--decoration {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.houdai-list__item--decoration img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
   transform: scale(0.8);
    transform-origin: center;
}

/* セクション下の金色帯 */
.houdai-section .detail-link {
  width: min(1180px, 100vw);
  max-width: none;
  margin: 60px 0 0 50%;
  transform: translateX(-50%);
}

@media (max-width: 767px) {
  .houdai-section {
    margin-bottom: 20px;
  }

  .houdai-section__heading {
    margin-bottom: 16px;
  }

  .houdai-list {
    gap: 16px;
  }

  .houdai-section .detail-link {
    margin-top: 36px;
  }

  .houdai-list__item--decoration img {
    transform: scale(0.85);
    transform-origin: center;
  }
}

/* タイトル画像の上下余白 */
.event-section__heading,
.price-section__heading,
.houdai-section__heading {
  margin-top: 40px;
  margin-bottom: 40px;
}

/* SP */
@media (max-width: 767px) {
  .event-section__heading,
  .price-section__heading,
  .houdai-section__heading {
    margin-top: 28px;
    margin-bottom: 28px;
  }
}

/* =========================
   超！体験
========================= */

.experience-section {
  margin: 0 auto 54px;
  scroll-margin-top: 16px;
}

/* タイトル */
.experience-section__heading {
  margin: 40px auto;
}

.experience-section__heading img {
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto;
}

/* 記事一覧 */
.experience-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.experience-list__item {
  min-width: 0;
}

.experience-list__item img {
  display: block;
  width: 100%;
  height: auto;
}

/* 詳しくはこちら：コンテンツ幅より広く */
.experience-section .detail-link {
  width: min(1180px, 100vw);
  max-width: none;
  margin: 60px 0 0 50%;
  transform: translateX(-50%);
}

/* SP */
@media (max-width: 767px) {
  .experience-section {
    margin-bottom: 20px;
  }

  .experience-section__heading {
    margin: 28px auto;
  }

  .experience-list {
    gap: 16px;
  }

  .experience-section .detail-link {
    margin-top: 36px;
  }
}

/* =========================
   HPトップへのボタン
========================= */

.home-link {
  width: min(90%, 420px);
  margin: 60px auto 0;
}

.home-link a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 24px;
  border: 3px solid #e8c45c;
  border-radius: 4px;
  background: #050204;
  color: #f5d56b;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  text-decoration: none;
  transition: background .3s, color .3s, box-shadow .3s;
}

.home-link a span {
  font-size: 2.4rem;
  line-height: 1;
}

@media (hover: hover) {
  .home-link a:hover {
    background: #f5d56b;
    color: #050204;
    box-shadow: 0 0 18px rgba(245, 213, 107, .35);
  }
}

/* SP */
@media (max-width: 767px) {
  .home-link {
    width: 90%;
    margin-top: 40px;
  }

  .home-link a {
    padding: 15px 12px;
    font-size: 1.3rem;
  }
}

/* =========================
   注意事項
========================= */

.notes-area {
  width: fit-content;
  max-width: 100%;
  margin: 50px auto 60px;
  padding: 0 10px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.8;
  color: #fff;
  text-align: left;
}

.notes-area p {
  margin: 0 0 6px;
}

/* SP */
@media (max-width: 767px) {
  .notes-area {
    width: 100%;
    margin: 32px auto 40px;
    padding: 0 4px;
    font-size: 1rem;
    line-height: 1.7;
  }
}

/* =========================
   施設情報
========================= */

.facility-info {
  margin: 0 auto 60px;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  color: #fff;
}

.facility-info__name {
  margin: 0 0 8px;
  font-size: 1.8rem;
  font-weight: 700;
}

.facility-info__address {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.7;
}

/* SP */
@media (max-width: 767px) {
  .facility-info {
    margin-bottom: 40px;
  }

  .facility-info__name {
    font-size: 1.6rem;
  }

  .facility-info__address {
    font-size: 1.1rem;
  }
}

/* =========================
   フッター
========================= */

.site-footer {
  border-top: 1px solid #8b7135;
  padding: 36px 20px 20px;
  background: #080608;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
}

.site-footer .facility-info {
  margin: 0 auto 28px;
}

.site-footer__copyright {
  margin: 0;
  color: #aaa;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}

/* SP */
@media (max-width: 767px) {
  .site-footer {
    padding: 28px 12px 18px;
  }

  .site-footer .facility-info {
    margin-bottom: 24px;
  }

  .site-footer__copyright {
    font-size: 1rem;
  }
}