@charset "UTF-8";

.feature-section {
  width: 100%;
  margin: 0 auto 20px;
  padding: 40px 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight:700;x
}

/* タイトル帯 */
.feature-title {
  width:100%;
  background: #231815;
  color: #fff;
  padding: 12px 20px;
  font-size: 20px;
  font-weight:800;
  display: inline-block;
  text-align:center;
}

/* メインの横並び */
.feature-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 30px;
}

/* 左側テキスト部分 */
.feature-text {
  width: 55%;
}

.feature-text h2 {
  font-size: 22px;
  line-height: 1.6;
  margin: 0 0 20px;
}

.feature-text p {
  line-height: 1.8;
}

/* 右側画像配置 */
.feature-images {
  width: 40%;
  position: relative;
}

/* 大きい画像 */
.img-large {
  width: 100%;
  height: 220px;
}

/* 小さい画像（右下寄せ） */
.img-small {
  width: 55%;
  height: 140px;
  position: absolute;
  right: 0;
  bottom: -20px; /* 少しズラして重なり感を出す */
  border:solid 1px #fff;
}


/* スマホ（〜767px想定） */
@media screen and (max-width: 767px) {

  .feature-inner {
    flex-direction: column; /* 縦並び */
  }

  /* 画像が上 */
  .feature-images {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
  }

  .img-large {
    height: 200px;
  }

  .img-small {
    width: 60%;
    height: 120px;
    bottom: -15px; /* 少し重なる表現 */
    right: 10px;
  }

  /* テキストが下 */
  .feature-text {
    width: 100%;
  }

  .feature-text h2 {
    font-size: 18px;
    line-height: 1.6;
  }
}