/* [fv-kv] fx02型キービジュアル（#hero__Content 専用）
   768px+: コンテナ幅に連動して % 一括スケール（MQ 追加なし）
   CTA: カード(.p-kv__title)内・中央寄せ・幅抑えめ
*/

#hero__Content.p-kv {
  --fv-header-h: 96px;
  overflow: visible;
  width: 100%;
  margin: 0;
  padding: var(--fv-header-h) 0 0;
  box-sizing: border-box;
  background: url("/event/fx03/images/kv/bg_kv.png") no-repeat center bottom / cover;
  color: #fff;
  font-weight: bold;
}

/*-----------------------
iPad mini 向け（ここにスタイルを追記）
- 第6世代の CSS ピクセル幅の目安: 縦 744px / 横 1133px
- 縦 744px は SP 帯（max-width: 767px）に含まれる。PC 型 KV を維持したい場合は下記 MQ で上書き
- 横 1133px は PC 帯（min-width: 768px）のため、必要時のみ個別調整
-----------------------*/
@media only screen and (min-width: 744px) and (max-width: 767px) {
  /*
  追記例:
  #hero__Content.p-kv { }
  #hero__Content.p-kv .p-kv__inner { }
  #hero__Content.p-kv .p-kv__button { }
  */
}

/*-----------------------
iPad Air 向け（ここにスタイルを追記）
- 第5世代以降の CSS ピクセル幅の目安: 縦 820px / 横 1180px
- 縦 820px は tablet 帯（768〜1024）に含まれる
-----------------------*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #hero__Content.p-kv {
    --fv-header-h: 72px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 820px) {
  #hero__Content.p-kv {
    --fv-header-h: 64px;
  }
}

@media only screen and (min-width: 821px) and (max-width: 1180px) {
  /*
  追記例（iPad Air 横向き 1180px など）:
  #hero__Content.p-kv { }
  #hero__Content.p-kv .p-kv__inner { --fv-card-w: 60%; --fv-talent-w: 52%; }
  */
}

/*-----------------------
iPad Pro 向け（ここにスタイルを追記）
- 11インチ: 縦 834px / 横 1194px
- 12.9インチ: 縦 1024px / 横 1366px
- 縦 834〜1024px は tablet 帯（768〜1024）に含まれる
- 横 1194px 以上は PC 帯のため、必要時のみ個別調整
-----------------------*/
@media only screen and (min-width: 1025px) and (max-width: 1193px) {
  /*
  追記例（iPad Pro 11インチ 横向き など）:
  #hero__Content.p-kv { }
  #hero__Content.p-kv .p-kv__inner { }
  */
}

@media only screen and (min-width: 1194px) and (max-width: 1366px) {
  /*
  追記例（iPad Pro 12.9インチ 横向き など）:
  #hero__Content.p-kv { }
  #hero__Content.p-kv .p-kv__inner { }
  */
}

#hero__Content.p-kv .p-kv__wrapper {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 0 2.4%;
  box-sizing: border-box;
}

/* レイアウト比率（inner 幅に対する % のみ → 幅縮小と連動） */
#hero__Content.p-kv .p-kv__inner {
  --fv-card-w: 60%;
  --fv-talent-w: 52%;
  --fv-talent-r: -1%;
  --fv-canvas-h: 53%;
  position: relative;
  width: 100%;
  max-width: 100%;
  padding-top: var(--fv-canvas-h);
  box-sizing: border-box;
  container-type: inline-size;
}

#hero__Content.p-kv .p-kv__title,
#hero__Content.p-kv .p-kv__image {
  position: absolute;
  margin: 0;
  max-width: 100%;
}

#hero__Content.p-kv .p-kv__title {
  top: 0;
  left: -10%;
  width: var(--fv-card-w);
  margin-top: -1%;
  z-index: 3;
}

#hero__Content.p-kv .p-kv__title picture,
#hero__Content.p-kv .p-kv__image picture {
  display: block;
  width: 100%;
}

#hero__Content.p-kv .p-kv__title img,
#hero__Content.p-kv .p-kv__image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  background: transparent;
}

#hero__Content.p-kv .p-kv__image {
  top: auto;
  bottom: 0;
  right: var(--fv-talent-r);
  left: auto;
  width: var(--fv-talent-w);
  z-index: 1;
}

#hero__Content.p-kv .p-kv__image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* CTA: カード内中央・幅58%（画像内ボタン枠に合わせる） */
#hero__Content.p-kv .p-kv__button {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 58%;
  margin: 0;
  transform: translateX(-50%);
  z-index: 4;
  box-sizing: border-box;
}

#hero__Content.p-kv .p-kv__button .cta--group {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  z-index: 4;
  font-size: clamp(1.6rem, 3.2cqw, 2.6rem);
}

#hero__Content.p-kv .p-kv__button .cta--group.fv a {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

#hero__Content.p-kv .p-kv__button .cta--group.fv .cv--Btn {
  display: block;
  width: 105%;
  max-width: 105%;
  font-size: 0.7em;
  padding: 1em 2.1em 1em 1.25em;
  animation: none;
  margin: 0 auto;
  bottom:0em;
  left: -2.5%;
  box-sizing: border-box;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

#hero__Content.p-kv .p-kv__button .cta--group.fv .cv--Btn span {
  font-size: 0.82em;
  margin-right: 0.35em;
  padding: 0.12em 0.32em;
}

#hero__Content.p-kv .p-kv__button .cta--group.fv .cv--Btn strong {
  font-size: 1em;
}

#hero__Content.p-kv .p-kv__button .cta--group.fv .cv--Btn::before {
  right: 0.55em;
  width: 1em;
  height: 1em;
}

#hero__Content.p-kv .p-kv__button .cta--group.fv .tips {
  position: absolute;
  top: auto;
  bottom: calc(100% + -0.5em);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 2px);
  margin: 0;
  padding: 0.42em 0.9em 0.48em;
  font-size: 0.55em;
  line-height: 1.3;
  white-space: nowrap;
  box-sizing: border-box;
  overflow: visible;
}

#hero__Content.p-kv .p-kv__button .cta--group.fv .tips::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -0.3em;
  left: 50%;
  right: auto;
  width: 0;
  height: 0;
  margin: 0;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 0.35em 0.32em 0 0.32em;
  border-color: #fff2ef transparent transparent transparent;
}

#hero__Content.p-kv .p-kv__button .cta--group.fv .tips .nim {
  font-size: 1.2em;
}

@supports not (width: 1cqw) {
  #hero__Content.p-kv .p-kv__button .cta--group {
    font-size: clamp(1.6rem, 1.75vw, 2.6rem);
  }
}

/* SP */
@media not all and (min-width: 768px) {
  #hero__Content.p-kv {
    --fv-header-h: 64px;
    height: auto;
    min-height: 0;
    padding-top: var(--fv-header-h);
    background: url("/event/fx03/images/kv/bg_kv_sp.png") no-repeat center top / cover;
  }

  #hero__Content.p-kv .p-kv__wrapper {
    padding: 0;
  }

  #hero__Content.p-kv .p-kv__inner {
    position: relative;
    padding-top: 12px;
    height: auto;
    container-type: normal;
  }

  #hero__Content.p-kv .p-kv__title {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin: 0;
    z-index: auto;
  }

  #hero__Content.p-kv .p-kv__title img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
  }

  #hero__Content.p-kv .p-kv__image {
    display: none;
  }

  #hero__Content.p-kv .p-kv__button {
    left: 50%;
    bottom: 8%;
    width: 68%;
    transform: translateX(-50%);
  }

  #hero__Content.p-kv .p-kv__button .cta--group {
    font-size: 7.55vw;
  }

  #hero__Content.p-kv .p-kv__button .cta--group.fv .cv--Btn {
    width: 125%;
    max-width: 125%;
    font-size: 0.6em;
    padding: 1.4em 2.1em 1.4em 1.25em;
    bottom: -1.6em;
    left: -13%;
  }

  #hero__Content.p-kv .p-kv__button .cta--group.fv .cv--Btn strong {
    font-size: 1.2em;
  }

  #hero__Content.p-kv .p-kv__button .cta--group.fv .cv--Btn span {
    font-size: 1em;
  }

  #hero__Content.p-kv .p-kv__button .cta--group.fv .tips {
    bottom: calc(100% + -9vw);
    font-size: 0.55em;
    padding: 1.6vw 2.8vw 1.8vw;
    max-width: calc(100% - 2vw);
  }

  #hero__Content.p-kv .p-kv__button .cta--group.fv .tips::before {
    bottom: -1.2vw;
    border-width: 1.6vw 1.45vw 0 1.45vw;
  }
}