/* 共通css */

@charset "utf-8";

* {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

.clearfix:after {
  content: "";
  clear: both;
  font-size: 0;
  display: block;
}

body {
  font-family:
    "游明朝", "Yu mincho", "Yu Mincho Medium", "Yu Mincho Demibold",
    "Yu Mincho Bold", "Yu Mincho Light", "Yu Mincho Regular",
    "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho",
    "MS PMincho Medium", "MS PMincho Demibold", "MS PMincho Bold",
    "MS PMincho Light", "MS PMincho Regular", serif;
  overflow-x: hidden;
  height: 100%;
}

html,
body {
  overflow-x: hidden;
  width: 100%;
  background-color: #ffffff;
}

/* header */

h1 {
  float: left;
  height: 1em;
}

header {
  width: 100%;
  height: 35px;
  position: fixed;
  z-index: 999;
  background: #ffffff;
  border-bottom: 1px solid #000000;
}

header nav {
  float: right;
}

header ul {
  margin-top: 14px;
}

header li {
  float: left;
  margin-right: 5px;
  font-size: 0.9rem;
}

header li:nth-child(-n + 5):after {
  content: "/";
  margin-left: 10px;
  margin-right: 5px;
}

header a {
  color: #000000;
  text-decoration: none;
}

/* body */

h2 {
  font-size: 14vw;
  height: 100vh;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 20;
}

h3 {
  font-size: 30px;
}

h5 {
  color: #000000;
  font-weight: 400;
}

rt {
  font-size: 0.5em; /* ルビを少し小さくする */
  color: #c9c9c9; /* ルビの色を少し薄くする */
}

.bk {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  font-size: 40vw;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  z-index: 5; /* 画像(1)より上で、ロゴ(20)より下 */
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.3; /* JSで上書きされる前の初期値 */
}
.inner {
  width: 750px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 20px;
}

.background {
  position: relative;
  overflow: hidden;
  /* 落ち着いた暗めのトーンをベースに */
  background-color: #f4f4f4;
  /* 幾何学的なグリッド背景 */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 35px 35px;
}

/* page1 メインビジュアル */

#page1 {
  width: 100%;
  height: 100vh;
  position: relative; /* 疑似要素の基準にする */
  overflow: hidden;
  background-color: #ffffff; /* 画像が薄くなった時に見える背景色 */
  height: var(--vh); /* JSで計算した高さを適用 */
}

/* common.css 127行目付近を修正 */

#page1::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: var(--vh);
  background: url(../img/bk_page1.jpg) no-repeat center center;
  background-size: cover;
  z-index: 0;
  will-change: opacity;
  opacity: var(--bg-opacity, 1);
  pointer-events: none;

  /* 固定背景のガタつきを抑えるためのプロパティ */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* page2  */

#page2 {
  background-color: #252525;
  padding-bottom: 30px;
  color: #ffffff;
}

#page2 h3::before {
  content: "About";
  color: #6464642d;
  display: block;
  width: 100px;
  transform: rotate(-7deg);
  height: 4px;
  margin-bottom: 20px;
  z-index: -1;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 5px 20px;
  padding: 20px;
}

.container h4 {
  font-size: 30px;
  margin-top: 30px;
}

/* 各カードのスタイル */

.feature-card {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
  will-change: opacity, transform;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 5px 20px 30px 20px;
  flex: 1;
  min-width: 180px;
  max-width: 460px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* --- 表示された時の状態 --- */
.feature-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 2番目のカードは 0.2秒遅れて表示 */
.feature-card:nth-child(2) {
  transition-delay: 0.2s;
}

/* 3番目のカードは 0.4秒遅れて表示 */
.feature-card:nth-child(3) {
  transition-delay: 0.4s;
}

/* 見出し */
.feature-card h4 {
  color: #1a2a3a; /* ダークネイビー */
  font-size: 1.25rem;
  margin-bottom: 15px;
  border-bottom: 2px solid #d4af37; /* ゴールドのアクセントライン */
  display: inline-block;
  padding-bottom: 5px;
}

.feature-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: left;
  color: #555;
}

/* page3 */

#page3 {
  overflow: hidden;
}

#page3 h3::before {
  content: "List";
  color: #6464642d;
  display: block;
  width: 100px;
  transform: rotate(-7deg);
  height: 4px;
  margin-bottom: 20px;
  z-index: -1;
}

#page3 p {
  margin-top: 20px;
}

#page3 h4 {
  margin-top: 20px;
}

#page3 h5 {
  margin-top: 20px;
}

/* --- page3 商品リストの2列レイアウト --- */

/* 親コンテナの設定 */
.booth-flex-container {
  display: flex;
  flex-wrap: wrap; /* 折り返しを許可 */
  gap: 30px; /* アイテム間の隙間 */
  justify-content: flex-start; /* 左寄せに変更すると2列時に安定します */
  align-items: stretch; /* ★重要：子要素の全高さを一番高いものに合わせる */
  margin-top: 30px;
}

/* 各アイテム（booth）の設定 */
.booth {
  /* calc(50% - 10px) で「半分より少し小さいサイズ」にし、
     余白(gap)を含めてピッタリ2列にします 
  */
  width: calc(50% - 15px);
  box-sizing: border-box;
  margin-bottom: 0; /* gapで制御するため、既存のmargin-bottomを調整 */
  display: flex; /* ★追加 */
  flex-direction: column; /* ★追加：中身を上から下に並べる */
  background: white;
  padding: 10px 50px 30px 50px;
  border: 1px solid #000000;
}

/* 説明文（pタグ）：余ったスペースを埋めてリンクを下に押し下げる */
.booth p {
  flex-grow: 1; /* ★追加：余白をこの要素が占有する */
  font-size: 14px;
  color: black;
  margin-top: 20px;
  margin-bottom: 20px; /* 下の要素との間隔を確保 */
}

/* 販売リンク（h5とaタグ）を常に一番下に固定したい場合 */
.booth h5,
.booth a:has(.booth-img) {
  flex-shrink: 0; /* 縮まないように固定 */
}

/* スマホ対応：750px以下の時は1列に戻す */

@media screen and (max-width: 750px) {
  .booth {
    width: 100%;
    padding: 20px 15px;
    height: auto; /* スマホではコンテンツに合わせる */
  }
}

/* 2列にした際に全体が窮屈なら、page3の時だけ幅を広げると見栄えが良くなります */
#page3 .inner {
  width: 100%;
  max-width: 1280px; /* 750pxから拡張 */
}

/* 画像と日付をまとめるコンテナ */
.item-img-container {
  position: relative; /* 日付の配置の基準にする */
  width: 100%;
}

/* 日付のスタイル修正 */
.release {
  position: absolute; /* 親要素を基準に自由に配置 */
  right: 0px; /* 右端からの距離 */
  bottom: 2px; /* 下端からの距離 */
  background: rgba(255, 255, 255, 255, 0.8);
  color: #301700 !important; /* 文字色を強制 */
  padding: 2px 6px; /* 文字の周りの余白 */
  font-size: 0.6rem;
  margin: 0 !important; /* 余計なマージンを消去 */
  z-index: 10; /* 画像より上に表示 */
  border-radius: 2px;
}

/* 既存の .release スタイル（float等）があれば削除または上書き */
/* 前回のコードにある float: right; 等は position: absolute; で無効化されます */

/* --- 画像の初期状態 --- */
.item-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border: 0.2px solid #000000;
  display: block;
}

.item-img-container {
  /* アニメーション用 */
  opacity: 0;
  transform: translateX(40px); /* 右に40pxずらしておく */
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
  transition-delay: 0.2s; /* ★カード本体より少し遅れて動き出す */
  will-change: opacity, transform;
}

/* --- 表示された時 --- */
.item-img-container.is-visible {
  opacity: 1;
  transform: translateX(0); /* 元の位置へ */
}

.item {
  width: 100%;
  font-size: 1.2rem;
  color: black;
  position: relative;
  padding-left: 20px;
}

.item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 65%; /* 上からの位置 */
  transform: translateY(-50%); /* 自分の高さ半分だけ上に戻して中央揃え */
  width: 10px; /* 帯の太さ */
  height: 2.95rem; /* 帯の長さ */
  background-color: #2f2f2f; /* 帯の色 */
}

.item01 {
  display: block;
  display: flex; /* flexboxを有効化 */
  align-items: center; /* 垂直方向の中央揃え */
}

.item01::before {
  content: "01"; /* 横にマーク */
  font-weight: bold; /* 太字 */
  font-size: 2rem;
  color: #545454; /* 色 */
  margin-right: 10px; /* 文字との隙間 */
  margin-left: 10px;
  margin-top: 10px;
  line-height: 1; /* 余計な余白を消す */
  padding-bottom: 5px;
}

.item02 {
  display: block;
  display: flex; /* flexboxを有効化 */
  align-items: center; /* 垂直方向の中央揃え */
}

.item02::before {
  content: "02"; /* 横にマーク */
  font-weight: bold; /* 太字 */
  font-size: 2rem;
  color: #545454; /* 色 */
  margin-right: 10px; /* 文字との隙間 */
  margin-left: 10px;
  margin-top: 10px;
  line-height: 1; /* 余計な余白を消す */
  padding-bottom: 5px;
}

.item03 {
  display: block;
  display: flex; /* flexboxを有効化 */
  align-items: center; /* 垂直方向の中央揃え */
}

.item03::before {
  content: "03"; /* 横にマーク */
  font-weight: bold; /* 太字 */
  font-size: 2rem;
  color: #545454; /* 色 */
  margin-right: 10px; /* 文字との隙間 */
  margin-left: 10px;
  margin-top: 10px;
  line-height: 1; /* 余計な余白を消す */
  padding-bottom: 5px;
}

.item04 {
  display: block;
  display: flex; /* flexboxを有効化 */
  align-items: center; /* 垂直方向の中央揃え */
}

.item04::before {
  content: "04"; /* 横にマーク */
  font-weight: bold; /* 太字 */
  font-size: 2rem;
  color: #545454; /* 色 */
  margin-right: 10px; /* 文字との隙間 */
  margin-left: 10px;
  margin-top: 10px;
  line-height: 1; /* 余計な余白を消す */
  padding-bottom: 5px;
}

.item05 {
  display: block;
  display: flex; /* flexboxを有効化 */
  align-items: center; /* 垂直方向の中央揃え */
}

.item05::before {
  content: "05"; /* 横にマーク */
  font-weight: bold; /* 太字 */
  font-size: 2rem;
  color: #545454; /* 色 */
  margin-right: 10px; /* 文字との隙間 */
  margin-left: 10px;
  margin-top: 10px;
  line-height: 1; /* 余計な余白を消す */
  padding-bottom: 5px;
}

.item06 {
  display: block;
  display: flex; /* flexboxを有効化 */
  align-items: center; /* 垂直方向の中央揃え */
}

.item06::before {
  content: "06"; /* 横にマーク */
  font-weight: bold; /* 太字 */
  font-size: 2rem;
  color: #545454; /* 色 */
  margin-right: 10px; /* 文字との隙間 */
  margin-left: 10px;
  margin-top: 10px;
  line-height: 1; /* 余計な余白を消す */
  padding-bottom: 5px;
}

.booth {
  background: white;
  padding: 10px 50px 30px 50px;
  border: 1px solid #000000;
  margin-bottom: 30px;
}

.booth p {
  font-size: 14px;
  color: black;
}

.item-img {
  width: 100%;
  height: 150px;
  border: 0.2px solid #000000;
  object-fit: cover; /* アスペクト比を維持したまま、指定した範囲を埋める（はみ出し分はトリミングされる） */
  object-position: center; /* どこを中心に切り取るか（中央、上部など） */
  display: block; /* 下の隙間を消す */
}

.booth-img {
  width: 120px;
  height: auto;
  transition: transform 0.2s;
  border: #00000013 0.1px solid;
}

/* ロゴ画像を横に並べるための設定 */
.shop-links {
  display: flex; /* 横並びにする */
  flex-wrap: wrap; /* 幅が足りない場合は折り返す */
  gap: 15px; /* 画像同士の隙間 */
  align-items: center; /* 垂直方向の中央揃え */
  margin-top: 10px; /* 上（h5）との間隔 */
}

.shop-links a {
  display: block;
  line-height: 0; /* aタグの余計な隙間を排除 */
}

.booth-img:hover {
  transform: scale(1.05); /* 少し大きく */
}

.tag-container {
  margin-top: 15px;
}

.tag {
  display: inline-block;
  border: 1px solid #007bff; /* 枠線の色 */
  color: #007bff; /* 文字の色 */
  padding: 3px 10px;
  margin: 4px;
  border-radius: 4px; /* 少し角を丸める程度 */
  font-size: 0.8rem;
  background: transparent;
}

.play {
  font-size: 1rem;
  color: #666;
  display: flex;
  flex-wrap: wrap; /* 横幅が足りない時は「nobreak」単位で改行する */
  align-items: baseline; /* 文字の底辺を揃える */
  gap: 8px 12px; /* 上下間隔 8px / 左右間隔 12px */
  margin-top: 15px;
}

/* 数字と単位をひとまとめにする設定 */
.nobreak {
  display: inline-block;
  white-space: nowrap; /* この中での自動改行を禁止 */
}

.num {
  font-size: 1.8rem;
  font-weight: 800;
  color: #222;
  line-height: 1;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

/* page4の設定 */

#page4 {
  background: #dfdfdf;
  padding-bottom: 40px;
}

#page4 h3::before {
  content: "Shop";
  color: #6464642d;
  display: block;
  width: 100px;
  transform: rotate(-7deg);
  height: 4px;
  margin-bottom: 20px;
  z-index: -1;
}

#page4 p {
  margin-top: 10px;
}

#page4 a {
  color: #1152ca;
  text-decoration: none;
}

#page4 a:hover {
  text-decoration: underline;
}

#page4 a::before {
  content: "▶";
  margin-right: 5px;
  color: #000000;
}

#page4 a:hover::before {
  color: #006797;
}

#page4 li {
  margin-top: 10px;
}

#page4 ul {
  margin-bottom: 20px;
}

/* page5の設定 */

#page5 {
  background: #f5f5f5;
  padding-bottom: 40px;
}

#page5 h3::before {
  content: "News";
  color: #6464642d;
  display: block;
  width: 100px;
  transform: rotate(-7deg);
  height: 4px;
  margin-bottom: 20px;
  z-index: -1;
}

.news-list {
  list-style: none; /* 文頭の・を消す場合 */
  padding: 0;
}

.news-list li {
  display: flex; /* 日付と内容を横並びにする */
  margin-bottom: 8px; /* 行間の調整 */
  line-height: 1.5;
  border-bottom: #c7c7c7 0.1px solid;
}

.news-list .date {
  flex: 0 0 120px; /* 日付の幅を120pxに固定（幅はお好みで） */
  font-weight: bold; /* 日付を少し強調 */
}

.news-list .content {
  flex: 1; /* 残りの幅をすべて使う */
}

@media (max-width: 480px) {
  .news-list li {
    flex-direction: column;
  }
  .news-list .date {
    flex: 0 0 auto;
    margin-bottom: 2px;
  }
}

/* page6の設定 */

#page6 {
  background: #23312f;
  padding-bottom: 40px;
}

#page6 h3::before {
  content: "profile";
  color: #6464642d;
  display: block;
  width: 100px;
  transform: rotate(-7deg);
  height: 4px;
  margin-bottom: 20px;
  z-index: -1;
}

.profile-img {
  float: left; /* 画像を左に寄せる */
  margin-right: 15px; /* 右側のテキストとの距離 */
  margin-bottom: 5px;
  margin-left: 0px;
  margin-top: 5px;
  width: 60px;
}

/* 回り込みを解除するための設定（HTMLにclearfixがある場合） */
.profile::after {
  content: "";
  display: block;
  clear: both;
}

.profile {
  color: #ffffff;
}

.profile a {
  color: #c4fffa;
  text-decoration: none;
}

.sns-icon {
  width: 20px;
  height: auto;
  margin-right: 5px;
  background-color: #000000;
  padding: 5px;
}

/* page7の設定 */

#page7 {
  background: #252525;
  padding-bottom: 40px;
}

#page7 h3 {
  color: #ffffff;
}

#page7 p {
  color: #ffffff;
}

#page7 h3::before {
  content: "Contact";
  color: #6464642d;
  display: block;
  width: 100px;
  transform: rotate(-7deg);
  height: 4px;
  margin-bottom: 20px;
  z-index: -1;
}

/* フォームを囲う要素のスタイル */
.contact-form {
  max-width: 800px; /* フォームの最大幅を制限 */
  margin: 0 auto; /* 中央寄せ */
  padding: 20px;
}

/* 埋め込んだiframeを横幅いっぱいにする */
.contact-form iframe {
  width: 100%;
  min-height: 800px; /* コンテンツ量に合わせて高さを調整してください */
}

/* お問い合わせフォームの折りたたみスタイル */

.contact-details {
  border: 1.6px solid #555;
  background: #ffffff; /* 少し明るい黒 */
  border-radius: 4px;
  overflow: hidden;
}

/* クリックする部分（ボタン） */
.contact-trigger {
  padding: 20px;
  cursor: pointer;
  color: #464646;
  font-weight: bold;
  list-style: none; /* デフォルトの三角形を消す */
  text-align: center;
  transition: background 0.3s;
}

.contact-trigger:hover {
  background: #b1b1b1;
}

/* 三角形の代わりの記号 */
.contact-trigger::before {
  content: "▼";
  margin-left: 10px;
  font-size: 0.8rem;
}

/* 開いている時の記号と背景 */
details[open] .contact-trigger {
  background: #ececec;
  border-bottom: 1px solid #555;
}

details[open] .contact-trigger::before {
  content: "▲";
}

/* 中身のアニメーション用（簡易版） */
.form-wrapper {
  padding: 10px;
  background: #fff; /* フォームが見やすいように背景を白に */
}

/* summaryのデフォルトの矢印を消す（Safari/Chrome対策） */
.contact-trigger::-webkit-details-marker {
  display: none;
}

/* footer */

footer {
  background: #000000;
  width: 100%;
}

footer p {
  text-align: right;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  color: #ffffff;
}

/* --- アニメーションの初期状態 --- */
.booth {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
  will-change: opacity, transform;
}

/* --- 表示された時の状態 --- */
.booth.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* レスポンシブ */

/* レスポンシブ対応の強化 */
@media screen and (max-width: 750px) {
  /* ヘッダーの調整：高さを確保し、リンクを押しやすく */
  header {
    height: auto;
    padding: 10px 0;
  }

  header nav {
    float: none;
    text-align: center;
  }

  header ul {
    display: flex;
    justify-content: center;
    margin-top: 0;
  }

  #horizon1 {
    display: none; /* スマホでは線を消すか位置を調整 */
  }

  /* メインビジュアル：ロゴがはみ出ないように調整 */
  h2 img.logo {
    width: 60% !important;
    height: auto;
  }

  .bk {
    display: none; /* ★スマホでは要素を消す */
  }

  /* コンテンツ幅の調整 */
  .inner {
    width: 100%;
  }

  #page2,
  #page4,
  #page5,
  #page6,
  #page7 .inner {
    padding: 20px 25px 50px 25px;
  }

  /* 特徴カード：横並びから縦並びへ */
  .features {
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    margin: 5px 0;
    width: 100%;
  }

  .feature-card {
    /* 画面幅の80%に設定 */
    width: 80vw;

    /* 親要素の padding を無視して中央に配置する */
    margin-left: calc(50% - 40vw);
    margin-right: calc(50% - 40vw);
    max-width: none; /* 既存の制限を解除 */
    box-sizing: border-box; /* パディングを含めた幅計算にする */
  }

  /* 特徴カードのディレイをリセット */
  .feature-card:nth-child(n) {
    transition-delay: 0s !important;
  }

  /* 商品リスト：左右の余白を削り、文字サイズを調整 */
  .booth {
    padding: 20px 15px;
  }

  .item h4 {
    font-size: 1.1rem;
  }

  .num {
    font-size: 1.5rem; /* スマホでは少し小さく */
  }

  .play {
    font-size: 0.9rem;
    gap: 8px 10px;
  }

  /* プロフィール：画像の回り込みを解除して中央寄せに */
  .profile-img {
    float: none;
    display: block;
    width: 100px;
  }
}