/* ===================================================================
   ルフレロゼ KIYOKO HATA ドレス試着会 LP
   =================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, ul, figure, dl, dd { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-serif);
  color: var(--text);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Tokens ---------- */
:root {
  --text: #05161a;
  --bg: #f7f7f7;
  --white: #fff;
  --purple: #681d93;
  --dark: #222;
  --line: #ccc;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* 余白：大＝話題が変わるセクション間／小＝同じ話題が続くセクション間／見出し＝見出しと中身の間 */
  --space-lg: 96px;
  --space-sm: 48px;
  --space-head: 40px;
  --grid-gap: 16px; /* 写真グリッドのすき間 */
}
@media (max-width: 768px) {
  :root { --space-lg: 64px; --space-sm: 32px; --space-head: 32px; --grid-gap: 8px; }
}

/* セクション間の余白（各セクション自体は上下paddingを持たない） */
main > section + section { margin-top: var(--space-lg); }
main > .fair-card-wrap { margin-top: var(--space-sm); }

/* 改行制御：.nb の中では折り返さない（文節単位で改行させる） */
.nb { display: inline-block; }
h1, h2, h3, p, dd { word-break: auto-phrase; text-wrap: pretty; }

.container { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* 見出し＋下線 */
.title-lined {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.title-lined::after {
  content: "";
  display: block;
  width: 50px;
  height: 1px;
  margin: 16px auto 0;
  background: var(--text);
}

.title-ja {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  letter-spacing: .1em;
}

/* ---------- Intro ---------- */
.intro { padding: 0 16px; }

/* ---------- 試着会 ---------- */

.fair-title {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--space-sm); /* 上の見出しとの間（大）の半分 */
}
.fair-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  max-width: 760px;
  margin-inline: auto;
}
.fair-text { text-align: center; font-size: 13px; }
.fair-text p + p { margin-top: 14px; }
.fair-text .fair-new { font-size: 18px; font-weight: 700; margin-top: 24px; }
.btn-purple {
  display: inline-block;
  margin-top: 16px;
  padding: 16px 32px;
  background: var(--purple);
  color: var(--white);
  font-size: 20px;
  transition: opacity .2s;
}
.btn-purple:hover { opacity: .8; }

/* ---------- 試着フェア カード ---------- */
.fair-card-wrap { padding: 0 16px; }
.fair-card {
  --card-px: 48px;
  max-width: 760px; /* 上の「ドレス試着会」ブロック（.fair-body）と同じ幅 */
  margin-inline: auto;
  padding: var(--card-px) var(--card-px) 48px; /* 写真の上も左右と同じ余白 */
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  text-align: center;
  font-size: 13px;
}
.fair-card img { width: 100%; margin-bottom: 16px; }
.fair-card p + p { margin-top: 18px; }

/* ---------- Concept ---------- */
.concept {
  padding: var(--space-head) 0; /* 白い帯の上下＝写真の上下と同じ余白 */
  background: rgba(255, 255, 255, .6);
  text-align: center;
  font-size: 13px;
}
.concept-title { font-size: 24px; font-weight: 700; margin-bottom: var(--space-head); }
.concept-img { width: 100%; max-width: 750px; margin: 0 auto var(--space-head); }
.concept-sub { font-size: 24px; font-weight: 700; margin-bottom: 16px; }
.concept p + p { margin-top: 16px; } /* CONCEPT見出し→文章と同じ */

/* ---------- Dress Collection ---------- */
.collection > .title-lined { margin-bottom: calc(var(--grid-gap) * 2); } /* 写真のすき間の2倍 */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 var(--grid-gap); /* 写真の端を下のグリッドの端にそろえる */
}
.split-text { padding: 48px 32px; text-align: center; font-size: 13px; }
.split-text p + p { margin-top: 16px; }
.split-img img { width: 100%; height: auto; }
/* 上の写真と下のグリッドの間は、写真どうしのすき間の2倍 */
.split + .grid { margin-top: calc(var(--grid-gap) * 2); }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  padding: 0 var(--grid-gap);
}
/* 縦横比を統一（2:3 の写真は上下を約3%ずつトリミング） */
.grid img {
  width: 100%;
  aspect-ratio: 1074 / 1523;
  object-fit: cover;
}

/* ---------- Reservation / CTA ---------- */
.reserve { padding: 0 16px; }
.cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 560px;
  margin: var(--space-head) auto 0;
  padding: 16px;
  background: var(--white);
  font-size: 13px;
}
.btn-dark {
  flex: 0 0 248px;
  padding: 8px 16px;
  background: var(--dark);
  color: var(--white);
  font-size: 14px;
  text-align: center;
  transition: opacity .2s;
}
.btn-dark:hover { opacity: .8; }

/* ---------- About ---------- */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--white);
}
.about-text {
  padding: 48px 32px;
  text-align: center;
  font-size: 13px;
  background: linear-gradient(90deg, #fff 60%, rgba(255, 255, 255, .85));
}
.about-title { font-size: 24px; font-weight: 700; line-height: 1.6; margin-bottom: 24px; }
.about-text p + p { margin-top: 4px; }
.about-img { align-self: center; }
.about-img img { width: 100%; height: auto; }

/* ---------- Access ---------- */
.access { padding: 0 16px; }
.access-table {
  display: grid;
  grid-template-columns: 240px 1fr;
  max-width: 750px;
  margin: var(--space-head) auto 0;
  font-size: 13px;
}
.access-table dt,
.access-table dd {
  padding: 16px 8px;
  border-bottom: 1px solid var(--line);
}
.access-table dd p + p { margin-top: 10px; }
.access-table a { text-decoration: underline; }
.access .cta-box { margin-top: 60px; }

/* ---------- Slider ---------- */
.slider {
  position: relative;
  height: min(80vh, 720px);
  overflow: hidden;
  background: var(--bg);
}
.slider-track img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .8s;
}
.slider-track img.is-active { opacity: 1; }
.slider-btn {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  z-index: 2;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
}
.slider-btn::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  margin: auto;
  border-top: 2px solid var(--text);
  border-left: 2px solid var(--text);
}
.slider-prev { left: 10px; }
.slider-prev::before { transform: rotate(-45deg); }
.slider-next { right: 10px; }
.slider-next::before { transform: rotate(135deg); }
.slider-dots {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}
.slider-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .8);
}
.slider-dots button.is-active { background: var(--text); }

/* ---------- Lightbox ---------- */
img[data-lightbox] { cursor: zoom-in; }
.slider-track img:not(.is-active) { pointer-events: none; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 64px;
  background: rgba(0, 0, 0, .88);
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 4px 30px rgba(0, 0, 0, .5);
}
.lightbox button {
  position: absolute;
  width: 48px;
  height: 48px;
}
.lightbox button[hidden] { display: none; }
.lightbox-close { top: 8px; right: 8px; }
.lightbox-close::before,
.lightbox-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 2px;
  margin: -1px 0 0 -13px;
  background: #fff;
  transform: rotate(45deg);
}
.lightbox-close::after { transform: rotate(-45deg); }
.lightbox-prev,
.lightbox-next { top: 50%; margin-top: -24px; }
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
.lightbox-prev::before,
.lightbox-next::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin: auto;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
}
.lightbox-prev::before { transform: rotate(-45deg); margin-left: 20px; }
.lightbox-next::before { transform: rotate(135deg); margin-right: 20px; }
.lightbox-count {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  color: #fff;
  font-size: 13px;
  text-align: center;
  letter-spacing: .1em;
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: var(--space-lg);
  padding: 32px 16px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 12px;
}

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 768px) {
  .title-lined { font-size: 22px; }
  /* 冒頭見出しの2行目（KIYOKO HATA フランチャイズ店）が1行に収まるよう画面幅に合わせて縮める */
  .intro .title-lined { font-size: min(22px, 5.4vw); }

  .fair-body { grid-template-columns: 1fr; gap: 24px; }
  .fair-img { max-width: 300px; margin-inline: auto; }

  .fair-card { --card-px: 24px; padding-bottom: 32px; }
  .split-text, .about-text { padding: 40px 24px; }

  .split, .about { grid-template-columns: 1fr; }
  .split-img { order: -1; }
  .grid { grid-template-columns: repeat(2, 1fr); }


  .access-table { grid-template-columns: 1fr; }
  .access-table dt { border-bottom: none; padding-bottom: 0; font-weight: 500; }
  .access-table dt:empty { display: none; }

  .cta-box { flex-direction: column; text-align: center; }
  .btn-dark { flex-basis: auto; width: 100%; }

  .slider { height: 120vw; max-height: 80vh; }

  .lightbox { padding: 56px 8px; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 4px; margin-top: 0; }
}