@charset "utf-8";
.oil__top {
  padding-top: clamp(3.5rem, 3.167rem + 0.69vw, 4rem);
}
.oil-top__inner {
  padding: 0 clamp(1.25rem, -17.893rem + 29.91vw, 18rem);
}
.oil-top__text {
      margin-top: 20px;
    line-height: 1.7;
    font-weight: 500;
}
.oil-top__content {
      margin-top: clamp(2rem, 1.667rem + 0.69vw, 2.5rem);
    background-color: #F2F2F2;
    padding: clamp(1.5rem, 0.833rem + 1.39vw, 2.5rem) clamp(1.25rem, 0.417rem + 1.74vw, 2.5rem);
    border-radius: 10px;
    display: flex;
    column-gap: clamp(1.25rem, 0.417rem + 1.74vw, 2.5rem);
}
.oil-top-content__left {
      width: 32%;
    object-fit: contain;
  height: fit-content;
}
.oil-top-content__right {
  width: 68%;
}
.oil-top-content__text {
      margin-top: clamp(1rem, 0.333rem + 1.39vw, 2rem);
    font-weight: 500;
    line-height: 1.7;
}

.feature {
  padding-top: clamp(4rem, 3.333rem + 1.39vw, 5rem);
}
.feature__inner {
  padding: 0 clamp(1.25rem, -14.464rem + 24.55vw, 15rem);
}
.feature__items {
      margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
}
.feature__item {
      padding-bottom: 20px;
    border-bottom: 1px solid #D1D1D1;
}
.feature-item__header {
      display: flex;
    align-items: center;
    column-gap: 8px;
}
.feature-item__sub {
      width: 31px;
    min-width: 31px;
    height: 28px;
    background-color: #1B4588;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}
.feature-item__main {
      font-size: clamp(1rem, 0.714rem + 0.45vw, 1.25rem);
    font-weight: 700;
}
.feature-item__text {
  font-size: clamp(0.875rem, 0.732rem + 0.22vw, 1rem);
      margin-top: clamp(1rem, 0.833rem + 0.35vw, 1.25rem);
    line-height: 1.7;
    font-weight: 500;
}

.menu {
  padding-top: clamp(5rem, 3.333rem + 3.47vw, 7.5rem);
}
.menu__inner {
  padding: 0 clamp(1.25rem, -17.893rem + 29.91vw, 18rem);
}
.menu__items {
      margin-top: clamp(2rem, 1.429rem + 0.89vw, 2.5rem);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(1.25rem, -1.607rem + 4.46vw, 3.75rem);
    row-gap: 40px;
}
.menu__item {
      display: flex;
    column-gap: 24px;
}
.menu-item__left {
  width: 35%;
}
.menu-item__img {
      aspect-ratio: 1/1;
    height: auto;
    object-fit: cover;
}
.menu-item__right {
  width: 65%;
}
.menu-item__title {
        font-size: clamp(1rem, 0.714rem + 0.45vw, 1.25rem);
    font-weight: 700;
}
.menu-item__text {
      margin-top: 16px;
    font-weight: 500;
    line-height: 1.7;
}

.machine {
      padding-top: 120px;
    padding-bottom: clamp(7.5rem, 5.833rem + 3.47vw, 10rem);
}
.machine__inner {
  padding: 0 clamp(1.25rem, -5.917rem + 14.93vw, 12rem);
}
.machine__content {
      margin-top: clamp(2.5rem, 1.667rem + 1.74vw, 3.75rem);
    display: flex;
    position: relative;
}
.machine__left {
      width: 20%;
  min-width: 180px;
    height: fit-content;
    position: sticky;
    top: clamp(8.75rem, 7.083rem + 3.47vw, 11.25rem);
}
.machine-left__top {
      font-size: clamp(1.25rem, 1.083rem + 0.35vw, 1.5rem);
    font-weight: 700;
}
.machine-left__itemBox {
      margin-top: clamp(1.25rem, 0.417rem + 1.74vw, 2.5rem);
    padding-left: clamp(1rem, 0.667rem + 0.69vw, 1.5rem);
    border-left: clamp(0.25rem, 0.083rem + 0.35vw, 0.5rem) solid #D6D6D6;
    display: flex;
    flex-direction: column;
    row-gap: clamp(1.5rem, 0.833rem + 1.39vw, 2.5rem);
}
.machine-left__item--subBox {
      display: flex;
    flex-direction: column;
    row-gap: clamp(1rem, 0.833rem + 0.35vw, 1.25rem);
}
.machine-left__item {
  font-weight: 700;
  white-space: nowrap;
}
.machine-left__item--sub {
      font-size: clamp(0.75rem, 0.667rem + 0.17vw, 0.875rem);
    font-weight: 700;
  white-space: nowrap;
}

.machine__right {
  width: 80%;
      display: flex;
    flex-direction: column;
    row-gap: 80px;
}
.machine-item__title {
      font-size: 20px;
    font-weight: 700;
}
.machine-item__text {
      margin-top: 20px;
    line-height: 1.7;
    font-weight: 500;
}
.machine__box {
  margin-top: clamp(1.25rem, 0.417rem + 1.74vw, 2.5rem);
      background-color: #F5F5F5;
    padding: clamp(1.25rem, 0.417rem + 1.74vw, 2.5rem) clamp(1.25rem, 0.958rem + 0.61vw, 1.688rem);
}
.machine-box__header {
      display: flex;
    align-items: center;
    column-gap: clamp(0.25rem, -0.583rem + 1.74vw, 1.5rem);
}
.machine-box-header__icon {
      width: clamp(0.938rem, 0.729rem + 0.43vw, 1.25rem);
    height: clamp(0.938rem, 0.729rem + 0.43vw, 1.25rem);
    background-color: #C42C1E;
}
.machine-box-header__title {
      font-size: clamp(1rem, 0.667rem + 0.69vw, 1.5rem);
    font-weight: 700;
}
.machine-box__content {
  display: flex;
      margin-top: clamp(1.25rem, 0.75rem + 1.04vw, 2rem);
    column-gap: clamp(1.25rem, 0.417rem + 1.74vw, 2.5rem);
      padding-bottom: 16px;
    border-bottom: 1px solid #CCCCCC;
}
.machine-box-top__left {
  width: 38%;
}
.machine-box__img {
      aspect-ratio: 429/329;
    object-fit: cover;
    height: auto;
}
.machine-box-top__right {
  width: 62%;
}
.machine-box-top__title {
      font-size: clamp(0.875rem, 0.625rem + 0.52vw, 1.25rem);
    font-weight: 700;
    line-height: 1.5;
}
.machine-box-top__text {
      margin-top: clamp(1.25rem, 0.75rem + 1.04vw, 2rem);
    line-height: 1.7;
    font-weight: 500;
  font-size: clamp(0.75rem, 0.583rem + 0.35vw, 1rem);
}
.machine-box__subtitle {
      margin-top: 20px;
    width: 71px;
    height: 32px;
    border-radius: 16px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
}
.machine-box__bottom {
      margin-top: 20px;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}
.machine-box-bottom__text {
      font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
  font-size: clamp(0.75rem, 0.583rem + 0.35vw, 1rem);
}
.machine__btn {
    width: clamp(19.5rem, 15.542rem + 8.25vw, 25.438rem);
    margin-left: auto;
    margin-top: clamp(2rem, 1.667rem + 0.69vw, 2.5rem);
}


@media (max-width: 1023px) {
  .feature__items {
        grid-template-columns: repeat(1, 1fr);
    row-gap: 40px;
        max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .menu__items {
        grid-template-columns: repeat(1, 1fr);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
  .menu-item__title {
    font-size: clamp(1.125rem, 0.749rem + 0.78vw, 1.25rem);
  }
}

@media (max-width: 767px) {
  .oil-top__content {
        flex-direction: column;
    row-gap: 24px;
        max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  .oil-top-content__left {
        width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .oil-top-content__right {
    width: 100%;
  }
  
  .feature__inner {
    padding: 0 24px;
  }
  .feature-item__header {
        flex-direction: column;
    row-gap: 18px;
  }
  .feature-item__main {
    font-size: clamp(1rem, 0.741rem + 1.06vw, 1.25rem);
  }
  .feature-item__text {
    font-size: clamp(0.75rem, 0.491rem + 1.06vw, 1rem);
  }
  
  .menu__inner {
    padding: 0 16px;
  }
  .menu__item {
        flex-direction: column;
    row-gap: 20px;
    align-items: center;
  }
  .menu-item__left {
    width: 52%;
  }
  .menu-item__right {
    width: 100%;
  }
  .menu-item__title {
    text-align: center;
  }
  .menu-item__text {
    font-size: clamp(0.75rem, 0.621rem + 0.53vw, 0.875rem);
  }
  
  .machine__left {
    display: none;
  }
  .machine__right {
    width: 100%;
  }
  .machine-box__content {
        flex-direction: column;
    row-gap: 32px;
  }
  .machine-box-top__left {
        width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .machine-box-top__right {
    width: 100%;
  }
  .machine__btn {
    margin-right: auto;
  }
}

@media (max-width: 389px) {
  .feature__inner {
    padding: 0 12px;
  }
  
  .menu__inner {
    padding: 0 12px;
  }
  .menu-item__title {
    font-size: clamp(1rem, 0.42rem + 2.9vw, 1.125rem);
  }
  .menu-item__text {
    font-size: clamp(0.75rem, 0.17rem + 2.9vw, 0.875rem);
  }
  
  .machine__box {
        padding-left: 10px;
    padding-right: 10px;
  }
  .machine__btn {
    width: 250px;
  }
}