/* ===== APIRIS SMARTPHONE FV FINAL ===== */

.sp-fv-bg,
.sp-fv-overlay,
.sp-fv-content {
  display: none;
}

@media (max-width: 980px) {
  html,
  body {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .hero#top {
    position: relative !important;
    display: block !important;
    isolation: isolate !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    height: clamp(600px, calc(100svh - var(--header-height, 64px)), 740px) !important;
    min-height: 600px !important;
    max-height: 740px !important;

    margin: var(--header-height, 64px) 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .hero#top::before,
  .hero#top::after {
    display: none !important;
    content: none !important;
  }

  .hero#top > .hero-copy,
  .hero#top > .hero-visual {
    display: none !important;
  }

  /* 1層目：背景画像 */
  .hero#top > .sp-fv-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;

    background-image: url("./img/sp_top1.png?v=20260722_094249") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* 2層目：右側に向かって濃くなる白グラデーション */
  .hero#top > .sp-fv-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: block !important;
    pointer-events: none !important;

    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.00) 0%,
      rgba(255, 255, 255, 0.04) 26%,
      rgba(255, 255, 255, 0.10) 38%,
      rgba(255, 255, 255, 0.22) 48%,
      rgba(255, 255, 255, 0.46) 60%,
      rgba(255, 255, 255, 0.74) 76%,
      rgba(255, 255, 255, 0.92) 100%
    ) !important;
  }

  /* 3層目：右寄せのロゴ＋コピー */
  .hero#top > .sp-fv-content {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;
    padding: 34px 28px 34px 20px !important;
    box-sizing: border-box !important;
  }

  .sp-fv-logo {
    display: block !important;
    width: clamp(170px, 27vw, 220px) !important;
    max-width: min(220px, 56vw) !important;
    height: auto !important;
    margin: 0 0 20px auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .sp-fv-sub {
    width: min(320px, 70vw) !important;
    max-width: 320px !important;
    margin: 0 0 12px auto !important;
    padding: 0 !important;

    color: #b89a57 !important;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "Times New Roman", serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.16em !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .sp-fv-title {
    width: min(320px, 70vw) !important;
    max-width: 320px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;

    color: #111 !important;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.75 !important;
    letter-spacing: 0.08em !important;
    text-align: left !important;
    white-space: normal !important;
  }
}

@media (max-width: 500px) {
  .hero#top {
    height: clamp(560px, calc(100svh - var(--header-height, 64px)), 680px) !important;
    min-height: 560px !important;
    max-height: 680px !important;
  }

  .hero#top > .sp-fv-content {
    padding: 28px 18px 28px 16px !important;
  }

  .sp-fv-logo {
    width: clamp(150px, 34vw, 180px) !important;
    max-width: 180px !important;
    margin-bottom: 16px !important;
  }

  .sp-fv-sub,
  .sp-fv-title {
    width: min(270px, 72vw) !important;
    max-width: 270px !important;
  }

  .sp-fv-sub {
    font-size: 13px !important;
  }

  .sp-fv-title {
    font-size: 14px !important;
  }
}

/* ===== SP FV LOGO + OVERLAY TUNE START ===== */

@media (max-width: 980px) {
  .sp-fv-logo {
    width: clamp(190px, 31vw, 250px) !important;
    max-width: min(250px, 62vw) !important;
    margin: 0 0 22px auto !important;
  }

  .hero#top > .sp-fv-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.00) 0%,
        rgba(255, 255, 255, 0.03) 24%,
        rgba(255, 255, 255, 0.08) 36%,
        rgba(255, 255, 255, 0.18) 48%,
        rgba(255, 255, 255, 0.38) 60%,
        rgba(255, 255, 255, 0.68) 78%,
        rgba(255, 255, 255, 0.90) 100%
      ),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.00) 0%,
        rgba(255, 255, 255, 0.00) 58%,
        rgba(255, 255, 255, 0.08) 72%,
        rgba(255, 255, 255, 0.24) 84%,
        rgba(255, 255, 255, 0.44) 100%
      ) !important;
  }
}

@media (max-width: 500px) {
  .sp-fv-logo {
    width: clamp(170px, 38vw, 205px) !important;
    max-width: 205px !important;
    margin-bottom: 18px !important;
  }
}

/* ===== SP FV LOGO + OVERLAY TUNE END ===== */

/* ===== SP FV REFERENCE LAYOUT TUNE START ===== */

@media (max-width: 980px) {
  /* 背景画像を拡大し、人物がしっかり映る位置へ */
  .hero#top > .sp-fv-bg {
    background-size: 165% auto !important;
    background-position: 24% 20% !important;
  }

  /* 右下に向かって白が強くなる。下部にも十分かける */
  .hero#top > .sp-fv-overlay {
    background:
      radial-gradient(
        circle at 76% 66%,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(255, 255, 255, 0.92) 20%,
        rgba(255, 255, 255, 0.78) 36%,
        rgba(255, 255, 255, 0.46) 52%,
        rgba(255, 255, 255, 0.12) 66%,
        rgba(255, 255, 255, 0.00) 76%
      ),
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.00) 34%,
        rgba(255, 255, 255, 0.06) 44%,
        rgba(255, 255, 255, 0.18) 52%,
        rgba(255, 255, 255, 0.42) 62%,
        rgba(255, 255, 255, 0.76) 74%,
        rgba(255, 255, 255, 0.94) 100%
      ) !important;
  }

  /* 右下寄せの配置 */
  .hero#top > .sp-fv-content {
    align-items: flex-end !important;
    justify-content: flex-end !important;
    padding: 34px 34px 84px 20px !important;
  }

  .sp-fv-logo {
    width: clamp(205px, 34vw, 280px) !important;
    max-width: min(280px, 64vw) !important;
    margin: 0 0 18px auto !important;
  }

  .sp-fv-sub {
    width: min(360px, 72vw) !important;
    max-width: 360px !important;
    margin: 0 0 10px auto !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }

  .sp-fv-title {
    width: min(360px, 72vw) !important;
    max-width: 360px !important;
    margin: 0 0 0 auto !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    text-align: left !important;
  }
}

@media (max-width: 500px) {
  .hero#top > .sp-fv-bg {
    background-size: 178% auto !important;
    background-position: 25% 18% !important;
  }

  .hero#top > .sp-fv-content {
    padding: 24px 20px 72px 16px !important;
  }

  .sp-fv-logo {
    width: clamp(180px, 40vw, 230px) !important;
    max-width: 230px !important;
    margin-bottom: 16px !important;
  }

  .sp-fv-sub {
    width: min(285px, 72vw) !important;
    max-width: 285px !important;
    font-size: 13px !important;
  }

  .sp-fv-title {
    width: min(285px, 72vw) !important;
    max-width: 285px !important;
    font-size: 14px !important;
  }
}

/* ===== SP FV REFERENCE LAYOUT TUNE END ===== */

/* ===== SP FV REFERENCE FOLLOW TUNE START ===== */

@media (max-width: 980px) {
  /* 人物がもっと左に来るように、背景位置を左へ寄せる */
  .hero#top > .sp-fv-bg {
    background-size: 182% auto !important;
    background-position: 14% 18% !important;
  }

  /* 参考画像に寄せて、右下寄せを強める */
  .hero#top > .sp-fv-content {
    align-items: flex-end !important;
    justify-content: flex-end !important;
    padding: 28px 30px 92px 18px !important;
  }

  /* ロゴを大きく */
  .sp-fv-logo {
    width: clamp(235px, 42vw, 320px) !important;
    max-width: min(320px, 72vw) !important;
    margin: 0 0 20px auto !important;
  }

  .sp-fv-sub {
    width: min(380px, 76vw) !important;
    max-width: 380px !important;
    margin: 0 0 10px auto !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }

  .sp-fv-title {
    width: min(380px, 76vw) !important;
    max-width: 380px !important;
    margin: 0 0 0 auto !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    text-align: left !important;
  }
}

@media (max-width: 500px) {
  .hero#top > .sp-fv-bg {
    background-size: 194% auto !important;
    background-position: 12% 17% !important;
  }

  .hero#top > .sp-fv-content {
    padding: 22px 18px 84px 16px !important;
  }

  .sp-fv-logo {
    width: clamp(210px, 50vw, 270px) !important;
    max-width: 270px !important;
    margin-bottom: 18px !important;
  }

  .sp-fv-sub,
  .sp-fv-title {
    width: min(300px, 78vw) !important;
    max-width: 300px !important;
  }

  .sp-fv-sub {
    font-size: 13px !important;
  }

  .sp-fv-title {
    font-size: 14px !important;
  }
}

/* ===== SP FV REFERENCE FOLLOW TUNE END ===== */

/* ===== SP FV PERSON LEFT LARGE LOGO START ===== */

@media (max-width: 980px) {
  /* 数値を大きくして画像を左へ移動し、人物を左側へ寄せる */
  .hero#top > .sp-fv-bg {
    background-size: 170% auto !important;
    background-position: 48% 18% !important;
  }

  /* 参考画像のように、右側へまとまったコンテンツ領域を作る */
  .hero#top > .sp-fv-content {
    position: absolute !important;
    inset: auto 0 0 auto !important;

    width: 58% !important;
    height: auto !important;

    align-items: flex-start !important;
    justify-content: flex-end !important;

    padding: 0 28px 86px 10px !important;
    box-sizing: border-box !important;
  }

  /* ロゴを大幅に拡大 */
  .hero#top > .sp-fv-content > .sp-fv-logo {
    display: block !important;
    width: 100% !important;
    max-width: 390px !important;
    height: auto !important;

    margin: 0 0 22px 0 !important;
  }

  .hero#top > .sp-fv-content > .sp-fv-sub {
    width: 100% !important;
    max-width: 390px !important;

    margin: 0 0 10px 0 !important;
    text-align: left !important;
  }

  .hero#top > .sp-fv-content > .sp-fv-title {
    width: 100% !important;
    max-width: 390px !important;

    margin: 0 !important;
    text-align: left !important;
  }
}

@media (max-width: 500px) {
  .hero#top > .sp-fv-bg {
    background-size: 188% auto !important;
    background-position: 52% 17% !important;
  }

  .hero#top > .sp-fv-content {
    width: 62% !important;
    padding: 0 16px 72px 6px !important;
  }

  .hero#top > .sp-fv-content > .sp-fv-logo {
    width: 100% !important;
    max-width: 310px !important;
    margin-bottom: 18px !important;
  }
}

/* ===== SP FV PERSON LEFT LARGE LOGO END ===== */

/* ===== SP FV BG POSITION FINE TUNE START ===== */

@media (max-width: 980px) {
  .hero#top > .sp-fv-bg {
    background-position:
      calc(48% + 20px)
      calc(18% - 30px) !important;
  }
}

@media (max-width: 500px) {
  .hero#top > .sp-fv-bg {
    background-position:
      calc(52% + 20px)
      calc(17% - 30px) !important;
  }
}

/* ===== SP FV BG POSITION FINE TUNE END ===== */

/* ===== SP FV LOGO SCALE 150 START ===== */

@media (max-width: 980px) {
  .hero#top > .sp-fv-content > .sp-fv-logo {
    transform: scale(1.5) !important;
    transform-origin: right center !important;
  }
}

/* ===== SP FV LOGO SCALE 150 END ===== */

/* ===== SP FV LOGO POSITION START ===== */

@media (max-width: 980px) {
  .hero#top > .sp-fv-content > .sp-fv-logo {
    position: relative !important;
    left: 35px !important;
    top: 25px !important;
  }
}

/* ===== SP FV LOGO POSITION END ===== */

/* ===== SP FV TEXT POSITION START ===== */

@media (max-width: 980px) {
  .hero#top > .sp-fv-content > .sp-fv-sub,
  .hero#top > .sp-fv-content > .sp-fv-title {
    position: relative !important;
    top: -25px !important;
    left: -20px !important;
  }
}

/* ===== SP FV TEXT POSITION END ===== */

/* ===== SP FV TITLE POSITION START ===== */

@media (max-width: 980px) {
  .hero#top > .sp-fv-content > .sp-fv-title {
    top: -29px !important;
  }
}

/* ===== SP FV TITLE POSITION END ===== */

/* ===== SP FV SUB POSITION START ===== */

@media (max-width: 980px) {
  .hero#top > .sp-fv-content > .sp-fv-sub {
    left: -19px !important;
  }
}

/* ===== SP FV SUB POSITION END ===== */

/* ===== SP FV OVERLAY BOTTOM RIGHT START ===== */

@media (max-width: 980px) {
  .hero#top > .sp-fv-overlay {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.70) 0%,
      rgba(255, 255, 255, 0.82) 20%,
      rgba(255, 255, 255, 0.93) 38%,
      rgba(255, 255, 255, 0.98) 52%,
      rgba(255, 255, 255, 1.00) 62%,
      rgba(255, 255, 255, 1.00) 100%
    ) !important;

    clip-path: polygon(
      100% 0%,
      100% 100%,
      0% 100%
    ) !important;

    opacity: 1 !important;
  }
}

@media (max-width: 500px) {
  .hero#top > .sp-fv-overlay {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.70) 0%,
      rgba(255, 255, 255, 0.84) 18%,
      rgba(255, 255, 255, 0.94) 34%,
      rgba(255, 255, 255, 0.99) 48%,
      rgba(255, 255, 255, 1.00) 58%,
      rgba(255, 255, 255, 1.00) 100%
    ) !important;

    clip-path: polygon(
      100% 0%,
      100% 100%,
      0% 100%
    ) !important;

    opacity: 1 !important;
  }
}

/* ===== SP FV OVERLAY BOTTOM RIGHT END ===== */

/* ===== SP FV CONTENT POSITION START ===== */

@media (max-width: 980px) {
  .hero#top > .sp-fv-content {
    transform: translate(15px, 30px) !important;
  }
}

/* ===== SP FV CONTENT POSITION END ===== */

/* ===== SP FV BG ZOOM ANIMATION START ===== */

@keyframes sp-fv-bg-zoom-out {
  0% {
    transform: scale(1.035);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 980px) {
  .hero#top > .sp-fv-bg {
    transform-origin: 48% 18% !important;
    animation:
      sp-fv-bg-zoom-out
      3.4s
      cubic-bezier(0.22, 1, 0.36, 1)
      both !important;
    will-change: transform;
  }
}

@media (max-width: 500px) {
  .hero#top > .sp-fv-bg {
    transform-origin: 52% 17% !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 980px) {
  .hero#top > .sp-fv-bg {
    animation: none !important;
    transform: scale(1) !important;
    will-change: auto;
  }
}

/* ===== SP FV BG ZOOM ANIMATION END ===== */

/* ===== SP FV OVERLAY FADE ANIMATION START ===== */

@keyframes sp-fv-overlay-fade-in {
  0% {
    filter: opacity(0);
  }

  100% {
    filter: opacity(1);
  }
}

@media (max-width: 980px) {
  .hero#top > .sp-fv-overlay {
    animation:
      sp-fv-overlay-fade-in
      1.5s
      cubic-bezier(0.22, 1, 0.36, 1)
      0.25s
      both !important;
    will-change: filter;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 980px) {
  .hero#top > .sp-fv-overlay {
    animation: none !important;
    filter: none !important;
    will-change: auto;
  }
}

/* ===== SP FV OVERLAY FADE ANIMATION END ===== */

/* ===== SP FV LOGO FADE ANIMATION START ===== */

@keyframes sp-fv-logo-fade-in {
  0% {
    filter: opacity(0);
  }

  100% {
    filter: opacity(1);
  }
}

@media (max-width: 980px) {
  .hero#top > .sp-fv-content > .sp-fv-logo {
    animation:
      sp-fv-logo-fade-in
      1.25s
      cubic-bezier(0.22, 1, 0.36, 1)
      1.05s
      both !important;
    will-change: filter;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 980px) {
  .hero#top > .sp-fv-content > .sp-fv-logo {
    animation: none !important;
    filter: none !important;
    will-change: auto;
  }
}

/* ===== SP FV LOGO FADE ANIMATION END ===== */

/* ===== SP FV TEXT FADE ANIMATION START ===== */

@keyframes sp-fv-text-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@media (max-width: 980px) {
  .hero#top > .sp-fv-content > .sp-fv-sub {
    opacity: 0;
    animation:
      sp-fv-text-fade-in
      1.3s
      cubic-bezier(0.22, 1, 0.36, 1)
      1.3s
      both !important;
    will-change: opacity;
  }

  .hero#top > .sp-fv-content > .sp-fv-title {
    opacity: 0;
    animation:
      sp-fv-text-fade-in
      1.3s
      cubic-bezier(0.22, 1, 0.36, 1)
      1.6s
      both !important;
    will-change: opacity;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 980px) {
  .hero#top > .sp-fv-content > .sp-fv-sub,
  .hero#top > .sp-fv-content > .sp-fv-title {
    opacity: 1 !important;
    animation: none !important;
    will-change: auto;
  }
}

/* ===== SP FV TEXT FADE ANIMATION END ===== */

/* ===== SP FV REVEAL DELAY PLUS 0.5S APPLIED ===== */

/* ===== SP FV TEXT DURATION PLUS 0.3S APPLIED ===== */

/* ===== SP FV TEXT SLOW FADE START ===== */

@media (max-width: 980px) {
  .hero#top .sp-fv-sub,
  .hero#top .sp-fv-title,
  .hero#top .sp-fv-copy,
  .hero#top .sp-fv-text,
  .hero#top .hero-logo-sub,
  .hero#top #hero-title,
  .hero#top .sp-fv-content > p,
  .hero#top .sp-fv-content > h1,
  .hero#top .sp-fv-content > h2,
  .hero#top .sp-fv-content > span {
    animation-duration: 3.2s !important;
    transition-duration: 3.2s !important;

    animation-timing-function:
      cubic-bezier(0.37, 0, 0.63, 1)
      !important;

    transition-timing-function:
      cubic-bezier(0.37, 0, 0.63, 1)
      !important;
  }
}

/* ===== SP FV TEXT SLOW FADE END ===== */