@charset "utf-8";
/* CSS Document */

:root { --header-h: 80px; }


.mv{
  padding-top: var(--header-h);
}
@media (prefers-reduced-motion: no-preference){
  :root{
    --mv-copy-dur: 10.6s;
    --mv-photo-dur: 4.6s;
    --mv-stagger: .28s;
    --mv-ease: cubic-bezier(.16,1,.3,1);
  }

  /* 初期は非表示（JS環境のみ） */
  .js .mv .copy,
  .js .mv .photo{ opacity: 0; }

  /* 再生トリガー */
  .mv.play .copy{
    animation: mvCopyUp var(--mv-copy-dur) var(--mv-ease) both;
  }
  .mv.play .photo{
    /* 右から“開く”＝右の切り抜き量を 12% → 0 へ */
    animation: mvPhotoReveal var(--mv-photo-dur) var(--mv-ease) var(--mv-stagger) both;
  }

  @keyframes mvCopyUp{
    from{ opacity:0; transform: translateY(40px); }
    to  { opacity:1; transform: none; }
  }

  @keyframes mvPhotoReveal{
    from{
      opacity:0;
      clip-path: inset(0 50% 0 0);
    }
    to{
      opacity:1;
      clip-path: inset(0 0 0 0);
    }
  }
}

@media (prefers-reduced-motion: reduce){
  .mv .copy, .mv .photo{ opacity:1 !important; transform:none !important; clip-path:none !important; }
}

.mv{
  margin: 3vh auto 0;
  display: grid;
  grid-template-columns: 311fr 1055fr; /* 左:右 = 311:1055 */
  column-gap: 24px;
  /* 任意：画面が広い時の暴れ防止（必要なければ外してOK） */
  /* align-items: center; */     /* 縦中央にしたい場合は有効化 */
}

/* カラムのはみ出し防止 */
.mv > .copy,
.mv > .photo{
  min-width: 0;
}

.mv .copy{
  display: flex;
  align-items: flex-start;       /* 中央にしたい場合は center */
  justify-content: flex-end;
  padding-right: 30px;
}

.mv .copy img{
  display: block;
  height: auto;
  /* 35%を基準に、最小/最大を設けて暴れ防止 */
  width: clamp(60px, 35%, 100px);
}

.mv .photo img{
  display: block;
  width: 100%;
  height: auto;
  /* トリミングが必要なら以下を有効化
  object-fit: cover;
  aspect-ratio: 16 / 7;  /* 例：比率固定したい場合 */
  */
}

/* ================= Inner MV: SP（≤768px） ================= */
@media (max-width:768px){
  /* 調整用パラメータ（必要なら数値だけ変えてOK） */
  :root{
    --sp-inner-copy-w: clamp(80px, 34vw, 180px); /* コピーSVGの幅（全ページ共通） */
    --sp-inner-copy-top: clamp(18px, 5vw, 28px);   /* 右上の余白 */
    --sp-inner-copy-right: clamp(18px, 5vw, 28px);
    --sp-inner-photo-dur: 1.2s;                   /* 背景フェード時間 */
    --sp-inner-copy-dur: 2s;                      /* コピーのフェード時間（指定どおり2秒） */
  }

  .mv_sp{
    position: relative;
    width: 100%;
    margin-top: var(--sp-header-h, 72px); /* 固定ヘッダー分を押し出し */
    overflow: hidden;
  }

  /* 背景写真 */
  .mv_sp .photo{ position: relative; z-index: 1;
    animation: spInnerFade var(--sp-inner-photo-dur) ease-out both; /* ① その場でフェードイン */
  }
  .mv_sp .photo img{ display:block; width:100%; height:auto; }

  /* コピー（右上に重ねる） */
  .mv_sp .copy{
    position: absolute; z-index: 2;
    top: var(--sp-inner-copy-top);
    right: var(--sp-inner-copy-right);
    width: var(--sp-inner-copy-w);          /* ← “幅だけ”指定。高さは自動 */
    pointer-events: none;
    animation: spInnerSlideUp var(--sp-inner-copy-dur) ease-out .0s both; /* ② 下からフェードイン */
  }
  .mv_sp .copy img{ display:block; width:100%; height:auto; }
}

/* キーフレーム */
@keyframes spInnerFade{
  from{ opacity:0; }
  to  { opacity:1; }
}
@keyframes spInnerSlideUp{
  from{ opacity:0; transform: translateY(20px); }
  to  { opacity:1; transform: none; }
}

/* 動きを抑える環境設定 */
@media (prefers-reduced-motion: reduce){
  .mv_sp .photo, .mv_sp .copy{
    animation: none !important; opacity:1 !important; transform:none !important;
  }
}

.tel-fax {
    margin: 20px auto 0;
    display: flex;
    justify-content: center;
    gap:20px;
}

.tel-fax p,.tel-fax p a {
    font-size: 20px;
}