@charset "UTF-8";

/**
 * items.css（SP）
 *
 * # Default
 * # 商品一覧
 * # 商品詳細
 * # 商品詳細（廃盤ver）
 * # エコキュート関連商品（静的ページ）
 *
*/


/* ==========================================================================
   # Default
============================================================================= */
fieldset,
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  margin: 0;
  appearance: none;
  touch-action: manipulation; /* ダブルタップでのズームを無効に */
}

figure {
  margin: 0;
  padding: 0;
}


/* ==========================================================================
   # 中間電話ブロック（基本は common.css にあるCTAブロック）
============================================================================= */
.cta-head-txt {
  margin: 12.077vw 0 -2.415vw;
  padding: 0 2.415vw;
  line-height: 1;
}

.l-cta.items-cta {
  margin-bottom: 4.831vw;
}


/* ==========================================================================
   # 商品一覧
============================================================================= */
/* # 当店売れ筋商品
-------------------------------------------------------------------- */
.l-ec-popular {
  padding: 7.246vw 2.415vw 4.831vw;
  background: #cf0000 url('/sp/images/items/index/fv/bg_fv.jpg') no-repeat 0 0 / cover;
}

.ec-popular-ttl {
  width: 90.338vw;
  margin: 0 auto 2.899vw;
}

.ec-popular-bnr { display: block; }


/* # 特価ランキング
-------------------------------------------------------------------- */
.l-ec-ranking {
  padding: 9.662vw 0 4.831vw;
  background-color: #ede8e6;
}

.ec-ranking-ttl {
  padding: 0 4.831vw;
  margin-bottom: 1.208vw;
}

.ec-ranking-list-wrap {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  height: 78.019vw;
}

.ec-ranking-list-inner {
  width: 100%;
  height: 78.019vw;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ec-ranking-list {
  display: inline-table;
  max-width: 100%;
  margin: 0 auto;
  padding-left: 2.415vw;
}

.ec-ranking-list li {
  display: table-cell;
}

.ec-ranking-list li + li {
  margin-left: -3.382vw;
}

.ec-ranking-list li a {
  display: block;
  width: 87.917vw;
}


/* # 商品検索ブロック
-------------------------------------------------------------------- */
/* 検索エリア
----------------------- */
.l-ec-search-list {
  padding: 3.865vw 0 9.662vw;
  line-height: 1;
  background-color: #ebe4d9;
}

/* 一覧見出し */
.ec-search-list-ttl {
  position: relative;
  margin: 0 2.415vw 10.87vw;
  padding: 31.643vw 0 0;
  font-size: 4.831vw;
  line-height: 1.5;
  text-align: center;
}

.ec-search-list-ttl span {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ec-search-list-ttl span::before,.ec-search-list-ttl span::after {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: #988568;
}
.ec-search-list-ttl span::before {
  margin-right: 2.41546vw;
}
.ec-search-list-ttl span::after {
  margin-left: 2.41546vw;
}

.ec-search-list-ttl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20.773vw;
  height: 25.362vw;
  background: url('/sp/images/items/detail/img_character01.png') no-repeat 0 0 / contain;
}


.l-ec-search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3.623vw;
  padding: 0 2.415vw;
}

.ec-search-results {
  font-size: 3.865vw;
  margin-left: 2.415vw;
}

.ec-search-results .number {
  font-size: 5.072vw;
}

.ec-search-btn-wrap {
  display: flex;
  gap: 0 1.208vw;
}

.ec-search-btn {
  width: 33.816vw;
  padding: 2.899vw 0;
  font-size: 3.382vw;
  color: #fff;
  background-color: #b0a6a2;
  border-radius: 4.831vw;
}

.ec-search-btn.sort::before {
  content: "";
  display: inline-block;
  width: 4.348vw;
  height: 2.899vw;
  margin-right: 1.691vw;
  background: url('/sp/images/items/index/search/ico_sort.svg') no-repeat 0 0 / contain;
}

.ec-search-btn.narrow::before {
  content: "";
  display: inline-block;
  width: 4.106vw;
  height: 2.899vw;
  margin-right: 1.691vw;
  background: url('/sp/images/items/index/search/ico_narrow.svg') no-repeat 0 0 / contain;
}


.ec-search-subsidy {
  display: flex;
  justify-content: flex-end;
  padding: 0 4.831vw;
  margin-bottom: 6.039vw;
}

.ec-search-subsidy-item {
  display: block;
}

/* ラジオボタン */
.ec-search-subsidy-input { display: none;}

.ec-search-subsidy-label {
  display: inline-block;
  position: relative;
  font-size: 3.382vw;
  cursor: pointer;
}

.ec-search-subsidy-label .txt {
  display: block;
  padding-left: 4.831vw;
  text-decoration: underline;
}

.ec-search-subsidy-input + .ec-search-subsidy-label::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 3.623vw;
  height: 3.623vw;
  border: 1px solid #ee0000;
  border-radius: 50%;
  background-color: #fff;
}

.ec-search-subsidy-input:checked + .ec-search-subsidy-label::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.725vw;
  margin: auto;
  width: 2.174vw;
  height: 2.174vw;
  border-radius: 50%;
  background-color: #ee0000;
}


/* 商品一覧エリア
----------------------- */
.ec-items-include-txt {
  margin: 0 2.415vw 3.865vw;
  padding: 3.14vw;
  font-size: 3.865vw;
  line-height: 1.3;
  text-align: center;
  font-weight: bold;
  color: #fff;
  background-color: #000;
  border-radius: 1.208vw;
}
.ec-items-include-txt .point {
  color: #ffd800;
}


.ec-items-list {
  padding: 0 2.415vw;
  line-height: 1;
}

.ec-items-li + .ec-items-li {
  margin-top: 3.623vw;
}

.ec-items-link {
  display: block;
  background-color: #fff;
  border-radius: 2.415vw;
  text-decoration: none;
  color: #261e15;
}

.ec-items-body {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4.831vw;
}

.ec-items-pic {
  position: relative;
  left: -1.208vw;
  width: 38.647vw;
  flex-shrink: 0;
}

.ec-items-pic img {
  position: relative;
  z-index: 2;
}

.ec-items-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.415vw;
  font-size: 2.899vw;
  color: #666;
}
.ec-items-logo {
  display: flex;
  align-items: center;
}
.ec-items-logo .logo-img {
  width: 24.155vw;
  height: auto;
}

.ec-items-logo-inner {
  margin-left: 3.623vw;
  font-size: 2.899vw;
  line-height: 1.25;
}

.ec-items-model-size {
  padding: 1.208vw 1.691vw;
  font-size: 2.899vw;
  border: 1px solid #666;
  border-radius: 0.604vw;
}

.ec-items-info-wrap {
  position: relative;
  padding: 7.246vw 4.831vw 6.039vw;
}

.ec-items-price-wrap {
  display: flex;
}

.ec-items-price-wrap .ec-items-price-box.discount .price,
.ec-items-price-wrap .ec-items-price-box.discount .yen {
  font-weight: bold;
}
.ec-items-price-wrap .ec-items-price-box.discount {
  color: #ee0000;
  min-width: 43.478vw;
}

.ec-items-discount {
  position: absolute;
  bottom: 7.246vw;
  right: 0;
  width: 22.222vw;
  padding: 0.725vw;
  text-align: center;
  font-size: 3.382vw;
  line-height: 1;
  font-weight: bold;
  color: #fff;
  background-color: #ee0000;
  border-radius: 2.899vw;
}

.ec-items-discount .main {
  font-size: 4.348vw;
}

/* 価格 */
.ec-items-price-box {
  position: relative;
  line-height: 1;
}
.ec-items-price-box + .ec-items-price-box {
  padding-left: 5.43478vw;
}
.ec-items-price-box + .ec-items-price-box::before {
  content: "";
  position: absolute;
  bottom: 1.20773vw;
  left: 2.41546vw;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent transparent #ee0000;
  border-width: 1.20773vw 0px 1.20773vw 1.20773vw;
}

.ec-items-price-box .heading {
  font-size: 3.382vw;
  margin-bottom: 2.41546vw;
}

.ec-items-price-box .price {
  font-size: 5.55556vw;
}

.ec-items-price-box .yen {
  font-size: 3.865vw;
}

.ec-items-price-box .tax {
  font-size: 2.899vw;
}

/* オープン価格の場合 */
.ec-items-price-wrap02 {}

.ec-items-price-wrap02 .ec-items-price-box.discount .price,
.ec-items-price-wrap02 .ec-items-price-box.discount .yen {
  font-weight: bold;
}
.ec-items-price-wrap02 .ec-items-price-box.discount {
  color: #ee0000;
}

.ec-items-price-wrap02 .ec-items-price-box {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.ec-items-price-wrap02 .ec-items-price-box .heading {
  margin-bottom: 0;
  margin: 0 2.41546vw 0.725vw 0;
}


/* 合計 */
.ec-items-total-box {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  line-height: 1;
}

.ec-items-total-box .heading {
  margin-right: 1.208vw;
  font-size: 3.382vw;
}

.ec-items-total-box .price {
  font-size: 8.696vw;
  font-weight: bold;
}

.ec-items-total-box .yen {
  font-size: 3.865vw;
  font-weight: bold;
}

.ec-items-total-box .tax {
  font-size: 2.899vw;
}

.ec-items-total-box .price,
.ec-items-total-box .yen,
.ec-items-total-box .tax {
  color: #ee0000;
}


/* ラベル */
.ec-items-label-wrap {
  width: 45.894vw;
  padding: 2.174vw;
  border: 1px solid #ccc;
  border-radius: 1.691vw;
}

.ec-items-label {
  display: flex;
  flex-wrap: wrap;
  gap: 0.725vw;
  margin-bottom: 2.415vw;
}

.ec-items-label li {
  width: 20.048vw;
}

.ec-items-ico {
  display: flex;
  flex-wrap: wrap;
  gap: 1.208vw 0.966vw;
}

.ec-items-ico img {
  width: auto;
  height: 5.314vw;
}

/* 商品画像スライダー　割引率
----------------------- */
.discount-balloon {
  position: absolute;
  top: 36.715vw;
  left: 2.899vw;
  z-index: 1;
  width: 32.85vw;
  height: 32.85vw;
  padding-top: 5.314vw;
  font-style: oblique;
  text-align: center;
  line-height: 1;
  background: url('/sp/images/items/detail/img_discount_balloon.png') no-repeat 0 0 / contain;
}

.discount-balloon-ttl {
  display: block;
  padding-right: 0.725vw;
  font-size: 3.865vw;
  font-weight: bold;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0px 2px 1px #e80000, 0px 2px 1px #e80000, 2px 2px 1px #e80000, 2px 0px 1px #e80000, 2px 0px 1px #e80000, 2px -2px 1px #e80000, 2px -2px 1px #e80000, 0px -2px 1px #e80000, -2px -2px 1px #e80000, -2px -2px 1px #e80000, -2px -2px 1px #e80000, -2px 0px 1px #e80000, -2px 2px 1px #e80000, -2px 2px 1px #e80000, 4px 5px 0 #c10000;
}

.discount-balloon-number,
.discount-balloon-off  {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 7.246vw;
  font-weight: 600;
  transform: scaleX(1.1); /* テキストを少し横長に */
  letter-spacing: 0.02em;
  color: #ffe400;
  text-shadow: 0 0 3px #e80000,0 0 3px #e80000,0 0 3px #e80000,0 0 3px #e80000,0 0 3px #e80000,0 0 3px #e80000,0 0 3px #e80000,0 0 3px #e80000,0 0 3px #e80000,0 0 3px #e80000,0 0 3px #e80000,0 0 3px #e80000,0 0 3px #e80000,0 0 3px #e80000,0 0 3px #e80000,0 0 3px #e80000,4px 5px 0 #c10000;
}

.discount-balloon-off {
  padding-right: 1.208vw;
}

.discount-balloon-number .main {
  font-size: 10.628vw;
}

/* 一覧　商品画像　割引率（微調整） */
.ec-items-pic .discount-balloon {
  position: absolute;
  top: 0;
  left: -2.415vw;
  transform-origin: top left;
  transform: scale(0.7);
}

/* ページネーション
----------------------- */
.pagination-list {
  display: flex;
  justify-content: center;
  margin-top: 9.662vw;
}

.pagination-item {
  width: 9.662vw;
  height: 9.662vw;
  margin: 0 0.725vw;
}

.pagination-item.previous {
  margin: 0 5.556vw 0 0;
}

.pagination-item.next {
  margin: 0 0 0 5.556vw;
}

.pagination-link {
  position: relative;
  display: grid;
  place-content: center;
  height: 100%;
  font-size: 3.865vw;
  font-weight: bold;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  color: #666;
  background-color: #fff;
  border: 1px solid #c7bcb8;
}

.previous .pagination-link,
.next .pagination-link {
  background-color: #c7bcb8;
}

.previous .pagination-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 3.865vw;
  width: 2.415vw;
  height: 2.415vw;
  border-left: 0.483vw solid #fff;
  border-bottom: 0.483vw solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

.next .pagination-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2.899vw;
  width: 2.415vw;
  height: 2.415vw;
  border-left: 0.483vw solid #fff;
  border-bottom: 0.483vw solid #fff;
  transform: translateY(-50%) rotate(225deg);
}

.pagination-link:hover {
  opacity: 1;
  background-color: #ede8e6;
}

.previous .pagination-link:hover,
.next .pagination-link:hover {
  opacity: 1;
  background-color: #9f9693;
}

.pagination-item.disabled {
  pointer-events: none;
  opacity: 0.3;
}

.pagination-item.active .pagination-link {
  background-color: #ede8e6;
}

/* 0商品の場合
----------------------- */
.ec-no-items {
  padding: 4.831vw 0;
}

.ec-no-items p {
  font-size: 3.382vw;
  line-height: 2;
  text-align: center;
}

/* 並び替えメニュー
----------------------- */
.ec-search-menu {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #ede8e6;
  transform: translateX(100%);
  transition: transform .4s ease;
  -webkit-overflow-scrolling: touch;
}

.ec-search-menu.open {
  transform: translateX(0);
}

.ec-search-menu-head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 6.522vw 12.077vw;
  background-color: #ede8e6;
  border-bottom: 1px solid #666;
}

.ec-search-menu-ttl {
  font-size: 5.072vw;
  line-height: 1.2;
  text-align: center;
}

.ec-search-menu-close {
  position: absolute;
  top: 5.314vw;
  right: 2.415vw;
  display: grid;
  place-content: center;
  width: 8.454vw;
  height: 8.454vw;
  border-radius: 50%;
  background-color: #ede8e6;
  border: 1px solid #a2a2a2;
}

.ec-search-menu-close img {
  width: 2.657vw;
}

.ec-search-menu-sort {
  padding: 10.87vw 2.415vw 0;
}

.ec-search-menu-sort li + li {
  margin-top: 7.729vw;
}

/* 並び替え　ラジオボタン */
.ec-search-sort-input { display: none;}

.ec-search-sort-label {
  position: relative;
  display: block;
  padding: 9.179vw 6.039vw 7.971vw 13.285vw;
  font-size: 4.589vw;
  cursor: pointer;
  background-color: #fff;
  border: 0.483vw solid #fff;
  border-radius: 3.623vw;
  box-shadow: 0 0 0 1px #d9d3d0;
}

.ec-search-sort-label .txt {
  display: block;
}

.ec-search-sort-label .balloon {
  position: absolute;
  top: -4.106vw;
  left: 12.802vw;
  padding: 1.932vw 5.072vw;
  font-size: 3.382vw;
  line-height: 1;
  font-feature-settings: "palt";
  border-radius: 3.623vw;
  color: #fff;
  background-color: #ee0000;
}

.ec-search-sort-input + .ec-search-sort-label::before {
  content: "";
  display: block;
  position: absolute;
  top: 1.208vw;
  bottom: 0;
  left: 6.039vw;
  margin: auto;
  width: 4.831vw;
  height: 4.831vw;
  border: 1px solid #a2a2a2;
  border-radius: 50%;
  background-color: #fff;
}

.ec-search-sort-input:checked + .ec-search-sort-label {
  border: 0.483vw solid #ee0000;
  box-shadow: none;
}

.ec-search-sort-input:checked + .ec-search-sort-label::before {
  border: 1px solid #ee0000;
}

.ec-search-sort-input:checked + .ec-search-sort-label::after {
  content: "";
  display: block;
  position: absolute;
  top: 1.208vw;
  bottom: 0;
  left: 7.005vw;
  margin: auto;
  width: 2.899vw;
  height: 2.899vw;
  border-radius: 50%;
  background-color: #ee0000;
}

/* 絞り込みメニュー
----------------------- */
.ec-search-menu-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.ec-search-menu-body {
  height: calc(100% - 40.338vw);
  overflow-y: auto;
  margin-top: 19.324vw;
}

.ec-search-menu-headline {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 2.415vw 4.348vw;
  font-size: 3.382vw;
  line-height: 1;
  background-color: #d9d3d0;
}

.ec-search-menu-what {
  display: grid;
  place-content: center;
  width: 4.589vw;
  height: 4.589vw;
  margin-left: 2.415vw;
  font-size: 2.899vw;
  line-height: 2.899vw;
  font-weight: bold;
  color: #938e8b;
  background-color: #fff;
  border: 1px solid #a2a2a2;
  border-radius: 50%;
  cursor: pointer;
}

.ec-search-menu-notes {
  margin-left: 1.208vw;
  font-size: 2.415vw;
}

.ec-search-menu-narrow {
  display: flex;
  flex-wrap: wrap;
  gap: 1.208vw;
  padding: 3.623vw 2.415vw 7.246vw;
}

.ec-search-narrow-input { display: none;}

.ec-search-narrow-label {
  position: relative;
  display: block;
  padding: 2.899vw 4.831vw;
  font-size: 3.14vw;
  line-height: 1;
  cursor: pointer;
  color: #938e8b;
  background-color: #fff;
  border: 1px solid #d9d3d0;
  border-radius: 4.831vw;
}

.ec-search-narrow-label .txt {
  display: block;
}

.ec-search-narrow-input:checked + .ec-search-narrow-label {
  color: #fff;
  border: 1px solid #938e8b;
  background-color: #938e8b;
}


/* クリア・検索ボタン
----------------------- */
.ec-search-menu-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 0 2.415vw;
  padding: 3.623vw 0;
  background-color: #ede8e6;
  border-top: 1px solid #666;
}

.ec-search-clear-btn,
.ec-search-narrow-btn {
  width: 43.961vw;
  padding: 4.348vw 0;
  font-size: 3.865vw;
  color: #666;
  background-color: #ede8e6;
  border: 1px solid #d9d3d0;
  border-radius: 6.763vw;
}

.ec-search-narrow-btn {
  color: #fff;
  background-color: #ee0000;
  border: 1px solid #be0000;
}

.ec-search-narrow-btn:disabled {
  color: #fff;
  background-color: #a3a3a3;
  border: 1px solid #7c7c7c;
}

/* モーダル
----------------------- */
.modal {
  display: none;
  position: fixed;
  top: 0;
  height: 100svh;
  width: 100%;
  z-index: 10000;
}

.modal-bg {
  position: absolute;
  height: 100svh;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95.169vw;
  background-color: #fff;
  border-radius: 3.623vw;
  overflow: scroll; /* はみ出た部分はスクロールさせる */
}

.narrow-modal-head {
  position: relative;
  padding: 4.106vw 12.077vw;
  border-bottom: 1px solid #666;
}

.narrow-modal-ttl {
  font-size: 5.072vw;
  line-height: 1.2;
  font-weight: bold;
  text-align: center;
}

.narrow-modal-close {
  position: absolute;
  top: 3.623vw;
  right: 2.415vw;
  display: grid;
  place-content: center;
  width: 7.246vw;
  height: 7.246vw;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #a2a2a2;
}

.narrow-modal-close img {
  width: 2.415vw;
}

.narrow-modal-list li {
  display: flex;
  align-items: flex-start;
  gap: 0 4.831vw;
  padding: 4.831vw 0;
}

.narrow-modal-list li + li {
  border-top: 1px solid #ccc;
}

.narrow-modal-list-img {
  width: 26.57vw;
  flex-shrink: 0;
  margin-top: 1.208vw;
}

.narrow-modal-body {
  padding: 2.415vw 4.831vw;
}

.narrow-modal-list-inner {
}

.narrow-modal-list-headline {
  margin-bottom: 0.725vw;
  font-size: 3.623vw;
  line-height: 1.4;
  font-feature-settings: "palt";
  font-weight: bold;
}

.narrow-modal-list-txt {
  padding-right: 2.415vw;
  font-size: 3.382vw;
  line-height: 1.5;
}

.narrow-modal-notes {
  margin-bottom: 4.831vw;
  padding: 2.899vw 3.623vw;
  border-radius: 1.208vw;
  background-color: #fff;
  border: 1px solid #666;
}

.narrow-modal-notes p {
  font-size: 3.382vw;
  line-height: 1.5;
}


/* ==========================================================================
   # 商品詳細
============================================================================= */
/* 見出し1 */
.ec-headline01 {
  position: relative;
  margin-bottom: 7.246vw;
  padding: 6.039vw 4.831vw;
  font-weight: bold;
  font-size: 5.072vw;
  line-height: 1.43;
  text-align: center;
  color: #fff;
  background-color: #493d2a;
}
.ec-headline01::before {
  content: "";
  position: absolute;
  bottom: -1.691vw;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.932vw 1.812vw 0 1.812vw;
  border-color: #493d2a transparent transparent transparent;
}
/* 見出し2 */
.ec-headline02 {
  position: relative;
  margin: 9.662vw 0 3.623vw;
  padding: 0.725vw 2.415vw;
  font-weight: bold;
  font-size: 4.348vw;
  line-height: 1.4;
  border-left: 0.725vw solid #ee0000;
}
/* 見出し3 */
.ec-headline03 {
  position: relative;
  width: 95.169vw;
  margin: 0 auto 3.623vw;
  padding: 3.623vw 2.415vw;
  font-weight: bold;
  text-align: center;
  font-size: 4.348vw;
  line-height: 1.4;
  color: #104b29;
  border-top: 0.362vw solid #104b29;
  border-bottom: 0.362vw solid #104b29;
}
.ec-headline03 .point {
  color: #25a55c;
}
.ec-headline03::before {
  content: "";
  position: absolute;
  bottom: -2.657vw;
  left: 50%;
  width: 2.657vw;
  height: 2.657vw;
  background: url('/sp/images/top_v2/recommend/img_ttl_line.png') no-repeat 0 0 / contain;
}


/* # 商品名・スライド部分
-------------------------------------------------------------------- */
.l-ec-slide {
  margin-bottom: 12.077vw;
}

/* 商品画像スライダー
----------------------- */
.ec-slide {
  position: relative;
  margin: 0 auto 3.623vw;
  padding: 0;
  width: 95.169vw;
}
.ec-slide .item {
  position: relative;
  height: 100%;
}
.ec-slide .item::before {
  content: "";
  position: relative;
  display: block;
  padding-top: 95.169vw;
  overflow: hidden;
}
.ec-slide .item img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 100%;
}
.ec-slide > .slick-list,
.ec-slide > .slick-list > .slick-track,
.ec-slide > .slick-list > .slick-track > .slick-slide {
  position: relative;
  height: 100%;
}

/* slide-nav */
.ec-slide-nav {
  margin: 0 10.628vw 7.246vw!important;
}
.ec-slide-nav-block {
  position: relative;
  padding: 0;
  display: flex!important;
  flex-wrap: wrap;
  gap: 1.208vw 1.449vw;
}
.ec-slide-nav-block .item {
  position: relative;
  width: 14.493vw;
  height: 14.493vw;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid #ccc;
}
.ec-slide-nav-block .item::before {
  content: "";
  display: block;
}
.ec-slide-nav-block .item img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  margin: auto;
}
.ec-slide-nav-block .current::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #ee0000;
}
/* ボタン */
.ec-slide-nav .slick-prev,
.ec-slide-nav .slick-next {
  content: "";
  width: 7.246vw;
  height: 7.246vw;
  background-color: #000;
  border-radius: 50%;
}
.ec-slide-nav .slick-prev::before,
.ec-slide-nav .slick-next::before {
  font-size: 0;
  display: block;
  width: 1.691vw;
  height: 1.691vw;
  border-bottom: 0.483vw solid #e0e0e0;
  border-right: 0.483vw solid #e0e0e0;
}
.ec-slide-nav .slick-prev {
  left: -9.179vw;
}
.ec-slide-nav .slick-prev::before {
  transform: rotate(135deg);
  margin-left: 3.14vw;
}
.ec-slide-nav .slick-next {
  right: -9.179vw;
}
.ec-slide-nav .slick-next::before {
  transform: rotate(-45deg);
  margin-left: 2.657vw;
}
/* ドット */
.ec-slide-nav .slick-dots {
  bottom: -6.039vw;
}
.ec-slide-nav .slick-dots li {
  margin: 0;
  width: 4.831vw;
  height: 4.831vw;
}
.ec-slide-nav .slick-dots li button {
  width: 2.415vw;
  height: 2.415vw;
  padding: 2.415vw;
}
.ec-slide-nav .slick-dots li button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 2.415vw;
  height: 2.415vw;
  line-height: 1;
  background-color: #c1bcba;
  opacity: .5;
  border-radius: 50%;
}
.ec-slide-nav .slick-dots li.slick-active button:before {
  opacity: 1;
}


/* 商品名
----------------------- */
.l-ec-items-detail {
  padding: 0 4.831vw 9.662vw;
  border-bottom: 1px solid #666;
}
.ec-item-name {
  margin-bottom: 4.831vw;
  font-size: 4.348vw;
  line-height: 1.5;
}

/* ラベル
----------------------- */
.ec-items-detail-label {
  display: flex;
  gap: 0 1.449vw;
  line-height: 1;
}

.ec-items-detail-label li {
  width: calc(100% / 5);
}

/* 機能アイコン
----------------------- */
.ec-items-detail-ico {
  display: flex;
  flex-wrap: wrap;
  gap: 1.208vw;
  margin-top: 2.657vw;
  line-height: 1;
}

.ec-items-detail-ico img {
  width: auto;
  height: 5.314vw;
}

/* # 価格詳細
-------------------------------------------------------------------- */
.l-ec-items-price {
  padding: 9.179vw 4.831vw;
}

.ec-price-box {
  position: relative;
  background-color: #fff;
  border: 1px solid #6f6662;
  border-radius: 1.208vw;
}

.ec-price-box-plus {
  margin: 2.415vw 0;
  line-height: 1;
  text-align: center;
}

.ec-price-box-plus-img {
  width: 5.314vw;
  height: auto;
}

.ec-price-box-headline {
  position: absolute;
  top: 3.382vw;
  left: -1.449vw;
  width: calc(100% + 2.899vw);
  padding: 1.691vw 0;
  font-size: 3.865vw;
  line-height: 1.3;
  text-align: center;
  font-weight: bold;
  color: #fff;
  background-color: #6f6662;
  z-index: 1;
}

.ec-price-box-headline::before {
  content: "";
  position: absolute;
  bottom: -1.208vw;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 1.208vw 1.208vw 0;
  border-color: transparent #000 transparent transparent;
}

.ec-price-box-headline::after {
  content: "";
  position: absolute;
  bottom: -1.208vw;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.208vw 1.208vw 0 0;
  border-color: #000 transparent transparent transparent;
}

.ec-price-box-head01 {
  position: relative;
  padding: 14.493vw 6.039vw 2.899vw;
  background-color: #f5f1ef;
  border-radius: 1.208vw 1.208vw 0 0;
}

.ec-price-box-head02 {
  position: relative;
  background-color: #f5f1ef;
  border-radius: 1.208vw 1.208vw 0 0;
}

.ec-price-box-head01::before,
.ec-price-box-head02::before {
  content: "";
  position: absolute;
  bottom: -2.415vw;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 2.657vw 2.415vw 0 2.415vw;
  border-color: #f5f1ef transparent transparent transparent;
}

.ec-price-box-table {
  width: 100%;
  font-size: 3.382vw;
  line-height: 1.2;
  border-collapse: collapse;
}

.ec-price-box-table,
.ec-price-box-table th,
.ec-price-box-table td {
  border: none;
}

.ec-price-box-table tr + tr {
  border-top: 1px solid #000;
}

.ec-price-box-table th {
  padding: 1.449vw 0;
  padding-left: 2.415vw;
  text-align: left;
  font-weight: normal;
}

.ec-price-box-table td {
  padding-right: 2.415vw;
  text-align: right;
}

.ec-price-box-table .main-price {
  font-weight: bold;
}

.ec-price-box-body {
  padding: 4.831vw 0;
  text-align: center;
  line-height: 1;
}

.ec-price-box-retail {
  margin-bottom: 3.623vw;
  font-size: 3.382vw;
}

.ec-price-box-retail .main-price {
  font-weight: bold;
  font-size: 4.589vw;
}

.ec-price-box-sale {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 4.831vw;
  font-size: 3.865vw;
  font-weight: bold;
}

.ec-price-box-sale::before {
  content: "";
  position: absolute;
  bottom: -3.382vw;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.691vw 1.691vw 0 1.691vw;
  border-color: #e80000 transparent transparent transparent;
}

.ec-price-box-sale .ttl {
  display: flex;
  align-items: center;
  padding: 0 2.899vw 0 4.831vw;
  border: 1px solid #ee0000;
  border-radius: 3.14vw 0 0 3.14vw;
}

.ec-price-box-sale .off {
  padding: 1.208vw 3.382vw;
  color: #fff;
  background-color: #ee0000;
  border-radius: 0 3.14vw 3.14vw 0;
}

/* オープン価格版 */
.ec-price-box-body-open {
  padding: 17.391vw 0 4.831vw;
  text-align: center;
  line-height: 1;
}
.ec-price-box-sale-open {
  position: relative;
  display: inline-block;
  margin-bottom: 4.831vw;
  padding: 0.966vw 4.831vw;
  font-size: 3.865vw;
  font-weight: bold;
  border: 1px solid #e9603a;
  border-radius: 3.14vw;
}

.ec-price-box-sale-open::before {
  content: "";
  position: absolute;
  bottom: -3.382vw;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.691vw 1.691vw 0 1.691vw;
  border-color: #e80000 transparent transparent transparent;
}


.ec-price-box-price {
  font-size: 3.865vw;
  color: #e80000;
}
.ec-price-box-price .main-price {
  font-size: 7.246vw;
}
.ec-price-box-price .main-txt {
  font-weight: bold;
}

.ec-price-box-notes {
  margin-top: 3.623vw;
  font-size: 2.899vw;
}

.ec-price-box-set {
  position: relative;
  width: 87.923vw;
  margin: -2.657vw 0 0 3.382vw;
  z-index: 2;
}

.ec-price-box-include {
  margin-bottom: 2.415vw;
  font-size: 3.865vw;
  font-weight: bold;
}

.ec-price-box-guarantee {
  margin-top: 3.623vw;
  padding: 0 2.415vw;
}


/* バリエーション
----------------------- */
.ec-types-box {
  padding: 4.831vw 4.831vw 6.039vw;
  background-color: #f5f1ef;
}

.ec-types-headline {
  margin-bottom: 3.623vw;
  text-align: center;
  font-size: 3.865vw;
  line-height: 1.5;
}

.ec-types-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2.415vw;
}

.ec-types-list li {
  width: calc(50% - 1.208vw);
}

.ec-types-btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 1.449vw 2.415vw;
  font-size: 3.865vw;
  line-height: 1.3;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #e9603a;
  background-color: #fff;
  border: 1px solid #e9603a;
  border-radius: 4.106vw;
}

.ec-types-btn.active {
  color: #fff;
  background-color: #e9603a;
}


/* # 価格合計
-------------------------------------------------------------------- */
.l-ec-items-price-total {
  position: relative;
  padding: 4.831vw 4.831vw 0;
}

.l-ec-items-price-total::before {
  content: "";
  position: absolute;
  top: -5.556vw;
  left: 50%;
  transform: translateX(-50%);
  width: 19.324vw;
  height: 7.005vw;
  background: url('/sp/images/items/detail/cta/img_arrow.png') no-repeat 0 0 /contain;
}

.ec-price-total-head {
  position: relative;
  margin-bottom: 4.106vw;
  padding: 1.932vw;
  font-size: 4.589vw;
  line-height: 1.25;
  text-align: center;
  font-weight: bold;
  background-color: #ffe934;
  border-radius: 1.208vw;
}
.ec-price-total-head::before {
  content: "";
  position: absolute;
  bottom: -2.415vw;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 2.657vw 2.657vw 0 2.657vw;
  border-color: #ffe934 transparent transparent transparent;
}

.ec-price-total-head .point {
  color: #e80000;
}

.ec-price-total-main {
  margin-bottom: 2.899vw;
  padding-bottom: 2.415vw;
  font-size: 4.589vw;
  text-align: center;
  line-height: 1;
  color: #e80000;
  border-bottom: 1px solid #aaa;
}
.ec-price-total-main .main-txt {
  font-weight: bold;
}
.ec-price-total-main .main-price {
  padding-left: 1.208vw;
  font-size: 9.662vw;
}

.ec-price-total-notes {
  padding: 0 2.415vw;
  font-size: 2.899vw;
  line-height: 1.5;
  color: #666;
}

/* 省エネ補助金について
----------------------- */
.l-ec-price-subsidy {
  margin-top: 4.106vw;
  border: 0.483vw solid #fff;
  border-radius: 5.314vw;
  overflow: hidden;
}

.l-ec-price-subsidy-ttl {
  position: relative;
}

.ec-price-subsidy-ttl {
  padding: 2.899vw;
  text-align: center;
  font-size: 3.865vw;
  line-height: 1.3;
  font-weight: bold;
  color: #fff;
}

.ec-price-subsidy-btn {
  position: absolute;
  top: 2.415vw;
  right: 4.831vw;
  width: 5.797vw;
  height: 5.797vw;
}

.ec-price-subsidy-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.623vw;
  height: 0.483vw;
  background-color: #fff;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: width .3s, left .3s;
}

.ec-price-subsidy-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.623vw;
  height: 0.483vw;
  background-color: #fff;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(-45deg);
  transition: width .3s, left .3s;
}

/* アコーディオン開閉時のアイコン */
.close .ec-price-subsidy-btn::before {
  width: 1.691vw;
  left: 2.415vw;
}
.close .ec-price-subsidy-btn::after {
  width: 1.691vw;
  left: 3.382vw;
}

.ec-price-subsidy-inner {
  display: none;
  padding: 4.831vw 4.831vw 7.246vw;
  background-color: #fff;
}

.ec-price-subsidy-catch {
  padding: 2.415vw 0;
  font-size: 3.865vw;
  line-height: 1.5;
  text-align: center;
  border: 1px solid #ccc;
}

.ec-price-subsidy-item {
  display: flex;
  padding: 3.623vw 0;
}

.ec-price-subsidy-item + .ec-price-subsidy-item {
  border-top: 1px solid #ccc;
}

.ec-price-subsidy-headline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 15.7vw;
  font-size: 2.899vw;
  text-align: center;
  line-height: 1.3;
  color: #fff;
  border-radius: 1.208vw;
  background-color: #25a55c;
}

.ec-price-subsidy-body {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.966vw 0;
}

.ec-price-subsidy-logo {
  width: 11.594vw;
  flex-shrink: 0;
}
.ec-price-subsidy-logo02 {
  float: right;
  width: 13.043vw;
}

.l-ec-price-subsidy-amount {
  width: 100%;
  margin-left: 2.415vw;
  line-height: 1;
}

.ec-price-subsidy-heading {
  margin-bottom: 1.691vw;
  font-size: 3.14vw;
}

.ec-price-subsidy-main {
  margin: 2.415vw 0 2.899vw;
  font-size: 4.831vw;
  font-weight: bold;
  color: #f14a01;
}

.ec-price-subsidy-amount {
  margin-bottom: 1.449vw;
  font-size: 5.797vw;
  font-weight: bold;
  color: #f14a01;
}

.ec-price-subsidy-amount .min {
  font-size: 3.865vw;
}

.ec-price-subsidy-notes {
  font-size: 2.415vw;
  color: #666;
}
.ec-price-subsidy-notes02 {
  font-size: 3.01932vw;
  line-height: 1.5;
  font-weight: bold;
  color: #f14a01;
  margin-top: 1.691vw;
}
.ec-price-subsidy-notes02 span {
  background: linear-gradient(transparent 50%, #fffc00 0%);
}
.ec-price-subsidy-subtxt {
  font-size: 2.657vw;
  line-height: 1;
  color: #666;
}
.ec-price-subsidy-txt01 {
  position: relative;
  padding-top: 4.831vw;
  margin-bottom: 2.415vw;
  font-size: 3.382vw;
  line-height: 1.7;
}
.ec-price-subsidy-txt01::before {
  content: "";
  position: absolute;
  top: -0.725vw;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4.348vw 9.662vw 0 9.662vw;
  border-color: #ffd800 transparent transparent transparent;
}
.ec-price-subsidy-txt02 {
  padding: 2.415vw 0;
  font-size: 3.865vw;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
  border: 1px solid #e80000;
}
.ec-price-subsidy-inner .point {
  color: #f14a01;
}

/* # 配送予定
-------------------------------------------------------------------- */
.l-ec-delivery-schedule {
  margin: 7.246vw 0;
  padding: 0 4.831vw;
  font-size: 3.382vw;
  line-height: 1.5;
}

.ec-delivery-schedule {
  font-weight: bold;
}

.ec-delivery-schedule .point {
  color: #e9603a;
}

.ec-delivery-schedule-notes {
  color: #666;
}


/* # お支払い方法
-------------------------------------------------------------------- */
.l-ec-payment {
  margin: 7.246vw 2.415vw 13.285vw;
  padding: 3.623vw 4.831vw;
  border: 0.483vw solid #ccc;
}

.ec-payment-ttl {
  margin-bottom: 3.623vw;
  padding-bottom: 2.415vw;
  font-size: 4.831vw;
  line-height: 1.5;
  text-align: center;
  border-bottom: 1px solid #5b5f5d;
}

.ec-payment-txt {
  margin-bottom: 3.623vw;
  padding: 0 1.208vw;
  font-size: 3.382vw;
  line-height: 1.75;
}

.ec-payment-img {
  margin-bottom: 4.831vw;
}

/* # 商品の魅力
-------------------------------------------------------------------- */
.l-ec-description {
  margin-top: 21.739vw;
  padding-bottom: 28.986vw;
  background-color: #ebe4d9;
}

.ec-description-inner {
  padding: 0 4.831vw 4.831vw;
}


/* 商品の魅力　キャラクターのいる見出し
----------------------- */
.ec-description-ttl {
  position: relative;
  margin: 0 2.415vw 7.971vw;
  padding: 14.976vw 0 0;
  font-size: 5.072vw;
  line-height: 1;
  text-align: center;
}

.ec-description-ttl span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ec-description-ttl span::before,.ec-description-ttl span::after {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: #988568;
}
.ec-description-ttl span::before {
  margin-right: 2.41546vw;
}
.ec-description-ttl span::after {
  margin-left: 2.41546vw;
}

.ec-description-ttl::before {
  content: "";
  position: absolute;
  top: -15.217vw;
  left: 50%;
  transform: translateX(-50%);
  width: 20.773vw;
  height: 25.362vw;
  background: url('/sp/images/items/detail/img_character01.png') no-repeat 0 0 / contain;
}

/* 見出し */
.ec-description-headline {
  position: relative;
  margin: 14.01vw 0 3.623vw;
  padding: 0.725vw 2.415vw;
  font-weight: bold;
  font-size: 4.348vw;
  line-height: 1.4;
  border-left: 0.725vw solid #ee0000;
}
.ec-description-headline::before {
  content: "";
  position: absolute;
  top: -7.246vw;
  left: 0;
  width: 100%;
  height: 0.242vw;
  background-color: #c2bbb8;
}
.ec-description-headline:first-child {
  margin-top: 0;
}
.ec-description-headline:first-child::before {
  content: none;
}

.ec-txt {
  margin-bottom: 6.763vw;
  padding: 0 1.208vw;
  font-size: 3.865vw;
  line-height: 1.8;
}

.ec-figure {
  margin-bottom: 4.831vw;
}

.ec-figure figcaption {
  margin-top: 2.415vw;
  padding: 0 1.208vw;
  font-size: 2.899vw;
  line-height: 1.5;
  color: #666;
}


/* もっと見る（折りたたみたい場合、手動でclassを付与する）
----------------------- */
.js-more-box {
  position: relative;
  height: 276.57vw;
  overflow: hidden;
}
/* コンテンツをグラデーションで隠す擬似要素 */
.js-more-box::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 48.309vw;
  transition: .6s;
  background: linear-gradient(to bottom, transparent 0%, #ebe4d9 100%);
}
/* コンテンツの開閉で非表示に */
.js-more-box.open::after {
  z-index: -1;
  opacity: 0;
}
/* もっと見るボタン */
.js-more-box-btn {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 1.932vw 4.106vw 1.932vw 0;
  font-size: 3.865vw;
  line-height: 1;
  text-decoration: underline;
  color: #261e15;
  border: 0;
  cursor: pointer;
  text-underline-offset: 0.966vw;
  text-decoration-thickness: 0.242vw;
}
.js-more-box-btn::before {
  content: "";
  position: absolute;
  top: 45%;
  right: 0;
  width: 1.691vw;
  height: 1.691vw;
  border-left: 1px solid #666;
  border-bottom: 1px solid #666;
  transform-origin: center;
  transform: rotate(-45deg) translateY(-50%);
}
.js-more-box-btn.active::before {
  transform: rotate(135deg);
}

/* # 商品の基本仕様
-------------------------------------------------------------------- */
/* 商品の基本仕様　キャラクターのいる見出し
----------------------- */
.ec-spec-ttl {
  position: relative;
  margin: 0 2.415vw 7.971vw;
  padding: 14.976vw 0 4.831vw;
  font-size: 5.072vw;
  line-height: 1;
  text-align: center;
}

.ec-spec-ttl span {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ec-spec-ttl span::before,.ec-spec-ttl span::after {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: #ccc;
}
.ec-spec-ttl span::before {
  margin-right: 2.41546vw;
}
.ec-spec-ttl span::after {
  margin-left: 2.41546vw;
}

.ec-spec-ttl::before {
  content: "";
  position: absolute;
  top: -15.217vw;
  left: 50%;
  transform: translateX(-50%);
  width: 20.773vw;
  height: 25.362vw;
  background: url('/sp/images/items/detail/img_character02.png') no-repeat 0 0 / contain;
}

.ec-spec-inner {
  padding: 0 4.831vw;
}

.ec-spec-item {
  margin-bottom: 7.246vw;
  border-bottom: 1px solid #c2bbb8;
}

.ec-spec-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

/* 見出し */
.ec-spec-headline {
  position: relative;
  margin-bottom: 3.623vw;
  padding: 0.725vw 2.415vw;
  font-weight: bold;
  font-size: 4.348vw;
  line-height: 1.4;
  border-left: 0.725vw solid #ee0000;
}

.ec-spec-table {
  margin-bottom: 7.246vw;
  font-size: 3.382vw;
  line-height: 1.5;
  border-collapse: collapse;
}

.ec-spec-table th,
.ec-spec-table td {
  padding: 1.932vw;
  border: 1px solid #c2bbb8;
}

.ec-spec-table th {
  width: 28%;
  font-weight: normal;
  text-align: left;
  background-color: #ede8e6;
}

/* # 注文ボタン
-------------------------------------------------------------------- */
.l-ec-order  {
  position: relative;
  margin: 0 0 8.454vw;
  padding: 3.623vw 4.831vw 0;
}

.ec-order-txt {
  width: 75.845vw;
  margin: 3.623vw auto 0;
  line-height: 1;
}

/* shopify　buybutton調整
----------------------- */
/* もとのbuybuttonを透過して非表示にする */
.ec-shopify-btn > div {
  max-width: 100% !important;
  opacity: 0 !important;
}

.ec-shopify-btn > div > iframe {
  height: 27.778vw !important;
}

/* 非表示にしたbuybuttonの上に疑似要素でボタン画像を表示 */
.ec-shopify-btn::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 8.454vw;
  left: 4.831vw;
  width: 90.338vw;
  height: 24.155vw;
  background: url('/sp/images/items/detail/cta/btn_order.png?v2') no-repeat 0 0 / contain;
  pointer-events: none; /* 下のbuybuttonを押せるようにする */
}


/* # 交換実績
-------------------------------------------------------------------- */
.l-ec-element {
  padding-bottom: 9.662vw;
  background: #f4d5a7 url('/images/lp/parts/bg_wood.jpg') repeat 0 0 / 203px 317px;
}

.ec-element-inner {
  margin: 0 2.415vw;
  padding: 4.831vw 4.831vw 2.415vw;
  background-color: #fff;
  border-radius: 2.415vw;
}

/* 見出し */
.ec-element-headline01 {
  position: relative;
  margin-bottom: 6.039vw;
  padding: 6.039vw 4.831vw;
  font-weight: bold;
  font-size: 5.072vw;
  line-height: 1.43;
  text-align: center;
  color: #fff;
  background-color: #493d2a;
}
.ec-element-headline01::before {
  content: "";
  position: absolute;
  bottom: -1.691vw;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.932vw 1.812vw 0 1.812vw;
  border-color: #493d2a transparent transparent transparent;
}

.ec-element-img {
  margin-bottom: 4.831vw;
}

.ec-element-txt {
  margin-bottom: 6.763vw;
  padding: 0 1.208vw;
  font-size: 3.865vw;
  line-height: 1.8;
}


/* # 3つの約束で安心・お得に
-------------------------------------------------------------------- */
.l-promise {
  padding: 17.391vw 2.415vw 4.831vw;
  background-color: #ee0000;
}

.promise-body {
  padding: 0 4.831vw 6.039vw;
  background-color: #fff;
  border-radius: 3.623vw;
}

/* キャラクターのいる見出し
----------------------- */
.promise-ttl {
  position: relative;
  margin: 0 0 3.623vw;
  padding: 14.976vw 0 0;
  font-size: 5.072vw;
  line-height: 1;
  text-align: center;
  color: #ee0000;
}

.promise-ttl span {
  display: flex;
  justify-content: center;
  align-items: center;
}
.promise-ttl span::before,.promise-ttl span::after {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: #ee0000;
}
.promise-ttl span::before {
  margin-right: 2.41546vw;
}
.promise-ttl span::after {
  margin-left: 2.41546vw;
}

.promise-ttl::before {
  content: "";
  position: absolute;
  top: -15.217vw;
  left: 50%;
  transform: translateX(-50%);
  width: 20.773vw;
  height: 25.362vw;
  background: url('/sp/images/items/detail/img_character03.png') no-repeat 0 0 / contain;
}

.promise-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4.831vw 1.208vw 6.039vw;
}

.promise-item + .promise-item {
  border-top: 1px solid #ccc;
}

.promise-headline {
  margin-bottom: 1.208vw;
  font-size: 5.072vw;
  line-height: 1.5;
  color: #b50000;
}

.promise-headline .point {
  background: linear-gradient(transparent 55%, #fffc00 0%);
}

.promise-txt {
  font-size: 4.106vw;
  line-height: 1.8;
}

.promise-txt .point {
  font-weight: bold;
  color: #e55f41;
}

/* # 第二種電気工事士がおうかがい、しっかり丁寧に工事します
-------------------------------------------------------------------- */
.l-merit {
  padding: 15.217vw 2.415vw 10.87vw;
  background-color: #ee0000;
}

.merit-body {
  padding: 0 4.831vw 6.039vw;
  background-color: #fff;
  border-radius: 3.623vw;
}

/* キャラクターのいる見出し
----------------------- */
.merit-ttl {
  position: relative;
  margin: 0 0 3.623vw;
  padding: 14.976vw 0 0;
  font-size: 5.072vw;
  line-height: 1;
  text-align: center;
  color: #ee0000;
}

.merit-ttl span {
  display: flex;
  justify-content: center;
  align-items: center;
}
.merit-ttl span::before,.merit-ttl span::after {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: #ee0000;
}
.merit-ttl span::before {
  margin-right: 2.41546vw;
}
.merit-ttl span::after {
  margin-left: 2.41546vw;
}

.merit-ttl::before {
  content: "";
  position: absolute;
  top: -15.217vw;
  left: 50%;
  transform: translateX(-50%);
  width: 20.773vw;
  height: 25.362vw;
  background: url('/sp/images/items/detail/img_character04.png') no-repeat 0 0 / contain;
}


.merit-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3.623vw 1.208vw;
}

.merit-item + .merit-item {
  border-top: 1px solid #ccc;
}

.merit-txt {
  font-size: 3.865vw;
  line-height: 1.8;
}

.merit-img {
  width: 27.053vw;
  flex-shrink: 0;
}

/* ==========================================================================
   # 商品詳細（廃盤ver）
============================================================================= */
.l-ec-items-detail-haiban {
  padding: 0 4.831vw 9.662vw;
  margin-bottom: 14.493vw;
}

/* スライド無し、一枚画像 */
.l-ec-item-img {
  margin: 0 auto 6.039vw;
  width: 95.169vw;
}

.ec-item-note {
  margin-bottom: 3.623vw;
  padding: 3.382vw 4.831vw;
  font-size: 4.348vw;
  font-weight: bold;
  text-align: center;
  line-height: 1.6;
  font-feature-settings: "palt";
  background-color: #ede8e6;
  border-radius: 1.208vw;
}

.ec-successor-btn {
  display: block;
}

/* おすすめ商品
----------------------- */
.ec-recommend-bnr {
  display: block;
}


/* ==========================================================================
   # エコキュート関連商品（静的ページ）
============================================================================= */
/* # 一覧ページ
-------------------------------------------------------------------- */
.l-ec-option {
  margin-bottom: 14.493vw;
}

.ec-option-inner {
  padding: 0 4.831vw;
}

.ec-option-table {
  width: 100%;
  margin-bottom: 8.454vw;
  border-collapse: collapse;
  font-size: 2.899vw;
  line-height: 1.5;
}

.ec-option-table th,
.ec-option-table td {
  padding: 2.415vw;
  border: 1px solid #c2bbb8;
}

.ec-option-table th {
  font-weight: normal;
  white-space: nowrap;
  background-color: #ede8e6;
}

.ec-option-table td {
  word-break: break-all;
}

.ec-option-table .model-number {
  white-space: nowrap;
}

.ec-option-table a {
  color: inherit;
}

/* # 詳細ページ
-------------------------------------------------------------------- */
.l-ec-option-img {
  margin: 0 auto 6.039vw;
  width: 95.169vw;
}

.l-ec-option-detail {
  padding: 0 4.831vw 9.662vw;
  border-bottom: 1px solid #666;
}
.ec-option-name {
  margin-bottom: 4.831vw;
  font-size: 4.348vw;
  line-height: 1.5;
}

/* 価格 */
.l-ec-option-price {
  margin-bottom: 4.831vw;
  line-height: 1;
  font-size: 3.865vw;
}
.ec-option-price-head {
  margin-bottom: 2.415vw;
}
.ec-option-price-txt .main-txt {
  font-weight: bold;
}
.ec-option-price-txt .main-price {
  font-size: 7.246vw;
}

/* 注釈 */
.ec-option-notes {
  font-size: 3.382vw;
  line-height: 1.5;
  color: #666;
}

/* 対応エコキュート一覧
----------------------- */
.l-ec-option-compatible {
  padding: 9.179vw 4.831vw 0;
}

.ec-option-compatible-txt {
  margin-bottom: 4.831vw;
  font-size: 3.865vw;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
  color: #6f6662;
}

.ec-option-compatible-box {
  position: relative;
  margin-bottom: 4.831vw;
  padding: 16.908vw 7.971vw 7.246vw;
  background-color: #ede8e6;
  border: 1px solid #6f6662;
  border-radius: 1.208vw;
}

.ec-option-compatible-ttl {
  position: absolute;
  top: 3.382vw;
  left: -1.449vw;
  width: calc(100% + 2.899vw);
  padding: 1.691vw 0;
  font-size: 3.865vw;
  line-height: 1.3;
  text-align: center;
  font-weight: bold;
  color: #fff;
  background-color: #6f6662;
  z-index: 1;
}

.ec-option-compatible-ttl::before {
  content: "";
  position: absolute;
  bottom: -1.208vw;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 1.208vw 1.208vw 0;
  border-color: transparent #000 transparent transparent;
}

.ec-option-compatible-ttl::after {
  content: "";
  position: absolute;
  bottom: -1.208vw;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.208vw 1.208vw 0 0;
  border-color: #000 transparent transparent transparent;
}

.ec-option-compatible-list {
  font-size: 3.382vw;
  line-height: 1.5;
}

.ec-option-compatible-list li + li {
  margin-top: 1.932vw;
}

.ec-option-compatible-list a {
  color: #333;
}

.ec-option-compatible-list a::before {
  content: "・";
}



/* ==========================================================================
  # 地域ページ
  ========================================================================== */
.l-breadcrumb.area {
  border-bottom: 1px solid #ccc;
}
.point-txt01 {
  font-weight: bold;
  color: #e55f41;
}

.area-headline {
  font-size: 4.8vw;
  line-height: 1.5;
  margin: 8vw 5.333vw 0;
  padding-bottom: 5.333vw;
  border-bottom: 1px solid #888;
}
.area-mainimg {
  position: relative;
}
.area-mainimg-txt {
  position: absolute;
  display: inline-block;
  top: 7.333vw;
  left: 5.333vw;
  font-size: 4.267vw;
  line-height: 1;
  text-align: center;
  font-weight: bold;
  color: #fff;
  padding: 2.133vw 5.333vw;
  background-color: #0c5cc1;
  border-radius: 4vw;
}
.area-mainimg-txt::before {
  content: "";
  position: absolute;
  bottom: -1.333vw;
  left: 13.333vw;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #0c5cc1 transparent transparent transparent;
  border-width: 1.333vw 1.333vw 0px 1.333vw;
}
.area-mainimg-txt span {
  color: #ffe65b;
}

.area-contents-main {
  display: block;
  padding: 0 5.333vw;
}
.l-area-contents {
  padding-bottom: 13.333vw;
}
.area-heading03 {
  position: relative;
  margin: 12vw 0 6.667vw;
  padding: 0.533vw 0 0.533vw 2.133vw;
  font-size: 4.8vw;
  line-height: 1.5;
  border-left: 3px solid #ee0000;
}
.area-heading04 {
  font-size: 4.533vw;
  line-height: 1;
  color: #25815c;
  font-weight: bold;
  padding: 2.667vw 1.333vw;
  margin: 5.333vw 0 2.667vw;
  border-bottom: 1px solid #25815c;
}
.area-contents-wrap {
  margin: 0 5.333vw;
}
.area-contents-wrap + .area-contents-wrap {
  margin-top: 10.667vw;
  border-top: 1px solid #aaa;
}
.area-subsidy-wrap {
  margin: 0 0 5.333vw;
  padding: 8vw 4vw;
  background-color: #ede8e5;
  border-radius: 2.667vw;
}
.area-subsidy-img {
  display: block;
  margin-bottom: 5.333vw;
}
.area-subsidy-txt {
  font-size: 3.733vw;
  line-height: 1.8;
  margin: 0 1.333vw;
}
.area-contents-txt {
  font-size: 4.267vw;
  line-height: 1.8;
  margin: 0 1.333vw;
}
.area-contents-txt + .area-contents-txt {
  margin-top: 4vw;
}
.area-contents-btn {
  position: relative;
  display: block;
  font-size: 3.73333vw;
  line-height: 1;
  color: #fff;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  background-color: #ee0000;
  margin-top: 5.333vw;
  padding: 8vw 2.667vw 8vw 0 ;
  border-radius: 1.333vw;
  box-shadow: 0 5px 0 #b80100;
}
.area-contents-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 3.3333vw;
  width: 0.65em;
  height: 0.65em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
  transform-origin: top right;
  box-sizing: border-box;
}
.area-subsidy-zeroemi {
  width: 24vw;
  float: right;
  margin: 2.667vw;
}

.area-list {
  padding: 3.6vw 0;
}
.area-list li {
  position: relative;
  font-size: 4.267vw;
  line-height: 1.5;
  color: #333;
  padding: 0 0 0 3.6vw;
  text-indent: -3.6vw;
}
.area-list li::before {
  content: "・";
  color: #ee0000;
}
.area-list li + li {
  margin-top: 2.667vw;
}
.area-contents-cap {
  font-size: 3.6vw;
  line-height: 1.8;
  margin: 0 1.333vw 4vw;
  color: #666;
}


/* 「キンキュートー」ならエリア出張費無料！ */
.area-city-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.area-city-list li {
  position: relative;
  width: 22.2vw;
  font-size: 3.6vw;
  line-height: 1.25;
  color: #333;
  padding: 2.667vw 0 2.667vw 3.6vw;
  text-indent: -3.6vw;
}
.area-city-list li::before {
  content: "・";
  color: #ee0000;
}
.area-contents-today {
  font-size: 6.133vw;
  line-height: 1.25;
  color: #333;
  text-align: center;
  font-weight: bold;
  padding: 5.333vw 0;
  margin-top: 5.333vw;
  border: 2px solid #ee0000;
}
.area-contents-today .point {
  color: #ee0000;
}
.area-contents-today .area-contents-today-subtxt {
  display: block;
  font-size: 3.2vw;
  line-height: 1;
  font-weight: normal;
  color: #666;
  margin-top: 2.667vw;
}

.area-subsidy {
  padding: 0 4.831vw;
  margin-bottom: 10.87vw;
}



/* # Google口コミ
-------------------------------------------------------------------- */
.l-review {
  margin-top: 12.07729vw;
}
.review-txt {
  font-size: 4.10628vw;
  line-height: 1.8;
  text-align: center;
  margin: 3.62319vw 0 6.03865vw;
}
.review-cap {
  font-size: 2.89855vw;
  line-height: 1;
  text-align: right;
  color: #888;
  margin: 0 6.03865vw 4.83092vw;
}
.review-list li {
  padding: 4.83092vw 0;
  border-top: 1px solid #ccc;
}
.review-btn {
  display: block;
  padding: 0 6.03865vw;
  margin-bottom: 0;
}
