/* フッターのカスタマイズ（mainvisual-style.css） */

/*
    SWELLテーマのトップページのメインビジュアルのCSSを追加します。
*/


/* ==============================
メインビジュアル
============================== */

/* SWELL メインビジュアル内 FV */
.fk-fv {
  position: relative;
  width: 100%;
  height: 804px;
  overflow: hidden;
}

.fk-fv-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 804px;
  transform-origin: top left;
}

/* SWELL / WordPress の本文スタイルを打ち消す */
.fk-fv p,
.fk-fv ul,
.fk-fv li {
  margin: 0 !important;
  padding: 0 !important;
}

.fk-fv ul,
.fk-fv li {
  list-style: none !important;
}

.fk-fv li::before,
.fk-fv li::marker {
  display: none !important;
  content: "" !important;
}

.fk-fv a {
  text-decoration: none !important;
}

/* 右ナビ */
.fk-hero-nav {
  position: absolute !important;
  top: 88px;
  right: 86px;
  z-index: 5;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 78px;
}

.fk-hero-nav a {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  color: rgba(244, 244, 244, 0.88) !important;
  font-size: 21px;
  letter-spacing: 3.2px;
  line-height: 1.5;
  white-space: nowrap;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35);
}

/* 641〜1439px: 1440px基準の配置をviewport内に縮小する */
@media (min-width: 641px) and (max-width: 1439px) {
  .fk-fv {
    height: 55.833vw;
  }

  .fk-fv-inner {
    left: 0;
    transform: scale(calc(100vw / 1440px));
    transform-origin: top left;
  }
}

/* 1440px以上: 中身は1440px基準のまま中央固定する */
@media (min-width: 1440px) {
  .fk-fv {
    height: 804px;
  }

  .fk-fv-inner {
    left: 50%;
    transform: translateX(-50%);
    transform-origin: top center;
  }

  .fk-title { top: 294px !important; }
  .fk-copy { top: 490px !important; }
  .fk-button { top: 552px !important; }

  .fk-title-2 { top: 60px !important; }
  .fk-copy-2 { top: 522px !important; }
  .fk-button-2 { top: 596px !important; }

  .fk-title-3 { top: 282px !important; }
  .fk-copy-3 { top: 456px !important; }
  .fk-button-3 { top: 543px !important; }
}

/* タブレット: ブログパーツ側と同じ視認性補正 */
@media (min-width: 641px) and (max-width: 1024px) {
  .fk-fv {
    height: max(460px, min(804px, 55.833vw));
  }

  .fk-office {
    transform: scale(1.1);
    transform-origin: left top;
  }

  .fk-title,
  .fk-title-2,
  .fk-title-3,
  .fk-copy,
  .fk-copy-2,
  .fk-copy-3 {
    transform: scale(1.06);
    transform-origin: left top;
  }

  .fk-button,
  .fk-button-2,
  .fk-button-3 {
    transform: scale(1.22);
    transform-origin: left top;
  }

  .fk-hero-nav {
    top: 70px;
    right: 70px;
    gap: 58px;
    transform: scale(1.15);
    transform-origin: right top;
  }
}

/* スマホ */
@media (max-width: 640px) {
  .fk-fv {
    height: 620px;
  }

  .fk-fv-inner {
    width: 390px;
    height: 620px;
  }

  .fk-office {
    top: 34px !important;
    left: 24px !important;
    font-size: 13px !important;
    letter-spacing: 3.8px !important;
  }

  .fk-title {
    top: 312px !important;
    left: 30px !important;
    transform: scale(0.72);
    transform-origin: left top;
  }

  .fk-copy {
    top: 486px !important;
    left: 36px !important;
    width: 310px !important;
    white-space: normal !important;
    font-size: 15px !important;
    letter-spacing: 1.4px !important;
    line-height: 1.8 !important;
  }

  .fk-button {
    top: 548px !important;
    left: 36px !important;
    width: 190px !important;
    height: 56px !important;
  }

  .fk-button-text {
    top: 15px !important;
    left: 20px !important;
    font-size: 17px !important;
  }

  .fk-hero-nav {
    top: 34px;
    right: 24px;
    gap: 24px;
  }

  .fk-hero-nav a {
    font-size: 14px;
    letter-spacing: 1.8px;
  }
}