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

sup{
  font-size: 65%;
  font-weight: normal;
}

/*================================
共通パーツ
================================*/
/*パンくず
================================*/
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a{
  color: #fff;
}
.breadcrumb-item+.breadcrumb-item::after{
  border-color: #fff;
}
@media (hover: hover) {
  .breadcrumb .breadcrumb-item a:hover {
    color: #fff;
    text-decoration: underline;
  }
}
@media (max-width: 767px) {
  .breadcrumb{
    font-size: .9rem;
  }
}

/*index_mv*/
#index_mv .container{
  position: relative;
}
#index_mv .breadcrumb{
  position: absolute;
  left: .75rem;
}
@media (min-width: 768px) {
  #index_mv .breadcrumb{
    top: 1rem;
  }
}
@media (max-width: 767px) {
  #index_mv .breadcrumb{
    top: .5rem;
  }
}


/*注釈テキスト
================================*/
.annotation_list{
  list-style: none;
  text-align: left;
}
@media (min-width: 768px) {
  .annotation_list{
    padding-left: .9rem;
    text-indent: -.9rem;
    font-size: .9rem;
  }
  .annotation_txt{
    font-size: .9rem;
    padding-left: .9rem;
    text-indent: -.9rem;
  }
}
@media (max-width: 767px) {
  .annotation_list{
    font-size: .8rem;
    padding-left: .8rem;
    text-indent: -.8rem;
  }
  .annotation_txt{
    font-size: .8rem;
    padding-left: .8rem;
    text-indent: -.8rem;
  }
}

/*注釈　数字ありテキスト
================================*/
.annotation_list_num{
  counter-reset: list_num;
  list-style: none;
  padding-left: 0;
}
.annotation_list_num > li:before {
  counter-increment: list_num;
  content: "※"counter(list_num)"：";
}
.annotation_list_num > li > ul{
  list-style: none;
  padding-left: 0;
}
.annotation_list_num > li > ul > li{
  text-indent: -1rem;
  padding-left: 1rem;
}
@media (min-width: 768px) {
  .annotation_list_num{
    font-size: .9rem;
  }
  .annotation_list_num > li{
    text-indent: -2rem;
    padding-left: 2rem;
  }
}
@media (max-width: 767px) {
  .annotation_list_num{
    font-size: .8rem;
  }
  .annotation_list_num > li{
    text-indent: -1.8rem;
    padding-left: 1.8rem;
  }
}

/*スクロールバー
================================*/
.scroll__inner {
  background-color: #ffffff;
  padding: 0 0 20px 0;
  overflow-x: scroll;
  -ms-overflow-style: none;
  /* IE, Edge 対応 */
  scrollbar-width: none;
  /* Firefox 対応 */
}
.scroll__inner::-webkit-scrollbar {
  /* Chrome, Safari 対応 */
  display: none;
}
.simplebar-scrollbar::before {
  background: #ffffff;
  border-radius: 0;
  height: 5px !important;
  margin-left: 2px;
  margin-top: 3px;
}
.simplebar-scrollbar.simplebar-visible::before {
  opacity: 1;
}
.simplebar-track {
  background: #cbd2e0;
  height: 15px !important;
}

/*ポップアップ
================================*/
.lum-lightbox{
  background: rgba(0, 0, 0, .4) !important;
}
.lum-lightbox.lum-open{
  z-index: 2000;
}
.lum-lightbox-inner{
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}
.lum-lightbox-position-helper{
  position: relative;
}
.lum-lightbox-inner img.lum-img{
  max-width: 150vw;
  background-color: #fff;
  padding: 1rem;
}
.lum-gallery-button,
.lum-close-button{
  display: none;
}


/*下層　section
================================*/
body:not(#favo) #main section:not(:first-child){
  padding-top: 0;
}
body:not(#favo) #main section:not(:last-child){
  padding-bottom: 0;
}

/*下層　セクション線あり
================================*/
.sect_line{
  border-bottom: #cacaca 1px solid;
}
.sect_line *:last-child{
  margin-bottom: 0;
}
body:not(#favo) #main section:last-child .sect_line:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

@media (min-width: 768px) {
  .sect_line{
    padding: 60px 0;
  }
}
@media (max-width: 767px) {
  body#favo_spec .sect_line{
    padding: 30px 0;
  }
  body#favo_insulation .sect_line,
  body#favo_guarantee .sect_line,
  body#favo_cost_performance .sect_line{
    padding: 60px 0;
  }

}

/*下層　MV
================================*/
#page_mv{
   background: linear-gradient(180deg, #353557 0%, #353557 72%, rgba(0,0,0,0) 72%, rgba(0,0,0,0) 100%);
}
#page_mv #page_ttl{
  color: #fff;
}
@media (max-width: 767px) {
  #favo_guarantee #page_mv img{
    object-position: right center;

  }
}

/*下層 タイトル
================================*/
/*明朝の大見出し*/
.feat_ttl{
  font-weight: 600;
}
@media (min-width: 768px) {
  .feat_ttl{
    margin-bottom: 1.5rem;
  }
}
@media (max-width: 767px) {
  .feat_ttl{
    font-size: 1.35rem;
    margin-bottom: 1rem;
  }
}

/*左ラインの見出し*/
.ll_ttl{
  color: #353557;
  font-weight: bold;
  border-left: #353557 3px solid;
}
@media (min-width: 992px) {
  .ll_ttl{
    font-size: 1.35rem;
  }
}
@media (min-width: 768px) and (max-width: 991px){
  .ll_ttl{
    font-size: 1.25rem;
  }
}
@media (min-width: 768px) {
  .ll_ttl{
    padding-left: 1rem;
    margin-bottom: 1.5rem;
  }
}
@media (max-width: 767px) {
  .ll_ttl{
    font-size: 1.15rem;
    padding-left: .5rem;
    margin-bottom: 1rem;
  }
}

/*黒色の見出し*/
.blk_ttl{
  font-weight: bold;
}
@media (min-width: 768px) {
  .blk_ttl{
    font-size: 1.09rem;
  }
}
@media (max-width: 767px) {
  .blk_ttl{
    font-size: 1rem;
  }
}

/*下層 背景あり
================================*/
.bgbox{
  background-color: #f0f0f0;
}
@media (min-width: 768px) {
  .bgbox{
    padding: 1.3rem;
  }
}
@media (max-width: 767px) {
  .bgbox{
    padding: 1rem;
  }
}

/*下層 画像付き解説
================================*/
.sect_line .ll_ttl + .exp_frame{
  margin-top: 0;
}
.exp_frame{
  margin-top: 60px;
}
@media (min-width: 992px) {
  .exp_frame .row .exp_fig{
    padding-left: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .exp_frame .exp_fig{
    margin-top: 2rem;
  }
}
@media (min-width: 768px) {
  .accordion-body .exp_frame:first-child{
    margin-top: 0;
  }
}
@media (max-width: 991px) {
  .exp_frame .exp_fig{
    margin-top: 1.5rem;
  }
}


/*================================
Index
================================*/
#index_mv{
  position: relative;
  width: 100%;
}
#index_mv .container{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
}
#index_mv #mv_photo{
  width: 100%;
  height: 100%;
}
#index_mv #innerbox{
  position: relative;
  color: #fff;
}
#index_mv #innerbox::before{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  background-color: #808080;
}
#index_mv #mv_txt{
  position: relative;
  padding: 30px;
}
#index_mv #mv_txt #page_ttl{
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
#index_mv #mv_txt p{
  font-size: .95rem;
  line-height: 1.6;
}
#index_mv #mv_logo{
  max-width: 163px;
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 992px) {
  #index_mv{
    margin-top: 100px;
  }
  #index_mv #innerbox{
    width: 46%;
    max-width: 513px;
  }
}
@media (min-width: 768px) and (max-width: 991px){
  #index_mv .container{
    max-width: 100%;
  }
  #index_mv #innerbox{
    width: 430px;
  }
}
@media (min-width: 768px) {
  #index_mv #mv_contents{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #index_mv #mv_photo{
    background-image: url("../img/mv.webp");
    background-position: center;
    background-size: cover;
    aspect-ratio: 13/7;
    min-height: 700px;
    max-height: 1120px;
  }
  #index_mv #mv_txt #page_ttl{
    font-size: 1.85rem;
  }
}
@media (max-width: 991px) {
  #index_mv{
    margin-top: 60px;
  }
}
@media (max-width: 767px) {
  #index_mv #mv_photo{
    background-image: url("../img/mv_sp.webp");
    background-size: contain;
    background-position: center bottom;
    aspect-ratio: 4/3;
  }
  #index_mv #innerbox{
    width: 100%;
    margin-top: -64px;
  }
}

/*フルスペックの標準仕様
================================*/
.spec_frame{
  position: relative;
  border-radius: 10px;
  border: #353557 1px solid;
  text-align: center;
  margin-top: 14px;
  margin-bottom: 2rem;
}
.spec_frame .spec_ttl{
  position: absolute;
  left: 0;
  width: 100%;
}
.spec_frame .spec_ttl ul{
  display: inline-flex;
  justify-content: center;
  line-height: 1.2;
  padding: 0;
  list-style: none;
  background-color: #fff;
  margin-bottom: 0;
}
.spec_frame .spec_ttl ul li{
  color: #fff;
  font-weight: bold;
  background-color: #353557;
  min-width: 115px;
  padding: .3rem 1rem;
}
.spec_frame .spec_ttl.plus ul{
  column-gap: 30px;
}
.spec_frame .spec_ttl.plus ul li{
  position: relative;
}
.spec_frame .spec_ttl.plus ul li:not(:last-child)::before{
  content: '+';
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -24px;
  color: #353557;
  font-size: 20px;
}
.spec_frame h2{
  position: relative;
  color: #353557;
  text-align: center;
  font-weight: 600;
  line-height: 1.4;
  display: inline-block;
}
.spec_frame .spec_list{
  padding-left: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}
.spec_frame .spec_list li{
  margin-top: 1rem;
}
.spec_frame .spec_list li span{
  position: relative;
  color: #353557;
  font-weight: bold;
  display: block;
  margin-top: .5rem;
}
.spec_frame .spec_list li span sup{
  position: absolute;
  width: 100%;
  font-weight: bold;
}
#full_specification .annotation_list_num{
  color: #353557;
}
#full_specification .annotation_list_num li{
  margin-bottom: 0;
}

@media (min-width: 1200px) {
  .spec_frame .spec_list{
    max-width: 930px;
  }
  .spec_frame .spec_list li.spec01 span sup{
    right: calc(50% - 140px);
  }
  .spec_frame .spec_list li.spec04 span sup{
    right: calc(50% - 170px);
  }
  .spec_frame .spec_list li.spec05 span sup,
  .spec_frame .spec_list li.spec06 span sup{
    right: calc(50% - 150px);
  }
}
@media (min-width: 992px) and (max-width: 1199px){
  .spec_frame .spec_list{
    max-width: 840px;
  }
  .spec_frame .spec_list li.spec01 span sup{
    right: calc(50% - 130px);
  }
  .spec_frame .spec_list li.spec04 span sup{
    right: calc(50% - 160px);
  }
  .spec_frame .spec_list li.spec05 span sup,
  .spec_frame .spec_list li.spec06 span sup{
    right: calc(50% - 140px);
  }
}
@media (min-width: 992px) {
  .spec_frame h2{
    font-size: 1.7rem;
  }
  .spec_frame .spec_list li{
    width: 20%;
  }
}
@media (min-width: 768px) and (max-width: 991px){
  .spec_frame h2{
    font-size: 1.5rem;
  }
  .spec_frame .spec_list{
    max-width: 610px;
  }
  .spec_frame .spec_list li{
    width: 33.33333%;
  }
  .spec_frame .spec_list li.spec01 span sup{
    right: calc(50% - 148px);
  }
  .spec_frame .spec_list li.spec04 span sup{
    right: calc(50% - 178px);
  }
  .spec_frame .spec_list li.spec05 span sup,
  .spec_frame .spec_list li.spec06 span sup{
    right: calc(50% - 158px);
  }
}
@media (min-width: 768px) {
  .spec_frame{
    padding: 50px 4%;
  }
  .spec_frame.design{
    margin-bottom: 3rem;
  }
  .spec_frame h2{
    margin-bottom: 2rem;
  }
  .spec_frame .spec_ttl ul{
    gap: 8px;
  }
  .spec_frame .spec_ttl{
    top: -14px;
  }
  .spec_frame .spec_list li span{
    font-size: .9rem;
  }
  .spec_frame .spec_list li.spec01 span sup{
    top: 29px;
  }
  .spec_frame .spec_list li.spec04 span sup,
  .spec_frame .spec_list li.spec05 span sup,
  .spec_frame .spec_list li.spec06 span sup{
    top: 8px;
  }
  .spec_frame .spec_list li img{
    max-width: 115px;
  }
  #full_specification .annotation_list{
    padding-left: 2rem;
    text-indent: -2rem;
  }
}
@media (max-width: 767px) {
  .spec_frame{
    padding: 45px .5rem 30px;
  }
  .spec_frame.design{
    margin-bottom: 4rem;
  }
  .spec_frame:not(.design){
    padding-top: 60px;
  }
  .spec_frame h2{
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  .spec_frame .spec_ttl ul{
    flex-wrap: wrap;
    max-width: 260px;
    gap: 5px;
  }
  .spec_frame .spec_ttl.plus{
    top: -14px;
  }
  .spec_frame .spec_ttl:not(.plus){
    top: -30px;
  }
  .spec_frame .spec_ttl ul li{
    font-size: .9rem;
  }
  .spec_frame .spec_list{
    max-width: 278px;
  }
  .spec_frame .spec_list li{
    width: 50%;
  }
  .spec_frame .spec_list li span{
    font-size: .75rem;
  }
  .spec_frame .spec_list li.spec01 span sup{
    right: calc(50% - 108px);
  }
  .spec_frame .spec_list li.spec04 span sup{
    right: calc(50% - 50%);
  }
  .spec_frame .spec_list li.spec05 span sup{
    right: calc(50% - 118px);
  }
  .spec_frame .spec_list li.spec06 span sup{
    right: calc(50% - 118px);
  }
  .spec_frame .spec_list li.spec01 span sup,
  .spec_frame .spec_list li.spec04 span sup{
    top: 24px;
  }
  .spec_frame .spec_list li.spec05 span sup,
  .spec_frame .spec_list li.spec06 span sup{
    top: 6px;
  }
  .spec_frame .spec_list li img{
    max-width: 100px;
  }
  #full_specification .annotation_list{
    padding-left: 1.6rem;
    text-indent: -1.6rem;
    font-size: .7rem;
  }
}


/*4つの特徴
================================*/
#features{
  background-color: #353557;
}
#features h2{
  color: #fff;
  font-weight: 500;
  text-align: center;
}
.features_wrap h3{
  color: #fff;
  font-weight: 500;
}
.features_wrap p{
  color: #fff;
}
.features_wrap p:not(:last-child){
  margin-bottom: .5rem;
}
.features_wrap .btn_detail{
  color: #353557;
  background-color: #fff;
  border-color: #fff;
}
.features_wrap .btn_detail::after{
  border-color: #353557;
}
@media (hover: hover) {
  .features_wrap .btn_detail:hover{
    color: #fff;
    background-color: #353557;
  }
  .features_wrap .btn_detail:hover::after{
    border-color: #fff;
  }
}
@media (min-width: 992px) {
  .features_wrap .btn_detail{
    margin-top: 2rem;
  }
  .features_wrap h3{
    font-size: 2rem;
  }
}
@media (min-width: 768px) and (max-width: 991px){
  .features_wrap h3{
    font-size: 1.8rem;
  }
  .features_wrap p{
    font-size: .9rem;
  }
}
@media (min-width: 768px) {
  #features h2{
    font-size: 2.5rem;
  }
  .features_wrap .row{
    margin-top: 100px;
  }
  .features_wrap h3{
    margin-bottom: 1rem;
  }
}
@media (max-width: 991px) {
  .features_wrap .btn_detail{
    margin-top: 1.5rem;
  }
  .features_wrap .annotation_txt{
    font-size: .8rem !important;
  }
}
@media (max-width: 767px) {
  #features h2{
    font-size: 2.1rem;
  }
  .features_wrap .row{
    margin-top: 50px;
  }
  .features_wrap h3{
    font-size: 1.55rem;
    margin-top: 1rem;
  }
  .features_wrap .btn_detail{
    margin-left: auto;
    margin-right: auto;
  }
}

/*================================
高断熱
================================*/
/*断熱等級
================================*/
.grade{
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 992px) {
  .grade_txt{
    width: 380px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .grade_txt{
    width: 350px;
  }
}
@media (min-width: 768px) {
  .grade{
    padding-top: 10px;
  }
  .grade_fig{
    flex: 1;
    max-width: 463px;
  }
}
@media (max-width: 991px) {
}
@media (max-width: 767px) {
  .grade_txt{
    width: 100%;
    margin-bottom: 1.5rem;
  }
  .grade_fig{
    width: 100%;
    max-width: 305px;
    margin-left: auto;
    margin-right: auto;
  }
}

/*家のどこにいても、快適で心地よい。
================================*/
#comfortable img + p{
  margin-top: 1rem;
}
@media (max-width: 991px) {
  #comfortable .col-12:not(:first-child){
    margin-top: 30px;
  }
}

/*最高クラスの高断熱仕様
================================*/
#premier .bgbox{
  margin-top: .75rem;
}
#premier .bgbox h3{
  font-weight: bold;
  margin-bottom: 0;
}
#premier .bgbox h3 sub{
  bottom: 0;
}
.performance_value{
  color: #353557;
  font-weight: bold;
  margin-bottom: 0;
}
.performance_value span{
  font-size: 200%;
  margin-right: .5rem;
}
@media (min-width: 768px) {
  #premier .bgbox h3{
    font-size: 1.2rem;
  }
  .performance_value{
    font-size: 1.5rem;
  }
}
@media (max-width: 767px) {
  #premier .bgbox h3,
  .performance_value{
    text-align: center;
  }
  #premier .bgbox h3{
    font-size: 1rem;
  }
  .performance_value{
    font-size: 1.1rem;
  }
}

/*PREMIUM STANDARD仕様［高性能グラスウール＋付加断熱］*/
#premium_standard .table{
  border-color: #cacaca;
  border-top: #cacaca 1px solid;
}
#premium_standard .table th{
  text-align: center;
  background-color: #f0f0f0;
}
#premium_standard .table td dl{
  display: flex;
  margin-bottom: 0;
}
#premium_standard .table td dl dt{
  font-weight: normal;
}
#premium_standard .table td dl dd{
  margin-bottom: 0;
  flex: 1;
}
@media (min-width: 992px) {
  #premium_standard .table{
    margin-top: 1.5rem;
  }
}
@media (min-width: 768px) {
  #premium_standard .table>:not(caption)>*>*{
    padding: .75rem;
  }
  #premium_standard .table th{
    width: 80px;
  }
}
@media (max-width: 991px) {
  .premium_standard_fig{
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.5rem;
  }
}
@media (max-width: 767px) {
  #premium_standard .table{
    font-size: .8rem;
  }
  #premium_standard .table>:not(caption)>*>*{
    padding: .5rem;
  }
  #premium_standard .table th{
    width: 55px;
  }
}

/*優れた2つの断熱材を採用*/
#insulation_material .material_ttl{
  color: #353557;
  font-weight: bold;
  margin-bottom: .75rem;
}
#insulation_material .material_subttl{
  color: #353557;
  font-weight: bold;
  background-color: #f0f0f0;
  padding: .75rem 1rem;
  text-align: center;
  margin-bottom: 1rem;
}
.performance_wrap .performance .performance_icon img{
  aspect-ratio: 19/7;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.performance_wrap .performance .performance_txt h6{
  color: #353557;
  font-weight: bold;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.performance_wrap + .annotation_txt{
  margin-top: 1rem;
}
.insulation_material_fig{
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 992px) {
  .performance_wrap .performance .performance_txt h6{
    font-size: 1.1rem;
  }
}
@media (min-width: 768px) and (max-width: 991px){
  .performance_wrap .performance .performance_txt h6{
    font-size: 1rem;
  }
}
@media (min-width: 768px) {
  #insulation_material .material_ttl{
    font-size: 1.3rem;
  }
  #insulation_material .material_subttl{
    font-size: 1.15rem;
  }
  .performance_wrap{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .performance_wrap .row{
    border-left: #cacaca 1px solid;
  }
  .performance_wrap .row > div{
    border-right: #cacaca 1px solid;
  }
  .performance_wrap .performance .performance_icon img{
    height: 95px;
  }
  .insulation_material_fig{
    max-width: 618px;
  }
}
@media (max-width: 767px) {
  #insulation_material .material_ttl{
    font-size: 1.1rem;
  }
  #insulation_material .material_subttl{
    font-size: 1rem;
  }
  .performance_wrap .performance .performance_txt h6{
    font-size: .95rem;
  }
  .performance_wrap .row > div:not(:first-child) .performance{
    border-top: #cacaca 1px solid;
  }
  .performance_wrap .performance{
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .performance_wrap .performance .performance_icon img{
    height: 76px;
  }
  .insulation_material_fig{
    max-width: 315px;
    margin-bottom: 1rem;
  }
}


/*高性能トリプルガラスサッシ*/
@media (min-width: 768px) {
  .exp_frame.window .annotation_txt{
    font-size: .8rem;
    padding-left: .8rem;
    text-indent: -.8rem;
  }
}
@media (max-width: 767px) {
  .triple_glazing{
    margin-top: 0;
  }
  .triple_glazing .exp_fig{
    max-width: 282px;
    margin-left: auto;
    margin-right: auto;
  }
}


/*高断熱な玄関ドア*/
@media (min-width: 768px) {
  .entrance_door .exp_fig{
    max-width: 436px;
  }
}
@media (max-width: 767px) {
  .entrance_door .exp_fig{
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}

/*第1種ダクトレス熱交換換気システム*/
.exp_frame.ventilation .exp_fig h5{
  font-weight: bold;
  text-align: center;
}
.exp_frame.ventilation .exp_fig p{
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .exp_frame.ventilation .exp_fig h5{
    font-size: 1rem;
  }
  .exp_frame.ventilation .exp_fig p{
    font-size: .9rem;
  }
}
@media (max-width: 767px) {
  .exp_frame.ventilation .exp_fig h5{
    font-size: .85rem;
  }
  .exp_frame.ventilation .exp_fig p{
    font-size: .8rem;
  }
}

/*高性能フィルターで消臭・ウイルス対策*/
.exp_frame.filter .filter_feat{
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
}
.exp_frame.filter .exp_fig p{
  margin-top: 1rem;
  margin-bottom: 0;
}
.exp_frame.filter .exp_fig .annotation_list_num li{
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .exp_frame.filter .exp_fig p{
    font-size: .9rem;
  }
}
@media (max-width: 767px) {
  .exp_frame.filter .exp_fig img{
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .exp_frame.filter .exp_fig p{
    font-size: .8rem;
  }
}

/*全棟気密測定*/
@media (min-width: 991px) {
  .exp_frame.report .exp_fig{
    margin-top: -50px;
  }
}

@media (max-width: 991px) {
  .exp_frame.report .exp_fig{
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}

/*================================
高スペック
================================*/
/*アコーディオン
================================*/
#spec_accordion .accordion-item{
  border: none;
}
#spec_accordion .accordion-item:first-of-type{
  border-radius: 0;
}
#spec_accordion .accordion-button{
  box-shadow: none;
  border-radius: 0;
}
#spec_accordion .accordion-button::after{
  display: none;
}
#spec_accordion .accordion-body *:last-child{
  margin-bottom: 0;
}
@media (min-width: 768px){
  /*PCは開いたまま*/
  #spec_accordion{
    margin-top: 60px;
  } 
  #spec_accordion .collapse{
    display: block !important; 
    height: auto !important; /* アニメーションの高さを上書き */
    visibility: visible !important;
  }
  #spec_accordion .collapsing{
    -webkit-transition: none;
    transition: none;
    display: none;
	}
  #spec_accordion .accordion-item:not(:last-child){
    margin-bottom: 60px;
  }
  #spec_accordion .accordion-button{
    background-color: transparent;
    transition: none;
    pointer-events: none;
  }
  #spec_accordion .accordion-body{
    padding: 0 0 60px;
  }
  #spec_accordion .accordion-body > p{
    margin-bottom: 2.5rem;
  }
  #spec_accordion .accordion-item:not(:last-child) .accordion-body{
    border-bottom: #cacaca 1px solid;
  }
  #spec_accordion .accordion-button .open_close{
    display: none;
  }
}
@media (max-width: 767px){
  #spec_accordion{
    margin-top: 30px;
  } 
  #spec_accordion .accordion-button{
    position: relative;
    border: #353557 1px solid;
    padding: .65rem;
    min-height: 66px;
  }
  #spec_accordion .accordion-button[aria-expanded="true"]{
    color: #fff;
    background-color: #353557;
  }
  #spec_accordion .accordion-button[aria-expanded="false"]{
    color: #353557;
    background-color: transparent;
  }
  #spec_accordion .accordion-button .open_close{
    position: absolute;
    top: 50%;
    right: .65rem;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
  }
  #spec_accordion .accordion-button .open_close::before,
  #spec_accordion .accordion-button .open_close::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 1px;
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .5s;
  }
  #spec_accordion .accordion-button[aria-expanded="true"] .open_close{
    background-color: #fff;
  }
  #spec_accordion .accordion-button[aria-expanded="true"] .open_close::before,
  #spec_accordion .accordion-button[aria-expanded="true"] .open_close::after{
    background-color: #353557;
  }
  #spec_accordion .accordion-button[aria-expanded="true"] .open_close::after {
    transform: translateY(-50%) rotate(180deg);
  }
  #spec_accordion .accordion-button[aria-expanded="true"] .open_close::before {
    opacity: 0;
  }
  #spec_accordion .accordion-button[aria-expanded="false"] .open_close{
    background-color: #353557;
  }
  #spec_accordion .accordion-button[aria-expanded="false"] .open_close::before,
  #spec_accordion .accordion-button[aria-expanded="false"] .open_close::after{
    background-color: #fff;
  }
  #spec_accordion .accordion-button[aria-expanded="false"] .open_close::after {
    transform: translateY(-50%) rotate(90deg);
    transition: transform .5s;
  }
  #spec_accordion .accordion-body{
    padding: 10px 0 60px 0;
  }
  #spec_accordion .accordion-body > p{
    margin-bottom: 1.5rem;
  }
  #spec_accordion .accordion-body .exp_frame:first-child{
    margin-top: 0;
  }
  @media (hover: hover) {
    #spec_accordion .accordion-button[aria-expanded="false"]:hover{
      background-color: #f0f0f0;
    }
  }
}

/*SPECタイトル*/
.spec_ttl .accordion-button{
  font-weight: bold;
}
.spec_ttl .accordion-button span{
  font-size: 75%;
}
.spec_ttl .sub{
  width: 100%;
  display: block;
}
@media (min-width: 992px){
  .spec_ttl .accordion-button{
    font-size: 1.35rem;
  }
}
@media (min-width: 768px) and (max-width: 991px){
  .spec_ttl .accordion-button{
    font-size: 1.25rem;
  }
}
@media (min-width: 768px){
  .spec_ttl{
    margin-bottom: 0;
  } 
  .spec_ttl .accordion-button{
    color: #353557;
    font-weight: bold;
    border-left: #353557 3px solid;
    padding: 0 0 0 1rem;
    margin-bottom: 2rem; 
    display: block;
  }
  .spec_ttl .accordion-button .sub{
    margin-bottom: .5rem;
  }
  .spec_ttl .accordion-button .s_txt{
    margin-top: .5rem;
  }
}
@media (max-width: 767px){
  .spec_ttl{
    margin-bottom: 1rem;
  }
  .spec_ttl .accordion-button{
    flex-wrap: wrap;
    font-size: 1rem;
  }
  .spec_ttl .accordion-button .sub{
    margin-top: .3rem;
    margin-bottom: .3rem;
  }
  .spec_ttl .accordion-button .s_txt{
    margin-top: .3rem;
  }
  .spec_ttl .accordion-button .s_txt.s_block{
    width: 100%;
    display: block;
  }

}

/*01 地震に強い安全な家をご提供
================================*/
.spec_report{
  padding: 1rem 1.3rem;
}
.spec_report .report_txt h4{
  color: #353557;
  font-size: 1rem;
  font-weight: bold;
}
.spec_report img{
  width: 100%;
  max-width: 220px;
}
@media (min-width: 768px){
  #spec01 .blk_ttl:not(:first-child){
    margin-top: 1.5rem;
  }
  #spec01 .spec_img{
    margin-top: -57px;
  }
  .spec_report{
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .spec_report .report_txt{
    flex: 1;
  }
  #spec01 p{
    margin-bottom: 0;
  }
  .spec_report{
    margin-top: 1rem;
  }
}
@media (max-width: 767px){
  #spec01 .blk_ttl:not(:first-child){
    margin-top: 1rem;
  }
  #spec01 .spec_img{
    margin-top: 1rem; 
  }
  .spec_report{
    margin-top: 1.5rem;
  }
  .spec_report img{
    margin: .5rem auto 0;
    display: block;
  }
}
#spec01 .annotation_list{
  margin-top: 1.5rem;
}

/*02 次世代制震システムEVAS
================================*/
.evas_features .blk_ttl{
  margin-bottom: 1rem;
}
.evas_features dl{
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #353557;
  background-color: #f0f0f0;
  margin-bottom: .75rem;
}
.evas_features dl dt{
  text-align: center;
  padding-right: .75rem;
  border-right: #353557 1px solid;
}
.evas_features dl dd{
  padding-left: 1rem;
}
@media (min-width: 992px){
  .evas_features .exp_fig{
    margin-top: -85px;
  }
}
@media (min-width: 768px){
  .evas_features dl{
    padding: .75rem 1rem;
  }
  .evas_features dl dt{
    width: 50px;
    font-size: 1.9rem;
  }
  .evas_features dl dd{
    font-size: 1.1rem;
  }
}
@media (max-width: 991px){
  .evas_features .exp_fig{
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 768px) and (max-width: 991px){
  .evas_features .exp_fig{
    max-width: 554px;
  }
}
@media (max-width: 767px){
  .evas_features dl{
    padding: .75rem;
  }
  .evas_features dl dt{
    width: 30px;
    font-size: 1.15rem;
  }
  .evas_features .exp_fig{
    max-width: 355px;
  }
}

/*03 省令準耐火構造
================================*/
.fireproof_about .table{
  vertical-align: middle;
  border-color: #9fa3a6;
  margin-bottom: .5rem;
}
.fireproof_about .table>thead{
  vertical-align: middle;
}
.fireproof_about .table>:not(caption)>*>*{
  padding: .2rem .3rem;
}
.fireproof_about .table caption{
  caption-side: top;
  color: #000;
  padding-top: 0;
}
.fireproof_about .table tbody th.favo,
.fireproof_about .table tbody td.favo{
  background-color: #fae5e0;
}
.fireproof_about .table tbody th.favo,
.fireproof_about .table tbody td.favo span{
  color: #e46c65;
}
.fireproof_about .table th{
  text-align: center;
}
.fireproof_about .table thead th{
  color: #fff;
  background-color: #1e2f4f;
  font-weight: normal;
}
.fireproof_about .table thead th{
  border-left: #fff 1px solid;
}
.fireproof_about .table thead th:first-child,
.fireproof_about .table tbody th:first-child{
  border-left: none;
}
.fireproof_about .table tbody th,
.fireproof_about .table tbody td{
  border-left: #9fa3a6 1px solid;
}
.fireproof_about .table tbody th span{
  margin-right: .2rem;
  vertical-align: -1px;
}
.fireproof_about .table tbody td img{
  width: 43px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 992px) {
  .fireproof_about .table{
    margin-top: -60px;
  }
}
@media (min-width: 768px) {
  .fireproof_about .table>:not(caption)>*>*{
    font-size: .9rem;
  }
  .fireproof_about .table tbody th span{
    font-size: 1.2rem;
  }
  .fireproof_about .table thead th:nth-child(1){
    width: 100px;
  }
  .fireproof_about .table thead th:nth-child(3),
  .fireproof_about .table thead th:nth-child(4){
    width: 85px;
  }
}
@media (max-width: 991px) {
  .fireproof_about .table{
    margin-top: 2rem;
  }
}
@media (max-width: 767px) {
  .fireproof_about .table>:not(caption)>*>*{
    font-size: .8rem;
  }
  .fireproof_about .table tbody th span{
    font-size: 1rem;
  }
  .fireproof_about .table thead th:nth-child(1){
    width: 70px;
  }
  .fireproof_about .table thead th:nth-child(3),
  .fireproof_about .table thead th:nth-child(4){
    width: 62px;
  }
}

/*省令準耐火構造 POINT*/
.fireproof_about .point{
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
}
.fireproof_about .point .point_ttl{
  color: #fff;
  font-weight: bold;
  padding: .5rem;
  line-height: 1;
  text-align: center;
  width: 80px;
  display: block;
  background-color: #353557;
  border-radius: 20px;
}
.fireproof_about .point dl{
  display: flex;
  align-items: center;
  font-weight: bold;
  line-height: 1;
}
.fireproof_about .point dl dt{
  color: #353557;
  position: relative;
}
.fireproof_about .point dl dt::after{
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
}
.fireproof_about .point dl dd{
  color: #e46c65;
}
@media (min-width: 992px) {
  .fireproof_about .point .point_ttl{
    margin-right: 1rem;
  }
  .fireproof_about .point dl dt{
    padding-right: 40px;
  }
  .fireproof_about .point dl dt::after{
    top: -2px;
    right: 10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #353557;
  }
}
@media (min-width: 768px) {
  .fireproof_about .point{
    margin-top: 1.5rem;
    padding: 1rem;
  }
  .fireproof_about .point .point_ttl{
    font-size: .9rem;
  }
  .fireproof_about .point dl dd{
    font-size: 1.25rem;
  }
}
@media (max-width: 991px) {
  .fireproof_about .point{
    flex-wrap: wrap;
    justify-content: center;
  }
  .fireproof_about .point .point_ttl{
    margin-bottom: 1rem;
  }
  .fireproof_about .point dl{
    width: 100%;
    flex-wrap: wrap;
    text-align: center;
  }
  .fireproof_about .point dl dt{
    width: 100%;
    padding-bottom: 28px;
  }
  .fireproof_about .point dl dt::after{
    bottom: 11px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #353557;
  }
  .fireproof_about .point dl dd{
    width: 100%;
  }
}
@media (max-width: 767px) {
  .fireproof_about .point{
    margin-top: 1rem;
    padding: 1rem .3rem;
  }
  .fireproof_about .point .point_ttl{
    font-size: .8rem;
  }
  .fireproof_about .point dl dd{
    font-size: .95rem;
  }
}

/*省令準耐火構造の特長*/
.fireproof_features .structure h5{
  color: #1e2f4f;
  font-weight: bold;
  background-color: #dbdcdc;
  text-align: center;
  padding: .5rem;
}
.fireproof_features .structure .image_fig{
  position: relative;
}
.fireproof_features .structure .image_fig p{
  position: absolute;
  bottom: .5rem;
  right: 1rem;
  text-align: right;
}
.fireproof_features .structure .image_fig.favo{
  background-color: #eeeeef;
}
.fireproof_features .structure .image_fig.favo::before{
  content: '';
  display: inline-block;
  position: absolute;
  background-image: url("../img/spec/favo.webp");
  background-size: contain;
  background-repeat: no-repeat;
  aspect-ratio: 250/54;
}
.fireproof_features .structure .image_fig .fig{
  margin-left: auto;
  margin-right: auto;
}
.fireproof_features .structure .image_fig .fig img{
  aspect-ratio: 5/4;
  object-fit: contain;
}

@media (min-width: 768px){
  .fireproof_features .structure h5{
    font-size: 1rem;
  }
  .fireproof_features .structure .image_fig{
    padding: 2.5rem 1rem;
  }
  .fireproof_features .structure .image_fig .fig{
    max-width: 340px;
  }
  .fireproof_features .structure .image_fig.favo::before{
    top: 1.25rem;
    left: 1.25rem;
    width: 28%;
    max-width: 125px;
  }
}
@media (max-width: 767px){
  .fireproof_features .structure h5{
    font-size: .95rem;
  }
  .fireproof_features .structure .image_fig{
    padding: 1rem 1rem 2.5rem;
  }
  .fireproof_features .structure .image_fig .fig{
    max-width: 240px;
  }
  .fireproof_features .structure .image_fig.favo{
    margin-bottom: 1rem !important;
  }
  .fireproof_features .structure .image_fig.favo::before{
    top: 1rem;
    left: 1rem;
    width: 25%;
    max-width: 90px;
  }
}

/*特長テキスト*/
.fireproof_features .features{
  margin-top: 2rem;
}
.fireproof_features .features h5{
  color: #353557;
  font-weight: bold;
}
@media (min-width: 992px){
  .fireproof_features .features{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 991px){
  .fireproof_features .features{
    padding-left: .75rem;
    padding-right: .75rem;
  }
}
@media (min-width: 768px){
  .fireproof_features .features h5{
    font-size: 1rem;
  }
  .fireproof_features .features .row{
    border-left: #cacaca 1px solid;
  }
  .fireproof_features .features .row > div{
    border-right: #cacaca 1px solid;
  }
}
@media (max-width: 767px){
  .fireproof_features .features h5{
    font-size: .95rem;
  }
  .fireproof_features .features .row > div{
    position: relative;
    padding-bottom: 1rem;
  }
  .fireproof_features .features .row > div:not(:last-child){
    margin-bottom: 1rem;
  }
  .fireproof_features .features .row > div:not(:last-child)::before{
    content: '';
    display: inline-block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 75%;
    height: 1px;
    background-color: #cacaca;
  }
  .fireproof_features .features h5{
    text-align: center;
  }
}

/*防火対策のポイント*/
.fire_protection{
  margin-top: 3rem;
}
.fire_protection h4{
  font-weight: bold;
  background-color: #fff;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  display: inline-block;
  margin-left: -2rem;
  padding: .5rem 2rem;
  margin-bottom: 1.5rem;
}
.fire_protection h5{
  color: #353557;
  font-weight: bold;
}
.fire_protection .graph_wrap{
  display: flex;
  flex-wrap: wrap;
  margin-left: -3rem;
  margin-right: -3rem;
  text-align: center;
}
.fire_protection .graph{
  flex: 0 0 auto;
  padding-left: 3rem;
  padding-right: 3rem;
  margin-top: 1.5rem;
}
.fire_protection .graph p:not(.source){
  font-weight: bold;
}
@media (min-width: 768px){
  .fire_protection{
    padding: 2rem;
  }
  .fire_protection h4{
    font-size: 1rem;
  }
  .fire_protection .graph.pie_chart{
    width: 44%;
  }
  .fire_protection .graph.distance_chart{
    width: 56%;
  }
  .fire_protection .graph .source{
    font-size: .9rem;
    margin-top: 1rem;
  }
}
@media (max-width: 767px){
  .fire_protection{
    padding: 2rem 1rem;
  }
  .fire_protection h4{
    font-size: .9rem;
  }
  .fire_protection h5{
    font-size: 1.1rem;
  }
  .fire_protection .graph{
    width: 100%;
  }
  .fire_protection .graph.pie_chart img{
    width: 100%;
    max-width: 270px;
  }
  .fire_protection .graph.distance_chart img{
    width: 100%;
    max-width: 320px;
  }
  .fire_protection .graph p:not(.source){
    font-size: .9rem;
  }
  .fire_protection .graph .source{
    font-size: .8rem;
    margin-top:.5rem;
  }
}

/*04 太陽光発電システムと蓄電池
================================*/
@media (min-width: 768px){
  #spec04 .exp_frame .exp_fig{
    margin-top: -86px;
  }
}
@media (max-width: 767px){
  #spec04 .exp_frame .exp_fig{
    margin-top: 1.5rem;
    max-width: 360px;
  }
}

/*全負荷型と特定負荷型の違い*/
.storage_battery{
  text-align: center;
}
.storage_battery h4{
  color: #1e2f4f;
  font-weight: bold;
  background-color: #dbdcdc;
  padding: .5rem;
}
.storage_battery .image_fig{
  position: relative;
  padding: .5rem 0 0;
}
.storage_battery .image_fig p{
  position: absolute;
  bottom: .5rem;
  right: 1rem;
  text-align: right;
}
.storage_battery .favo .image_fig{
  background-color: #eeeeef;
}
.storage_battery .favo .image_fig::before{
  content: '';
  display: inline-block;
  position: absolute;
  background-image: url("../img/spec/favo.webp");
  background-size: contain;
  background-repeat: no-repeat;
  aspect-ratio: 250/54;
}
.storage_battery .image_fig .fig{
  margin-left: auto;
  margin-right: auto;
  position: relative;
  bottom: -3px;
}
.storage_battery .image_fig .fig img{
  object-fit: contain;
}
.storage_battery h5{
  font-size: 1.05rem;
  font-weight: bold;
}
.storage_battery .favo h5{
  color: #353557;
}
@media (min-width: 768px){
  .storage_battery h4{
    font-size: 1rem;
  }
  .storage_battery .image_fig{
    margin-bottom: 1.5rem;
  }
  .storage_battery .image_fig .fig img{
    aspect-ratio: 10/7;
  }
  .storage_battery .favo .image_fig::before{
    top: 1.25rem;
    left: 1.25rem;
    width: 28%;
    max-width: 125px;
  }
  .storage_battery .favo h5{
    font-size: 1.25rem;
  }
}
@media (max-width: 767px){
  .storage_battery h4{
    font-size: .95rem;
  }
  .storage_battery .image_fig{
    margin-bottom: 1rem;
  }
  .storage_battery .image_fig .fig{
    max-width: 360px;
  }
  .storage_battery .image_fig .fig img{
    aspect-ratio: 24/17;
  }
  .storage_battery .favo{
    margin-bottom: 1rem !important;
  }
  .storage_battery .favo .image_fig::before{
    top: 1rem;
    left: 1rem;
    width: 25%;
    max-width: 90px;
  }
  .storage_battery .favo h5{
    font-size: 1.1rem;
  }
}


/*05 消費電力と発電電力のイメージ
================================*/
#spec05 .exp_fig{
  margin: 0 auto;
  max-width: 980px;
}

/*06 高性能外壁
================================*/
/*紫外線トリプルガード*/
.uv_triple_guard .exp_fig{
  max-width: 754px;
  margin-left: auto;
  margin-right: auto;
}

/*汚れを分解・洗い流す*/
.maintenance_free .exp_fig{
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/*超耐久シーリング*/
.ceiling .exp_fig{
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 992px){
  .ceiling .exp_fig{
    width: 94%;
    max-width: 940px;
  }
}

/*07 高性能屋根
================================*/
#spec07 .exp_fig h5{
  font-weight: bold;
  margin-bottom: .75rem;
}
#spec07 .exp_fig h5 span{
  font-size: 85%;
  display: block;
  margin-top: .25rem;
}
@media (max-width: 991px){
  #spec07 .exp_fig img{
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}
@media (min-width: 768px){
  #spec07 .exp_fig h5{
    font-size: .95rem;
  }
  #spec07 .exp_fig:not(.fig03) h5{
    text-align: center;
  }
  #spec07 .exp_fig.fig01 img{
    width: 83%;
    max-width: 453px;
  }
  #spec07 .exp_fig.fig02 img{
    width: 72%;
    max-width: 376px;
  }
  #spec07 .exp_fig.fig03 img{
    width: 95%;
    max-width: 490px;
  }
}
@media (max-width: 767px){
  #spec07 .exp_fig h5{
    font-size: .85rem;
    text-align: center;
  }
  #spec07 .exp_fig.fig02 img{
    width: 80%;
  }
}


/*08 天然木突き板フローリング
================================*/
/*フローリング*/
.flooring{
  margin-top: 0 !important;
}
.flooring h4{
  font-size: 1rem;
  font-weight: bold;
  margin-top: 1rem;
}
.flooring .color p{
  margin-top: .5rem;
  text-align: center;
}
.flooring .exp_fig{
  position: relative;
}
.flooring .exp_fig p{
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  color: #fff;
}
.flooring .pecification{
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.flooring .pecification ul{
  padding-left: 0;
  list-style: none;
}
.flooring .pecification ul li span{
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  color: #fff;
  background-color: #808080;
  font-weight: bold;
  text-align: center;
}
@media (min-width: 992px){
  .flooring .color p{
    font-size: .8rem;
  }
}
@media (max-width: 991px){
  .flooring .exp_fig{
    margin-top: 0;
  }
  .flooring .color p{
    font-size: .6rem;
  }
}
@media (min-width: 768px) and (max-width: 991px){
  .flooring .pecification ul li span{
    font-size: .9rem;
  }
}
@media (min-width: 768px){
  .flooring .pecification ul li span{
    height: 38px;
  }
  .flooring .exp_fig p{
    font-size: .9rem;
  }
}
@media (max-width: 767px){
  .flooring .exp_fig{
    margin-bottom: 1rem !important;
  }
  .flooring .exp_fig img{
    aspect-ratio: 36/24;
    object-fit: cover;
    object-position: top -35px right 0;
  }
  .flooring .exp_fig p{
    font-size: .8rem;
  }
  .flooring .color{
    margin-bottom: 1rem !important;
  }
  .flooring .pecification ul li span{
    font-size: .8rem;
    height: 30px;
  }
}

/*フローリングの特長*/
.flooring_feat{
  counter-reset: flooring_num;
  margin-top: 2rem;
}
.flooring_feat .bgbox{
  display: flex;
  align-items: center;
}
.flooring_feat .bgbox h4{
  margin-top: 0;
}
.flooring_feat .bgbox h4::before{
  counter-increment:flooring_num;
	content: counter(flooring_num) ". ";
}
.flooring_feat .bgbox .hygiene{
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4px 0;
  height: 100%;
}
.flooring_feat .bgbox .hygiene li{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  width: 100%;
  line-height: 1.2;
  text-align: center;
  padding: .2rem;
}

@media (min-width: 992px){
  .flooring_feat .bgbox{
    padding: 2rem 2.5rem;
    min-height: 200px;
  }
  .flooring_feat .bgbox .hygiene{
    font-size: .8rem;
  }
}
@media (min-width: 768px) and (max-width: 991px){
  .flooring_feat .bgbox{
    padding: 1rem 1.5rem;
    min-height: 160px;
  }
  .flooring_feat .bgbox .hygiene{
    font-size: .7rem;
  }
}
@media (min-width: 768px){
  .flooring_feat .bgbox{
    margin-bottom: 1.5rem;
  }
  .flooring_feat .bgbox h4{
    font-size: 1.25rem;
  }
}
@media (max-width: 767px){
  .flooring_feat .bgbox{
    margin-bottom: 1rem;
    padding: 1.5rem 1rem;
  }
  .flooring_feat .bgbox h4{
    font-size: 1.1rem;
  }
  .flooring_feat .bgbox p{
    margin-bottom: 1rem !important;
  }
  .flooring_feat .bgbox .siaa{
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .flooring_feat .bgbox .hygiene{
    font-size: .6rem;
  }
}

/*09 室内壁［石膏ボード］
================================*/
.indoor_wall .exp_fig .annotation_txt{
  margin-top: 1rem;
}

@media (max-width: 991px){
  .indoor_wall .exp_fig{
    margin-top: 3rem;
  }
}
@media (max-width: 767px){
  .indoor_wall picture{
    width: 100%;
    max-width: 360px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .indoor_wall .exp_fig{
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}

/*10 スマートホーム
================================*/
.sh_function h4{
  color: #353557;
  font-weight: bold;
}
@media (min-width: 768px){
  .sh_function img{
    margin-bottom: 1rem;
  }
  .sh_function h4{
    font-size: 1.05rem;
  }
  .sh_function p{
    font-size: .9rem;
  }
}
@media (max-width: 767px){
  .sh_function{
    margin-bottom: 1rem !important;
  }
  .sh_function img{
    margin-bottom: .5rem;
  }
  .sh_function h4{
    font-size: .9rem;
    margin-bottom: .25rem;
  }
  .sh_function p{
    font-size: .85rem;
  }
}


/*11 システムキッチン〈リシェル〉
================================*/
.kitchen h5{
  font-weight: bold;
}
.patto_fig{
  max-width: 400px;
}
@media (min-width: 992px){
  .system_kitchen .exp_fig{
    margin-top: -85px;
  }
}
@media (min-width: 768px){
  .kitchen{
    margin-top: 1rem;
  }
  .kitchen img{
    margin-bottom: 1rem;
  }
  .kitchen h5{
    font-size: 1rem;
  }
  .kitchen p{
    font-size: .9rem;
  }
  .touchless .annotation_txt{
    margin-top: 1rem;
  }
}
@media (max-width: 767px){
  .kitchen img{
    margin-bottom: .5rem;
  }
  .kitchen h5{
    font-size: .9rem;
    margin-bottom: .25rem;
  }
  .kitchen p{
    font-size: .85rem;
  }
  .touchless .annotation_txt{
    margin-top: 2rem;
  }
}

/*食器洗い乾燥機*/
.storage .exp_fig .annotation_txt{
  margin-top: 1.5rem;
}
@media (max-width: 767px){
  .storage .exp_fig{
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .storage .exp_fig img{
    margin-bottom: 1rem !important;
  }

}



/*軒天・破風
================================*/
/*@media (min-width: 992px){
  #spec04 .exp_fig{
    margin-top: -85px;
  }
}*/


/*バスルーム〈リデア〉
================================*/
/*@media (min-width: 992px){
  #spec09 .bathroom .exp_fig{
    margin-top: -85px;
  }
}
/*サーモバスS
@media (max-width: 767px){
  .exp_frame.thermobath .exp_fig{
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}*/

/*洗面化粧台〈EV〉
================================*/
/*#spec10 h4{
  font-weight: bold;
}
.ws_counter img,
.ws_cabinet img{
  margin-bottom: .5rem;
}
.ws_spout img{
  margin-bottom: .5rem;
}

@media (min-width: 992px){
  .ws_counter p,
  .ws_cabinet p{
    font-size: .8rem;
  }
  .ws_counter h4{
    font-size: 1.1rem;
  }
  .ws_spout h4{
    font-size: 1rem;
    margin-bottom: 1rem;
  }
}
@media (min-width: 768px){
  .ws_cabinet img{
    max-width: 85%;
  }
  .ws_counter{
    margin-bottom: 2rem;
  }
}
@media (max-width: 991px){
  .ws_counter,
  .ws_cabinet,
  .ws_spout{
    margin-top: 2rem;
  }
  .ws_counter p,
  .ws_cabinet p{
    font-size: .75rem;
  }
  .ws_counter h4{
    font-size: 1rem;
  }
  .ws_spout h4{
    font-size: .9rem;
    margin-bottom: 1rem;
  }
}
@media (max-width: 767px){
  .ws_counter,
  .ws_cabinet{
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
  }
  .ws_spout{
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}*/

/*エコキュート
================================*/
/*#spec12 .annotation_txt{
  margin-top: 1rem;
}
@media (min-width: 992px){
  #spec12 .exp_frame .exp_fig{
    margin-top: -85px;
  }
}*/

/*================================
生涯コストを削減
================================*/
/*生涯コスト*/
.lifetime_cost_txt p:last-child{
  margin-bottom: 0;
}

/*お得な理由*/
.reason{
  display: flex;
  align-items: center;
}
.reason img{
    height: auto;
}
.reason_txt{
  flex: 1;
}
.reason_txt h4{
  font-weight: bold;
}
@media (min-width: 768px){
  .reason{
    margin-top: 2rem;
    gap: 0 2rem;
  }
  .reason img{
    width: 102px;
  }
  .reason_txt h4{
    font-size: 1.1rem;
  }
}
@media (max-width: 767px){
  .reason{
    margin-top: 1rem;
    gap: 0 1rem;
  }
  .reason img{
    width: 60px;
  }
  .reason_txt h4{
    font-size: 1rem;
  }
}

/*生涯コスト比較（30年）*/
.cost_comparison{
  display: flex;
  flex-wrap: wrap;
  margin-right: -1rem;
  margin-left: -1rem;
}
.cost_comparison > * {
  padding-right: 1rem;
  padding-left: 1rem;
}
.cost_comparison .total,
.cost_comparison .difference{
  flex: 0 0 auto;
}
.cost_comparison .total .annotation_txt{
  margin-top: 1rem;
}
@media (min-width: 768px){
  .cost_comparison{
    margin-top: 2rem;
  }
  .cost_comparison .total{
    width: 38%;
  }
  .cost_comparison .difference{
    width: 62%;
  }
}
@media (max-width: 767px){
  .cost_comparison > * {
    width: 100%;
  }
  .cost_comparison .total img{
    width: 100%;
    max-width: 310px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .cost_comparison .difference img{
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    display: block;
  }
}

/*住んでからかかる維持管理費*/
.maintenance_cost h4{
  color: #231815;
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 2rem;
}
.maintenance_cost .annotation_list{
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .maintenance_cost .scroll{
    position: inherit !important;
  }
  .maintenance_cost img {
    max-width: 100%;
    height: auto;
  }
}
@media (max-width: 767px) {
  .maintenance_cost img {
    width: 830px;
  }
}

/*=============================== =
「建物長期保証」で未来まで続く安心を
================================*/
/*定期点検〈長期継続点検〉*/
.inspection{
  margin-top: 30px;
}
.inspection dt{
  font-weight: normal;
}
@media (min-width: 768px){
  .regular_inspection_fig img{
    max-width: 100%;
    height: auto;
  }
  .inspection{
    font-size: .9rem;
  }
}
@media (max-width: 767px){
  .regular_inspection_fig img{
    max-height: 500px;
    width: auto;
  }
  .inspection{
    font-size: .8rem;
  }
}

/*保証内容*/
.guarantee .icon_ttl{
  display: flex;
  align-items: center;
  column-gap: 10px;
}
.guarantee .icon_ttl span{
  display: block;
  background-size: contain;
}
.guarantee .icon_ttl span.icon01{
  background-image: url("../img/guarantee/guarantee01.webp");
}
.guarantee .icon_ttl span.icon02{
  background-image: url("../img/guarantee/guarantee02.webp");
}
.guarantee .icon_ttl span.icon03{
  background-image: url("../img/guarantee/guarantee03.webp");
}
.guarantee .icon_ttl span.icon04{
  background-image: url("../img/guarantee/guarantee04.webp");
}
.guarantee .icon_ttl span.icon05{
  background-image: url("../img/guarantee/guarantee05.webp");
}
.guarantee .icon_ttl span.icon06{
  background-image: url("../img/guarantee/guarantee06.webp");
}
.guarantee .icon_ttl span.icon07{
  background-image: url("../img/guarantee/guarantee07.webp");
}
.guarantee .icon_ttl h4{
  font-weight: bold;
}
.guarantee h5{
  color: #353557;
  font-weight: bold;
  margin-bottom: 1rem;
}
@media (min-width: 992px){
  .guarantee h5{
    font-size: 1.1rem;
  }
}
@media (min-width: 768px){
  .guarantee .icon_ttl{
    margin-bottom: 1.25rem;
  }
  .guarantee .icon_ttl span{
    width: 90px;
    height: 90px;
  }
}
@media (max-width: 991px){
  .guarantee h5{
    font-size: 1rem;
  }
}
@media (max-width: 767px){
  .guarantee{
    margin-top: 1rem;
  }
  .guarantee .icon_ttl{
    margin-bottom: 1rem;
  }
  .guarantee .icon_ttl span{
    width: 60px;
    height: 60px;
  }
  .guarantee .icon_ttl h4{
    font-size: 1.1rem;
  }
  .guarantee h5{
    font-size: 1rem;
  }
}