@charset "utf-8";
.feature__inner {
      padding: 80px clamp(1.25rem, -9.917rem + 23.26vw, 18rem) 120px;
    position: relative;
}
.feature__bg {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 55%;
        background-image: url(https://emre.jp/system_panel/uploads/images/20250617210232808533.png);
    background-size: cover;
    background-position: left bottom;
    object-fit: cover;
}
.feature__items {
      display: flex;
    flex-direction: column;
    row-gap: 80px;
        margin-top: 80px;
    padding-left: clamp(0rem, -4rem + 8.33vw, 6rem);
}
.feature__item {
      position: relative;
    display: flex;
    align-items: center;
    column-gap: clamp(1.25rem, 0.417rem + 1.74vw, 2.5rem);
}
.feature-item__bg {
      position: absolute;
    left: 4%;
    width: clamp(5.625rem, 0.958rem + 9.72vw, 12.625rem);
    z-index: -1;
}
.feature__left {
  white-space: nowrap;
      font-size: clamp(1rem, 0.833rem + 0.35vw, 1.25rem);
    font-weight: 400;
    color: #32AAC6;
}
.feature__title {
      font-size: clamp(1rem, 0.833rem + 0.35vw, 1.25rem);
    font-weight: 400;
}
.feature__text {
      margin-top: clamp(1.5rem, 1.167rem + 0.69vw, 2rem);
    font-size: 14px;
    line-height: 2;
}
.feature__img--sp {
  display: none;
}

.example {
  padding-top: 40px;
}
.example__top {
  padding: 0 clamp(1.25rem, -9.917rem + 23.26vw, 18rem);
}
.example-top__content {
    margin-top: clamp(1.25rem, 0.75rem + 1.04vw, 2rem);
    margin-left: clamp(0rem, -4rem + 8.33vw, 6rem);
    margin-right: clamp(0rem, -4rem + 8.33vw, 6rem);
    border: 1px solid #9CC0CE;
    background-color: #fff;
    padding: clamp(1.25rem, 0.75rem + 1.04vw, 2rem);
}
.example-top__title {
      display: flex;
    align-items: center;
    column-gap: 10px;
}
.example-top-title__icon {
      width: 8px;
    height: 8px;
    background-color: #CCB25E;
}
.example-top-title__main {
      font-size: 16px;
    font-weight: 400;
    line-height: 1;
}
.example-top__text {
      margin-top: 24px;
    font-size: 14px;
    line-height: 2;
}
.example__bottom {
      margin-top: clamp(2rem, 0.667rem + 2.78vw, 4rem);
    display: flex;
    column-gap: clamp(1.25rem, -1.25rem + 5.21vw, 5rem);
  position: relative;
}
.example-bottom__bg {
      position: absolute;
    width: 30%;
    height: 100%;
    background-color: #EDF9FF;
    right: 0;
    z-index: -1;
}
.example-bottom__left {
      width: 30%;
    height: fit-content;
    position: relative;
    padding-top: 20px;
}
.example-bottom-left__img {
      position: absolute;
    aspect-ratio: 531/637;
    z-index: 1;
    width: 95%;
    top: 0;
  object-fit: cover;
}
.example-bottom-left__bg {
  aspect-ratio: 562/657;
}
.example__items {
      width: 70%;
    display: flex;
    flex-direction: column;
    row-gap: clamp(3rem, 2.333rem + 1.39vw, 4rem);
  padding-right: clamp(1.25rem, -1.917rem + 6.6vw, 6rem);
}
.example__item {
      display: flex;
    column-gap: clamp(1rem, 2.08vw, 2.5rem);
}
.example-item__left {
      width: 212px;
    min-width: 212px;
    height: 149px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #9CC0CE;
}
.example-item-left__icon {
      width: 8px;
    height: 8px;
    background-color: #CCB25E;
}
.example-item-left__title {
      margin-top: 12px;
    font-size: 16px;
    font-weight: 500;
}
.example-item-left__img {
      margin-top: 16px;
    height: 70px;
    object-fit: contain;
}
.example-item__right {
  width: 736px;
}
.example-item-right__title {
      font-size: clamp(1rem, 0.833rem + 0.35vw, 1.25rem);
    font-weight: 400;
}
.example-item-right__text {
      margin-top: clamp(1.375rem, 0.917rem + 0.95vw, 2.063rem);
    font-size: 14px;
    line-height: 2;
    font-weight: 400;
      padding-bottom: clamp(1rem, 0.833rem + 0.35vw, 1.25rem);
    border-bottom: 1px solid #898989;
}

.voice {
  padding-top: 80px;
}
.voice__inner {
      position: relative;
}
.voice__bg {
      position: absolute;
    bottom: 0;
    height: 122px;
    width: 100%;
    left: 0;
    background-color: #EDF9FF;
    z-index: -1;
}
.voice__bg--sp {
  display: none;
}
.voice__container {
  padding: 0 clamp(1.25rem, -9.917rem + 23.26vw, 18rem);
  padding-bottom: 40px;
}
.voice__items {
      margin-top: 40px;
    padding: 0 clamp(0rem, -4rem + 8.33vw, 6rem);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(1.25rem, 0.083rem + 2.43vw, 3rem);
}
.voice-item__top {
      display: flex;
    column-gap: 32px;
}
.voice-item__img {
      width: 92px;
    object-fit: contain;
}
.voice-item-top-left__text1 {
      padding: 5px 20px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    border: 1px solid #050505;
    border-radius: 16px;
    width: fit-content;
}
.voice-item-top-left__text2 {
        margin-top: 16px;
    font-size: 16px;
    font-weight: 400;
}
.voice-item__text {
      margin-top: 16px;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 16px;
    border-bottom: 1px solid #898989;
}

.flow {
  padding-top: 80px;
}
.flow__inner {
  padding: 0 clamp(1.25rem, -17.893rem + 29.91vw, 18rem);
  padding-right: clamp(4.813rem, -10.259rem + 23.55vw, 18rem);
}
.flow__items {
      margin-top: clamp(2rem, 1rem + 2.08vw, 3.5rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 77px;
    row-gap: 66px;
}
.flow__item {
  position: relative;
}
.flow-item__arrow {
      width: 34px;
    height: 34px;
    position: absolute;
    z-index: 1;
    right: -55px;
    top: 50%;
    transform: translateY(-50%);
}
.flow-item__top {
      display: flex;
    column-gap: 12px;
    align-items: center;
    border-top: 1px solid #898989;
}
.flow-item-top__left {
  position: relative;
}
.flow-item-top-left__number {
      width: clamp(3rem, 2.708rem + 0.61vw, 3.438rem);
    object-fit: contain;
}
.flow-item-top-left__number-p {
      position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-70%, -50%);
    font-size: clamp(1rem, 0.917rem + 0.17vw, 1.125rem);
    font-weight: 400;
    color: #fff;
}
.flow-item-top-left__title {
   font-size: clamp(0.875rem, 0.792rem + 0.17vw, 1rem);
    font-weight: 400;
}
.flow-item__bottom {
      margin-top: 16px;
    padding: clamp(1.188rem, 0.938rem + 0.52vw, 1.563rem) clamp(0.5rem, -0.929rem + 2.23vw, 1.75rem);
    background-color: #EDF9FF;
}
.flow-item-bottom__text {
    font-size: clamp(0.75rem, 0.667rem + 0.17vw, 0.875rem);
    font-weight: 400;
    line-height: 2;
}

@media (max-width: 1023px) {
  .example__bottom {
        flex-direction: column;
    row-gap: 24px;
  }
  .example-bottom__bg {
    display: none;
  }
  .example-bottom__left {
        width: 70%;
    margin: 0 auto;
  }
  .example-bottom-left__img {
    aspect-ratio: 351/256;
  }
  .example-bottom-left__bg {
    aspect-ratio: 371/256;
  }
  .example__items {
        width: 100%;
    margin: 0 auto;
    padding: 0 40px;
  }
  
  .flow__items {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .feature__inner {
        padding: 0;
    padding-top: 32px;
  }
  .feature__bg {
    display: none;
  }
  .feature__container {
    padding: 0 20px;
  }
  .feature__items {
        margin-top: 57px;
  }
  .feature__item {
        flex-direction: column;
    align-items: flex-start;
    row-gap: 24px;
  }
  .feature-item__bg {
        top: -40px;
    left: 30px;
  }
  .feature__img--sp {
        display: block;
    margin-top: 40px;
    aspect-ratio: 390/258;
    object-fit: cover;
  }
  
  .example__bottom {
    padding-right: 20px;
  }
  .example-bottom__left {
        margin: unset;
    width: 100%;
  }
  .example__items {
        padding: 0 20px;
    padding-right: 0;
  }
  .example__item {
        flex-direction: column;
    row-gap: 20px;
    align-items: center;
  }
  .example-item__right {
    width: 100%;
  }
  .example-item-right__title {
    text-align: center;
  }
  
  .voice__bg {
    display: none;
  }
  .voice__bg--sp {
    display: block;
      position: absolute;
    bottom: -40px;
    height: 122px;
    width: 100%;
    left: 0;
    background-color: #EDF9FF;
    z-index: -1;
  }
  .voice__container {
        padding: 0;
    padding-bottom: 40px;
  }
  .voice__title {
    padding: 0 20px;
  }
  .voice__item {
    position: relative;
  }
  .voice-item__top {
    padding: 0 20px;
  }
  .voice-item__text {
        padding-left: 20px;
    padding-right: 20px;
  }
  .voice__items {
        grid-template-columns: repeat(1, 1fr);
    row-gap: 80px;
  }
  
  .flow__inner {
    padding-right: 20px;
  }
  .flow__items {
    grid-template-columns: repeat(1, 1fr);
  }
  .flow-item__arrow {
        right: 50%;
    top: unset;
    bottom: -50px;
    transform: translateX(50%) rotate(90deg);
  }
}

@media (max-width: 389px) {
  .example-item-right__text {
    font-size: 12px;
  }
}