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

.btn__more.btn {
  & a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    border-width: 1px;

    position: relative;

    &:after {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      border-top: solid 2px #231815;
      border-right: solid 2px #231815;

      top: 0;
      right: 14px;
      bottom: 0;
      margin: auto;
      transform: rotate(45deg);
    } /* after */

    &:hover:after {
      border-color: #fff;
    } /*hover */
  } /* a */
} /* .btn__more.btn */
@media screen and (min-width:640px) {
  .btn__more.btn {
    a {
      height: 45px;
      font-size: 17px;

      &:after {
        right: 20px;
      } /* after */
    }
    &.is_right {margin-left: auto;margin-right: 0;}
  } /* .btn__more.btn */
}

#about.section {
  margin-bottom: 0;
  & .section-wrap {background-color: #F5F5F5;}
  & .section-inner {
    width: calc(670% / 7.50);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    position: relative;
  }
  & .section-ttl__main.black {
    color: #231815;
  } /* section-ttl__main */
  & .section-ttl {
    margin-bottom: 13px;
  } /* .section .section-ttl */

  & .cont--about {
    width: 100%;
    /* width: calc(670% / 7.50);
    margin-left: auto;
    margin-right: auto; */
  } /*cont--about*/
} /* about */

@media screen and (min-width:640px) {
  #about.section {
    margin-top: 0;
    margin-bottom: 0;
    & .section-inner {
      max-width: 1200px!important;
      width: 100%;
      padding: 100px 0;
    }

    & .section-ttl {
      margin-bottom: 60px;
    } /* .section .section-ttl */

    & .section-thumb {
      max-width: 550px;
      max-height: 352px;
      background-position: center;
    } /* section-thumb */

    & .cont--about {
      width: 100%;
    } /*cont--about*/
  } /* about */
}

#Exterior_wall_diagnosis {
  background: #22AC38;
  padding: 50px 0;
  background-image: url('/wp/wp-content/themes/apartment-gaihekitosou/img/top/doted_sp@1.5x.png');
  background-repeat: repeat;
  background-size: contain;
  background-position: 0 0;
  
  
  & .section-ttl__sub,
  & .section-ttl__main {
    color: #fff;
  } /* section-ttl */

  & .section-ttl__sub {font-size: 15px;line-height: 1;display: block;}
  & .section-ttl__main {font-size: 33px;line-height: 1;display: block;margin-top: 15px;}

  & .checkBox {
    margin-top: 25px;
  } /* & .checkBox */

  & .checkImage {
    display: inline-block;
    max-width: 167px;
    width: 100%;
  }


  & #yesno_wrap {
    margin-top: 24px;

    & .yesno_q {
      background: #fff;
      border: none;
      padding: 23px 1em 20px;

      & dt {
        padding: 0;

        & span {
          display: inline-block;
          background: #22AC38;
          color: #fff;
          font-size: 20px;
          font-weight: bold;
          border-radius: 3.5px;

          padding: 10px;
          min-width: 55px;

          position: relative;

          &:before {
            content: "";
            position: absolute;
            width: 12px;
            aspect-ratio: 1 / cos(30deg);
            clip-path: polygon(50% 100%, 100% 0, 0 0);
            background: #22AC38;
            bottom: -10px;
            left: 0;
            right: 0;
            margin: auto;
          } /* before */
        } /* span */ 
      } /* dt */

      & dd {
        font-size: 15px;
        line-height: 1.53;
        font-weight: 500;

        border-radius: 7px;
        padding: 0!important;
      } /* dd */
    } /* yesno_q */

    & #choices {
      margin-top: -10px !important;

      & li:not(:first-child) {
        margin-top: 12px;
      } /* & li:not(:first-child) */

      & li button {
        cursor: pointer;
        background: #FFF100;
        color: #036EB8;
        border-radius: 5px;

        &:hover {
          color: #E60012;
        }
      } /* & li button */
    } /* choices */
  } /* yesno_wrap */

  & .section-wrap {
    max-width: 670px;
    width: calc(670% / 7.50);
    margin-left: auto;
    margin-right: auto;
  } /* section-wrap */
} /* Exterior_wall_diagnosis */

@media screen and (min-width:640px) {
  #Exterior_wall_diagnosis {
    padding: 100px 24px;
    background-image: url('/wp/wp-content/themes/apartment-gaihekitosou/img/top/doted_pc@1.5x.png');

    & .section-wrap {
      max-width: 848px;
      width: 100%;
    } /* section-wrap */

    & .section-ttl__sub {font-size: 20px;}
    & .section-ttl__main {font-size: 50px;margin-top: 20px;}

    & .checkBox {
      display: flex;
      align-items: center;
      justify-content: space-between;

      margin-top: 50px;
    } /* checkBox */

    & .checkImage {
      max-width: 334px;
      width: 50%;
    }

    & #yesno_wrap {
      margin-top: unset;
      max-width: 428px;
      width: 100%;

      & .yesno_q {
        padding: 30px 1em 25px;

        & dt {

          & span {
            line-height: 22px;
            font-size: 25px;
            border-radius: 5px;
            padding: 10px;
            min-width: 70px;

            &:before {
              width: 15px;
            } /* before */
          } /* span */ 
        } /* dt */

        & dd {
          font-size: 20px;
          line-height: 1.5;
          border-radius: 10px;
          padding: 0;

          
        } /* dd */
      } /* yesno_q */

      & #choices {
        margin-top: -5px !important;
        & li {
          &:not(:first-child){margin-top: 10px;}
          & button {
            border-radius: 5px;
          }
        } /* & li button */
      } /* choices */
    } /* yesno_wrap */
  } /* #Exterior_wall_diagnosis */
}

/* WORKS */
#works.section-top{
  & .section-inner {
    width: 100%;
  }
  & .works-list {
      margin: unset;
      & .works-list-item {
        border: none;
        display: block;
        box-shadow: none;
        
        & a {
          position: static;
          display: block;
          text-indent:0;

          & .works-item-img {
            height: 100%;

            & img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          } /*works-item-img*/

          & .titleName {display: block;font-size: 16px;font-weight: bold;margin-top: 5px;}
          & .thumb-cat-list {
            display: flex;
            justify-content: flex-start;
            gap: 5px;
            margin-top: 10px;

            & li {
              line-height: 18px;
              font-size: 12px;
              padding: 0 .5em;
              border: 1px solid #231815;
            } /* li */
          } /* thumb-cat-list */
        } /* a */
      } /* works-list-item */
    } /* works-list */
} /* #works.section-top */
@media screen and (min-width:640px) {
  #works.section-top{
    & .section-inner {
      max-width: none;
      width: 100%;
    } /* section-inner */

    & .works-list {
      min-height: 330px;
      height: 100%;

      & .works-list-item {
        & a {
          height: 270px;

          & .titleName {font-size: 25px;margin-top: 10px;} 
        } /* a */
      } /* works-list-item */
    } /* works-list */
  } /* #works.section-top */
} /* @media screen and (min-width:640px) { */
/* END WORKS */

/* VOICE */
#voice {
  background-color: #F5F5F5;

  & .section-ttl {
    & .section-ttl__main {
      color: #22AC38;
      font-size: 33px;
      font-weight: bold;
      line-height: 1;
      display: block;
    }
    & .section-ttl__sub {
      font-size: 12.5px;
      line-height: 1.7;
      display: block;
    }
  } /* section-ttl */

  & .section-wrap {
    width: calc(670% / 7.50);
    margin-left: auto;
    margin-right: auto;
  } /* section-wrap */

  & .voice_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    grid-column-gap: 15px;
    grid-row-gap: 25px;
    margin-top: 20px;

    & li {
      width: 47%;
      font-size: 12.5px;

      & p {margin-top: 1em;}
    } /* li */
  } /* voice_wrap */

  & .btn__more {
    margin-top: 50px;
  } /* btn__more */

  padding: 50px 0;
  @media screen and (min-width:640px) {
    padding: 100px 0;

    & .section-ttl {
      & .section-ttl__main {font-size: 50px;}
      & .section-ttl__sub {
        font-size: 18px;
      }
    } /* section-ttl */

    & .section-wrap {
      max-width: 1200px;
      width: 90%;
    } /* & .section-wrap */

    & .voice_wrap {
      grid-column-gap: 20px;
      margin-top: 50px;

      & li {
        width: 20vw;
        max-width: 285px;

        font-size: 20px;
      } /* li */
    } /* voice_wrap */

    & .btn__more {

    } /* btn__more */
  } /* media */

} /* voice */
/* END VOICE */

#flow {
  & .section-inner {margin-bottom: 0;}
} /*flow*/

/* MESSAGE */
#message.section {
  margin-top: 0;
  margin-bottom: 0;
  & .section-wrap {background-color: #F5F5F5;}
  & .section-ttl__main {
  } /* section-ttl__main */

  & .section-inner {
    width: calc(670% / 7.50);
    margin-left: auto;
    margin-right: auto;
  } /*section-inner */
  
  & .flex-container {
    & .section-ttl {
      font-size: 22.5px;
      text-align: left;
      margin-right: auto;
      margin-top: 7px;
      margin-bottom: 15px;

      & .section-ttl__main {font-size: 22.5px;color: #231815;}
    }
  } /* & .flex-container */

  & .cont--about {
    width: 100%;

    & p.text {
      font-size: 15px;
      line-height: 1.5;
    } /* p.text */

    & .text {
      &.txt-right {
        text-align: right;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.2;
        margin-left: auto;
        margin-bottom: 0;

        & .large {
          font-size: 20px;
        }
      } /* txt-right */
    } /* text */
  } /* cont--about */

  @media screen and (min-width:640px) {
    & .section-inner {
      max-width: 1200px;
    } /* section-inner */

    & .section-ttl__main {
    } /* section-ttl__main */
    
    & .flex-container {
      & .section-ttl {
        font-size: 30px;
        margin-bottom: 30px;
        margin-top: 0;
        & .section-ttl__main {font-size: 30px;}
      }
    } /* & .flex-container */

    & .cont--about {
      max-width: 580px;
      width: 100%;
      margin-right: auto;
      

      & p.text {
        font-size: 16px;
        line-height: 1.625;
      } /* & p.text */

      & .text {
        &.txt-right {
          font-size: 14px;
          & .large {
            font-size: 20px;
          }
        } /* txt-right */
      } /* text */
    } /* cont--about */
  } /* media */
} /* #message.section */
/* END MESSAGE */