@charset "UTF-8";
html {
  line-height: 1.2; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}
body {
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
}
@media (min-width: 769px) /* 画面幅769px以上 */ {}
@media (max-width: 768px) /* 画面幅768px以下 */ {}
/* ---------- main-visual ---------- */
.main-visual img {
  width: 100%;
}
/* ---------- main-area ---------- */
.main-area {
  border-top: 3px solid #000;
  padding: 5vw 0;
  background:
    url("../img/bg04.png") center top / auto repeat-x, url("../img/bg02.png") center top / contain repeat-y, url("../img/bg01.jpg") center top / contain repeat-y;
}
.main-area img {
  max-width: 100%;
  width: auto;
  height: auto;
}
/* ---------- ボタン（ホールを探す） ---------- */
.hall-btn-area {
  margin: 0 4vw 5vw;
  text-align: center;
}
.hall-btn {
  position: relative;
  display: inline-block;
  padding: 2vw 6vw;
  max-width: 500px;
  width: 100%;
  color: #fff;
  text-decoration: none;
  border: 2px solid #fff;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  font-size: 2rem;
  overflow: hidden;
  transition: background 0.3s ease;
}
/* 矢印 */
.hall-btn::after {
  content: "";
  position: absolute;
  right: 40px;
  top: 50%;
  width: 20px;
  height: 20px;
  background: url("../img/arrow.png") no-repeat center / contain;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
/* テキスト */
.hall-btn-text {
  position: relative;
}
/* 下線（疑似要素） */
.hall-btn-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
/* ホバー */
.hall-btn:hover {
  background: rgba(0, 0, 0, 1);
}
.hall-btn:hover::after {
  transform: translateY(-50%) translateY(10px);
}
.hall-btn:hover .hall-btn-text::after {
  transform: scaleX(1);
}
/* ---------- 黄色枠 ---------- */
section.goods-area {
  width: min(90%, 1100px);
  margin: 0 auto 7vw;
  padding: 4vw;
  border: 7px solid;
  border-image: linear-gradient(-10deg, #e8e427 0%, #ffffff 50%, #f9f8b9 55%, #e8e427 100%) 1;
  box-shadow:
    0px 0 15px 10px rgba(232, 228, 39, 1);
  background-color: rgba(0, 0, 0, 0.8);
}
/* ---------- 見出し ---------- */
h2.h_title img {
  max-width: 100%;
  margin-bottom: 2vw;
}
/* ---------- リード文 ---------- */
.lead-tx {
  margin: 0 0 2vw;
  font-size: clamp(1.3rem, 1rem + 2.2vw, 3rem);
  font-weight: 700;
  line-height: 1.4;
  text-shadow:
    -3px 0 #000, 3px 0 #000, 0 -3px #000, 0 3px #000, -3px -3px #000, 3px -3px #000, -3px 3px #000, 3px 3px #000;
}
/* ---------- keyholder ---------- */
/* キーホルダー賞品一覧 */
.goods-gallery-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1vw;
  margin: 0 0 1vw;
  text-align: center;
}
.goods-gallery-list li {
  margin-bottom: 2vw;
}
@media (max-width: 769px) {
  .goods-gallery-list {
    grid-template-columns: 1fr;
    gap: 3vw;
  }
}
/* パッケージ・裏面・スペック */
.goods-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3vw;
}
.goods-detail-back, .goods-detail-pack {
  text-align: center;
}
.goods-detail-info {
  justify-self: center;
  text-align: left;
}
@media (min-width: 769px) /* 画面幅769px以上 */ {
  .goods-detail {
    grid-template-columns: 1fr auto 1fr;
    gap: clamp(2rem, 5vw, 5rem);
  }
  /* 左：パッケージ */
  .goods-detail-pack {
    grid-column: 1; /*1列目*/
    grid-row: 1; /*１行目*/
    justify-self: end;
  }
  /* 中央：キーホルダー */
  .goods-detail-back {
    grid-column: 2; /*２列目*/
    grid-row: 1; /*１行目*/
    justify-self: center;
  }
  /* 右：説明 */
  .goods-detail-info {
    grid-column: 3; /*３列目*/
    grid-row: 1; /*１行目*/
  }
}
/* スペック（3賞品共通） */
.goods-spec {
  font-size: clamp(1.3rem, 1.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.4;
}
.goods-spec dt {
  margin-top: 1.8rem;
  color: #efd08d;
  text-shadow:
    -2px 0 #000, 2px 0 #000, 0 -2px #000, 0 2px #000, -2px -2px #000, 2px -2px #000, -2px 2px #000, 2px 2px #000;
}
.goods-spec dt:first-child {
  margin-top: 0;
}
.goods-spec dd {
  margin-top: .8rem;
  color: #fff;
  text-shadow:
    -2px 0 #000, 2px 0 #000, 0 -2px #000, 0 2px #000, -2px -2px #000, 2px -2px #000, -2px 2px #000, 2px 2px #000;
}
.goods-spec dd span {
  color: #efd08d;
}
.goods-spec dd span::before {
  content: "-";
}
.goods-detail-note {
  margin-top: 2.5rem;
  font-size: clamp(1rem, 2.8vw, 1.3rem);
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  text-shadow:
    -2px 0 #000, 2px 0 #000, 0 -2px #000, 0 2px #000, -2px -2px #000, 2px -2px #000, -2px 2px #000, 2px 2px #000;
}
/* ---------- clip ---------- */
.clip-item-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.clip-item-main, .clip-item-sub {
  justify-self: center;
  text-align: center;
}
.clip-item-info {
  justify-self: center;
  text-align: left;
}
@media (min-width: 769px) /* 画面幅769px以上 */ {
  .clip-item-body {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: start;
  }
  .clip-item-info {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }
  .clip-item-main {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }
  .clip-item-sub {
    grid-column: 3;
    grid-row: 1;
    display: grid;
    justify-self: center;
  }
}
/* ---------- sacoche ---------- */
.sacoche-item-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.sacoche-item-main {
  justify-self: center;
  text-align: center;
  margin-top: -5vw;
}
.sacoche-item-info {
  justify-self: center;
  text-align: left;
}
.sacoche-item-main img:first-child {
  margin-right: -5vw;
}
@media (min-width: 769px) /* 画面幅769px以上 */ {
  .sacoche-item-body {
    grid-template-columns: 40% 60%;
    align-items: start;
    margin-right: 3vw;
  }
  .sacoche-item-info {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
  .sacoche-item-main {
    grid-column: 2;
    grid-row: 1;
    margin-top: -29vw;
    justify-self: center;
  }
}
/* ---------- ※画像は全てイメージです ---------- */
.caption-tx {
  margin-bottom: 3vw;
  font-weight: 700; 
  font-size: clamp(1.3rem, 1.6vw, 2rem);
  color: #f0dc26;
  text-align: center;
  text-shadow:
     2px  0   0 #000,
    -2px  0   0 #000,
     0    2px 0 #000,
     0   -2px 0 #000,
     2px  2px 0 #000,
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     0    0   6px rgba(0,0,0,.9),
     0    0  12px rgba(0,0,0,.7);
}
/* ---------- notes-area ---------- */
.notes-area {
  padding: 3vw;
  border-top: 1px solid #fff;
  background-color: #000;
}
.notes-area .notes {
  width: fit-content;
  margin: 0 auto;
  text-align: left;
}
@media (min-width: 769px) /* 画面幅769px以上 */ {
  .notes-area .notes {
    font-size: 2rem;
  }
}
/* ---------- hall-search-area ---------- */
.hall-title {
  max-width: 900px;
  margin: 0 auto 2vw;
  padding: 0.3vw 1vw;
  font-size: 2.2rem;
  color: #000;
  font-weight: bold;
  border-left: 5px solid #8b0000;
  border-bottom: 2px solid #8b0000;
  text-align: left;
  text-shadow: 2px 2px 0 #fff;
}
/* ---------- footer ---------- */
footer {
  padding: 3vw 3vw 5vw;
  background-color: #000;
  text-align: center;
}
/*banner-area*/
footer .banner-area li {
  margin-bottom: 3vw;
}
footer .banner-area li img {
  max-width: 1000px;
  width: 100%;
}
/* ON/OFF */
footer .banner-area li a img {
  transition: opacity 0.3s ease;
}
footer .banner-area li a:hover img {
  opacity: 0.7;
}
/* ---------- to-pagetop ---------- */
footer .to-pagetop a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent; /* 塗りなし */
  border: 1px solid #fff; /* 白い丸線 */
  border-radius: 50%;
  transition: transform 0.4s ease;
}
footer .to-pagetop a img {
  width: 40%;
  height: auto;
  transform: rotate(180deg);
}
footer .to-pagetop a:hover {
  transform: scale(1.1) rotate(360deg);
}
@media (min-width: 769px) /* 画面幅769px以上 */ {
  footer .to-pagetop a {
    width: 60px;
    height: 60px;
  }
}
/* ---------- copyright ---------- */
footer .copyright {
  display: flex;
  flex-direction: column; /* スマホ時は縦並び */
  align-items: center; /* 左右中央揃え */
  justify-content: center;
  gap: 1vw;
  margin: 0 auto;
  padding-top: 2vw;
}
footer .copyright .copy-logo img {
  max-width: 600px;
  width: 100%;
}
footer .copyright .copy-tx {
  padding-top: 1vw;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2;
  text-align: center; /* テキストが複数行になっても中央を維持 */
}
@media (min-width: 769px) /* 画面幅769px以上 */ {
  footer .copyright {
    flex-direction: row; /* PC時は横並び */
    justify-content: center; /* 塊全体を中央に */
    gap: 20px; /* 左右の要素の間隔 */
  }
  footer .copyright .copy-tx {
    padding-top: 0; /* PC時は上の余白をリセット */
    text-align: left; /* PC時はテキストを左寄せにする場合 */
  }
}