@charset "utf-8";
/*//////////////////////////////////////

  サイディングプラン

/////////////////////////////////////*/
.siding p {
  font-size: 14px;
  text-align: justify;
  line-height: 1.5;
}
.siding-mv {
  margin: 40px auto 45px;
}
.siding_ttl {
  margin-bottom: 25px;
  padding: 12px 20px 10px;
  background-color: #f2f2f2;
  color: #008e1e;
  font-size: 18px;
  font-weight: bold;
}
.siding_hd {
  margin-bottom: 25px;
  padding: 3px 20px 3px;
  background-color: #f2f2f2;
  color: #000000;
  font-size: 18px;
  height: 30px;
}
.wall-paint-box h2 {
  margin: 13px 11px 23px;
}
.wall-paint_hd {
  display: flex;
  align-items: center;
  height: 47px;
  margin-bottom: 36px;
  padding: 0 20px;
  background-color: #f2f2f2;
  font-size: 18px;
  color: #008e1e;
} 
.wall-paint-box h2{
  display: flex;
  align-items: center;
  height: 31px;
  margin-bottom: 21px;
  padding: 0 20px;
  background-color: #f2f2f2;
  font-size: 16px;
  color: #000000;
}
.wall-paint_more a {
  display: block;
  width: 260px;
  padding: 10px 35px 10px 23px;
  border-radius: 4px;
  border: 1px solid #61c13c;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  background: url(/public/img/common/ico_arrow_green.png) 95% center no-repeat;
  color: #61c13c;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 52px;
  text-align: center;
  margin-left: 200px;
}
.wall-paint_more a:hover {
  background-color: rgba(97, 193, 60, 0.05);
  text-decoration: none;
  -webkit-box-shadow: 0 0 4px rgba(97, 193, 60, 0.2);
  box-shadow: 0 0 4px rgba(97, 193, 60, 0.2);
}  
.siding_more a {
  display: block;
  width: 260px;
  padding: 10px 35px 10px 23px;
  border-radius: 4px;
  border: 1px solid #61c13c;
  -webkit-box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
  box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
  background: url(/public/img/common/ico_arrow_green.png) 95% center no-repeat;
  color: #61c13c;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  margin: 22px 150px 42px;
}
.siding_more a:hover {
  background-color: rgba(97, 193, 60, 0.05);
  text-decoration: none;
  -webkit-box-shadow: 0 0 4px rgba(97, 193, 60, 0.2);
  box-shadow: 0 0 4px rgba(97, 193, 60, 0.2);
} 
.wall-paint-const.siding_more{
  text-align: center !important;
} 
.siding-blog_more a {
  display: block;
  width: 288px;
  padding: 10px 35px 10px 23px;
  border-radius: 4px;
  border: 1px solid #61c13c;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  background: url(/public/img/common/ico_arrow_green.png) 95% center no-repeat;
  color: #61c13c;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 52px;
  text-align: center;
  margin-left: 200px;
}
.siding-blog_more a:hover {
  background-color: rgba(97, 193, 60, 0.05);
  text-decoration: none;
  -webkit-box-shadow: 0 0 4px rgba(97, 193, 60, 0.2);
  box-shadow: 0 0 4px rgba(97, 193, 60, 0.2);
}  
.read_more a {
  position: relative;
  display: inline-block;
  height: 24px;
  padding: 0 40px 0 21px;
  border: 1.5px solid #ff4041;
  border-radius: 23px;
  color: #ff4041;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  line-height: 24px;
  margin-bottom: 16px;
}
.read_more{
  text-align:center !important;
}
.read_more a::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 14px;
  width: 9px;
  height: 14px;
  margin: auto 0;
  background: url(/public/img/common/icon_next-lightbrilliantred.svg) left 0px center no-repeat;
  background-size: contain;
  transform: rotate(90deg);
}
.read_more a.is-open::after{
  transform: rotate(270deg);
}

/* サイディングリフォームとは？
------------------------------------ */
.wrap {
  margin: 0 30px;
  font-size: 14px;
  text-align: justify;
}
.ways {
  display: flex;
  align-content: center;
  margin: 10px auto;
}
.ways dt {
  margin-right: 10px;
  font-size: 16px;
  font-weight: bold;
}
.ways dd {
  display: inline-flex;
  align-content: center;
}
.ways dd::before {
  content: '…';
  display: inline-block;
  margin-right: 10px;
  font-weight: bold;
}
.ways dt.blue { color: #0080e5; }
.ways dt.red { color: #ee4646; }

p.pic_exp {
  margin-top: 20px;
  margin-bottom: 50px;
}
/* こんな方におすすめ
------------------------------------ */
.fitsfor .siding_subttl {
  margin: 20px 40px;
  padding: 7px 0 5px;
  border-radius: 25px;
  background-color: #ffdfdf;
  color: #d51f20;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.fitsfor ul {
  margin: 0 100px;
}
.fitsfor li {
  margin-bottom: 10px;
  padding-left: 27px;
  background: url(/public/img/static/siding/icon_check.png) no-repeat left center;
  font-size: 16px;
  font-weight: bold;
}
.pic_exp02 {
  margin: 30px 0 50px;
  text-align: center;
}

/* おすすめ・特長デザイン
------------------------------------ */
.sec02 > p {
  margin: 0 30px;
}
.main .points,
.feature {
  margin: 0 30px 40px;
}
.main .points dt,
.feature dt {
  display: table;
  align-content: center;
  justify-content: start;
  margin: 25px 0 15px;
}
.main .points dt p,
.feature dt p {
  display: table-cell;
  margin: 0;
  padding-left: 10px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3;
  vertical-align: middle;
}
.main .points dt span,
.feature dt span {
  display: table-cell;
  height: 20px;
  margin: 0px 10px 10px 0;
  padding: 10px 10px;
  background-color: #ff5939;
  color: white;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  line-height: 20px;
  vertical-align: middle;
}
.main .points dd,
.feature dd {
  font-size: 14px;
  text-align: justify;
  line-height: 1.7;
}
.main .points dd {margin-bottom: 50px;}
.feature dd {margin-bottom: 30px;}
.main .points dd img,
.feature dd img {
  display: block;
  margin: 25px auto 0;
}
.feature dt span {
  background-color: #23a1f8;
}
/* アルミサイディング
------------------------------------ */
.sec03 > p {
  margin: 0 30px;
}
.sec03 .siding_subttl {
  position: relative;
  height: 30px;
  margin: 0 30px 30px;
}
.sec03 .siding_subttl::before {
  content: '';
  position: absolute;
  top: 50%;
  display: block;
  width: 100%;
  margin: auto;
  border-top: 1px solid #aaa;
}
.sec03 .siding_subttl span {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: inline;
  width: 8em;
  margin: auto;
  padding: 3px 12px 0;
  background-color: white;
  color: #008e1e;
  font-size: 18px;
  text-align: center;
}
.sec03 .items li {
  margin-bottom: 30px;
  text-align: center;
}
/* ====================================================
  ボタン
====================================================*/
.sec03 .siding_head-btn {
  margin-top: 100px;
  text-align: center !important;
}
.sec03 .siding_head-btn a {
  display: inline-block;
  border-radius: 7px;
  background: #f85334;
}
.sec03 .siding_head-btn img {
  border-radius: 6px;
  box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.8);
  opacity: 1;
  transition: opacity 0.3s;
}
.sec03 .siding_head-btn img:hover {
  opacity: 0.9;
}
/*--------------------------------
 サイディングの外壁塗装工事の詳細
--------------------------------*/
.const-dtl_work-desc li {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  min-height: 33px;
  padding: 5px 0;
  border-bottom: 1px dotted #bbb;
  font-size: 16px;
}
.const-dtl_work-desc li:last-child {
  border-bottom: none;
}
.const-dtl_work-desc-hd {
  flex: none;
  width: 112px;
  font-family: "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  line-height: 1.2;
  width: 121px;const-dtl_work-desc-hd
}
.const-dtl_work-desc-txt {
  max-width: 392px;
  line-height: 1.2;
  font-size: 14px;
}
.const-dtl_work-desc-opt {
  display: inline-block;
  height: 20px;
  margin: 5px 0 0 9px;
  padding: 3px 7px 2px;
  border-radius: 3px;
  border: 1px solid #de1818;
  color: #de1818;
  line-height: 20px;
}
.const-dtl_work-desc-opt:first-of-type {
  margin-left: 0;
}
a.const-dtl_work-desc-opt--link {
  padding-right: 20px;
  background: url(/sp/img/common/icon_next-lightred.svg) right 4px center no-repeat;
  background-size: 9px auto;
  text-decoration: none;
}
/* ====================================================
外壁の塗装事例
====================================================*/
.wall-paint-box{
  width: 653px;
  border: 1px solid #cccccc;
  margin-top: 100px;
}
.accordion{
  display: none;
}
.wall-paint-const {
  margin: 0 20px 20px 20px;
}
.wall-paint-const.open-accordion,
.accordion .wall-paint-const {
  border-bottom: 1px solid #cccccc;
}
.accordion .wall-paint-const:last-child {
  border-bottom: none;
}
.wall-paint-const-media-body{
  margin-left: auto;
  width: 388px;
}
.wall-paint-const_ttl {
  font-size: 16px !important;
  font-weight: bold;
  margin-bottom: 21px;
}
.wall-paint-const-media {
  display: flex;
}
.wall-paint-const-point_ttl {
  margin-bottom: 15px;
  color: #ff4041;
  font-size: 17px;
  font-weight: bold;
}
.wall-paint-const-point_ttl::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-top: -1px;
  margin-right: 9px;
  border-radius: 50%;
  background: url(/public/img/static/wall-paint/icon_index_finger.svg) left top no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.wall-paint-const_show {
  text-align: center;
}
.wall-paint-const_show a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 34px 0 29px;
  border-radius: 5px;
  background: url(/sp/img/common/icon_next-white.svg) right 11px center no-repeat #ff4041;
  background-size: 7px auto;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.1);
  color: #fff;
  font-size: 18px;
  text-decoration: none;
}
.const-dtl_work-hd {
  color: #ff4f4f;
  font-family: "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 18px ;
  font-weight: bold;
  line-height: 30px;
}
.wall-paint-const-point_txt{
  margin-top: 20px;
}
/* ====================================================
外壁塗装色
====================================================*/
.const-dtl-color {
  display: flex;
  align-items: center;
}
.const-dtl-color_img {
  box-sizing: border-box;
  width: 23px;
  height: 23px;
  margin-right: 10px;
  border-radius: 50%;
  border: 1px solid #c9c9c9;
}
.const-dtl-color_txt {
  font-size: 16px;
}
/* ====================================================
ツールチップ
====================================================*/
.const-tooltip-wrap {
  position: relative;
  width: 18px;
  margin-left: auto;
}
.const-tooltip-wrap .const-tooltip_show {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid #0f87e7;
  border-radius: 50%;
  color: #0f87e7;
  font-family: "YuGothicM", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
}
.const-tooltip-wrap--work {
  display: inline-block;
  margin-left: 3px;
}
.const-tooltip-wrap--work .const-tooltip_show {
  border: 1px solid #ff4041;
  color: #ff4041;
  font-size: 14px;
}
.const-tooltip {
  display: none;
  box-sizing: border-box;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  top: 34px;
  width: 383px;
  padding: 7px 7px 6px 10px;
  border: 2px solid #0080e5;
  box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.24);
  background-color: #fff;
}
.const-tooltip::before, .const-tooltip::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: 0 auto;
  border: 8px solid transparent;
  border-top: none;
}
.const-tooltip::before {
  top: -15px;
  border-bottom: 15px solid #0080e5;
  filter: drop-shadow(1px -1px 2px rgba(0, 0, 0, 0.24));
}
.const-tooltip::after {
  top: -12px;
  border-bottom: 15px solid #fff;
}
.const-tooltip-body {
  width: 224px;
}
.const-tooltip_ttl {
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: bold;
}
.const-tooltip_txt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-bottom: 8px;
  font-size: 13px;
  text-align: justify;
}
.const-tooltip-show a {
  padding-right: 12px;
  background: url(/sp/img/common/icon_next-pureblue.svg) right center no-repeat;
  background-size: 6px auto;
  color: #0080e5;
  font-size: 13px;
}
.const-tooltip_img {
  margin-left: auto;
}
.const-tooltip_img img {
  width: 125px;
  height: auto;
}
.const-tooltip--work {
  border: 2px solid #ff4041;
}
.const-tooltip--work::before {
  border-bottom: 15px solid #ff4041;
}
.const-tooltip--work .const-tooltip-show a {
  background-image: url(/sp/img/common/icon_next-lightred.svg);
  color: #ff4041;
}  
.siding-const_show a{
  text-align: right;
  padding-right: 12px;
  background: url("/public/img/common/icon_next-brilliantred.svg") right center no-repeat;
  background-size: 7px auto;
  color: #f9595a;
  font-size: 15px;
  line-height: 40px;
}
.siding-const_show{
  text-align: right !important;
}
/* ====================================================
  外壁塗装の基礎知識
====================================================*/
.wall-paint-knwl-list {
  margin-bottom: 38px ;
}
.wall-paint-knwl-list li {
  display: flex;
  margin-bottom: 16px;
}
.wall-paint-knwl-list li::before {
  content: "";
  display: flex;
  justify-content: center;
  width: 131px;
  height: 100px;
  border: 1px solid #bbb;
  border-radius: 3px;
  background-position: center center;
  background-repeat: no-repeat;
}
.wall-paint--roof-paint-knowledge li.roof-coating::before,
.wall-paint-knwl-list li.introduction::before {
  background-image: url(/public/img/common/icon_wall_roller.svg);
  background-size: 64.7% auto;
}
.wall-paint--roof-paint-knowledge li.roof-shape::before,
.wall-paint-knwl-list li.price-estimate::before {
  background-image: url(/public/img/common/icon_price-estimate.svg);
  background-size: 36.5% auto;
}
.wall-paint--roof-paint-knowledge li.paint-maker::before,
.wall-paint-knwl-list li.apply-subsidy::before {
  background-image: url(/public/img/common/icon_apply-subsidy.svg);
  background-size: 46.4% auto;
}
.wall-paint-knwl-list li.final-tax-return::before {
  background-image: url(/public/img/common/icon_final-tax-return.svg);
  background-size: 46.4% auto;
}
.wall-paint-knwl-list li.color-scheme::before {
  background-image: url(/public/img/common/icon_palette-lightbrilliantred.svg);
  background-size: 50.4% auto;
}
.wall-paint-knwl-list li.outer-wall::before {
  background-image: url(/public/img/common/icon_outer-wall.svg);
  background-size: 68% auto;
}
.wall-paint-knwl-list li.flow-work::before {
  background-image: url(/public/img/common/icon_house_triple.svg);
  background-size: 80.9% auto;
}
.wall-paint-knwl-list li.anxious-point::before {
  background-image: url(/public/img/common/icon_notice_hexagon-lightbrilliantred.svg);
  background-size: 42.8% auto;
}
.wall-paint--roof-paint-knowledge li.anxious-point::before {
  background-image: url(/public/img/common/icon_final-tax-return.svg);
  background-size: 46.4% auto;
}
.wall-paint-knwl-item {
  width: 560px;
  margin-left: auto;
}
.wall-paint-knwl_ttl {
  display: inline-block;
  margin-bottom: 7px;
  color: #ff4041;
  font-family: 'YuGothicM', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-decoration: underline;
  letter-spacing: -0.1ex;
}
.wall-paint-knwl_ttl:hover {
  text-decoration: none;
}
.wall-paint-knwl_txt {
  font-size: 14px;
}
.wall-paint-knwl_txt a {
  color: #008ae9;
  text-decoration: underline;
}
.wall-paint-knwl_txt a:hover {
  text-decoration: none;
}
.siding-box h2{
  margin-bottom: 25px;
  background-color: #f2f2f2;
  color: #008e1e;
  font-size: 18px;
  font-weight: bold; 
}
/* ====================================================
ブログ
====================================================*/
.wall-paint-blog_ttl {
  margin-bottom: 30px;
}
.wall-paint-box {
  margin-top: 103px;
  margin-left: 30px;
}
.blog-media {
  margin-bottom: 40px;
}
.blog-media_link {
  display: flex;
  text-decoration: none;
}
.blog-media_link:hover {
  text-decoration: none;
}
.blog-art section:last-of-type {
  margin-bottom: 47px;
}
.blog-media_img {
  width: 281px;
}
.blog-media_img img {
  width: 100%;
  height: auto;
}
.blog-media_body {
  width: 401px;
  margin-left: auto;
}
.siding-blog_ttl {
  font-family: "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  color: #000000 !important;
  background: none !important;
  padding: 0 !important;
  margin:30px 0 30px !important;
}
.blog-media_date {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
  color: #f9595a;
  font-size: 11px ;
}
.blog-media_txt {
  margin-bottom: 8px;
  font-size: 13px;
  text-align: justify;
}
.blog-media_read {
  text-align: right !important;
  padding-right: 12px;
  background: url("/public/img/common/icon_next-brilliantred.svg") right center no-repeat;
  background-size: 5px auto;
  color: #f9595a;
  font-size: 12px;
}
.blog-media-tags-list {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 20px;
}
.blog-media-tags-list li {
  margin: 0 10px 10px 0;
}
.blog-media-tags-list li:last-of-type {
  margin-right: 0;
}
.blog-media-tags-list a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #333 !important;
  font-size: 11px;
  text-decoration: none !important;
  transition: opacity ease-in-out 0.2s;
}
.blog-media-tags-list a:hover {
  opacity: 0.8;
}  
/* ====================================================
  よくあるご質問
====================================================*/
.wall-paint-faq .wall-paint_hd {
  margin-bottom: 20px;
}
.wall-paint-faq-list {
  margin: 0 40px 30px;
}
.wall-paint-faq-list li {
  border-bottom: 1px solid #ddd;
}
.wall-paint-faq-list a {
  position: relative;
  display: block;
  padding: 13px 24px;
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
}
.wall-paint-faq-list a::before {
  content: "Q";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin: auto 0;
  color: #ff4041;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
}
.bnr li {
  text-align: center;
  margin-bottom: 21px;
}