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

.mainvisual-inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;  /* 左寄せ */
  align-items: flex-end;        /* 左下 */
}

.mainvisual .mv {
  height: 100%;
  width: auto;
  min-width: 100%;
  object-fit: cover;
  object-position: left bottom; /* ← 左下固定 */
}

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

@media screen and (min-width: 769px) {

  .mainvisual-inner {
    width: 100%;
    height: 100%;
    display: block;       /* flex解除 */
    position: relative;
    overflow: hidden;     /* はみ出した分をトリミング */
  }

  .mainvisual .mv {
    position: absolute;
    inset: 0;             /* top:0; right:0; bottom:0; left:0; のショートハンド */
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* 🔍 ここでズーム量と「基準位置」を決める */
    transform: scale(2);         /* ← 拡大率：1.2〜1.6くらいお好みで */
    transform-origin: 9% 90%;
  }
}

/* ==============================
   about layout
============================== */

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

.pcbr {
  display: none;
}


.about {
  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);
}

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

.orange {
  color: var(--orange);
}
.about__maintitle {
  font-size: 3.2rem;
  margin-bottom: 56px;
}

.about__title {
  font-size: 2.4rem;
  margin-bottom: 32px;
}

.about__catch {
  font-size: 2rem;
  margin-bottom: 24px;
}

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

.about__value .about__catch {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.about__value .about__txt{
  text-align: center;
  margin-bottom: 24px;
}

.topback {
  margin-top: 40px;
}

/* ★表示アニメ */

.about__maintitle,
.about__vision,
.about__mission,
.about__value,
.topback {
  opacity: 0;
  transform: translateY(24px); 
  transition:
    opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1),
    transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.about.is-enter .about__maintitle {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

.about.is-enter .about__vision {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.2s;
}

.about.is-enter .about__mission {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.8s;
}

.about.is-enter .about__value {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 2.4s;
}

.about.is-enter .topback {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 3.0s;
}

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

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

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

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

  .about__title {
    font-size: 3.6rem;
    margin-bottom: 48px;
  }

  .about__catch {
    font-size: 2.4rem;
    margin-bottom: 24px;
  }

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

  .about__value .about__catch {
      font-size: 2rem;
      margin-bottom: 8px;
  }

  .about__value .about__txt{
    text-align: center;
    margin-bottom: 24px;
  }

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