@charset "UTF-8";
/* ----------------------------------------------------------
Main Visual：p-home-mv
---------------------------------------------------------- */
.p-about {
  /* ----------------------------------------------------------
	Intro：p-home-intro
	---------------------------------------------------------- */
  /* ----------------------------------------------------------
	animated
	---------------------------------------------------------- */
  /* ----------------------------------------------------------
	Summary：p-about-summary
	---------------------------------------------------------- */
  /* ----------------------------------------------------------
	Promise,Skill,Challenge：p-about-promise,skill,challenge
	---------------------------------------------------------- */
  /* ----------------------------------------------------------
	System：p-about-system
	---------------------------------------------------------- */
}

.p-about-mv {
  position: relative;
}

.p-about-mv::after {
  content: "";
  display: block;
  width: 100%;
  height: 703px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-image: url(../../img/about/mv_img_pc.jpg);
  background-size: cover;
  background-position: center;
}

.p-about-mv__inner {
  padding: 76px 0 160px 48px;
}

.p-about-mv__ttl {
  display: inline-block;
  line-height: 1.53846;
  font-size: 3.9rem;
  letter-spacing: 0.078em;
  margin-top: 40px;
}

.p-about-mv__ttl-catch {
  line-height: 1;
  font-size: 2rem;
  display: block;
  border: 1px solid #231815;
  width: 97px;
  padding: 7px 0;
  text-align: center;
}

.p-about-intro__txt {
  line-height: 2.26667;
  font-size: 1.5rem;
  display: block;
  width: 430px;
  margin-top: 35px;
}

.p-about .animation {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
}

.p-about .active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.p-about .slowly-1 {
  transition: 2s;
  animation-delay: 60s;
}

.p-about-inner {
  padding-top: 144px;
}

.p-about-summary {
  margin-bottom: 135px;
}

.p-about-summary__ttl-catch {
  line-height: 1;
  font-size: 1.9rem;
  border: 1px solid #231815;
  padding: 5px 9px;
  display: inline-block;
  background: #fff;
}

.p-about-summary__wrap {
  display: flex;
  align-items: center;
  width: 870px;
  height: 272px;
  position: relative;
}

.p-about-summary__ttl {
  line-height: 1.53333;
  font-size: 3rem;
  letter-spacing: 0.078em;
  font-weight: bold;
  width: 34%;
}

.p-about-summary__line {
  height: 0%;
  border-left: 1px solid #231815;
  position: absolute;
  top: 0;
  left: 34%;
}

.p-about-summary__txt {
  width: 66%;
  padding: 46px;
}

.p-about-summary__fig {
  width: 870px;
  height: 400px;
  display: block;
  background-image: url(../../img/about/promise_img_pc.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.p-about-promise {
  margin-left: 130px;
}

.p-about-promise .p-about-summary__ttl-catch {
  margin-left: 28.8%;
}

.p-about-skill .p-about-summary__ttl-catch {
  margin-left: 26.6%;
}

.p-about-skill .p-about-summary__fig {
  background: url(../../img/about/skill_img_pc.jpg);
}

.p-about-challenge {
  margin-left: calc(130px + 46px);
}

.p-about-challenge .p-about-summary__ttl-catch {
  margin-left: 29.5%;
}

.p-about-challenge .p-about-summary__fig {
  height: 498px;
  background: url(../../img/about/challenge_img_pc.jpg);
}

.p-about-system {
  background-color: #910426;
  padding-top: 70px;
  padding-bottom: 108px;
  text-align: center;
  color: #fff;
}

.p-about-system__fig {
  position: relative;
}

.p-about-system__fig img {
  width: 850px;
}

.p-about-system__fig figcaption {
  line-height: 1.53333;
  font-size: 3rem;
  letter-spacing: 0.05em;
  font-weight: bold;
  position: absolute;
  top: 51%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.p-about-system__ttl {
  line-height: 1.72;
  font-size: 2.5rem;
  letter-spacing: 0.2em;
  margin-top: 60px;
  margin-bottom: 32px;
}

.p-about-system__txt {
  line-height: 2.125;
  font-size: 1.6rem;
  width: 708px;
  margin: 0 auto;
  text-align: left;
}

@media screen and (max-width: 559px) {
  .p-about-mv::after {
    height: calc(344px + 43px);
    background-image: url(../../img/about/mv_img_sp.jpg);
    background-size: cover;
    background-position: center;
    margin-top: -43px;
  }
  .p-about-mv__inner {
    padding: 46px 20px 0;
  }
  .p-about-mv__ttl {
    line-height: 1.41667;
    font-size: 2.4rem;
    margin-top: 14px;
    margin-left: 16px;
  }
  .p-about-mv__ttl-catch {
    line-height: 1;
    font-size: 1.3rem;
    width: 54px;
    padding: 5px 0;
    margin-left: 16px;
  }
  .p-about-intro__txt {
    line-height: 2.14286;
    font-size: 1.4rem;
    width: 100%;
    margin-top: calc(180px + 30px);
  }
  .p-about-inner {
    padding-top: 80px;
  }
  .p-about-summary {
    margin-bottom: 67px;
  }
  .p-about-summary__ttl-catch {
    line-height: 1;
    font-size: 1.3rem;
    padding: 8px 10px 6px;
  }
  .p-about-summary__wrap {
    flex-direction: column;
    width: 100%;
    height: 108px;
  }
  .p-about-summary__ttl {
    line-height: 1.47826;
    font-size: 2.3rem;
    width: 88%;
    margin-left: 80px;
    padding: 20px;
  }
  .p-about-summary__line {
    left: 12%;
  }
  .p-about-summary__txt {
    width: 100%;
    border-left: none;
    padding: 0;
  }
  .p-about-summary__txt p {
    display: inline-block;
    margin-top: 25px;
  }
  .p-about-summary__txt:before {
    content: "";
    width: 100%;
    height: 232px;
    display: block;
    background: url(../../img/about/promise_img_sp.jpg);
    background-size: cover;
    top: -257px;
    left: 0;
  }
  .p-about-summary__fig {
    display: none;
  }
  .p-about-promise, .p-about-skill, .p-about-challenge {
    margin-bottom: calc(486px + 70px);
  }
  .p-about-promise {
    margin-left: 0;
  }
  .p-about-promise .p-about-summary__ttl-catch {
    margin-left: 1.75%;
  }
  .p-about-skill .p-about-summary__ttl-catch {
    margin-left: 4.5%;
  }
  .p-about-skill .p-about-summary__txt::before {
    background: url(../../img/about/skill_img_sp.jpg);
    background-size: cover;
  }
  .p-about-challenge .p-about-summary__fig {
    background: none;
  }
  .p-about-challenge {
    margin-left: 0;
  }
  .p-about-challenge .p-about-summary__ttl-catch {
    margin-left: 0;
  }
  .p-about-challenge .p-about-summary__txt::before {
    background: url(../../img/about/challenge_img_sp.jpg);
    background-size: cover;
  }
  .p-about-system {
    padding-top: 35px;
    padding-bottom: 54px;
  }
  .p-about-system__fig img {
    width: 100%;
  }
  .p-about-system__fig figcaption {
    line-height: 1.625;
    font-size: 1.6rem;
  }
  .p-about-system__ttl {
    line-height: 1.72222;
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    margin-top: 40px;
    margin-bottom: 20px;
  }
  .p-about-system__txt {
    line-height: 2;
    font-size: 1.4rem;
    width: 100%;
  }
}