@charset "utf-8";

.philosophy-page{
  padding-bottom: 100px;
  background-color: rgba(255,255,255,1);
  }
  .philosophy-page .page-head{background-image: url(../images/company/philosophy_bg_01.jpg);}
.philosophy-detail{display: flex;}
  .philosophy-detail:not(:last-of-type){margin-bottom: 150px;}
  .philosophy-txt{
    width: 500px;
    margin-right: 40px;
    }
    .-reverse .philosophy-txt{
      order: 1;
      margin-right: 0;
      margin-left: 40px;
      }
    .philosophy-txt__ttl{
      margin-bottom: 100px;
      font-size: 32px;
      font-weight: 500;
      color: rgba(190,98,7,.8);
      line-height: 1.6;
      position: relative;
      }
      .philosophy-txt__ttl::before{
        content: "";
        width: 150px;
        height: 3px;
        background-color: rgba(51,51,51,1);
        position: absolute;
        bottom: -50px;
        left: 0;
        }
        .philosophy-txt__ttl-bracket{
          margin-left: -0.5em;
          font-weight: 500;
          }
      .philosophy-txt__lead{line-height: 1.8;}
          .philosophy-txt__lead-par:not(:last-of-type){margin-bottom: 1em;}
      .philosophy-fig{
        display: flex;
        width: 60%;
        margin-top: 50px;
        }
        .-reverse .philosophy-fig{
          order: 0;
          display: block;
          margin-top: 100px;
          }
      .philosophy-fig__item{width: 50%;}
        .-reverse .philosophy-fig__item{width: 95%;}
        .pf_01{
          margin-top: 150px;
          margin-right: 30px;
          }
          .-reverse .pf_01{
            margin-top: 0;
            margin-left: -50px;
            }
        .pf_02{margin-right: -100px;}
          .-reverse .pf_02{
            margin-top: 30px;
            margin-right: 0;
            margin-left: auto;
            }

.philosophy-txt__summary{margin-top: 2em;}
  .philosophy-mean{
    margin-top: 2em;
    padding: 30px;
    border: 1px solid rgba(50,50,50,1);
    box-sizing: border-box;
    }         
    .philosophy-mean__item{
      display: flex;
      align-items: center;
      justify-content: center;
      }
      .philosophy-mean__item-initial{
        width: 30px;
        margin-right: 50px;
        font-size: 34px;
        text-align: center;
        position: relative;
        }
        .philosophy-mean__item-initial::before{
          content: "";
          width: 24px;
          height: 4px;
          background-color: rgba(50,50,50,1);
          position: absolute;
          right: -37px;
          top: 50%;
          transform: translateY(-1px);
        }
      .philosophy-mean__item-txt{
        width: 130px;
        font-size: 22px;
        }

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

.philosophy-txt__ttl{
  margin-bottom: 60px;
  font-size: 30px;
  line-height: 1.8;
  }
  .philosophy-txt__ttl::before{
    width: 100px;
    bottom: -30px;
    }
    .-reverse .pf_01{margin-left: -20px;}
  .pf_02{margin-right: -20px;}

}/* max-width:1100px */

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

.philosophy-detail{flex-wrap: wrap;}
  .philosophy-detail:not(:last-of-type){margin-bottom: 100px;}
  .philosophy-txt{
    width: 100%;
    margin-right: 0;
    }
    .-reverse .philosophy-txt{
      order: 0;
      margin-left: 0;
      }
      .philosophy-txt__ttl{font-size: 26px;}
      .philosophy-fig{
        width: 100%;
        margin-top: 30px;
        margin-left: auto;
        }
        .-reverse .philosophy-fig{margin-top: 30px;}
        .pf_01{
          margin-top: 50px;
          margin-right: 20px;
          }
          .-reverse .pf_02{margin-top: 20px;}

  .philosophy-mean{padding: 25px;}         
    .philosophy-mean__item-initial{
      margin-right: 40px;
      font-size: 26px;
      }
      .philosophy-mean__item-initial::before{
        width: 20px;
        height: 3px;
        right: -29px;
      }
    .philosophy-mean__item-txt{
      width: 220px;
      font-size: 22px;
      }  

}/* max-width:850px */

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

.philosophy-txt__ttl{font-size: 22px;}
.pf_01{margin-right: 10px;}
  .-reverse .pf_02{margin-top: 10px;}

}/* max-width:600px */
    
@media screen and (max-width: 500px) {

.philosophy-mean{padding: 20px 15px;}         
  .philosophy-mean__item-initial{
    width: 20px;
    margin-right: 30px;
    font-size: 22px;
    }
    .philosophy-mean__item-initial::before{
      width: 15px;
      right: -21px;
    }
  .philosophy-mean__item-txt{
    width: 180px;
    font-size: 16px;
    }  

}/* max-width:500px */