/* CSS Document */
/*---------------
	RENOVATION
---------------*/
#renovation {
  background: #ddf3fc; }
  @media only screen and (max-width: 1199px) {
    #renovation {
      overflow: hidden; } }
  #renovation .lower-main {
    width: 100%;
    background: url("../../img/renovation/main.png") no-repeat center center/cover;
    padding: 170px 0;
    margin-bottom: 100px; }
    @media only screen and (max-width: 1199px) {
      #renovation .lower-main {
        width: 95%;
        padding: 60px 0 60px 5%;
        margin-bottom: 60px; } }
    #renovation .lower-main p {
      width: 1200px;
      color: #fff;
      font-size: 3em;
      margin: 0 auto 30px; }
      @media only screen and (max-width: 1199px) {
        #renovation .lower-main p {
          width: auto;
          font-size: 2em; } }
    #renovation .lower-main h2 {
      width: 1200px;
      color: #fff;
      font-size: 7em;
      margin: 0 auto; }
      @media only screen and (max-width: 1199px) {
        #renovation .lower-main h2 {
          width: auto;
          font-size: 2.5em; } }
  @media only screen and (max-width: 1199px) {
    #renovation .contents-area #cont01 {
      padding: 0 5%; } }
  #renovation .contents-area #cont01 h3 {
    text-align: center;
    color: var(--text-color);
    font-size: 4em;
    line-height: 1.5;
    letter-spacing: .1em; }
    @media only screen and (max-width: 1199px) {
      #renovation .contents-area #cont01 h3 {
        font-size: 2em; } }
    #renovation .contents-area #cont01 h3 span {
      color: #6185bc;
      font-size: 1.8em; }
      @media only screen and (max-width: 1199px) {
        #renovation .contents-area #cont01 h3 span {
          font-size: 1.5em; } }
  #renovation .contents-area #cont01 .concern {
    width: 100%;
    max-width: 900px;
    margin: 50px auto 0; }
    @media only screen and (max-width: 1199px) {
      #renovation .contents-area #cont01 .concern {
        max-width: 600px; } }
  #renovation .contents-area #cont01 .arrow {
    width: 50px;
    margin: 60px auto; }
    @media only screen and (max-width: 1199px) {
      #renovation .contents-area #cont01 .arrow {
        width: 30px;
        margin: 30px auto; } }
  #renovation .contents-area #cont01 h4 {
    text-align: center;
    color: var(--text-color);
    font-size: 4em;
    line-height: 1.5;
    letter-spacing: .1em; }
    @media only screen and (max-width: 1199px) {
      #renovation .contents-area #cont01 h4 {
        font-size: 2em; } }
    #renovation .contents-area #cont01 h4 span {
      color: #6185bc;
      font-size: 1.5em; }
      @media only screen and (max-width: 1199px) {
        #renovation .contents-area #cont01 h4 span {
          font-size: 1.4em; } }
  #renovation .contents-area #cont01 p {
    text-align: center;
    font-size: 2.5em;
    line-height: 2;
    letter-spacing: .1em;
    margin-top: 50px; }
    @media only screen and (max-width: 1199px) {
      #renovation .contents-area #cont01 p {
        font-size: 1.6em;
        margin-top: 30px; } }
    #renovation .contents-area #cont01 p span {
      position: relative; }
      #renovation .contents-area #cont01 p span:after {
        content: '';
        display: block;
        width: 20em;
        height: 2px;
        background: #6185bc;
        position: absolute;
        bottom: 0;
        left: 0; }
  #renovation .contents-area #cont01 .frame {
    width: 800px;
    border: 2px solid #6185bc;
    border-radius: 10px;
    margin: 150px auto 120px; }
    @media only screen and (max-width: 1199px) {
      #renovation .contents-area #cont01 .frame {
        width: 80%;
        max-width: 600px;
        padding: 0 2%;
        margin: 90px auto 60px; } }
    @media only screen and (max-width: 699px) {
      #renovation .contents-area #cont01 .frame {
        width: auto; } }
    #renovation .contents-area #cont01 .frame h5 {
      width: 500px;
      background: #ddf3fc;
      text-align: center;
      color: var(--text-color);
      font-size: 3.5em;
      letter-spacing: .1em;
      margin: -25px auto 50px; }
      @media only screen and (max-width: 1199px) {
        #renovation .contents-area #cont01 .frame h5 {
          width: 400px;
          font-size: 2.5em; } }
      @media only screen and (max-width: 699px) {
        #renovation .contents-area #cont01 .frame h5 {
          width: 300px;
          font-size: 2em;
          margin: -15px auto 30px; } }
      #renovation .contents-area #cont01 .frame h5 span {
        vertical-align: sub;
        color: #6185bc;
        font-size: 1.5em;
        font-weight: 500; }
    #renovation .contents-area #cont01 .frame ul {
      width: 600px;
      margin: 0 auto 60px; }
      @media only screen and (max-width: 1199px) {
        #renovation .contents-area #cont01 .frame ul {
          width: auto;
          max-width: 430px;
          margin: 0 auto 30px; } }
      @media only screen and (max-width: 699px) {
        #renovation .contents-area #cont01 .frame ul {
          max-width: 330px; } }
      #renovation .contents-area #cont01 .frame ul li {
        display: flex;
        color: var(--text-color);
        font-size: 3.5em;
        margin-bottom: 40px; }
        @media only screen and (max-width: 1199px) {
          #renovation .contents-area #cont01 .frame ul li {
            font-size: 2.5em;
            margin: 30px 0 0 0; } }
        @media only screen and (max-width: 699px) {
          #renovation .contents-area #cont01 .frame ul li {
            font-size: 1.8em;
            margin: 30px 0 0 0; } }
        #renovation .contents-area #cont01 .frame ul li span {
          color: #6185bc; }
        #renovation .contents-area #cont01 .frame ul li img {
          width: 50px;
          margin: -10px .5em 0 0; }
          @media only screen and (max-width: 1199px) {
            #renovation .contents-area #cont01 .frame ul li img {
              width: 45px; } }
          @media only screen and (max-width: 699px) {
            #renovation .contents-area #cont01 .frame ul li img {
              width: 40px; } }
  #renovation .contents-area #cont02 {
    background: #a0b6d7;
    padding: 100px 0 140px; }
    @media only screen and (max-width: 1199px) {
      #renovation .contents-area #cont02 {
        padding: 60px 5%; } }
    #renovation .contents-area #cont02 h3 {
      text-align: center;
      color: #fff;
      font-size: 3em;
      line-height: 1.5;
      letter-spacing: .1em;
      margin-bottom: 40px; }
      @media only screen and (max-width: 1199px) {
        #renovation .contents-area #cont02 h3 {
          font-size: 2em; } }
      #renovation .contents-area #cont02 h3 span {
        font-size: 1.5em;
        font-weight: bold; }
    #renovation .contents-area #cont02 p {
      text-align: center;
      color: #fff;
      font-size: 2em;
      line-height: 2; }
      @media only screen and (max-width: 1199px) {
        #renovation .contents-area #cont02 p {
          font-size: 1.6em; } }
    #renovation .contents-area #cont02 .cont__box {
      width: 1200px;
      background: #fff;
      padding: 70px 0;
      margin: 80px auto 0; }
      @media only screen and (max-width: 1199px) {
        #renovation .contents-area #cont02 .cont__box {
          width: auto;
          max-width: 600px;
          padding: 0;
          margin: 30px auto 0; } }
      #renovation .contents-area #cont02 .cont__box .cont__box--flex {
        display: flex; }
        @media only screen and (max-width: 1199px) {
          #renovation .contents-area #cont02 .cont__box .cont__box--flex {
            flex-direction: column; } }
        #renovation .contents-area #cont02 .cont__box .cont__box--flex .contents-area {
          background: #6185bc;
          padding: 40px;
          position: relative;
          z-index: 1; }
          @media only screen and (max-width: 1199px) {
            #renovation .contents-area #cont02 .cont__box .cont__box--flex .contents-area {
              padding: 30px 5%; } }
          #renovation .contents-area #cont02 .cont__box .cont__box--flex .contents-area h4 {
            color: #fff;
            font-size: 3em;
            line-height: 1.5;
            letter-spacing: .1em;
            margin-bottom: 10px; }
            @media only screen and (max-width: 1199px) {
              #renovation .contents-area #cont02 .cont__box .cont__box--flex .contents-area h4 {
                max-width: 300px;
                font-size: 2em;
                margin: 0 auto; } }
            #renovation .contents-area #cont02 .cont__box .cont__box--flex .contents-area h4 span {
              font-size: 1.5em;
              font-weight: bold; }
          #renovation .contents-area #cont02 .cont__box .cont__box--flex .contents-area img {
            width: 300px; }
            @media only screen and (max-width: 1199px) {
              #renovation .contents-area #cont02 .cont__box .cont__box--flex .contents-area img {
                margin: 0 auto; } }
          #renovation .contents-area #cont02 .cont__box .cont__box--flex .contents-area.contents-area--reform:before {
            content: '';
            display: block;
            width: 50vw;
            height: 100%;
            background: #6185bc;
            position: absolute;
            top: 0;
            right: 50%;
            z-index: -1; }
            @media only screen and (max-width: 1199px) {
              #renovation .contents-area #cont02 .cont__box .cont__box--flex .contents-area.contents-area--reform:before {
                display: none; } }
          #renovation .contents-area #cont02 .cont__box .cont__box--flex .contents-area.contents-area--renovation:after {
            content: '';
            display: block;
            width: 50vw;
            height: 100%;
            background: #6185bc;
            position: absolute;
            top: 0;
            left: 50%;
            z-index: -1; }
            @media only screen and (max-width: 1199px) {
              #renovation .contents-area #cont02 .cont__box .cont__box--flex .contents-area.contents-area--renovation:after {
                display: none; } }
        #renovation .contents-area #cont02 .cont__box .cont__box--flex ul {
          width: 650px;
          display: grid;
          grid-template-columns: 190px 190px 190px;
          column-gap: 40px;
          grid-row-gap: 50px;
          margin: 0 auto; }
          @media only screen and (max-width: 1199px) {
            #renovation .contents-area #cont02 .cont__box .cont__box--flex ul {
              grid-template-columns: 1fr 1fr 1fr;
              order: 1;
              width: auto;
              padding: 30px 5%; } }
          @media only screen and (max-width: 499px) {
            #renovation .contents-area #cont02 .cont__box .cont__box--flex ul {
              grid-template-columns: 1fr 1fr;
              gap: 30px; } }
          @media only screen and (max-width: 1199px) {
            #renovation .contents-area #cont02 .cont__box .cont__box--flex ul li {
              max-width: 120px;
              margin: 0 auto; } }
  #renovation .contents-area #cont03 {
    padding: 90px 0 110px; }
    @media only screen and (max-width: 1199px) {
      #renovation .contents-area #cont03 {
        padding: 60px 0; } }
    #renovation .contents-area #cont03 h3 {
      text-align: center;
      color: #6185bc;
      font-size: 3em;
      line-height: 1.5;
      letter-spacing: .1em;
      margin-bottom: 70px; }
      @media only screen and (max-width: 1199px) {
        #renovation .contents-area #cont03 h3 {
          font-size: 2em;
          margin-bottom: 30px; } }
      #renovation .contents-area #cont03 h3 span {
        font-size: 1.5em;
        font-weight: bold; }
    @media only screen and (max-width: 599px) {
      #renovation .contents-area #cont03 .works__pc {
        display: none; } }
    #renovation .contents-area #cont03 .works__sp {
      display: none; }
      @media only screen and (max-width: 599px) {
        #renovation .contents-area #cont03 .works__sp {
          display: block; } }
    #renovation .contents-area #cont03 p {
      text-align: right;
      color: #6185bc;
      font-size: 1.3em;
      margin: 25px 30px 0 0; }
      @media only screen and (max-width: 1199px) {
        #renovation .contents-area #cont03 p {
          margin: 15px 2% 0 0; } }
    #renovation .contents-area #cont03 .cont__box {
      width: 950px;
      background: #fff;
      padding: 80px 60px 70px 90px;
      margin: 120px auto; }
      @media only screen and (max-width: 1199px) {
        #renovation .contents-area #cont03 .cont__box {
          width: 84%;
          padding: 10px 4%;
          margin: 60px auto; } }
      #renovation .contents-area #cont03 .cont__box h4 {
        text-align: center;
        color: #6185bc;
        font-size: 4em;
        margin-bottom: 60px; }
        @media only screen and (max-width: 1199px) {
          #renovation .contents-area #cont03 .cont__box h4 {
            font-size: 2em;
            line-height: 1.5;
            margin-bottom: 30px; } }
      #renovation .contents-area #cont03 .cont__box dl {
        display: flex;
        color: var(--text-color);
        line-height: 90px;
        letter-spacing: .1em;
        border-bottom: 2px dotted #dfdfe0;
        margin-bottom: 10px;
        position: relative; }
        @media only screen and (max-width: 1199px) {
          #renovation .contents-area #cont03 .cont__box dl {
            display: block;
            max-width: 500px;
            line-height: 1.5;
            border: none;
            margin: 0 auto 10px; } }
        #renovation .contents-area #cont03 .cont__box dl:after {
          content: '';
          width: 120px;
          height: 2px;
          background: #fff;
          position: absolute;
          bottom: -2px;
          left: 0; }
          @media only screen and (max-width: 1199px) {
            #renovation .contents-area #cont03 .cont__box dl:after {
              display: none; } }
        #renovation .contents-area #cont03 .cont__box dl dt {
          width: 90px;
          margin-right: 25px;
          position: relative; }
          @media only screen and (max-width: 1199px) {
            #renovation .contents-area #cont03 .cont__box dl dt {
              width: 60px;
              position: absolute;
              top: 0;
              left: 0; } }
          #renovation .contents-area #cont03 .cont__box dl dt:after {
            content: '';
            display: block;
            width: 2px;
            height: 24px;
            background: #6185bc;
            position: absolute;
            bottom: -13px;
            left: 45px;
            z-index: 1; }
            @media only screen and (max-width: 1199px) {
              #renovation .contents-area #cont03 .cont__box dl dt:after {
                height: 120px;
                bottom: auto;
                top: 0;
                left: 30px;
                z-index: -1; } }
        #renovation .contents-area #cont03 .cont__box dl dd {
          font-size: 1.8em;
          padding-bottom: 10px; }
          @media only screen and (max-width: 1199px) {
            #renovation .contents-area #cont03 .cont__box dl dd {
              font-size: 1.6em;
              border-bottom: 2px dotted #dfdfe0;
              margin: 0 0 15px 75px; } }
          #renovation .contents-area #cont03 .cont__box dl dd.ttl {
            width: 320px;
            font-size: 2.5em; }
            @media only screen and (max-width: 1199px) {
              #renovation .contents-area #cont03 .cont__box dl dd.ttl {
                width: auto;
                font-size: 2em;
                border: none;
                margin: 0 0 5px 75px; } }
        #renovation .contents-area #cont03 .cont__box dl:last-child {
          border: none;
          margin: 0; }
          @media only screen and (max-width: 1199px) {
            #renovation .contents-area #cont03 .cont__box dl:last-child {
              margin: 0 auto; } }
          #renovation .contents-area #cont03 .cont__box dl:last-child dt:after {
            display: none; }
          #renovation .contents-area #cont03 .cont__box dl:last-child dd {
            padding: 0;
            border: none; }
    #renovation .contents-area #cont03 .tel {
      display: block;
      width: 800px;
      margin-left: calc(50% - 450px); }
      @media only screen and (max-width: 1199px) {
        #renovation .contents-area #cont03 .tel {
          width: 98%;
          max-width: 600px;
          margin: 0 auto; } }