@charset "utf-8";

/* =========================================
   設置事例 詳細ページ
========================================= */

/* 全体 */
.single-case .case_details {
  padding-top: 3rem;
}

.single-case .case_details .container {
  width: 100%;
  max-width: 1106px;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}


/* =========================================
   タイトル
========================================= */

.single-case .case_details h2 {
  margin: 0 0 0.5rem;
}

.single-case .case_details h2 > span:last-child {
  display: block;
  font-size: 1.35rem;
  line-height: 1.6;
  font-weight: 700;
  color: #1f1f1f;
}

/* 設置場所 */
.single-case .case_details .case_location {
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #555;
}


/* =========================================
   画像＋右側情報
========================================= */

.single-case .case_details > .container > .row {
  align-items: flex-start;
}

.single-case .case_details .products_detail_price_and_inquiry {
  width: 100%;
}

/* 合計価格 */
.single-case .case_details .product_price_and_id {
  margin-bottom: 1.5rem;
}

.single-case .case_details .product_price_and_id > p:first-child {
  margin: 0 0 0.35rem;
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 700;
}

.single-case .case_details .product_price_and_id > p:first-child span {
  margin-left: 0.25rem;
  font-size: 1rem;
  font-weight: 500;
}

.single-case .case_details .product_price_and_id > p:last-child {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
}


/* =========================================
   基本情報
========================================= */

.single-case .case_info {
  margin-top: 0;
}

.single-case .case_details dl.case_info > div {
  display: flex;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid #999;
}

.single-case .case_details dl.case_info > div:first-child {
  border-top: 1px solid #999;
}

.single-case .case_details dl.case_info dt {
  flex: 0 0 120px;
  width: 120px;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 500;
}

.single-case .case_details dl.case_info dd {
  flex: 1;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}


/* =========================================
   商品説明
========================================= */

.single-case .case_details .product_description {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.single-case .case_details .product_description h3.bg_red {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 0.4rem 1.2rem 0.5rem;
  border-radius: 6px;
  background-color: #ff4a4a;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}

.single-case .case_details .case_description p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.9;
}

.single-case .case_details .case_description p + p {
  margin-top: 1em;
}


/* =========================================
   価格内訳
========================================= */

.single-case .case_price {
  margin-bottom: 3.5rem;
}

.single-case .case_price h3.bg_green {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 0.4rem 1.2rem 0.5rem;
  border-radius: 6px;
  background-color: #21c129;
  color: #fff;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 700;
}

.single-case .case_details dl.price_breakdown {
  margin-bottom: 1rem;
}

.single-case .case_details dl.price_breakdown > div {
  display: flex;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid #999;
}

.single-case .case_details dl.price_breakdown > div:first-child {
  border-top: 1px solid #999;
}

.single-case .case_details dl.price_breakdown dt {
  flex: 0 0 180px;
  width: 180px;
  padding: 0;
  font-size: 0.95rem;
}

.single-case .case_details dl.price_breakdown dd {
  flex: 1;
  margin: 0;
  padding: 0;
  text-align: right;
  font-size: 0.95rem;
}

/* 合計 */
.single-case .case_details dl.price_breakdown .total {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.single-case .case_details dl.price_breakdown .total dt {
  font-weight: 700;
}

.single-case .case_details dl.price_breakdown .total dd,
.single-case .case_details dl.price_breakdown .total dd strong {
  font-size: 1.15rem;
  font-weight: 700;
}

.single-case .case_price .price_note {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  line-height: 1.7;
  color: #555;
}


/* =========================================
   下部お問い合わせ
========================================= */

.single-case .case_details .inquiry {
  margin-top: 4rem;
}


/* =========================================
   PC
========================================= */

@media screen and (min-width: 1106px) {

  .single-case .case_details {
    padding-top: 5rem;
  }

  .single-case .case_details .container {
    padding-left: 0;
    padding-right: 0;
  }

  .single-case .case_details h2 > span:last-child {
    font-size: 1.6rem;
  }

  .single-case .case_details .case_location {
    margin-bottom: 2rem;
    font-size: 1rem;
  }

  .single-case .case_details > .container > .row {
    gap: 48px;
  }

  .single-case .case_details .slider_container {
    flex: 0 0 566px;
    max-width: 566px;
  }

  .single-case .case_details .products_detail_price_and_inquiry {
    flex: 1;
    min-width: 0;
  }

  .single-case .case_details .product_price_and_id > p:first-child {
    font-size: 2.75rem;
  }

  .single-case .case_details dl.case_info dt {
    flex-basis: 140px;
    width: 140px;
    font-size: 1rem;
  }

  .single-case .case_details dl.case_info dd {
    font-size: 1rem;
  }

  .single-case .case_details .product_description h3.bg_red,
  .single-case .case_price h3.bg_green {
    font-size: 1.1rem;
  }

  .single-case .case_details .case_description p {
    font-size: 1rem;
  }
}


/* =========================================
   SP
========================================= */

@media screen and (max-width: 833px) {

  .single-case .case_details {
    padding-top: 2.5rem;
  }

  .single-case .case_details h2 > span:last-child {
    font-size: 1.2rem;
  }

  .single-case .case_details .products_detail_price_and_inquiry {
    margin-top: 0.5rem;
  }

  .single-case .case_details dl.case_info > div,
  .single-case .case_details dl.price_breakdown > div {
    display: flex;
  }

  .single-case .case_details dl.case_info dt {
    flex: 0 0 90px;
    width: 90px;
  }

  .single-case .case_details dl.price_breakdown dt {
    flex: 0 0 140px;
    width: 140px;
  }

  .single-case .case_details dl.price_breakdown dd {
    text-align: right;
  }

  .single-case .case_details .product_description {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }

  .single-case .case_price {
    margin-bottom: 3rem;
  }
}


/* 小さいスマホ */
@media screen and (max-width: 499px) {

  .single-case .case_details dl.price_breakdown dt {
    flex: 0 0 52%;
    width: 52%;
    padding-right: 0.75rem;
  }

  .single-case .case_details dl.price_breakdown dd {
    font-size: 0.875rem;
  }

  .single-case .case_details dl.price_breakdown .total dd,
  .single-case .case_details dl.price_breakdown .total dd strong {
    font-size: 1rem;
  }
}

/* =========================================
   設置事例 詳細ページ：クライアントFB調整
========================================= */

/* -----------------------------------------
   メイン画像を大きくする
----------------------------------------- */
@media screen and (min-width: 1106px) {

  .single-case .case_details .container {
    max-width: 1440px;
  }

  .single-case .case_details > .container > .row {
    gap: 32px;
    align-items: flex-start;
    justify-content: flex-start;
  }

  /* 左：メイン画像 */
  .single-case .case_details .slider_container {
    flex: 0 0 960px;
    width: 960px;
    max-width: 960px;
  }

  /* 右：価格＋問い合わせ */
  .single-case .case_details .products_detail_price_and_inquiry {
    flex: 0 0 400px;
    width: 400px;
    max-width: 400px;
  }

  .single-case .case_details .products_details_inquiry {
    width: 100%;
  }
}

/* -----------------------------------------
   サムネイルをメイン画像幅いっぱいに
----------------------------------------- */

.single-case .case_details .slider_thumbnail {
  width: 100%;
}

/* PC：3枚でメイン画像と同じ横幅にする */
@media screen and (min-width: 834px) {

  .single-case .case_details .slider_thumbnail .swiper-slide {
    width: calc((100% - 20px) / 3) !important;
  }
}

/* SPも3枚なら横幅いっぱい */
@media screen and (max-width: 833px) {

  .single-case .case_details .slider_thumbnail .swiper-slide {
    width: calc((100% - 24px) / 3) !important;
  }
}


/* -----------------------------------------
   基本情報
----------------------------------------- */

.single-case .case_details dl.case_info {
  margin-bottom: 2.5rem;
}

.single-case .case_details dl.case_info > div {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.single-case .case_details dl.case_info dt,
.single-case .case_details dl.case_info dd {
  font-size: 1rem;
}


/* -----------------------------------------
   広さ・寸法外寸
----------------------------------------- */

.single-case .case_spec {
  margin: 0 0 2rem;
}

/* 「広さ／3.96㎡（1.2坪）」 */
.single-case .case_spec_area {
  margin: 0 0 0.55rem;
  font-size: 1.35rem;
  line-height: 1.5;
  font-weight: 700;
  color: #222;
}

.single-case .case_spec_area strong {
  font-size: inherit;
  font-weight: 700;
}

/* 寸法外寸 */
.single-case .case_spec_dimensions {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #444;
}


/* -----------------------------------------
   おすすめポイント・商品説明
----------------------------------------- */

.single-case .case_text_block,
.single-case .case_details .product_description {
  margin: 0 0 2rem;
}

/* 【おすすめポイント】【商品説明】 */
.single-case .case_text_heading {
  margin: 0 0 0.4rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 700;
  color: #222;
}

/* 赤い商品説明ラベルは念のため非表示 */
.single-case .case_details .product_description h3.bg_red {
  display: none;
}

.single-case .case_text_content p,
.single-case .case_description p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.9;
  color: #222;
}

.single-case .case_text_content p + p,
.single-case .case_description p + p {
  margin-top: 0.5em;
}


/* -----------------------------------------
   価格内訳
----------------------------------------- */

.single-case .case_price {
  margin-top: 3rem;
  margin-bottom: 4rem;
}

/* 緑ラベル */
.single-case .case_price h3.bg_green {
  margin-bottom: 0.75rem;
  padding: 0.45rem 1rem;
  font-size: 1rem;
  font-weight: 700;
}

/* 表 */
.single-case .case_details dl.price_breakdown {
  margin-bottom: 0.75rem;
}

.single-case .case_details dl.price_breakdown > div {
  min-height: 54px;
  padding: 0.9rem 0.75rem;
  align-items: center;
}

.single-case .case_details dl.price_breakdown dt {
  flex: 0 0 240px;
  width: 240px;
  font-size: 1.3rem;
  line-height: 1.5;
  font-weight: 600;
}

.single-case .case_details dl.price_breakdown dd {
  font-size: 1.3rem;
  line-height: 1.5;
  font-weight: 600;
}

/* 合計をさらに強調 */
.single-case .case_details dl.price_breakdown .total dt {
  font-size: 1.5rem;
  font-weight: 700;
}

.single-case .case_details dl.price_breakdown .total dd,
.single-case .case_details dl.price_breakdown .total dd strong {
  font-size: 1.55rem;
  font-weight: 700;
}


/* 注意書き */
.single-case .case_price .price_note {
  font-size: 0.8rem;
  line-height: 1.7;
}


/* =========================================
   SP
========================================= */

@media screen and (max-width: 833px) {

  .single-case .case_spec_area {
    font-size: 1.15rem;
  }

  .single-case .case_spec_dimensions {
    font-size: 0.875rem;
  }

  .single-case .case_text_heading {
    font-size: 0.95rem;
  }

  .single-case .case_text_content p,
  .single-case .case_description p {
    font-size: 0.95rem;
  }

  .single-case .case_details dl.price_breakdown dt {
    flex: 0 0 55%;
    width: 55%;
    padding-right: 0.5rem;
    font-size: 1.15rem;
  }

  .single-case .case_details dl.price_breakdown dd {
    font-size: 1.15rem;
  }

  .single-case .case_details dl.price_breakdown .total dd,
  .single-case .case_details dl.price_breakdown .total dd strong {
    font-size: 1.55rem;
  }
}