body{
    background: #EEEEEE;
}

.about > header.navbar{
  position: relative;
  z-index: 3;
  background: transparent;
}

/* 写真はボックス内でcover */
.about-bg{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;

  /* 被写体を右に寄せたい時はここ */
  object-position: 85% 20%
}

.section-bg{
    position: relative;
    background: #fff;
}

.about{
  position: relative;
  isolation: isolate;
}

.about > .container{
  z-index: 2;
}

.triangle-sub .top-text{
  position: relative; 
  z-index: 3;
}

.triangle-sub .about-media{
  z-index: 1;
}

.company-side{
  height: clamp(360px, 38vh, 480px);
}

.company-side__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* サブ見出し（左下） */
.section-subtitle{
  display: inline-block;
  width: 100%;
  text-align: left;
  margin: 10px 0 0;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.section-title-certification{
  position: relative;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  z-index: 1;
}

.certification{
  /* 見出しをどれだけ上に出すか（大きいほど上に出る） */
  --title-pop: clamp(36px, 4vw, 55px);

  /* 見出し分、上に受け皿を作る（これがないと中身とぶつかる） */
  padding-top: calc(var(--title-pop) + 24px);

  position: relative;
  overflow: visible;
}

/* 見出しをセクションからはみ出させる */
.certification .section-title-certification{
  position: absolute;
  top: calc(var(--title-pop) * -1);
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
}

/* =========================
   左右の高さ＆開始位置を完全一致
========================= */

.section-pop__body > .row{
  display: flex;
  align-items: stretch;
}

.section-pop .section-pop__side{
  padding-top: var(--title-space);
  display: flex;
}

/* 画像ラッパーを縦いっぱいに */
.section-pop__side .company-side{
  height: 100%;
  width: 100%;
}

.section-pop__side .company-side__img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.section-pop__scope{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.section-pop__scope > table{
  flex-grow: 1;
}

.about-chara {
  position: absolute;
  right: clamp(-40px, -2vw, -12px);
  bottom: 0;

  width: clamp(360px, 36vw, 660px);
  height: auto;

  z-index: 2;
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .about-chara {
    width: clamp(250px, 36vw, 360px);
    right: 0;
    bottom: 0;
  }
}

@media (max-width: 767.98px) {
  .about-chara {
    width: clamp(185px, 50vw, 280px);
    right: 0;
    bottom: 0;
  }
}

@media (max-width: 575.98px) {
  .about-chara {
    width: clamp(165px, 54vw, 245px);
    right: 0;
    bottom: 0;
  }
}

@media (max-width: 375px) {
  .about-chara {
    width: clamp(145px, 56vw, 215px);
    right: 0;
    bottom: 0;
  }
}