@charset "utf-8";

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ● こだわりと品質 専用CSS                               */
/*    ・ページ固有の処理を記述                             */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
body#quality{}



/* Block */
#ContentsDivision .MainContentsArea div[class*="Block"]{
  padding: 80px 0;
  background: #ffffff;
  background: -moz-linear-gradient(top,  #ffffff 60%, #e6f4dc 100%);
  background: -webkit-linear-gradient(top,  #ffffff 60%,#e6f4dc 100%);
  background: linear-gradient(to bottom,  #ffffff 60%,#e6f4dc 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6f4dc',GradientType=0 );
}
/* bp2より狭いとき */
body.rsbp-under-bp2 #ContentsDivision .MainContentsArea div[class*="Block"]{
  padding: 40px 0;
}
/*body.page-id-317 #ContentsDivision .MainContentsArea .Block:nth-child(2n){
  background: #EEF7E6;
}*/



/* PageTitleArea
--------------------------------------------------- */
.PageTitleArea{}
    #ContentsDivision .PageTitleArea .PageTitle .Text:before{
      content: url(../img/quality/text/title-en.png);
    }



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    　安心・快適のワケ　page-id-317　                    */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
body.page-id-317{}
/* bp2より狭いとき */
body.rsbp-under-bp2.page-id-317 #ContentsDivision .MainContentsArea{
  padding: 0;
}
    body.page-id-317 #ContentsDivision .MainContentsArea > div[class*="post"]{
      max-width: 100%;
    }
    /* bp2より狭いとき */
    body.rsbp-under-bp2.page-id-317 #ContentsDivision .MainContentsArea > div[class*="post"] .PageWidthSetter{
      padding: 0 15px;
    }

    body.page-id-317 #ContentsDivision .MainContentsArea .FeatureList{
      list-style: none;
      counter-reset: li;
    }
        body.page-id-317 #ContentsDivision .MainContentsArea .FeatureList li{
          padding: 2vw 4.5vw;
          border: 12px solid #CDE8B3;
          border-radius: 50px;
          position: relative;
          margin-bottom: 3em;
          position: relative;
          background: #fff;
        }
        body.page-id-317 #ContentsDivision .MainContentsArea .FeatureList li:before{
          content: counter(li);
          counter-increment: li;
          font-family: "Arial";
          position: absolute;
          left: -1em;
          top : -1em;
          z-index: 1;
          color: #fff;
          background: #6DAD30;
          border-radius: 100%;
          width : 3.5em;
          height: 3.5em;
          font-weight: bold;
          text-align: center;
          line-height: 3.5;
          font-size: 150%;
        }
        /* bp2より狭いとき */
        body.rsbp-under-bp2.page-id-317 #ContentsDivision .MainContentsArea .FeatureList li{
          border-radius: 30px;
          padding: 7vw;
          border-width: 4px;
        }
        body.rsbp-under-bp2.page-id-317 #ContentsDivision .MainContentsArea .FeatureList li:before{
          font-size: 110%;
          left: -0.75em;
          top : -0.75em;
          width : 2.5em;
          height: 2.5em;
          line-height: 2.5;
        }
    body.page-id-317 #ContentsDivision .MainContentsArea .SknTplImageParagraph{}
    /* bp2より狭いとき */
    body.rsbp-under-bp2.page-id-317 #ContentsDivision .MainContentsArea .SknTplImageParagraph{
      margin: 0;
    }
    body.page-id-317 #ContentsDivision .MainContentsArea .FlexList{
      margin: 0 -25px;
      justify-content: left;
    }
    /* bp2より狭いとき */
    body.rsbp-under-bp2.page-id-317 #ContentsDivision .MainContentsArea .FlexList{
      display: block;
      margin: 0;
    }
        body.page-id-317 #ContentsDivision .MainContentsArea .FlexList li{
          padding: 0 25px;
        }
        /* bp2より広いとき */
        body.rsbp-over-bp2.page-id-317 #ContentsDivision .MainContentsArea #Comfort .FlexList li:nth-child(1){
          width: 35%;
        }
            body.rsbp-over-bp2.page-id-317 #ContentsDivision .MainContentsArea #Comfort .FlexList li:nth-child(1) img{
              width: auto;
            }
        body.rsbp-over-bp2.page-id-317 #ContentsDivision .MainContentsArea #Comfort .FlexList li:nth-child(2){
          width: 65%;
        }
        /* bp2より狭いとき */
        body.rsbp-under-bp2.page-id-317 #ContentsDivision .MainContentsArea .Flex2List li{
          width: 100%;
          padding: 0 0 40px;
        }
        body.rsbp-under-bp2.page-id-317 #ContentsDivision .MainContentsArea .Flex3List li{
          padding: 0 10px 15px;
          width: 100%;
        }
            body.page-id-317 #ContentsDivision .MainContentsArea .FlexList .SknTplImageParagraph{}
            /* bp2より広いとき */
            body.rsbp-over-bp2.page-id-317 #ContentsDivision .MainContentsArea .FlexList .SknTplImageParagraph .ImageItem{
              width: 50%;
            }
            body.rsbp-over-bp2.page-id-317 #ContentsDivision .MainContentsArea .FlexList .SknTplImageParagraph .TextItem{
              width: 50%;
            }
                /* bp2より狭いとき */
                body.rsbp-under-bp2.page-id-317 #ContentsDivision .MainContentsArea #EarthquakeProof .FlexList .SknTplImageParagraph            .ImageItem .Image,
                body.rsbp-under-bp2.page-id-317 #ContentsDivision .MainContentsArea #Ease                      .SknTplImageParagraph.ImageSmall .ImageItem .Image{
                  width: 70%;
                  margin: 0 auto;
                }






/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    　家づくりの流れ　page-id-7　                        */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
body.page-id-7{}
    body.page-id-7 #ContentsDivision .MainContentsArea .SknTplImageParagraph{
      padding: 4.5vw;
      border: 12px solid #CDE8B3;
      border-radius: 50px;
      position: relative;
      margin-bottom: 5em;
      position: relative;
    }
    /* bp2より狭いとき */
    body.rsbp-under-bp2.page-id-7 #ContentsDivision .MainContentsArea .SknTplImageParagraph{
      border-radius: 30px;
      padding: 7vw;
      border-width: 4px;
    }

    body.page-id-7 #ContentsDivision .MainContentsArea .SknTplImageParagraph:after{
      content: "\e803";
      font-family: "fontello";
      color: #6DAD30;
      font-size: 600%;
      display: block;
      text-align: center;
      line-height: 1;
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
    }
        body.page-id-7 #ContentsDivision .MainContentsArea .SknTplImageParagraph .Feature{
          position: absolute;
          left: -2em;
          top: -2em;
          z-index: 1;
          color: #fff;
          background: #6DAD30;
          border-radius: 100%;
          width: 8em;
          height: 8em;
          font-weight: bold;
          text-align: center;
          line-height: 1.25;
          font-size: 90%;
          padding-top: 2.5em;
        }
        /* bp2より狭いとき */
        body.rsbp-under-bp2.page-id-7 #ContentsDivision .MainContentsArea .SknTplImageParagraph .Feature{
          position: static;
          margin: -10px auto 10px;
        }

        /* bp2より広いとき */
        body.rsbp-over-bp2.page-id-7 #ContentsDivision .MainContentsArea .SknTplImageParagraph .ImageItem{
          width: 35%;
        }
        body.page-id-7 #ContentsDivision .MainContentsArea .SknTplImageParagraph .TextItem{
          font-family: 'M PLUS Rounded 1c', sans-serif;
          font-weight: 400;
          font-size: 135%;
        }
        /* bp2より広いとき */
        body.rsbp-over-bp2.page-id-7 #ContentsDivision .MainContentsArea .SknTplImageParagraph .TextItem{
          width: 65%;
        }
        /* bp2より狭いとき */
        body.rsbp-under-bp2.page-id-7 #ContentsDivision .MainContentsArea .SknTplImageParagraph .TextItem{
          font-size: 110%;
        }
            body.page-id-7 #ContentsDivision .MainContentsArea .SknTplImageParagraph .TextItem .Heading{
              font-family: inherit;
            }
            /* bp2より 狭い とき */
            body.rsbp-under-bp2.page-id-7 #ContentsDivision .MainContentsArea .SknTplImageParagraph .TextItem h4 br{
              display: none;
            }
    body.page-id-7 #ContentsDivision .MainContentsArea .FlowLast{
      color: #6DAD30;
      border: 6px solid #6DAD30;
      border-radius: 100%;
      width : 5em;
      height: 5em;
      font-size: 250%;
      font-weight: bold;
      line-height: 4.75;
      text-align: center;
      margin: 0 auto;
    }
    /* bp2より狭いとき */
    body.rsbp-under-bp2.page-id-7 #ContentsDivision .MainContentsArea .FlowLast{
      font-size: 200%;
      margin: 0 auto;
    }

    body.page-id-7 #ContentsDivision .MainContentsArea > .page > h3{
      font-size: 150%;
    }




/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    　アフターメンテナンス　page-id-321　                */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
body.page-id-321{}
body.page-id-321 #ContentsDivision .MainContentsArea{}
/* bp2より広いとき */
body.rsbp-over-bp2.page-id-321 #ContentsDivision .ScollImageArea + .MainContentsArea{
  margin-top: -100px;
}
/* bp2より狭いとき */
body.rsbp-under-bp2.page-id-321 #ContentsDivision .MainContentsArea{
  padding: 0;
}
/* bp2より狭いとき */
body.rsbp-under-bp2.page-id-321 #ContentsDivision .ScollImageArea + .MainContentsArea{
  margin-top: -50px;
}
    body.page-id-321                #ContentsDivision .MainContentsArea > div[class*="post"]{
      max-width: 100%;
    }
    /* bp2より狭いとき */
    body.rsbp-under-bp2.page-id-321 #ContentsDivision .MainContentsArea > div[class*="post"] .PageWidthSetter{
      padding: 0 15px;
    }
    /* bp2より狭いとき */
    body.rsbp-under-bp2.page-id-321 #ContentsDivision .MainContentsArea > div[class*="post"] > .Block:first-child p{
      text-align: center!important;
    }
        body.page-id-321 #ContentsDivision .MainContentsArea ul.GoodHousing{
          margin: 15px 0 30px;
        }
            body.page-id-321 #ContentsDivision .MainContentsArea ul.GoodHousing li{
              margin: 0 15px;
              color: #fff;
              background: #6DAD30;
              border-radius: 100%;
              width : 13em;
              height: 13em;
              font-weight: bold;
              text-align: center;
              line-height: 1.25;
              padding: 5em 0 0;
            }
            /* bp2より狭いとき */
            body.rsbp-under-bp2.page-id-321 #ContentsDivision .MainContentsArea ul.GoodHousing li{
              font-size: 80%;
              margin: 0 auto 10px;
              width : 10em;
              height: 10em;
              padding: 3.5em 0 0;
            }

        body.page-id-321 #ContentsDivision .MainContentsArea .AftermaintenanceBlock .FlexList{
          margin: 0 -20px;
        }
        /* bp2より狭いとき */
        body.rsbp-under-bp2.page-id-321 #ContentsDivision .MainContentsArea .AftermaintenanceBlock .FlexList{
          display: block;
          margin: 0;
        }
            body.page-id-321 #ContentsDivision .MainContentsArea .AftermaintenanceBlock .FlexList li{
              padding: 20px;
            }
            body.page-id-321 #ContentsDivision .MainContentsArea .AftermaintenanceBlock ul[data-label="主な保証対象"] li{
              padding: 0px 5px;
            }
                body.page-id-321 #ContentsDivision .MainContentsArea .AftermaintenanceBlock ul[data-label="主な保証対象"] li p.Image + p{
                  line-height: 1.2;
                  margin-top: 0.5em;
                }
            body.page-id-321 #ContentsDivision .MainContentsArea .AftermaintenanceBlock .FlexList.Flex2List > li{
              display: flex;
              align-items: stretch;
            }
            /* bp2より狭いとき */
            body.rsbp-under-bp2.page-id-321 #ContentsDivision .MainContentsArea .AftermaintenanceBlock .FlexList li{
              width: 100%;
              padding: 5px 0;
            }
        body.page-id-321 #ContentsDivision .MainContentsArea .AftermaintenanceBlock .FlexList .SknTplImageParagraph{
          margin-bottom: 0;
        }
        /* bp2より狭いとき */
        body.rsbp-under-bp2.page-id-321 #ContentsDivision .MainContentsArea .AftermaintenanceBlock .FlexList .SknTplImageParagraph{
          margin: 0;
        }height: 100%;
            /* bp2より広いとき */
            body.rsbp-over-bp2.page-id-321 #ContentsDivision .MainContentsArea .AftermaintenanceBlock .FlexList .SknTplImageParagraph .ImageItem{
              width: 50%;
            }
            body.rsbp-over-bp2.page-id-321 #ContentsDivision .MainContentsArea .AftermaintenanceBlock .FlexList .SknTplImageParagraph .TextItem{
              width: 50%;
            }
                body.page-id-321 #ContentsDivision .MainContentsArea .AftermaintenanceBlock .FlexList .FlexList li{
                  padding: 5px 5px 0;
                }
                /* bp2より狭いとき */
                body.rsbp-under-bp2.page-id-321 #ContentsDivision .MainContentsArea .AftermaintenanceBlock .FlexList .FlexList li{
                  padding: 0 0 15px;
                }
                    body.page-id-321 #ContentsDivision .MainContentsArea .AftermaintenanceBlock .FlexList .FlexList li p.Image{
                      height: 110px;
                      text-align: center;
                    }
                        body.page-id-321 #ContentsDivision .MainContentsArea .AftermaintenanceBlock .FlexList .FlexList li p.Image img{
                          width: auto;
/*                          height: 100%;*/
                        }
                    body.page-id-321 #ContentsDivision .MainContentsArea .AftermaintenanceBlock .FlexList .FlexList li p{
                      margin-bottom: 0;
                      line-height: 1.25rem;
                    }
                    /* bp2より狭いとき */
                    body.rsbp-under-bp2.page-id-321 #ContentsDivision .MainContentsArea .AftermaintenanceBlock .FlexList .FlexList li p{
                      text-align: center!important;
                    }
        body.page-id-321 #ContentsDivision .MainContentsArea .PointBox{
          padding: 40px;
          border: 12px solid #CDE8B3;
          border-radius: 50px;
          position: relative;
          margin-bottom: 1em;
          position: relative;
          background: #fff;
        }
        .ChronologyImg img{
          width: 1000px;
        }

        .ScrollSaption{
          display: none;
        }
        @media only screen and (max-width: 500px) {
          .ChronologyImg{
            width: 100%;
            margin-bottom: 0 !important;
            max-width: 700px;
          }

          .Scrollbar{
            overflow-x: scroll;
          }

          /* スクロールバーの幅と高さを設定する */
          .Scrollbar::-webkit-scrollbar { 
            width: 10px;
            height: 10px;
          } 

          /* スクロールバーの幅と高さを設定する */
          .Scrollbar::-webkit-scrollbar-thumb { 
            margin: 0 2px; 
            background: #ccc; 
          }

          .ChronologyImg img{
            max-width: 1500px;
            width: 600px;
            height: auto;
          }
          .ScrollSaption{
            display: block;
            text-align: center;
            margin: 20px auto 20px;
            padding: 0.15em;
            border-radius: 2em;
            background-color: #f5f5f5;
            max-width: 15em;
            font-size: 80%;
        }
        .GoodHousing-Img4{
          padding: 1.5em 0 0!important;
        }
      }
        @media only screen and (max-width: 768px) {
          .ScrollSaption{
          }
        }

        /* bp2より狭いとき */
        body.rsbp-under-bp2.page-id-321 #ContentsDivision .MainContentsArea .PointBox{
          border-radius: 30px;
          padding: 15px;
          border-width: 4px;
        }

GoodHousing-Img4



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    　Qualitz　page-id-1447　                             */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
body.page-id-1447{}
    body.page-id-1447 .MainContentsArea .FlowList li{
      padding: 0 3% 1% 0;
    }
        body.page-id-1447 .MainContentsArea .FlowList li .No{
          font-family: "Arial";
          position: relative;
          left: -0.5em;
          bottom: -0.25em;
          z-index: 1;
          color: #fff;
          background: #6DAD30;
          border-radius: 100%;
          width : 2.5em;
          height: 2.5em;
          font-weight: bold;
          text-align: center;
          line-height: 2.5;
          font-size: 120%;
          margin-bottom: 0;
        }
        body.page-id-1447 .MainContentsArea .FlowList li .Image{
          position: relative;
        }
        body.page-id-1447 .MainContentsArea .FlowList li:not(:last-child) .Image:after{
          content: "\e806";
          font-family: "fontello";
          color: #6dad30;
          position: absolute;
          top : calc( 50% - 0.5em);
          left: calc(100% + 0.3em);
          font-size: 2em;
          line-height: 1;
        }