/* ------------------------------
 Siimで出来ること */

/* ブロックごとの背景丸（歪んだ丸を左右にずらして配置、ブロックごとに色分け） */
#add_customizer_1_wrapper .intro,
#add_customizer_1_wrapper .sentence > .sentence_content {
  position: relative;
  isolation: isolate;
}
#add_customizer_1_wrapper .intro::before,
#add_customizer_1_wrapper .sentence > .sentence_content::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  width: 85%;
  aspect-ratio: 1 / 1;
  max-width: 450px;
  border-radius: 58% 42% 63% 37% / 41% 57% 43% 59%;
  transform: translate(-50%, -50%);
}
#add_customizer_1_wrapper .intro::before,
#add_customizer_1_wrapper .sentence > .sentence_content.sentence_2::before {
  left: 30%;
}
#add_customizer_1_wrapper .sentence > .sentence_content.sentence_1::before,
#add_customizer_1_wrapper .sentence > .sentence_content.sentence_3::before {
  left: 70%;
}

/* 1個目：冒頭ブロック＝緑 */
#add_customizer_1_wrapper .intro::before {
  background-color: rgba(132, 205, 191, 0.16); /* 緑 */
}
/* 2個目：スマートマイソク登場＝黄色 */
#add_customizer_1_wrapper .sentence > .sentence_content.sentence_1::before {
  background-color: rgba(244, 224, 77, 0.2); /* 黄色 */
}
/* 3個目：スマイソクのスマートなところ＝青 */
#add_customizer_1_wrapper .sentence > .sentence_content.sentence_2::before {
  background-color: rgba(182, 226, 249, 0.25); /* 青 */
  top: 30%;
}
/* 4個目：正確で網羅的なシミュレーション＝ピンク */
#add_customizer_1_wrapper .sentence > .sentence_content.sentence_3::before {
  background-color: rgba(255, 181, 211, 0.2); /* ピンク */
}

/* タイトル前の飾り：背景の丸と同じ歪んだ形（色付き）の中に、白丸を重ねる */
#add_customizer_1_wrapper .block-badge {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 0.5em;
  vertical-align: middle;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
#add_customizer_1_wrapper .block-badge::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 55%;
  height: 55%;
  background-color: #fff;
  border-radius: 58% 42% 63% 37% / 41% 57% 43% 59%;
  transform: translate(-50%, -50%);
}
#add_customizer_1_wrapper .block-badge-1 {
  display: none;
}
#add_customizer_1_wrapper .block-badge-2 {
  background-color: #e8cf3a; /* 黄色 */
}
#add_customizer_1_wrapper .block-badge-3 {
  background-color: #6fb3e0; /* 青 */
}
#add_customizer_1_wrapper .block-badge-4 {
  background-color: #f291bb; /* ピンク */
}

/* 画像未設定時のグレープレースホルダー */
#add_customizer_1_wrapper .image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: #d9d9d9;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* 冒頭ブロック：「物件情報」が「ご提案」になるまで、最短距離。 */
#add_customizer_1_wrapper .intro {
  margin: -5% 0 8%;
}
#add_customizer_1_wrapper .intro_title {
  margin: 0 0 1.5em;
  text-align: center;
}
#add_customizer_1_wrapper .intro_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6%;
}
#add_customizer_1_wrapper .intro_text {
  flex: 1 1 320px;
  min-width: 280px;
}
#add_customizer_1_wrapper .num-emphasis {
  font-size: 1.6em;
  font-weight: bold;
}
#add_customizer_1_wrapper .intro_image {
  flex: 1 1 320px;
  min-width: 280px;
}

/* 販売資料がたった1分で.. / REINSやビックデータとの..のタイトル */
#add_customizer_1_wrapper .sentence > .sentence_title {
  margin-top: 6em;
}
#add_customizer_1_wrapper .sentence > .sentence_title.title_1 {
  text-align: right;
}
#add_customizer_1_wrapper .sentence > .sentence_title.title_2 {
  text-align: left;
}

/* 販売資料がたった1分で.. / REINSやビックデータとの..の本文 */
#add_customizer_1_wrapper .sentence {
  margin: 8% 0;
}
#add_customizer_1_wrapper .sentence > .sentence_content {
  display: flex;
  justify-content: space-between;
  margin: 4% 0;
}
#add_customizer_1_wrapper .sentence > .sentence_content > .box.img {
  width: 60%;
  align-content: center;
  text-align: center;
}
#add_customizer_1_wrapper .sentence > .sentence_content > .box.img > img {
  width: 100%;
}
#add_customizer_1_wrapper .sentence > .sentence_content > .box.text {
  width: 50%;
  padding: 1% 3%;
  white-space: normal;
  align-content: center;
}

/* スマイソクの「スマート」なところ：縦長画像を登録するため画像列を狭くする */
#add_customizer_1_wrapper .sentence > .sentence_content.sentence_2 > .box.img {
  width: 40%;
  align-self: center;
}
#add_customizer_1_wrapper
  .sentence
  > .sentence_content.sentence_2
  > .box.img
  > img,
#add_customizer_1_wrapper
  .sentence
  > .sentence_content.sentence_2
  > .box.img
  > .image-placeholder {
  width: 100%;
  max-height: 480px;
  object-fit: contain;
}
#add_customizer_1_wrapper .sentence > .sentence_content.sentence_2 > .box.text {
  width: 66%;
  align-content: center;
}
#add_customizer_1_wrapper .sentence_text_wrap > .sentence_text {
  display: flex;
  margin-bottom: 1em;
}
#add_customizer_1_wrapper .sentence_text_wrap > .sentence_text > .icon {
  font-family: "FontAwesome", "Font Awesome 5 Free";
  color: cadetblue;
  margin: 0 2%;
}