@charset "UTF-8";
/* ==========================================================================
   JOMONÖW — Lightbox (Modal) v13.5
   約物オーバーレイ + 中央カード
   サイズ: 800×800 (padding 40px) / 内側カード 720×600
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(33, 20, 20, 0.7);
  cursor: pointer;
}

/* 外側ラッパー: 800×800 (タイトル + 内側カード + 余白) */
.lightbox__card {
  position: relative;
  z-index: 1;
  width: 800px;
  height: 800px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  box-sizing: border-box;
  transform: scale(0.95);
  transition: transform 0.3s var(--ease-out);
}

.lightbox.is-open .lightbox__card {
  transform: scale(1);
}

/* × 閉じるボタン (右上、透明背景に丸枠) */
.lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.lightbox__close:hover {
  opacity: 0.7;
}

/* ABOUT タイトル: 既存 Goudy 56pt と同じ仕様、色は yellow */
.lightbox__title {
  font-family: var(--font-goudy);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--color-yellow);
  margin: 0 0 32px;
  text-align: center;
}

/* 内側カード: 720×600、薄背景 + 黄色枠線 */
.lightbox__body {
  width: 720px;
  height: 600px;
  max-width: 100%;
  background-color: var(--color-bg-light, #f7f6f6);
  border: 2px solid var(--color-yellow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  box-sizing: border-box;
  text-align: center;
}

/* iiYOU + Designer 見出し */
.lightbox__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
}

.lightbox__iiyou {
  width: 160.72px;
  height: auto;
  display: block;
}

.lightbox__designer {
  width: 285.67px;
  height: auto;
  display: block;
  margin-top: 48px;
}

/* 区切りの中黒 */
.lightbox__body::before {
  content: none;
}

/* 本文 (About と同じ: tsuku-old / 24px / line-height 1.9167 / wine-typo) */
.lightbox__text {
  font-family: var(--font-tsuku-old);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.9167;
  color: var(--color-wine-typo);
  margin: 14px 0 0;
  font-feature-settings: "palt" 1;
  letter-spacing: -0.02em;
  text-align: center;
}

.lightbox__text-line {
  display: block;
}

.lightbox__text ruby {
  ruby-position: over;
}

.lightbox__text ruby rt {
  font-size: 12px;
  font-family: var(--font-tsuku-old);
  font-weight: 400;
  color: var(--color-wine-typo);
  letter-spacing: -0.03em;
}

/* iiyou.jp */
.lightbox__url {
  font-family: var(--font-goudy);
  font-size: 28px;
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--color-wine-typo);
  margin: 32px 0 0;
}

.lightbox__url a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.lightbox__url a:hover {
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__card {
    transition: none;
  }
}

/* ==========================================================================
   SP (≤750px) — About ライトボックス
   ---
   PC仕様 (800×800 が画面中央) を踏襲。サイズ・文字のみ縮小。
   ABOUTタイトル/Xボタンの相対位置もPC踏襲.
   ========================================================================== */
@media (max-width: 750px) {
  /* 外枠: 366×562 (PC 800×800 から縮小)
     card は padding 0、内部に title + body を flex で配置。
     justify-content: center で title+body を card 内中央配置
     (上下に均等余白)。
     max-width/max-height を解除して SP では実寸 366×562 を保つ。 */
  .lightbox__card {
    width: 366px;
    height: 562px;
    max-width: none;
    max-height: none;
    padding: 0;
    justify-content: center;
  }

  /* タイトル「ABOUT」: 36pt、Box 上端と title 下端の間隔 = 44px */
  .lightbox__title {
    font-size: 36px;
    margin: 0 0 44px;
  }

  /* Xボタン: PC流用サイズ (W48)、位置は
     右端 = Box右端揃え (right:0)、X下端 = ABOUT中心
     justify-content:center により ABOUT中心 = card内 上端 + 49px
     (上余白31 + title H36/2=18)
     X H48 → X下端をその位置にするには top = 49 - 48 = 1px */
  .lightbox__close {
    top: 1px;
    right: 0;
  }

  /* 内枠: 342×420 (PC 720×600)、padding は SP用に縮小して
     コピーが内部で改行されず CD指定行で表示されるようにする */
  .lightbox__body {
    width: 342px;
    height: 420px;
    padding: 16px;
  }

  /* iiYOU: W107px (PC 160.72) */
  .lightbox__iiyou {
    width: 107px;
  }

  /* Designer of the Unseen: W190px (PC 285.67)、上マージン縮小 */
  .lightbox__designer {
    width: 190px;
    margin-top: 18px;
  }

  /* コピー: tsuku-bold 16pt / 行送り 30pt (1.875)
     PC構造そのまま。SP用の br-sp を有効化して text-line 内に
     追加改行を入れる。 */
  .lightbox__text {
    font-size: 16px;
    line-height: 1.875;
    margin: 6px 0 0;
  }
  .lightbox__text .br-sp {
    display: inline;
  }

  /* ルビ: 9pt (PC 12pt) */
  .lightbox__text ruby rt {
    font-size: 9px;
  }

  /* iiyou.jp: Goudy 21pt (PC 28pt)、上マージン縮小 */
  .lightbox__url {
    font-size: 21px;
    margin: 12px 0 0;
  }
}