.fv { position: relative; overflow: hidden; max-width: 1672px; margin-inline: auto; }
.fv__scene { position: relative; width: 100%; margin-top: clamp(-64px, -4vw, -32px); }
.fv__base { display: block; width: 100%; height: auto; }
.fv__mobile-scene { display: none; }
.fv__customer { position: absolute; left: 71.47%; top: 24.23%; width: 6.28%; height: auto; }
.fv__copy { position: absolute; top: clamp(56px, 6vw, 96px); left: max(48px, calc((100% - 1200px) / 2)); width: 48%; }
.fv h1 { margin: 0; font-size: clamp(27px, 2.8vw, 44px); font-weight: 700; line-height: 1.8; letter-spacing: .015em; color: #244c49; }
.fv__lead { max-width: 470px; margin-top: 24px; font-family: "Yu Gothic", "Meiryo", sans-serif; font-size: 14px; line-height: 2; color: #536b66; }
.fv__lead p { margin: 0; }
.fv__lead p + p { margin-top: 10px; }
.fv__lead .fv__lead-main { font-size: 15px; font-weight: 600; color: #244c49; }
.fv__lead-main span { display: inline-block; }
.fv__name { display: flex; align-items: baseline; gap: 14px; margin: 28px 0 0; font-size: 18px; font-weight: 500; letter-spacing: .1em; color: #244c49; }
.fv__name span { font-family: Arial, sans-serif; font-size: 11px; letter-spacing: .16em; color: #728782; }
.fv__actions { display: flex; align-items: center; gap: 28px; margin-top: 38px; }
.fv__actions button { font: inherit; font-size: 13px; font-weight: 500; opacity: 1; cursor: default; }
.fv__actions a { font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; }
.fv__actions a:focus-visible { outline: 2px solid #397b7c; outline-offset: 5px; }
.fv__actions a:hover { border-bottom-color: #397b7c; }
.fv__contact { display: flex; align-items: center; gap: 28px; border: 0; border-radius: 999px; padding: 15px 25px; background: #2b7476; color: #fff; }
.fv__about { display: flex; align-items: center; gap: 15px; padding: 10px 0; background: transparent; border: 0; border-bottom: 1px solid #b9cdca; color: #365b55; }
.fv__actions :is(button, a) span { font-family: Arial, sans-serif; font-size: 17px; }
@media (min-width: 1001px) and (max-width: 1100px) {
  .fv__copy { top: 24px; }
  .fv h1 { font-size: 27px; }
  .fv__lead { font-size: 13px; max-width: 390px; margin-top: 16px; }
  .fv__name { margin-top: 16px; }
  .fv__actions { margin-top: 20px; }
}
@media (max-width: 1000px) {
  .fv { display: flex; flex-direction: column; }
  .fv__copy { position: static; order: -1; width: auto; padding: 22px 24px 0; }
  .fv h1 { font-size: clamp(21px, 4.9vw, 32px); line-height: 1.85; letter-spacing: 0; }
  .fv__lead { margin-top: 22px; font-size: 14px; max-width: 520px; }
  .fv__name { margin-top: 24px; font-size: 17px; }
  .fv__actions { margin-top: 30px; gap: 24px; }
  .fv__contact { padding: 14px 21px; gap: 20px; }
  .fv__scene { width: 180%; margin-left: -80%; margin-top: 20px; }
}
@media (min-width: 601px) and (max-width: 1000px) {
  .fv__scene { width: 125%; margin-left: -25%; margin-top: 20px; }
}
@media (max-width: 360px) {
  .fv__copy { padding-inline: 18px; }
  .fv h1 { font-size: 19px; }
  .fv__actions { gap: 20px; }
}
@media (max-width: 600px) {
  .fv > .fv__scene { display: none; }
  .fv__copy { padding-top: 20px; padding-bottom: 16px; }
  .fv__mobile-scene { display: block; overflow: hidden; height: clamp(210px, 60vw, 290px); margin: 10px -24px 0; }
  .fv__mobile-art { position: relative; width: 180%; margin-left: -100%; clip-path: polygon(70% 0, 100% 0, 100% 67%, 75% 67%, 75% 52%, 70% 52%); }
  .fv__lead { margin-top: 14px; font-size: 13px; }
  .fv__name { margin-top: 18px; }
  .fv__actions { margin-top: 22px; }
}
@media (max-width: 360px) {
  .fv__mobile-scene { margin-inline: -18px; }
}