@charset "UTF-8";

/* ====================================================
   Home main visual custom styles
   - Loaded only on top.php
   - Do not compile from SCSS
   - Add future MV/loading adjustments here
==================================================== */

/*
  [#1] 820px以下のブレークポイントで、左カラムのレイアウト崩れを防止
*/
@media screen and (max-width: 820px) {
  .p-mv__wrap--type01 {
    /* 固定幅410pxを解除し、親要素内に収める */
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
}

/*
  [#7 revised] 30周年バナーのレスポンシブ配置とスタイリング
*/

/* =================================================================== */
/*  PC表示時 (601px以上) の配置とアニメーション
/* =================================================================== */
@media screen and (min-width: 601px) {
  .p-mv__anniversary {
    /* base.cssの不要な位置指定をリセットし、MV全体中央に配置 */
    top: auto; /* base.cssのtop: 135px;をリセット */
    right: auto;
    margin: 0; /* base.cssのmargin-left: -180px;をリセット */

    position: absolute;
    /* 縦位置：画面下端から10vhを基準に、最小80px、最大120pxの範囲で可変 */
    bottom: clamp(75px, 9vh, 105px); /* 調整 */
    left: 50%;
    z-index: 15;
    /* 横幅：画面幅の32%を基準に、最小320px、最大420pxの範囲で可変 */
    width: clamp(320px, 32vw, 420px); /* 調整 */
    max-width: calc(100vw - 40px);

    /* 初期状態：非表示で少し下に配置（フェードアップ演出用） */
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 10px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
  }

  /* is-phase04のタイミングでフェードアップしながら表示 */
  .p-mv.is-phase04 .p-mv__anniversary {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
}

@media screen and (min-width: 601px) and (max-height: 860px) {
  .p-mv__anniversary {
    width: clamp(300px, 30vw, 380px);
  }
}

@media screen and (min-width: 601px) and (max-height: 760px) {
  .p-mv__anniversary {
    width: clamp(280px, 28vw, 340px);
  }
}

@media screen and (min-width: 601px) and (max-height: 680px) {
  .p-mv__anniversary {
    width: clamp(250px, 26vw, 300px);
  }
}

@media screen and (min-width: 601px) and (max-width: 1100px) {
  .p-mv__news {
    bottom: 16px; /* ニュースが2行になったときに位置調整 */
  }
}

@media screen and (min-width: 601px) and (max-height: 720px) {
  .p-mv__wrap--type01 {
    top: calc(50% - 60px);
  }

  .p-mv__wrap--type02 {
    transform: translateY(-60px);
  }
}


/* =================================================================== */
/*  SP表示時 (600px以下) のレイアウト維持とアニメーション
/* =================================================================== */
@media screen and (max-width: 600px) {
  /*
    前回レイアウト崩れのため無効化したブロックは削除済み
  */

  /* コピー群を少し上へ移動 */
  .p-mv__wrap--type01 {
    top: calc(50% - 60px); /* 既存top:50%を基準に上にずらす */
  }
  
  /* SP表示では、印鑑を早い段階 (is-phase02) で表示する（この指定は維持） */
  .p-mv.is-phase02 .p-mv__copy--type03 {
    opacity: 1;
    transition: opacity 0.8s ease 0.8s;
  }

  /* ニュースを印鑑・バナーより少し遅れて表示 */
  .p-mv.is-phase02 .p-mv__news {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.8s ease 1.6s;
  }
  
  /* HTML構造変更後、SPでもバナーを元の位置に絶対配置で再設置 */
  /* .p-mv__item--type01 { position: relative; } は削除。バナーがこの要素の子ではないため */
  
  .p-mv__anniversary {
    /* base.cssの不要な位置指定をリセット */
    right: auto;
    bottom: auto;
    margin: 0; /* base.cssのmargin-leftをリセット */

    /* 初期状態：MV全体を基準に、画面上半分の中央下寄りに絶対配置 */
    position: absolute;
    top: calc(50vh - 60px); /* 画面上半分(100vh)の垂直中央から上にずらす */
    left: 50%;
    z-index: 15;
    width: 90%;
    max-width: 320px;

    /* 初期状態：非表示で少し下に配置（フェードアップ演出用） */
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 160px); /* 垂直位置を微調整 (+160px) + アニメーション開始位置 */
    transition: opacity 0.8s ease 0.8s, transform 0.8s ease 0.8s;
  }

  /* is-phase02のタイミングでフェードアップしながら表示（既存の指定をこちらに置き換え） */
  .p-mv.is-phase02 .p-mv__anniversary {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 150px); /* 最終的な垂直位置 (+150px) */
  }
}

/*
  [#4] 480px未満で、左右コピーが左に寄りすぎないように調整
*/
@media screen and (max-width: 480px) {
  .p-mv__copy--type04 {
    /* text-align:justify が原因で左に寄るため、左右マージンで中央寄せ */
    margin-left: auto;
    margin-right: auto;
  }
  .p-mv__copy--type02 {
    left: 20px;
    width: calc(100% - 40px);
    margin-left: 0;
    text-align: center;
  }
}

/* =================================================================== */
/*  ドロップシャドウ
/* =================================================================== */
.p-mv__anniversary a {
  display: block;
  box-shadow: 8px 10px 18px rgba(0, 0, 0, 0.22);
}

.p-mv__anniversary img {
  display: block;
  width: 100%;
  height: auto;
}

/*
  [#] Prevent layout/font-size animation on viewport resize
  Keep only the intended MV entrance transitions.
*/
.p-mv__copy--type01,
.p-mv__copy--type02 {
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
}

.p-mv__copy--type04 .p-mv__copy__wrap span {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}