/* ===== FV CLEAN RESET ===== */

.hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 48% 52% !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 640px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

.hero-copy {
  position: relative !important;
  z-index: 5 !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 100px 48px 88px clamp(56px, 8vw, 140px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
  inset: auto !important;
  box-sizing: border-box !important;
}

.hero-logo {
  position: relative !important;
  z-index: 6 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100%, 340px) !important;
  max-width: 340px !important;
  margin: 0 auto 0 !important;
  padding: 0 !important;
  transform: none !important;
  inset: auto !important;
  opacity: 1 !important;
}

.hero-logo img {
  display: block !important;
  width: 100% !important;
  max-width: 340px !important;
  height: auto !important;
  margin: 0 auto 6px !important;
  padding: 0 !important;
  object-fit: contain !important;
  clip-path: none !important;
  transform: none !important;
}

.hero-logo-sub,
.hero-logo .hero-logo-sub,
.hero .hero-logo .hero-logo-sub,
p.hero-logo-sub {
  position: relative !important;
  z-index: 7 !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  color: #b89a57 !important;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Times New Roman", serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  line-height: 1.35 !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: none !important;
  inset: auto !important;
}

#hero-title,
.hero-copy h1 {
  position: relative !important;
  z-index: 6 !important;
  display: block !important;
  width: 100% !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  color: #111 !important;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif !important;
  font-size: clamp(16px, 1.2vw, 18px) !important;
  font-weight: 600 !important;
  line-height: 1.7 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: none !important;
  inset: auto !important;
}

.hero-rule {
  display: none !important;
}

.hero-visual {
  position: relative !important;
  z-index: 1 !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 640px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  inset: auto !important;
  transform: none !important;
  opacity: 1 !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
}

.hero-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0.8) 12%, rgba(255,255,255,0) 42%) !important;
  pointer-events: none !important;
}

.service,
#service {
  position: relative !important;
  z-index: 10 !important;
  clear: both !important;
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  .hero {
    display: flex !important;
    min-height: 620px !important;
  }

  .hero-copy {
    width: 100% !important;
    padding: 100px 24px 80px !important;
  }

  .hero-logo {
    width: min(74vw, 310px) !important;
    max-width: 310px !important;
  }

  .hero-logo img {
    max-width: 310px !important;
  }

  .hero-logo-sub,
  .hero-logo .hero-logo-sub,
  .hero .hero-logo .hero-logo-sub,
  p.hero-logo-sub {
    font-size: 10px !important;
    letter-spacing: 0.16em !important;
  }

  #hero-title,
  .hero-copy h1 {
    margin-top: 12px !important;
    font-size: clamp(15px, 3.8vw, 18px) !important;
    white-space: normal !important;
  }

  .hero-visual {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    min-height: 620px !important;
    opacity: 0.28 !important;
  }

  .hero-visual::before {
    background: rgba(255,255,255,0.68) !important;
  }
}

/* ===== LOGO TEXT DISTANCE FORCE FIX START ===== */
.hero-logo {
  margin: 0 auto 0 !important;
}

.hero-logo img {
  margin: 0 auto -150px !important;
}

.hero-logo-sub,
.hero-logo .hero-logo-sub,
.hero .hero-logo .hero-logo-sub,
p.hero-logo-sub {
  margin: 0 0 14px !important;
  color: #b89a57 !important;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Times New Roman", serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  line-height: 1.25 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#hero-title,
.hero-copy h1 {
  margin: 0 !important;
  font-size: clamp(15px, 1.1vw, 18px) !important;
  line-height: 1.6 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
}

@media (max-width: 900px) {
  .hero-logo img {
    margin-bottom: -120px !important;
  }

  .hero-logo-sub,
  .hero-logo .hero-logo-sub,
  .hero .hero-logo .hero-logo-sub,
  p.hero-logo-sub {
    font-size: 10px !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 12px !important;
  }

  #hero-title,
  .hero-copy h1 {
    font-size: clamp(15px, 3.8vw, 18px) !important;
  }
}
/* ===== LOGO TEXT DISTANCE FORCE FIX END ===== */

/* ===== FINAL LOGO UP / CATCH SMALL START ===== */
.hero-logo img {
  transform: translateY(-18px) !important;
}

.hero-logo-sub,
.hero-logo .hero-logo-sub,
.hero .hero-logo .hero-logo-sub,
p.hero-logo-sub {
  font-size: 13px !important;
  letter-spacing: 0.2em !important;
}

#hero-title,
.hero-copy h1 {
  margin-top: 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.6 !important;
}

@media (max-width: 900px) {
  .hero-logo img {
    transform: translateY(-14px) !important;
  }

  .hero-logo-sub,
  .hero-logo .hero-logo-sub,
  .hero .hero-logo .hero-logo-sub,
  p.hero-logo-sub {
    font-size: 10px !important;
  }

  #hero-title,
  .hero-copy h1 {
    margin-top: 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
  }
}
/* ===== FINAL LOGO UP / CATCH SMALL END ===== */

/* ===== MINOR TEXT POSITION ADJUST START ===== */
.hero-logo-sub,
.hero-logo .hero-logo-sub,
.hero .hero-logo .hero-logo-sub,
p.hero-logo-sub {
  transform: translateY(7px) !important;
}

#hero-title,
.hero-copy h1 {
  transform: translateX(16px) !important;
}
/* ===== MINOR TEXT POSITION ADJUST END ===== */

/* ===== CATCH TEXT LEFT ADJUST START ===== */
#hero-title,
.hero-copy h1 {
  transform: translateX(6px) !important;
}
/* ===== CATCH TEXT LEFT ADJUST END ===== */

/* ===== HERO TEXT BALANCE ADJUST START ===== */
.hero-logo-sub,
.hero-logo .hero-logo-sub,
.hero .hero-logo .hero-logo-sub,
p.hero-logo-sub {
  transform: translateY(13px) !important;
}

#hero-title,
.hero-copy h1 {
  transform: translate(6px, -8px) !important;
}
/* ===== HERO TEXT BALANCE ADJUST END ===== */

/* ===== FV IMAGE CHANGE START ===== */
.hero-visual {
  background-image: url("./img/10.JPEG") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
/* ===== FV IMAGE CHANGE END ===== */

/* ===== FV IMG DISPLAY FIX START ===== */
.hero-visual {
  background-image: none !important;
  overflow: hidden !important;
}

.hero-visual img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 640px !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.hero-visual::before {
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0.78) 14%, rgba(255,255,255,0) 48%) !important;
}
@media (max-width: 900px) {
  .hero-visual img {
    min-height: 620px !important;
  }
}
/* ===== FV IMG DISPLAY FIX END ===== */

/* ===== FV BACKGROUND 10_3 16_10 FIX START ===== */

/*
  ロゴ位置は触らない。
  背景画像だけを 1600:1000 = 16:10 の比率で表示し、
  画像の右端をページ右端に合わせる。
*/

.hero-visual {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 992px !important;
  height: 620px !important;
  min-height: 620px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: none !important;
  transform: none !important;
}

.hero-visual img {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  display: block !important;
  width: 992px !important;
  height: 620px !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: right center !important;
  opacity: 0.95 !important;
  visibility: visible !important;
  transform: none !important;
}

/* 左側だけ白く馴染ませる。右端側は消さない */
.hero-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(
    90deg,
    #fff 0%,
    rgba(255,255,255,0.92) 8%,
    rgba(255,255,255,0.68) 18%,
    rgba(255,255,255,0.36) 30%,
    rgba(255,255,255,0.10) 44%,
    rgba(255,255,255,0) 58%
  ) !important;
}

@media (max-width: 1100px) {
  .hero-visual {
    width: 64vw !important;
    height: 40vw !important;
    min-height: 0 !important;
  }

  .hero-visual img {
    width: 100% !important;
    height: 100% !important;
  }
}

/* ===== FV BACKGROUND 10_3 16_10 FIX END ===== */

/* ===== FV IMAGE VISIBLE FIX START ===== */

/*
  ロゴ位置は触らない。
  背景画像だけを右側に固定表示する。
  画像は薄くしすぎず、右端まで見せる。
*/

.hero {
  position: relative !important;
  width: 100% !important;
  max-width: 1200px !important;
  min-width: 1200px !important;
  height: 620px !important;
  min-height: 620px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

/* ロゴ側は固定 */
.hero-copy {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 20 !important;
  width: 420px !important;
  height: 620px !important;
  margin: 0 !important;
  padding: 86px 0 72px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  transform: none !important;
}

.hero-logo {
  position: relative !important;
  z-index: 21 !important;
  width: 300px !important;
  max-width: 300px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
}

.hero-logo img {
  display: block !important;
  width: 300px !important;
  max-width: 300px !important;
  height: auto !important;
  margin: 0 auto -128px !important;
  padding: 0 !important;
  object-fit: contain !important;
  transform: none !important;
  clip-path: none !important;
}

.hero-logo-sub,
.hero-logo .hero-logo-sub,
.hero .hero-logo .hero-logo-sub,
p.hero-logo-sub {
  position: relative !important;
  z-index: 22 !important;
  display: block !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: #b89a57 !important;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Times New Roman", serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  line-height: 1.25 !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: none !important;
}

#hero-title,
.hero-copy h1 {
  position: relative !important;
  z-index: 22 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #111 !important;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: none !important;
}

/* 画像側：右側に明確に表示 */
.hero-visual {
  position: absolute !important;
  top: 64px !important;
  left: 420px !important;
  right: 0 !important;
  z-index: 1 !important;
  width: 780px !important;
  height: 488px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: none !important;
  transform: none !important;
}

.hero-visual img {
  position: static !important;
  display: block !important;
  width: 780px !important;
  height: 488px !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
}

/* 画像を薄くしていたグラデーションを解除 */
.hero-visual::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

.hero-rule {
  display: none !important;
}

/* ===== FV IMAGE VISIBLE FIX END ===== */

/* ===== FV IMAGE RIGHT FULL FIX START ===== */

/*
  ロゴ位置は動かさない。
  画像だけを 1600:1000 = 16:10 で表示。
  FV高さ620pxに対して、画像幅は992px。
  画像の上端・下端・右端をFV/ページ右端に合わせる。
*/

.hero {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 1200px !important;
  height: 620px !important;
  min-height: 620px !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

/* ロゴ側は現在位置を維持するため、1200px設計幅の左側に固定 */
.hero-copy {
  position: absolute !important;
  top: 0 !important;
  left: max(0px, calc((100vw - 1200px) / 2)) !important;
  z-index: 20 !important;
  width: 420px !important;
  height: 620px !important;
  margin: 0 !important;
  padding: 86px 0 72px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  transform: none !important;
}

/* 画像エリア：ページ右端に固定 */
.hero-visual {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  width: 992px !important;
  height: 620px !important;
  min-height: 620px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: none !important;
  transform: none !important;
}

/* 画像本体：1600×1000の比率を崩さず、右端・上下を揃える */
.hero-visual img {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 992px !important;
  height: 620px !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: right center !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
}

/* 画像を薄くしていたグラデーションは解除 */
.hero-visual::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* ===== FV IMAGE RIGHT FULL FIX END ===== */

/* ===== FV GRADIENT RIGHT ADJUST START ===== */

/*
  FV画像上の白グラデーション位置だけを右へ移動。
  ロゴ位置・画像サイズ・画像右端合わせは変更しない。
*/
.hero-visual::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 18%,
    rgba(255,255,255,0.86) 30%,
    rgba(255,255,255,0.52) 44%,
    rgba(255,255,255,0.18) 58%,
    rgba(255,255,255,0) 72%
  ) !important;
}

/* ===== FV GRADIENT RIGHT ADJUST END ===== */

/* ===== FV IMAGE OPACITY GRADIENT START ===== */

/*
  画像自体に透明度グラデーション。
  前回よりグラデーション開始位置を少し右へ移動。
  左端〜18%までは透明、そこから徐々に見え始め、50%あたりで完全表示。
*/

.hero {
  background: #fff !important;
}

.hero-visual::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

.hero-visual img {
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 18%,
    rgba(0,0,0,0.14) 26%,
    rgba(0,0,0,0.38) 34%,
    rgba(0,0,0,0.72) 43%,
    rgba(0,0,0,1) 52%,
    rgba(0,0,0,1) 100%
  ) !important;
  mask-image: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 18%,
    rgba(0,0,0,0.14) 26%,
    rgba(0,0,0,0.38) 34%,
    rgba(0,0,0,0.72) 43%,
    rgba(0,0,0,1) 52%,
    rgba(0,0,0,1) 100%
  ) !important;

  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

/* ===== FV IMAGE OPACITY GRADIENT END ===== */

/* ===== FV LOGO SIZE 150 START ===== */

.hero-logo img {
  width: 120% !important;
  max-width: 408px !important;
}

/* ===== FV LOGO SIZE 150 END ===== */

/* ===== FV LOGO POSITION UP 25 START ===== */

.hero-logo img {
  position: relative !important;
  top: -25px !important;
}

/* ===== FV LOGO POSITION UP 25 END ===== */

/* ===== FV TEXT SIZE 15PX START ===== */

.hero-logo-sub,
.hero-logo .hero-logo-sub,
.hero .hero-logo .hero-logo-sub,
p.hero-logo-sub {
  font-size: 15px !important;
}

#hero-title,
.hero-copy h1 {
  font-size: 15px !important;
}

/* ===== FV TEXT SIZE 15PX END ===== */

/* ===== FV TEXT RIGHT 10 UP 5 START ===== */

.hero-logo-sub,
.hero-logo .hero-logo-sub,
.hero .hero-logo .hero-logo-sub,
p.hero-logo-sub,
#hero-title,
.hero-copy h1 {
  position: relative !important;
  left: 33px !important;
  top: -20px !important;
}

/* ===== FV TEXT RIGHT 10 UP 5 END ===== */

/* ===== MOBILE HERO CENTER FIX START ===== */

@media (max-width: 900px) {
  .hero-logo img {
    position: relative !important;
    left: -28px !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: scale(0.9) !important;
    transform-origin: center center !important;
  }

  .hero-logo-sub,
  .hero-logo .hero-logo-sub,
  .hero .hero-logo .hero-logo-sub,
  p.hero-logo-sub,
  #hero-title,
  .hero-copy h1 {
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: translate(6px, -10px) !important;
  }
}

/* ===== MOBILE HERO CENTER FIX END ===== */

/* ===== PC FV TITLE POSITION START ===== */

@media (min-width: 981px) {
  .hero#top #hero-title > .pc-fv-title-text {
    display: inline-block !important;
    transform: translateX(6px) !important;
  }
}

/* ===== PC FV TITLE POSITION END ===== */