@charset "UTF-8";


.b-mainHeader {
  background: none;
  position: relative;
  color: #fff;
  &::before,
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 640px;
    position: absolute;
    left: 0;
    top: 0;
  }
  &::before {
    z-index: -2;
    background: url(../images/oem/head.jpg) center center / cover;
  }
  &::after {
    z-index: -1;
    background: #000;
    opacity: .3;
  }
  .e-pageTtl {
    color: #fff;
  }
  .e-en {
    color: #fff;
    font-family: var(--fontJP);
  }
}
.b-pankuzu {
  color: #fff;
  li:has(a),
  li:has(span) {
    &+li {
      &::before {
        color: #fff;
      }
    }
  }
}
.b-pageNav {
  &:not(.fixed) {
    top: 300px !important;
  }
}
.b-mainContent {
  z-index: 5;
}
@media screen and (max-width: 767px) {
  .b-pageNav {
    li {
      width: 50%;
    }
  }
  .b-mainContent {
    padding-top: 435px !important;
    .e-mds {
      &.m-oem {
        font-size: min(5.5vw,22px);
        margin-bottom: 50px;
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-mainContent {
    padding-top: 395px;
    .e-mds {
      &.m-oem {
        font-size: min(5.5vw,28px);
        margin-bottom: 80px;
      }
    }
  }
}

.b-pageContent {
  padding-bottom: 0;
}

/*--------------------------------------------------*/

/* oemColumn

/*--------------------------------------------------*/
.b-oemColumn {
  background: #fff;
  max-width: 1000px;
  padding: 30px;
  margin-left: auto;
  margin-right: auto;
  color: var(--txt);
  .e-txt {
    font-size: min(3.5vw,14px);
    line-height: 1.5;
  }
}
@media screen and (min-width: 768px) {
  .b-oemColumn {
    display: flex;
  }
}


/*--------------------------------------------------*/

/* aboutOEM

/*--------------------------------------------------*/

.b-aboutOEM {
  width: 100dvw;
  margin-left: 50%;
  transform: translateX(-50dvw);
  color: #fff;
  .e-mds.m-normal,
  .b-list,
  .e-lead {
    text-align: center;
  }
  .e-mds.m-normal {
    span {
      display: inline-block;
    }
  }
  .b-list {
    font-weight: 300;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 10px 0 30px;
    li {
      border: 1px solid #fff;
      border-radius: 200px;
      padding: .3em .9em .4em;
    }
  }
  .e-lead {
    line-height: 2;
    span {
      display: inline-block;
    }
  }
}
@media screen and (max-width: 767px) {
  .b-aboutOEM {
    padding: 200px 0 100px;
    background: url(../images/oem/main-sp.jpg) center center / cover;
    .b-list {
      font-size: min(5.5vw,22px);
      flex-wrap: wrap;
    }
  }
}
@media screen and (min-width: 768px) {
  .b-aboutOEM {
    padding: 150px 0;
    background: url(../images/oem/main-pc.jpg) center center / cover;
    .b-list {
      font-size: 24px;
    }
  }
}


/*--------------------------------------------------*/

/* industries

/*--------------------------------------------------*/

.b-industries {
  background: var(--bg50);
  width: 100dvw;
  margin-left: 50%;
  transform: translateX(-50dvw);
  padding-top: 150px;
  .b-industriesContent {
    color: var(--txt);
    .b-content {
      .e-mds {
        font-size: min(5vw,20px);
        font-weight: 500;
        margin-bottom: 40px;
      }
      dt {
        font-size: min(4.5vw,18px);
        margin-bottom: 10px;
        font-weight: 500;
      }
    }
    &.m-01 {
      .b-content {
        background: #fff; 
      }
    }
    &.m-02 {
      .e-mds {
        margin-bottom: 40px;
      }
      .b-item {
        display: flex;
        flex-direction: column;
        .e-img {
          order: 1;
          margin-bottom: 15px;
        }
        dt {
          order: 2;
        }
        dd {
          order: 3;
        }
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .b-industries {
    padding-bottom: 50px;
    .b-industriesContent {
      &.m-01 {
        .b-content {
          padding: 30px;
          margin-bottom: 50px;
        }
        .b-item + .b-item {
          margin-top: 30px;
        }
      }
      &.m-02 {
        .b-item {
          .e-img {
            aspect-ratio: 371/180;
          }
        }
        .b-item + .b-item {
          margin-top: 40px;
        }
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-industries {
    padding-bottom: 150px;
    .b-industriesContent {
      .b-example {
        display: grid;
        grid-template-columns: repeat(4,1fr);
      }
      &.m-01 {
        .b-content {
          padding: 30px;
          margin-bottom: 80px;
        }
        .b-example {
          gap: 30px;
        }
      }
      &.m-02 {
        .b-example {
          gap: 40px;
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1120px) {
  .b-industries {
    padding-bottom: 150px;
    .b-industriesContent {
      .b-example {
        grid-template-columns: repeat(2,1fr);
      }
    }
  }
}


/*--------------------------------------------------*/

/* technology

/*--------------------------------------------------*/
.b-technology {
  .b-content {
    display: grid;
    dt {
      margin-bottom: 10px;
    }
    &.m-01 {
      .b-item {
        display: flex;
        gap: 20px;
        dt {
          font-weight: 500;
          font-size: min(4.5vw,18px);
        }
      }
    }
    &.m-02 {
      gap: 40px;
      .b-item {
        dt {
          font-size: min(5vw,20px);
          font-weight: 400;
          line-height: 1.5;
        }
        .e-img {
          margin-top: 20px;
        }
      }
    }
  }
  .b-oemColumn {
    border: 1px solid var(--line-t);
    margin-top: 80px;
    margin-bottom: 80px;
    .e-mds {
      font-size: min(5vw,20px);
      font-weight: 400;
      margin-bottom: 10px;
    }
  }
}
@media screen and (max-width: 767px) {
  .b-technology {
    .b-content {
      &.m-01 {
        gap: 40px;
        .b-item {
          flex-direction: column-reverse;
        }
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-technology {
    .b-content {
      &.m-01 {
        grid-template-columns: repeat(2,1fr);
        gap: 70px;
        .e-img {
          width: clamp(200px,45%,250px);
          min-width: clamp(200px,45%,250px);
        }
      }
      &.m-02 {
        grid-template-columns: repeat(3,1fr);
      }
    }
    .b-oemColumn {
      gap: 40px;
      .e-img {
        width: clamp(300px,35%,320px);
        min-width: clamp(300px,35%,320px);
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1120px) {
  .b-technology {
    .b-content {
      &.m-01 {
        grid-template-columns: repeat(1,1fr);
      }
    }
  }
}


/*--------------------------------------------------*/

/* flow

/*--------------------------------------------------*/
.b-flow {
  background: var(--bg50);
  width: 100dvw;
  margin-left: 50%;
  transform: translateX(-50dvw);
  padding-top: 150px;
  .b-oemColumn {
    margin-top: 40px;
    margin-bottom: 40px;
    gap: 30px;
    .e-mds {
      font-size: min(4.5vw,18px);
      font-weight:500;
      margin-bottom: 10px;
      .e-en {
        display: block;
        font-family: var(--fontEN);
        font-size: min(3.5vw,14px);
        font-weight: 300;
        line-height: 1.5;
        letter-spacing: .01em;
        margin-bottom: 10px;
      }
    }
    .e-img {
      width: clamp(200px,55vw,220px);
      min-width: clamp(200px,55vw,220px);
    }
  }
  .e-mds.m-matome {
    text-align: center;
    span {
      display: inline-block;
    }
  }
}
@media screen and (max-width: 767px) {
  .b-flow {
    padding-bottom: 50px;
    .b-oemColumn {
      .e-img {
        margin: 20px auto 0;
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-flow {
    padding-bottom: 150px;
  }
}

.b-flowProcess {
  .b-ttl {
    color: var(--txt);
    margin-bottom: 40px;
    .e-mds {
      display: inline-block;
      font-size: inherit;
      font-weight: 500;
      border: 1px solid var(--txt);
      padding: .3em .5em .4em;
      margin-right: 1em;
    }
    .e-txt {
      display: inline-block;
    }
  }
  .b-item {
    dt {
      margin-bottom: 10px;
      .e-num {
        display: block;
        font-family: var(--fontEN);
        font-size: min(7.5vw,30px);
        font-weight: 300;
      }
      .e-jp {
        font-size: min(4.5vw,18px);
        font-weight: 500;
        &:has(.b-tag) {
          margin-top: calc( min(2.5vw,10px) * -1 );
        }
        .b-tag {
          background: #fff;
          display: inline-block;
          font-size: min(3vw,12px);
          font-weight: 400;
          line-height: 1.4;
          padding: 2px 5px;
          margin-left: 10px;
        }
      }
    }
    dd {
      display: flex;
      gap: 20px;
      .e-txt {
        font-size: min(3.5vw,14px);
        line-height: 1.5;
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .b-flowProcess {
    .b-content {
      .b-item {
        &+.b-item {
          margin-top: 20px;
        }
        dt {
          .e-num {
            margin-bottom: 5px;
          }
        }
        dd {
          .e-img {
            width: min(175px,44vw,200px);
            min-width: min(175px,44vw,200px);
            margin-top: calc( min(4.5vw,18px) * -1 - 15px);
          }
        }
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-flowProcess {
    .b-ttl {
      margin-bottom: 20px;
      .e-txt {
        margin-bottom: 20px;
      }
    }
    .b-content {
      display: grid;
      grid-template-columns: repeat(7,1fr);
      gap: 20px;
      .b-item {
        display: flex;
        flex-direction: column;
        dt {
          .e-num {
            margin-bottom: 10px;
          }
        }
        dd {
          flex-direction: column;
          flex-grow: 1;
          .e-img {
            width: 100%;
            margin-top: auto;
          }
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .b-flowProcess {
    .b-content {
      grid-template-columns: repeat(4,1fr);
    }
  }
}
/*--------------------------------------------------*/

/* onlineCTA

/*--------------------------------------------------*/
.b-onlineCTA {
  margin-top: 80px;
  width: 100dvw;
  margin-left: 50%;
  transform: translateX(-50dvw);
  padding-bottom: 10px;
  .b-btn {
    width: calc( 100% - 20px);
    max-width: 380px;
    height: 50px;
    margin: auto;
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    filter: var(--drop);
  }
  &.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
  }
  &#js-onlineCTA:not(.fixed) {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .b-onlineCTA {
    .b-btn {
      &:hover {
        background: #36A1B9;
      }
    }
  }
}