@charset "UTF-8";

/* ===== キービジュアル ===== */
#key-visual {
  background-image: url(../images/about-key-visual.jpg);
  background-size: cover;
  background-position: center;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  /* &::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    border-left: 22vw solid #ffd700;
    border-bottom: 22vw solid transparent;
    z-index: 1;
  } */
}

/* ===== セクション共通 ===== */
.sec.outer {
  position: relative;
  overflow: hidden;
  padding: 8rem 0 9rem 0;

  &.about-message {
    background: #fff;
    &::before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      border-left: 22vw solid #ffd700;
      border-bottom: 22vw solid transparent;
      z-index: 0;
    }
  }
  &.about-vision {
    background-image: url(../images/about-bk.jpg);
    &::after {
      content: "";
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      border-bottom: min(22vw, 32rem) solid #274a9d;
      border-left: min(22vw, 32rem) solid transparent;
      z-index: 0;
    }
  }
  &.about-story {
    background: #fff;
    &::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      border-top: 18vw solid #c01b2c;
      border-right: 18vw solid transparent;
      z-index: 0;
    }
  }
  &.about-mission {
    background-image: url(../images/about-bk02.jpg);
    &::after {
      content: "";
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      border-top: 18vw solid #ffd700;
      border-left: 18vw solid transparent;
      z-index: 0;
    }
  }
}

/* ===== セクションタイトル ===== */
main {
  .sec-title01 {
    text-align: center;
    width: 100%;
    margin-bottom: 7rem;
    font-size: 5.5rem;
    letter-spacing: 0.12em;
    color: #222;
    position: relative;
    font-family: "Zen Kaku Gothic New", "Meiryo", sans-serif;
    font-weight: 700;

    &::after {
      content: "";
      display: block;
      margin: 1.2rem auto 0;
      width: 60px;
      height: 4px;
      background: linear-gradient(90deg, #b8c6ff, #6986fa 80%);
      border-radius: 2px;
      box-shadow: 0 2px 8px #b8c6ff44;
    }
  }
}
h2.sec-title01.sec-title02 {
    color: #ffd700;
}
p.about_text {
    color: #ffd700;
}
p.about_text01 {
    color: #222;
}
/* ===== レスポンシブ ===== */
@media screen and (max-width: 1024px) {
  .sec.outer {
    .inner {
      max-width: 98%;
      padding: 1.5rem 1.5rem;
    }
  }
}
@media screen and (max-width: 599px) {
  #key-visual {
    min-height: 80px;
    #page-title {
      padding: 0.7rem 1.2rem;
    }
    /* &::before,
    &::after {
      display: none;
    } */
  }
  .sec.outer {
  position: relative;
  overflow: hidden;
  padding: 8rem 0 9rem 0;

  &.about-message {
    background: #fffbe8;
    &::before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      border-left: 19vw solid #ffd700;
      border-bottom: 19vw solid transparent;
      z-index: 0;
    }
  }
  .sec.outer {
    padding: 1.2rem 0;
    &::before,
    &::after {
      display: none;
	  
    }
    .inner {
      padding: 3.5rem 2.1rem;
    }
  }
  main .sec-title01 {
    font-size: 5.1rem;
    margin-bottom: 1.5rem;
  }
}