/* ==========================================================================
   Foundation
========================================================================== */
@media screen and (max-width: 780px) {
  .sp-hidden {
    display: none !important; } }

.pc-hidden {
  display: none; }
  @media screen and (max-width: 780px) {
    .pc-hidden {
      display: block; } }

body {
  margin: 0;
  padding: 0; }

p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, form, iframe, div, section, header, main {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

img {
  width: 100%;
  height: auto;
  vertical-align: bottom; }

li {
  list-style-type: none; }

a {
  text-decoration: none;
  outline: none;
  transition: all 0.2s; }

a:hover {
  opacity: 0.8; }

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #2c2b27; }

.btns {
  padding: 80px 0; }
  .btns-inner {
    display: flex;
    justify-content: space-between;
    width: 820px;
    margin: 0 auto; }
    .btns-inner li {
      width: 400px; }
  @media screen and (max-width: 1050px) {
    .btns {
      padding: 40px 0; }
      .btns-inner {
        width: 90%; }
        .btns-inner li {
          width: 90%;
          margin: 0 auto 1em; } }
  @media screen and (max-width: 780px) {
    .btns {
      padding: 20px 0; }
      .btns-inner {
        width: 100%;
        flex-direction: column;
        margin: 0 auto 30px; }
        .btns-inner li {
          width: 80%;
          margin: 0 auto 1em; } }

.kv {
  width: 100%;
  background: url("/assets/images/lp02/kv_bg.jpg?231130") no-repeat center center;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around; }
  @media screen and (max-width: 780px) {
    .kv {
      padding-bottom: 12vw;
      background: url("/assets/images/lp02/kv_bg_sp.jpg?231130") no-repeat center center;
      background-size: cover; } }
  .kv .renoduce-logo {
    position: absolute;
    top: 0;
    left: 30px;
    width: 250px; }
    @media screen and (max-width: 1050px) {
      .kv .renoduce-logo {
        width: 25%;
        min-width: 120px; } }
    @media screen and (max-width: 480px) {
      .kv .renoduce-logo {
        left: 0px; } }
  .kv .site-title {
    width: 100%;
    margin: auto auto 0; }
  .kv .kv-text {
    width: 1030px;
    margin: 0 auto auto; }
    @media screen and (max-width: 1200px) {
      .kv .kv-text {
        width: 76%; } }
    @media screen and (max-width: 1050px) {
      .kv .kv-text {
        width: 90%; } }
  .kv .btns {
    position: absolute;
    bottom: -60px;
    left: 50%;
    width: 860px;
    margin-bottom: 0px;
    margin-left: -430px; }
    .kv .btns div {
      width: 430px;
      padding: 15px;
      background: #FFF;
      border-radius: 20px; }
    @media screen and (max-width: 1050px) {
      .kv .btns {
        width: 90%;
        margin-left: -45%; }
        .kv .btns div {
          width: 90%;
          margin: 0 auto 1em; } }
    @media screen and (max-width: 780px) {
      .kv .btns {
        width: 100%;
        flex-direction: column;
        margin-left: -50%;
        bottom: -64vw; }
        .kv .btns div {
          width: 80%;
          margin: 0 auto 1em;
          padding: 0;
          background: none; } }

.area-title {
  font-size: 42px;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin: 60px 0 70px;
  position: relative;
  text-align: center; }
  .area-title span {
    background: url("/assets/images/lp02/area_title_border.png") repeat-x left bottom;
    background-size: 50px 20px;
    padding: 0 20px 5px; }
  @media screen and (max-width: 1050px) {
    .area-title {
      font-size: 23px;
      margin: 30px 0 35px; }
      .area-title span {
        background-size: 25px 10px;
        padding: 0 10px 1px; } }

.staff {
  padding: 1px 0 30px;
  background: #e2e0d5; }
  .staff-inner {
    max-width: 960px;
    padding-bottom: 30px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
  .staff-block {
    width: 25%;
    margin: 30px 0;
    padding: 0 10px; }
  .staff-img {
    width: 120px;
    margin: 0 auto 20px; }
  .staff-comment {
    background: #FFF;
    padding: 10px;
    border-radius: 10px;
    position: relative; }
    .staff-comment::after {
      content: '';
      display: block;
      width: 18px;
      height: 13px;
      background: url("/assets/images/lp02/staff_fukidashi_arrow.png") no-repeat left top;
      background-size: 18px 13px;
      position: absolute;
      top: -13px;
      left: 50px; }
    .staff-comment .comment dt {
      font-size: 12px;
      text-align: center;
      padding: 2px;
      border-radius: 10px; }
    .staff-comment .comment dd {
      padding: 0.5em 1em 1em;
      font-size: 13px;
      letter-spacing: 0.1em;
      color: #333; }
    .staff-comment .comment1 dt {
      background: #fff600; }
    .staff-comment .comment1 dd {
      min-height: 7em; }
    .staff-comment .comment2 dt {
      background: #e2e0d5; }
    .staff-comment .comment2 dd {
      min-height: 4.2em; }
  .staff-name {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2em; }
    .staff-name span.en {
      font-size: 12px;
      display: block;
      padding: 2px 0 8px; }
  @media screen and (max-width: 1050px) {
    .staff-inner {
      padding: 0 30px;
      justify-content: center; }
    .staff-block {
      width: 240px;
      margin: 30px 0;
      padding: 0 10px; } }
  @media screen and (max-width: 780px) {
    .staff-inner {
      padding: 0 20px;
      justify-content: center; }
    .staff-block {
      width: 100%;
      margin: 20px 0;
      padding: 0 10px;
      position: relative; }
      .staff-block .staff-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 22%;
        margin: 0;
        z-index: 1; }
      .staff-block .staff-comment {
        margin: 0 0 0 26%;
        padding: 10px;
        border-radius: 10px;
        position: relative; }
        .staff-block .staff-comment::after {
          top: 60px;
          left: -13px;
          transform: rotateZ(-90deg); }
        .staff-block .staff-comment .comment1 dd {
          min-height: auto; }
        .staff-block .staff-comment .comment2 dd {
          min-height: auto; }
      .staff-block:nth-child(2n) .staff-img {
        left: auto;
        right: 0; }
      .staff-block:nth-child(2n) .staff-comment {
        margin: 0 26% 0 0; }
        .staff-block:nth-child(2n) .staff-comment::after {
          top: 60px;
          left: auto;
          right: -13px;
          transform: rotateZ(-90deg) rotateX(180deg); }
    .staff-name {
      font-size: 16px; }
      .staff-name span.en {
        font-size: 11px; } }

.jirei-items {
  background: url("/assets/images/lp02/jirei_bg_loop.png") repeat-x left 30px;
  background-size: 77px 268px; }
  @media screen and (max-width: 1050px) {
    .jirei-items {
      background: none; } }
  .jirei-items-inner {
    display: flex;
    justify-content: space-between;
    width: 1050px;
    margin: 0 auto 30px; }
    @media screen and (max-width: 1050px) {
      .jirei-items-inner {
        width: 100%;
        flex-direction: column;
        align-items: center;
        margin: 0 auto 30px; } }
.jirei-item {
  width: 300px;
  border: solid 2px #000;
  box-shadow: 5px 5px 20px 5px rgba(0, 0, 0, 0.2); }
  @media screen and (max-width: 1050px) {
    .jirei-item {
      width: 75%;
      min-width: 280px;
      max-width: 420px;
      margin-bottom: 4em; } }
  .jirei-item dt {
    border-bottom: solid 2px #000; }
  .jirei-item dd {
    background: #FFF;
    font-size: 14px;
    position: relative; }
.jirei-name {
  padding: 13px 0 8px;
  margin: 0 13px;
  font-size: 17px;
  line-height: 1.4em; }
.jirei-spec {
  padding: 8px 0;
  margin: 0 13px;
  border-top: solid 1px #c9c5bc;
  border-bottom: solid 1px #c9c5bc; }
.jirei-price {
  padding: 8px 0 10px 4.3em;
  margin: 0 13px;
  font-size: 21px;
  font-weight: 700;
  position: relative; }
  .jirei-price span.highlight {
    position: absolute;
    top: 14px;
    left: 0;
    display: inline-block;
    background: #fdfb07;
    border-radius: 5px;
    padding: 4px 8px;
    margin-right: 5px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1em; }
  .jirei-price span.yen {
    margin-left: 4px;
    font-size: 13px;
    font-weight: 400; }
.jirei-fukidashi {
  width: 113px;
  position: absolute;
  bottom: 10px;
  right: -52px; }
  @media screen and (max-width: 480px) {
    .jirei-fukidashi {
      width: 90px;
      bottom: 10px;
      right: -42px; } }

.reasons {
  background: url("/assets/images/lp02/reason_bg.jpg") repeat-y center top;
  background-size: 100% auto;
  padding-top: 30px; }
  .reasons .area-title {
    margin-bottom: 90px; }
    @media screen and (max-width: 1050px) {
      .reasons .area-title {
        margin-bottom: 50px; } }
  .reasons .reason {
    background: #FFF;
    margin-bottom: 80px; }
    .reasons .reason-footer {
      max-width: 900px;
      margin: 0 auto; }
    @media screen and (max-width: 1050px) {
      .reasons .reason {
        margin-bottom: 50px; } }
    .reasons .reason-inner {
      width: 1000px;
      margin: 0 auto;
      position: relative; }
      @media screen and (max-width: 1050px) {
        .reasons .reason-inner {
          width: 90%; } }
      @media screen and (max-width: 780px) {
        .reasons .reason-inner {
          padding-top: 54vw; } }
    .reasons .reason-num {
      position: absolute;
      top: -15px;
      left: 0;
      width: 97px;
      z-index: 2; }
      @media screen and (max-width: 1050px) {
        .reasons .reason-num {
          width: 9vw;
          top: -1vw; } }
      @media screen and (max-width: 780px) {
        .reasons .reason-num {
          width: 16vw;
          top: 1vw; } }
    .reasons .reason-fukidashi {
      position: absolute;
      top: 35px;
      left: 0;
      width: 460px;
      z-index: 1; }
      @media screen and (max-width: 1050px) {
        .reasons .reason-fukidashi {
          width: 42%; } }
      @media screen and (max-width: 780px) {
        .reasons .reason-fukidashi {
          width: 100%; } }
    .reasons .reason-img {
      width: 525px;
      margin-left: auto; }
      @media screen and (max-width: 1050px) {
        .reasons .reason-img {
          width: 58%; } }
      @media screen and (max-width: 780px) {
        .reasons .reason-img {
          width: 100%; } }
  .reasons #reason2 .reason-num {
    left: auto;
    right: 0; }
  .reasons #reason2 .reason-fukidashi {
    left: auto;
    right: 0; }
  .reasons #reason2 .reason-img {
    width: 525px;
    margin: 0;
    margin-right: auto; }
    @media screen and (max-width: 1050px) {
      .reasons #reason2 .reason-img {
        width: 58%; } }
    @media screen and (max-width: 780px) {
      .reasons #reason2 .reason-img {
        width: 100%; } }

.example {
  margin-bottom: 70px; }
  @media screen and (max-width: 1050px) {
    .example {
      margin-bottom: 35px; } }
  .example h3 {
    text-align: center;
    font-size: 23px;
    letter-spacing: 0.075em;
    margin-bottom: 20px; }
    @media screen and (max-width: 1050px) {
      .example h3 {
        font-size: 14px; } }
  .example-people {
    width: 805px;
    padding-right: 80px;
    margin: 0 auto 20px; }
    @media screen and (max-width: 1050px) {
      .example-people {
        width: 90%;
        max-width: 600px;
        padding: 0; } }
  .example-thumbs {
    display: flex;
    width: 1035px;
    margin: 0 auto 50px;
    justify-content: space-between; }
    @media screen and (max-width: 1050px) {
      .example-thumbs {
        width: 90%;
        margin: 0 auto 30px; } }
    @media screen and (max-width: 780px) {
      .example-thumbs {
        flex-wrap: wrap; } }
    .example-thumbs .thumb {
      width: 240px; }
      @media screen and (max-width: 1050px) {
        .example-thumbs .thumb {
          padding: 5px; } }
      @media screen and (max-width: 780px) {
        .example-thumbs .thumb {
          width: 50%; }
          .example-thumbs .thumb:first-child {
            margin-left: 0; } }
  .example .case {
    display: flex;
    width: 1010px;
    margin: 0 auto;
    border: solid 2px #000;
    position: relative; }
    @media screen and (max-width: 1050px) {
      .example .case {
        width: 90%;
        max-width: 600px;
        flex-direction: column; } }
    .example .case-fukidashi {
      width: 165px;
      position: absolute;
      top: -146px;
      right: -10px; }
      @media screen and (max-width: 1050px) {
        .example .case-fukidashi {
          width: 120px;
          top: 330px;
          right: -15px; } }
      @media screen and (max-width: 780px) {
        .example .case-fukidashi {
          width: 120px;
          top: calc( 90vw/11*5 ); } }
    .example .case-img {
      width: 430px;
      border-right: solid 2px #000; }
      @media screen and (max-width: 1050px) {
        .example .case-img {
          width: 100%;
          border: none; } }
      .example .case-img img {
        opacity: 0; }
    .example .case-data {
      width: 580px;
      padding: 18px;
      font-size: 13px;
      line-height: 1.4em;
      position: relative; }
      @media screen and (max-width: 1050px) {
        .example .case-data {
          width: 100%; } }
      .example .case-data .price {
        position: absolute;
        top: 16px;
        right: 15px;
        font-size: 26px;
        font-weight: 700;
        line-height: 0.9em;
        padding-left: 105px; }
        @media screen and (max-width: 1050px) {
          .example .case-data .price {
            position: relative;
            top: 0;
            left: 0; } }
        .example .case-data .price-name {
          position: absolute;
          top: 0;
          left: 0;
          background: #de2a71;
          color: #FFF;
          font-size: 15px;
          line-height: 1em;
          padding: 5px 8px 6px;
          margin-right: 5px;
          border-radius: 4px;
          font-weight: 400; }
        .example .case-data .price .yen {
          font-size: 16px;
          margin-left: 3px;
          font-weight: 400; }
          .example .case-data .price .yen .tax {
            font-size: 12px; }
      .example .case-data .specs {
        overflow: hidden;
        padding: 10px 0; }
        .example .case-data .specs li {
          font-size: 15px;
          float: left;
          position: relative;
          padding-left: 95px;
          padding-right: 20px;
          line-height: 1.8em;
          margin-bottom: 10px; }
          .example .case-data .specs li:nth-child(3) {
            clear: left; }
        .example .case-data .specs .spec-name {
          display: block;
          width: 85px;
          background: #fdfb07;
          text-align: center;
          position: absolute;
          top: 0;
          left: 0;
          border-radius: 5px; }
    .example .case-name {
      text-align: left;
      font-size: 19px;
      margin-bottom: 20px; }
    .example .case .comment {
      background: #e2e0d5;
      padding: 15px;
      border-radius: 10px;
      line-height: 1.6em;
      letter-spacing: 0.1em; }

.faq {
  padding: 1px 0 100px;
  background: #faf9f4; }
  @media screen and (max-width: 1050px) {
    .faq {
      padding: 1px 5vw 5vw; } }
  .faq-block {
    width: 950px;
    margin: 0 auto;
    padding: 10px 40px;
    background: #FFF;
    border: solid 8px #fff600; }
    .faq-block dl {
      padding: 30px 0;
      border-top: solid 2px #eeece5;
      font-size: 19px;
      letter-spacing: 0.075em; }
      .faq-block dl:first-child {
        border-top: none; }
      .faq-block dl dt {
        position: relative;
        padding: 0.5em 0 0 2.4em;
        margin-bottom: 1.4em; }
        .faq-block dl dt span.q {
          display: block;
          position: absolute;
          font-size: 30px;
          font-weight: 700;
          top: 0;
          left: 0; }
      .faq-block dl dd {
        position: relative;
        color: #005ead;
        padding: 0.5em 0 0 2.4em; }
        .faq-block dl dd span.a {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          font-size: 30px;
          font-weight: 700; }
        .faq-block dl dd a.link-pink {
          color: #e12971;
          text-decoration: underline; }
          .faq-block dl dd a.link-pink:hover {
            opacity: 0.9; }
    @media screen and (max-width: 1050px) {
      .faq-block {
        width: 100%;
        padding: 10px 20px; }
        .faq-block dl {
          padding: 20px 0;
          font-size: 14px; }
          .faq-block dl dt {
            padding: 0.5em 0 0 2em;
            margin-bottom: 1em; }
            .faq-block dl dt span.q {
              font-size: 19px; }
          .faq-block dl dd {
            padding: 0.5em 0 0 2em; }
            .faq-block dl dd span.a {
              font-size: 19px; } }