/* POST-BASE */
.post {
    font-family: Verdana, "游ゴシック", YuGothic, Meiryo, "メイリオ", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    font-size: 18px;
    font-weight: 500;
}

/***** layout *****/
.post {
    max-width:1024px;
    margin: 0 auto;
    padding: 0 1%;
}

/***** 左揃・右揃・中央揃 *****/
.post .flt-left { float: left; }
.post .flt-right { float: right; }
.post .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.post .center-back {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.post .flt-left-tel { float: left; }

/***** 回り込み解除 *****/
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after { clear: both; }

/***** カラム・ボックス・画像幅 *****/
.col {
    width: 100%;
    margin-bottom: 10px;
}
.col-90 { width: 90%; }
.col-80 { width: 79.9%; }
.col-70 { width: 69.0%; }
.col-66 { width: 64%; }
.col-60 { width: 60%; }
.col-50 { width: 49.9%; }
.col-40 { width: 40%; }
.col-33 { width: 33.3%; }
.col-30 { width: 30%; }
.col-25 { width: 24.9%; }
.col-20 { width: 20%; }
.col-17 { width: 16.6%; }
.col-14 { width: 14%; }
.col-10 { width: 10%; }

.post img { margin: 0 auto;	}
.post p {
    padding-left: 1%;
    line-height: 1.8;
}
/* .post a { color: #00bfff; }
.post a:hover {
    color: #ff8c00;
    text-decoration: underline;
} */

.post .tindent { text-indent: 1.2rem; }

.post h1 {
    margin-top:40px;
    margin-bottom:10px;
    line-height: 1.8;
    text-align: center;
    vertical-align: middle;
}
.post h2 {
    margin-top:40px;
    margin-bottom:10px;
    font-family: var(--mh--font-family--en);
    font-size: 2.6rem;
    line-height: 1.4;
}
.post h2::before{
  content: "■";
  color: #ff8c00;
  display: inline-block;  
  background-size: cover;
  background-repeat: no-repeat;
  width: 1.2em;
  height: 1.0em;
}
.post h3 {
    margin-top:40px;
    margin-bottom:10px;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.3;
}
.post h4 {
    margin-top:20px;
    font-size: 2.0rem;
    line-height: 1.4;
    text-decoration: underline;
}
.post h5 {
    margin-top:18px;
    font-size: 1.8rem;
    line-height: 1.2;
}

/***** 余白 *****/
.margin10 { margin-top:10px; }
.margin20 { margin-top:20px; }
.margin30 { margin-top:30px; }
.margin40 { margin-top:40px; }
.margin50 { margin-top:50px; }
.margin60 { margin-top:60px; }
.margin140 { margin-top:140px; }
.margin200 { margin-top:200px; }

.margin-r { margin-right: 1%; }
.margin-l { margin-left: 1%; }
.margin-l-4 { margin-left: 4%; }
.margin-b20 { margin-bottom: 20px; }

.padding10 { padding-top:10px; }
.padding20 { padding-top:20px; }
.padding30 { padding-top:30px; }

.padding-r { padding-right: 1%; }
.padding-l { padding-left: 1%; }
.padding-l-6 { padding-left: 6%; }

/***** フォント サイズ *****/
.font40 { font-size: 4.0rem; }
.font36 { font-size: 3.6rem; }
.font34 { font-size: 3.4rem; }
.font32 { font-size: 3.2rem; }
.font30 { font-size: 3.0rem; }
.font28 { font-size: 2.8rem; }
.font26 { font-size: 2.6rem; }
.font24 { font-size: 2.4rem; }
.font20 { font-size: 2.0rem; }
.font16 { font-size: 1.6rem; }
.font14 { font-size: 1.4rem; }
.font13 { font-size: 1.3rem; }
.font12 { font-size: 1.2rem; }
.font11 {
    font-size: 1.1rem;
    line-height: 1.2;
}
.font09 { font-size: 0.9rem; }
.font08 { font-size: 0.8rem; }

/***** 太字 *****/
.bold { font-weight:800; }

/***** ライン *****/
.line-top {
    margin-bottom: 5px;
    margin-right: 1%;
    padding-top: 5px;
    border-top: 1px solid;
}

.line-bottom {
    margin-right: 5px;
    border-bottom: 1px solid;
}

.vline-left {
    border-left: 1px solid;
}

.vline-right {
    margin-top: 0;
    border-right: 1px solid;
}

/***** ライン 色 *****/
.line-blue { border-color: #00f; }
.line-blue-a { border-color: #1e90ff; } /* dodgerblue */
.line-blue-b { border-color: #6495ed; } /* cornflowerblue */
.line-blue-c { border-color: #00bfff; } /* deepskyblue */

.line-red { border-color: #f00; }
.line-red-a { border-color: #f06; }
.line-red-b { border-color: #f39; }
.line-red-c { border-color: #f9c; }

.line-gray { border-color: #808080; }
.line-gray-a { border-color: #a9a9a9; } /* darkgray */

.line-orange { border-color: #ffa500; }
.line-orange-a { border-color: #ff8c00; }

/***** フォント 色 *****/
.blue { color: #00f; }
.blue-a { color: #1e90ff; } /* dodgerblue */
.blue-b { color: #6495ed; } /* cornflowerblue */
.blue-c { color: #00bfff; } /* deepskyblue */

.red { color: #f00; }
.red-a { color: #f06; }
.red-b { color: #f39; }
.red-c { color: #f9c; }
.red-d { color: #d51242; }

.gray { color: #808080; }
.gray-a { color: #a9a9a9; } /* darkgray */

.white { color: #fff; }

.orange { color: #ff8c00; }

/***** 装飾 *****/
.fonten {
    font-family: var(--mh--font-family--en);
}

.titleimg::before{
  content: "";
  display: inline-block;  
  background-image: url('/house-maintenance/water-heater/img/post/titleimg.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 1.6em;
  height: 1.7em;
  vertical-align: top;
}
.titleimg-a::before{
  content: "■";
  color: #ff8c00;
  display: inline-block;  
  background-size: cover;
  background-repeat: no-repeat;
  width: 1.2em;
  height: 1.0em;
}
.titleimg-b::before{
  content: "▶";
  color: #ff8c00;
  /* color: #d51242; */
  display: inline-block;  
  background-size: cover;
  background-repeat: no-repeat;
  width: 1.1em;
  height: 1.0em;
}
.titleimg-c::before{
  content: "▶";
  /* color: #ff8c00; */
  color: #d51242;
  display: inline-block;  
  background-size: cover;
  background-repeat: no-repeat;
  width: 1.1em;
  height: 1.0em;
}

.back-deco {
    width: 88%;
    padding: 20px 0;
    background-color: #f5f5f5;
    border-radius: 44px;
}

/***** Table *****/
.post .scrl-wrap {
  overflow-x: scroll;
}

.post table { width: 98%; }
.post table.scrl {
    width: 98%;
    min-width: 768px;
}
.post table th, table td {
  border-collapse: collapse;
  border: solid 1px #a9a9a9;
/*  border: solid 1px #1241d5; */
}
.post th { background-color: #fff4e6; }

/***** CTA POST *****/
.post .c-cv01__container {
    margin-top: 40px;
    padding:25px 4% 25px 4%;
    position:relative;
    z-index:1;
    background-color: #f9f9f9;
 /*   box-shadow:0px 5px 0px rgba(104,104,104,.3); */
 /*   background:var(--mh--color--grayscale-100); */
}

/***** breadcrumb *****/
#toc_container{margin:20px 0 0 0;}
#toc_container li,#toc_container ul{margin:0;padding:0}
#toc_container.no_bullets li,#toc_container.no_bullets ul,#toc_container.no_bullets ul li,.toc_widget_list.no_bullets,.toc_widget_list.no_bullets li{background:0 0;list-style-type:none;list-style:none}
#toc_container.have_bullets li{padding-left:12px}
#toc_container ul ul{margin-left:1.5em}
#toc_container{background:#f9f9f9;border:1px solid #aaa;padding:10px;margin-bottom:1em;width:auto;display:table;font-size:1em;line-height:1.6;}
#toc_container p.toc_title{text-align:center;font-weight:700;margin:0;padding:0}
#toc_container.toc_black p.toc_title{color:#aaa}
#toc_container p.toc_title+ul.toc_list{margin-top:1em}
#toc_container a{text-decoration:none;text-shadow:none}
#toc_container a:hover{text-decoration:underline}
@media screen and (min-width:769px){#toc_container{font-size:.9em;}}
table{border-collapse:collapse;margin-top:10px;margin-right:auto;margin-bottom:30px;margin-left:5px;}
td,th{border-collapse:collapse;border:1px solid #DDD;padding-top:10px;padding-right:10px;padding-bottom:7px;padding-left:10px;}
.smaller{font-size:60%;}

/***** width *****/
@media (min-width: 768px) {
	.post {
	    margin: 0 auto;
	    padding: 0 1%;
	}
}

/***** フロート解除 *****/
@media screen and (max-width: 767px) {
    .flt-left, .flt-right {
        float: none;
        width: auto;
    }
    /***** カラム幅 解除 *****/
    .col-90, .col-80, .col-70, .col-60, .col-50, .col-40, .col-33, .col-30, .col-25, .col-20, .col-17, .col-10 { width: 100%; }
    .padding-l-6 { padding-left: 1%; }
    /***** 画像幅縮小 *****/
    .post img.supervisor { width: 50%; }
    /***** 折り返し調整 *****/
    .post h1.font36 { font-size: clamp(2.1rem, calc(1.25vw + 1.5rem), 3.6rem); }
    .post h1.font34 { font-size: clamp(1.4rem, calc(0.4vw + 1.6rem), 3.4rem); }
    .post h1.font32 { font-size: clamp(1.4rem, calc(0.5vw + 1.5rem), 3.2rem); }
    .post h1.font30 { font-size: clamp(1.4rem, calc(0.3vw + 1.3rem), 3.0rem); }
}