@charset "utf-8";

/* --------------------------------------------------------------------
Header
----------------------------------------------------------------------- */
header {

}
@media (max-width: 767px) {
  #header-logo img {
    max-width: 303px;
  }
  /* ヘッダー下の余白はmv_blockのpadding-topで確保（マージンだと背景が切れるため） */
  #mv_block {
    padding-top: 6.25rem;
  }
}

/* --------------------------------------------------------------------
mv_block
----------------------------------------------------------------------- */
/* タイトル下〜本文ブロックの余白 */
#mv_block .mv-hero-left-col > .mv-hero-body-margin,
#mv_block .space-y-6 > .mv-hero-body-margin {
  margin-top: 1.25rem;
}
@media (min-width: 640px) {
  #mv_block .mv-hero-left-col > .mv-hero-body-margin,
  #mv_block .space-y-6 > .mv-hero-body-margin {
    margin-top: 1.5rem;
  }
}
@media (min-width: 1024px) {
  #mv_block .mv-hero-left-col > .mv-hero-body-margin,
  #mv_block .space-y-6 > .mv-hero-body-margin {
    margin-top: 45px;
  }
}

#mv_block .mv-hero-h1 {
  line-height: 1.4;
}

/* タイトルエリア: SPは100%、PCは左寄せ */
.mv-hero-title-wrap {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 1024px) {
  .mv-hero-title-wrap {
    width: 100%;
    max-width: 600px;
  }
}

/* ttl.svg: SP時は最大幅277px・下マージン多め、PC時は505px */
#mv_block .mv-hero-ttl {
  max-width: 277px;
  margin-bottom: 0.75rem;
}
@media (min-width: 640px) {
  #mv_block .mv-hero-ttl {
    margin-bottom: 1rem;
  }
}
@media (min-width: 1024px) {
  #mv_block .mv-hero-ttl {
    max-width: 505px;
    margin-bottom: 0.5rem;
  }
}

/* ボタン: 高さ・文字・アイコンをレスポンシブに */
.mv-hero-btn {
  height: 72px;
  font-size: 17px;
}
.mv-hero-btn-icon {
  width: 28px;
  height: 28px;
}
@media (min-width: 640px) {
  .mv-hero-btn {
    height: 88px;
    font-size: 19px;
  }
  .mv-hero-btn-icon {
    width: 32px;
    height: 32px;
  }
}
@media (min-width: 1024px) {
  .mv-hero-btn {
    height: 100px;
    font-size: 19px;
  }
  .mv-hero-btn-icon {
    width: 36px;
    height: 36px;
  }
}
.mv-hero-btn-primary {
  background-color: #f97316;
  color: #fff;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.mv-hero-btn-primary:hover {
  background-color: #ea580c;
}
.mv-hero-btn-secondary {
  background-color: #fff;
  color: #2663eb;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.mv-hero-btn-secondary:hover {
  background-color: #eff6ff;
}

/* 人物画像: PC(1024px〜)で固定高さ */
@media (min-width: 1024px) {
  .mv-hero-person-img {
    height: 267px;
    object-fit: cover;
  }
}

/* モバイル: 画像ブロック（人物+施工）をリストの下に、余白確保 */
.mv-hero-visual {
  margin-top: 1.5rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1024px) {
  .mv-hero-visual {
    margin-top: 0;
    width: min(44vw, 720px);
    margin-left: 0;
    margin-right: min(calc(43% - 44vw), calc(50% - 50vw));
  }
  .mv-hero-visual .mv-hero-mv-wrap > div {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

/* SP時: 人物画像をmv.pngの上に重ねる（absolute）、詰まった分はマージンで調整 */
@media (max-width: 1023px) {
  .mv-hero-visual__inner {
    padding-top: 125px;
  }
  .person-img-mobile {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    margin-bottom: 0;
  }
}
@media (min-width: 1024px) {
  .mv-hero-visual__inner {
    padding-top: 0;
  }
}

/* SP時: リード文のサイズ・行間・余白でバランス調整 */
@media (max-width: 639px) {
  #mv_block .mv-hero-lead {
    font-size: 13px;
    line-height: 1.65;
    margin-bottom: 0;
  }
}

/* モバイル: リストの文字サイズ・余白でバランス調整 */
#mv_block .mv-hero-list {
  font-size: 17px;
}
@media (max-width: 639px) {
  #mv_block .mv-hero-list {
    margin-top: 1.5rem;
    gap: 0.5rem;
  }
  #mv_block .mv-hero-list li {
    padding-left: 0.125rem;
  }
}
@media (min-width: 640px) {
  #mv_block .mv-hero-list {
    font-size: 1rem;
  }
}

/* ボタン: モバイルは幅いっぱい、PCは内容幅で最大390px（広がりすぎない） */
#mv_block .mv-hero-buttons {
  width: 100%;
  flex-wrap: wrap;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
/* SP時: 上の余白・ボタン間の余白を2倍程度に */
@media (max-width: 639px) {
  #mv_block .mv-hero-buttons {
    padding-top: 3rem;
    gap: 2rem;
  }
}
#mv_block .mv-hero-buttons .mv-hero-btn {
  max-width: 100%;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  #mv_block .mv-hero-buttons {
    flex-wrap: wrap;
    max-width: 100%;
  }
  #mv_block .mv-hero-buttons .mv-hero-btn {
    width: 100%;
    min-width: 0;
    max-width: min(530px, calc(50% - 1.25rem));
  }
}

/* --------------------------------------------------------------------
Mobile CTA (SP時: 右端・下30px・縦書き・左角丸)
----------------------------------------------------------------------- */
.mobile-cta-bar {
  left: auto;
  right: 0;
  bottom: 30px;
}
.mobile-cta-bar__link {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 1rem 0.75rem;
  letter-spacing: 0.05em;
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* --------------------------------------------------------------------
Footer
----------------------------------------------------------------------- */