/* ==========================================================================
   undoudou シミュレーター専用CSS (simulation.css)
   EC-CUBE標準スタイルと干渉しない独立スタイルシート (決定版・SP完成版)
   ========================================================================== */

/* ベースリセット & コンテナ */
.simulation-wrapper {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", 游ゴシック, "Yu Gothic Medium", YuGothic, メイリオ, Meiryo, sans-serif !important;
  color: #333333 !important;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto 40px !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
}

.simulation-wrapper img {
  width: 100% !important;
  height: auto !important;
  vertical-align: bottom !important;
  display: block !important;
}

.simulation-wrapper ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.simulation-wrapper li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* エリア全体（PC表示） */
.simulation-wrapper .wrapper {
  margin: 0 auto !important;
  position: relative !important;
  width: 980px !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  gap: 30px !important;
  box-sizing: border-box !important;
}

/* メインプレビュー領域 (PC: 550px × 550px) */
.simulation-wrapper .box_main {
  height: 550px !important;
  width: 550px !important;
  flex: 0 0 550px !important;
  margin: 0 auto !important;
  position: relative !important;
  overflow: hidden !important;
}

.simulation-wrapper .box_main li.slick-slide {
  height: 550px !important;
  width: 550px !important;
  position: relative !important;
}

.simulation-wrapper .box_main li.slick-slide img {
  height: 550px !important;
  width: 550px !important;
  object-fit: contain !important;
}

/* 画像上のテキストラベル */
.simulation-wrapper .box_main li.slick-slide span {
  display: block !important;
  width: fit-content !important;
  height: fit-content !important;
  position: absolute !important;
  background: rgba(255, 255, 255, 0.85) !important;
  padding: 4px 12px !important;
  font-size: 0.85rem !important;
  border-radius: 3px !important;
  z-index: 10 !important;
  color: #222 !important;
}

.simulation-wrapper .box_main .gallery_fab li.slick-slide span {
  bottom: 3% !important;
  left: 3% !important;
  font-size: 1.0rem !important;
  background: rgba(0, 0, 0, 0.6) !important;
  color: #ffffff !important;
}

.simulation-wrapper .box_main .gallery_tapeA li.slick-slide span,
.simulation-wrapper .box_main .gallery_tapeB li.slick-slide span,
.simulation-wrapper .box_main .gallery_tapeC li.slick-slide span,
.simulation-wrapper .box_main .gallery_tapeD li.slick-slide span {
  bottom: 10% !important;
  left: 3% !important;
}

.simulation-wrapper .box_main .gallery_K li.slick-slide span {
  top: 3% !important;
  left: 3% !important;
}

.simulation-wrapper .box_main .gallery_F li.slick-slide span {
  bottom: 3% !important;
  right: 3% !important;
  left: auto !important;
}

.simulation-wrapper .box_main .gallery_P li.slick-slide span {
  top: 3% !important;
  right: 3% !important;
  left: auto !important;
}

/* PC用重ね合わせ */
.simulation-wrapper .gallery_tapeA,
.simulation-wrapper .gallery_tapeB,
.simulation-wrapper .gallery_tapeC,
.simulation-wrapper .gallery_tapeD,
.simulation-wrapper .gallery_K,
.simulation-wrapper .gallery_F,
.simulation-wrapper .gallery_P {
  margin-top: -550px !important;
  margin-bottom: 0 !important;
}

/* 右側選択肢パネル (400px) */
.simulation-wrapper .box_sub {
  width: 400px !important;
  flex: 0 0 400px !important;
}

.simulation-wrapper .box_sub h2 {
  font-size: 1.5rem !important;
  margin-bottom: 12px !important;
  font-weight: 600 !important;
  color: #262626 !important;
}

.simulation-wrapper .box_sub h3 {
  text-align: left !important;
  margin: 14px 0 6px !important;
  line-height: 1.5em !important;
  font-weight: 600 !important;
  border-left: 4px solid #B04A6D !important;
  padding-left: 8px !important;
  font-size: 0.95rem !important;
  color: #262626 !important;
}

.simulation-wrapper span.lead {
  font-size: 12px !important;
  position: relative !important;
  top: 4px !important;
  color: #777777 !important;
  display: block !important;
  margin-top: 4px !important;
}

/* 選択サムネイルのスタイル & 透過設定 */
.simulation-wrapper .choice_fab li,
.simulation-wrapper .choice_tapeA li,
.simulation-wrapper .choice_tapeB li,
.simulation-wrapper .choice_tapeC li,
.simulation-wrapper .choice_tapeD li,
.simulation-wrapper .choice_K li,
.simulation-wrapper .choice_F li,
.simulation-wrapper .choice_P li {
  cursor: pointer !important;
  outline: none !important;
  background: #666666 !important;
  transition: background 0.2s ease !important;
  margin: 0 2px !important;
}

.simulation-wrapper .choice_fab li img,
.simulation-wrapper .choice_tapeA li img,
.simulation-wrapper .choice_tapeB li img,
.simulation-wrapper .choice_tapeC li img,
.simulation-wrapper .choice_tapeD li img,
.simulation-wrapper .choice_K li img,
.simulation-wrapper .choice_F li img,
.simulation-wrapper .choice_P li img {
  opacity: 0.4 !important; /* 未選択時: 透過40% */
  transition: opacity 0.2s ease !important;
}

.simulation-wrapper .choice_fab li.slick-current,
.simulation-wrapper .choice_tapeA li.slick-current,
.simulation-wrapper .choice_tapeB li.slick-current,
.simulation-wrapper .choice_tapeC li.slick-current,
.simulation-wrapper .choice_tapeD li.slick-current,
.simulation-wrapper .choice_K li.slick-current,
.simulation-wrapper .choice_F li.slick-current,
.simulation-wrapper .choice_P li.slick-current {
  background: #eee !important;
}

.simulation-wrapper .choice_fab li.slick-current img,
.simulation-wrapper .choice_tapeA li.slick-current img,
.simulation-wrapper .choice_tapeB li.slick-current img,
.simulation-wrapper .choice_tapeC li.slick-current img,
.simulation-wrapper .choice_tapeD li.slick-current img,
.simulation-wrapper .choice_K li.slick-current img,
.simulation-wrapper .choice_F li.slick-current img,
.simulation-wrapper .choice_P li.slick-current img {
  opacity: 1 !important; /* 選択時: くっきり表示 */
}

/* ==========================================================================
   スマホ表示対応 (767px以下) ★85vw単位による確実な高さ・連動重ね合わせ
   ========================================================================== */

@media screen and (max-width: 767px) {
  .simulation-wrapper .wrapper {
    width: 100% !important;
    padding: 0 !important;
    display: block !important;
  }

  /* 画面幅に応じて高さも自動連動する 85vw レスポンシブコンテナ */
  .simulation-wrapper .box_main {
    width: 85vw !important;
    height: 85vw !important;
    max-width: 400px !important;
    max-height: 400px !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
  }

  .simulation-wrapper .box_main ul.slick-slider,
  .simulation-wrapper .box_main .slick-list,
  .simulation-wrapper .box_main .slick-track {
    height: 100% !important;
    min-height: 100% !important;
    display: block !important;
  }

  .simulation-wrapper .box_main li.slick-slide {
    width: 85vw !important;
    height: 85vw !important;
    max-width: 400px !important;
    max-height: 400px !important;
    display: block !important;
    float: left !important;
  }

  .simulation-wrapper .box_main li.slick-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* 重ね合わせ: 高さ(85vw)とまったく同じネガティブマージン(-85vw)で画面サイズごとのズレを完全解消 */
  .simulation-wrapper .gallery_tapeA,
  .simulation-wrapper .gallery_tapeB,
  .simulation-wrapper .gallery_tapeC,
  .simulation-wrapper .gallery_tapeD,
  .simulation-wrapper .gallery_K,
  .simulation-wrapper .gallery_F,
  .simulation-wrapper .gallery_P {
    margin-top: -85vw !important;
    margin-bottom: 0 !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
  }

  .simulation-wrapper .box_sub {
    width: 100% !important;
    flex: none !important;
    margin-top: 16px !important;
  }

  .simulation-wrapper .box_sub h3 {
    margin: 10px 0 4px !important;
    font-size: 0.85rem !important;
  }

  .simulation-wrapper .box_sub h3.is-hidden-mobile {
    display: none !important;
  }

  .simulation-wrapper .box_sub h2 {
    display: none !important;
  }

  .simulation-wrapper .box_main li.slick-slide span {
    font-size: 0.75rem !important;
    padding: 2px 8px !important;
  }

  .simulation-wrapper .box_main .gallery_tapeA li.slick-slide span {
    bottom: 12% !important;
  }
}