/* ==============================
    bg固定調整
============================== */

.mainvisual-inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;  /* ★ 右寄せ */
  align-items: flex-end;      /* 下側を見せたいなら */
}

.mainvisual .mv {
  height: 100%;
  width: auto;
  min-width: 100%;            /* 画面より小さくならないように保険 */
  object-fit: cover;          /* はみ出しつつトリミング */
  object-position: calc(100% - 30%) bottom; /* 右下を優先して表示 */
}

/* ////////////////////////////
    pc 769px～
//////////////////////////// */

@media screen and (min-width: 769px) {
  .mainvisual .mv {
    height: 200%;
    width: auto;
    object-fit: cover;
    object-position: top right;
  }
}

/* ==============================
   prof layout
============================== */

.main--prof {
  position: relative;
  overflow: hidden;
}

.pcbr {
  display: none;
}


.prof {
  position: relative;
  z-index: 2;
  width: min(95%, 500px);
  margin: 0 auto;
  padding: 108px clamp(5.3vw, 7.8vw, 60px) 72px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
  text-align: center;
  border-left: 1px solid var(--black);
  border-right: 1px solid var(--black);

  /* ここから追加 👇 */
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1),
    transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 黒バー終了後に付けるクラス */
.prof.is-enter {
  opacity: 1;
  transform: translateY(0);
}

.orange {
  color: var(--orange);
}

.prof__maintitle {
  font-size: 3.2rem;
  margin-bottom: 56px;
}

.prof__title {
  font-size: 2.4rem;
  line-height: 1.3;
}

.prof__heading {
    margin-bottom: 32px;
}

.name__en {
    letter-spacing: 2px;
}

.prof__sns {
    margin-bottom: 24px;
    font-size: 1.2rem;
}

.prof__sns svg {
    width: 20px;
    height: 20px;
}

.prof__catch {
  font-size: 1.7rem;
  line-height: 1.8;
  color: var(--orange);
  opacity: 0.9;
  margin-bottom: 32px;
}

.prof__txt {
  font-family:"DotGothic16",sans-serif;
  font-size: 1.4rem;
  line-height: 2;
  margin-bottom: 24px;
  text-align: left;
}

.prof__work {
  font-size: 1.2rem;
  line-height: 1.5;
}

.topback {
  margin-top: 40px;
}

/* ★表示アニメ */


/* 一旦全部隠す・下にズラす */
.prof__maintitle,
.prfImg,
.prof__heading,
.prof__catch,
.prof__txt,
.prof__sns,
.prof__work,
.topback {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 1.1s cubic-bezier(0.19, 1, 0.22, 1),
    transform 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}

/* ② タイトル：一番先に登場 */
.prof.is-enter .prof__maintitle {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

/* ③ 画像＋見出し：次に登場 */
.prof.is-enter .prfImg,
.prof.is-enter .prof__heading {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.1s;
}

/* ④ キャッチコピー */
.prof.is-enter .prof__catch {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.6s;
}

/* ⑤ 本文テキスト */
.prof.is-enter .prof__txt {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 2.0s;
}

/* ⑥ SNS */
.prof.is-enter .prof__sns {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 2.4s;
}

/* ⑦ 代表作 */
.prof.is-enter .prof__work {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 2.8s;
}

/* ⑧ TOPへ戻る */
.prof.is-enter .topback {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 3.2s;
}

/* ////////////////////////////
    pc 769px～
//////////////////////////// */

@media screen and (min-width:769px) {
  
  .pcbr {
    display: block;
  }

  .spbr {
    display: none;
  }
  .prof {
  width: min(90%, 900px);
  margin: 0 auto;
  padding: 120px clamp(5.3vw, 7.8vw, 60px) 64px;
  text-align: center;
  }

  .prof__maintitle {
  font-size: 4.8rem;
  margin-bottom: 96px;
  }

  .prfImg {
    margin-bottom: 24px;
  }

  .prof__title {
    font-size: 3.6rem;
    margin-bottom: 4px;
  }

  .prof__heading {
      margin-bottom: 64px;
  }

  .name__en {
    font-size: 2rem;
      letter-spacing: 3px;
  }

  .prof__sns {
      margin-bottom: 56px;
  }

  .prof__sns svg {
    width: 24px;
    height: 24px;
  }

  .prof__catch {
    font-size: 2.4rem;
    line-height: 1.8;
    margin-bottom: 48px;
  }

  .prof__txt {
    font-family:"DotGothic16",sans-serif;
    font-size: 1.8rem;
    line-height: 2;
    margin-bottom: 56px;
    text-align: center;
  }

  .prof__work {
  font-size: 1.6rem;
  line-height: 1.5;
  }

  .topback {
    margin-top: 72px;
  }
}