/* 20261102 */

.company02.__type2 .price-acc-item {
  margin-top: 3px;
  background-color: transparent;
}

.company02.__type2 .price-acc-item summary {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  outline: none;;
}

.company02.__type2 .price-acc-item summary::-webkit-details-marker {
  display: none;
}

/* dd内のレイアウト（左右・天地中央揃え） */
.company02.__type2 .price-acc-item summary dd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 15px;
}

/* 左側にアイコン幅と同等のスペーサーを置いて料金を完全中央に配置 */
.company02.__type2 .price-acc-item summary dd::before {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
}

/* 料金テキスト（中央） */
.company02.__type2 .price-acc-item summary dd .price-num {
  text-align: center;
  flex-grow: 1;
}

/* 丸枠プラス・マイナスアイコン（天地中央） */
.company02.__type2 .acc-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--color01);
  background-color: #fff;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.company02.__type2 .acc-icon::before,
.company02.__type2 .acc-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color01);
  border-radius: 2px;
}

/* 横線 */
.company02.__type2 .acc-icon::before {
  width: 12px;
  height: 2px;
}

/* 縦線 */
.company02.__type2 .acc-icon::after {
  width: 2px;
  height: 12px;
  transition: opacity 0.2s ease;
}

/* 開いた時：縦線を消してマイナス（－）にする */
.company02.__type2 .price-acc-item[open] .acc-icon::after {
  opacity: 0;
}

/* ---------------------------------------------------
   開いた詳細パネル（完全縦並び・重なり解消）
--------------------------------------------------- */
.company02.__type2 .price-detail-panel {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1.5px solid var(--color09);
  border-top: none;
  padding: 24px 20px 24px;
  box-sizing: border-box;
}

/* 各ブロック（作業内容・作業時間・費用の内訳） */
.company02.__type2 .price-detail-panel .detail-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
  box-sizing: border-box;
}

/* 小見出し（青文字） */
.company02.__type2 .price-detail-panel .detail-ttl {
  font-size: 15px;
  font-weight: 700;
  color: var(--color01);
  margin-bottom: 8px;
  line-height: 1.4;
}

/* 本文テキスト */
.company02.__type2 .price-detail-panel .detail-txt {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
}

/* 費用内訳リスト（下線なし・縦並び） */
.company02.__type2 .price-detail-panel .breakdown-list {
  border: none;
  border-top: none;
  border-bottom: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* 内訳行：横幅100%で左右配置、行ごとに高さを確保 */
.company02.__type2 .price-detail-panel .breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 6px 0;
  font-size: 15px;
  color: #333;
  box-sizing: border-box;
  line-height: 1.5;
}

.company02.__type2 .price-detail-panel .breakdown-row .item-name,
.company02.__type2 .price-detail-panel .breakdown-row .item-price {
  font-weight: 700;
  color: #333;
}

/* お支払い総額（階層問わず内訳の直下に配置） */
.company02.__type2 .price-detail-panel .total-group {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  width: 100%;
  margin-top: 15px;
  padding-top: 20px;
}

.company02.__type2 .price-detail-panel .total-val {
  font-size: 32px;
  font-weight: 800;
  color: #e54343;
  line-height: 1;
  letter-spacing: -0.02em;
}

.company02.__type2 .price-detail-panel .total-unit {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin-left: 5px;
  white-space: nowrap;
}

/* ---------------------------------------------------
   スマホ表示（599px以下）
--------------------------------------------------- */
@media (max-width: 599px) {
  /* アコーディオン全体・見出しを横幅100%に固定 */
  .company02.__type2 .price-acc-item,
  .company02.__type2 .price-acc-item summary {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 1行目：青い箇所（サービス名）を横幅いっぱいに */
  .company02.__type2 .price-acc-item summary dt {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
  }

  /* 2行目：水色の箇所（金額・アイコン）を横幅いっぱいに */
  .company02.__type2 .price-acc-item summary dd {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* 金額テキスト：中央配置・折り返し防止 */
  .company02.__type2 .price-acc-item summary dd .price-num {
    white-space: nowrap;
    text-align: center;
    flex-grow: 1;
    font-size: 15px;
  }

  /* アイコン位置のバランス用スペーサー */
  .company02.__type2 .price-acc-item summary dd::before {
    content: "";
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
  }

  /* プラス・マイナスアイコン */
  .company02.__type2 .acc-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .company02.__type2 .acc-icon::before {
    width: 10px;
  }

  .company02.__type2 .acc-icon::after {
    height: 10px;
  }

  /* 開いた詳細パネル */
  .company02.__type2 .price-detail-panel {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 14px 20px;
  }

  .company02.__type2 .price-detail-panel .detail-group {
    margin-bottom: 16px;
  }

  .company02.__type2 .detail-ttl {
    font-size: 14px;
  }

  .company02.__type2 .price-detail-panel .detail-txt,
  .company02.__type2 .price-detail-panel .breakdown-row {
    font-size: 14px;
  }

  .company02.__type2 .price-detail-panel .total-group {
    margin-top: 12px;
  }

  .company02.__type2 .price-detail-panel .total-val {
    font-size: 26px;
  }
}
