@charset "utf-8";

/* CSS Document */

.about-page .sec-header__fig{background-image: url(../images/about/about_fig_01.jpg);}

.outline-detail{
  margin-bottom: 45px;
  padding: 40px 30px;
  border: 3px solid rgba(0,101,164,1);
  background-color: rgba(255,255,255,1);  
  }
  .outline-detail__copy-en{
    margin-bottom: 10px;
    text-align: center;
    }
    .outline-detail__copy-inner{
      display: inline-block;
      text-align: left;
      font-size: 5.6rem;
      font-weight: bold;
      line-height: 1.2;
      }
  .outline-detail__copy-jp{
    margin-bottom: 35px;
    font-size: 3.4rem;
    font-weight: bold;
    text-align: center;
    }
  .outline-detail__txt{
    font-size: 1.6rem;
    line-height: 1.8;
    }

.outline-lead{
  margin-bottom: 35px;
  font-size: 2.2rem;
  font-weight: bold;
  color: rgba(0,101,164,1);
  text-align: center;
  }

.outline-flow{
  display: flex;
  flex-wrap: wrap;
  }
  .outline-flow__item{
    display: flex;
    flex-direction: column;
    width: calc((100% - 140px) / 3);
    }
    .outline-flow__item:not(:last-of-type){margin-right: 70px;}
    .outline-flow-fig{
      order: 0;
      min-height: 0%;
      margin-bottom: 20px;
      position: relative;
      }
      .outline-flow__item:not(:last-of-type) .outline-flow-fig::before{
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 34px 0 34px 18px;
        border-color: transparent transparent transparent rgba(153,153,153,1);
        position: absolute;
        top: 50%;
        right: -44px;
        transform: translateY(-34px);
        }
    .outline-flow__ttl{
      order: 1;
      font-size: 2rem;
      font-weight: bold;
      line-height: 1.4;
      text-align: center;
      }

.keyword-image{
  width: 100%;
  max-width: 500px;
  margin: 0 auto 50px;
  }
.keyword-detail{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  }
  .keyword-detail__item{
    width: calc((100% - 61px) / 3);
    padding: 40px 20px;
    border: 1px solid rgba(0,101,164,1);
    background-color: rgba(255,255,255,1);
    }
    .keyword-detail__item:not(:last-of-type){margin-right: 30px;}
    .keyword-detail__ttl{
      margin-bottom: 20px;
      padding-bottom: 25px;
      text-align: center;
      border-bottom: 1px solid rgba(0,101,164,1);
      }
      .keyword-detail__ttl-jp{
        margin-bottom: 10px;
        font-size: 3.3rem;
        font-weight: bold;
        color: rgba(0,101,164,1);
        line-height: 1;
        }
      .keyword-detail__ttl-en{
        font-size: 2.2rem;
        font-weight: bold;
        line-height: 1;
        letter-spacing: 0.2em;
        }
    .keyword-detail__txt{line-height: 1.4;}

.backbone-detil{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 25px;
  }
  .backbone-detil__txt{
    width: calc(100% - 365px);
    margin-right: 45px;
    }
    .backbone-detil__fig{width: 320px;}
    .backbone-detil__fig-note{
      margin-top: 5px;
      font-size: 1.3rem;
      color: rgba(77,77,77,1);
      text-align: right;
      }

.initiatives-blc{
  width: 100%;
  max-width: 595px;
  margin: 0 auto;
  }      
  .initiatives-ttl{
    margin-bottom: 35px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 2rem;
    font-weight: bold;
    color: rgba(0,101,164,1);
    line-height: 1;
    text-align: center;
    border-top: 1px solid rgba(0,101,164,1);
    border-bottom: 1px solid rgba(0,101,164,1);
    }
  .initiatives-detail{
    display: flex;    
    flex-wrap: wrap;
    }

    .about-quality .initiatives-detail__txt{
      width: calc(100% - 210px);
      margin-right: 30px;
      }
    .about-quality .initiatives-detail__fig{width: 180px;}
    .about-safety .initiatives-detail__txt{
      width: calc(100% - 230px);
      margin-right: 30px;
      }
    .about-safety .initiatives-detail__fig{width: 200px;}

    .initiatives-detail__txt-note{
      margin-top: 20px;
      font-size:  1.3rem;
      color: rgba(77,77,77,1);
      }

@media screen and (max-width: 1000px) {

.outline-detail{
  margin-bottom: 35px;
  padding: 40px 30px;
  }
  .outline-detail__copy-inner{font-size: 4.5rem;}
  .outline-detail__copy-jp{
    margin-bottom: 30px;
    font-size: 2.8rem;
    }
  .outline-lead{font-size: 2rem;}
.outline-flow-fig{margin-bottom: 15px;}
.outline-flow__ttl{font-size: 1.8rem;}

.keyword-detail__item{
  width: calc((100% - 40px) / 3);
  padding: 30px 20px;
  }
  .keyword-detail__item:not(:last-of-type){margin-right: 20px;}
  .keyword-detail__ttl{
    margin-bottom: 15px;
    padding-bottom: 20px;
    }
    .keyword-detail__ttl-jp{font-size: 2.8rem;}
    .keyword-detail__ttl-en{font-size: 1.8rem;}

}/* max-width: 1000px */

@media screen and (min-width: 851px) {

.outline-lead .spbr{display: none;}

}/* min-width: 851px */

@media screen and (max-width: 850px) {

.outline-detail{padding: 30px 25px;}
  .outline-detail__copy-inner{font-size: 3.8rem;}
  .outline-detail__copy-jp{
    margin-bottom: 30px;
    font-size: 2.4rem;
    }
  .outline-lead{font-size: 1.8rem;}

.outline-flow__item{width: calc((100% - 81px) / 3);}
  .outline-flow__item:not(:last-of-type){margin-right: 40px;}
  .outline-flow-fig{margin-bottom: 10px;}
    .outline-flow__item:not(:last-of-type) .outline-flow-fig::before{
      border-width: 28px 0 28px 15px;
      right: -30px;
      transform: translateY(-28px);
      }

.outline-flow-fig{margin-bottom: 10px;}
.outline-flow__ttl{font-size: 1.6rem;}

}/* max-width: 850px */

@media screen and (min-width: 769px) {

.backbone-flow__fig-sp{display: none;}

}/* min-width: 769px */

@media screen and (max-width: 768px) {

.outline-detail__copy-inner{font-size: 3rem;}
  .outline-detail__copy-jp{font-size: 2rem;}
  .outline-lead{
    margin-bottom: 20px;
    font-size: 1.6rem;
    }

  .outline-flow__item{width: calc((100% - 60px) / 3);}
    .outline-flow__item:not(:last-of-type){margin-right: 30px;}
    .outline-flow-fig{margin-bottom: 10px;}
    .outline-flow__item:not(:last-of-type) .outline-flow-fig::before{
      border-width: 23px 0 23px 10px;
      right: -20px;
      transform: translateY(-23px);
      }
    .outline-flow__ttl{font-size: 1.4rem;}

.keyword-image{
  max-width: 400px;
  margin: 0 auto 40px;
  }
  .keyword-detail__item{
    width: 100%;
    padding: 20px;
    }
    .keyword-detail__item:not(:last-of-type){
      margin-right: 0;
      margin-bottom: 20px;
      }
    .keyword-detail__ttl{
      margin-bottom: 10px;
      padding-bottom: 15px;
      }
      .keyword-detail__ttl-jp{font-size: 2.4rem;}
      .keyword-detail__ttl-en{font-size: 1.6rem;}

.backbone-detil__txt{
  width: calc(100% - 280px);
  margin-right: 30px;
  }
  .backbone-detil__fig{width: 250px;}
  .backbone-flow__fig-pc{display: none;}
  .backbone-flow__fig-sp{
    max-width: 400px;
    margin: 0 auto;
    }

.initiatives-ttl{
  margin-bottom: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 1.8rem;
  }

}/* max-width: 768px */

@media screen and (max-width: 650px) {

.outline-detail{padding: 20px;}
.outline-detail__copy-inner{font-size: 2.6rem;}
.outline-detail__copy-jp{
  margin-bottom: 20px;
  font-size: 1.8rem;
  }

.backbone-detil{
  display: flex;
  margin-bottom: 25px;
  }
  .backbone-detil__txt{
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
    }
    .backbone-detil__fig{
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
      }
    .backbone-detil__fig-note{
      margin-top: 5px;
      font-size: 1.3rem;
      color: rgba(77,77,77,1);
      text-align: right;
      }

.about-quality .initiatives-detail__txt{width: calc(100% - 180px);}
.about-quality .initiatives-detail__fig{width: 150px;}
.about-safety .initiatives-detail__txt{width: calc(100% - 200px);}
.about-safety .initiatives-detail__fig{width: 170px;} 

}/* max-width: 650px */

@media screen and (max-width: 500px) {

.outline-flow{
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  }
  .outline-flow__item{
    width: 100%;
    position: relative;
    }
    .outline-flow__item:not(:last-of-type){
      margin-right: 0;
      margin-bottom: 40px;
      }
      .outline-flow__item:not(:last-of-type)::before{
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 12px 25px 0 25px;
        border-color: rgba(153,153,153,1) transparent transparent transparent;
        position: absolute;
        bottom: -25px;
        left: 50%;
        transform: translateX(-25px);
      }

      .outline-flow__item:not(:last-of-type) .outline-flow-fig::before{display: none;}
        
.initiatives-ttl{
  margin-bottom: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 1.6rem;
  }
  .about-quality .initiatives-detail__txt{
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
    }
  .about-quality .initiatives-detail__fig{margin: 0 auto;}
  .about-safety .initiatives-detail__txt{
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
    }
  .about-safety .initiatives-detail__fig{margin: 0 auto;}
  
}/* max-width: 500px */

@media screen and (max-width: 450px) {

.outline-lead{font-size: 1.5rem;}

}/* max-width: 450px */