*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
  color: #000;
}

img {
  display: block;
}

/* =========================================
   FV（Figma: 1440 × 960 基準）
   1px(デザイン) = var(--u)
   ========================================= */
.fv {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 960;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #fff;
}

.fv > * {
  --u: calc(100cqw / 1440);
}

/* 背景写真：1822×1215 相当にトリミング、右端揃え */
.fv-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fv-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 21.6%;
  transform: scale(1.2653);
  transform-origin: 100% 21.6%;
}

/* ロゴ：359×97 の枠で上下余白をトリミング */
.logo {
  position: absolute;
  left: calc(981 * var(--u));
  top: calc(426 * var(--u));
  width: calc(359 * var(--u));
  height: calc(97 * var(--u));
  margin: 0;
  overflow: hidden;
}

.logo img {
  position: absolute;
  left: 0;
  top: -53.37%;
  width: 100%;
  height: 224.96%;
  max-width: none;
}

/* お知らせテキスト＋下線 */
.notice {
  position: absolute;
  left: calc(953 * var(--u));
  top: calc(533 * var(--u));
  color: #000;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.notice:hover,
.notice:focus-visible {
  opacity: 0.6;
}

.notice-text {
  display: block;
  font-family: "A-OTF A1明朝 Std", "A1 Mincho Std", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: calc(32 * var(--u));
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

.notice-line {
  position: absolute;
  left: calc(4 * var(--u));
  top: calc(56 * var(--u));
  width: calc(410 * var(--u));
  transform: rotate(0.28deg);
  transform-origin: left center;
}

.notice-line img {
  width: 100%;
  height: 1px;
}

/* =========================================
   SP（Figma: FV mobile 390 × 844 基準）
   ========================================= */
@media (max-width: 767px) {
  .fv {
    aspect-ratio: auto;
    height: 100vh;
    height: 100svh;
  }

  .fv > * {
    --u: calc(100cqw / 390);
  }

  /* 縦構図の写真：1002×1388 相当、上端は -235px */
  .fv-bg img {
    position: absolute;
    left: calc(-300.6 * var(--u));
    top: calc(-235.2 * var(--u));
    width: calc(1002 * var(--u));
    height: calc(1388 * var(--u));
    max-width: none;
    object-fit: cover;
    transform: none;
  }

  .logo {
    left: calc(74 * var(--u));
    top: calc(78 * var(--u));
    width: calc(241 * var(--u));
    height: calc(65 * var(--u));
  }

  .notice {
    left: calc(65 * var(--u));
    top: calc(147 * var(--u));
  }

  .notice-text {
    font-size: calc(20 * var(--u));
  }

  .notice-line {
    left: calc(3 * var(--u));
    top: calc(36 * var(--u));
    width: calc(253 * var(--u));
    transform: none;
  }
}