@charset "UTF-8";

/* ============================================================
   メインビジュアルの画像（mv-pc-3.webp：1912×823 の写真。左側約 1/3 が文章用の余白）
   PC  … エリア全体に敷き、右端合わせ。幅が狭い画面では左の余白から先に切れる
   SP  … 本文と CTA ボタンの間に、太陽を中央に置き、手元・パソコンを切り出して表示
   ※ 以前のパーツ配置版は assets/css/mv-visual.css ＋ assets/img/top/mv/（読み込みは外している）
   ============================================================ */

.top .mv__wrap {
  background-color: #f2ede6; /* 写真左側の地の色に合わせる */
}

.top .mv-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.top .mv__img.mv-photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* 右端合わせを少しゆるめ、狭い画面で太陽・手元が文章にかからないよう絵を右へ寄せる（右端は窓際の植物が少し切れる） */
  object-position: 85% center;
}

/* SP：本文（上から約 340px）と CTA ボタン（下から 80px）の間に表示し、上端は地の色になじませる */
@media only screen and (max-width: 767px) {
  .top .mv-photo {
    inset: auto 0 92px;
    height: max(180px, calc(100% - 340px - 92px));
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
  }

  .top .mv__img.mv-photo img {
    /* 写真内の太陽の中心は横 65.5%。画像枠と切り抜きの基準をそろえて中央に保つ。
       横幅を広げ、画面が低い場合も写真の右端に空白が出ないようにする。 */
    position: relative;
    left: 50%;
    width: 150%;
    object-position: 65.5% 50%;
    transform: translateX(-65.5%);
  }
}