@charset "UTF-8";
/* page-common.css */

.graphic {
  position: absolute;
  bottom: -30vw;
  right: 0;
}

.graphic img {
  max-height: 200px;
  width: auto;
}
@media screen and (min-width: 768px) {
  .graphic {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .graphic img {
      max-height: 320px;
      width: auto;
  }
} 

  #page-whoweare .message .more-btn-wrap{
    text-align: left;
    margin: 1em 0 0;
  }

  .mission{
    position: relative;
    /* height: 100vh; */
    width: auto;
    background: url("../img/whoweare-mission.jpg") no-repeat center bottom / contain;
    padding-top: 100px;
    padding-bottom: 150px;
    color: #fff;
    line-height: 1.3;
    background-color: #000;
  }
  @media screen and (min-width: 768px) {
    .mission{
      height: 100vh;
      padding-top: 150px;
      padding-bottom: 0;
      background: url("../img/whoweare-mission.jpg") center / cover;
    }
  } 

  .mission .--title{
    font-family: "Shippori Antique", sans-serif;
    font-weight: 400;
    font-size: 10vw;
    margin-bottom: 30px;
  }

  .mission .--title span{
    font-size: 1.3em;
  }

  .mission .--text{
    font-size: 4vw;
    font-weight: 600;
    line-height: 2;
  }
  @media screen and (min-width: 768px) {
    .mission .--title{
      font-size: 5rem;
    }
    .mission .--text{
      font-size: 20px;
    }
  } 
  .vision{
    padding-top: 150px;
    padding-bottom: 200px;
    position: relative;
  }

  @media screen and (min-width: 768px) {
  .vision .row-right,
  .values .row-right,
  .company .row-right{
    width: 60%;
    max-width: 700px;
  }
} 

  .vision .--title{
    font-size: 5vw;
    font-weight: 600;
    margin-bottom: 1em;
  }

  @media screen and (min-width: 768px) {
    .vision .--title{
      font-size: 2rem;
    }
    .vision .--text{
      font-size: 20px;
    }
  } 

  .vision .vision-img{
    width:50%;
    max-width: 330px;
  }

  .vision .vision-img .vision1{
    position: absolute;
    bottom: -12vw;
    left: 0;
    width:50%;
    max-width: 330px;
  }

  .vision .vision-img .vision2{
    position: absolute;
    bottom: -18vw;
    right: 0;
    width:50%;
    max-width: 330px;
  }
@media screen and (min-width: 768px) {
  .vision .vision-img{
    width: 30%;
    max-width: 330px;
  }
  .vision .vision-img .vision1{
    position: absolute;
    bottom: -3.5%;
    left: 0;
    width: 30%;
    max-width: 330px;
  }

  .vision .vision-img .vision2{
    position: absolute;
    bottom: -10%;
    right: 0;
    width: 30%;
    max-width: 330px;
  }
} 
  .values{
    background-color: #222;
    padding: 100px 0;
    color: #fff;
  }

  @media screen and (min-width: 768px) {
    .values{
      padding: 150px 0;
    }
  } 

  .values dl dt{
    font-family: "Shippori Antique", sans-serif;
    font-weight: 400;
    font-size: 7.5vw;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    line-height: 1.3;
  }

@media screen and (min-width: 768px) {
  .values dl dt{
    font-size: 39px;
  }

} 
  .values dl dt span{
    font-family: "Roboto", system-ui;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
  }

  .values dl dd{
    color: #02ADD1;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    padding-bottom: 50px;
    margin-bottom: 50px;
    border-bottom: 1px solid #707070;
  }

  .values dl dd:last-of-type{
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }


  .company{
    padding-bottom: 150px;
  }
  .company-img{
    height: auto;
    width: 100%;
  }

  @media screen and (min-width: 768px) {
    .company-img{
      height: auto;
      width: 100%;
      background: url("../img/whoweare-company-bg.jpg") center / cover;
      padding: 100px 20%;
      margin-bottom: 100px;
    }
  } 

  .company dl dt{
    font-weight: 600;
  }

  .company dl dd{
    margin-bottom: 20px;
  }