@charset "UTF-8";
@media print, screen and (min-width: 701px) {
  .mainContent {
    padding-bottom: 0 !important; }

  h1 {
    background-image: url(../renovation/img/bg_mv.jpg); }

  /* leader
  --------------------------------------------------------- */
  .leader {
    padding-top: 15px !important; }
    .leader dt {
      font-weight: bold;
      font-size: 20px;
      margin-bottom: 30px; }

  /* 新築そっくりさんが選ばれる理由
  ------------------------------------------- */
  .sub .list {
    background: #f9f8f3;
    padding: 60px 0 45px; }
    .sub .list ul {
      text-align: center;
      margin: 0 -7px; }
      .sub .list ul li {
        display: inline-block;
        margin: 0 7px 28px; }
        .sub .list ul li a {
          display: block; }
          .sub .list ul li a:hover {
            opacity: .7; }
    .sub .list dl {
      background: #fff;
      position: relative;
      font-weight: bold; }
      .sub .list dl dt {
        background: #ffe100;
        font-size: 18px;
        width: 132px;
        height: 28px;
        border-radius: 100px;
        position: absolute;
        left: 50%;
        margin-left: -66px;
        top: -14px;
        line-height: 1;
        padding: 6px 0; }
      .sub .list dl dd {
        font-size: 20px;
        padding: 15px 0; }

  /* リノベーション・リフォームの流れ
  ------------------------------------------- */
  #flow {
    padding: 65px 0 0; }
    #flow .stepListTxt {
      margin-top: 56px;
      color: #ef4a81;
      text-align: center;
      font-weight: bold;
      font-size: 22px;
      letter-spacing: 1.3px;
      position: relative; }
      #flow .stepListTxt:before {
        content: "";
        display: block;
        width: 670px;
        height: 20px;
        border: 2px solid #a3a3a3;
        border-bottom: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 20px;
        margin: auto;
        z-index: 2; }
      #flow .stepListTxt span {
        position: relative;
        z-index: 3;
        display: inline-block;
        padding: 0 10px;
        background-color: #fff; }
    #flow ol {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      padding-top: 34px;
      text-align: center; }
      #flow ol li {
        width: 295px;
        position: relative;
        margin-bottom: 85px;
        transition: opacity .3s; }
        #flow ol li a {
          display: block; }
          #flow ol li a p {
            width: 100%;
            margin-top: 10px;
            padding: 10px;
            font-size: 16px; }
            #flow ol li a p:hover {
              color: #fff !important;
              background-color: #333; }
              #flow ol li a p:hover:after {
                border-color: #fff; }
          #flow ol li a:hover {
            opacity: .7; }
        #flow ol li:before {
          content: '';
          display: block;
          width: 58px;
          height: 80px;
          background-size: contain;
          background-repeat: no-repeat;
          position: absolute;
          z-index: 6;
          top: -10px;
          left: 11px; }
        #flow ol li:after {
          content: "";
          display: block;
          border: 11px solid transparent;
          border-left: 10px solid #777;
          position: absolute;
          top: 80px;
          right: -32px; }
        #flow ol li:nth-child(3n):after {
          border: none; }
        #flow ol li:nth-child(3):after, #flow ol li:nth-child(6):after {
          width: 648px;
          height: 94px;
          background: url(../renovation/img/img_arw_flow.png) no-repeat;
          bottom: -111px;
          right: 145px;
          top: inherit; }
        #flow ol li:nth-child(1):before {
          background-image: url(../common_re/img/icon/icon_step1.png); }
        #flow ol li:nth-child(2):before {
          background-image: url(../common_re/img/icon/icon_step2.png); }
        #flow ol li:nth-child(3):before {
          background-image: url(../common_re/img/icon/icon_step3.png); }
        #flow ol li:nth-child(4):before {
          background-image: url(../common_re/img/icon/icon_step4.png); }
        #flow ol li:nth-child(5):before {
          background-image: url(../common_re/img/icon/icon_step5.png); }
        #flow ol li:nth-child(6):before {
          background-image: url(../common_re/img/icon/icon_step6.png); }
        #flow ol li:nth-child(7):before {
          background-image: url(../common_re/img/icon/icon_step7.png); }
        #flow ol li:nth-child(8):before {
          background-image: url(../common_re/img/icon/icon_step8.png); }
        #flow ol li:nth-child(9):before {
          background-image: url(../common_re/img/icon/icon_step9.png); }
        #flow ol li.free .img {
          position: relative;
          overflow: hidden;
          z-index: 3; }
          #flow ol li.free .img:before {
            content: "";
            display: block;
            width: 114px;
            height: 114px;
            border-radius: 50%;
            background-color: #ef4a81;
            position: absolute;
            top: -58px;
            right: -58px;
            z-index: 4; }
          #flow ol li.free .img:after {
            content: "\00A5 0";
            letter-spacing: 0;
            position: absolute;
            top: 2px;
            right: 8px;
            color: #fff;
            z-index: 5;
            font-size: 24px;
            font-weight: bold; }

  /* categorylist
  ------------------------------------------- */
  .categorylist {
    background: #f9f8f3;
    padding: 15px 0 45px; }
    .categorylist li a {
      display: block;
      position: relative; }
      .categorylist li a:after {
        content: "";
        width: 84px;
        height: 84px;
        position: absolute;
        top: 40px;
        left: 50%;
        margin-left: -42px; }
    .categorylist li:nth-child(1) a:after {
      background: url(../common_re/img/icon/icon_pen.png); }
    .categorylist li:nth-child(2) a:after {
      background: url(../common_re/img/icon/icon_money.png); }
    .categorylist li:nth-child(3) a:after {
      background: url(../common_re/img/icon/icon_book.png); } }