@import url(common.css);

/* /////////////////////////////////// */

/* エコキュート交換工事費用セクション */
/* ep-item-section */

/* /////////////////////////////////// */
.ep-item-section {
  padding: 5em 0 0;
}

.default_block {
  padding: 1em 0;
}

.default_block h3 {
  text-align: center;
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: unset;
}

.default_block .default_item {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 1.5em auto 0;
}
.default_block .default_item p {
  background-color: #ecf7e3;
  padding: 1em;
  font-size: clamp(14px, 1.8vw, 16px);
}

.choice_block {
  padding: 4em 0 0;
}
.choice_block h3 {
  text-align: center;
}

.choice_block img {
  display: block;
  width: min(100%, 260px);
  height: auto;
  margin: 1.5em auto 0;
}

.choice_block p {
  text-align: center;
}

/* サイズがわからない方（オーバーレイ） */
.over {
  padding: 2em 0 0;
}
#overlayWindow img {
  display: block;
  width: min(100%, 500px);
  height: auto;
  max-width: unset;
  margin: 2em 0;
}
.over #button1 {
  max-width: 150px;
}

/* サイズを選んでください */
.choice_box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap: 1em;
  padding: 1em 0;
}

/* 標準工事内容 */
.default_container {
  margin: 0 auto 2em;
  box-sizing: border-box;
  text-align: center;
  font-size: clamp(18px, 1.8vw, 20px);
  font-weight: bold;
}
.default_item {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  font-weight: 400;
}
.default_item > p {
  margin: 0;
  padding: 12px 10px;
  text-align: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

@media (max-width: 768px) {
  .default_item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.item-tab {
  max-width: 820px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin: 1em auto;
  box-sizing: border-box;
  gap: 1em;
}

.item-tab > label {
  flex: 1 1;
  order: -1;
  min-width: 70px;
  font-size: clamp(38px, 1.8vw, 40px);
  color: #fff;
  font-weight: bold;
  letter-spacing: 1.8px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  padding: 0.5em;
  background-color: #3d853f;
  border-radius: 4px;
}

.item-tab > label img {
  display: block;
  width: min(100%, 100px);
  height: auto;
  margin: auto;
}

.item-tab > label span {
  display: block;
  font-size: clamp(18px, 1.8vw, 20px);
  font-weight: 400;
}

.item-tab > label:hover {
  opacity: unset;
}

.item-tab input {
  display: none;
}

.item-tab > div {
  display: none;
  width: 100%;
}

.item-tab label:has(input:checked)::before {
  display: block;
  content: "選択中";
  font-size: clamp(16px, 1.8vw, 18px);
  background-color: #fff;
  color: #397200;
  padding: 0.5em 2em;
  margin-bottom: 0.5em;
}

.item-tab label:has(:checked) + div {
  display: block;
}

.eq_wap .fff_box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

/* 商品画像 */
.eq_wap .fff_box img {
  display: block;
  width: min(100%, 370px);
  margin: 1em auto 0;
}
.eq_size {
  margin: 0 auto 1em;
  width: calc(100% - 0px);
  max-width: 820px;
  margin: 0 auto;
  box-sizing: border-box;
}
.eq_size table {
  border-collapse: collapse;
  width: 100%;
}
/* 本体＋標準工事費 */
.price-group-container {
  border: 1px solid var(--border_gray);
  margin-bottom: 1em;
}
.price-group {
  padding: 1.5em 1em 0;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
/* 左側 */
.group-left {
  flex: 1;
}
/* 商品サンプル画像 */
.group-left img {
  display: block;
  width: min(100%, 210px);
  height: auto;
  margin: 0 auto 1em;
}

.group-left p {
  font-size: clamp(18px, 1.8vw, 20px);
  font-weight: bold;
  text-align: center;
}

/* 右側 */
.group-right {
  flex: 1.2;
}
.group-right h3 {
  font-size: clamp(18px, 1.8vw, 20px);
  font-weight: 400;
}
.tag_wap {
  margin: 1em auto;
}

.price_block .large {
  position: relative;
  font-size: clamp(40px, 1.8vw, 50px);
  padding-right: 0.2em;
  font-weight: 600;
  text-decoration: line-through #c40606;
}
.price_block .large::after {
  position: absolute;
  content: "さらにお値引き！";
  font-size: 16px;
  font-weight: unset;
  background-color: #c40606;
  color: #fff;
  padding: 0.2em 0.5em;
  white-space: nowrap; /* 文字折り返しを禁止 */
  writing-mode: horizontal-tb; /* 念のため横書きを明示 */
  top: 58%;
  left: 82%;
  transform: translate(50%, -50%);
}
.fff_container li {
  list-style-type: disc;
  list-style-position: inside;
  font-size: 15px;
  color: var(--aside_gray);
}

/* //////////////////////////////////////////

メーカーセクション

////////////////////////////////////////// */
.ok_maker {
  padding: 3em 0 3em;
  margin: 8em auto 3em;
  background-color: var(--main_light_gray);
}
.ok_maker h2 {
  background-color: unset;
  max-width: unset;
  text-align: center;
  padding: 0 0 1em;
  font-size: clamp(20px, 1.8vw, 22px);
}
.ok_maker p {
  text-align: center;
}
.maker_block {
  width: calc(100% - 40px);
  max-width: 820px;
  margin: 0 auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 16px;
  margin: 1em auto 2em;
}
.maker_logo {
  background-color: #fff;
  padding: 1em;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 1;
}
.maker_block img {
  display: block;
  width: min(100%, 150px);
  height: auto;
  margin: auto;
}

.ok_kyuto {
  padding: 5em 0;
}
.ok_kyuto h2 {
  text-align: center;
}
.kyuto_block {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 3em auto 0;
}
.kyuto_item {
  border: 1px solid var(--border_gray);
  border-radius: var(--radius);
  padding: 1em;
}
.kyuto_item p {
  font-weight: bold;
  text-align: center;
}
.kyuto_item img {
  display: block;
  width: min(100%, 250px);
  height: auto;
  margin: 1em auto 0;
}

/* kyuto_bottom */
.kyuto_bottom {
  padding: 1em 0;
}
.kyuto_bottom p {
  text-align: center;
}
.kyuto_bottom ul {
  padding-bottom: 4em;
}
.kyuto_bottom li {
  font-size: clamp(13px, 1.8vw, 14px);
  color: var(--aside_gray);
  text-indent: -1em;
  padding-left: 1em;
}
@media only screen and (max-width: 768x) {
  .kyuto_bottom p {
    text-align: left;
  }
}

/* /////////////////////////////////// */

/* この商品を詳しく見るアコーディオン */

/* /////////////////////////////////// */
.description_accordion {
  margin: 0 auto;
}

.description_accordion summary {
  width: calc(100% - 80px);
  max-width: 820px;
  margin: 0 auto;
  box-sizing: border-box;
  cursor: pointer;
  color: #0a7f42;
  margin: 1em auto 2em;
}
/* アコーディオンの中身 */
.card-container {
  width: calc(100% - 40px);
  margin: 0 auto;
  padding: 0 0 4em;
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: stretch;
  align-items: stretch;
  gap: 1.5em;
}
.description_accordion .card {
  padding: 1.5em 1em;
  border: unset;
  box-shadow: unset;
}
.description_accordion .card h3 {
  padding-bottom: 1em;
}
.card_wap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
  gap: 0.2em 0.5em;
}
.description_accordion .card_wap p {
  border: 1px solid #c5c5c5;
  padding: 0.5em 0.7em;
  margin-bottom: 0.5em;
  font-size: 14px;
}

/* /////////////////////////////////// */

/* 価格テーブル */

/* ///////////////////////////////// */

/* 容量 370L・460L */
.description_accordion table {
  margin: 0 auto 1em;
}

.description_accordion table tr td {
  border: 1px solid var(--border_gray);
  padding: 1em;
}

/* 左側 */
.description_accordion table tr td:nth-of-type(1) {
  background-color: #f7f7f7;
  font-weight: bold;
  text-align: center;
  width: 26%;
}
.item-detail p.pana_link {
  font-size: 15px;
  text-align: right;
}

.eq460 .tag_wap p {
  font-size: 0.78rem;
  font-weight: 600;
  color: #6679a1;
  background: #dce8ff;
  border: 1px solid rgb(173, 194, 253);
  padding: 0.2em 0.6em;
  border-radius: 50px;
  font-size: 16px;
}
.ep-item-section ul {
  width: calc(100% - 40px);
  max-width: 820px;
  margin: 1em auto;
  box-sizing: border-box;
}
.ep-item-section li {
  color: var(--aside_gray);
  list-style-type: disc;
  list-style-position: inside;
  font-size: 15px;
}

@media (max-width: 768px) {
  .description_accordion table td {
    display: block;
    width: 100%;
  }
  .description_accordion table .last td:last-child {
    width: 100%;
  }
  .item-tab > label span {
    display: block;
  }
  .price-group {
    display: block;
  }
  .group-left p {
    text-align: left;
  }
  .description_accordion .card {
    padding: 1.5em 0;
  }
  .description_accordion table tr td:nth-of-type(1) {
    width: unset;
  }
  /* さらにお値引き */
  .price_block .large::after {
    font-size: 14px;
    top: 58%;
    left: 82%;
    transform: translate(50%, -50%);
  }
}

/* /////////////////////////////////// */

/* よくある追加費用 */
/* .op_container */

/* /////////////////////////////////// */

/* common.cssへ記述 */

/* /////////////////////////////////

施工事例
section id="sekourei"

/////////////////////////////////*/

/* common.cssへ記述 */

/* /////////////////////////////////

よくあるご質問

///////////////////////////////// */
.faq_accordion .faq_item ul {
  padding: 2em;
}
.faq_accordion .faq_item ul li {
  list-style-type: disc;
  list-style-position: inside;
}

.faq_accordion .faq_item h3 {
  padding: 0;
  margin: 3em 1em 15px 10px;
  border-bottom: unset;
  box-shadow: unset;
}

.faq_accordion .faq_item h3::after {
  display: none;
}
.faq_accordion .faq_item dl {
  border-bottom: dotted 2px var(--border_gray);
  padding-bottom: 2em;
}
.faq_accordion .faq_item dl dt {
  font-weight: bold;
  color: #c40606;
  font-size: clamp(18px, 1.8vw, 20px);
  padding: 1em 0 0.5em;
}

.faq_accordion .faq_item dl dd {
  margin-left: unset;
}
.faq_accordion .faq_item dl dd img {
  display: block;
  max-width: 300px;
  margin-bottom: 1em;
}
.faq_accordion .faq_item dl dd p {
  margin: 1em 0;
}

@media screen and (max-width: 768px) {
  .ep-item-section {
    width: calc(100% - 40px);
    max-width: 820px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .choice_block img {
    width: min(100%, 210px);
  }

  .maker_block {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 768px) {
  /* 標準工事部分 */
  .default_block .default_item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5em;
  }
  /* タブ部分 */
  .item-tab {
    gap: 0.5em;
  }
  .item-tab > label {
    font-size: clamp(28px, 1.8vw, 30px);
  }
  .item-tab > label span {
    font-size: clamp(16px, 1.8vw, 18px);
  }

  /* 左右余白まとめて */
  .ok_kyuto {
    width: calc(100% - 30px);
    max-width: 820px;
    margin: 0 auto;
    box-sizing: border-box;
  }
}