@charset "utf-8";
@import url("root.css");

/***************************************
------------- philosophy -------------
***************************************/
#top .page_link li a[href*="philosophy/"] {
  color: #333 !important;
  padding-bottom: .25em;
  border-bottom: 1px dotted #333;
  span { color:inherit; }
}

#philosophy { width: 100%;}

#philosophy h3 {
  text-align: center;
  margin: 0 auto;
  line-height: 1.3;
}
#philosophy h4 {
  text-align: center;
  margin: 0 auto min(3vw,30px);
  line-height: 1.3;
}


#philosophy .philosophy_cont {
  h3,h4,p {
    text-align: left;
  }
}

.statement_cont {
  position: relative;
  z-index: 0;
  padding: 150px 0;
  background: url(../img/statement.webp) no-repeat bottom center / cover;
  h3,p {
    color: #fff!important;
  }
}
.statement_cont::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000;
  opacity: 0.25;
  z-index: -1;
}

.promise_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0 min(4%, 50px);
  margin-top: min(10vw,50px);
  counter-reset: number 0;
  .col_txt {
    width: calc((100% - 4rem - min(5vw,50px)) / 2);
    padding: 0 0 0 1.5rem;
    margin: 0 0 min(5vh, 30px) 2rem;
    border-left: 2px solid var(--base-color01);
    text-align: left;
    position: relative;
    dt {
      font-size: 1.15rem;
      font-weight: bold;
      margin-bottom: .5em;
      line-height: 1.2;
      color: var(--base-color01);
    }
  }
  .col_txt::before {
    counter-increment: number 1;
    content: counter(number) "";
    position: absolute;
    top: 0;
    left: -1.5em;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.0;
    color: var(--base-color01);
  }
}
@media (max-width: 599px) {
  .promise_wrap {
    width: calc(100% - 2rem);
    margin: min(10vw,50px) auto 0;
    .col_txt {
      width: 100%;
    }
  }
}

@media (max-width:768px) {
  .statement_cont {
    padding: clamp(50px, 15vw, 100px) 1rem;
  }
}

/***************************************
------------- parallax -------------
***************************************/
.parallax {
  background: url(../img/parallax_bg02.webp) no-repeat center center / cover;
  height: clamp(300px,35vh,600px);
  background-attachment: fixed;
}