/* ------------------------------
 区分投資sim・自宅販売sim
 ["func-room-inv", "func-myhome", "func-aireport"] */

.add_customizer_functions_detail_wrapper .content.container {
  position: relative;
}
.add_customizer_functions_detail_wrapper .content.container .title_style2 {
  margin-bottom: 0;
}

/* ------- 機能説明サブタイトル ------- */
.add_customizer_functions_detail_wrapper .paragraph > .sub_title {
  text-align: left;
  margin: 10% 0 0;
  /* white-space: nowrap; */
  font-weight: bolder;
}

/* ------- 機能説明カード ------- */
.add_customizer_functions_detail_wrapper .paragraph > .contents_detail {
  width: 100%;
  margin: 2em 0;
  padding: 1em 4% 2em;
  background-color: #fafafa;
  border: 1px solid;
  border-color: #fafafa;
  border-radius: 8px;
  height: auto;
}
@media all and (min-width: 768px) {
  .add_customizer_functions_detail_wrapper .paragraph > .contents_detail {
    min-height: 70vh;
  }
}
.add_customizer_functions_detail_wrapper .paragraph > .contents_detail.color {
  position: relative;
  z-index: 3;
  /* 背景色・枠色は各機能・特色の編集画面（カードの背景色）で設定。
     未設定の場合は初期のグレーにフォールバック */
  background-color: var(--feature-box-bg, #fafafa);
  border: 3px double;
  border-color: var(--feature-box-border, #fafafa);
}

.add_customizer_functions_detail_wrapper
  .paragraph
  > .contents_detail
  > .texts {
  width: 100%;
  align-content: center;
  align-content: center;
}
@media all and (min-width: 768px) {
  .add_customizer_functions_detail_wrapper
    .paragraph
    > .contents_detail
    > .texts {
    height: 62vh;
  }
}
.add_customizer_functions_detail_wrapper
  .paragraph
  > .contents_detail
  > .texts
  > .text_header {
  margin-top: 3%;
}

/* ------- スクロールセクション ------- */
.add_customizer_wrapper > .content > .scroll_section_wrap {
  position: relative;
  width: 100%;
  display: flex;
}

/* ------- 左側 ------- */
.add_customizer_wrapper
  > .content
  > .scroll_section_wrap
  > .scroll_section_text {
  position: relative;
  width: 100%;
}
@media all and (min-width: 768px) {
  .add_customizer_wrapper
    > .content
    > .scroll_section_wrap
    > .scroll_section_text {
    width: 40%;
  }
}

/* ------- 右側 ------- */
.add_customizer_wrapper
  > .content
  > .scroll_section_wrap
  > .scroll_section_images_lg {
  position: -webkit-sticky;
  position: sticky;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  top: 30%;
  height: 100%;
  width: 70%;
  z-index: 2;
  transition: 0.5s;
  margin-top: 8%;
  margin-bottom: 4%;
}
.add_customizer_wrapper
  > .content
  > .scroll_section_wrap
  > .scroll_section_images_lg
  > .inner_image {
  position: absolute;
  top: 48%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: -1;
  width: 64%;
  object-fit: cover;
}

.add_customizer_wrapper
  > .content
  > .scroll_section_wrap
  > .scroll_section_images_lg
  > img {
  /* width: 80%; */
  object-fit: scale-down;
}

/* カード側で「スマホ画面で表示」がONの間、外枠をPC→SPに切り替え */
.add_customizer_wrapper
  > .content
  > .scroll_section_wrap
  > .scroll_section_images_lg
  > .device_frame_sp {
  display: none;
}
.add_customizer_wrapper
  > .content
  > .scroll_section_wrap
  > .scroll_section_images_lg.is-sp
  > .device_frame_pc {
  display: none;
}
.add_customizer_wrapper
  > .content
  > .scroll_section_wrap
  > .scroll_section_images_lg.is-sp
  > .device_frame_sp {
  display: block;
  width: 55%;
}
/* SP.pngは縦長で画面部分が細いため、PC用より幅を絞って中央寄せ。 */
/* aspect-ratio + object-fit: cover で縦横比を固定すると
   登録する画像の元サイズ（縦長・横長どちらでも）に関わらず、
   このスマホ画面の枠にぴったり収まるよう自動的に切り抜かる。らしいのですが
   なんとなくうまくいかないのでコメントアウト。 */
.add_customizer_wrapper
  > .content
  > .scroll_section_wrap
  > .scroll_section_images_lg.is-sp
  > .inner_image {
  width: 37%;
  /* aspect-ratio: 11 / 21;
  object-fit: cover; */
}

/* ------- 活用事例 ------- */
.add_customizer_functions_detail_wrapper .paragraph > .presentation_title {
  display: flex;
  align-items: center;
  font-weight: normal;
  margin: 1em 0 0;
}
.add_customizer_functions_detail_wrapper
  .paragraph
  > .presentation_title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 30px;
  background-color: #84cdbf;
  vertical-align: bottom;
  margin-right: 8px;
}
.add_customizer_functions_detail_wrapper .paragraph > .presentation {
  width: 100%;
  padding: 4em 2em;
  background-color: #f4f4f4;
  vertical-align: bottom;
  margin-top: 8px;
  display: flex;
}
.add_customizer_functions_detail_wrapper .paragraph > .presentation > .image {
  align-items: center;
  display: flex;
  width: 15%;
  margin-left: 16px;
}
@media all and (max-width: 1199px) {
  .add_customizer_functions_detail_wrapper .paragraph > .presentation > .image {
    width: 30%;
  }
}
@media all and (max-width: 767px) {
  .add_customizer_functions_detail_wrapper .paragraph > .presentation {
    flex-direction: column;
  }
  .add_customizer_functions_detail_wrapper .paragraph > .presentation > .image {
    width: 100%;
    max-width: 342px;
    margin: auto;
  }
}
.add_customizer_functions_detail_wrapper
  .paragraph
  > .presentation
  > .image
  > img {
  width: 100%;
  border-radius: 3px;
}
@media all and (min-width: 768px) {
  .add_customizer_functions_detail_wrapper
    .paragraph
    > .presentation
    > .explain {
    width: 85%;
    padding: 0 2.5em;
  }
}
.add_customizer_functions_detail_wrapper
  .paragraph
  > .presentation
  > .explain
  > .presentation_sub_title {
  margin: -8px auto 8px;
}
@media all and (max-width: 767px) {
  .add_customizer_functions_detail_wrapper
    .paragraph
    > .presentation
    > .explain
    > .presentation_sub_title {
    margin: 16px 0 8px;
  }
}

/* ------- その他：アイコン ------- */
.add_customizer_functions_detail_wrapper .icon1 {
  color: #84cd9e;
}
.add_customizer_functions_detail_wrapper .icon2 {
  color: #469b8b;
  vertical-align: super;
  margin: 3px;
}