/* TOP FV（Figma 434:860 PC / 434:1347 SP） */

.main_img {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background: #0a0a0a;
  overflow: hidden;
}

.fv {
  position: relative;
  width: min(100%, 1440px);
  margin: 0 auto;
  aspect-ratio: 1440 / 714;
  overflow: hidden;
  font-family: "Roboto", "Arial Black", "Helvetica Neue", Arial, sans-serif;
}

/* 背景（展示会場＋白ベール） */
.fv__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.fv__bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.fv__bg-img--sp {
  display: none;
}

.fv__bg-veil {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
}

/*
 * 写真エリア（Figma 434:864）
 * 全幅カバーではなく左寄せ: x≈-165 / w≈1071 / h=714（frame 1440×714）
 * マスク path: M0 716V0H1079L632.116 716H0Z → 右辺 58.6%
 */
.fv__photo {
  position: absolute;
  top: 0;
  left: -11.46%; /* -165 / 1440 */
  z-index: 1;
  width: 74.375%; /* 1071 / 1440 */
  height: 100%;
  overflow: hidden;
  -webkit-clip-path: polygon(0 0, 100% 0, 58.58% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 58.58% 100%, 0 100%);
}

.fv__photo .bx-wrapper {
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

.fv__photo .bx-viewport {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  box-shadow: none !important;
  left: 0 !important;
  background: transparent !important;
}

.fv__photo .bx-viewport > ul,
.fv__photo .fv_slider {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  list-style: none;
}

.fv__photo .bx-viewport li,
.fv__photo .fv_slider li {
  width: 100% !important;
  height: 100% !important;
}

.fv__photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: left center !important;
}

/* ブランド（30th / OAMロゴ / 日程） */
.fv__brand {
  position: absolute;
  z-index: 2;
  left: 59.9%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 33px;
  width: 31.17%;
  max-width: 449px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
}

.fv__anni {
  display: block;
  width: 56.1%;
  max-width: 252px;
  height: auto;
}

.fv__logo {
  display: block;
  width: 100%;
  height: auto;
}

.fv__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 21px;
  width: 100%;
}

.fv__date-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0.2em;
  margin: 0;
  padding: 0;
  color: #000;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.fv__y {
  font-size: clamp(22px, 2.39vw, 34.4px);
  line-height: 1.2;
  padding-bottom: 0.15em;
  margin-right: 0.15em;
}

.fv__m {
  font-size: clamp(24px, 2.49vw, 35.8px);
  line-height: 1.2;
  padding-bottom: 0.12em;
}

.fv__slash {
  display: block;
  width: clamp(8px, 0.8vw, 11.5px);
  height: auto;
  margin: 0 0.12em 0.15em;
  align-self: center;
}

.fv__d {
  font-size: clamp(32px, 3.49vw, 50.2px);
  letter-spacing: -0.04em;
  line-height: 1;
}

.fv__dow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 1.55em;
  height: 1.55em;
  margin: 0 0 0.22em 0.28em;
  padding: 0.22em 0.28em;
  background: #000;
  color: #fff;
  font-size: clamp(12px, 1.38vw, 19.9px);
  font-weight: 900;
  line-height: 1;
}

.fv__dot {
  font-size: clamp(16px, 1.87vw, 26.9px);
  margin: 0 0.18em 0.35em;
  line-height: 1;
}

.fv__venue {
  margin: 0;
  width: 100%;
  color: #000;
  font-size: clamp(28px, 3.44vw, 49.5px);
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
}

/*
 * 横幅が 1440px を超えても構図はそのまま（写真・ロゴは拡大しない）
 * 背景だけ全幅に伸ばす
 */
@media screen and (min-width: 1441px) {
  .fv {
    width: 100%;
    max-width: none;
    height: 714px;
    aspect-ratio: auto;
  }

  .fv__photo {
    left: calc(50% - 720px - 165px); /* 中央1440基準の -165 */
    width: 1071px;
    height: 714px;
  }

  .fv__brand {
    left: calc(50% - 720px + 863px); /* 中央1440基準の 863 */
    width: 449px;
    max-width: 449px;
  }
}

/* ---------- Narrow PC ---------- */
@media screen and (max-width: 1100px) {
  .fv__brand {
    gap: 24px;
  }

  .fv__meta {
    gap: 14px;
  }
}

/* ---------- SP（Figma 434:1347 / 390×637） ---------- */
@media screen and (max-width: 834px) {
  .main_img {
    background: #a39e9e;
  }

  .fv {
    max-width: none;
    aspect-ratio: 390 / 637;
  }

  .fv__bg-img--pc {
    display: none;
  }

  .fv__bg-img--sp {
    display: block;
  }

  /*
   * SP マスク（Figma Vector 63 / 434:1350）
   * frame 390×637・マスク top -124 / h 514
   * 頂点 (frame): (0,-124) (390,-124) (390,177.12) (0,390)
   * → マスク内 clip: 右辺 301.12/514 = 58.58%
   */
  .fv__photo {
    top: -19.47%; /* -124 / 637 */
    left: 0;
    width: 100%;
    height: 80.69%; /* 514 / 637 */
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 58.58%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 58.58%, 0 100%);
  }

  /*
   * 写真本体（434:1351）をマスク内に配置
   * left -150 / top -25 → マスク基準 top 99 (= -25-(-124))
   */
  .fv__photo .bx-wrapper {
    inset: auto !important;
    top: 19.26% !important; /* 99 / 514 */
    left: -38.46% !important; /* -150 / 390 */
    width: 159.75% !important; /* 623 / 390 */
    height: 80.74% !important; /* 415.413 / 514 */
  }

  .fv__photo img {
    object-position: left center;
  }

  /*
   * Frame 54: x=75 y=235.51 w=240 h≈358 / 下端余白≈43.5
   * anni→logo 23 / logo→meta 25 / date→venue 15
   */
  .fv__brand {
    left: 50%;
    top: 36.97%;
    bottom: auto;
    transform: translateX(-50%);
    width: 61.538%; /* 240 / 390 */
    max-width: 240px;
    gap: 0;
  }

  .fv__anni {
    display: block;
    width: 73.246%; /* 175.79 / 240 */
    max-width: 176px;
    height: auto;
    margin: 0 auto 23px;
  }

  .fv__logo {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 25px;
  }

  .fv__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  .fv__date-line {
    width: auto;
    max-width: none;
    height: 26px;
    transform: none;
    gap: 0.14em;
    align-items: flex-end;
    line-height: 1;
  }

  .fv__y {
    font-size: 24px;
    margin-right: 0.1em;
    padding-bottom: 0;
    line-height: 1;
  }

  .fv__m {
    font-size: 25px;
    padding-bottom: 0;
    line-height: 1;
  }

  .fv__slash {
    width: 8px;
    height: 24.5px;
    margin: 0 0.08em 0;
    align-self: flex-end;
  }

  .fv__d {
    font-size: 35px;
    letter-spacing: -0.08em;
    line-height: 1;
  }

  .fv__dow {
    width: 23px;
    min-width: 23px;
    height: 23px;
    margin: 0 0 1px 0.18em;
    padding: 0;
    font-size: 14px;
    line-height: 1;
  }

  .fv__dot {
    font-size: 19px;
    margin: 0 0.1em 2px;
    line-height: 1;
  }

  .fv__venue {
    margin: 0;
    font-size: 34.6px;
    line-height: 1;
  }
}