@charset "UTF-8";
/**
 * ViewPort Mixin and setting rem to pixel.
 */
/** ここでデザインファイルのサイズを入力 */
/**
 * mixin
 */
/**
 * pxをvwで返す関数
 */
/** デスクトップ上でpxをvwを返す */
/** モバイル上でpxをvwを返す */
/** largeDisplay（1536px以上）でウィンドウサイズサイズに追従するための関数 */
/**
 * Colors
 */
@media (max-width: 768px) {
  .service {
    width: 100%;
    padding: 48rem 24rem;
    background: #fff;
    border-radius: 24rem;
  }
}
.service .service-image {
  margin: 35rem auto;
  line-height: 0;
  border-radius: 24rem;
  overflow: hidden;
}
@media (max-width: 768px) {
  .service .service-image {
    position: relative;
    margin: 25rem auto 20rem;
    padding-top: 56%;
  }
}
@media (max-width: 768px) {
  .service .service-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.service .service-text {
  display: flex;
}
@media (max-width: 768px) {
  .service .service-text {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15rem;
  }
}
.service .service-text .heading4 {
  width: 180rem;
  color: #FF9000;
  font-size: 32rem;
  font-weight: 700;
  text-align: left;
}
@media (max-width: 768px) {
  .service .service-text .heading4 {
    text-align: center;
  }
}
.service .service-text .text {
  flex: 1;
}
.service .service-text + .service-image {
  margin-top: 50rem;
}
@media (max-width: 768px) {
  .service .service-text + .service-image {
    margin-top: 35rem;
  }
}