@charset "UTF-8";
/**
* PC・SP版　両方で読み込んでいます
* ネイティブCSSで構築するのは困難になってきたので、
* SCSSに変換しました。
*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Shippori+Antique&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
/**
* デザイン上のモバイル版アートボードの横幅
* (ピクセル単位　単位無しの整数)
*/
/**
* モバイル時での1remのピクセル数
* (ピクセル単位　単位無しの整数)
*/
/*
「spVw()」の逆バージョン。
PCデザインを基準に、vwの値を決定する。
第2引数で、横幅の基準値を変更できる。
*/
/*
デザインデータのフォントサイズ等の横幅を、vwに変換する。
例えば横幅375pxのアートボード上の、16pxのフォントサイズは、「4.3vw」に変換される。
デザインデータのアートボードの横幅が変わった際には、
「$designWidthPx」の値をそれに変更。
変換対象の引数は整数で入力する。
*/
/**
* ピクセルheightをremに変換
* これを行う事で、ピクセルを直接指定する場合とは異なり、
* 画面横幅を縮めても、縦幅も均一に縮小される。
*/
/*
左右にmargin autoを付与する。
「margin: 0 auto;」でもよいのだが、topやbottomに干渉させたくなく、
意外と多様する事も多いため、こちらに作成。
*/
/**
モバイル状態で左右に余白があり、かつそれを無視して
100vw表示したい場合の左右余白の相殺
*/
/*
テキストの行数制限
最後は三点リーダーになる
*/
/*
文字グラデーション
*/
/**
WordPress記事の基本的スタイル
*/
/**
 * フレキシブルボックスの子要素の横幅を算出
 * 
 * 子要素の数と、gapの長さを指定するだけで、
 * 子要素の長さを、いい具合に自動算出する。
 *
 * $elementNum:　子要素の数
 * $gapWidth: gapの長さ　remなど単位は問わない
 */
/**
 * テキストに輪郭線を付ける
 * 
 * $color  色
 * $outlineWidth  線の幅px
 * $blur  ぼかしpx
 */
/**
 * マウスオーバーすると、光が横切るエフェクト
 * 使い方：付与したい要素の中に
 * <i class="luster"></i>
 * を入れるだけ。
 * この要素だけで完結しているので、対象の疑似要素を奪う心配もなし。
 * 要素全体に展開するが、pointer-events: none;により、
 * クリックイベントは貫通して、奥の要素のものが実行される。
 */
*:has(> i.luster) {
  position: relative;
}
*:has(> i.luster) i.luster {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}
*:has(> i.luster) i.luster:before {
  content: "";
  display: block;
  width: 150%;
  height: 100%;
  background: linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-150%);
  pointer-events: none;
}
*:has(> i.luster):hover i:before {
  transform: translateX(150%);
  transition: 0.75s;
}

/**
 * テキストを左側からフェードイン
 * $color テキストの色
 * $delay テキストに配色を開始するタイミング
 */
@keyframes textLeftIn__backmove {
  0% {
    background-position: center right;
  }
  100% {
    background-position: center left;
  }
}
/**
* ノートのような線を引くためのもの
* ループで行数を追加出来るようにしたかったが、それまではベタで作成。
*/
/** 
* カーニング処理
* Adobe XDにおけるカーニングの値はDTP基準なので、
* その数値をCSS向けに変換する。
* 文末となる右側にも、ネガティブマージンを付けて最後のスペースを相殺。
* 第２引数が「false」以外の場合、「letter-spacing」のみを出力。
*/
/**
* Adove XDの行送りの値から、line-heightの値を算出。
* $leading  XD上の文字送りの数値
* $fontPx   文字サイズ　XD上のピクセル数（pxなどの単位は無し）
*/
/**
* position: absolute; と、4方向座標指定が面倒なので作成。
* marginのショートハンド同様、1つの場合は全方向。
* 2つ入れれば縦・横に。
* 3つ入れれば上、左右、下の順で。
* 4つ入れれば上から時計回りに適用される。
*/
/**
* テキストの高さ半分ぐらいを覆う下線
* $color 下線の色
* $heightPercent 下から何％まで覆うか
*/
/**
* PC・SP版　両方で読み込んでいます
* ネイティブCSSで構築するのは困難になってきたので、
* SCSSに変換しました。
*/
:root {
  --area-color-kansai: #E50011;
  --area-color-kanto: #0059B2;
  --area-color-chubu: #0A8C00;
  --area-color-chugoku: #00BFBC;
  --area-color-shikoku: #3293EB;
  --area-color-hokuriku: #F0640F;
  --area-color-kyushu: #7A0BB7;
  --area-color-tohoku: #937200;
  --area-color-hokkaido: #365C40;
}

@media screen and (max-width: 599px) {
  br.pc {
    display: none;
  }
}

@media screen and (min-width: 600px) {
  br.sp {
    display: none;
  }
}

ul.breadcrumb {
  display: block;
  font-size: 12px;
}
ul.breadcrumb > li {
  display: inline !important;
  margin: 0 !important;
}
ul.breadcrumb > li a {
  margin: 0 !important;
}
ul.breadcrumb > li:not(:last-child) {
  margin: 0 3em 0 0 !important;
  position: relative;
}
ul.breadcrumb > li:not(:last-child):after {
  content: "＞";
  position: absolute;
  top: 0.25em;
  left: calc(100% + 1em);
}

body:has(#sb-site) ul.breadcrumb > li:not(:last-child):after {
  top: 0;
}

header .header_sub-title {
  float: left;
  font-weight: normal;
}
header .header_sub-title a {
  text-decoration: none;
}

.contact-banner-02 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  row-gap: 1rem;
  position: fixed;
  bottom: 1rem;
  left: 0;
  pointer-events: none;
}
.contact-banner-02 a {
  pointer-events: auto;
}

.double-half-banners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 599px) {
  .double-half-banners a {
    width: 100%;
  }
  .double-half-banners a img {
    width: 100%;
  }
}

.mb_other-footer-link {
  display: flex;
  flex-direction: column;
  max-width: 89.3vw;
  margin: 0 auto;
  padding-bottom: 2rem;
}
.mb_other-footer-link li a {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  padding-left: 1em;
  background-image: url(../common/com_arr02.png);
  background-position: left center;
  background-repeat: no-repeat;
}

@media screen and (max-width: 599px) {
  .sp-parent {
    max-width: 89.3vw;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

.page_banner {
  display: block;
  margin-bottom: 1rem;
}

.mobile-fixed-footer {
  --color-line: #00B800;
  --color-deep-line: #058104;
  --color-free-dial: #DE6E18;
  --color-deep-free-dial: #AB5919;
  --color-mail-contact: #0194E0;
  --color-deep-mail-contact: #006FA8;
  --color-free-estimate: #C11C08;
  --color-deep-free-estimate: #941404;
  --button-border-width: 1px;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9980;
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 0px 13px -3px #000000;
  padding: 0.5rem 0;
}
.mobile-fixed-footer > *, .mobile-fixed-footer > * :before, .mobile-fixed-footer > * :after {
  box-sizing: border-box;
}
.mobile-fixed-footer > ul {
  margin: 0 auto;
  max-width: 380px;
  width: 91.7vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 1vw 1%;
}
.mobile-fixed-footer > ul > li.banner-large {
  width: 100%;
}
.mobile-fixed-footer > ul > li.banner-large a img {
  width: 100%;
}
.mobile-fixed-footer > ul > li:not(.banner-large) {
  width: 49.4%;
}
.mobile-fixed-footer > ul > li:not(.banner-large).line {
  --back-color: var(--color-line);
  --back-color-deep: var(--color-deep-line);
}
.mobile-fixed-footer > ul > li:not(.banner-large).free-dial {
  --back-color: var(--color-free-dial);
  --back-color-deep: var(--color-deep-free-dial);
}
.mobile-fixed-footer > ul > li:not(.banner-large).mail-contact {
  --back-color: var(--color-mail-contact);
  --back-color-deep: var(--color-deep-mail-contact);
}
.mobile-fixed-footer > ul > li:not(.banner-large).free-estimate {
  --back-color: var(--color-free-estimate);
  --back-color-deep: var(--color-deep-free-estimate);
}
.mobile-fixed-footer > ul > li:not(.banner-large) a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  aspect-ratio: 170/45;
  width: 100%;
  position: relative;
  z-index: 10;
  transition: 0.5s;
}
.mobile-fixed-footer > ul > li:not(.banner-large) a:before, .mobile-fixed-footer > ul > li:not(.banner-large) a:after {
  content: "";
  display: block;
  width: 100%;
  height: calc(100% - 3px);
  border: solid var(--button-border-width) #000;
  border-radius: 0.8vw;
  position: absolute;
  left: 0;
  transition: 0.5s;
}
.mobile-fixed-footer > ul > li:not(.banner-large) a:before {
  background-color: var(--back-color);
  top: 0;
  z-index: -1;
}
.mobile-fixed-footer > ul > li:not(.banner-large) a:after {
  background-color: var(--back-color-deep);
  bottom: 0;
  z-index: -2;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
.mobile-fixed-footer > ul > li:not(.banner-large) a img {
  display: block;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  border: none !important;
  translate: 0.5s;
}
.mobile-fixed-footer > ul > li:not(.banner-large) a:hover {
  filter: brightness(1.2);
}
.mobile-fixed-footer > ul > li:not(.banner-large) a:hover:before {
  translate: 0 3px;
}
.mobile-fixed-footer > ul > li:not(.banner-large) a:hover img {
  translate: 0 3px;
  opacity: 1 !important;
}

/**
* PC・SP版　両方で読み込んでいます
* ネイティブCSSで構築するのは困難になってきたので、
* SCSSに変換しました。
*/
:root {
  --font-shippori: "Shippori Antique", sans-serif;
  --font-noto-sans: "Noto Sans JP", sans-serif;
}

/************************************************************************
* ○○○○（メーカー名）のエコキュート
*
*/
h1#ecocute-maker-header {
  color: #666;
  font-size: 11px;
}

/************************************************************************
* 家庭用蓄電池とは（新）2021
*/
.about-page p,
.about-page ul,
.about-page ol,
.about-page table,
.battery-maker-list .maker-wrapper p {
  line-height: 1.5;
}

.about-page table th,
.about-page table td {
  vertical-align: middle !important;
}

.about-page h2 {
  margin-bottom: 20px;
}

.about-page section {
  margin-bottom: 3em;
}

.about-page p.photo,
.battery-maker-list .maker-wrapper p.photo {
  margin: 2.5em 0;
  text-align: center;
}

.about-page #type #type-battery-wrapper {
  width: 100%;
  max-width: 738px;
  margin: 20px 0 0;
  overflow: hidden;
}

.about-page #type section {
  width: 48.65%;
  max-width: 360px;
  margin: 0;
  padding: 25px;
  border: 2px solid #ccc;
  box-sizing: border-box;
}

.about-page #type section#teichi-shiki {
  float: left;
}

.about-page #type section#idou-kanou {
  float: right;
}

.about-page #type section h3 {
  padding: 15px 0 11px;
  border-top: 1px solid #afafaf;
  border-bottom: 1px solid #afafaf;
  font-size: 24px;
  vertical-align: text-bottom;
}

.about-page #type section h3 span {
  margin-left: 0.5em;
  font-size: 16px;
}

.about-page #type section p {
  margin-top: 1em;
}

.about-page #type section p.image {
  margin-top: 2em;
  text-align: center;
}

.about-page #merit ol,
.about-page #demerit ol {
  counter-reset: number;
  padding: 20px;
  background: #f2f2f2;
}

.about-page #merit ol li,
.about-page #demerit ol li {
  margin-top: 20px;
  padding: 28px;
  background: #fff;
}

.about-page #merit ol li:first-child,
.about-page #demerit ol li:first-child {
  margin-top: 0;
}

.about-page #merit ol li h3,
.about-page #demerit ol li h3 {
  position: relative;
  padding-top: 26px;
  padding-left: 92px;
  padding-bottom: 8px;
  border-bottom: 2px solid #97000c;
  color: #97000c;
  font-size: 27px;
  line-height: 1.3;
}

.about-page #demerit ol li h3 {
  border-bottom: 2px solid #717171;
}

.about-page #merit ol li h3:after,
.about-page #demerit ol li h3:after {
  position: absolute;
  top: 4px;
  left: 0;
  display: inline-block;
  content: "メリット";
  color: #fff;
  font-size: 12px;
  text-align: center;
  width: 75px;
}

.about-page #demerit ol li h3:after {
  content: "デメリット";
}

.about-page #merit ol li h3:before,
.about-page #demerit ol li h3:before {
  counter-increment: number;
  content: counter(number);
  position: absolute;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-block;
  background: #97000c;
  color: #fff;
  font-size: 32px;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  line-height: 100px;
  text-align: center;
}

.about-page #demerit ol li h3:before {
  background: #717171;
}

.about-page #merit ol li h3 span,
.about-page #demerit ol li h3 span {
  position: absolute;
  top: 3px;
  left: 92px;
  color: #333;
  font-size: 16px;
}

.about-page #merit ol li h3 strong span,
.about-page #demerit ol li h3 strong span {
  position: static;
  display: inline-block;
  color: #97000c;
  font-size: 27px;
}

.about-page #merit ol li p,
.about-page #merit ol li ul,
.about-page #demerit ol li p,
#maker .maker-wrapper p {
  margin-top: 1.5em;
}

#about-battery #merit ol li p {
  padding-right: 176px;
}

#about-battery #merit ol li.merit01 p {
  background: url(images/merit01.png) top right no-repeat;
}

#about-battery #merit ol li.merit02 p {
  background: url(images/merit02.png) top right no-repeat;
}

#about-battery #merit ol li.merit03 p {
  background: url(images/merit03.png) top right no-repeat;
}

#about-battery #merit ol li.merit04 p {
  padding-right: 0;
}

#about-battery #merit ol li.merit04 p.image {
  text-align: center;
}

#about-battery #demerit ol li p {
  min-height: 184px;
  padding-right: 176px;
}

#about-battery #demerit ol li.demerit01 p {
  min-height: 0;
  padding-right: 0;
}

#about-battery #demerit ol li.demerit02 p {
  background: url(images/demerit02.png) top right no-repeat;
}

#about-battery #demerit ol li.demerit03 p {
  background: url(images/demerit03.png) top right no-repeat;
}

#about-battery #demerit ol li.demerit04 p {
  background: url(images/demerit04.png) top right no-repeat;
}

#about-battery #merit ol li ul li {
  padding: 0;
}

#about-battery #merit ol li ul li h4 {
  background: #f1eadc;
  padding: 10px 16px 8px;
  color: #0d5c2f;
  font-size: 18px;
}

#about-battery #merit ol li ul li p {
  margin: 1em 0 2em;
}

#about-battery #merit ol li ul li:last-child p {
  margin: 1em 0;
}

.about-page #merit ol li table,
.about-page #demerit ol li table,
.about-page #point ol li table,
.about-page #souba table {
  width: 100%;
  margin-top: 1.5em;
}

.about-page #merit ol li table th,
.about-page #merit ol li table td,
.about-page #demerit ol li table th,
.about-page #demerit ol li table td,
.about-page #point ol li table th,
.about-page #point ol li table td,
.about-page #souba table th,
.about-page #souba table td {
  width: 50%;
  padding: 0.75em;
  border: 1px solid #ccc;
  text-align: center;
  box-sizing: border-box;
}

.about-page #merit ol li table th span,
.about-page #merit ol li table td span,
.about-page #demerit ol li table th span,
.about-page #demerit ol li table td span,
.about-page #point ol li table th span,
.about-page #point ol li table td span,
.about-page #souba table th span,
.about-page #souba table td span {
  display: inline-block;
}

.about-page #merit ol li table th,
.about-page #demerit ol li table th,
.about-page #point ol li table th,
.about-page #souba table th {
  background: #0d5c2f;
  color: #fff;
  font-size: 16px;
}

.about-page #merit ol li table td,
.about-page #demerit ol li table td,
.about-page #point ol li table td,
.about-page #souba table td {
  font-size: 16px;
}

.about-page #demerit p.link-button {
  text-align: center;
}

.about-page #demerit p.link-button a {
  display: block;
  width: 250px;
  margin: 0;
  padding: 0.5em 1em;
  background: #e50011 center left 215px url(images/linkbutton_arrow.png) no-repeat;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
}

.about-page #demerit p.link-button a:hover,
.about-page #maker p.maker-link a:hover {
  opacity: 0.6;
  -ms-filter: "alpha( opacity=60 )";
  filter: alpha(opacity=60);
}

#maker .maker-wrapper h3 {
  padding: 0.75em 0.625em 0.5em;
  background: #f2f2f2 !important;
  border-bottom: 5px solid #0d5c2f;
  font-size: 28px;
  color: #0d5c2f;
}

.about-page #maker p.maker-link {
  width: 100%;
  text-align: center;
}

.about-page #maker p.maker-link a {
  display: inline-block;
  width: 100%;
  max-width: 416px;
  margin: 0 2em;
  padding: 0.75em 1.5em;
  background: #e50011;
  text-align: center;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 0 2px #900;
  transition: all 0.3s ease;
}

.about-page #point ol {
  counter-reset: number;
}

.about-page #point ol li {
  position: relative;
  margin-bottom: 20px;
  padding: 25px 30px 25px 40px;
  background: url(images/bg_point_hd.svg) 30px 25px no-repeat;
  border: 5px solid #c8d8e5;
  border-radius: 15px;
}

.about-page #point ol li h3 {
  margin-left: 70px;
  margin-bottom: 24px;
  padding-top: 0;
  padding-left: 12px;
  padding-bottom: 2px;
  border-left: 1px solid #000;
  color: #97000c;
  font-size: 28px;
  font-weight: bold;
  line-height: 1.3;
}

.about-page #point ol li h3 strong {
  display: block;
  margin-top: 2px;
}

.about-page #point ol li h3 span {
  display: inline-block;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
}

.about-page #point ol li h3:before {
  counter-increment: number;
  content: "0" counter(number);
  position: absolute;
  top: 51px;
  left: 31px;
  /*以下数字のデザイン変える*/
  display: inline-block;
  width: 60px;
  color: #000;
  font-size: 32px;
  text-align: center;
}

.about-page #point ol li table {
  margin-bottom: 1.5em;
}

.about-page #point ol li.point03 table th,
.about-page #point ol li.point03 table td {
  width: 33%;
}

.about-page #point ol li.point01 p,
.about-page #point ol li.point04 p,
.about-page #point ol li.point05 p,
.about-page #point ol li.point06 p {
  padding-right: 185px;
}

.about-page #point ol li.point01 p {
  background: url(images/point01.jpg) top right no-repeat;
}

.about-page #point ol li.point04 p {
  background: url(images/point04.jpg) top right no-repeat;
}

.about-page #point ol li.point05 p {
  background: url(images/point05.jpg) top right no-repeat;
}

.about-page #point ol li.point06 p {
  background: url(images/point06.jpg) top right no-repeat;
}

/************************************************************************
* 太陽光発電とは（新）2021
*/
#header .pvNv ul li a {
  width: 14.275%;
}

#about-ecopv #shikumi-ecopv ol {
  counter-reset: number;
  margin-bottom: 2em;
  padding-top: 22px;
  letter-spacing: -0.4em;
}

#about-ecopv #shikumi-ecopv ol li {
  position: relative;
  display: inline-block;
  width: 234px;
  margin-left: 19px;
  padding: 19px;
  padding-top: 32px;
  background: #f2f2f2;
  vertical-align: top;
  letter-spacing: normal;
}

#about-ecopv #shikumi-ecopv ol li:first-child {
  margin-left: 0;
}

.about-page #shikumi-ecopv ol li:before {
  counter-increment: number;
  content: counter(number);
  display: inline-block;
  position: absolute;
  top: -22px;
  left: 0;
  right: 0;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  background: #fd7808;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
}

.about-page #shikumi-ecopv ol li:after {
  position: absolute;
  top: 50%;
  right: -32px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  content: url(images/arrow_pv_shikumi.png);
  z-index: 99;
}

.about-page #shikumi-ecopv ol li:last-child:after {
  content: none;
}

#about-ecopv #shikumi-ecopv ol li h3 {
  padding-top: 0.625em;
  border-top: 1px solid #afafaf;
  color: #333;
  font-size: 18px;
}

#about-ecopv #shikumi-ecopv ol li p.image {
  margin: 1em 0;
}

#about-ecopv #merit ol li p {
  padding-right: 176px;
}

#about-ecopv #merit ol li.merit01 p,
#about-ecopv #merit ol li.merit07 p,
#about-ecopv #merit ol li.merit08 p {
  padding-right: 0;
}

#about-ecopv #merit ol li.merit02 p {
  background: url(images/pv_merit02.png) top right no-repeat;
}

#about-ecopv #merit ol li.merit03 p {
  background: url(images/pv_merit03.png) top right no-repeat;
}

#about-ecopv #merit ol li.merit04 p {
  background: url(images/pv_merit04.png) top right no-repeat;
}

#about-ecopv #merit ol li.merit05 p {
  min-height: 160px;
  background: url(images/pv_merit05.png) top right no-repeat;
}

#about-ecopv #merit ol li.merit06 p {
  background: url(images/pv_merit06.png) top right no-repeat;
}

#about-ecopv #merit ol li.merit09 p {
  background: url(images/pv_merit09.jpg) top right no-repeat;
}

#about-ecopv #merit ol li.merit10 p {
  background: url(images/pv_merit10.png) top right no-repeat;
}

#about-ecopv #merit p a {
  color: #e50011;
}

#about-ecopv #merit ol li a.link-banner {
  display: block;
  width: 100%;
  margin-top: 1.5em;
  color: transparent;
}

#about-ecopv #merit ol li h4,
#about-ecopv #souba h3 {
  background: #f1eadc;
  margin: 1em 0 0.75em;
  padding: 8px 16px 6px;
  color: #0d5c2f;
  font-size: 18px;
  line-height: 1.5;
}

#about-ecopv #merit ol li h5 {
  margin-bottom: 0.5em;
  color: #e50011;
  font-size: 18px;
}

#about-ecopv #merit table {
  margin-bottom: 1.5em;
}

#about-ecopv #merit table th span,
#about-ecopv #merit table td strong,
#about-ecopv #souba table th span,
#about-ecopv #souba table td strong {
  display: inline-block;
}

#about-ecopv #merit table td strong {
  margin-top: 0.25em;
  color: #e50011;
  font-size: 21px;
  line-height: 1.3;
}

#about-ecopv #merit li.merit08 table td strong:before {
  content: "（";
}

#about-ecopv #merit li.merit08 table td strong:after {
  content: "）";
}

#about-ecopv #merit p a,
#about-ecopv #souba p a {
  color: #e50011;
}

#about-ecopv #merit .note,
#about-ecopv #souba .note {
  font-size: 12px;
}

#about-ecopv #merit span.note {
  display: block;
  margin-top: 1.5em;
}

#about-ecopv #merit li.merit01 p.suushiki {
  margin: 2em auto 0.5em;
  letter-spacing: -0.4em;
  text-align: center;
}

#about-ecopv #merit li.merit01 p.suushiki span.denki-ryoukin,
#about-ecopv #merit li.merit01 p.suushiki span.kihon-ryoukin,
#about-ecopv #merit li.merit01 p.suushiki span.fukakin,
#about-ecopv #merit li.merit01 p.suushiki span.denryoku-ryoukin {
  position: relative;
  display: inline-block;
  margin-left: 24px;
  padding: 6px;
  letter-spacing: normal;
  border: 4px solid transparent;
  color: #333;
}

#about-ecopv #merit li.merit01 p.suushiki span.denki-ryoukin {
  margin-left: 0;
}

#about-ecopv #merit li.merit01 p.suushiki span.denki-ryoukin:after {
  position: absolute;
  top: 50%;
  right: -31px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  content: "=";
  font-size: 36px;
  z-index: 99;
}

#about-ecopv #merit li.merit01 p.suushiki span.fukakin:before {
  position: absolute;
  top: 50%;
  left: -34px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  content: "+";
  color: #333;
  font-size: 36px;
  z-index: 99;
}

#about-ecopv #merit li.merit01 p.suushiki span.denryoku-ryoukin:before {
  position: absolute;
  top: 50%;
  left: -26px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  content: "+";
  font-size: 36px;
  z-index: 99;
}

#about-ecopv #merit li.merit01 p.suushiki span.denryoku-ryoukin:after {
  position: absolute;
  top: 10px;
  right: 16px;
  content: "※";
  font-size: 16px;
  z-index: 99;
}

#about-ecopv #merit li.merit01 p.suushiki span.fukakin {
  border: 4px solid #e50011;
  color: #fff;
}

#about-ecopv #merit li.merit01 p.suushiki span span span {
  display: table-cell;
  width: 120px;
  height: 64px;
  padding-top: 4px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 1.2;
}

#about-ecopv #merit li.merit01 p.suushiki span.denki-ryoukin span {
  background: #ffe1e3;
}

#about-ecopv #merit li.merit01 p.suushiki span.kihon-ryoukin span {
  background: #c7e7c7;
}

#about-ecopv #merit li.merit01 p.suushiki span.fukakin span {
  background: #1a80b6;
}

#about-ecopv #merit li.merit01 p.suushiki span.denryoku-ryoukin span {
  background: #c7e7c7;
}

#about-ecopv #merit li.merit01 p.note {
  margin: 0.5em 0 2em;
  font-size: 14px;
  text-align: right;
}

#about-ecopv #merit ol li.merit07 p.zeh-image {
  margin: 2em 0;
  text-align: center;
}

#about-ecopv #demerit ol li p {
  padding-right: 176px;
}

#about-ecopv #demerit ol li.demerit01 p {
  background: url(images/pv_demerit01.png) top right no-repeat;
}

#about-ecopv #demerit ol li.demerit01 p.link-button {
  padding: 0;
  background: none;
}

#about-ecopv #demerit ol li.demerit02 p {
  background: url(images/pv_demerit02.png) top right no-repeat;
}

#about-ecopv #demerit ol li.demerit03 p {
  background: url(images/pv_demerit03.png) top right no-repeat;
}

#about-ecopv #demerit ol li.demerit04 p {
  background: url(images/pv_demerit04.png) top right no-repeat;
}

#about-ecopv #demerit ol li.demerit05 p {
  background: url(images/pv_demerit05.png) top right no-repeat;
}

#about-ecopv #souba h3 {
  margin-top: 1.5em;
}

#about-ecopv #souba table th,
#about-ecopv #souba table td {
  width: 33%;
}

#about-ecopv #souba table th {
  font-size: 18px;
}

#about-ecopv #souba p.note {
  margin: 1.5em 0 2em;
}

/************************************************************************
* エコキュート特価商品一覧
*/
.eq-tokka p.eq-tokka-banner {
  margin-bottom: 30px;
}

.eq-tokka p.eq-tokka-banner a img {
  display: block;
}

.eq-tokka p.eq-tokka-banner .bottom-message {
  display: inline-block;
  color: #E50011;
  font-weight: bold;
  font-size: 14px;
  text-align: left;
  margin-top: 1em;
  text-decoration: underline;
  text-decoration-color: #E50011;
  transition: 0.5s;
}

.eq-tokka p.eq-tokka-banner .bottom-message:after {
  content: "　≫";
  display: inline;
  color: #E50011;
  font-weight: bold;
}

.eq-tokka p.eq-tokka-banner a:hover .bottom-message {
  opacity: 0.5;
}

/************************************************************************
* 地域の豆知識
*/
#local-trivia {
  padding-bottom: 50px;
}

#local-trivia p {
  font-size: 15px;
  line-height: 1.5;
}

#local-trivia p strong {
  background: linear-gradient(transparent 80%, #ffea00 0%);
  font-weight: normal;
}

#local-trivia .text-wrapper {
  position: relative;
}

#local-trivia .text-wrapper .trivia {
  height: 80px;
  overflow: hidden;
  margin: 0;
  padding-bottom: 35px;
  text-align: justify;
  text-justify: inter-ideograph;
}

#local-trivia .text-wrapper .trivia.open {
  padding-bottom: 25px;
}

#local-trivia .text-wrapper p.show-more {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 35px 0 0;
  border: none;
  text-align: center;
  line-height: 35px;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 60%);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 60%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 60%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 60%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 60%);
  cursor: pointer;
  -webkit-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
  color: #2b4da0;
}

#local-trivia p {
  margin: 0;
}

#local-trivia .text-wrapper .trivia p {
  margin-bottom: 1.5em;
}

#local-trivia .text-wrapper .trivia p:last-child {
  margin-bottom: 0;
}

#local-trivia .text-wrapper p.active {
  background: none;
}

#local-trivia .text-wrapper p.show-more i {
  width: 1em;
  margin-right: 4px;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

#local-trivia .text-wrapper p.active i {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/************************************************************************
* エコキュート在庫状況
*/
.ecocute-zaiko-today {
  padding: 10px;
  background: #e50112;
}

.ecocute-zaiko-today h3 {
  margin: 0 !important;
  padding: 4px 0 12px !important;
  background: transparent !important;
  color: #f3fa00;
  font-size: 20px;
  text-align: center;
  line-height: 1.4;
}

.ecocute-zaiko-today dl {
  padding: 14px 16px;
  background: #f8d12c;
  overflow: hidden;
}

.ecocute-zaiko-today dl div {
  clear: both;
  margin-top: 1em;
}

.ecocute-zaiko-today dl div:first-child {
  margin-top: 0;
}

.ecocute-zaiko-today dl dt {
  float: left;
  width: 4.5em;
  padding: 0 0.5em;
  background: #000;
  color: #f8d12c;
  text-align: center;
  line-height: 22px;
}

.ecocute-zaiko-today dl dd {
  margin-left: 5em;
  padding-top: 1px;
  padding-left: 4px;
  line-height: 20px;
}

.ecocute-zaiko-today dl dd span {
  display: inline-block;
}

.ecocute-zaiko-today p {
  padding: 12px 0 1px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
}

.ecocute-zaiko-today h3 span,
.ecocute-zaiko-today p span {
  display: inline-block;
}

@media screen and (max-width: 480px) {
  .ecocute-zaiko-today p {
    font-size: 16px;
  }
}
@media screen and (max-width: 400px) {
  .ecocute-zaiko-today h3 {
    font-size: 18px;
  }
}
@media screen and (max-width: 370px) {
  .ecocute-zaiko-today h3 {
    font-size: 16px;
  }
  .ecocute-zaiko-today p {
    font-size: 15px;
  }
}
@media screen and (max-width: 360px) {
  .ecocute-zaiko-today dl dt {
    float: none;
  }
  .ecocute-zaiko-today dl dd {
    margin-left: 0;
    padding-top: 4px;
    padding-left: 2px;
  }
}
/************************************************************************
* SDGs
*/
#contents #totsugekitai-sdgs {
  line-height: 1.5;
  font-size: 16px;
}

#contents #totsugekitai-sdgs #sdgs-header,
#contents #totsugekitai-sdgs #about-sdgs ul,
#contents #totsugekitai-sdgs #kankyo-hairyo p,
#contents #totsugekitai-sdgs #hataraki-yasusa p,
#contents #totsugekitai-sdgs #shokuba-kouhei p {
  padding: 0 10px;
}

#contents #totsugekitai-sdgs #sdgs-header h1 {
  margin: 30px auto;
  text-align: center;
}

#contents #totsugekitai-sdgs #sdgs-header h1 img {
  max-width: 634px;
  width: 100%;
  height: auto;
}

#contents #totsugekitai-sdgs #sdgs-header p {
  margin: 40px auto 30px;
  text-align: center;
  font-size: 18px;
}

#contents #totsugekitai-sdgs ul li {
  padding-left: 1em;
  text-indent: -1em;
}

#contents #totsugekitai-sdgs ul li:before {
  content: "◆";
}

#contents #totsugekitai-sdgs #about-sdgs figure.the-17goals {
  margin: 40px auto;
  text-align: center;
}

#contents #totsugekitai-sdgs #about-sdgs figure.the-17goals img {
  max-width: 360px;
  width: 100%;
  height: auto;
}

#contents #totsugekitai-sdgs #about-sdgs .link-media {
  position: relative;
  border: 1px solid #828282;
  overflow: hidden;
}

#contents #totsugekitai-sdgs #about-sdgs .link-media a {
  display: block;
  padding: 12px;
}

#contents #totsugekitai-sdgs #about-sdgs .link-media a figure {
  float: left;
  width: 140px;
  height: 112px;
}

#contents #totsugekitai-sdgs #about-sdgs .link-media a img {
  width: 100%;
  height: auto;
}

#contents #totsugekitai-sdgs #about-sdgs .link-media p.page-title {
  margin-left: 152px;
  padding-bottom: 3em;
}

#contents #totsugekitai-sdgs #about-sdgs .link-media p.link-text {
  position: absolute;
  right: 12px;
  bottom: 8px;
  color: #97000c;
}

#contents #totsugekitai-sdgs #shokuba-kouhei {
  margin-bottom: 80px;
}

/************************************************************************
* お問い合わせ
*/
#inquiry .box1 .inqForm {
  max-width: 670px;
  padding: 0 15px;
}

#contact_form .form-group p.is-error {
  margin: 0 0 0.75em;
  color: #ef5267;
}

#inquiry .inqForm p.error-message {
  margin: 1.5em 0;
  color: #ef5267;
}

#contact_form .form-group:last-of-type p.is-error {
  margin: 0 0 2em;
}

#inquiry #contact-form h2 {
  margin-top: 3em;
  font-size: 16px;
}

#inquiry #contact-form table.form_confirm_item {
  width: 100%;
  margin: 1.5em 0 3em;
  border-top: 1px solid #d8d8d8;
}

#inquiry #contact-form table.form_confirm_item th,
#inquiry #contact-form table.form_confirm_item td {
  padding: 30px 1em 30px 0;
  border-bottom: 1px solid #d8d8d8;
  font-size: 16px;
  line-height: 1.5;
}

#inquiry #contact-form table.form_confirm_item th {
  text-align: left;
}

#inquiry #contact-form table.form_confirm_item th span {
  border-left: 6px solid #050505;
  padding-left: 10px;
  font-weight: bold;
}

#inquiry #contact-form .btStyle2 a {
  display: block;
  margin: 0 auto;
  width: 300px;
  padding: 15px;
  color: #FFF;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  background: #339900;
  box-shadow: 0 3px #297a00;
  -moz-box-shadow: 0 3px #297a00;
  -webkit-box-shadow: 0 3px #297a00;
  -o-box-shadow: 0 3px #297a00;
  -ms-box-shadow: 0 3px #297a00;
  -khtml-box-shadow: 0 3px #297a00;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
}

#inquiry.inq-complete .inqForm p {
  margin-bottom: 2em;
  line-height: 1.8;
  font-size: 16px;
}

.inqForm .agreement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.inqForm .agreement p {
  width: 100%;
  text-align: center;
}

.inqForm .agreement input:not(.is-error) ~ p {
  display: none;
}

.ecopv-wrap {
  max-width: 740px;
  margin: 0 auto;
}

.ecopv .first {
  padding: 1px 10px 20px;
  text-align: center;
  font-size: 28px;
  color: #fff;
  background: #e50011;
  line-height: 1.25;
}

.ecopv .btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 673.43915px;
  margin: 0 auto;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 20px;
}

.ecopv .btns li {
  width: 47.91%;
  max-width: 412px;
}

.ecopv .btns li p {
  text-align: left;
  font-weight: bold;
  font-size: 15px;
  line-height: 1.5;
}

/* 単一記事の機種リスト */
.singleCont ul.model-list {
  max-width: 680px;
  width: 100%;
  padding: 0 2rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  row-gap: 0.75em;
}

.singleCont ul.model-list li {
  width: 33.33%;
  padding-left: 2em;
  position: relative;
}

.singleCont ul.model-list li:before {
  content: "";
  display: block;
  width: 0.8em;
  aspect-ratio: 1/1;
  background-color: #FF0000;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  position: absolute;
  top: 4px;
  left: 0;
}

@media screen and (max-width: 510px) {
  .singleCont ul.model-list {
    padding: 0 0.5rem;
  }
  .singleCont ul.model-list li {
    width: 50%;
    padding-left: 1.5em;
  }
}
/* 単一記事の機種リスト ここまで */
.blogStyleBase h2 {
  overflow-wrap: break-word;
}

.blogStyleBase img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* エラーコード記事のエラーコード表 */
.blogStyleBase .error-code-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

.blogStyleBase .error-code-table th,
.blogStyleBase .error-code-table td {
  padding: 8px;
  line-height: 1.5;
  border: solid 1px #fff;
  vertical-align: middle !important;
}

.blogStyleBase .error-code-table th {
  background-color: #999999;
  color: #fff;
}

.blogStyleBase .error-code-table tbody td {
  background-color: #E7E7E7;
  color: #000;
}

.blogStyleBase .error-code-table tbody tr td:first-child {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: center;
}

.blogStyleBase .error-code-table__sound {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 2rem;
}

.blogStyleBase .error-code-table__sound th,
.blogStyleBase .error-code-table__sound td {
  color: #000;
  border: solid 1px #000;
  padding: 8px;
  line-height: 1.5;
  vertical-align: middle !important;
}

.blogStyleBase .error-code-table__sound th {
  text-align: left;
  background-color: #D1D2D4;
}

.blogStyleBase .error-code-table__sound td {
  background-color: #fff;
}

.blogStyleBase .error-code-table__approach {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

.blogStyleBase .error-code-table__approach th,
.blogStyleBase .error-code-table__approach td {
  color: #000;
  border: solid 1px #000;
  padding: 8px;
  line-height: 1.5;
  vertical-align: middle !important;
}

.blogStyleBase .error-code-table__approach th {
  background-color: #D1D2D4;
}

.blogStyleBase .error-code-table__approach td {
  background-color: #fff;
}

.blogStyleBase .error-code-table__approach ul {
  margin: 0 !important;
}

.blogStyleBase .error-code-table__approach ul li {
  padding-left: 1.25em;
  position: relative;
}

.blogStyleBase .error-code-table__approach td > ul > li:before {
  content: "●";
  position: absolute;
  top: 0;
  left: 0;
}

.blogStyleBase .error-code-table__approach td > ul > li > ul > li:before {
  content: "―";
  position: absolute;
  top: 0;
  left: 0;
}

/* エラーコード記事のエラーコード表　ここまで */
/* お見積り・ご相談お気軽に！ */
.estimate-consultation {
  width: 100%;
  padding: 3rem 1rem;
  background-color: #EEEEEE;
  border-radius: 16px;
  margin-bottom: 6rem;
}

.estimate-consultation h2 {
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  color: #E50011;
  margin-bottom: 1em;
}

.estimate-consultation__button {
  height: 100px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 1rem;
  max-width: 602px;
  margin: 0 auto 2rem;
  background-color: #E50011;
  border-radius: 8px;
  border-bottom: solid 4px #B3000D;
  transition: 0.5s;
  text-decoration: none;
  box-shadow: 2px -2px 4px rgba(0, 0, 0, 0.25);
}

.estimate-consultation__button span:nth-of-type(1) {
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 32px;
}

.estimate-consultation__button span:nth-of-type(2) {
  color: #EBDC13;
  font-weight: bold;
  text-align: center;
  font-size: 18px;
}

.estimate-consultation__button:hover {
  transform: translateY(4px);
  border-bottom: solid 0 #B3000D;
}

.estimate-consultation__tel {
  display: block;
  max-width: 602px;
  margin: 0 auto;
}

.estimate-consultation__tel img {
  width: 100%;
  display: block;
}

@media screen and (max-width: 600px) {
  .estimate-consultation__button {
    height: auto;
    padding: 1rem;
  }
  .estimate-consultation__button span:nth-of-type(1) {
    font-size: 7vw;
  }
  .estimate-consultation__button span:nth-of-type(2) {
    font-size: 4.3vw;
  }
}
/* お見積り・ご相談お気軽に！　ここまで */
/* サイドバー「エコキュート型番調べ方はこちら」ボタン */
.sidebar__model-number-confirmation {
  background-color: #E50011;
  border-radius: 8px;
  border-bottom: solid 4px #B3000D;
  width: 100%;
  height: 6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
  text-decoration: none;
  transition: 0.5s;
  margin-bottom: 2rem;
}

.sidebar__model-number-confirmation:hover {
  transform: translateY(4px);
  border-bottom: solid 0 #B3000D;
}

.sidebar__model-number-confirmation span {
  font-size: 18px;
  color: #fff;
  font-weight: bold;
}

@media screen and (max-width: 600px) {
  .sidebar__model-number-confirmation {
    height: 4rem;
    padding: 0 1rem;
    margin: 2rem auto 1rem !important;
  }
  .sidebar__model-number-confirmation span {
    font-size: 4.8vw;
  }
}
/* サイドバー「エコキュート型番調べ方はこちら」ボタン　ここまで */
/* 8つの満足（2023年12月版） */
#eight-satisfactions {
  padding-top: 3rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
}

@media screen and (max-width: 720px) {
  #eight-satisfactions {
    max-width: 97vw;
    width: 100%;
  }
}
#eight-satisfactions .inner {
  border: solid 5px #B52B01;
  background-color: #E50011;
  border-radius: 8px;
  padding: 1.5rem;
  position: relative;
}

#eight-satisfactions .inner .top-ribbon,
#eight-satisfactions .inner .top-character {
  position: absolute;
}

#eight-satisfactions .top-ribbon {
  top: -39px;
  left: 1rem;
}

#eight-satisfactions .top-character {
  top: -3rem;
  right: 0.5rem;
}

@media screen and (max-width: 720px) {
  #eight-satisfactions .inner {
    padding: 0.5rem;
  }
  #eight-satisfactions .inner .top-ribbon,
  #eight-satisfactions .inner .top-character {
    width: 14vw;
  }
  #eight-satisfactions .inner .top-ribbon {
    top: 0;
    transform: translateY(-25%);
  }
}
#eight-satisfactions h2 {
  font-weight: bold;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 1.5rem;
  position: relative;
  z-index: 10;
  line-height: 1;
}

#eight-satisfactions h2 > span:nth-of-type(1) {
  font-size: 20px;
  position: relative;
}

@media screen and (max-width: 720px) {
  #eight-satisfactions h2 {
    padding-top: 0.5em;
    row-gap: 0.5em;
    margin-bottom: 1rem;
  }
  #eight-satisfactions h2 > span:nth-of-type(1) {
    font-size: 3vw;
  }
}
#eight-satisfactions h2 > span:nth-of-type(1):before,
#eight-satisfactions h2 > span:nth-of-type(1):after {
  content: "";
  width: 4px;
  height: 2em;
  background-color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

#eight-satisfactions h2 > span:nth-of-type(1):before {
  right: calc(100% + 1rem);
  transform: rotate(-22.5deg);
}

#eight-satisfactions h2 > span:nth-of-type(1):after {
  left: calc(100% + 1rem);
  transform: rotate(22.5deg);
}

@media screen and (max-width: 720px) {
  #eight-satisfactions h2 > span:nth-of-type(1):before {
    right: calc(100% + 0.5rem);
  }
  #eight-satisfactions h2 > span:nth-of-type(1):after {
    left: calc(100% + 0.5rem);
  }
}
#eight-satisfactions h2 > span:nth-of-type(2) {
  font-size: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
}

#eight-satisfactions h2 > span:nth-of-type(2) span:nth-of-type(1) b {
  font-size: 24px;
}

#eight-satisfactions h2 > span:nth-of-type(2) span:nth-of-type(2) {
  color: #EDEA39;
  font-size: 60px;
}

#eight-satisfactions h2 > span:nth-of-type(2) span:nth-of-type(2) b {
  font-size: 86px;
}

@media screen and (max-width: 720px) {
  #eight-satisfactions h2 > span:nth-of-type(2) {
    font-size: 3vw;
  }
  #eight-satisfactions h2 > span:nth-of-type(2) span:nth-of-type(1) b {
    font-size: 1.2em;
  }
  #eight-satisfactions h2 > span:nth-of-type(2) span:nth-of-type(2) {
    font-size: 6vw;
  }
  #eight-satisfactions h2 > span:nth-of-type(2) span:nth-of-type(2) b {
    font-size: 1.5em;
  }
}
#eight-satisfactions ul {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  row-gap: 1rem;
  margin: 0 !important;
  list-style: none !important;
}

#eight-satisfactions ul li {
  width: calc(50% - 0.5rem);
  height: 160px;
  position: relative;
}

@media screen and (max-width: 720px) {
  #eight-satisfactions ul {
    row-gap: 0.5rem;
  }
  #eight-satisfactions ul li {
    height: auto;
  }
}
#eight-satisfactions ul li .list-inner {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 0.5rem;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 4px;
  border-bottom: solid 3px #CCCCCC;
}

@media screen and (max-width: 720px) {
  #eight-satisfactions ul li .list-inner {
    padding: 0.25rem;
  }
}
#eight-satisfactions ul li .list-inner:hover * {
  transition: none;
  opacity: 1;
}

#eight-satisfactions ul li .list-inner h3 {
  line-height: 1;
}

#eight-satisfactions ul li .list-inner img {
  max-width: 65%;
  transition: opacity 0.5s;
}

#eight-satisfactions ul li a.list-inner:hover img {
  opacity: 0.5;
  transition: opacity 0.5s;
}

#eight-satisfactions ul li .list-inner p {
  font-weight: bold;
  color: #7d7d7d;
  text-align: center;
  margin: 0 !important;
}

#eight-satisfactions ul li .list-inner > span:first-child {
  display: table;
  background-color: #008C00;
  padding: 0.25rem 0.5rem;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: 0.75rem;
  left: 0;
  line-height: 1;
}

#eight-satisfactions ul li .list-inner > span:first-child b {
  font-size: 24px;
}

@media screen and (max-width: 720px) {
  #eight-satisfactions ul li .list-inner > span:first-child {
    font-size: 2.5vw;
  }
  #eight-satisfactions ul li .list-inner > span:first-child b {
    font-size: 1.2em;
  }
}
#eight-satisfactions ul li:nth-of-type(-n+4) .list-inner h3 {
  color: #E50011;
  background-color: #EEEA39;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}

@media screen and (max-width: 720px) {
  #eight-satisfactions ul li:nth-of-type(-n+4) .list-inner p {
    font-size: 4.5vw;
  }
}
#eight-satisfactions ul li:nth-of-type(n+5) {
  width: calc(25% - 0.75rem);
  height: 140px;
}

@media screen and (max-width: 720px) {
  #eight-satisfactions ul li:nth-of-type(n+5) {
    width: calc(50% - 0.5rem);
    height: auto;
  }
  #eight-satisfactions ul li:nth-of-type(-n+4) .list-inner h3 {
    font-size: 4.2vw;
  }
}
#eight-satisfactions ul li:nth-of-type(n+5) .list-inner {
  border: solid 3px #DDDDDD;
  padding-top: 2rem;
}

#eight-satisfactions ul li:nth-of-type(n+5) .list-inner > span:first-child {
  background-color: #8C6900;
  top: 3px;
  left: 0;
  right: 0;
  margin: 0 auto;
  line-height: 1;
}

#eight-satisfactions ul li:nth-of-type(n+5) .list-inner h3 {
  color: #000;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
}

#eight-satisfactions ul li:nth-of-type(n+5) .list-inner p {
  font-size: 13px;
}

@media screen and (max-width: 720px) {
  #eight-satisfactions ul li:nth-of-type(n+5) .list-inner h3 {
    font-size: 4.8vw;
  }
  #eight-satisfactions ul li:nth-of-type(n+5) .list-inner p {
    font-size: 3.5vw;
  }
}
/* 8つの満足（2023年12月版） ここまで */
/* PC版ヘッダー */
.parts__header-tel {
  width: 154px;
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  row-gap: 4px;
}

.parts__header-tel .number,
.parts__header-tel .reception,
.parts__header-tel .message {
  white-space: nowrap;
  line-height: 1;
  text-align: center;
}

.parts__header-tel .number {
  font-family: var(--font-shippori);
  font-size: 19px;
  font-weight: bold;
  padding-left: 1.5em;
  position: relative;
}

.parts__header-tel .number:before {
  content: "";
  display: block;
  width: 1.5em;
  height: 100%;
  background-image: url("../parts/tels/images/free-dial.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  bottom: 0;
  left: 0;
}

.parts__header-tel .reception {
  font-family: var(--font-noto-sans);
  font-size: 10px;
  font-weight: bold;
}

.parts__header-tel .message {
  font-family: var(--font-noto-sans);
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  background-color: #00A63B;
  border-radius: 4px;
  padding: 2px 0;
}

/* PC版ヘッダー　ここまで */
/* PC版フッター */
.parts__footer-tel {
  width: 154px;
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  row-gap: 4px;
}

.parts__footer-tel .number,
.parts__footer-tel .reception,
.parts__footer-tel .message {
  color: #fff;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
}

.parts__footer-tel .number {
  font-family: var(--font-shippori);
  font-size: 19px;
  font-weight: bold;
  padding-left: 1.5em;
  position: relative;
}

.parts__footer-tel .number:before {
  content: "";
  display: block;
  width: 1.5em;
  height: 100%;
  background-image: url("../parts/tels/images/free-dial_white.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  bottom: 0;
  left: 0;
}

.parts__footer-tel .reception {
  font-family: var(--font-noto-sans);
  font-size: 10px;
  font-weight: bold;
}

.parts__footer-tel .message {
  font-family: var(--font-noto-sans);
  font-size: 11px;
  font-weight: bold;
  color: #E50011;
  background-color: #fff;
  border-radius: 4px;
  padding: 2px 0;
}

/* PC版フッター　ここまで */
/* モバイル版フッター */
.parts__footer-tel_mobile {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 4px;
  margin: 0 auto;
}

.parts__footer-tel_mobile .number,
.parts__footer-tel_mobile .reception,
.parts__footer-tel_mobile .message {
  color: #fff;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
}

.parts__footer-tel_mobile .number {
  font-family: var(--font-shippori);
  font-size: 24px;
  font-weight: bold;
  padding-left: 1.5em;
  position: relative;
}

.parts__footer-tel_mobile .number:before {
  content: "";
  display: block;
  width: 1.5em;
  height: 100%;
  background-image: url("../parts/tels/images/free-dial_white.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  bottom: 0;
  left: 0;
}

.parts__footer-tel_mobile .reception {
  font-family: var(--font-noto-sans);
  font-size: 16px;
}

/* モバイル版フッター　ここまで */
/* エラーコードページ下部　かんでんEハウスの連絡先 */
.errerInqBox .message02 {
  font-size: 24px !important;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.5rem !important;
}

.errerInqBox .message03 {
  font-size: 20px !important;
  font-weight: bold;
  color: #075A30;
  text-align: center;
}

.errerInqBox .contacts {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 2rem;
}

@media screen and (max-width: 720px) {
  .errerInqBox .contacts {
    flex-direction: column;
    align-items: center;
    row-gap: 3rem;
  }
  .errerInqBox .contacts div {
    width: 100%;
    max-width: 230px;
  }
}
.errerInqBox .contacts div p {
  font-size: 18px !important;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 1rem !important;
}

.errerInqBox .contacts div a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  padding: 0.8rem 1.25rem;
  border-radius: 100px;
  line-height: 1;
}

.errerInqBox .contacts div a:hover {
  filter: brightness(1.5);
}

.errerInqBox .contacts div a svg {
  fill: #fff;
}

.errerInqBox .contacts div.tel a {
  background-color: #136BD9;
}

.errerInqBox .contacts div.tel a svg {
  height: 1.2em;
  margin-right: 0.25em;
}

.errerInqBox .contacts div.line a {
  background-color: #027435;
}

.errerInqBox .contacts div.mail a {
  background-color: #D91322;
}

.errerInqBox .contacts div.mail a svg {
  width: 1em;
  margin-right: 0.25em;
}

.errerInqBox .message04 {
  text-align: center;
  font-weight: bold;
  font-size: 24px !important;
  line-height: 1.1 !important;
}

.errerInqBox .message04 span {
  font-size: 1.25em !important;
  color: #E50011;
}

@media screen and (max-width: 720px) {
  .errerInqBox .message04 {
    font-size: 4.5vw !important;
  }
}
/* エラーコードページ下部　かんでんEハウスの連絡先　ここまで */
/* スタッフ写真　円加工 */
.compstaff__img img {
  display: block;
  border-radius: 100%;
}

/* スタッフ写真　円加工　ここまで */
/* お問い合わせパーツ */
.inquiries p {
  text-align: center;
}

.inquiries h3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 7rem;
  border-radius: 1000px;
  text-align: center;
  background-color: #DE4124;
  font-size: 1.5rem;
  color: #fff;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 2rem;
}

.inquiries h3 b {
  font-size: 1.8rem;
  color: #FFFF00;
}

@media screen and (max-width: 540px) {
  .inquiries h3 {
    height: auto;
    padding: 1rem 0;
    font-size: 5vw;
  }
  .inquiries h3 b {
    font-size: 4vw;
  }
}
.inquiries h4 {
  text-align: center;
  font-weight: bold;
  font-size: 1.5rem;
}

.inquiries .message01 {
  font-size: 20px !important;
  font-weight: bold;
  color: #075A30;
  text-align: center;
  margin-bottom: 2em;
}

.inquiries .contacts {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  margin-bottom: 2rem;
}

@media screen and (max-width: 720px) {
  .inquiries .contacts {
    flex-direction: column;
    align-items: center;
    row-gap: 3rem;
  }
  .inquiries .contacts div {
    width: 100%;
    max-width: 230px;
  }
}
.inquiries .contacts div p {
  font-size: 18px !important;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 1rem !important;
}

.inquiries .contacts div a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  padding: 0.8rem 1.25rem;
  border-radius: 100px;
  line-height: 1;
}

.inquiries .contacts div a:hover {
  filter: brightness(1.5);
}

.inquiries .contacts div a svg {
  fill: #fff;
}

.inquiries .contacts div.tel a {
  background-color: #136BD9;
  margin-bottom: 0.5rem;
}

.inquiries .contacts div.tel a svg {
  height: 1.2em;
  margin-right: 0.25em;
}

.inquiries .contacts div.line a {
  background-color: #027435;
}

.inquiries .contacts div.mail a {
  background-color: #D91322;
}

.inquiries .contacts div.mail a svg {
  width: 1em;
  margin-right: 0.25em;
}

.inquiries .message04 {
  text-align: center;
  font-weight: bold;
  font-size: 24px !important;
  line-height: 1.1 !important;
}

.inquiries .message04 span {
  font-size: 1.25em !important;
  color: #E50011;
}

@media screen and (max-width: 720px) {
  .inquiries .message04 {
    font-size: 4.5vw !important;
  }
}
/* お問い合わせパーツ　ここまで */
/* オプション販売単価表 */
.Optional-construction {
  margin: 2rem auto;
  max-width: 95vw;
}

.Optional-construction .table-wrap {
  border: solid 1px #CC0000;
  border-radius: 4px;
  overflow: hidden;
  padding: 0 !important;
  margin-bottom: 1rem;
}

.Optional-construction table {
  width: 100%;
}

.Optional-construction table thead {
  background-color: #CC0000;
}

.Optional-construction table thead th {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  padding: 4px 0;
}

.Optional-construction .pc_table table thead th {
  position: relative;
}

.Optional-construction table thead th > b {
  font-size: 1.2em;
  color: #FFFF00;
}

.Optional-construction table thead th > span {
  display: table;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 100px;
  line-height: 1.25;
  background-color: #FFFF86;
  color: #FF0000;
}

.Optional-construction .pc_table table thead th > span {
  position: absolute;
  top: 0;
  right: 4px;
  bottom: 0;
  margin: auto 0;
}

.Optional-construction .sp_table table thead {
  line-height: 1.5;
}

.Optional-construction .sp_table table thead th > span {
  margin: 0 auto;
}

.Optional-construction table thead th > span:before,
.Optional-construction table thead th > span:after {
  content: " ";
  display: inline-block;
  width: 0.5em;
  height: 100%;
}

.Optional-construction table thead th > span b {
  font-size: 1.5em;
}

.Optional-construction table tbody th,
.Optional-construction table tbody td {
  border: solid 1px #E7E7E7;
  padding: 4px 0.8em;
  font-size: 12px;
}

.Optional-construction table tbody th:first-of-type,
.Optional-construction table tbody td:first-of-type {
  border-left: none;
}

.Optional-construction table tbody th:last-of-type,
.Optional-construction table tbody td:last-of-type {
  border-right: none;
}

.Optional-construction table tbody th {
  background-color: #E7E7E7;
  font-weight: bold;
}

.Optional-construction table tbody th:not(:last-child) {
  border-right: solid 1px #fff;
}

.Optional-construction .pc_table table tbody th:nth-of-type(2) {
  position: relative;
}

.Optional-construction .pc_table table tbody th:nth-of-type(2):after {
  content: "";
  display: block;
  width: 1px;
  height: calc(100% + 2px);
  border-left: solid 1px #fff;
  background-color: #E7E7E7;
  border-right: solid 1px #fff;
  position: absolute;
  top: 0;
  right: -2px;
}

.Optional-construction table tbody td:nth-of-type(odd) {
  text-align: center;
}

.Optional-construction table tbody td:nth-of-type(even) {
  text-align: right;
}

.Optional-construction .pc_table table tbody td:nth-of-type(2) {
  position: relative;
}

.Optional-construction .pc_table table tbody td:nth-of-type(2):after {
  content: "";
  display: block;
  width: 1px;
  height: calc(100% + 2px);
  border-left: solid 1px #E7E7E7;
  background-color: #fff;
  border-right: solid 1px #E7E7E7;
  position: absolute;
  top: 0;
  right: -2px;
}

@media screen and (min-width: 601px) {
  .Optional-construction .table-wrap.sp_table {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .Optional-construction .table-wrap.pc_table {
    display: none;
  }
}
.Optional-construction > p {
  line-height: 1.5;
  margin-bottom: 1rem;
}

.Optional-construction .Unit-selling-price * {
  box-sizing: border-box;
}

.Optional-construction .Unit-selling-price > h3 {
  background-color: #CC0000;
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
  padding: 4px;
  line-height: 1;
  position: relative;
  z-index: 100;
}

.Optional-construction .Unit-selling-price > .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.Optional-construction .Unit-selling-price > .inner .left,
.Optional-construction .Unit-selling-price > .inner .right {
  width: 50%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
}

.Optional-construction .Unit-selling-price > .inner .right {
  position: relative;
}

.Optional-construction .Unit-selling-price > .inner .right:before {
  content: "";
  width: 1px;
  height: 100%;
  background-color: #fff;
  border-left: solid 1px #E7E7E7;
  border-right: solid 1px #E7E7E7;
  position: absolute;
  top: 0;
  right: 100%;
}

.Optional-construction .Unit-selling-price dl {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  border-bottom: solid 1px #E7E7E7;
}

.Optional-construction .Unit-selling-price dl:not(:last-child) {
  border-bottom: solid 1px #E7E7E7;
}

.Optional-construction .Unit-selling-price dl > dd.image {
  width: 60px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 1px;
  border-right: solid 1px #E7E7E7;
}

.Optional-construction .Unit-selling-price dl > dd.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Optional-construction .Unit-selling-price dl > div {
  width: calc(100% - 60px);
}

.Optional-construction .Unit-selling-price dl > div dt,
.Optional-construction .Unit-selling-price dl > div dd {
  min-height: 1.25rem;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

.Optional-construction .Unit-selling-price dl > div dt {
  color: #CC0000;
  background-color: #FFFF86;
  font-weight: bold;
}

.Optional-construction .Unit-selling-price dl > div dt small {
  font-size: 10px;
  font-weight: normal;
}

.Optional-construction .Unit-selling-price dl > div dd {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.Optional-construction .Unit-selling-price > .inner .right dl:nth-of-type(1) > div dd:not(:last-child) {
  border-bottom: solid 1px #E7E7E7;
}

.Optional-construction .Unit-selling-price > .inner .right dl:nth-of-type(1) .image {
  border-bottom: none;
}

.Optional-construction .Unit-selling-price > .inner .right dl:nth-of-type(1) .image img {
  height: calc(50% - 0.5px);
}

.Optional-construction .Unit-selling-price > .inner .right dl:nth-of-type(2) > dd.image img {
  width: 75%;
  aspect-ratio: auto;
  object-fit: contain;
}

.Optional-construction .Unit-selling-price > .inner .right dl:nth-of-type(3) > dd.image img {
  width: 90%;
  aspect-ratio: auto;
  object-fit: contain;
}

@media screen and (max-width: 600px) {
  .Optional-construction .Unit-selling-price > .inner .left,
  .Optional-construction .Unit-selling-price > .inner .right {
    width: 100%;
  }
  .Optional-construction .Unit-selling-price dl > div dt,
  .Optional-construction .Unit-selling-price dl > div dd {
    font-size: 3vw;
  }
  .Optional-construction .Unit-selling-price dl > div dt small {
    font-size: 0.75em;
  }
}
/* オプション販売単価表　ここまで */
/* スタッフ紹介 */
#company .company-staffes {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: 5rem;
}

#company .company-staffes li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  width: 50%;
  border: solid 1px #DDDDDD;
  background-color: #F6F5EF;
}

#company .company-staffes li .photo {
  max-width: 100px;
  padding-bottom: 1rem;
  position: relative;
}

#company .company-staffes li .photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 100%;
}

#company .company-staffes li .photo p {
  display: table;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background-color: #E50011;
  border-radius: 100px;
  padding: 4px 1em;
  position: absolute;
  top: calc(100% - (1rem + 4px));
  left: 0;
  right: 0;
  margin: 0 auto;
}

#company .company-staffes li .messages {
  width: 210px;
}

#company .company-staffes li .messages p {
  line-height: 1.8;
}

#company .company-staffes li .messages p.in_charge {
  font-size: 0.8em;
  font-weight: bold;
}

@media screen and (max-width: 600px) {
  #company .company-staffes li {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    row-gap: 1rem;
  }
  #company .company-staffes li .messages {
    width: 100%;
  }
}
#company .company-staffes__photo-only {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  margin-bottom: 6rem;
}

#company .company-staffes__photo-only li {
  width: 100px;
  padding-bottom: 1rem;
  position: relative;
}

#company .company-staffes__photo-only li img {
  display: block;
  width: 100%;
  border-radius: 100%;
}

#company .company-staffes__photo-only li p {
  display: table;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background-color: #E50011;
  border-radius: 100px;
  padding: 4px 1em;
  position: absolute;
  top: calc(100% - (1rem + 4px));
  left: 0;
  right: 0;
  margin: 0 auto;
}

@media screen and (max-width: 440px) {
  #company .company-staffes__photo-only li {
    width: calc(33.33% - 2rem);
  }
}
/* スタッフ紹介　ここまで */
/* お一人おひとりに専属のアドバイザー */
.adviser .adviser__staffs {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  column-gap: 1.5rem;
  row-gap: 1rem;
}

.adviser .adviser__staffs img {
  width: 90px;
  aspect-ratio: 1/1;
  border-radius: 100%;
}

@media screen and (max-width: 600px) {
  .adviser .adviser__staffs {
    width: 100%;
    column-gap: 1rem;
  }
  .adviser .adviser__staffs img {
    width: 15vw;
  }
}
.advisers_photo {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem;
  justify-content: space-around;
}

.advisers_photo img {
  display: block;
  width: 15%;
  aspect-ratio: 1/1;
  border-radius: 100%;
}

/* お一人おひとりに専属のアドバイザー　ここまで */
/* お客様の専属アドバイザー */
ul.typeItem-descript-p-adviser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  row-gap: 1rem;
  width: 460px;
  column-gap: 20px;
  margin: 0 auto 1rem;
}
@media screen and (max-width: 599px) {
  ul.typeItem-descript-p-adviser {
    width: 100%;
    column-gap: 1rem;
  }
}
ul.typeItem-descript-p-adviser > li {
  width: 100px;
}
@media screen and (max-width: 599px) {
  ul.typeItem-descript-p-adviser > li {
    width: calc(25% - 1rem);
  }
}
ul.typeItem-descript-p-adviser > li img {
  display: block;
  width: 100px;
  object-fit: contain;
  aspect-ratio: 1/1;
  border-radius: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 599px) {
  ul.typeItem-descript-p-adviser > li img {
    width: 100%;
    height: auto;
  }
}

/* お客様の専属アドバイザー　ここまで */
/* エコ突撃隊 お客様相談窓口 */
.customer_consultation_desk {
  background-color: #FFF195;
  padding: 1rem 2.5rem 0.8rem;
}

.customer_consultation_desk > p {
  transform: skewX(-10deg);
}

.customer_consultation_desk > p:nth-of-type(1) {
  font-size: 20px !important;
  font-style: italic !important;
  font-weight: bold !important;
  text-align: center !important;
  margin-bottom: 0 !important;
}

.customer_consultation_desk > p:nth-of-type(2) {
  font-size: 28px !important;
  font-style: italic !important;
  font-weight: bold !important;
  color: #0D5C2F !important;
  text-align: center !important;
  margin-bottom: 1rem !important;
}

@media screen and (max-width: 600px) {
  .customer_consultation_desk > p:nth-of-type(1) {
    font-size: 4.2vw !important;
    margin-bottom: 0 !important;
  }
  .customer_consultation_desk > p:nth-of-type(2) {
    font-size: 5.7vw !important;
    margin-bottom: 0.5rem !important;
  }
}
.customer_consultation_desk > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media screen and (max-width: 600px) {
  .customer_consultation_desk > div {
    flex-direction: column;
    align-items: center;
    row-gap: 1rem;
  }
}
.customer_consultation_desk > div a {
  width: 315px;
  height: 76px;
  border-radius: 5px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
}

@media screen and (max-width: 420px) {
  .customer_consultation_desk > div a {
    width: 100%;
  }
}
.customer_consultation_desk > div a:nth-of-type(1) {
  background: linear-gradient(to bottom, #E65238, #d32a0b);
  border-bottom: solid 4px #9B1900;
}

.customer_consultation_desk > div a:nth-of-type(2) {
  background-color: #0EAA3C;
  border-bottom: solid 4px #0D5C2F;
}

.customer_consultation_desk > div a:nth-of-type(1):hover {
  border-bottom: solid 0 #9B1900;
}

.customer_consultation_desk > div a:nth-of-type(2):hover {
  border-bottom: solid 0 #0D5C2F;
}

.customer_consultation_desk > div a p {
  text-align: center;
  line-height: 1 !important;
  margin-bottom: 0 !important;
}

.customer_consultation_desk > div a p:nth-of-type(1) {
  font-size: 20px !important;
  color: #FFFB06;
  font-weight: bold;
}

.customer_consultation_desk > div a:nth-of-type(1) p:nth-of-type(1) {
  margin-bottom: 0.25rem !important;
}

.customer_consultation_desk > div a:nth-of-type(1) p:nth-of-type(2) {
  font-size: 16px !important;
  color: #FFFB06;
}

.customer_consultation_desk > div a:nth-of-type(2) p:nth-of-type(2) {
  font-size: 18px;
  color: #fff;
}

.customer_consultation_desk > div a:nth-of-type(2) p:nth-of-type(3) {
  font-size: 14px;
  color: #fff;
}

@media screen and (max-width: 600px) {
  .customer_consultation_desk > div a p:nth-of-type(1) {
    font-size: 5.7vw !important;
  }
  .customer_consultation_desk > div a:nth-of-type(1) p:nth-of-type(2) {
    font-size: 4.7vw !important;
  }
  .customer_consultation_desk > div a:nth-of-type(2) p:nth-of-type(2) {
    font-size: 4vw;
  }
  .customer_consultation_desk > div a:nth-of-type(2) p:nth-of-type(3) {
    font-size: 3.7vw;
  }
}
/* エコ突撃隊 お客様相談窓口 ここまで */
/* 飛び出しバナー中身 */
#modal {
  position: relative;
}

#modal .modal-body {
  width: auto;
  height: 90vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

@media (orientation: portrait) {
  #modal .modal-body {
    height: auto;
    width: 78vw;
  }
}
#modal .modal-body > div,
#modal .modal-body > a:not(.close-link) {
  display: block;
  width: 100%;
}

#modal .modal-body > div.width-half,
#modal .modal-body > a.width-half {
  width: 50%;
}

#modal .modal-body > div.width-full,
#modal .modal-body > a.width-full {
  width: 100%;
}

#modal .modal-body > div img,
#modal .modal-body > a:not(.close-link) img {
  width: 100%;
}

.close-link {
  display: none;
}

#modal .modal-body .close-link {
  display: block;
  font-size: 30px;
  line-height: 30px;
  width: 30px !important;
  aspect-ratio: 1/1;
  text-align: center;
  color: #fff;
  position: absolute;
  bottom: 100%;
  left: 100%;
  z-index: 10000;
  outline: none;
  transition: transform 0.3s ease-in-out;
}

@media (orientation: portrait) {
  #modal .modal-body .close-link {
    left: auto;
    right: 0;
  }
}
#modal .modal-body .close-link:hover {
  transform: rotate(360deg);
  color: #fff;
}

.custombox-overlay {
  z-index: 10000000;
}

.custombox-content {
  z-index: 10000001;
}

/* 飛び出しバナー中身 ここまで */
/* モーダルバナー単体出力 */
.modal_content {
  margin: 3rem auto;
  background-color: #EEEEEE;
  border-radius: 20px;
  width: 100%;
  padding: 2rem 3rem;
}

.modal_content h2 {
  color: #E50011;
  text-align: center;
  font-size: 30px;
  margin-bottom: 1em;
}

.modal_content h2 br {
  display: none;
}

@media screen and (max-width: 600px) {
  .modal_content h2 {
    font-size: 6vw;
  }
  .modal_content h2 br {
    display: inline;
  }
}
:not(#modal) .modal-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

:not(#modal) .modal-body a:not(.close-link),
:not(#modal) .modal-body div {
  display: block;
  width: 100%;
}

:not(#modal) .modal-body a.width-half,
:not(#modal) .modal-body div.width-half {
  width: 50%;
}

:not(#modal) .modal-body a img,
:not(#modal) .modal-body div img {
  display: block;
  width: 100%;
}

@media screen and (max-width: 600px) {
  .modal_content {
    width: 95vw;
    padding: 2rem 1rem;
  }
}
/* モーダルバナー単体出力　ここまで */
.speech-bubble {
  width: 100%;
  height: 10rem;
  background-color: #CA0000;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem;
  position: relative;
}
.speech-bubble:after {
  content: "";
  display: block;
  width: 10rem;
  height: 1rem;
  background-color: #CA0000;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  margin: 0 auto;
}
.speech-bubble p {
  color: #FFF;
  text-align: center;
  font-weight: bold;
  font-size: 30px !important;
}

.hanbaikakaku .gekiyasutokka {
  border-top: solid 5px #CB0008;
  border-bottom: solid 5px #CB0008;
  padding: 1.5rem 0;
  margin-bottom: 0.5rem;
}

.hanbaikakaku .gekiyasutokka h3 {
  font-size: 18px;
  font-weight: bold;
}

.hanbaikakaku .gekiyasutokka > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 1rem 0 0;
}

.hanbaikakaku .gekiyasutokka > div > div:nth-child(1) {
  width: 25%;
}

.hanbaikakaku .gekiyasutokka > div > div:nth-child(1) p {
  font-size: 2.5rem !important;
  font-weight: bold;
  line-height: 1.5;
}

.hanbaikakaku .gekiyasutokka > div > div:nth-child(2) {
  width: 75%;
}

.hanbaikakaku .gekiyasutokka > div > div:nth-child(2) p {
  font-size: 5.5em !important;
  color: #E6041A;
  font-weight: bolder;
  text-align: right;
  white-space: nowrap;
}

.hanbaikakaku .gekiyasutokka > p:last-child {
  text-align: center;
  color: #E6041A;
  font-weight: bold;
  font-size: 3rem !important;
}

@media screen and (max-width: 599px) {
  .hanbaikakaku .gekiyasutokka h3 {
    font-size: 3.7vw !important;
  }
  .hanbaikakaku .gekiyasutokka > div > div:nth-child(1) p {
    font-size: 4vw !important;
  }
  .hanbaikakaku .gekiyasutokka > div > div:nth-child(2) p {
    font-size: 10vw !important;
  }
  .hanbaikakaku .gekiyasutokka > p:last-child {
    font-size: 7vw !important;
  }
}
.hanbaikakaku_bottom_annotations {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 3rem;
}
@media screen and (max-width: 599px) {
  .hanbaikakaku_bottom_annotations {
    flex-direction: column;
    row-gap: 1rem;
  }
}
.hanbaikakaku_bottom_annotations .annotations {
  width: 64.9%;
}
@media screen and (max-width: 599px) {
  .hanbaikakaku_bottom_annotations .annotations {
    width: 100%;
    order: 2;
  }
}
.hanbaikakaku_bottom_annotations .annotations p {
  font-size: 14px !important;
  line-height: 1.2;
}
.hanbaikakaku_bottom_annotations .link {
  width: 33.4%;
}
@media screen and (max-width: 599px) {
  .hanbaikakaku_bottom_annotations .link {
    width: 100%;
    order: 1;
  }
}
.hanbaikakaku_bottom_annotations .link a {
  font-size: 14px !important;
  text-align: right;
  background-image: url("../common/com_arr01.png");
  background-repeat: no-repeat;
  background-position: left;
  padding-left: 1em;
  text-decoration: underline;
  white-space: nowrap;
}

.headline01 {
  background-color: #97000C;
  padding: 15px 15px 13px;
  border-radius: 5px;
  font-size: 1.714285714rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 2rem;
  line-height: 1.4em;
}

@media screen and (max-width: 600px) {
  .headline01 {
    font-size: 16px;
    padding: 10px 10px 8px;
  }
}
.headline02 {
  font-size: 20px;
  font-weight: bold;
  padding: 15px;
  border-left: solid 8px #971900;
  border-bottom: solid 1px #D8D8D8;
  margin-top: 2rem;
  margin-bottom: 2rem;
  line-height: 1.5;
}

@media screen and (max-width: 600px) {
  .headline02 {
    font-size: 16px;
    padding: 10px;
  }
}
.headline03 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  background-color: #0D5C2F;
  width: 100%;
  height: 50px;
  border-bottom: solid 3px #03381A;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  padding-left: 1rem;
  margin-bottom: 2rem;
}

.headline04 {
  /*
    min-height: 68px;
  */
  padding: 1rem;
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 1.5rem;
  line-height: 1.3;
  background-color: #E50011;
  border-radius: 5px;
}
@media screen and (max-width: 599px) {
  .headline04 {
    font-size: 18px;
  }
}
.headline04:has(img) {
  padding: 1.5rem 0 1.5rem 6rem;
  position: relative;
}
.headline04:has(img) img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1rem;
  margin: auto 0;
}

.headline05 {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  padding-left: 2rem;
  margin: 2rem 0;
  position: relative;
}
@media screen and (max-width: 599px) {
  .headline05 {
    font-size: 16px;
  }
}
.headline05:before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("../images/common/Icon_akar-check.svg");
  background-position: top center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0.25em;
  left: 0;
}

.headline06 {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  border-left: solid 7px #971900;
  padding-left: 0.5rem;
  margin: 2rem 0;
}

.headline07 {
  max-width: 380px;
  width: 100%;
  padding: 1rem 0 0.8rem;
  font-size: 18px;
  text-align: center;
  border: solid 1px #707070;
  margin-bottom: 2rem;
}

.headline08 {
  border-left: solid 8px #E50011;
  border-bottom: solid 1px #D8D8D8;
  padding: 0.8rem 0;
  padding-left: 1em;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}
@media screen and (max-width: 599px) {
  .headline08 {
    font-size: 16px;
  }
}

.headline09 {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  padding-left: 2rem;
  margin: 2rem 0;
  position: relative;
}
.headline09 sup {
  font-weight: normal;
  font-size: 0.75em;
}
@media screen and (max-width: 599px) {
  .headline09 {
    font-size: 16px;
  }
}
.headline09:before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("../images/common/Icon_check_maincolor.svg");
  background-position: top center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0.25em;
  left: 0;
}

ul.check-list {
  margin-bottom: 2rem;
}
ul.check-list li {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  padding-left: 2rem;
  position: relative;
}
ul.check-list li:not(:last-child) {
  margin-bottom: 1.5rem;
}
@media screen and (max-width: 599px) {
  ul.check-list li {
    font-size: 16px;
  }
}
ul.check-list li:before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("../images/common/Icon_akar-check.svg");
  background-position: top center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0.25em;
  left: 0;
}

ul.dot {
  padding-left: 1em;
}
ul.dot li {
  text-indent: -1em;
}
ul.dot li:not(:last-child) {
  margin-bottom: 0.75em;
}
ul.dot li:before {
  content: "・";
}

.loan_box {
  background: #E7E7E7;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 1.25rem;
}

/* 「こちらの記事もおすすめ」 */
.Related-article {
  margin-bottom: 2rem;
}
.Related-article a {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  padding: 10px;
  min-height: 96px;
  border: 3px solid #0D5C2F;
  background-color: #FFF;
  position: relative;
  transition: background-color 0.5s;
}
@media screen and (max-width: 599px) {
  .Related-article a {
    flex-direction: column;
    row-gap: 0.5rem;
  }
}
.Related-article a .left {
  width: 14.8%;
}
@media screen and (max-width: 599px) {
  .Related-article a .left {
    width: 100%;
  }
}
.Related-article a .left img {
  display: block;
  width: 100%;
  aspect-ratio: 100/72;
}
.Related-article a .right {
  width: calc(85.2% - 10px);
}
@media screen and (max-width: 599px) {
  .Related-article a .right {
    width: 100%;
  }
}
.Related-article a .right .blogCtBox > span {
  padding: 4px 1em;
  text-align: center;
  color: #fff;
  line-height: 0.8;
  margin-bottom: 0.5em;
}
.Related-article a .right .blogCtBox > span.media {
  background: #0D5C2F;
}
.Related-article a .right .blogCtBox > span.media-pv {
  background: #D93600;
}
.Related-article a .right .blogCtBox > span.media-all {
  background: #0085B2;
}
.Related-article a .right .blogCtBox > span.media-battery {
  background: #B28500;
}
.Related-article a .right .blogCtBox > span.media-smart {
  background: #CF0EA4;
}
.Related-article a .right > span:nth-of-type(2) {
  text-decoration: underline;
  text-decoration-color: #000;
  text-decoration-thickness: 1px;
}
@media screen and (max-width: 599px) {
  .Related-article a .right > span:nth-of-type(2) {
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
  }
}
.Related-article a:hover {
  background-color: #FFFFBB;
}
.Related-article a:hover .right > span:nth-of-type(2) {
  text-decoration: none;
}

/**
* PC・SP版　両方で読み込んでいます
* ネイティブCSSで構築するのは困難になってきたので、
* SCSSに変換しました。
*/
/**
* PC・SP版　両方で読み込んでいます
* ネイティブCSSで構築するのは困難になってきたので、
* SCSSに変換しました。
*/
.area_appeal {
  background-color: #EEEEEE;
  padding: 1rem;
}
.area_appeal h2 {
  margin: 0 0 20px;
  color: #E50011;
  text-align: center;
  font-size: 14px;
}
.area_appeal h3 {
  margin: 0 0 10px;
  color: #333;
  font-size: 12px;
  text-align: center;
}
.area_appeal .area_appeal_list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: 2rem;
}
.area_appeal .area_appeal_list li {
  width: 50%;
  border-bottom: solid 1px #EEEEEE;
  background-color: #fff;
  padding: 0.5rem;
}
.area_appeal .area_appeal_list li:nth-child(odd) {
  border-right: solid 1px #EEEEEE;
}
.area_appeal .area_appeal_list li a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
  text-decoration: none;
}
.area_appeal .area_appeal_list li a picture {
  width: 100%;
}
.area_appeal .area_appeal_list li a picture img {
  display: block;
  margin: 0 auto;
  max-width: 68px;
  aspect-ratio: 68/47;
  object-fit: cover;
}
.area_appeal .area_appeal_list li a h4 {
  font-weight: bold;
  margin-bottom: 0;
}

.present_202404_banners {
  margin-bottom: 5rem;
}
@media screen and (max-width: 599px) {
  .present_202404_banners {
    margin-bottom: 3rem;
  }
}
.present_202404_banners h2 {
  text-align: center;
  color: #E50011;
  font-weight: bold;
  line-height: 1.25;
  padding: 0.5rem 0 0.25rem;
  border: solid 2px #E50011;
  border-left: none;
  border-right: none;
  margin-bottom: 1rem;
}
.present_202404_banners h2 span:nth-of-type(1) {
  font-size: 16px;
}
.present_202404_banners h2 span:nth-of-type(2) {
  font-size: 20px;
}
.present_202404_banners .banner {
  display: block;
  margin-bottom: 1rem;
}
.present_202404_banners > p {
  font-weight: bold;
  text-align: center;
  font-size: 15px;
  margin-bottom: 1rem;
  line-height: 1.3;
}
.present_202404_banners h4 {
  text-align: center;
  color: #FE0001;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 1rem;
}
.present_202404_banners ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.present_202404_banners ul li {
  display: block;
  width: calc(25% - 0.75rem);
  aspect-ratio: 173/100;
  background-color: #fff;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
  padding: 0.25rem;
  margin-bottom: 2rem;
}
.present_202404_banners ul li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-banner {
  margin-bottom: 20px;
}
.product-banner a {
  display: block;
  text-decoration: none;
}
.product-banner img {
  display: block;
  width: 100%;
}
.product-banner p {
  display: inline-block;
  color: #e50011;
  font-weight: bold;
  font-size: 14px;
  text-align: left;
  margin-top: 1em;
  text-decoration: underline;
  text-decoration-color: #e50011;
  transition: 0.5s;
  line-height: 1.25;
}
.product-banner a:hover p {
  opacity: 0.5;
}

.link-button01 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background-color: #E50011;
  border-radius: 5px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  max-width: 380px;
  width: 100%;
  height: 3.5rem;
  line-height: 1;
  color: #fff !important;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  margin: 0 auto;
  position: relative;
}
.link-button01:after {
  content: "＞";
  display: block;
  color: #fff !important;
  font-weight: bold;
  line-height: 1;
  width: 1em;
  height: 1em;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1em;
  margin: auto 0;
}
.link-button01:hover {
  filter: brightness(1.2);
}

.makers-link {
  margin: 3rem auto;
  border: solid 2px #E50011;
  background-color: #FFE1E3;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 599px) {
  .makers-link {
    max-width: 92vw;
  }
}
.makers-link h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 62px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  padding-left: 1rem;
  background-color: #E50011;
  border-radius: 5px 5px 0 0;
  position: relative;
}
@media screen and (max-width: 599px) {
  .makers-link h2 {
    font-size: 18px;
  }
}
.makers-link h2:after {
  content: "";
  display: block;
  width: auto;
  height: 100%;
  aspect-ratio: 1/1;
  background-image: url("../ecoAllTmp/images/top_all_img01.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  bottom: 0;
  right: 0;
}
.makers-link ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 1rem;
}
.makers-link ul li {
  width: calc(25% - 12px);
}
@media screen and (max-width: 599px) {
  .makers-link ul li {
    width: calc(50% - 8px);
  }
}
.makers-link ul li a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  aspect-ratio: 165/61;
  background-color: #fff;
  border: solid 1px #ccc;
  border-bottom-width: 4px;
  border-radius: 5px;
  padding: 0.5rem;
  position: relative;
}
.makers-link ul li a:after {
  content: "";
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  background-image: url("../common/com_arr01.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0.25rem;
  margin: auto 0;
  transition: 0.5s;
}
.makers-link ul li a:hover:after {
  translate: 0.25rem 0;
}
.makers-link ul li a img {
  width: 80%;
  height: 100%;
  object-fit: contain;
}

.cities-link {
  margin: 1.5rem auto;
  max-width: 980px;
}
.cities-link h3 {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
#top .cities-link h3 {
  margin-bottom: 0;
  background-color: transparent;
  box-shadow: none;
}

.cities-link ul {
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 1rem;
  margin-bottom: 1rem;
}
.cities-link ul li {
  display: block;
}
.cities-link ul li a {
  --area-color: var(--area-color-kansai);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  line-height: 1;
  height: 1.75em;
  text-decoration: none;
  border: solid 2px var(--area-color);
  border-radius: 1000px;
  padding: 0 1em;
  color: #000;
  text-align: center;
  font-weight: bold;
  transition: 0.5s;
}
.cities-link ul li a.kanto {
  --area-color: var(--area-color-kanto);
}
.cities-link ul li a.chubu {
  --area-color: var(--area-color-chubu);
}
.cities-link ul li a.chugoku {
  --area-color: var(--area-color-chugoku);
}
.cities-link ul li a.shikoku {
  --area-color: var(--area-color-shikoku);
}
.cities-link ul li a.hokuriku {
  --area-color: var(--area-color-hokuriku);
}
.cities-link ul li a.kyushu {
  --area-color: var(--area-color-kyushu);
}
.cities-link ul li a.tohoku {
  --area-color: var(--area-color-tohoku);
}
.cities-link ul li a.hokkaido {
  --area-color: var(--area-color-hokkaido);
}
.cities-link ul li a.current, .cities-link ul li a:hover {
  background-color: var(--area-color);
  color: #fff;
}
.cities-link ul li a.current {
  pointer-events: none;
}
.cities-link p:last-child {
  text-align: center;
  font-size: 1rem;
}

section.products-display01 {
  max-width: 92vw;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem;
}
section.products-display01 > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  column-gap: 1rem;
  row-gap: 2rem;
}
section.products-display01 > ul > li {
  --frame-color: #E50011;
  --frame-border-color: #E50011;
  --headline-color: #fff;
  --medal-image: url("../images/products-display/ranking-medal_02.webp");
  width: calc(50% - 0.5rem);
}
section.products-display01 > ul > li:has(h3 .medal) {
  --frame-color: #F0F0F0;
  --frame-border-color: #CCCCCC;
  --headline-color: #000;
}
section.products-display01 > ul > li:has(h3 .medal):nth-child(1) {
  --frame-color: #D4B02E;
  --frame-border-color: #D4B02E;
  --headline-color: #fff;
  --medal-image: url("../images/products-display/ranking-medal_gold.webp");
}
section.products-display01 > ul > li:has(h3 .medal):nth-child(2) {
  --frame-color: #666867;
  --frame-border-color: #666867;
  --headline-color: #fff;
  --medal-image: url("../images/products-display/ranking-medal_silver.webp");
}
section.products-display01 > ul > li:has(h3 .medal):nth-child(3) {
  --frame-color: #976A40;
  --frame-border-color: #976A40;
  --headline-color: #fff;
  --medal-image: url("../images/products-display/ranking-medal_bronze.webp");
}
section.products-display01 > ul > li:has(h3 .medal):nth-child(4), section.products-display01 > ul > li:has(h3 .medal):nth-child(5), section.products-display01 > ul > li:has(h3 .medal):nth-child(6) {
  --medal-image: url("../images/products-display/ranking-medal_01.webp");
}
section.products-display01 > ul > li:has(h3 .medal):nth-child(4) {
  --frame-color: #E50011;
  --frame-border-color: #E50011;
  --headline-color: #fff;
}
section.products-display01 > ul > li:has(h3 .medal):nth-child(5) {
  --frame-color: #0032A6;
  --frame-border-color: #0032A6;
  --headline-color: #fff;
}
section.products-display01 > ul > li:has(h3 .medal):nth-child(6) {
  --frame-color: #00A63B;
  --frame-border-color: #00A63B;
  --headline-color: #fff;
}
section.products-display01 > ul > li a {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  text-decoration: none;
  border: solid 1px var(--frame-border-color);
  border-radius: 5px;
  transition: filter 0.5s;
}
@media screen and (max-width: 599px) {
  section.products-display01 > ul > li a {
    flex-direction: column;
    align-items: center;
  }
}
section.products-display01 > ul > li a:hover {
  filter: brightness(1.1);
}
section.products-display01 > ul > li a:hover img {
  opacity: 1 !important;
}
section.products-display01 > ul > li a h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background-color: var(--frame-color);
  border-bottom: solid 1px var(--frame-border-color);
  width: 100%;
  height: 27px;
  padding-top: 2px;
  margin-bottom: 0.5rem;
  position: relative;
}
@media screen and (max-width: 599px) {
  section.products-display01 > ul > li a h3 {
    height: 5.3vw;
  }
}
section.products-display01 > ul > li a h3 span:not([class]) {
  color: var(--headline-color);
  text-align: center;
  font-size: 18px;
  line-height: 1;
  font-weight: bold;
}
@media screen and (max-width: 599px) {
  section.products-display01 > ul > li a h3 span:not([class]) {
    font-size: 3.7vw;
  }
}
section.products-display01 > ul > li a h3 .medal {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  line-height: 1;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  background-image: var(--medal-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1rem;
  margin: auto 0;
}
@media screen and (max-width: 599px) {
  section.products-display01 > ul > li a h3 .medal {
    font-size: 5.3vw;
  }
}
@media screen and (max-width: 599px) {
  section.products-display01 > ul > li a h3 .medal {
    width: 9.9vw;
    height: 9.9vw;
    right: 0.5rem;
  }
}
section.products-display01 > ul > li a .image-area {
  width: 45%;
  aspect-ratio: 1/1;
  padding: 0.25rem;
}
@media screen and (max-width: 599px) {
  section.products-display01 > ul > li a .image-area {
    width: 26.7vw;
    padding: 0;
  }
}
section.products-display01 > ul > li a .image-area img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
section.products-display01 > ul > li a .descriptions-area {
  width: 55%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-around;
  padding: 0.5rem;
}
@media screen and (max-width: 599px) {
  section.products-display01 > ul > li a .descriptions-area {
    width: 100%;
    padding-bottom: 1.2rem;
  }
}
section.products-display01 > ul > li a .descriptions-area > ul {
  max-width: 151px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}
@media screen and (max-width: 599px) {
  section.products-display01 > ul > li a .descriptions-area > ul {
    max-width: 100%;
  }
}
section.products-display01 > ul > li a .descriptions-area > ul li {
  width: calc(50% - 0.125rem);
  height: 20px;
  border-radius: 5px;
  background-color: #AFAFAF;
  line-height: 1;
  font-size: 11px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 599px) {
  section.products-display01 > ul > li a .descriptions-area > ul li {
    font-size: 2.9vw;
  }
}
@media screen and (max-width: 599px) {
  section.products-display01 > ul > li a .descriptions-area > ul li {
    height: 5.3vw;
    padding-top: 0.2em;
  }
}
section.products-display01 > ul > li a .descriptions-area > ul li.purpose {
  background-color: #D9AD8B;
}
section.products-display01 > ul > li a .descriptions-area > ul li.capacity {
  background-color: #8B91D9;
}
section.products-display01 > ul > li a .descriptions-area .product-name {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0.25rem;
}
@media screen and (max-width: 599px) {
  section.products-display01 > ul > li a .descriptions-area .product-name {
    font-size: 2.9vw;
  }
}
section.products-display01 > ul > li a .descriptions-area .product-number {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
@media screen and (max-width: 599px) {
  section.products-display01 > ul > li a .descriptions-area .product-number {
    font-size: 3.7vw;
  }
}
section.products-display01 > ul > li a .descriptions-area .services {
  font-size: 14px;
  margin-bottom: 0.5rem;
  font-weight: bold;
}
@media screen and (max-width: 599px) {
  section.products-display01 > ul > li a .descriptions-area .services {
    font-size: 2.9vw;
  }
}
section.products-display01 > ul > li a .descriptions-area .services > span {
  color: #E50011;
}
section.products-display01 > ul > li a .descriptions-area .sales-price {
  font-size: 14px;
  font-weight: bold;
}
@media screen and (max-width: 599px) {
  section.products-display01 > ul > li a .descriptions-area .sales-price {
    font-size: 3.7vw;
  }
}
section.products-display01 > ul > li a .descriptions-area .sales-price b {
  font-size: 24px;
  color: #E50011;
  font-weight: bold;
}
@media screen and (max-width: 599px) {
  section.products-display01 > ul > li a .descriptions-area .sales-price b {
    font-size: 4.8vw;
  }
}

.Option-single-price-list {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem;
}
@media screen and (max-width: 599px) {
  .Option-single-price-list {
    max-width: 95.2vw;
  }
}
.Option-single-price-list dl {
  width: 100%;
  margin: 0 auto;
  border: solid 1px #CC0000;
  border-radius: 5px;
}
.Option-single-price-list dl > div {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.Option-single-price-list dl > div:not(:last-child) {
  border-bottom: solid 1px #CC0000;
}
.Option-single-price-list dl > div dt,
.Option-single-price-list dl > div dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0.9em;
  font-size: 16px;
}
@media screen and (max-width: 599px) {
  .Option-single-price-list dl > div dt,
  .Option-single-price-list dl > div dd {
    font-size: 3.7vw;
  }
}
.Option-single-price-list dl > div dt {
  justify-content: flex-start;
  font-weight: bold;
  background-color: #E4E4E4;
  width: 36.4%;
  text-align: left;
  white-space: nowrap;
}
@media screen and (max-width: 599px) {
  .Option-single-price-list dl > div dt {
    width: 60.2%;
  }
}
.Option-single-price-list dl > div dd {
  justify-content: flex-end;
  width: 63.6%;
  text-align: right;
}
@media screen and (max-width: 599px) {
  .Option-single-price-list dl > div dd {
    width: 39.8%;
  }
}
.Option-single-price-list dl > div:first-child dt {
  border-radius: 5px 0 0 0;
}
.Option-single-price-list dl > div:last-child dt {
  border-radius: 0 0 0 5px;
}
.Option-single-price-list > section {
  width: 100%;
  margin: 3rem auto 0;
  position: relative;
}
.Option-single-price-list > section > span:first-child {
  color: #000;
  font-weight: bold;
  text-align: center;
  width: 100%;
  font-size: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
}
@media screen and (max-width: 599px) {
  .Option-single-price-list > section > span:first-child {
    font-size: 4.3vw;
  }
}
.Option-single-price-list > section > span:first-child > b {
  font-size: 20px;
}
@media screen and (max-width: 599px) {
  .Option-single-price-list > section > span:first-child > b {
    font-size: 5.3vw;
  }
}
.Option-single-price-list > section > span:first-child > b > span {
  color: #E50011;
}
.Option-single-price-list > section > span:first-child:before {
  content: "＼";
}
.Option-single-price-list > section > span:first-child:after {
  content: "／";
}
.Option-single-price-list > section h3 {
  background-color: #CC0000;
  min-height: 2.5rem;
  text-align: center;
  color: #fff;
  font-weight: bold;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-top: 0.25rem;
  border-radius: 5px 5px 0 0;
}
@media screen and (max-width: 599px) {
  .Option-single-price-list > section h3 {
    min-height: 17.1vw;
  }
}
.Option-single-price-list > section h3 > span {
  line-height: 1;
}
.Option-single-price-list > section h3 > span:nth-child(1) {
  font-size: 24px;
  margin-bottom: 0.5rem;
}
@media screen and (max-width: 599px) {
  .Option-single-price-list > section h3 > span:nth-child(1) {
    font-size: 4.3vw;
  }
}
.Option-single-price-list > section h3 > span:nth-child(2) {
  font-size: 16px;
}
@media screen and (max-width: 599px) {
  .Option-single-price-list > section h3 > span:nth-child(2) {
    font-size: 3.7vw;
  }
}
.Option-single-price-list > section h3 > span:nth-child(2) b {
  font-size: 18px;
  color: #FFFF00;
}
@media screen and (max-width: 599px) {
  .Option-single-price-list > section h3 > span:nth-child(2) b {
    font-size: 4.3vw;
  }
}
.Option-single-price-list > section dl {
  width: 100%;
  border-radius: 0 0 5px 5px;
}
.Option-single-price-list > section dl > div:first-child dt {
  border-radius: 0;
}

.Great-value-products {
  max-width: 92vw;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem;
}
.Great-value-products ul li:not(:last-child) {
  margin-bottom: 2rem;
}
.Great-value-products ul li a {
  transition: filter 0.5s;
}
.Great-value-products ul li a img {
  display: block;
}
.Great-value-products ul li a:hover, .Great-value-products ul li a:active {
  filter: brightness(1.1);
}
.Great-value-products ul li a:hover img, .Great-value-products ul li a:active img {
  opacity: 1 !important;
}

.call-to-action {
  background-color: #E50011;
  padding: 2rem 0;
  margin: 0 auto 3rem;
}
.call-to-action .inner {
  max-width: 93%;
  border-radius: 20px;
  background-color: #fff;
  margin: 0 auto;
  padding: 2rem;
}
@media screen and (max-width: 599px) {
  .call-to-action .inner {
    padding: 2rem 1rem;
  }
}
.call-to-action .inner h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #E50011;
  padding-bottom: 1rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  position: relative;
}
@media screen and (max-width: 599px) {
  .call-to-action .inner h2 {
    font-size: 3.7vw;
  }
}
@media screen and (max-width: 599px) {
  .call-to-action .inner h2 {
    padding-bottom: 0.25rem;
  }
}
.call-to-action .inner h2 img {
  display: block;
  position: absolute;
  bottom: 0;
}
.call-to-action .inner h2 img:nth-of-type(1) {
  width: 88px;
  aspect-ratio: 88/147;
  left: 0;
}
@media screen and (max-width: 599px) {
  .call-to-action .inner h2 img:nth-of-type(1) {
    width: 12.7vw;
  }
}
.call-to-action .inner h2 img:nth-of-type(2) {
  width: 106px;
  aspect-ratio: 106/69;
  right: 0;
}
@media screen and (max-width: 599px) {
  .call-to-action .inner h2 img:nth-of-type(2) {
    width: 15.8vw;
  }
}
.call-to-action .inner ul li:not(:last-child) {
  margin-bottom: 1.5rem;
}
.call-to-action .inner ul li a {
  --shadow-width: 4px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
  border-radius: 5px;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  padding-top: 0.5rem;
  transition: 0.5s;
}
@media screen and (max-width: 599px) {
  .call-to-action .inner ul li a {
    height: 16vw;
  }
}
.call-to-action .inner ul li a.Estimate {
  font-size: 20px;
  background-color: #E50011;
  box-shadow: 0 var(--shadow-width) 0 #B3000D;
  position: relative;
}
@media screen and (max-width: 599px) {
  .call-to-action .inner ul li a.Estimate {
    font-size: 4.3vw;
  }
}
.call-to-action .inner ul li a.Estimate:after {
  content: "";
  display: block;
  font-size: 13px;
  width: 1em;
  height: 1em;
  background-image: url("../images/common/icon_circle-arrow.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2em;
  margin: auto 0;
  transition: 0.5s;
}
@media screen and (max-width: 599px) {
  .call-to-action .inner ul li a.Estimate:after {
    font-size: 3.5vw;
  }
}
@media screen and (max-width: 599px) {
  .call-to-action .inner ul li a.Estimate:after {
    right: 1em;
  }
}
.call-to-action .inner ul li a.tel {
  background-color: #00A63B;
  box-shadow: 0 var(--shadow-width) 0 #007016;
}
.call-to-action .inner ul li a.tel span:nth-child(1) {
  color: #FFFF86;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 0.25em;
}
@media screen and (max-width: 599px) {
  .call-to-action .inner ul li a.tel span:nth-child(1) {
    font-size: 3.2vw;
  }
}
.call-to-action .inner ul li a.tel span:nth-child(1):before {
  content: "＼";
}
.call-to-action .inner ul li a.tel span:nth-child(1):after {
  content: "／";
}
.call-to-action .inner ul li a.tel span:nth-child(2) {
  font-size: 28px;
  padding-left: calc(1em + 6px);
  position: relative;
}
@media screen and (max-width: 599px) {
  .call-to-action .inner ul li a.tel span:nth-child(2) {
    font-size: 5.6vw;
  }
}
.call-to-action .inner ul li a.tel span:nth-child(2):before {
  content: "";
  display: block;
  width: 0.8em;
  height: 0.8em;
  background-image: url("../images/common/icon_tel.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
}
.call-to-action .inner ul li a:hover {
  filter: brightness(1.1);
  translate: 0 4px;
}
.call-to-action .inner ul li a:hover.Estimate {
  box-shadow: 0 0 0 #B3000D;
}
.call-to-action .inner ul li a:hover.tel {
  box-shadow: 0 0 0 #007016;
}
.call-to-action .inner ul li a:hover:after {
  translate: 1em 0;
}

ul.subsidy-target-ecocute__banners {
  margin-bottom: 3rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  column-gap: 1.4%;
  row-gap: 1rem;
}
@media screen and (max-width: 599px) {
  ul.subsidy-target-ecocute__banners {
    max-width: 95.2vw;
    flex-direction: column;
  }
}
ul.subsidy-target-ecocute__banners > li.maker_hitachi {
  --color-head: #282828;
  --color-back: #5E5E5C;
  --color-lightshadow: #CCCCCC;
}
ul.subsidy-target-ecocute__banners > li.maker_daikin {
  --color-head: #0048AB;
  --color-back: #10A9E9;
  --color-lightshadow: #D0EEFB;
}
ul.subsidy-target-ecocute__banners > li.maker_mitsubishi {
  --color-head: #B50005;
  --color-back: #F86169;
  --color-lightshadow: #FCDFE0;
}
ul.subsidy-target-ecocute__banners > li.maker_panasonic {
  --color-head: #002865;
  --color-back: #0E64B7;
  --color-lightshadow: #D0EEFB;
}
ul.subsidy-target-ecocute__banners > li.maker_corona {
  --color-head: #00472D;
  --color-back: #33B07D;
  --color-lightshadow: #D5F0E5;
}
ul.subsidy-target-ecocute__banners > li {
  width: 49.3%;
}
@media screen and (max-width: 599px) {
  ul.subsidy-target-ecocute__banners > li {
    width: 100%;
  }
}
ul.subsidy-target-ecocute__banners > li a {
  display: block;
  border: solid 1px var(--color-head);
  border-radius: 5px;
  background-color: var(--color-back);
  text-decoration: none;
  padding-bottom: 1rem;
  transition: 0.5s;
}
ul.subsidy-target-ecocute__banners > li a:hover {
  filter: brightness(1.2);
}
ul.subsidy-target-ecocute__banners > li a:hover img {
  opacity: 1 !important;
}
ul.subsidy-target-ecocute__banners > li a > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  background-color: var(--color-head);
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  border-radius: 5px 5px 0 0;
}
@media screen and (max-width: 599px) {
  ul.subsidy-target-ecocute__banners > li a > span {
    font-size: 4.3vw;
  }
}
ul.subsidy-target-ecocute__banners > li a > span b {
  font-size: 18px;
  color: #ffff00;
}
@media screen and (max-width: 599px) {
  ul.subsidy-target-ecocute__banners > li a > span b {
    font-size: 4.8vw;
  }
}
ul.subsidy-target-ecocute__banners > li a > div {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  position: relative;
}
ul.subsidy-target-ecocute__banners > li a > div > .annotation {
  text-align: right;
  font-size: 10px;
  color: #fff;
  position: absolute;
  top: 0.5em;
  right: 0.5em;
}
@media screen and (max-width: 599px) {
  ul.subsidy-target-ecocute__banners > li a > div > .annotation {
    font-size: 2.7vw;
  }
}
ul.subsidy-target-ecocute__banners > li a > div .image-area {
  width: 45%;
  max-height: 10rem;
  padding-top: 1.5rem;
  position: relative;
}
ul.subsidy-target-ecocute__banners > li a > div .image-area > img:not([class]) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
ul.subsidy-target-ecocute__banners > li a > div .image-area > img.product-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
ul.subsidy-target-ecocute__banners > li a > div .product-datas {
  width: 55%;
  padding-top: 1.5rem;
  padding-right: 0.25rem;
}
ul.subsidy-target-ecocute__banners > li a > div .product-datas > ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  column-gap: 4.2%;
  row-gap: 0.25rem;
  margin-bottom: 0.5rem;
}
ul.subsidy-target-ecocute__banners > li a > div .product-datas > ul li {
  width: 47.9%;
  background-color: #fff;
  border-radius: 5px;
  min-height: 24px;
  border-bottom: solid 3px var(--color-lightshadow);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}
@media screen and (max-width: 599px) {
  ul.subsidy-target-ecocute__banners > li a > div .product-datas > ul li {
    font-size: 3.2vw;
  }
}
ul.subsidy-target-ecocute__banners > li a > div .product-datas > ul li > img {
  max-width: 80%;
}
ul.subsidy-target-ecocute__banners > li a > div .product-datas .komikomi p {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 0 var(--color-head);
  line-height: 1.2;
}
ul.subsidy-target-ecocute__banners > li a > div .product-datas .komikomi p span:nth-child(1) {
  font-size: 14px;
}
@media screen and (max-width: 599px) {
  ul.subsidy-target-ecocute__banners > li a > div .product-datas .komikomi p span:nth-child(1) {
    font-size: 3.2vw;
  }
}
ul.subsidy-target-ecocute__banners > li a > div .product-datas .komikomi p span:nth-child(2) b {
  font-size: 20px;
}
@media screen and (max-width: 599px) {
  ul.subsidy-target-ecocute__banners > li a > div .product-datas .komikomi p span:nth-child(2) b {
    font-size: 5.3vw;
  }
}
ul.subsidy-target-ecocute__banners > li a > div .product-datas .komikomi p span:nth-child(2) b strong {
  color: #ffff00;
  font-weight: inherit;
  font-size: 26px;
}
@media screen and (max-width: 599px) {
  ul.subsidy-target-ecocute__banners > li a > div .product-datas .komikomi p span:nth-child(2) b strong {
    font-size: 6.4vw;
  }
}
ul.subsidy-target-ecocute__banners > li a > div .product-datas .komikomi p span:nth-child(2) small {
  font-size: 12px;
}
@media screen and (max-width: 599px) {
  ul.subsidy-target-ecocute__banners > li a > div .product-datas .komikomi p span:nth-child(2) small {
    font-size: 3.2vw;
  }
}
ul.subsidy-target-ecocute__banners > li a > div .product-datas .komikomi p span:nth-child(3) {
  font-size: 14px;
}
@media screen and (max-width: 599px) {
  ul.subsidy-target-ecocute__banners > li a > div .product-datas .komikomi p span:nth-child(3) {
    font-size: 3.2vw;
  }
}
ul.subsidy-target-ecocute__banners > li a > div .prices {
  width: 90.5%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
ul.subsidy-target-ecocute__banners > li a > div .prices .prices__arrow {
  width: 25.7%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  aspect-ratio: 83/42;
  background-image: url("../images/subsidy-target-ecocute/arrow.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
  font-weight: bold;
  text-align: center;
  color: #E50011;
  font-size: 16px;
}
@media screen and (max-width: 599px) {
  ul.subsidy-target-ecocute__banners > li a > div .prices .prices__arrow {
    font-size: 3.7vw;
  }
}
ul.subsidy-target-ecocute__banners > li a > div .prices p {
  text-align: right;
}
ul.subsidy-target-ecocute__banners > li a > div .prices p span {
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 0 var(--color-head);
}
ul.subsidy-target-ecocute__banners > li a > div .prices p span:nth-child(1) {
  writing-mode: vertical-rl;
  font-size: 18px;
}
@media screen and (max-width: 599px) {
  ul.subsidy-target-ecocute__banners > li a > div .prices p span:nth-child(1) {
    font-size: 4.8vw;
  }
}
ul.subsidy-target-ecocute__banners > li a > div .prices p span:nth-child(2) {
  text-shadow: 2px 2px 0 var(--color-head);
  font-size: 42px;
  color: #FFEE00;
}
@media screen and (max-width: 599px) {
  ul.subsidy-target-ecocute__banners > li a > div .prices p span:nth-child(2) {
    font-size: 11.2vw;
  }
}
ul.subsidy-target-ecocute__banners > li a > div .prices p span:nth-child(3) {
  font-size: 18px;
  color: #FFEE00;
}
@media screen and (max-width: 599px) {
  ul.subsidy-target-ecocute__banners > li a > div .prices p span:nth-child(3) {
    font-size: 4.8vw;
  }
}
ul.subsidy-target-ecocute__banners > li a > div .product-name {
  width: 90.5%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 5px;
  background-color: var(--color-lightshadow);
  box-shadow: 0 2px 0 var(--color-head);
}
ul.subsidy-target-ecocute__banners > li a > div .product-name p {
  text-align: center;
  font-weight: bold;
  color: var(--color-head);
  font-size: 14px;
}
@media screen and (max-width: 599px) {
  ul.subsidy-target-ecocute__banners > li a > div .product-name p {
    font-size: 3.7vw;
  }
}

#ecocute_subsidy-compatibles {
  max-width: calc(100% - 10px);
  margin-left: auto;
  margin-right: auto;
}
#ecocute_subsidy-compatibles h2 {
  margin-bottom: 0;
}
#ecocute_subsidy-compatibles ul {
  list-style-type: none;
}
#ecocute_subsidy-compatibles ul li:not(:last-child) {
  margin-bottom: 2rem;
}
#ecocute_subsidy-compatibles ul li a {
  display: block;
  color: #E50011;
  width: 100%;
  text-decoration-color: #E50011;
}
#ecocute_subsidy-compatibles ul li a img {
  width: 100%;
  margin-bottom: 1rem;
}
#ecocute_subsidy-compatibles ul li a p {
  color: #E50011;
  font-weight: bold;
  text-decoration-color: #E50011;
}

.blogparts_cta01 {
  margin: 3rem auto;
  padding: 2rem;
  border-top: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
}
.blogparts_cta01 > p:last-child {
  margin-bottom: 0 !important;
}

@media screen and (max-width: 599px) {
  #single_content .table-scroll {
    overflow-x: scroll;
  }
  #single_content .table-scroll > table {
    width: 150vw;
  }
}

.error-code-cta .title {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 26px !important;
  color: #FFFF00;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 0.5em 1em;
  border-radius: 1000px;
  background-color: #005C34;
  margin-bottom: 1em !important;
}
@media screen and (max-width: 599px) {
  .error-code-cta .title {
    font-size: 5.3vw !important;
  }
}
.error-code-cta .message01 {
  font-size: 14px;
  text-align: center;
}
@media screen and (max-width: 599px) {
  .error-code-cta .message01 {
    font-size: 3.7vw !important;
  }
}
.error-code-cta .message01 b {
  font-weight: bold;
}
.error-code-cta .mail-link {
  display: block;
  max-width: 426px;
  aspect-ratio: 426/86;
  margin: 2rem auto;
}
.error-code-cta .mail-link img {
  display: block;
}
.error-code-cta .message02 {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1em;
}
@media screen and (max-width: 599px) {
  .error-code-cta .message02 {
    font-size: 4.8vw !important;
  }
}
.error-code-cta .maker-tel {
  width: max-content;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border: solid 2px #005831;
  border-radius: 1000px;
  margin: 1rem auto;
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  color: #005831;
  text-align: center;
  text-decoration: none;
  padding: 0.5em 0.75em 0.3em;
  padding-left: 1.5em;
  position: relative;
  transition: 0.5s;
}
@media screen and (max-width: 599px) {
  .error-code-cta .maker-tel {
    font-size: 7.5vw !important;
  }
}
.error-code-cta .maker-tel:before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJfeDMyXyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4gIDxkZWZzPiA8c3R5bGU+IC5zdDAgeyBmaWxsOiAjMDA1ODMxOyB9IDwvc3R5bGU+IDwvZGVmcz4gPHBhdGggY2xhc3M9InN0MCIgZD0iTTk0LjgsMjEuN2MtMzUuMiwyMi44LTQyLjEsOTQuMS0yOC44LDE1Mi4zLDEwLjMsNDUuMywzMi4zLDEwNiw2OS40LDE2My4yLDM0LjksNTMuOCw4My42LDEwMiwxMjAuNywxMjkuOSw0Ny43LDM1LjgsMTE1LjYsNTguNiwxNTAuOCwzNS44LDE3LjgtMTEuNSw0NC4yLTQzLjEsNDUuNC00OC43LDAsMC0xNS41LTIzLjktMTguOS0yOS4xbC01Mi04MC4xYy0zLjktNi0yOC4xLS41LTQwLjQsNi41LTE2LjYsOS40LTMxLjksMzQuNi0zMS45LDM0LjYtMTEuNCw2LjYtMjAuOSwwLTQwLjgtOS4xLTI0LjUtMTEuMy01Mi00Ni4zLTczLjktNzcuOS0yMC0zMi45LTQwLjctNzIuMy00MS05OS4zLS4yLTIxLjktMi4zLTMzLjMsOC4zLTQxLDAsMCwyOS4zLTMuNyw0NC42LTE1LDExLjQtOC40LDI2LjItMjguMywyMi40LTM0LjJsLTUyLTgwLjFDMTczLjMsMjQsMTU3LjgsMCwxNTcuOCwwYy01LjctMS4yLTQ1LjIsMTAuMS02MywyMS42WiIvPjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  inset: 0 0 0 0.5em;
  margin: auto 0;
  transition: 0.5s;
}
.error-code-cta .maker-tel:hover {
  background-color: #005831;
  color: #fff;
}
.error-code-cta .maker-tel:hover:before {
  filter: invert(100%) sepia(100%) saturate(14%) hue-rotate(212deg) brightness(104%) contrast(104%);
}

.single-content-bottom > .error-code-cta {
  padding: 3rem 0;
}

/* 「エコキュートを探す」などの商品検索ユニット */
.unit_search-product__parent {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  row-gap: 2rem;
  margin-bottom: 3rem;
}
@media screen and (max-width: 599px) {
  .unit_search-product__parent {
    max-width: 95vw;
    margin-left: auto;
    margin-right: auto;
  }
}

.unit_search-product__parent:has(.search-product:nth-of-type(2)) .search-product {
  width: calc(50% - 0.5rem);
}
@media screen and (max-width: 599px) {
  .unit_search-product__parent:has(.search-product:nth-of-type(2)) .search-product {
    width: 100%;
  }
}

.search-product {
  width: 100%;
  /* max-width: 474px; */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
  padding: 4rem 1rem 1rem;
  border: solid 3px #E50011;
  border-radius: 5px;
  background-color: #FFE1E3;
  position: relative;
}
.search-product * {
  box-sizing: border-box;
}
.search-product h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 62px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  padding-left: 1rem;
  background-color: #E50011;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 599px) {
  .search-product h2 {
    font-size: 4.8vw;
    height: 2.5em;
  }
}
.search-product h2 img {
  display: block;
  width: auto;
  height: calc(100% + 0.75rem);
  position: absolute;
  bottom: 2px;
  right: 2px;
}
.search-product.search-product__ihcook h2 img {
  width: 5rem;
  height: auto;
  bottom: 0;
  top: 0;
  margin: auto 0;
}
.search-product h3 {
  font-size: 14px;
  font-weight: bold;
  margin: 1em 0;
}
@media screen and (max-width: 599px) {
  .search-product h3 {
    font-size: 3.7vw;
  }
}
.search-product ul {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  line-height: 1;
}
.search-product ul li {
  width: calc(33.33% - 0.5rem);
  display: block;
  aspect-ratio: auto;
  line-height: 1;
}
@media screen and (max-width: 599px) {
  .search-product ul li li {
    width: calc(33.33% - 0.5rem);
  }
}
.search-product ul li a {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  color: #000;
  background-color: #fff;
  border-radius: 5px;
  border: solid 1px #CCCCCC;
  border-bottom-width: 4px;
  text-decoration: none;
  position: relative;
}
@media screen and (max-width: 599px) {
  .search-product ul li a {
    font-size: 3.5vw;
    height: 3em;
  }
}
.search-product ul li a img {
  width: 70%;
}
.search-product ul li a span {
  line-height: 1;
}
.search-product ul li a .gray {
  color: #999;
}
.search-product ul li a:before {
  content: "";
  display: block;
  width: calc(100% + 1px);
  height: calc(100% + 4px);
  border: solid 1px transparent;
  border-radius: 5px;
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: 3;
  pointer-events: none;
  transition: 0.5s;
}
.search-product ul li a:hover:before {
  border-color: #E50011;
}
.search-product ul li a:after {
  content: "";
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  background-image: url("../common/com_arr01.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0.125rem;
  margin: auto 0;
  transition: 0.5s;
}
.search-product ul li a:hover:after {
  transform: translateX(0.3em);
}
.search-product.search-product__waterheater {
  /*
      ul {
        li {
          max-width: 139px;

          a {
            padding-top: 1em;
            padding-bottom: 1em;
            line-height: 1.3;

            small {
              color: #999999;
            }
          }
        }
      }
  */
}

/* 「エコキュートを探す」などの商品検索ユニット　ここまで */
/* 施工事例ユニット */
.unit_constructions__parent {
  margin-bottom: 3rem;
}
@media screen and (max-width: 599px) {
  .unit_constructions__parent {
    margin-top: 3rem;
    max-width: 95vw;
    margin-left: auto;
    margin-right: auto;
  }
}

.unit_constructions {
  width: 100%;
}
.unit_constructions > p {
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 1em;
}
.unit_constructions .button-description {
  margin-top: 2rem;
  margin-bottom: 0;
  text-align: center;
  font-weight: bold;
}
.unit_constructions > a {
  display: block;
  background-color: #E50011;
  border-radius: 5px;
  margin: 0 auto 2rem;
  width: 100%;
  max-width: 320px;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 0.75em;
  text-decoration: none;
  box-shadow: 0 5px 2px #707070;
  transition: opacity 0.5s;
}
.unit_constructions > a:hover {
  opacity: 0.5;
}
.unit_constructions .constructions-list__areatop {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1rem;
}
.unit_constructions .constructions-list__areatop > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: calc(25% - 0.75rem);
  border: solid 1px #CCCCCC;
}
@media screen and (max-width: 599px) {
  .unit_constructions .constructions-list__areatop > li {
    width: calc(50% - 0.5rem);
  }
}
.unit_constructions .constructions-list__areatop > li .image-area {
  width: 100%;
  text-decoration: none;
}
.unit_constructions .constructions-list__areatop > li .image-area h3 {
  width: 100%;
  padding: 0.75rem;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  background-color: #F0F0F0;
  transition: color 0.5s;
}
@media screen and (max-width: 599px) {
  .unit_constructions .constructions-list__areatop > li .image-area h3 {
    font-size: 3.7vw;
  }
}
.unit_constructions .constructions-list__areatop > li .image-area:hover h3 {
  color: #E50011;
}
.unit_constructions .constructions-list__areatop > li .image-area picture {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
}
.unit_constructions .constructions-list__areatop > li .image-area picture img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.unit_constructions .constructions-list__areatop > li .status-area {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 0.5rem;
  flex: 1 1 auto;
  padding: 0.75rem;
}
.unit_constructions .constructions-list__areatop > li .status-area .categories {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
}
.unit_constructions .constructions-list__areatop > li .status-area .categories li {
  height: 1.25em;
  border: solid 1px #CCCCCC;
}
.unit_constructions .constructions-list__areatop > li .status-area .categories li a,
.unit_constructions .constructions-list__areatop > li .status-area .categories li span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 10px;
  text-align: center;
  color: #333;
  padding: 0.25rem;
  text-decoration: none;
}
@media screen and (max-width: 599px) {
  .unit_constructions .constructions-list__areatop > li .status-area .categories li a,
  .unit_constructions .constructions-list__areatop > li .status-area .categories li span {
    font-size: 2.7vw;
  }
}
.unit_constructions .constructions-list__areatop > li .status-area .see_details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background-color: #329700;
  border-radius: 5px;
  margin: 0 auto;
  width: 90%;
  padding: 0.75rem 0;
  color: #fff;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.5s;
}
@media screen and (max-width: 599px) {
  .unit_constructions .constructions-list__areatop > li .status-area .see_details {
    font-size: 3.7vw;
  }
}
.unit_constructions .constructions-list__areatop > li .status-area .see_details:hover {
  background-color: #65c137;
}

/* 施工事例ユニット　ここまで */
/* フッターのナビ部分 */
.footMain {
  border-left: none !important;
}

#footer-navi {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
@media screen and (max-width: 599px) {
  #footer-navi {
    width: 95vw;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
  }
}
#footer-navi > div {
  width: 33.33%;
  padding-left: 1rem;
  border-left: dotted 1px #fff;
}
#footer-navi > div:last-child {
  border-right: dotted 1px #fff;
}
@media screen and (max-width: 599px) {
  #footer-navi > div {
    width: 100%;
  }
}
#footer-navi > div h2 {
  font-size: 16px;
  text-align: center;
  padding: 1em 0;
  color: #fff;
  background-repeat: no-repeat;
  background-size: auto 2.5rem;
}
#footer-navi > div.ecopv h2 {
  background-image: url("../common/head_icon04.png");
  background-position: calc(50% + 4.5em) center;
}
#footer-navi > div.ecoall h2 {
  background-image: url("../common/head_icon05.png");
  background-position: calc(50% + 4.5em) center;
}
#footer-navi > div.battery h2 {
  background-image: url("../common/head_icon06.png");
  background-position: calc(50% + 3.5em) center;
}
#footer-navi > div ul li {
  background-image: none;
}
#footer-navi > div ul li:not(:last-child) {
  margin-bottom: 1rem;
}
#footer-navi > div ul li > ul {
  margin-top: 1rem;
  padding-left: 1rem;
}
#footer-navi > div ul li a {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  background-image: url("../common/com_arr02.png");
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 1em;
  text-decoration: none;
}
#footer-navi > div ul li a:hover {
  text-decoration: underline;
}

.mb_footer-navi {
  padding-top: 2rem;
  background-color: #990000;
  margin-top: -1px;
}
.mb_footer-navi.chubu {
  background-color: #096A00;
}
.mb_footer-navi.kanto {
  background-color: #003870;
}
.mb_footer-navi.chugoku {
  background-color: #009F9B;
}
.mb_footer-navi.shikoku {
  background-color: #1372C8;
}
.mb_footer-navi.hokuriku {
  background-color: #F0640F;
}
.mb_footer-navi.kyushu {
  background-color: #5C098A;
}
.mb_footer-navi.tohoku {
  background-color: #937200;
}
.mb_footer-navi.hokkaido {
  background-color: #365C40;
}
.mb_footer-navi #footer-navi > div {
  padding-bottom: 3rem;
  border-left: none;
}
.mb_footer-navi #footer-navi > div:last-child {
  border-right: none;
}
.mb_footer-navi #footer-navi > div h2 {
  font-size: 6.4vw;
  margin-bottom: 1rem;
}
.mb_footer-navi #footer-navi > div ul li:not(:last-child) {
  margin-bottom: 1rem;
}
.mb_footer-navi #footer-navi > div ul li a {
  color: #fff;
  font-size: 3.7vw;
}
.mb_footer-navi #footer-navi > div .navi-list {
  font-size: 3.7vw;
}
.mb_footer-navi #footer-navi > div .navi-list > li > ul {
  margin-top: 0.5em;
  padding-left: 1em;
}
/* フッターのナビ部分　ここまで */
/*
* TOPお知らせ
*/
#product-page-information {
  max-width: 740px;
  width: 95vw;
  margin-left: auto;
  margin-right: auto;
  border: solid 4px #BB2605;
  border-radius: 5px;
  margin-bottom: 2rem;
  background-color: #fff;
}
.top-information #product-page-information {
  margin: 1rem auto;
}
#product-page-information br.sp {
  display: none;
}
@media screen and (max-width: 599px) {
  #product-page-information br.sp {
    display: inline;
  }
}
#product-page-information h2 {
  display: block;
  width: 100%;
  text-align: left;
  background-color: #BB2605;
  color: #F8F400;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.25;
  padding: 0.75em 1rem;
}
@media screen and (max-width: 599px) {
  #product-page-information h2 {
    margin-top: -1px;
    font-size: 4.3vw;
  }
}
#product-page-information .inner {
  padding: 1rem;
}
#product-page-information .inner p {
  font-size: 16px;
  line-height: 1.7;
}
@media screen and (max-width: 599px) {
  #product-page-information .inner p {
    font-size: 4.3vw;
    text-align: left;
  }
  #product-page-information .inner p br {
    display: none;
  }
}
#product-page-information .inner p:not(:last-child) {
  margin-bottom: 1em;
}
#product-page-information .inner p.center {
  text-align: center;
}
@media screen and (max-width: 599px) {
  #product-page-information .inner p.center {
    text-align: left;
  }
}
#product-page-information .inner .line-images {
  width: 80%;
  margin: 1rem auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 3rem;
}
#product-page-information .inner .line-images > p {
  width: calc(50% - 1.5rem);
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #00B800;
}
@media screen and (max-width: 599px) {
  #product-page-information .inner .line-images > p {
    width: 100%;
    font-size: 4.3vw;
  }
}
#product-page-information .inner .line-images > p a {
  width: 100%;
}
#product-page-information .inner .line-images > p a img {
  width: 100%;
}
#product-page-information .inner .line-images > img {
  width: calc(50% - 1.5rem);
}
@media screen and (max-width: 599px) {
  #product-page-information .inner .line-images > img {
    width: 100%;
  }
}

/*
* TOPお知らせ ここまで
*/
/*
* TOP タイムセール
*/
.top-information .product-page-time-sale {
  margin: 2rem 0;
  text-align: center;
}
#rightCont .product-page-time-sale {
  margin-bottom: 2rem;
}

/*
* TOP タイムセール ここまで
*/
/* 〇〇をご利用のお客様の声 */
.customer-voices {
  margin-bottom: 3rem;
}
.customer-voices ul {
  max-width: 740px;
  width: 89.3vw;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
@media screen and (max-width: 599px) {
  .customer-voices ul {
    flex-direction: column;
  }
}
.customer-voices ul li {
  display: block;
  width: calc(33.3333333333% - 1rem);
}
@media screen and (max-width: 599px) {
  .customer-voices ul li {
    width: 100%;
  }
}
.customer-voices ul li a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  border: solid 1px #CCCCCC;
  transition: border-color 0.5s;
  padding: 1rem;
}
@media screen and (max-width: 599px) {
  .customer-voices ul li a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}
.customer-voices ul li a h3 {
  font-size: 18px;
  font-weight: bold;
  transition: color 0.5s;
  margin-bottom: 1rem;
  min-height: 4em;
  line-height: 1.25;
}
@media screen and (max-width: 599px) {
  .customer-voices ul li a h3 {
    font-size: 14px;
    width: 100%;
    height: auto;
    margin-bottom: 0.5rem;
    min-height: 0;
  }
}
.customer-voices ul li a h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  transition: color 0.5s;
  background-color: #F0F0F0;
  padding: 0.75rem;
  min-height: 4em;
}
@media screen and (max-width: 599px) {
  .customer-voices ul li a h4 {
    font-size: 14px;
    width: 100%;
    height: auto;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    font-weight: normal;
    min-height: 0;
  }
}
@media screen and (max-width: 599px) {
  .customer-voices ul li a picture {
    width: 25%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
}
.customer-voices ul li a picture img {
  display: block;
  font-size: 14px;
  transition: color 0.5s;
  margin: 1.5rem auto;
}
@media screen and (max-width: 599px) {
  .customer-voices ul li a picture img {
    width: 45%;
    margin: 0 auto;
  }
}
.customer-voices ul li a p {
  font-size: 14px;
  transition: color 0.5s;
  font-weight: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 0.25em;
  margin-bottom: 0;
  line-height: 1.25;
}
@media screen and (max-width: 599px) {
  .customer-voices ul li a p {
    width: 75%;
    font-size: 11px;
  }
}
.customer-voices ul li a:hover {
  border-color: #E50011;
}
.customer-voices ul li a:hover h3,
.customer-voices ul li a:hover h4,
.customer-voices ul li a:hover p {
  color: #E50011;
}

/* 〇〇をご利用のお客様の声　ここまで */
/* 補助金ページへのリンクボタン */
.subsidy-page-button__parent .subsidy-page-button {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 80%;
  height: 8rem;
  margin: 0 auto 3rem;
  text-decoration: none;
  border-radius: 5px;
  border: solid 2px #D0D0D0;
  box-shadow: 0 4px 0 #878787;
  position: relative;
  transition: 0.5s;
  max-width: 605px;
  width: 100%;
  min-height: 93px;
  height: auto;
}
@media screen and (max-width: 599px) {
  .subsidy-page-button__parent .subsidy-page-button {
    width: 90%;
  }
}
.subsidy-page-button__parent .subsidy-page-button:after {
  content: "\e5e1";
  display: block;
  font-family: "Material Symbols Rounded";
  font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 0, "opsz" 48;
  line-height: 1;
  width: 1em;
  height: 1em;
  font-size: 2rem;
  color: #E50011;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1rem;
  margin: auto 0;
  transition: 0.5s;
}
@media screen and (max-width: 599px) {
  .subsidy-page-button__parent .subsidy-page-button:after {
    font-size: 1.5rem;
    right: 0.5rem;
  }
}
.subsidy-page-button__parent .subsidy-page-button span {
  text-align: center;
}
.subsidy-page-button__parent .subsidy-page-button span:nth-of-type(1) {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.3;
}
@media screen and (max-width: 599px) {
  .subsidy-page-button__parent .subsidy-page-button span:nth-of-type(1) {
    font-size: 3.5vw;
  }
}
.subsidy-page-button__parent .subsidy-page-button span:nth-of-type(2) {
  font-size: 14px;
  margin-top: 1em;
}
.subsidy-page-button__parent .subsidy-page-button span:nth-of-type(2) br {
  display: none;
}
@media screen and (max-width: 599px) {
  .subsidy-page-button__parent .subsidy-page-button span:nth-of-type(2) {
    font-size: 3vw;
  }
  .subsidy-page-button__parent .subsidy-page-button span:nth-of-type(2) br {
    display: inline;
  }
}
.subsidy-page-button__parent .subsidy-page-button:hover {
  opacity: 0.75;
}
.subsidy-page-button__parent .subsidy-page-button:hover:after {
  transform: translateX(0.5em);
}
.subsidy-page-button__parent .subsidy-page-button:after {
  right: 0.5rem;
}

/* 補助金ページへのリンクボタン　ここまで */
#ecocute_faq {
  margin-bottom: 4rem;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 599px) {
  #ecocute_faq {
    max-width: 95.2vw;
  }
}
#ecocute_faq dl {
  margin-bottom: 3rem;
}
#ecocute_faq dl div:not(:last-child) {
  margin-bottom: 1rem;
}
#ecocute_faq dl div dt,
#ecocute_faq dl div dd {
  padding: 1rem;
  padding-left: 4rem;
  position: relative;
}
#ecocute_faq dl div dt p,
#ecocute_faq dl div dd p {
  line-height: 1.8;
}
#ecocute_faq dl div dt:before,
#ecocute_faq dl div dd:before {
  display: block;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  height: 1em;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1rem;
  margin: auto 0;
}
@media screen and (max-width: 599px) {
  #ecocute_faq dl div dt:before,
  #ecocute_faq dl div dd:before {
    font-size: 6.4vw;
  }
}
#ecocute_faq dl div dt {
  background-color: #EEEEEE;
  border-bottom: solid 2px #E50011;
}
#ecocute_faq dl div dt p {
  font-size: 16px;
  font-weight: bold;
}
@media screen and (max-width: 599px) {
  #ecocute_faq dl div dt p {
    font-size: 4.3vw;
  }
}
#ecocute_faq dl div dt:before {
  content: "Q.";
}
#ecocute_faq dl div dd p {
  font-size: 14px;
}
@media screen and (max-width: 599px) {
  #ecocute_faq dl div dd p {
    font-size: 3.7vw;
  }
}
#ecocute_faq dl div dd:before {
  content: "A";
  color: #E50011;
}
@media screen and (max-width: 599px) {
  #ecocute_faq dl div dd:before {
    top: 2rem;
    bottom: auto;
    margin: 0;
  }
}

#ecocute_related-columns {
  margin-bottom: 4rem;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 599px) {
  #ecocute_related-columns {
    max-width: 95.2vw;
  }
}
#ecocute_related-columns > ul li:not(:last-child) {
  margin-bottom: 1.5rem;
}
#ecocute_related-columns > ul li a {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  text-decoration: none;
  transition: filter 0.5s;
}
#ecocute_related-columns > ul li a:hover {
  filter: brightness(1.2);
}
#ecocute_related-columns > ul li a:hover img {
  opacity: 1 !important;
}
#ecocute_related-columns > ul li a .eyechatch {
  width: 43.2%;
  aspect-ratio: 320/230;
  border-radius: 5px;
  border: solid 1px #E50011;
}
#ecocute_related-columns > ul li a .eyechatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
#ecocute_related-columns > ul li a .contents {
  width: 54.3%;
}
#ecocute_related-columns > ul li a .contents time {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  color: #E50011;
  margin-bottom: 0.5em;
}
@media screen and (max-width: 599px) {
  #ecocute_related-columns > ul li a .contents time {
    font-size: 3.2vw;
  }
}
#ecocute_related-columns > ul li a .contents h3 {
  font-size: 16px;
  font-weight: bold;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 0.25em;
  line-height: 1.75;
}
@media screen and (max-width: 599px) {
  #ecocute_related-columns > ul li a .contents h3 {
    font-size: 4.3vw;
  }
}
@media screen and (max-width: 599px) {
  #ecocute_related-columns > ul li a .contents h3 {
    font-weight: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 0.25em;
    line-height: 1.5;
  }
}
#ecocute_related-columns > ul li a .contents p {
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 0.25em;
  line-height: 1.75;
}
@media screen and (max-width: 599px) {
  #ecocute_related-columns > ul li a .contents p {
    font-size: 3.7vw;
  }
}
@media screen and (max-width: 599px) {
  #ecocute_related-columns > ul li a .contents p {
    display: none;
  }
}

#compatible-areas {
  padding-bottom: 3rem;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 599px) {
  #compatible-areas {
    max-width: 95.2vw;
  }
}
#compatible-areas h3 {
  text-align: center;
  margin: 1.5rem auto 1rem;
  font-size: 14px;
  font-weight: normal;
}
@media screen and (max-width: 599px) {
  #compatible-areas h3 {
    font-size: 3.7vw;
  }
}
#compatible-areas ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-left: auto;
  margin-right: auto;
}
#compatible-areas ul li a {
  display: block;
  background-color: #E50011;
  border-radius: 1000px;
  border: solid 2px #E50011;
  padding: 0.5em 1.25em;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: 1;
  text-decoration: none;
}
#compatible-areas ul li a:hover {
  background-color: #fff;
  color: #E50011;
}
#compatible-areas ul.cities {
  max-width: 323px;
}
#compatible-areas ul.cities li {
  width: calc(33.3333333333% - 0.5333333333rem);
}
#compatible-areas ul.cities li a {
  font-size: 14px;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
@media screen and (max-width: 599px) {
  #compatible-areas ul.cities li a {
    font-size: 3.7vw;
  }
}
#compatible-areas ul.cities li:has(.current) a {
  pointer-events: none;
  background-color: #fff;
  color: #E50011;
}
#compatible-areas ul.areas {
  max-width: 431px;
}
#compatible-areas ul.areas li {
  width: calc(25% - 0.6rem);
}
#compatible-areas ul.areas li a {
  font-size: 16px;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
@media screen and (max-width: 599px) {
  #compatible-areas ul.areas li a {
    font-size: 3.7vw;
  }
}
#compatible-areas ul.areas li:has(.current) {
  display: none;
}
#compatible-areas p:last-child {
  font-size: 18px;
  text-align: center;
  margin-top: 2rem;
  font-weight: bold;
}
@media screen and (max-width: 599px) {
  #compatible-areas p:last-child {
    font-size: 3.7vw;
  }
}

#compatible-areas__sities {
  padding-bottom: 3rem;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 599px) {
  #compatible-areas__sities {
    max-width: 95.2vw;
  }
}
#compatible-areas__sities .content h2 {
  text-align: center;
  margin: 1em auto;
  font-weight: bold;
  font-size: 20px;
}
@media screen and (max-width: 599px) {
  #compatible-areas__sities .content h2 {
    font-size: 3.7vw;
  }
}
#compatible-areas__sities .content h3 {
  font-size: 16px;
  display: inline-block;
  background-color: #E50011;
  border-radius: 1000px;
  border: solid 2px #E50011;
  padding: 0.5em 1.25em;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: 1;
  margin-bottom: 1em;
}
@media screen and (max-width: 599px) {
  #compatible-areas__sities .content h3 {
    font-size: 3.7vw;
  }
}
#compatible-areas__sities .content p {
  line-height: 1.8;
  font-size: 14px;
}
@media screen and (max-width: 599px) {
  #compatible-areas__sities .content p {
    font-size: 3.7vw;
  }
}
#compatible-areas__sities .content p:not(:last-child) {
  margin-bottom: 2em;
}

/**
* PC・SP版　両方で読み込んでいます
* ネイティブCSSで構築するのは困難になってきたので、
* SCSSに変換しました。
*/
.table-condition {
  width: 100%;
  border-collapse: collapse;
}
.table-condition tr th,
.table-condition tr td {
  font-size: 16px;
  padding: 1rem;
  height: 100%;
  vertical-align: middle !important;
  border: solid 1px #fff;
  line-height: 1.5;
  text-align: left;
  word-break: break-word;
}
.table-condition tr th sup,
.table-condition tr td sup {
  font-size: 0.5em;
}
.table-condition tr th {
  background-color: #999999;
  color: #fff;
}
.table-condition tr td {
  background-color: #E5E5E5;
  color: #000;
}
.table-condition tr .not-cell {
  background-color: transparent;
}
.table-condition thead tr th {
  font-weight: bold;
}
.table-condition tbody tr th {
  text-align: left;
}
.table-condition.price tbody tr td:last-child {
  font-weight: bold;
  font-size: 24px;
}

.table-scroll,
.table-scrolled {
  margin-bottom: 2rem;
}
.table-scroll:has(+ .annotation),
.table-scrolled:has(+ .annotation) {
  margin-bottom: 0.5rem;
}
.table-scroll + .annotation,
.table-scrolled + .annotation {
  margin-bottom: 2rem;
}
@media screen and (max-width: 599px) {
  .table-scroll,
  .table-scrolled {
    overflow-x: scroll;
  }
  .table-scroll .scroll-hint-icon,
  .table-scrolled .scroll-hint-icon {
    z-index: 1000;
  }
  .table-scroll.sticky table tr,
  .table-scrolled.sticky table tr {
    position: relative;
  }
  .table-scroll.sticky table tr th:first-child,
  .table-scrolled.sticky table tr th:first-child {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .table-scroll.sticky table tr td,
  .table-scrolled.sticky table tr td {
    background-color: #fff;
  }
  .table-scroll.sticky table tr td:after,
  .table-scrolled.sticky table tr td:after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    border-right: solid 1px #ccc;
    position: absolute;
    top: 0;
    right: 0;
  }
}

/**
* PC・SP版　両方で読み込んでいます
* ネイティブCSSで構築するのは困難になってきたので、
* SCSSに変換しました。
*/
@media screen and (max-width: 599px) {
  #construction_example {
    margin-left: auto;
    margin-right: auto;
    width: 95vw;
  }
}
#construction_example #photos .logo_and_types {
  height: 54px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  margin-bottom: 3rem;
}
#construction_example #photos .logo_and_types .logo {
  width: 30%;
  padding: 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
#construction_example #photos .logo_and_types .logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#construction_example #photos .logo_and_types ul {
  width: 70%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
}
#construction_example #photos .logo_and_types ul li {
  width: calc(25% - 0.5rem);
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 18px;
  color: #fff;
  font-weight: bold;
}
@media screen and (max-width: 599px) {
  #construction_example #photos .logo_and_types {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 1rem;
  }
  #construction_example #photos .logo_and_types ul {
    width: 100%;
  }
  #construction_example #photos .logo_and_types ul li {
    font-size: 4vw;
    padding: 0.8rem 0;
  }
}
#construction_example #photos .logo_and_types ul li:nth-child(1) {
  background-color: #FFB984;
}
#construction_example #photos .logo_and_types ul li:nth-child(2) {
  background-color: #83DDA3;
}
#construction_example #photos .logo_and_types ul li:nth-child(3) {
  background-color: #FF8484;
}
#construction_example #photos .logo_and_types ul li:nth-child(4) {
  background-color: #87C5FD;
}
#construction_example #photos .images01 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 2rem;
}
#construction_example #photos .images01 > div h4,
#construction_example #photos .images02 > div h4 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
@media screen and (max-width: 599px) {
  #construction_example #photos .images01 > div h4,
  #construction_example #photos .images02 > div h4 {
    font-size: 5vw;
  }
}
#construction_example #photos .images01 .Before-construction {
  width: 33.8%;
  position: relative;
}
#construction_example #photos .images01 .Before-construction img {
  aspect-ratio: 251/247;
  object-fit: cover;
}
#construction_example #photos .images01 .Before-construction:before,
#construction_example #photos .images01 .Before-construction:after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% + 2rem);
  margin: auto 0;
}
#construction_example #photos .images01 .Before-construction:before {
  background-color: #FFD1D4;
}
#construction_example #photos .images01 .Before-construction:after {
  background-color: #FFA6A0;
  transform: translateX(0.75rem);
}
#construction_example #photos .images01 .After-construction {
  width: 53.2%;
}
#construction_example #photos .images01 .After-construction img {
  aspect-ratio: 394/388;
  object-fit: cover;
}
@media screen and (max-width: 599px) {
  #construction_example #photos .images01 {
    flex-direction: column;
    align-items: center;
    row-gap: 4rem;
  }
  #construction_example #photos .images01 .Before-construction {
    width: 60%;
    position: relative;
  }
  #construction_example #photos .images01 .Before-construction img {
    width: 100%;
  }
  #construction_example #photos .images01 .After-construction {
    width: 100%;
  }
  #construction_example #photos .images01 .After-construction img {
    width: 100%;
  }
  #construction_example #photos .images01 .Before-construction:before,
  #construction_example #photos .images01 .Before-construction:after {
    clip-path: polygon(50% 100%, 100% 0, 0 0);
    top: calc(100% + 1rem);
    bottom: auto;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  #construction_example #photos .images01 .Before-construction:after {
    transform: translateY(0.75rem);
  }
}
#construction_example #photos .images02 {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  margin-bottom: 3rem;
  gap: 1rem;
}
#construction_example #photos .images02 > div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-end;
  width: calc(33.3333333333% - 0.6666666667rem);
}
#construction_example #photos .images02 > div img {
  width: 100%;
  aspect-ratio: 241/255;
  object-fit: cover;
}
@media screen and (max-width: 599px) {
  #construction_example #photos .images02 {
    row-gap: 1rem;
  }
  #construction_example #photos .images02 > div {
    width: calc(50% - 0.5rem);
  }
}
#construction_example #construction_data h4 {
  font-size: 20px;
  margin: 1em 0;
}
@media screen and (max-width: 600px) {
  #construction_example #construction_data h4 {
    font-size: 5.2vw;
  }
}
#construction_example #construction_data table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4rem;
}
#construction_example #construction_data table tbody tr th,
#construction_example #construction_data table tbody tr td {
  font-size: 16px;
  border: solid 1px #fff;
  padding: 1rem;
  padding-right: 0.2rem;
  vertical-align: middle !important;
  text-align: left;
}
@media screen and (max-width: 599px) {
  #construction_example #construction_data table tbody tr th {
    font-size: 4.3vw;
  }
  #construction_example #construction_data table tbody tr td {
    font-size: 4vw;
  }
}
#construction_example #construction_data table tbody tr th {
  width: 33.8%;
  background-color: #999999;
  color: #fff;
  font-weight: bold;
}
#construction_example #construction_data table tbody tr td {
  width: 66.2%;
  background-color: #E7E7E7;
}
#construction_example #construction_data table tbody tr td p {
  line-height: 1.5;
}
#construction_example #construction_data table tbody tr td p.price {
  font-size: 1.1em;
  font-weight: bold;
}
#construction_example #construction_data table tbody tr td p.price b {
  color: #E50011;
}
#construction_example .order-button {
  max-width: 600px;
  width: 90%;
  height: 4em;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  background-color: #E50011;
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  position: relative;
}
#construction_example .order-button:after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background-image: url("../images/arrow-right.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0.5em;
  margin: auto 0;
}
@media screen and (max-width: 599px) {
  #construction_example .order-button {
    font-size: 3.5vw;
  }
  #construction_example .order-button:after {
    right: 0.5em;
  }
}
#construction_example .link-banners {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  margin-bottom: 2rem;
}
#construction_example .link-banners a {
  width: 100%;
}
#construction_example .link-banners a img {
  width: 100%;
}

/**
* PC・SP版　両方で読み込んでいます
* ネイティブCSSで構築するのは困難になってきたので、
* SCSSに変換しました。
*/
.other-constructions {
  padding: 3rem 0;
}

ul.constructions-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem;
}
ul.constructions-list li {
  width: calc(50% - 0.5rem);
  min-height: 120px;
}
@media screen and (max-width: 599px) {
  ul.constructions-list li {
    width: 100%;
  }
}
ul.constructions-list li a {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  padding: 1rem;
  width: 100%;
  height: 100%;
  text-decoration: none;
  border: solid 2px #CCCCCC;
  position: relative;
  transition: border-color 0.5s;
}
ul.constructions-list li a:after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("../common/com_arr03.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0.75rem;
  margin: auto;
  transition: 0.5s;
}
ul.constructions-list li a:hover {
  border-color: #E50011;
}
ul.constructions-list li a:hover:after {
  transform: translateX(0.5rem);
}
ul.constructions-list li a .thumb {
  width: 34.5%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
ul.constructions-list li a .thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 114/85;
  object-fit: cover;
}
ul.constructions-list li a .status {
  width: 60.6%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-around;
  padding-right: 1rem;
}
ul.constructions-list li a .status h4 {
  font-weight: bold;
  font-size: 1.1rem;
}

#great-value-set {
  margin-bottom: 4rem;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 599px) {
  #great-value-set {
    max-width: 95.2vw;
  }
}
#great-value-set h2 + p {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 3rem;
}
@media screen and (max-width: 599px) {
  #great-value-set h2 + p {
    font-size: 3.7vw;
  }
}
#great-value-set h2 + p strong {
  font-weight: bold;
  color: #E50011;
  font-size: 18px;
}
@media screen and (max-width: 599px) {
  #great-value-set h2 + p strong {
    font-size: 3.7vw;
  }
}
#great-value-set h2 + p b {
  font-weight: bold;
}
#great-value-set ul {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  column-gap: 1.4%;
  row-gap: 2.5rem;
}
@media screen and (max-width: 599px) {
  #great-value-set ul {
    flex-direction: column;
  }
}
#great-value-set ul li {
  width: 49.3%;
}
@media screen and (max-width: 599px) {
  #great-value-set ul li {
    width: 100%;
  }
}
#great-value-set ul li a {
  display: block;
  border: solid 1px #CC0000;
  border-radius: 5px;
  text-decoration: none;
  transition: filter 0.5s;
}
#great-value-set ul li a:hover {
  filter: brightness(1.2);
}
#great-value-set ul li a:hover img {
  opacity: 1 !important;
}
#great-value-set ul li a > .head {
  background-color: #CC0000;
  border-radius: 5px 5px 0 0;
  width: 100%;
  height: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  column-gap: 4px;
  padding: 0 1rem 0.2rem;
  position: relative;
}
@media screen and (max-width: 599px) {
  #great-value-set ul li a > .head {
    height: 6.9vw;
  }
}
#great-value-set ul li a > .head p {
  position: absolute;
  bottom: 0.2rem;
  left: 1rem;
}
@media screen and (max-width: 599px) {
  #great-value-set ul li a > .head p {
    bottom: 0.4rem;
  }
}
#great-value-set ul li a > .head p span:nth-child(1) {
  display: inline-block;
  font-size: 14px;
  background-color: #FFF019;
  color: #E50011;
  font-weight: bold;
  padding: 0.25em 0.5em;
  border-radius: 5px;
  line-height: 1;
}
@media screen and (max-width: 599px) {
  #great-value-set ul li a > .head p span:nth-child(1) {
    font-size: 3.7vw;
  }
}
#great-value-set ul li a > .head p span:nth-child(2) {
  display: inline-block;
  color: #FFF019;
  font-size: 28px;
  margin: -0.8em 0 -0.2em;
  font-weight: bold;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;
  translate: 0 4px;
}
@media screen and (max-width: 599px) {
  #great-value-set ul li a > .head p span:nth-child(2) {
    font-size: 7.5vw;
  }
}
#great-value-set ul li a > .head p span:nth-child(3) {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: #FFF019;
  translate: 0 4px;
}
@media screen and (max-width: 599px) {
  #great-value-set ul li a > .head p span:nth-child(3) {
    font-size: 4.3vw;
  }
}
#great-value-set ul li a > div:not([class]) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  padding: 1rem;
}
#great-value-set ul li a > div:not([class]) > .image-area {
  width: 32.6%;
  aspect-ratio: 104/139;
  position: relative;
}
#great-value-set ul li a > div:not([class]) > .image-area img {
  display: block;
  width: 100%;
  object-fit: contain;
}
#great-value-set ul li a > div:not([class]) > .image-area img:nth-child(1) {
  height: 56.8%;
  object-position: left center;
}
#great-value-set ul li a > div:not([class]) > .image-area img:nth-child(2) {
  height: 43.2%;
  object-position: right center;
}
#great-value-set ul li a > div:not([class]) > .image-area:after {
  --width: 24px;
  content: "＋";
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  width: var(--width);
  height: var(--width);
  color: #E50011;
  border: solid 1px #E50011;
  border-radius: 100%;
  background-color: #FFD5D5;
  position: absolute;
  top: 1rem;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10;
}
@media screen and (max-width: 599px) {
  #great-value-set ul li a > div:not([class]) > .image-area:after {
    --width: 6.4vw;
  }
}
@media screen and (max-width: 599px) {
  #great-value-set ul li a > div:not([class]) > .image-area:after {
    font-size: 4.3vw;
  }
}
#great-value-set ul li a > div:not([class]) > .specs {
  width: 67.4%;
}
#great-value-set ul li a > div:not([class]) > .specs dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.25rem;
  margin-bottom: 1rem;
}
#great-value-set ul li a > div:not([class]) > .specs dl dt {
  width: 46.2%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0.5em;
  background-color: #E40011;
  border-radius: 1000px;
  color: #fff;
  font-size: 14px;
}
@media screen and (max-width: 599px) {
  #great-value-set ul li a > div:not([class]) > .specs dl dt {
    font-size: 3.2vw;
  }
}
#great-value-set ul li a > div:not([class]) > .specs dl dd {
  width: calc(53.8% - 0.25rem);
  display: inline-block;
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
}
@media screen and (max-width: 599px) {
  #great-value-set ul li a > div:not([class]) > .specs dl dd {
    font-size: 3.2vw;
  }
}
#great-value-set ul li a > div:not([class]) > .specs p {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  font-weight: bold;
  row-gap: 0.6rem;
  white-space: nowrap;
}
#great-value-set ul li a > div:not([class]) > .specs p span:nth-child(1) {
  font-size: 14px;
}
@media screen and (max-width: 599px) {
  #great-value-set ul li a > div:not([class]) > .specs p span:nth-child(1) {
    font-size: 3.7vw;
  }
}
#great-value-set ul li a > div:not([class]) > .specs p span:nth-child(1) b {
  color: #E50011;
  font-size: 16px;
}
@media screen and (max-width: 599px) {
  #great-value-set ul li a > div:not([class]) > .specs p span:nth-child(1) b {
    font-size: 4.3vw;
  }
}
#great-value-set ul li a > div:not([class]) > .specs p span:nth-child(2) {
  font-size: 20px;
}
@media screen and (max-width: 599px) {
  #great-value-set ul li a > div:not([class]) > .specs p span:nth-child(2) {
    font-size: 5.3vw;
  }
}
#great-value-set ul li a > div:not([class]) > .specs p span:nth-child(2) strong {
  color: #E50011;
  font-size: 24px;
}
@media screen and (max-width: 599px) {
  #great-value-set ul li a > div:not([class]) > .specs p span:nth-child(2) strong {
    font-size: 6.4vw;
  }
}
#great-value-set ul li a > div:not([class]) > .specs p span:nth-child(2) small {
  font-size: 12px;
}
@media screen and (max-width: 599px) {
  #great-value-set ul li a > div:not([class]) > .specs p span:nth-child(2) small {
    font-size: 3.2vw;
  }
}
#great-value-set ul li a > div:not([class]) > .specs p span:nth-child(3) {
  font-size: 14px;
}
@media screen and (max-width: 599px) {
  #great-value-set ul li a > div:not([class]) > .specs p span:nth-child(3) {
    font-size: 3.2vw;
  }
}

#ecocute_construction-flow {
  margin-bottom: 4rem;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 599px) {
  #ecocute_construction-flow {
    background-color: #EEEEEE;
    padding: 3rem 0;
  }
}
#ecocute_construction-flow h2 {
  max-width: 95.2vw;
  margin-left: auto;
  margin-right: auto;
}
#ecocute_construction-flow ul {
  max-width: 95.2vw;
  margin-left: auto;
  margin-right: auto;
}
#ecocute_construction-flow ul li {
  --border-radius: 10px;
  display: block;
  width: 100%;
  padding: 3.5rem 1rem 1rem;
  border: solid 1px #E50011;
  border-radius: var(--border-radius);
  background-color: #fff;
  position: relative;
}
#ecocute_construction-flow ul li:not(:last-child) {
  margin-bottom: 30px;
}
#ecocute_construction-flow ul li:not(:last-child):after {
  content: "";
  display: block;
  width: 46px;
  height: 21px;
  background-color: #E50011;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
}
@media screen and (max-width: 599px) {
  #ecocute_construction-flow ul li:not(:last-child):after {
    width: 12.3vw;
    height: 5.6vw;
  }
}
#ecocute_construction-flow ul li > .step-number {
  width: 156px;
  height: 31px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  line-height: 1;
  background-color: #E50011;
  border-radius: var(--border-radius) 0 var(--border-radius) 0;
  font-size: 14px;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 599px) {
  #ecocute_construction-flow ul li > .step-number {
    font-size: 3.7vw;
  }
}
#ecocute_construction-flow ul li > .step-number b {
  font-size: 18px;
  margin-left: 0.5em;
}
@media screen and (max-width: 599px) {
  #ecocute_construction-flow ul li > .step-number b {
    font-size: 4.8vw;
  }
}
#ecocute_construction-flow ul li h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 0.5em;
}
@media screen and (max-width: 599px) {
  #ecocute_construction-flow ul li h3 {
    font-size: 4.3vw;
  }
}
#ecocute_construction-flow ul li p {
  font-size: 14px;
  line-height: 1.5;
}
@media screen and (max-width: 599px) {
  #ecocute_construction-flow ul li p {
    font-size: 3.7vw;
  }
}

/**
* PC・SP版　両方で読み込んでいます
* ネイティブCSSで構築するのは困難になってきたので、
* SCSSに変換しました。
*/
#ecoall_subsidy {
  width: 89.3vw;
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}
#ecoall_subsidy h1 {
  font-size: 30px;
  font-weight: bold;
  color: #D80000;
  margin-bottom: 1rem;
  text-align: center;
}
#ecoall_subsidy h1 br {
  display: none;
}
#ecoall_subsidy h1.white {
  color: #fff;
}
@media screen and (max-width: 599px) {
  #ecoall_subsidy h1 {
    font-size: 20px;
  }
  #ecoall_subsidy h1 br {
    display: inline;
  }
}
#ecoall_subsidy > p {
  font-size: 16px;
  line-height: 1.5em;
}
#ecoall_subsidy > p:not(:last-child) {
  margin-bottom: 2rem;
}
#ecoall_subsidy .banner {
  display: block;
  margin-bottom: 3rem;
}
#ecoall_subsidy .city-names {
  margin: 2rem auto;
}
#ecoall_subsidy #subsidy {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.subsidy-bottom-link {
  padding-top: 3rem;
  border-top: solid 1px #F6F6F6;
}
.subsidy-bottom-link a {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 80%;
  height: 8rem;
  margin: 0 auto 3rem;
  text-decoration: none;
  border-radius: 5px;
  border: solid 2px #D0D0D0;
  box-shadow: 0 4px 0 #878787;
  position: relative;
  transition: 0.5s;
}
@media screen and (max-width: 599px) {
  .subsidy-bottom-link a {
    width: 90%;
  }
}
.subsidy-bottom-link a:after {
  content: "\e5e1";
  display: block;
  font-family: "Material Symbols Rounded";
  font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 0, "opsz" 48;
  line-height: 1;
  width: 1em;
  height: 1em;
  font-size: 2rem;
  color: #E50011;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1rem;
  margin: auto 0;
  transition: 0.5s;
}
@media screen and (max-width: 599px) {
  .subsidy-bottom-link a:after {
    font-size: 1.5rem;
    right: 0.5rem;
  }
}
.subsidy-bottom-link a span {
  text-align: center;
}
.subsidy-bottom-link a span:nth-of-type(1) {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.3;
}
@media screen and (max-width: 599px) {
  .subsidy-bottom-link a span:nth-of-type(1) {
    font-size: 3.5vw;
  }
}
.subsidy-bottom-link a span:nth-of-type(2) {
  font-size: 14px;
  margin-top: 1em;
}
.subsidy-bottom-link a span:nth-of-type(2) br {
  display: none;
}
@media screen and (max-width: 599px) {
  .subsidy-bottom-link a span:nth-of-type(2) {
    font-size: 3vw;
  }
  .subsidy-bottom-link a span:nth-of-type(2) br {
    display: inline;
  }
}
.subsidy-bottom-link a:hover {
  opacity: 0.75;
}
.subsidy-bottom-link a:hover:after {
  transform: translateX(0.5em);
}

.sities-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1rem;
  margin-bottom: 4rem;
}
.sities-list li {
  display: block;
  width: calc(25% - 0.75rem);
}
@media screen and (max-width: 599px) {
  .sities-list li {
    width: calc(50% - 0.5rem);
  }
}
.sities-list li a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 5px;
  border: solid 1px #ddd;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  box-shadow: 0px -5px 0px -2px rgba(0, 0, 0, 0.2) inset;
  transition: 0.5s;
}
.sities-list li a:hover {
  color: #fff;
  background-color: #E50011;
}

/**
* PC・SP版　両方で読み込んでいます
* ネイティブCSSで構築するのは困難になってきたので、
* SCSSに変換しました。
*/
#battery_subsidy {
  width: 89.3vw;
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}
#battery_subsidy h1 {
  font-size: 30px;
  font-weight: bold;
  color: #D80000;
  margin-bottom: 1rem;
  text-align: center;
}
#battery_subsidy h1 br {
  display: none;
}
#battery_subsidy h1.white {
  color: #fff;
}
@media screen and (max-width: 599px) {
  #battery_subsidy h1 {
    font-size: 20px;
  }
  #battery_subsidy h1 br {
    display: inline;
  }
}
#battery_subsidy > p {
  font-size: 16px;
  line-height: 1.5em;
}
#battery_subsidy > p:not(:last-child) {
  margin-bottom: 2rem;
}
#battery_subsidy .banner {
  display: block;
  margin-bottom: 3rem;
}
#battery_subsidy .city-names {
  margin: 2rem auto;
}
#battery_subsidy #subsidy {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#Compatibility-list .annotation {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 2rem;
}
#Compatibility-list .table-condition tr th,
#Compatibility-list .table-condition tr td {
  font-size: 10px;
  text-align: center !important;
  padding: 0.3rem;
}
#Compatibility-list .table-condition tbody tr td:nth-child(1), #Compatibility-list .table-condition tbody tr td:nth-child(2) {
  text-align: left !important;
}

/**
* PC・SP版　両方で読み込んでいます
* ネイティブCSSで構築するのは困難になってきたので、
* SCSSに変換しました。
*/
#other-voice .link-voice-list {
  max-width: 600px;
  width: 90%;
  height: 4em;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  background-color: #E50011;
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  position: relative;
}
#other-voice .link-voice-list:after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background-image: url("../images/arrow-right.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0.5em;
  margin: auto 0;
}
@media screen and (max-width: 599px) {
  #other-voice .link-voice-list {
    font-size: 3.5vw;
  }
  #other-voice .link-voice-list:after {
    right: 0.5em;
  }
}

/**
* PC・SP版　両方で読み込んでいます
* ネイティブCSSで構築するのは困難になってきたので、
* SCSSに変換しました。
*/
#ecocute-features > section {
  margin: 4rem auto;
  width: 100%;
}
#ecocute-features > section img {
  display: block;
  margin: 1.5rem auto;
}
#ecocute-features > section > p:not(:last-child) {
  margin-bottom: 1.5em;
}
#ecocute-features.panasonic > #features01 img {
  float: right;
  margin: 0;
  margin-left: 3rem;
}
@media screen and (max-width: 599px) {
  #ecocute-features.panasonic > #features01 img {
    float: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
  }
}
#ecocute-features.mitsubishi > #features03 > div {
  max-width: 697px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 599px) {
  #ecocute-features.mitsubishi > #features03 > div {
    flex-direction: column;
    justify-content: flex-start;
  }
}
#ecocute-features.mitsubishi > #features03 > div > div {
  width: 43.9%;
}
@media screen and (max-width: 599px) {
  #ecocute-features.mitsubishi > #features03 > div > div {
    width: 100%;
  }
}
#ecocute-features.mitsubishi > #features03 > div > div > div {
  margin-bottom: 3rem;
  position: relative;
}
@media screen and (max-width: 599px) {
  #ecocute-features.mitsubishi > #features03 > div > div > div {
    margin-bottom: 1rem;
  }
}
#ecocute-features.mitsubishi > #features03 > div > div > div img {
  width: 100%;
}
#ecocute-features.mitsubishi > #features03 > div > div > div p {
  position: absolute;
  top: calc(100% + 1rem);
}
@media screen and (max-width: 599px) {
  #ecocute-features.mitsubishi > #features03 > div > div > div p {
    position: static;
  }
}

/**
* PC・SP版　両方で読み込んでいます
* ネイティブCSSで構築するのは困難になってきたので、
* SCSSに変換しました。
*/
#ecoall_top .search-products {
  margin-bottom: 3rem;
}
#ecoall_top .product-history-slide {
  background-color: #EEEEEE;
  padding: 2rem 1rem;
}
#ecoall_top .product-history-slide .slide__container {
  width: auto;
}

/**
* PC・SP版　両方で読み込んでいます
* ネイティブCSSで構築するのは困難になってきたので、
* SCSSに変換しました。
*/
.stock-today {
  --stock-today-main-color: #E50112;
  --out-border-width: 5px;
  --border-radius: 20px;
  margin: 3rem auto;
}
.stock-today.ih {
  --stock-today-main-color: #254ED6;
}
@media screen and (max-width: 599px) {
  .stock-today {
    --out-border-width: 0.5vw;
    --border-radius: 2.7vw;
    max-width: 89.3vw;
  }
}
.stock-today .parent {
  border: solid var(--out-border-width) var(--stock-today-main-color);
  border-radius: var(--border-radius);
}
.stock-today .parent h2 {
  border-radius: calc(var(--border-radius) / 2) calc(var(--border-radius) / 2) 0 0;
  background-color: var(--stock-today-main-color);
  width: 100%;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-bottom: 5px;
  position: relative;
}
@media screen and (max-width: 599px) {
  .stock-today .parent h2 {
    padding-top: 0.5rem;
    height: 13.3vw;
  }
}
.stock-today .parent h2 > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 18%;
  height: 75%;
  background-color: #fff;
  border-radius: 1000px;
  padding-top: 0.2em;
  font-size: 16px;
  font-weight: bold;
  color: var(--stock-today-main-color);
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2rem;
  margin: auto 0;
}
@media screen and (max-width: 599px) {
  .stock-today .parent h2 > span {
    font-size: 3.2vw;
    width: max-content;
    height: 5.3vw;
    padding: 0 2em;
    border: solid 0.3vw var(--stock-today-main-color);
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    translate: 0 calc(-50% + (var(--out-border-width)) / 2);
  }
}
.stock-today .parent h2 img {
  display: inline-block;
  max-width: 51%;
}
@media screen and (max-width: 599px) {
  .stock-today .parent h2 img {
    max-width: 74.7vw;
  }
}
.stock-today .parent .stock-lists {
  --top-label-height: 45px;
  padding: 0 2rem 1rem;
  background: linear-gradient(to bottom, #EDC424, #F5DC59 25%, #FDF48E 50%, #EEC726);
  position: relative;
}
@media screen and (max-width: 599px) {
  .stock-today .parent .stock-lists {
    padding: 0 3.2vw 1rem;
  }
}
.stock-today .parent .stock-lists .top-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  max-width: 560px;
  min-height: var(--top-label-height);
  padding: 0.5rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  margin: 0 auto 1rem;
}
@media screen and (max-width: 599px) {
  .stock-today .parent .stock-lists .top-label {
    padding: 0.5rem;
    min-height: 0;
    max-width: 90%;
  }
}
.stock-today .parent .stock-lists .top-label p {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: var(--stock-today-main-color);
}
@media screen and (max-width: 599px) {
  .stock-today .parent .stock-lists .top-label p {
    font-size: 3.7vw;
    line-height: 1.2;
  }
}
.stock-today .parent .stock-lists > dl > div {
  display: flex;
  align-items: flex-start;
  column-gap: 1rem;
}
@media screen and (max-width: 599px) {
  .stock-today .parent .stock-lists > dl > div {
    flex-direction: column;
  }
}
.stock-today .parent .stock-lists > dl > div:not(:last-child) {
  margin-bottom: 1rem;
}
.stock-today .parent .stock-lists > dl > div > dt {
  flex: 0 0 100px;
}
@media screen and (max-width: 599px) {
  .stock-today .parent .stock-lists > dl > div > dt {
    flex: 0 0 auto;
    width: 100%;
  }
}
.stock-today .parent .stock-lists > dl > div > dt p {
  width: 100%;
  text-align: center;
  background-color: var(--stock-today-main-color);
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  line-height: 1;
  border-radius: 1000px;
  padding: 0.25em 0.5em 0.1em;
}
@media screen and (max-width: 599px) {
  .stock-today .parent .stock-lists > dl > div > dt p {
    width: max-content;
    padding-left: 1em;
    padding-right: 1em;
    font-size: 3.2vw;
  }
}
.stock-today .parent .stock-lists > dl > div > dd {
  flex: 1 1 auto;
  padding-top: 0.2rem;
}
@media screen and (max-width: 599px) {
  .stock-today .parent .stock-lists > dl > div > dd {
    flex: 0 0 auto;
    width: 100%;
    padding-left: 1rem;
    padding-right: 0;
  }
}
.stock-today .parent .stock-lists > dl > div > dd > ul {
  display: flex;
  flex-wrap: wrap;
  line-height: 1.75;
  font-weight: bold;
  font-size: 16px;
}
@media screen and (max-width: 599px) {
  .stock-today .parent .stock-lists > dl > div > dd > ul {
    column-gap: 1rem;
    font-size: 3.2vw;
  }
}
@media screen and (max-width: 599px) {
  .stock-today .parent .stock-lists > dl > div > dd > ul:has(li:nth-child(2)) > li {
    width: calc(50% - 0.5rem);
  }
}
.stock-today .parent .stock-lists > dl > div > dd > ul:has(li:nth-child(2)) > li:not(:last-child):after {
  content: "・";
}
@media screen and (max-width: 599px) {
  .stock-today .parent .stock-lists > dl > div > dd > ul:has(li:nth-child(2)) > li:not(:last-child):after {
    display: none;
  }
}
.stock-today .parent .stock-lists .annotation {
  margin-top: 1em;
  text-align: right;
  font-size: 16px;
  font-weight: 500;
}
@media screen and (max-width: 599px) {
  .stock-today .parent .stock-lists .annotation {
    font-size: 3.2vw;
  }
}
.stock-today .parent .bottom {
  border-radius: 0 0 calc(var(--border-radius) / 2) calc(var(--border-radius) / 2);
  background-color: var(--stock-today-main-color);
  padding: 2rem;
  padding-bottom: 1rem;
  display: flex;
  align-items: center;
  position: relative;
}
@media screen and (max-width: 599px) {
  .stock-today .parent .bottom {
    padding: 1rem 0.5rem;
    padding-bottom: 0.5rem;
  }
}
.stock-today .parent .bottom p:nth-child(1) {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  translate: 0 -50%;
}
.stock-today .parent .bottom p:nth-child(1) img {
  max-width: 260px;
}
@media screen and (max-width: 599px) {
  .stock-today .parent .bottom p:nth-child(1) img {
    max-width: 40.3vw;
  }
}
.stock-today .parent .bottom p:nth-child(2) {
  flex: 0 0 50%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: max-content;
  height: 60px;
  padding: 0.2em 1em 0;
  background-color: #fff;
  border-radius: 1000px;
  text-align: center;
  color: var(--stock-today-main-color);
  font-weight: bold;
  font-size: 25px;
  line-height: 1;
}
@media screen and (max-width: 599px) {
  .stock-today .parent .bottom p:nth-child(2) {
    flex: 0 0 35%;
    height: 9.3vw;
    font-size: 3.2vw;
    line-height: 1.2;
  }
}
.stock-today .parent .bottom p:nth-child(3) {
  flex: 0 0 50%;
  font-size: 25px;
  text-align: center;
  color: #FFFF00;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.16);
  font-weight: bold;
}
@media screen and (max-width: 599px) {
  .stock-today .parent .bottom p:nth-child(3) {
    flex: 0 0 65%;
    font-size: 3.2vw;
  }
}
.stock-today .parent .bottom p:nth-child(3) b {
  font-size: 2em;
}
@media screen and (max-width: 599px) {
  .stock-today .parent .bottom p:nth-child(3) b {
    font-size: 9.1vw;
  }
}
.stock-today .last-message {
  padding: 1rem;
  border-bottom: solid 3px var(--stock-today-main-color);
}
@media screen and (max-width: 599px) {
  .stock-today .last-message {
    padding: 0.5rem;
  }
}
.stock-today .last-message p {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.5;
}
@media screen and (max-width: 599px) {
  .stock-today .last-message p {
    font-size: 3.7vw;
  }
}
.stock-today .last-message p b {
  color: var(--stock-today-main-color);
}

/**
* PC・SP版　両方で読み込んでいます
* ネイティブCSSで構築するのは困難になってきたので、
* SCSSに変換しました。
*/
#municipalities .top-banner {
  display: block;
  width: 100%;
  margin-bottom: 2rem;
}
@media screen and (max-width: 599px) {
  #municipalities .top-banner {
    width: 100vw;
    margin-left: -10px;
    margin-right: -10px;
  }
}
#municipalities .top-banner img {
  width: 100%;
}
#municipalities p {
  font-size: 16px;
  line-height: 1.8;
  font-weight: 500;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 599px) {
  #municipalities p {
    font-size: 3.7vw;
  }
}
#municipalities .supported_area {
  margin-bottom: 6rem;
}
@media screen and (max-width: 599px) {
  #municipalities .supported_area {
    margin-bottom: 3rem;
  }
}
#municipalities .supported_area ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 2%;
  row-gap: 15px;
  margin-top: 2rem;
}
@media screen and (max-width: 599px) {
  #municipalities .supported_area ul {
    gap: 1.3vw;
  }
}
#municipalities .supported_area ul li {
  width: 23.5%;
}
@media screen and (max-width: 599px) {
  #municipalities .supported_area ul li {
    width: calc(50% - 0.65vw);
  }
}
#municipalities .supported_area ul li a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 30px;
  background-color: #EEEEEE;
  border-radius: 3px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: filter 0.5s;
}
@media screen and (max-width: 599px) {
  #municipalities .supported_area ul li a {
    font-size: 3.6vw;
  }
}
#municipalities .supported_area ul li a:after {
  content: "";
  display: block;
  font-size: 5px;
  width: 1em;
  height: 1em;
  border: solid 2px #E50011;
  border-left: none;
  border-bottom: none;
  rotate: 45deg;
  position: absolute;
  inset: 0 2em 0 auto;
  margin: auto 0;
  transition: 0.5s;
}
@media screen and (max-width: 599px) {
  #municipalities .supported_area ul li a:after {
    font-size: 1.3vw;
  }
}
#municipalities .supported_area ul li a:hover {
  filter: brightness(1.05);
}
#municipalities .supported_area ul li a:hover:after {
  right: 1em;
}

/**
* PC・SP版　両方で読み込んでいます
* ネイティブCSSで構築するのは困難になってきたので、
* SCSSに変換しました。
*/
section#blog #single_content .underline-yellow {
  background: linear-gradient(transparent 50%, #fcee21 0%);
}

#blog .bg2 .blogRightCnt .singleCont .contentsMain p,
#blog .bg2 .blogRightCnt .singleCont .contentsMain ul {
  line-height: 1.8;
}
#blog .bg2 .blogRightCnt .singleCont .contentsMain ol {
  list-style-type: decimal;
  line-height: 1.8;
  padding-left: 2em;
  margin-bottom: 2em;
}
#blog .bg2 .blogRightCnt .singleCont .contentsMain table tr th,
#blog .bg2 .blogRightCnt .singleCont .contentsMain table tr td {
  line-height: 1.8;
  padding: 0.6em;
}
@media screen and (max-width: 599px) {
  #blog .bg2 .blogRightCnt .singleCont .contentsMain table tr th,
  #blog .bg2 .blogRightCnt .singleCont .contentsMain table tr td {
    font-size: 14px;
  }
}
#blog .bg2 .blogRightCnt .singleCont .contentsMain table tbody tr td {
  text-align: left;
}/*# sourceMappingURL=additional.css.map */