html, body {
  height: 100%;
}

body {
  overscroll-behavior: none;
  background-color: #fff;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* -------------------------
   HEADER 
------------------------- */
.site-header-about{
  flex: 0 0 auto;
  position: relative;
  z-index: 10;
}

.site-content {
  padding-bottom: calc(var(--footer-bar-h) + var(--safe-bottom));
}

/* -------------------------
   MAIN
------------------------- */
main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* -------------------------
   背景
------------------------- */
main::before {
  content: "";
  position: absolute;
  inset: -160px;

  background-image: url("../../images/bg/about_bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
  transform: translate(-20vw, 5vw);
  pointer-events: none;
  z-index: -1;
}


/* -------------------------
   コンテンツ
------------------------- */
.site-content {
  position: relative;
  z-index: 1;

  padding-top: var(--title-size);
  padding-left: var(--text-pad-x);
  padding-right: var(--text-pad-x);
  padding-bottom: var(--safe-bottom);
}

.site-content {
  padding-bottom: calc(var(--footer-bar-h) + var(--safe-bottom));
}

/* -------------------------
   写真
------------------------- */
.about-photo {
  overflow: hidden;
  width: 28vw;
  height: min(32vw, 500px);
  margin:
    var(--photo-mar-top)
    0
    var(--photo-mar-bottom)
    var(--photo-mar-left);
}

.about-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 40%;
}

/* -------------------------
   DESKTOP
------------------------- */
@media (min-width: 768px) {

  main::before {
    position: fixed;
    inset: auto;
    
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    transform: translate(10vw, var(--bg-y));
    background-position: center center;
  }

  .site-content {
    padding-top: 40px;
  }

  .content__text {
    display: grid;
    grid-template-columns: 50% 50%;
    column-gap: 20px;
    grid-auto-rows: max-content;
    row-gap: 16px;
    overflow: visible;
    padding-right: 15vw;
  }

  .body-text--detail {
    grid-column: 1;
    padding-top: 4vh;
    max-width: 600px;
  }

  .about-photo {
    position: fixed;
    top: calc(var(--title-size) + 90px);
    left: calc(
      var(--text-pad-x) +
      ((100vw - (var(--text-pad-x) * 2) - 20px) / 2) +
      20px
    );
    margin: 0;
  }

  .site-footer::before {
    right: 58vw;
  }
}